MediaWiki:Common.js - Revision history

Tattecko at 13:33, 6 March 2026

2026-03-06T13:33:03Z

← Older revision		Revision as of 13:33, 6 March 2026
Line 168:		Line 168:
	item.classList.add("is-active");		item.classList.add("is-active");

	const panel = browser.querySelector("#" + CSS.escape(target));		const panel = browser.querySelector("#" + CSS.escape(target));
	if (panel) panel.classList.add("is-active");		if (panel) panel.classList.add("is-active");

			/* update browser URL */
			history.replaceState(null, null, "#" + target);

	});		});

Tattecko at 13:16, 6 March 2026

2026-03-06T13:16:48Z

← Older revision		Revision as of 13:16, 6 March 2026
Line 140:		Line 140:

	},150);		},150);

			});

			/* =========================================================
			OOO Browser controller (click switching)
			========================================================= */

			document.addEventListener("click", function (e) {

			const item = e.target.closest(".ooo-browser__item");
			if (!item) return;

			const browser = item.closest(".ooo-browser");
			if (!browser) return;

			const target = item.getAttribute("data-target");
			if (!target) return;

			e.preventDefault();

			browser.querySelectorAll(".ooo-browser__item")
			.forEach(el => el.classList.remove("is-active"));

			browser.querySelectorAll(".ooo-browser__info")
			.forEach(el => el.classList.remove("is-active"));

			item.classList.add("is-active");

			const panel = browser.querySelector("#" + CSS.escape(target));
			if (panel) panel.classList.add("is-active");

	});		});

Tattecko at 13:10, 6 March 2026

2026-03-06T13:10:30Z

← Older revision		Revision as of 13:10, 6 March 2026
Line 116:		Line 116:
	mw.hook('wikipage.content').add(function () {		mw.hook('wikipage.content').add(function () {

	if (!location.hash) return; ~~// IMPORTANT: do nothing without anchor~~		if (!location.hash) return;

	const id = location.hash.slice(1);		const id = location.hash.slice(1);
Line 124:		Line 124:
	const item = document.querySelector('.ooo-browser__item[data-target="'+id+'"]');		const item = document.querySelector('.ooo-browser__item[data-target="'+id+'"]');
	const panel = document.getElementById(id);		const panel = document.getElementById(id);

	if (!item \|\| !panel) return;		if (!item \|\| !panel) return;

Line 137:		Line 138:
	item.classList.add('is-active');		item.classList.add('is-active');
	panel.classList.add('is-active');		panel.classList.add('is-active');

	~~panel.scrollIntoView({block:'start'});~~

	},150);		},150);

	});		});

Tattecko at 13:08, 6 March 2026

2026-03-06T13:08:36Z

← Older revision		Revision as of 13:08, 6 March 2026
Line 116:		Line 116:
	mw.hook('wikipage.content').add(function () {		mw.hook('wikipage.content').add(function () {

	~~const hash = window.location.hash;~~		if (!location.hash) return; // IMPORTANT: do nothing without anchor
	if (!hash) return;

	const id = hash.~~replace~~(~~'#',''~~);		const id = location.hash.slice(1);

	setTimeout(function(){		setTimeout(function(){
Line 141:		Line 140:
	panel.scrollIntoView({block:'start'});		panel.scrollIntoView({block:'start'});

	~~/* IMPORTANT: remove hash so script does not re-trigger */~~		},150);
	~~history.replaceState(null, null, window.location.pathname);~~

	},~~200~~);

	});		});

Tattecko at 13:06, 6 March 2026

2026-03-06T13:06:50Z

← Older revision		Revision as of 13:06, 6 March 2026
Line 117:		Line 117:

	const hash = window.location.hash;		const hash = window.location.hash;
	if (!hash) return; ~~// do nothing if no anchor~~		if (!hash) return;

	const id = hash.replace('#','');		const id = hash.replace('#','');
Line 125:		Line 125:
	const item = document.querySelector('.ooo-browser__item[data-target="'+id+'"]');		const item = document.querySelector('.ooo-browser__item[data-target="'+id+'"]');
	const panel = document.getElementById(id);		const panel = document.getElementById(id);

	if (!item \|\| !panel) return;		if (!item \|\| !panel) return;

Line 141:		Line 140:

	panel.scrollIntoView({block:'start'});		panel.scrollIntoView({block:'start'});

			/* IMPORTANT: remove hash so script does not re-trigger */
			history.replaceState(null, null, window.location.pathname);

	},200);		},200);

	});		});

Tattecko at 13:05, 6 March 2026

2026-03-06T13:05:33Z

← Older revision		Revision as of 13:05, 6 March 2026
Line 116:		Line 116:
	mw.hook('wikipage.content').add(function () {		mw.hook('wikipage.content').add(function () {

	const hash = location.hash.replace('#','');		const hash = window.location.hash;
	~~if (!hash) return~~;		if (!hash) return; // do nothing if no anchor

			const id = hash.replace('#','');

	setTimeout(function(){		setTimeout(function(){

	const item = document.querySelector('.ooo-browser__item[data-target="'+~~hash~~+'"]');		const item = document.querySelector('.ooo-browser__item[data-target="'+id+'"]');
	const panel = document.getElementById(~~hash~~);		const panel = document.getElementById(id);

	if (!item \|\| !panel) return;		if (!item \|\| !panel) return;
Line 129:		Line 131:
	if (!browser) return;		if (!browser) return;

	~~// activate correct item~~
	browser.querySelectorAll('.ooo-browser__item')		browser.querySelectorAll('.ooo-browser__item')
	.forEach(el => el.classList.remove('is-active'));		.forEach(el => el.classList.remove('is-active'));

	~~item.classList.add('is-active');~~

	~~// activate correct panel~~
	browser.querySelectorAll('.ooo-browser__info')		browser.querySelectorAll('.ooo-browser__info')
	.forEach(el => el.classList.remove('is-active'));		.forEach(el => el.classList.remove('is-active'));

			item.classList.add('is-active');
	panel.classList.add('is-active');		panel.classList.add('is-active');

	~~// scroll to panel~~		panel.scrollIntoView({block:'start'});
	panel.scrollIntoView({ block:'start~~', behavior:'instant~~' });

	}, 200);		},200);

	});		});

Tattecko at 13:04, 6 March 2026

2026-03-06T13:04:38Z

← Older revision		Revision as of 13:04, 6 March 2026
Line 127:		Line 127:

	const browser = item.closest('.ooo-browser');		const browser = item.closest('.ooo-browser');
			if (!browser) return;

			// activate correct item
	browser.querySelectorAll('.ooo-browser__item')		browser.querySelectorAll('.ooo-browser__item')
	.forEach(el => el.classList.remove('is-active'));		.forEach(el => el.classList.remove('is-active'));

			item.classList.add('is-active');

			// activate correct panel
	browser.querySelectorAll('.ooo-browser__info')		browser.querySelectorAll('.ooo-browser__info')
	.forEach(el => el.classList.remove('is-active'));		.forEach(el => el.classList.remove('is-active'));

	~~item.classList.add('is-active');~~
	panel.classList.add('is-active');		panel.classList.add('is-active');

	panel.scrollIntoView({block:'start'});		// scroll to panel
			panel.scrollIntoView({ block:'start', behavior:'instant' });

	},~~300~~);		}, 200);

	});		});

Tattecko at 12:46, 6 March 2026

2026-03-06T12:46:18Z

← Older revision		Revision as of 12:46, 6 March 2026
Line 111:		Line 111:

	/* =========================================================		/* =========================================================
	OOO ~~Browser anchor activation~~		OOO Anchor navigation (tabs + browser)
	========================================================= */		========================================================= */

	mw.hook('wikipage.content').add(function () {		mw.hook('wikipage.content').add(function () {

	const hash = ~~window.~~location.hash.replace('#','');		const hash = location.hash.replace('#','');
	if (!hash) return;		if (!hash) return;

	~~const item = document.querySelector~~(~~'.ooo-browser__item[data-target="'+hash+'"]');~~		setTimeout(function(){
	~~const panel = document.getElementById(hash);~~
	if (~~!item \|\| !panel~~) ~~return;~~

	const ~~browser~~ = ~~item~~.~~closest~~('.ooo-~~browser~~');		const item = document.querySelector('.ooo-browser__item[data-target="'+hash+'"]');
	if (~~!browser~~) ~~return~~;		const panel = document.getElementById(hash);

	~~browser.querySelectorAll('.ooo-browser__item')~~		if (!item \|\| !panel) return;
	~~.forEach(el => el.classList.remove~~(~~'is-active')~~);

	browser.~~querySelectorAll~~('.ooo-~~browser__info')~~		const browser = item.closest('.ooo-browser');
	~~.forEach(el => el.classList.remove('is-active~~'));

	~~item~~.~~classList.add~~('is-~~active~~');		browser.querySelectorAll('.ooo-browser__item')
	~~panel~~.classList.~~add~~('is-active');		.forEach(el => el.classList.remove('is-active'));

	~~setTimeout~~(() => {		browser.querySelectorAll('.ooo-browser__info')
	panel.scrollIntoView({ block: "start" });		.forEach(el => el.classList.remove('is-active'));
	}, ~~200~~);
			item.classList.add('is-active');
			panel.classList.add('is-active');

			panel.scrollIntoView({block:'start'});

			},300);

	});		});

Tattecko at 12:44, 6 March 2026

2026-03-06T12:44:28Z

← Older revision		Revision as of 12:44, 6 March 2026
Line 111:		Line 111:

	/* =========================================================		/* =========================================================
	OOO Browser ~~controller~~		OOO Browser anchor activation
	========================================================= */		========================================================= */

	~~document~~.~~addEventListener~~(~~"click",~~ function (e) {		mw.hook('wikipage.content').add(function () {

	const ~~item~~ = e.~~target~~.~~closest~~(~~".ooo-browser__item"~~);		const hash = window.location.hash.replace('#','');
	if (!~~item~~) return;		if (!hash) return;

	const browser = item.closest(".ooo-browser");		const item = document.querySelector('.ooo-browser__item[data-target="'+hash+'"]');
			const panel = document.getElementById(hash);
			if (!item \|\| !panel) return;

			const browser = item.closest('.ooo-browser');
	if (!browser) return;		if (!browser) return;

	~~const target = item.getAttribute("data-target");~~		browser.querySelectorAll('.ooo-browser__item')
	~~if (!target) return;~~		.forEach(el => el.classList.remove('is-active'));

	~~e.preventDefault();~~

	~~// activate left item~~
	browser.querySelectorAll(".ooo-browser__item")
	.forEach(el => el.classList.remove("is-active"));

	~~item.classList.add("is-active"~~);

	~~// activate panel~~		browser.querySelectorAll('.ooo-browser__info')
	browser.querySelectorAll(".ooo-browser__info")		.forEach(el => el.classList.remove('is-active'));
	.forEach(el => el.classList.remove("is-active"));

	~~const panel = browser~~.~~querySelector("#" + CSS~~.~~escape~~(~~target)~~);		item.classList.add('is-active');
	~~if (panel)~~ panel.classList.add("is-active");		panel.classList.add('is-active');

	~~/* FIX: keep layout stable */~~		setTimeout(() => {
	~~browser.querySelector~~(~~".ooo-browser__panel"~~)		panel.scrollIntoView({ block: "start" });
	.scrollIntoView({ block: "start", ~~behavior: "instant" }~~);		}, 200);

	});		});

Tattecko at 12:42, 6 March 2026

2026-03-06T12:42:49Z

@@ Line 143: / Line 143: @@
    browser.querySelector(".ooo-browser__panel")
      .scrollIntoView({ block: "start", behavior: "instant" });
 });