「MediaWiki:Common.js」の版間の差分

2022年6月5日 (日) 10:59時点における最新版

/* ここにあるすべてのJavaScriptは、すべてのページ読み込みですべての利用者に対して読み込まれます */
var tooltip

function updatePosition(e) {
	var obj = $(e.currentTarget)
	var offset = obj.offset()
	var y = offset.top + obj.outerHeight()
	var maxY = $(window).scrollTop() + $(window).height() - $('#tooltip').outerHeight()
	if (y > maxY) {
		y = offset.top - obj.outerHeight()
	}
	tooltip
		.css('left', Math.min(
			$(window).width() - tooltip.outerWidth(),
			Math.max(
				0,
				Math.round(offset.left - 0.5 * (tooltip.outerWidth() - obj.outerWidth())))))
		.css('top', y)
}

function unescapeHtml(html) {
	return html
		.replace(/"/g, '"')
		.replace(/&/g, '&')
}

function showTooltip(e) {
	var escaped = $(this).attr('data-tooltip')
	var html = unescapeHtml(escaped)
	tooltip
		.css('display', 'block')
		.html(html)
	updatePosition(e)
	$(this).mousemove(updatePosition)
}

function hideTooltip(e) {
	tooltip.css('display', '')
	$(this).off('mousemove')
}

function updateWidth(classname) {
	var targetSelectors = [
		'tr:first th:nth-child(1), tr:first td:nth-child(1)',
		'tr:first th:nth-child(2), tr:first td:nth-child(2)',
	]
	
	// Reset the max width of each column in each table.
	$("." + classname).each(function(index, elem) {
		$.each(targetSelectors, function(_, target) {
			$(elem).find(target).first().width('')
		})
	})
	
	// Find the max width of each column across all tables.
	var colWidths = new Array(targetSelectors.length).fill(0)
	$("." + classname).each(function(index, elem) {
		$.each(targetSelectors, function(idx, target) {
			colWidths[idx] = Math.max(
				colWidths[idx],
				Math.ceil($(elem).find(target).first().width()))
		})
	})
	
	// Set each column in each table to the max width of that column across all tables.
	$("." + classname).each(function(index, elem) {
		$.each(targetSelectors, function(idx, target) {
			$(elem).find(target).first().width(colWidths[idx])
		})
	})
}

function observeRowStickyStuckState(classname) {
	var target = document.querySelector('.' + classname)
	if (target === null) return
	
	if (typeof IntersectionObserver === 'function') {
		var stuckClassname = classname + '--stuck'
		new IntersectionObserver(function(entries) {
			for (var i = 0; i < entries.length; ++i) {
				var entry = entries[i]
				if (!entry.isIntersecting) {
					entry.target.classList.add(stuckClassname)
				} else {
					entry.target.classList.remove(stuckClassname)
				}
			}
		}, { threshold: 1 }).observe(target)
	}
}


var targetClassname = 'damagetable'
$(window).resize(updateWidth.bind(null, targetClassname));
$(function(){
	tooltip = $("<div>", { id: 'tooltip' }).appendTo('body');
	$('[data-tooltip]')
		.mouseenter(showTooltip)
		.mouseleave(hideTooltip);
	updateWidth(targetClassname);
	observeRowStickyStuckState('row-sticky');
});