MediaWiki:Common.js - Revision history

Admin at 04:50, 10 February 2026

2026-02-10T04:50:14Z

← Older revision		Revision as of 14:50, 10 February 2026
Line 17:		Line 17:

	// Don't float if not using desktop		// Don't float if not using desktop
	if (window.innerWidth < ~~1200~~) return;		if (window.innerWidth < 600) return;
	const tocTop = toc.getBoundingClientRect().top + window.scrollY;		const tocTop = toc.getBoundingClientRect().top + window.scrollY;

Admin: Undo revision 103 by Admin (talk)

2026-02-10T04:31:21Z

Undo revision 103 by Admin (talk)

← Older revision		Revision as of 14:31, 10 February 2026
Line 47:		Line 47:
	toc.style.opacity = '1';		toc.style.opacity = '1';
	}		}






	~~mw.hook('wikipage.content').add(function () {~~
	~~const toc = document.querySelector('#toc, .vector-toc');~~
	~~if (!toc) return;~~

	~~// Create a placeholder so we can put it back exactly where it was~~
	~~const placeholder = document.createComment('TOC_PLACEHOLDER');~~
	~~toc.parentNode.insertBefore(placeholder, toc);~~

	~~function moveTocToBody() {~~
	~~if (toc.parentNode !== document.body) {~~
	~~document.body.appendChild(toc);~~
	}
	}

	~~function moveTocBack() {~~
	~~if (placeholder.parentNode && toc.parentNode === document.body) {~~
	~~placeholder.parentNode.insertBefore(toc, placeholder);~~
	}
	}

	~~// Example: call these where you toggle floating~~
	~~function enterFloating() {~~
	~~moveTocToBody();~~
	~~toc.classList.add('toc-floating');~~
	}

	~~function exitFloating() {~~
	~~toc.classList.remove('toc-floating');~~
	~~moveTocBack();~~
	}

	~~// ---- integrate with your existing onScroll() ----~~
	~~const tocTop = placeholder.getBoundingClientRect().top + window.scrollY;~~

	~~function onScroll() {~~
	~~if (window.scrollY > tocTop) {~~
	~~if (!toc.classList.contains('toc-floating')) {~~
	~~enterFloating();~~
	}
	~~} else {~~
	~~if (toc.classList.contains('toc-floating')) {~~
	~~exitFloating();~~
	}
	}
	}

	~~window.addEventListener('scroll', onScroll, { passive: true });~~
	~~onScroll();~~
	~~});~~

Admin at 04:29, 10 February 2026

2026-02-10T04:29:12Z

← Older revision		Revision as of 14:29, 10 February 2026
Line 47:		Line 47:
	toc.style.opacity = '1';		toc.style.opacity = '1';
	}		}






			mw.hook('wikipage.content').add(function () {
			const toc = document.querySelector('#toc, .vector-toc');
			if (!toc) return;

			// Create a placeholder so we can put it back exactly where it was
			const placeholder = document.createComment('TOC_PLACEHOLDER');
			toc.parentNode.insertBefore(placeholder, toc);

			function moveTocToBody() {
			if (toc.parentNode !== document.body) {
			document.body.appendChild(toc);
			}
			}

			function moveTocBack() {
			if (placeholder.parentNode && toc.parentNode === document.body) {
			placeholder.parentNode.insertBefore(toc, placeholder);
			}
			}

			// Example: call these where you toggle floating
			function enterFloating() {
			moveTocToBody();
			toc.classList.add('toc-floating');
			}

			function exitFloating() {
			toc.classList.remove('toc-floating');
			moveTocBack();
			}

			// ---- integrate with your existing onScroll() ----
			const tocTop = placeholder.getBoundingClientRect().top + window.scrollY;

			function onScroll() {
			if (window.scrollY > tocTop) {
			if (!toc.classList.contains('toc-floating')) {
			enterFloating();
			}
			} else {
			if (toc.classList.contains('toc-floating')) {
			exitFloating();
			}
			}
			}

			window.addEventListener('scroll', onScroll, { passive: true });
			onScroll();
			});

Admin at 04:28, 10 February 2026

2026-02-10T04:28:27Z

@@ Line 16: / Line 16: @@
+   }
    // Don't float if not using desktop
    if (window.innerWidth < 1200) return;
@@ Line 54: / Line 21: @@
    // Floating trigger: only float after scrolling past original position
    function onScroll() {
      if (window.scrollY > tocTop) {
@@ Line 66: / Line 32: @@
        toc.classList.remove('toc-floating');
        unpinHorizontalPosition();
+   }
+}

Admin at 03:58, 10 February 2026

2026-02-10T03:58:24Z

← Older revision		Revision as of 13:58, 10 February 2026
Line 54:		Line 54:

	// Floating trigger: only float after scrolling past original position		// Floating trigger: only float after scrolling past original position

	function onScroll() {		function onScroll() {
	if (window.scrollY > tocTop) {		if (window.scrollY > tocTop) {
	toc.classList.add('toc-floating');		// ONLY when we first enter floating state
			if (!toc.classList.contains('toc-floating')) {
			pinHorizontalPosition(); // 👈 snapshot left + width
			toc.classList.add('toc-floating');
			}
	} else {		} else {
			// Leaving floating state
	toc.classList.remove('toc-floating');		toc.classList.remove('toc-floating');
			unpinHorizontalPosition();
	// optional: when not floating, don’t keep it folded-looking		// optional: when not floating, don’t keep it folded-looking
	toc.classList.remove('toc-folded');		toc.classList.remove('toc-folded');
Line 64:		Line 71:
	btn.setAttribute('title', 'Hide table of contents');		btn.setAttribute('title', 'Hide table of contents');
	btn.textContent = '⟨⟨';		btn.textContent = '⟨⟨';
	}
	}		}
			}

	window.addEventListener('scroll', onScroll, { passive: true });		window.addEventListener('scroll', onScroll, { passive: true });

Admin at 03:53, 10 February 2026

2026-02-10T03:53:40Z

← Older revision		Revision as of 13:53, 10 February 2026
Line 8:		Line 8:
	if (!toc) return;		if (!toc) return;

			// Horizontal pin helper
			function pinHorizontalPosition() {
			const rect = toc.getBoundingClientRect();
			toc.style.setProperty('--toc-left', rect.left + 'px');
			toc.style.left = rect.left + 'px';
			toc.style.width = rect.width + 'px';
			}

	// Avoid duplicating if MW re-renders content		// Avoid duplicating if MW re-renders content

Admin at 03:53, 10 February 2026

2026-02-10T03:53:25Z

← Older revision		Revision as of 13:53, 10 February 2026
Line 8:		Line 8:
	if (!toc) return;		if (!toc) return;

	~~// Horizontal pin helper~~
	~~function pinHorizontalPosition() {~~
	~~const rect = toc.getBoundingClientRect();~~
	~~toc.style.setProperty('--toc-left', rect.left + 'px');~~
	~~toc.style.left = rect.left + 'px';~~
	~~toc.style.width = rect.width + 'px';~~
	}

	// Avoid duplicating if MW re-renders content		// Avoid duplicating if MW re-renders content

Admin at 03:52, 10 February 2026

2026-02-10T03:52:18Z

← Older revision		Revision as of 13:52, 10 February 2026
Line 7:		Line 7:
	const toc = document.getElementById('toc');		const toc = document.getElementById('toc');
	if (!toc) return;		if (!toc) return;

			// Horizontal pin helper
			function pinHorizontalPosition() {
			const rect = toc.getBoundingClientRect();
			toc.style.setProperty('--toc-left', rect.left + 'px');
			toc.style.left = rect.left + 'px';
			toc.style.width = rect.width + 'px';
			}

	// Avoid duplicating if MW re-renders content		// Avoid duplicating if MW re-renders content

Admin at 03:40, 10 February 2026

2026-02-10T03:40:35Z

@@ Line 4: / Line 4: @@
    TOC - floating
   */
-mw.hook('wikipage.content').add(function () {
+ mw.hook('wikipage.content').add(function () {
    const toc = document.getElementById('toc');
    if (!toc) return;
    const tocTop = toc.getBoundingClientRect().top + window.scrollY;
    function onScroll() {
      if (window.scrollY > tocTop) {
@@ Line 15: / Line 51: @@
      } else {
        toc.classList.remove('toc-floating');
+     }
+   }
-  // Desktop only listener
-  if (window.innerWidth < 1200) return;
+   window.addEventListener('scroll', onScroll, { passive: true });
-   window.addEventListener('scroll', onScroll);
+  onScroll();
 });
 // Prevent overlap with footer
 const footer = document.querySelector('#footer');

Admin: Created page with "/* Any JavaScript here will be loaded for all users on every page load. / / TOC - floating */ mw.hook('wikipage.content').add(function () { const toc = document.getElementById('toc'); if (!toc) return; const tocTop = toc.getBoundingClientRect().top + window.scrollY; function onScroll() { if (window.scrollY > tocTop) { toc.classList.add('toc-floating'); } else { toc.classList.remove('toc-floating'); } } // Desktop only listener..."

2026-02-10T03:35:59Z

Created page with "Any JavaScript here will be loaded for all users on every page load.: TOC - floating: mw.hook('wikipage.content').add(function () { const toc = document.getElementById('toc'); if (!toc) return; const tocTop = toc.getBoundingClientRect().top + window.scrollY; function onScroll() { if (window.scrollY > tocTop) { toc.classList.add('toc-floating'); } else { toc.classList.remove('toc-floating'); } } // Desktop only listener..."

New page

/* Any JavaScript here will be loaded for all users on every page load. */

/*
TOC - floating
*/
mw.hook('wikipage.content').add(function () {
const toc = document.getElementById('toc');
if (!toc) return;

const tocTop = toc.getBoundingClientRect().top + window.scrollY;

function onScroll() {
if (window.scrollY > tocTop) {
toc.classList.add('toc-floating');
} else {
toc.classList.remove('toc-floating');
}
}
// Desktop only listener
if (window.innerWidth < 1200) return;
window.addEventListener('scroll', onScroll);
});
// Prevent overlap with footer
const footer = document.querySelector('#footer');
const footerTop = footer.getBoundingClientRect().top + window.scrollY;
if (window.scrollY + toc.offsetHeight + 100 > footerTop) {
toc.style.opacity = '0';
} else {
toc.style.opacity = '1';
}