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.

/* Site-wide JS. */

/* Move the article table of contents into the Timeless right-hand column,
 * so in-page navigation sits beside the text instead of inside it.
 * Only on wide screens: below that Timeless folds the right column into a
 * dropdown, where a table of contents is worse than the inline one.
 * ponytail: decided once on load, not on resize — a resize is rare and a
 * reload fixes it. */
$( function () {
	var $toc = $( '#toc' ),
		$rail = $( '#mw-related-navigation' ),
		$list = $toc.find( '> ul' ),
		title = $.trim( $toc.find( '#mw-toc-heading' ).text() ) || 'Contents';

	if ( !$toc.length || !$rail.length || !$list.length ||
		!window.matchMedia( '(min-width: 1100px)' ).matches
	) {
		return;
	}

	$( '<div>' )
		.attr( 'id', 'p-toc' )
		.addClass( 'sidebar-chunk' )
		.append( $( '<h3>' ).text( title ) )
		.append( $( '<div>' ).addClass( 'sidebar-inner' ).append( $list ) )
		.prependTo( $rail );

	$toc.remove();
} );
/* Tell the SquidWeb web-application which wiki page the help iframe is showing.
 *
 * The app embeds this wiki in an iframe at /help/:id?url=... (see
 * HelpContent.jsx). Its handleChangeUrl listener updates the tab's URL and name
 * from these messages, so without this the help tab silently stops tracking
 * navigation as soon as a reader clicks a link inside the frame.
 *
 * Carried over verbatim in behaviour from the legacy wiki's Common.js, which is
 * the only place it existed. No-op when not framed: window.parent === window.
 *
 * ponytail: targetOrigin stays '*' to match the old wiki. Only a URL is sent,
 * and the app filters by its own containerLink — tighten it to the artlogic
 * origins if this ever carries anything more sensitive.
 */
( function () {
	function postHref() {
		window.parent.postMessage( { url: location.href }, '*' );
	}
	window.addEventListener( 'load', postHref );
}() );

/* Wanda floating chat: add a top-left resize grip. Native CSS resize
   (MediaWiki:Common.css) only offers the bottom-right corner; the window is
   bottom/right-anchored, so this grip resizes toward that anchor. */
(function () {
	function attach(win) {
		if (win.querySelector('.wanda-resize-tl')) {
			return;
		}
		var grip = document.createElement('div');
		grip.className = 'wanda-resize-tl';
		grip.setAttribute('aria-hidden', 'true');
		win.appendChild(grip);
		grip.addEventListener('mousedown', function (e) {
			e.preventDefault();
			e.stopPropagation();
			var startX = e.clientX;
			var startY = e.clientY;
			var rect = win.getBoundingClientRect();
			var startW = rect.width;
			var startH = rect.height;
			function move(ev) {
				win.style.width = Math.max(320, startW - (ev.clientX - startX)) + 'px';
				win.style.height = Math.max(280, startH - (ev.clientY - startY)) + 'px';
				win.style.maxHeight = 'none';
			}
			function up() {
				document.removeEventListener('mousemove', move);
				document.removeEventListener('mouseup', up);
			}
			document.addEventListener('mousemove', move);
			document.addEventListener('mouseup', up);
		});
	}
	var observer = new MutationObserver(function () {
		var win = document.querySelector('.wanda-floating-window');
		if (win) {
			attach(win);
		}
	});
	observer.observe(document.body, { childList: true, subtree: true });
	var win = document.querySelector('.wanda-floating-window');
	if (win) {
		attach(win);
	}
})();

/* Language bar as a dropdown — Trello 4TyPgtP9 "Language should not be list
 * but select". The Translate extension renders the available translations as
 * an inline link list (.mw-pt-languages-list); build a <select> from it that
 * navigates on change, and hide the list rather than removing it so anything
 * else that reads it keeps working.
 * ponytail: the browser's own <select> UI, no ULS widget. Display names are
 * capitalised here because the CSS text-transform on the list does not reach
 * into option elements on every platform. */
$( function () {
	var $list = $( '.mw-pt-languages-list' );
	if ( !$list.length ) {
		return;
	}
	var $select = $( '<select>' ).addClass( 'mw-pt-languages-select' );
	$list.find( 'li' ).each( function () {
		var $item = $( this ).children( 'a, span' ).first();
		var name = $item.text();
		$( '<option>' )
			.text( name.charAt( 0 ).toUpperCase() + name.slice( 1 ) )
			.val( $item.attr( 'href' ) || '' )
			.prop( 'selected', $item.is( 'span' ) )
			.appendTo( $select );
	} );
	$select.on( 'change', function () {
		if ( this.value ) {
			location.href = this.value;
		}
	} );
	$list.hide().after( $select );
} );