MediaWiki:Gadget-site-scrollGallery.js
Aspetto
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 ) );