MediaWiki:Common.js - Revision history

Bones at 17:38, 27 May 2026

2026-05-27T17:38:18Z

← Older revision		Revision as of 13:38, 27 May 2026
Line 127:		Line 127:
	function initExclusiveCollapsibles() {		function initExclusiveCollapsibles() {
	const outerKey = 'lootcrate';		const outerKey = 'lootcrate';
	const ~~outerSelector~~ = '#mw-customcollapsible-' + outerKey;		const outerCollapsibleId = 'mw-customcollapsible-' + outerKey;
	~~const innerSelector = outerSelector + ' [class*="mw-customtoggle-"]'~~;
	let suppress = false;		let suppress = false;

	// ~~Event delegation: works regardless of when elements are added,~~		// Listen on document and check the click target. Use NATIVE click()
	// ~~and re-discovers items inside the outer dropdown each click~~.		// to retrigger MediaWiki's handler — jQuery .trigger() doesn't always
	$(document).on('click'~~, innerSelector~~, function () {		// reach handlers that MW attached with native addEventListener.
			document.addEventListener('click', function (e) {
	if (suppress) return;		if (suppress) return;
	const match = ~~this~~.className.match(/mw-customtoggle-(\S+)/);
			// Find an ancestor with a mw-customtoggle-* class
			let toggle = e.target;
			while (toggle && toggle !== document) {
			if (toggle.className && /mw-customtoggle-(\S+)/.test(toggle.className)) break;
			toggle = toggle.parentElement;
			}
			if (!toggle \|\| toggle === document) return;

			// Must be inside the outer loot-crate dropdown
			const outerCol = document.getElementById(outerCollapsibleId);
			if (!outerCol \|\| !outerCol.contains(toggle)) return;

			const match = toggle.className.match(/mw-customtoggle-(\S+)/);
	if (!match) return;		if (!match) return;
	const clickedKey = match[1];		const clickedKey = match[1];
			const pickedName = toggle.textContent.trim();

	setTimeout(() => {		setTimeout(function () {
	suppress = true;		suppress = true;

	// Close any other open ~~item images~~		// Close any other items that are currently open
	$(~~innerSelector~~).~~each~~(function () {		const inners = outerCol.querySelectorAll('[class*="mw-customtoggle-"]');
	const m = ~~this~~.className.match(/mw-customtoggle-(\S+)/);		inners.forEach(function (t) {
			const m = t.className.match(/mw-customtoggle-(\S+)/);
	if (!m \|\| m[1] === clickedKey) return;		if (!m \|\| m[1] === clickedKey) return;
	const $img = $('#mw-customcollapsible-' + m[1]);		const img = document.getElementById('mw-customcollapsible-' + m[1]);
	if ($img~~.length~~ && !$img.~~hasClass~~('mw-collapsed')) {		if (img && !img.classList.contains('mw-collapsed')) {
	~~$(this)~~.~~trigger~~(~~'click'~~);		t.click();
	}		}
	});		});

	// Update outer dropdown label ~~to show the picked item's name~~		// Update outer dropdown label
	const ~~pickedName~~ = $('.mw-customtoggle-' + ~~clickedKey~~)~~.first~~().~~text~~();		const outerToggle = document.querySelector('.mw-customtoggle-' + outerKey);
	$(~~'.mw-customtoggle-' + outerKey + ' span:first-child'~~).~~text(~~pickedName);		if (outerToggle) {
			const labelSpan = outerToggle.querySelector('span');
			if (labelSpan) labelSpan.textContent = pickedName;
			}

	// ~~Auto-close~~ the outer dropdown ~~after a pick~~		// Close the outer dropdown
	~~const $outerCol = $(outerSelector);~~		if (outerCol && !outerCol.classList.contains('mw-collapsed') && outerToggle) {
	if ($outerCol~~.length~~ && !$outerCol.~~hasClass~~('mw-collapsed')) {		outerToggle.click();
	~~$('~~.~~mw-customtoggle-' + outerKey).first().trigger~~(~~'click'~~);
	}		}

	suppress = false;		suppress = false;
	}, 50);		}, 50);
	});		}, true);
	}		}

Bones at 17:35, 27 May 2026

2026-05-27T17:35:29Z

← Older revision		Revision as of 13:35, 27 May 2026
Line 127:		Line 127:
	function initExclusiveCollapsibles() {		function initExclusiveCollapsibles() {
	const outerKey = 'lootcrate';		const outerKey = 'lootcrate';
	const ~~$outer~~ = $('#mw-customcollapsible-' + outerKey);		const outerSelector = '#mw-customcollapsible-' + outerKey;
	~~if (!$outer.length) return;~~		const innerSelector = outerSelector + ' [class*="mw-customtoggle-"]';

	~~// Auto-discover the inner toggle keys from the DOM, so adding a~~
	~~// new item to the page never requires editing Common.js.~~
	const ~~crateKeys~~ = ~~[];~~
	~~$outer.find(~~'[class*="mw-customtoggle-"]'~~).each(function () {~~
	~~const m = this.className.match(/mw-customtoggle-(\S+)/);~~
	~~if (m && m[1] !== outerKey) crateKeys.push(m[1]);~~
	~~});~~
	~~if (!crateKeys.length) return;~~

	~~const selector = crateKeys.map(k => '.mw-customtoggle-' + k).join(', ')~~;
	let suppress = false;		let suppress = false;

	$(~~selector~~).on('click', function () {		// Event delegation: works regardless of when elements are added,
			// and re-discovers items inside the outer dropdown each click.
			$(document).on('click', innerSelector, function () {
	if (suppress) return;		if (suppress) return;
	const match = this.className.match(/mw-customtoggle-(\S+)/);		const match = this.className.match(/mw-customtoggle-(\S+)/);
Line 148:		Line 139:
	const clickedKey = match[1];		const clickedKey = match[1];

	~~// Let MediaWiki's own toggle handler finish, then trigger~~
	~~// clicks on the other toggles so MW collapses them itself.~~
	setTimeout(() => {		setTimeout(() => {
	suppress = true;		suppress = true;

	// Close other item images		// Close any other open item images
	~~crateKeys~~.~~forEach~~(k =~~> {~~		$(innerSelector).each(function () {
	if (k === clickedKey) return;		const m = this.className.match(/mw-customtoggle-(\S+)/);
	const $el = $('#mw-customcollapsible-' + k);		if (!m \|\| m[1] === clickedKey) return;
	if ($el.length && !$el.hasClass('mw-collapsed')) {		const $img = $('#mw-customcollapsible-' + m[1]);
	$(~~'.mw-customtoggle-' + k).first(~~).trigger('click');		if ($img.length && !$img.hasClass('mw-collapsed')) {
			$(this).trigger('click');
	}		}
	});		});

	// Update ~~the~~ outer dropdown label to show the picked item's name		// Update outer dropdown label to show the picked item's name
	const pickedName = $('.mw-customtoggle-' + clickedKey).first().text();		const pickedName = $('.mw-customtoggle-' + clickedKey).first().text();
	$('.mw-customtoggle-' + outerKey + ' span:first-child').text(pickedName);		$('.mw-customtoggle-' + outerKey + ' span:first-child').text(pickedName);

	// Auto-close the outer dropdown after a pick		// Auto-close the outer dropdown after a pick
	const $~~outer~~ = $(~~'#mw-customcollapsible-' + outerKey~~);		const $outerCol = $(outerSelector);
	if ($~~outer~~.length && !$~~outer~~.hasClass('mw-collapsed')) {		if ($outerCol.length && !$outerCol.hasClass('mw-collapsed')) {
	$('.mw-customtoggle-' + outerKey).first().trigger('click');		$('.mw-customtoggle-' + outerKey).first().trigger('click');
	}		}

Bones at 17:32, 27 May 2026

2026-05-27T17:32:37Z

@@ Line 126: / Line 126: @@
       * ============================================================ */
      function initExclusiveCollapsibles() {
        const outerKey = 'lootcrate';
        const selector = crateKeys.map(k => '.mw-customtoggle-' + k).join(', ');
        let suppress = false;

Bones at 19:53, 26 May 2026

2026-05-26T19:53:36Z

← Older revision		Revision as of 15:53, 26 May 2026
Line 154:		Line 154:
	}		}
	});		});

			// Update the outer dropdown label to show the picked item's name
			const pickedName = $('.mw-customtoggle-' + clickedKey).first().text();
			$('.mw-customtoggle-' + outerKey + ' span:first-child').text(pickedName);

	// Auto-close the outer dropdown after a pick		// Auto-close the outer dropdown after a pick

Bones at 19:49, 26 May 2026

2026-05-26T19:49:57Z

← Older revision		Revision as of 15:49, 26 May 2026
Line 127:		Line 127:
	function initExclusiveCollapsibles() {		function initExclusiveCollapsibles() {
	const crateKeys = [		const crateKeys = [
	'bloomingvows', 'celestialreverie', 'crimsonascent',		'astralnexus', 'bloomingvows', 'celestialreverie', 'crimsonascent',
	'luminoadventure', 'thunderoverlord', 'wishland', 'zerooverture'		'echovesperine', 'eclipsecinder', 'etherealtide', 'goldensurge',
			'luminoadventure', 'phazeblitz', 'thunderoverlord', 'wishland', 'zerooverture'
	];		];
	const outerKey = 'lootcrate';		const outerKey = 'lootcrate';

Bones at 19:45, 26 May 2026

2026-05-26T19:45:19Z

← Older revision		Revision as of 15:45, 26 May 2026
Line 130:		Line 130:
	'luminoadventure', 'thunderoverlord', 'wishland', 'zerooverture'		'luminoadventure', 'thunderoverlord', 'wishland', 'zerooverture'
	];		];
			const outerKey = 'lootcrate';
	const selector = crateKeys.map(k => '.mw-customtoggle-' + k).join(', ');		const selector = crateKeys.map(k => '.mw-customtoggle-' + k).join(', ');
	let suppress = false;		let suppress = false;
Line 143:		Line 144:
	setTimeout(() => {		setTimeout(() => {
	suppress = true;		suppress = true;

			// Close other item images
	crateKeys.forEach(k => {		crateKeys.forEach(k => {
	if (k === clickedKey) return;		if (k === clickedKey) return;
Line 150:		Line 153:
	}		}
	});		});

			// Auto-close the outer dropdown after a pick
			const $outer = $('#mw-customcollapsible-' + outerKey);
			if ($outer.length && !$outer.hasClass('mw-collapsed')) {
			$('.mw-customtoggle-' + outerKey).first().trigger('click');
			}

	suppress = false;		suppress = false;
	}, 50);		}, 50);

Bones at 19:39, 26 May 2026

2026-05-26T19:39:37Z

← Older revision		Revision as of 15:39, 26 May 2026
Line 131:		Line 131:
	];		];
	const selector = crateKeys.map(k => '.mw-customtoggle-' + k).join(', ');		const selector = crateKeys.map(k => '.mw-customtoggle-' + k).join(', ');
			let suppress = false;

	$(selector).on('click', function () {		$(selector).on('click', function () {
			if (suppress) return;
	const match = this.className.match(/mw-customtoggle-(\S+)/);		const match = this.className.match(/mw-customtoggle-(\S+)/);
	if (!match) return;		if (!match) return;
	const clickedKey = match[1];		const clickedKey = match[1];

	// ~~Run after~~ MediaWiki's own toggle handler ~~finishes so we~~		// Let MediaWiki's own toggle handler finish, then trigger
	// ~~can override~~ the ~~inline display style it leaves behind~~.		// clicks on the other toggles so MW collapses them itself.
	setTimeout(() => {		setTimeout(() => {
			suppress = true;
	crateKeys.forEach(k => {		crateKeys.forEach(k => {
	if (k === clickedKey) return;		if (k === clickedKey) return;
	const $el = $('#mw-customcollapsible-' + k);		const $el = $('#mw-customcollapsible-' + k);
	if ($el.length && !$el.hasClass('mw-collapsed')) {		if ($el.length && !$el.hasClass('mw-collapsed')) {
	$~~el.addClass~~('mw-~~collapsed~~').~~slideUp~~(0);		$('.mw-customtoggle-' + k).first().trigger('click');
	}		}
	});		});
	}, 0);		suppress = false;
			}, 50);
	});		});
	}		}

Bones at 19:34, 26 May 2026

2026-05-26T19:34:30Z

← Older revision		Revision as of 15:34, 26 May 2026
Line 136:		Line 136:
	if (!match) return;		if (!match) return;
	const clickedKey = match[1];		const clickedKey = match[1];
	crateKeys.forEach(k => {
	if (k === clickedKey) return;		// Run after MediaWiki's own toggle handler finishes so we
	const el = ~~document.getElementById~~('mw-customcollapsible-' + k);		// can override the inline display style it leaves behind.
	if (el) $(el).addClass('mw-collapsed');		setTimeout(() => {
	});		crateKeys.forEach(k => {
			if (k === clickedKey) return;
			const $el = $('#mw-customcollapsible-' + k);
			if ($el.length && !$el.hasClass('mw-collapsed')) {
			$el.addClass('mw-collapsed').slideUp(0);
			}
			});
			}, 0);
	});		});
	}		}

Bones at 19:31, 26 May 2026

2026-05-26T19:31:42Z

Show changes

Bones at 17:08, 24 April 2026

2026-04-24T17:08:46Z

← Older revision		Revision as of 13:08, 24 April 2026
Line 2:		Line 2:
	$(function () {		$(function () {

	console.log("FINAL SYSTEM LOADED (~~UPGRADED~~)");		console.log("FINAL SYSTEM LOADED (FULL REWRITE)");

	/* ================= TAB SYSTEM (SCOPED + SAFE) ================= */		/* ================= TAB SYSTEM (SCOPED + SAFE) ================= */
Line 30:		Line 30:
	target.classList.add('active');		target.classList.add('active');

	// ~~render~~ dropdowns inside ~~visible~~ tab		// initialize dropdowns inside this tab
	initDropdowns(target);		initDropdowns(target);
	}		}
Line 40:		Line 40:


	/* ================= DROPDOWN SYSTEM (~~UPGRADED~~) ================= */		/* ================= DROPDOWN SYSTEM (FULL UPGRADE) ================= */

	function initDropdowns(scope) {		function initDropdowns(scope) {
Line 46:		Line 46:
	scope.querySelectorAll('.mw-dropdown-ui[data-options]').forEach(container => {		scope.querySelectorAll('.mw-dropdown-ui[data-options]').forEach(container => {

	if (container.dataset.rendered) return;		if (container.dataset.rendered === "true") return;

	let data;		let data;
Line 58:		Line 58:
	container.innerHTML = '';		container.innerHTML = '';

	// BUTTON		// ===== BUTTON =====
	const btn = document.createElement('div');		const btn = document.createElement('div');
	btn.className = 'mod-dropdown-btn';		btn.className = 'mod-dropdown-btn';
	btn.textContent = 'Select One';		btn.textContent = container.dataset.label \|\| 'Select One';

	// LIST		// ===== LIST =====
	const list = document.createElement('div');		const list = document.createElement('div');
	list.className = 'mod-dropdown-list';		list.className = 'mod-dropdown-list';

	// OUTPUT		// ===== OUTPUT =====
	const output = document.createElement('div');		const output = document.createElement('div');
	output.className = 'mw-dropdown-output';		output.className = 'mw-dropdown-output';
	output.innerHTML = 'Select something to see details';		output.innerHTML = '<div class="mw-ui-placeholder">Select something to see details</div>';

	// SORT ~~ALPHABETICALLY~~		// ===== SORT + BUILD =====
	Object.values(data)		Object.values(data)
	.sort((a, b) => a.label.localeCompare(b.label))		.sort((a, b) => a.label.localeCompare(b.label))
Line 82:		Line 82:

	option.onclick = () => {		option.onclick = () => {

	btn.textContent = item.label;		btn.textContent = item.label;
	list.style.display = 'none';		list.style.display = 'none';

	// ===== NEW ~~GAME-STYLE OUTPUT~~ =====		let lines = [];

			// ===== NEW FORMAT =====
	if (item.lines && Array.isArray(item.lines)) {		if (item.lines && Array.isArray(item.lines)) {
			lines = item.lines;
			}

	~~output.innerHTML~~ =		// ===== OLD FORMAT AUTO-CONVERT =====
	~~`<div class~~=~~"mw~~-~~ui-title">$~~{item.~~label}</div>` +~~		else if (item.content) {
	~~item~~.~~lines~~.map(~~line~~ =>		lines = item.content
	~~`<div class="mw-ui-line">${line}</div>`~~		.split(';')
	).~~join~~('');		.map(s => s.trim())
			.filter(Boolean);
			}

	~~} else {~~		// ===== RENDER =====
	// ~~fallback for old system~~		output.innerHTML =
	output.innerHTML = item.~~content \|\|~~ '';		`<div class="mw-ui-title">${item.label}</div>` +
	}		lines.map(line =>
			`<div class="mw-ui-line">${line}</div>`
			).join('');
	};		};

Line 103:		Line 112:
	});		});

	// TOGGLE		// ===== TOGGLE DROPDOWN =====
	btn.onclick = () => {		btn.onclick = (e) => {
			e.stopPropagation();
	list.style.display = list.style.display === 'block' ? 'none' : 'block';		list.style.display = list.style.display === 'block' ? 'none' : 'block';
	};		};

	// BUILD		// ===== CLOSE WHEN CLICK OUTSIDE =====
			document.addEventListener('click', () => {
			list.style.display = 'none';
			});

			// ===== BUILD =====
	container.appendChild(btn);		container.appendChild(btn);
	container.appendChild(list);		container.appendChild(list);