MediaWiki:Gadget-site-scrollGallery.js

Nota: dopo aver salvato, potrebbe essere necessario pulire la cache del proprio browser per vedere i cambiamenti.

Firefox / Safari: tenere premuto il tasto delle maiuscole e fare clic su Ricarica, oppure premere Ctrl-F5 o Ctrl-R (⌘-R su Mac)
Google Chrome: premere Ctrl-Shift-R (⌘-Shift-R su un Mac)
Internet Explorer: tenere premuto il tasto Ctrl mentre si fa clic su Refresh, oppure premere Ctrl-F5
Opera: svuotare completamente la cache dal menu Strumenti → Preferenze

/***************************************************************************
 * scrollGallery v2.0, 2020-03-17
 * Scrolling through Image Galleries
 * Original author: Roland Unger
 * Support of desktop and mobile views
 * Documentation: https://de.wikivoyage.org/wiki/Wikivoyage:scrollGallery.js
 * License: GPL-2.0+, CC-by-sa 3.0
 ***************************************************************************/

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

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

		var processEvent = function( event, incr ) {
			var group, i, imgs, unit, which = 0;

			group = $( event.target ).closest( '.ImageGroup' );
			imgs = $( '.ImageGrUnit', group );

			i = 0;
			imgs.each( function() {
				unit = $( event.target ).closest( '.ImageGrUnit' );
				if ( $( this ).is( unit ) )
					which = i;
				i++;
			});
			which = which + incr;
			if ( which < 0 )
				which = imgs.length - 1;
			else if ( which > imgs.length - 1 )
				which = 0;

			i = 0;
			imgs.each( function() {
				$( this ).toggle( i == which );
				i++;
			});
		};

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

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

		var init = function() {
			var i, j, divs, imgs, prevLink, nextLink, counter, imghead, newImg,
				firstImg, timeDependent, showUnitHeader, timeNow, noLoop, $this;

			divs = $( '.ImageGroup' );
			if ( divs.length === 0 )
				return;
			preloadImages();
 
			i = 0;
			divs.each( function() {
				$this = $( this );
				imgs = $( '.ImageGrUnit', $this );
				if ( imgs.length < 2 )
					return;

				timeDependent = $this.hasClass( 'timeDependent' );
				showUnitHeader = !$this.hasClass( 'hideUnitHeader' );
				noLoop = $this.hasClass( 'noLoop' );

				// getting width excluding header width
				var clone = $this.clone();
				$( '.ImageGrUnit', clone ).show();
				$( '.ImageGroupHeader', clone ).hide();
				clone.show()
					.css( { 'visibility': 'hidden' } )
					.appendTo( $( 'body' ) );
				$this.css( 'width', clone.width() + 'px' );
				clone.remove();

				firstImg = 0;
				if ( timeDependent ) {
					timeNow = new Date();
					timeNow = timeNow.getHours() + timeNow.getMinutes() / 60;
					firstImg = Math.floor( timeNow * imgs.length / 24 );
					if (firstImg > imgs.length - 1 )
						firstImg = imgs.length - 1;
				}

				j = 0;
				imgs.each( function() {
					if ( showUnitHeader ) {
						prevLink = $( '<span>' + str.prev + '</span>' );
						if ( j === 0 && noLoop )
							prevLink.addClass( 'ImageNoLoop' )
								.css( 'cursor', 'default' )
								.attr( 'title', '' );
						else {
							newImg = j;
							if ( j === 0 )
								newImg = imgs.length;
							prevLink.css( 'cursor', 'pointer' )
								.attr( 'title', 
									mw.format( str.counter, newImg, imgs.length ) )
								.click( function( event ) {
									processEvent( event, -1 );
								});
						}

						nextLink = $( '<span>' + str.next + '</span>' );
						if ( j === imgs.length - 1 && noLoop )
							nextLink.addClass( 'ImageNoLoop' )
								.css( 'cursor', 'default' )
								.attr( 'title', '' );
						else {
							newImg = j + 2;
							if ( j === imgs.length - 1 )
								newImg = 1;
							nextLink.css( 'cursor', 'pointer' )
								.attr( 'title',
									mw.format( str.counter, newImg, imgs.length ) )
								.click( function( event ) {
									processEvent( event, 1 );
								});
						}

						counter = mw.format( str.counter, j + 1, imgs.length );
						imghead = $( '<div class="ImageGrUnitHeader wv-timeless-no-emoji"> '
							+ counter + ' </div>' )
							.prepend( prevLink )
							.append( nextLink );

						$( this ).prepend( imghead );
					}

					$( this ).toggle( j == firstImg );
					j++;
				});
				i++;
			});
		};

		return { init: init };
	} ();

	$( scrollGalleries.init );

} ( mediaWiki, jQuery ) );