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 < 2 || 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 = $('<div>', { 
				id: 'GallerySlideStartButtons' 
			}),
			$gButtonsInner = $('<div>', { 
				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 $('<button>', { 
					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'
		});
	});
});