MediaWiki:Gadget-ScrollGallery.js

/***************************************************************************
 * scrollGallery v2.0, 2023-08-30
 * Scrolling through Image Galleries
 * Original author: Roland Unger
 * Support of desktop and mobile views
 * Documentation: https://de.wikivoyage.org/wiki/Wikivoyage:Gadget-ScrollGallery.js
 * License: GPL-2.0+, CC-by-sa 3.0
 ***************************************************************************/
/* eslint-disable mediawiki/class-doc */

( function ( mw, $ ) {
	'use strict';

	var scrollGalleries = function() {
		const str = {
			prev   : '◀',
			next   : '▶',
			counter: '$1/$2'
		};

		// preloadImages() is only used in mobile view. It substitutes the lazy
		// image mode which prevents loading hidden images.

		function preloadImages() {
			$( 'noscript' ).each( function() {
				var p = $( this ).next(); // <span class="lazy-image-placeholder" ...>
				if ( p.hasClass( 'lazy-image-placeholder' ) ) {
					var img = $( '<img />', {
						src   : p.attr( 'data-src' ),
						width : p.attr( 'data-width' ),
						height: p.attr( 'data-height' ),
						alt   : p.attr( 'data-alt' )
					} );
					p.replaceWith( img );
				}
			} );
		}

		function processEvent( event, diff ) {
			var target = $( event.target ),
				unit   = target.closest( '.voy-ImageGrUnit' ),
				group  = target.closest( '.voy-ImageGroup' ),
				imgs   = $( '.voy-ImageGrUnit', group ),
				which  = 0;

			imgs.each( function( index ) {
				if ( $( this ).is( unit ) ) {
					which = index;
					return false; // breaks
				}
			} );
			which += diff;
			if ( which < 0 ) {
				which = imgs.length - 1;
			} else if ( which > imgs.length - 1 ) {
				which = 0;
			}

			imgs.each( function( index ) {
				$( this ).toggle( index == which );
			} );
		}

		function hideButton( button ) {
			button.attr( { class: 'voy-ImageNoLoop', title: '' } );
		}

		function setButtonAttr( button, imgIndex, imgs, diff ) {
			button.attr( { class: 'voy-ImageButton',
					title: mw.format( str.counter, imgIndex, imgs.length ) } )
				.click( function( event ) {
					processEvent( event, diff );
				} );
		}

		function makeImageHeaders( imgs, firstImg, showUnitHeader, noLoop ) {
			// for multiple images in a single scroll gallery
			imgs.each( function( index ) {
				var $this = $( this ), imgIndex;

				// add scroll buttons to the header
				if ( showUnitHeader ) {
					// setting link to the previous image
					var prevLink = $( '<span>' + str.prev + '</span>' );
					// preventing loops at the first or large image
					if ( index === 0 && noLoop ) {
						hideButton( prevLink );
					} else {
						imgIndex = ( index === 0 ) ? imgs.length : index;
						setButtonAttr( prevLink, imgIndex, imgs, -1 );
					}

					// setting link to the next image
					var nextLink = $( '<span>' + str.next + '</span>' );
					if ( index === imgs.length - 1 && noLoop ) {
						hideButton( nextLink );
					} else {
						imgIndex = ( index === imgs.length - 1 ) ? 1 : index + 2;
						setButtonAttr( nextLink, imgIndex, imgs, 1 );
					}

					// setting counter values between previous and next links
					var counter = mw.format( str.counter, index + 1, imgs.length ),
						imgHead = $( '<div class="voy-ImageGrUnitHeader voy-timeless-no-emoji"> ' +
							counter + ' </div>' )
							.prepend( prevLink )
							.append( nextLink );
					$this.prepend( imgHead );
				}

				$this.toggle( index == firstImg );
			} );
		}

		function makeScrollGalleryHeaders( galleries ) {
			// for multiple scroll galleries
			galleries.each( function() {
				var $this = $( this ),
					imgs = $( '.voy-ImageGrUnit', $this );
				if ( imgs.length < 2 ) {
					return;
				}

				// getting gallery width excluding width of the header from
				// a (right) floated clone
				var clone = $this.clone();
				$( '.voy-ImageGrUnit', clone ).show();
				$( '.voy-ImageGroupHeader', clone ).hide();
				clone.show()
					.css( { visibility: 'hidden', float: 'right' } )
					.appendTo( $( 'body' ) );
				$this.css( 'width', clone.width() + 'px' );
				clone.remove();

				var firstImg = 0;
				// starting with time-depending image
				var timeDependent = $this.hasClass( 'voy-timeDependent' );
				if ( timeDependent ) {
					var timeNow = new Date();
					timeNow = timeNow.getHours() + timeNow.getMinutes() / 60;
					firstImg = Math.floor( timeNow * imgs.length / 24 );
					firstImg = Math.min( firstImg, imgs.length - 1 );
				}

				var showUnitHeader = !$this.hasClass( 'voy-hideUnitHeader' ),
					noLoop = $this.hasClass( 'voy-noLoop' );
				makeImageHeaders( imgs, firstImg, showUnitHeader, noLoop );
			} );
		}

		function init() {
			// for VisualEditor and Realtime Preview
			mw.hook( 'wikipage.content' ).add( function ( $content ) {
				// getting all scroll galleries
				var galleries = $( '.voy-ImageGroup', $content );
				if ( !galleries.length ) {
					return;
				}

				preloadImages();
				makeScrollGalleryHeaders( galleries );
			} );
		}

		return { init: init };
	} ();

	$( scrollGalleries.init );

} ( mediaWiki, jQuery ) );