MediaWiki:Common.js: Difference between revisions

Revision as of 01:05, 30 June 2026

/* Bottom collapse controls */
mw.loader.using('jquery.makeCollapsible').then(function () {
	var exampleTableQuery = window.matchMedia('(max-width: 899px)');

	function updateExampleTableState($table) {
		$table
			.children('caption')
			.attr('aria-expanded', $table.hasClass('mw-collapsed') ? 'false' : 'true');
	}

	function initialiseExampleTables() {
		$('.wizlords-example-table.mw-collapsible').each(function () {
			var $table = $(this);
			var $caption = $table.children('caption');

			if (exampleTableQuery.matches) {
				$caption
					.attr('role', 'button')
					.attr('tabindex', '0');

				updateExampleTableState($table);
			} else {
				$caption
					.removeAttr('role')
					.removeAttr('tabindex')
					.removeAttr('aria-expanded');
			}
		});
	}

	$(initialiseExampleTables);

	if (exampleTableQuery.addEventListener) {
		exampleTableQuery.addEventListener('change', initialiseExampleTables);
	} else if (exampleTableQuery.addListener) {
		exampleTableQuery.addListener(initialiseExampleTables);
	}

	$(document).on('click', '.wizlords-example-table.mw-collapsible > caption', function (event) {
		if (!exampleTableQuery.matches) {
			return;
		}

		if ($(event.target).closest('.mw-collapsible-toggle').length) {
			return;
		}

		var $table = $(this).closest('.wizlords-example-table');
		var $toggle = $table.find('> caption .mw-collapsible-toggle').first();

		if ($toggle.length) {
			$toggle.trigger('click');
			window.setTimeout(function () {
				updateExampleTableState($table);
			}, 0);
		}
	});

	$(document).on('keydown', '.wizlords-example-table.mw-collapsible > caption', function (event) {
		if (!exampleTableQuery.matches) {
			return;
		}

		if (event.key === 'Enter' || event.key === ' ') {
			event.preventDefault();
			$(this).trigger('click');
		}
	});

	function collapseFromBottom(toggleClass, collapsibleId) {
		$(document).on('click', toggleClass, function (event) {
			event.preventDefault();

			var $collapsible = $('#' + collapsibleId);
			var $topToggle = $collapsible.children('.mw-collapsible-toggle').first();

			if ($topToggle.length) {
				$topToggle.trigger('click');
			}
		});
	}

	collapseFromBottom('.wizlords-spellbook-collapse-arcane', 'wizlords-arcane-spellbook');
	collapseFromBottom('.wizlords-spellbook-collapse-divine', 'wizlords-divine-spellbook');

	$(document).on('click', '.wizlords-collapsible-section-bottom-toggle', function (event) {
		event.preventDefault();

		var $collapsible = $(this).closest('.wizlords-collapsible-section');
		var $topToggle = $collapsible.children('.mw-collapsible-toggle').first();

		if ($topToggle.length) {
			$topToggle.trigger('click');
		}
	});
});

/* Mobile class-card collapse controls */
( function () {
	var mobileQuery = window.matchMedia('(max-width: 599px)');

	function initialiseClassCards() {
		$('.wizlords-class-card').each(function () {
			var $card = $(this);

			if (mobileQuery.matches) {
				if (!$card.attr('data-wizlords-mobile-class-card')) {
					$card
						.attr('data-wizlords-mobile-class-card', '1')
						.attr('role', 'button')
						.attr('tabindex', '0');
				}

				if (!$card.hasClass('is-open')) {
					$card.attr('aria-expanded', 'false');
				}
			} else {
				$card
					.removeAttr('data-wizlords-mobile-class-card')
					.removeAttr('role')
					.removeAttr('tabindex')
					.removeAttr('aria-expanded')
					.removeClass('is-open');
			}
		});
	}

	function toggleClassCard(card) {
		if (!mobileQuery.matches) {
			return;
		}

		var $card = $(card);
		var isOpen = $card.hasClass('is-open');

		$card
			.toggleClass('is-open', !isOpen)
			.attr('aria-expanded', isOpen ? 'false' : 'true');
	}

	$(initialiseClassCards);

	if (mobileQuery.addEventListener) {
		mobileQuery.addEventListener('change', initialiseClassCards);
	} else if (mobileQuery.addListener) {
		mobileQuery.addListener(initialiseClassCards);
	}

	$(document).on('click', '.wizlords-class-card', function (event) {
		if ($(event.target).closest('a').length) {
			return;
		}

		toggleClassCard(this);
	});

	$(document).on('keydown', '.wizlords-class-card', function (event) {
		if (event.key === 'Enter' || event.key === ' ') {
			event.preventDefault();
			toggleClassCard(this);
		}
	});
}() );