U:54212577/sortableTableAnimation.js

"use strict";
(() => {
	window.sta ??= 350;
	const updateLastY = (tr, offsetTop) =>
		(tr.lastY = tr.offsetTop - offsetTop);
	[...document.body.querySelectorAll("table.sortable")].forEach(table => {
		const offsetTop = table.querySelector("tbody > tr").offsetTop;
		[...table.querySelectorAll("tbody > tr")].forEach(tr =>
			updateLastY(tr, offsetTop)
		);
		[...table.querySelectorAll("thead > tr > th.headerSort")].forEach(
			th => {
				th.onclick = () => {
					const trs = [...table.querySelectorAll("tbody > tr")];
					trs.forEach(tr => {
						const dis = tr.lastY - tr.offsetTop + offsetTop;
						tr.style.transition = "";
						tr.style.transform = `translateY(${dis}px)`;
					});
					trs.forEach(tr => {
						tr.style.transition = `transform ${window.sta}ms`;
						tr.style.transform = "";
						updateLastY(tr, offsetTop);
					});
				};
				const mwCollapsibleToggle = th.getElementsByClassName(
					"mw-collapsible-toggle"
				)[0];
				if (!mwCollapsibleToggle) return;
				mwCollapsibleToggle.onclick = () =>
					[...table.querySelectorAll("tbody > tr")].forEach(tr =>
						updateLastY(tr, offsetTop)
					);
			}
		);
		[...table.querySelectorAll("thead > tr")].forEach(tr => {
			if (getComputedStyle(tr).position !== "sticky") return;
			tr.style.zIndex = +getComputedStyle(tr).zIndex || 1;
		});
	});
})();