MediaWiki:Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/**
 * HUIJIA FUN (EN) - MediaWiki:Common.js - v2.1: adds Pre-Diphic font support
 * Loaded on every page, so only code that is actually in use lives here:
 *   1. Tables using the old class="collapsible" -> MediaWiki's built-in mw-collapsible
 *   2. autocollapse / innercollapse support for mw-collapsible
 *   3. Pre-Diphic typer page: loads the typer only on pages containing #pd-typer
 *   4. Pre-Diphic vertical text: automatic column layout
 * Removed:
 *   - the console banner printed on every page load (it carried another wiki's name);
 *   - the NavFrame toggle function (only the function was defined, nothing ever created
 *     the toggle buttons, so it never ran).
 * Parts 1 and 2 are adapted from en.wikipedia.org MediaWiki:Common.js (CC BY-SA).
 */
/* global mw, $ */
mw.loader.using( [ 'mediawiki.util' ] ).done( function () {

	// 1. class="collapsible" -> mw-collapsible
	function makeCollapsibleMwCollapsible( $content ) {
		var $tables = $content
			.find( 'table.collapsible:not(.mw-collapsible)' )
			.addClass( 'mw-collapsible' );

		$tables.each( function () {
			if ( $( this ).hasClass( 'collapsed' ) ) {
				$( this ).addClass( 'mw-collapsed' );
			}
		} );
		if ( $tables.length ) {
			mw.loader.using( 'jquery.makeCollapsible' ).then( function () {
				$tables.makeCollapsible();
			} );
		}
	}
	mw.hook( 'wikipage.content' ).add( makeCollapsibleMwCollapsible );

	// 2. autocollapse (collapse when a page has two or more) and innercollapse (collapse inside outercollapse)
	function mwCollapsibleSetup( $collapsibleContent ) {
		var autoCollapseThreshold = 2;
		$collapsibleContent.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 ( $collapsibleContent.length >= autoCollapseThreshold && $element.hasClass( 'autocollapse' ) ) {
				$element.data( 'mw-collapsible' ).collapse();
			} else if ( $element.hasClass( 'innercollapse' ) && $element.parents( '.outercollapse' ).length ) {
				$element.data( 'mw-collapsible' ).collapse();
			}
			// On colored header backgrounds, the toggle link takes the text color to keep contrast
			$toggle = $element.find( '.mw-collapsible-toggle' );
			if ( $toggle.length && $toggle.parent()[ 0 ].style.color ) {
				$toggle.find( 'a' ).css( 'color', 'inherit' );
			}
		} );
	}
	mw.hook( 'wikipage.collapsibleContent' ).add( mwCollapsibleSetup );
} );

/* ===== 3. Pre-Diphic typer page: load the typer only on pages containing #pd-typer ===== */
mw.hook( 'wikipage.content' ).add( function ( $content ) {
	if ( window.pdTyperLoading || !$content.find( '#pd-typer' ).length ) return;
	window.pdTyperLoading = true;
	var s = mw.config.get( 'wgScript' );
	mw.loader.load( s + '?title=MediaWiki:PreDiphicTyper.css&action=raw&ctype=text/css', 'text/css' );
	mw.loader.load( s + '?title=MediaWiki:PreDiphicTyper.js&action=raw&ctype=text/javascript' );
} );

/* ===== 4. Pre-Diphic vertical text: automatic columns =====
 * When {{PD}} has no per-column count or height set (it carries data-pd-auto), the text is
 * regrouped into columns for the screen: column height = visible window height - 120px,
 * independent of font size, and re-laid out when the window is resized.
 * Module:PreDiphic has already split the text into words (.pd-w, data-n = number of cells);
 * this only regroups them and does not convert anything again.
 *
 * On phones the address bar hides and shows while scrolling, which changes window.innerHeight
 * and fires resize; using it would make the vertical text re-flow and jump while scrolling.
 * So this uses documentElement.clientHeight (unaffected by the address bar, matching CSS 100svh)
 * and only re-lays out when the width changes or the height changes by more than 100px. */
( function () {
	var CELL_EM = 0.8;   // each cell is about 0.8em tall (glyph height 800 units)
	var MARGIN = 120;    // room for the header and margins; matches .pd-col max-height in Common.css

	function viewH() {
		return document.documentElement.clientHeight || window.innerHeight;
	}

	function collect( box ) {
		var paras = [], cur = null;
		Array.prototype.forEach.call( box.children, function ( col ) {
			if ( !cur || col.classList.contains( 'pd-nl' ) ) { cur = []; paras.push( cur ); }
			Array.prototype.forEach.call( col.querySelectorAll( '.pd-w' ), function ( w ) {
				var n = Number( w.getAttribute( 'data-n' ) ) || 1;
				if ( w.getAttribute( 'data-c' ) && cur.length ) {
					// rejoin the half of a word that was split from the previous column
					cur[ cur.length - 1 ].t += w.textContent;
					cur[ cur.length - 1 ].n += n;
				} else {
					cur.push( { t: w.textContent, n: n } );
				}
			} );
		} );
		return paras;
	}

	function layout( box ) {
		var fs = parseFloat( window.getComputedStyle( box ).fontSize ) || 32;
		var per = Math.max( 1, Math.floor( ( viewH() - MARGIN ) / ( fs * CELL_EM ) ) );
		if ( box.pdPer === per ) return;
		box.pdPer = per;
		if ( !box.pdParas ) box.pdParas = collect( box );

		var frag = document.createDocumentFragment();
		box.pdParas.forEach( function ( words ) {
			var col = null, used = 0;
			words.forEach( function ( w ) {
				if ( !col || ( used > 0 && used + w.n > per ) ) {
					col = document.createElement( 'span' );
					col.className = 'pd-col';
					frag.appendChild( col );
					used = 0;
				} else {
					col.appendChild( document.createTextNode( ' ' ) );   // word boundary
				}
				var s = document.createElement( 'span' );
				s.className = 'pd-w';
				s.textContent = w.t;
				col.appendChild( s );
				used += w.n;   // a word longer than a full column gets its own column; .pd-col max-height is the fallback
			} );
		} );
		box.textContent = '';
		box.appendChild( frag );
	}

	function layoutAll( root ) {
		Array.prototype.forEach.call( ( root || document ).querySelectorAll( '.pd-cols[data-pd-auto]' ), layout );
	}

	mw.hook( 'wikipage.content' ).add( function ( $content ) { layoutAll( $content[ 0 ] ); } );

	var timer, lastW = window.innerWidth, lastH = viewH();
	window.addEventListener( 'resize', function () {
		var w = window.innerWidth, h = viewH();
		if ( w === lastW && Math.abs( h - lastH ) < 100 ) return;   // only the address bar moved: no re-layout
		lastW = w;
		lastH = h;
		clearTimeout( timer );
		timer = setTimeout( function () { layoutAll(); }, 150 );
	} );
}() );

/* DO NOT ADD CODE BELOW THIS LINE */