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, ...). Without this, only the first <div data-ia-slide>
	// is visible -- everything still renders, it just can't be switched.
	function initInfoboxGalleries() {
		document.querySelectorAll( '.infobox-application__gallery' ).forEach( function ( gallery ) {
			var tabs = gallery.querySelectorAll( '.infobox-application__gallery-tab' );
			var slides = gallery.querySelectorAll( '.infobox-application__gallery-slide' );
			tabs.forEach( function ( tab ) {
				tab.addEventListener( 'click', function () {
					var index = tab.getAttribute( 'data-ia-tab' );
					tabs.forEach( function ( t ) {
						t.classList.toggle( 'is-active', t === tab );
					} );
					slides.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 ) {
			var sib = box.nextElementSibling;
			while ( sib && ( sib.tagName !== 'P' || !sib.textContent.trim() ) ) {
				sib = sib.nextElementSibling;
			}
			if ( sib ) {
				sib.insertAdjacentElement( 'afterend', box );
			}
		} );
	}

	function init() {
		initInfoboxGalleries();
		relocateInfoboxOnMobile();
	}

	if ( document.readyState === 'loading' ) {
		document.addEventListener( 'DOMContentLoaded', init );
	} else {
		init();
	}
}() );