MediaWiki:Common.js

/* The Perfect Tower II Wiki: JavaScript for every reader on every page, so keep it small.
 * Source: onwiki/MediaWiki/Common.js in the wiki repository. */
/* global mw, $ */

/* Older pages mark tables with the classes "collapsible" and "collapsed" (for example Factory and
 * Module:Recipe table). They become MediaWiki collapsibles. From mediawiki.org's
 * Gadget-collapsibleTables.js. */
mw.hook( 'wikipage.content' ).add( function ( $content ) {
	var $tables = $content.find( 'table.collapsible:not(.mw-collapsible)' ).addClass( 'mw-collapsible' );
	$tables.filter( '.collapsed' ).addClass( 'mw-collapsed' );
	if ( $tables.length ) {
		mw.loader.using( 'jquery.makeCollapsible' ).then( function () {
			$tables.makeCollapsible();
		} );
	}
} );

/* Navboxes with the class "autocollapse" (Module:Navbox) start collapsed when a page has two or more
 * collapsibles. A legacy "collapsible" table keeps its toggle in the first header cell, and a toggle on
 * a colored header takes the header's text color. */
mw.hook( 'wikipage.collapsibleContent' ).add( function ( $collapsibles ) {
	$collapsibles.each( function () {
		var $element = $( this ),
			$toggle;
		if ( $element.hasClass( 'collapsible' ) ) {
			$element.find( 'tr:first > th:first' ).prepend( $element.find( 'tr:first > * > .mw-collapsible-toggle' ) );
		}
		if ( $collapsibles.length >= 2 && $element.hasClass( 'autocollapse' ) ) {
			$element.data( 'mw-collapsible' ).collapse();
		}
		$toggle = $element.find( '.mw-collapsible-toggle' );
		if ( $toggle.length && $toggle.parent()[ 0 ].style.color ) {
			$toggle.find( 'a' ).css( 'color', 'inherit' );
		}
	} );
} );

/* Wide tables: a table wider than the text column scrolls sideways in its own box
 * (.wiki-table-scroll in MediaWiki:Common.css), so it never runs under the contents column or off the
 * screen. Tables that fit stay as they are and keep their sticky header row. Checked again when the
 * column changes width (window, contents pinned or not, fonts) and when a table expands or collapses. */
( function () {
	var timer, lastWidth;

	function fitTables() {
		document.querySelectorAll( '.mw-parser-output table.wikitable' ).forEach( function ( table ) {
			var box = table.parentNode,
				wrapped = box.classList.contains( 'wiki-table-scroll' ),
				room = wrapped ? box.parentNode : box,
				style, width, wide;
			// A table inside another table: the outer one decides.
			if ( room.closest( 'table' ) ) {
				return;
			}
			style = getComputedStyle( room );
			width = room.clientWidth - parseFloat( style.paddingLeft ) - parseFloat( style.paddingRight );
			wide = table.offsetWidth > width + 1;
			if ( wide && !wrapped ) {
				box = document.createElement( 'div' );
				box.className = 'wiki-table-scroll';
				box.tabIndex = 0; // Keyboard users can scroll it with the arrow keys.
				table.parentNode.insertBefore( box, table );
				box.appendChild( table );
			} else if ( !wide && wrapped ) {
				box.parentNode.insertBefore( table, box );
				box.parentNode.removeChild( box );
			}
		} );
	}

	function fitSoon() {
		clearTimeout( timer );
		timer = setTimeout( fitTables, 50 );
	}

	mw.hook( 'wikipage.content' ).add( fitSoon );
	$( document ).on( 'afterExpand.mw-collapsible afterCollapse.mw-collapsible', fitSoon );
	if ( document.fonts ) {
		document.fonts.ready.then( fitSoon );
	}
	$( function () {
		var content = document.getElementById( 'mw-content-text' );
		if ( content && window.ResizeObserver ) {
			new ResizeObserver( function ( entries ) {
				var width = Math.round( entries[ 0 ].contentRect.width );
				if ( width !== lastWidth ) {
					lastWidth = width;
					fitSoon();
				}
			} ).observe( content );
		} else {
			$( window ).on( 'resize', fitSoon );
		}
	} );
}() );