میڈیا وکی:Gadget-GallerySlideshow.js

/**
 * Installer Script for Gallery-Slideshow
 * Loads big code on demand
 * This code is jshint-valid!
 */

/*global $:false, mw:false*/
/*jshint curly:false*/
var launch = function() {
	'use strict';
	var getMessage, $c = mw.util.$content.parent();
	
	if (mw.libs.GallerySlideshowLoader) {
		mw.log('Duplicate slideshow inclusion detected.');
		return;
	}
	mw.libs.GallerySlideshowLoader = launch;

	if ($('.gallery', $c).find('li').length < 2 || mw.config.get('wgNamespaceNumber') === -1 || mw.util.getParamValue('printable')) 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
	// When Gadget 2 got ready, please revert to https://commons.wikimedia.org/w/index.php?oldid=101463143
	var msgs = (function () {
		var translations = { 
			en: {
				"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."
			},
			cs: {
				"gs-label-start": "Prezentace (všechny obrázky)",
				"gs-label-gallery": "Prezentace galerie",
				"gs-label-started": "Zobrazit prezentaci",
				"gs-label-category": "Prezentace kategorie",
				"gs-label-continue": "Pokračovat",
				"gs-title-start": "Spustit prezentaci všech obrázků (abecedně podle jména souboru)",
				"gs-title-gallery": "Spustit prezentaci všech obrázků v galerii na této stránce",
				"gs-title-started": "Znovuotevřít panel s prezentací",
				"gs-title-category": "Spustit prezentaci kategorie (abecedně podle řadicího klíče počínaje prvním souborem v kategorii)",
				"gs-title-continue": "Pokračovat v prezentaci od místa, kde jste skončili při poslední návštěvě této stránky."
			},
			fa: {
				"gs-label-start": "اسلایدشو (همه تصاویر)",
				"gs-label-gallery": "اسلایدشو برای نگارخانه",
				"gs-label-started": "نمایش اسلایدشو",
				"gs-label-category": "اسلایدشوی رده",
				"gs-label-continue": "ادامه",
				"gs-title-start": "شروع یک اسلایدشوی برای همهٔ تصاویر (الفبایی بنا به نام پرونده)",
				"gs-title-gallery": "شروع یک اسلایدشوی ساخته\u200cشده از تصاویر نگارخانهٔ این صفحه",
				"gs-title-started": "بازکردن مجدد قاب اسلایدشو",
				"gs-title-category": "شروع یک اسلایدشوی رده (الفبایی مرتب\u200cشده، شروع با اولین پرونده)",
				"gs-title-continue": "ادامهٔ اسلایدشو از آنجایی که دفعهٔ قبلی که این صفحه را بازدید کردید رها کرده\u200cاید."
			},
			hr: {
				"gs-label-start": "Prezentacija (sve slike)",
				"gs-label-gallery": "Prezentacija galerije",
				"gs-label-started": "Započni prezentaciju",
				"gs-label-category": "Prezentacija kategorije",
				"gs-label-continue": "Nastavi",
				"gs-title-start": "Započni prezentaciju svih slika (abecedno prema imenu)",
				"gs-title-gallery": "Započni prezentaciju slika u galeriji na ovoj stranici",
				"gs-title-started": "Ponovno otvori prezentaciju",
				"gs-title-category": "Započni prezentaciju kategorije (abecedno prema ključu za sortiranje počevši s prvom datotekom u kategoriji)",
				"gs-title-continue": "Nastavi prezentaciju prekinutu prilikom zadnjeg posjeta ovoj stranici."
			},
			ml: {
				"gs-label-start": "സ്ലൈഡ്ഷോ (എല്ലാ ചിത്രങ്ങളും)",
				"gs-label-gallery": "ചിത്രശാല സ്ലൈഡ്\u200cഷോ",
				"gs-label-started": "സ്ലൈഡ്\u200cഷോ പ്രദർശിപ്പിക്കുക",
				"gs-label-category": "വർഗ്ഗത്തിന്റെ സ്ലൈഡ്\u200cഷോ",
				"gs-label-continue": "പുനരാരംഭിക്കുക",
				"gs-title-start": "എല്ലാ ചിത്രങ്ങളുടേയും സ്ലൈഡ്\u200cഷോ തുടങ്ങുക (ചിത്രങ്ങളുടെ പേരുകളുടെ അക്ഷരമാലാക്രമത്തിൽ)",
				"gs-title-gallery": "ഈ താളിലെ ചിത്രശാലയിലെ ചിത്രങ്ങളുടെ സ്ലൈഡ്\u200cഷോ തുടങ്ങുക",
				"gs-title-started": "സ്ലൈഡ്\u200cഷോ കളം വീണ്ടും തുറക്കുക",
				"gs-title-category": "വർഗ്ഗത്തിന്റെ സ്ലൈഡ്\u200cഷോ തുടങ്ങുക (സോർട്ട്\u200cകീ ഉപയോഗിച്ചുള്ള അക്ഷരമാലാക്രമത്തിൽ, വർഗ്ഗത്തിലെ ആദ്യപ്രമാണം മുതൽ)",
				"gs-title-continue": "ഈ താളിൽ താങ്കൾ കഴിഞ്ഞ പ്രാവശ്യം നിർത്തിയിടത്ത് നിന്ന് സ്ലൈഡ്\u200cഷോ തുടരുക."
			},
			pt: {
				"gs-label-start": "Slideshow (todas as imagens)",
				"gs-label-gallery": "Slideshow da Galeria",
				"gs-label-started": "Mostrar Slideshow",
				"gs-label-category": "Slideshow da Categoria",
				"gs-label-continue": "Reiniciar",
				"gs-title-start": "Iniciar uma apresentação de todas as imagens (por ordem alfabética)",
				"gs-title-gallery": "Iniciar uma apresentação a partir das imagens da galeria desta página",
				"gs-title-started": "Reabrir painel de apresentação",
				"gs-title-category": "Iniciar uma apresentação da galeria (por ordem alfabética, iniciando com o primeiro ficheiro da categoria)",
				"gs-title-continue": "Continue a apresentação de onde parou na última vez que visitou esta página."
			},
			ur: {
				"gs-label-start": "سلائڈ شو (تمام تصویروں کا)",
				"gs-label-gallery": "نگارخانہ کا سلائڈ شو",
				"gs-label-started": "سلائڈ شو دکھائیں",
				"gs-label-category": "زمرے کا سلائڈ شو",
				"gs-label-continue": "جاری رکھیں",
				"gs-title-start": "تمام تصویروں کا سلائڈ شو شروع کریں (جو الفبائی ترتیب سے ظاہر ہوگا)",
				"gs-title-gallery": "اس صفحہ میں موجود نگار خانہ کی تصویروں کا سلائڈ شو دکھائیں",
				"gs-title-started": "سلائڈ شو دوبارہ کھولیں",
				"gs-title-category": "زمرے کا سلائڈ شو شروع کریں",
				"gs-title-continue": "صفحہ کی آخری مرتبہ زیارت کے وقت جہاں چھوڑا تھا، وہیں سے سلائڈ شو شروع کریں"
			}
		}, languageNameParts = mw.config.get('wgUserLanguage').split('-'), lang;
		
		translations.no = translations.nb;
		if (languageNameParts[1] === 'hans' ||
				languageNameParts[1] === 'cn' ||
				languageNameParts[1] === 'sg' ||
				languageNameParts[1] === 'my') {
			lang = 'zh-hans';
		} else if (languageNameParts[1] === 'hant' ||
				languageNameParts[1] === 'hk' ||
				languageNameParts[1] === 'tw' ||
				languageNameParts[1] === 'mo') {
			lang = 'zh-hant';
		} else if (translations[languageNameParts[0]]) {
			lang = languageNameParts[0];
		} else {
			lang = 'en';
		}
		return $.extend(true, translations.en, translations[lang]);
	}());
	mw.messages.set(msgs);

	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(['mediawiki.cookie', 'mediawiki.util', 'jquery.ui'], function() {

		var isCategory = mw.config.get('wgNamespaceNumber') === 14,
			$gButtons = $('<div>', {
				id: 'GallerySlideStartButtons'
			}),
			$gButtonsInner = $('<div>', {
				id: 'GallerySlideStartButtonsInner'
			})
				.appendTo($gButtons);

		if (isCategory) {
			$('#mw-category-media', $c).prepend($gButtons);
		} else {
			$(mw.util.$content, $c).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).on('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: 9
				}));
			}
		};

		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', $c).prevAll('a').length) {
			$gButtonsInner.append(
				createButton('gallery').button({
				icons: {
					primary: 'ui-icon-image'
				}
			})
				.click(function() {
					loadSlideshowAndStart(0, true);
				}));
		}

		var lastQuery = mw.cookie.get('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 and make it non-intusive: The slideshow button is only partially visible
		var $buttons = $gButtons.find('button');
		$buttons.each(function(i, b) {
			var $b = $(b);
			var oldClass = $b.attr('class')
			var $t = $b.find('span.ui-button-text');

			$b.hover(function() {
				$t.css('width', '');
				$b.attr('class', oldClass);
			}, function() {
				$t.css('width', '0px');
				$b.removeClass('ui-button-text-icon-primary ui-button-text-icon-secondary').addClass('ui-button-icon-only');
			});
			$b.removeClass('ui-button-text-icon-primary ui-button-text-icon-secondary').addClass('ui-button-icon-only');
			$t.css('width', '0px');
		});
	});
};

// launch uses mw.util.$content, which is only available after document ready,
// so wait for document ready before registering the hook
$( function () {
	mw.hook('wikipage.content').add(launch);
} );