MediaWiki:Gadget-GallerySlideshow.js

/** * Installer Script for Gallery-Slideshow * Loads big code on demand * This code is jshint-valid! */ /*global $:false, mw:false, importScriptURI:false */ /*jshint curly:false, */ $(document).ready(function {	'use strict';	if ($('.gallery').find('li').length < 1 || mw.config.get('wgNamespaceNumber') === -1 ) return; // no need for a gallery with a few images	// Preparation for i18n and mw:ResourceLoader/Version 2 Design Specification - using MediaWiki messages to translate	var msgs = {		"gs-label-start": "Slideshow (all images)",		"gs-label-gallery": "Gallery Slideshow",		"gs-label-started": "Show Slideshow",		"gs-label-category": "Category Slideshow",		"gs-label-continue": "Resume",		"gs-title-start": "Start a slideshow of all images (alphabetical by file name)",		"gs-title-gallery": "Start a slideshow made from the images in the gallery of this page",		"gs-title-started": "Reopen slideshow pane",		"gs-title-category": "Start a category slideshow (alphabetical by sortkey, starting with the first file of the category)",		"gs-title-continue": "Continue Slideshow where you had left it last time you visited this page." };	mw.messages.set( msgs ); var getMessage = function (msg) { msg = mw.message( 'gs-' + msg ); return (msg.exists ? msg.toString : msg); };	// These dependencies must remain here! The gadget is also used as withJS // withCSS // Of course one could introduce a withGadget - URL query param into common.js	mw.loader.using(['jquery.cookie', 'mediawiki.util', 'jquery.ui.button'], function {

var isCategory = mw.config.get('wgNamespaceNumber') === 14, $gButtons = $(' ', { 				id: 'GallerySlideStartButtons' 			}), $gButtonsInner = $(' ', { 				id: 'GallerySlideStartButtonsInner' 			}) .appendTo($gButtons); if (isCategory) { $('#mw-category-media').prepend($gButtons); } else { $('#content').find('#firstHeading').before($gButtons); }		var startSlideshow = function (o, cont, screenread) { if (cont) o.cont = cont; if (screenread) { o.readFromScreen = true; o.remoteUse = true; }			o.start; };		var loadSlideshowAndStart = function (cont, screenread) { $startButton.button({ 				label: getMessage('label-started') 			}) .attr('title', getMessage('title-started')); if ('object' === typeof window.GallerySlide) { startSlideshow(window.GallerySlide, cont, screenread); } else { $(document).bind('slideshow', function (e, st, o) {					// If the code requires debugging, you can uncomment the following line					// console.log('evt: ' + st);					if ('codeLoaded' === st && o) {						startSlideshow(o, cont, screenread);					}				}); window.importScriptURI(					mw.config.get( 'wgServer' ) + mw.config.get( 'wgScript' ) + 					'?' + $.param({ title: 'MediaWiki:GallerySlideshow.js', action: 'raw', ctype: 'text/javascript', dummy: 6 })				);			}		};		var createButton = function(type, msg) { return $(' ', { 					role: 'button', 					id: 'GallerySlide' + type, 					title: getMessage('title-' + (msg || type)), 					text: getMessage('label-' + (msg || type)) 				}); },			$startButton = createButton('start', isCategory ? 'category' : 'gallery').button({ 					icons: { secondary: 'ui-icon-slideshow' } 				}) .addClass('ui-button-green').click(function {					if (isCategory) {						// In categories, have an option for the whole category						loadSlideshowAndStart;					} else {						// In galleries/ on user pages, only files in a gallery should be displayed						// (often there are lots of little icon files that aren't important) and just cause noise						loadSlideshowAndStart(0, true);					}				});

// This does not make sense in categories since they should not contain additional galleries // But if they contain >200 files, thus "consisting of multiple pages" // it might be useful to start at the current offset if ($('#mw-category-media .gallery').prevAll('a').length) { $gButtonsInner.append( 				createButton('gallery').button({ icons: { primary: 'ui-icon-image' }})					.click(function { loadSlideshowAndStart(0, true); })			);		}		var lastQuery = $.cookie( 'gs' + mw.config.get('wgPageName').replace('Category:', '1:').replace('Commons:', '2:') ); if (lastQuery) { $gButtonsInner.append(createButton('continue').button({ icons: { primary: 'ui-icon-seek-next' } }).click( function { loadSlideshowAndStart(lastQuery); })			);		}		$startButton.appendTo($gButtonsInner); $gButtons.buttonset; $(document).triggerHandler('slideshow', ['loadedInstaller', $gButtons]); // For external scripts var autoStart = mw.util.getParamValue('gsAutoStart'); if (({ '1':1, 'true':1, 'yes':1, '-1':1 }[autoStart])) { loadSlideshowAndStart; }		// TODO: Make a dropdown like Flickr has (more usable) // Save space: The slideshow button is only partially visible var hoverOutTimeout = 0, hoverInTimeout = 0, fullWidth = $gButtonsInner.outerWidth(true) + 7; $gButtons.hover(function {			clearTimeout(hoverOutTimeout);			if ($gButtons.queue.length) {				$gButtons.stop(true).animate({ width: fullWidth });				return;			}			$gButtons.css('width', '2.25em');			fullWidth = $gButtonsInner.outerWidth(true) + 7;			hoverInTimeout = setTimeout(function { $gButtons.animate({ width: fullWidth }); }, 200);		}, function {			clearTimeout(hoverOutTimeout);			clearTimeout(hoverInTimeout);			hoverOutTimeout = setTimeout(function { $gButtons.animate({ width: '2.25em' }); }, 800);		}).css({			width: '2.25em',			height: '3em'		}); }); });