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.

/* Before/after image slider — powers {{Before after}} / see [[Help:Before-after slider]] */
( function () {
	function initSliders( root ) {
		var sliders = ( root || document ).querySelectorAll( '.ba-slider:not(.ba-ready)' );
		Array.prototype.forEach.call( sliders, function ( slider ) {
			var after = slider.querySelector( '.ba-after-wrap' );
			if ( !after ) {
				return;
			}
			slider.classList.add( 'ba-ready' );
			var handle = document.createElement( 'span' );
			handle.className = 'ba-handle';
			slider.appendChild( handle );

			function setPos( p ) {
				p = Math.max( 0, Math.min( 100, p ) );
				var inset = 'inset(0 0 0 ' + p + '%)';
				after.style.webkitClipPath = inset;
				after.style.clipPath = inset;
				handle.style.left = p + '%';
			}
			function move( e ) {
				var rect = slider.getBoundingClientRect();
				var clientX = e.touches ? e.touches[ 0 ].clientX : e.clientX;
				setPos( ( clientX - rect.left ) / rect.width * 100 );
			}

			var dragging = false;
			slider.addEventListener( 'mousedown', function ( e ) { dragging = true; move( e ); e.preventDefault(); } );
			document.addEventListener( 'mousemove', function ( e ) { if ( dragging ) { move( e ); } } );
			document.addEventListener( 'mouseup', function () { dragging = false; } );
			slider.addEventListener( 'touchstart', function ( e ) { dragging = true; move( e ); }, { passive: true } );
			slider.addEventListener( 'touchmove', function ( e ) { if ( dragging ) { move( e ); } }, { passive: true } );
			slider.addEventListener( 'touchend', function () { dragging = false; } );

			setPos( 50 );
		} );
	}

	if ( window.mw && mw.hook ) {
		mw.hook( 'wikipage.content' ).add( function ( $c ) {
			initSliders( $c && $c[ 0 ] ? $c[ 0 ] : document );
		} );
	} else if ( document.readyState !== 'loading' ) {
		initSliders( document );
	} else {
		document.addEventListener( 'DOMContentLoaded', function () { initSliders( document ); } );
	}
}() );