MediaWiki:Gadget-falloff.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

// Damage falloff charts ({{Falloff chart}}): a line and a readout follow the
// mouse or a finger across the plot, like the in-game inspect window.
mw.hook('wikipage.content').add(function ($content) {
	$content.find('.ts-falloff-plot').each(function () {
		var plot = this;
		var bars = plot.querySelectorAll('.ts-falloff-bar');
		if (!bars.length) {
			return;
		}
		bars.forEach(function (bar) {
			bar.removeAttribute('title');
		});
		var line = document.createElement('div');
		line.style.cssText = 'position:absolute;top:0;bottom:0;width:0;border-left:2px solid #202122;pointer-events:none;display:none;';
		var readout = document.createElement('div');
		readout.style.cssText = 'position:absolute;top:4px;padding:2px 6px;background:#fff;border:1px solid #a2a9b1;'
			+ 'border-radius:3px;font-size:85%;white-space:pre;pointer-events:none;display:none;z-index:1;';
		plot.appendChild(line);
		plot.appendChild(readout);

		function show(clientX) {
			var box = plot.getBoundingClientRect();
			var x = Math.min(Math.max(clientX - box.left, 0), box.width - 1);
			var bar = bars[Math.min(bars.length - 1, Math.floor(x / box.width * bars.length))];
			line.style.left = x + 'px';
			readout.textContent = bar.getAttribute('data-readout');
			line.style.display = readout.style.display = 'block';
			var w = readout.offsetWidth;
			readout.style.left = (x + 8 + w > box.width ? Math.max(0, x - 8 - w) : x + 8) + 'px';
		}
		function hide() {
			line.style.display = readout.style.display = 'none';
		}
		plot.addEventListener('mousemove', function (e) { show(e.clientX); });
		plot.addEventListener('mouseleave', hide);
		plot.addEventListener('touchstart', function (e) { show(e.touches[0].clientX); }, { passive: true });
		plot.addEventListener('touchmove', function (e) { show(e.touches[0].clientX); }, { passive: true });
	});
});