MediaWiki:Common.js

/* Behavior for Template:Infobox_application. Lives in Common.js (not
 * Cosmos.js) so it keeps working regardless of which skin a reader/editor
 * has selected. */
( function () {

	// Clickable tab bar for multi-image infoboxes (image1/caption1,
	// image2/caption2, ...). Delegated on document instead of bound directly
	// to each tab: something else on the page (MultimediaViewer's own image
	// handling is the prime suspect) touches the parser output shortly after
	// load and silently drops direct listeners, so binding to a stable
	// ancestor that's never replaced is what actually keeps working.
	function handleGalleryClick( e ) {
		var tab = e.target.closest( '.infobox-application__gallery-tab' );
		if ( !tab ) {
			return;
		}
		var gallery = tab.closest( '.infobox-application__gallery' );
		if ( !gallery ) {
			return;
		}
		var index = tab.getAttribute( 'data-ia-tab' );
		gallery.querySelectorAll( '.infobox-application__gallery-tab' ).forEach( function ( t ) {
			t.classList.toggle( 'is-active', t === tab );
		} );
		gallery.querySelectorAll( '.infobox-application__gallery-slide' ).forEach( function ( slide ) {
			// A plain "hidden" attribute gets stripped by MediaWiki's
			// sanitizer, so a CSS class carries visibility instead.
			slide.classList.toggle( 'is-inactive', slide.getAttribute( 'data-ia-slide' ) !== index );
		} );
	}

	// On narrow screens the infobox drops its desktop float (see
	// Template:Infobox_application/styles.css) and becomes a full-width
	// block -- but it's still first in the wikitext/DOM, so without this it
	// would render ABOVE the lead paragraph instead of below it, the way
	// Wikipedia's mobile view places infoboxes. This moves it to just after
	// the first non-empty paragraph of the article (mirrors MobileFrontend's
	// own behavior, which Cosmos doesn't have).
	function relocateInfoboxOnMobile() {
		if ( window.innerWidth > 550 ) {
			return;
		}
		document.querySelectorAll( '.mw-parser-output > .infobox-application' ).forEach( function ( box ) {
			if ( box.dataset.iaRelocated ) {
				return;
			}
			var sib = box.nextElementSibling;
			while ( sib && ( sib.tagName !== 'P' || !sib.textContent.trim() ) ) {
				sib = sib.nextElementSibling;
			}
			if ( sib ) {
				sib.insertAdjacentElement( 'afterend', box );
				box.dataset.iaRelocated = '1';
			}
		} );
	}

	// Registered immediately (doesn't need the DOM to be ready) and on a
	// node that's never replaced, so this survives regardless of what else
	// on the page rebuilds the content area after load.
	document.addEventListener( 'click', handleGalleryClick );

	function init() {
		relocateInfoboxOnMobile();
	}
	if ( document.readyState === 'loading' ) {
		document.addEventListener( 'DOMContentLoaded', init );
	} else {
		init();
	}
	// Belt-and-suspenders: re-run once everything (including images) has
	// finished loading, in case something reflowed the lead section after
	// DOMContentLoaded. The dataset guard above makes this a no-op otherwise.
	window.addEventListener( 'load', relocateInfoboxOnMobile );
}() );