User:SunAfterRain/GallerySlideshow.js

From Wikimedia Commons, the free media repository
Jump to navigation Jump to search
Note: After saving, you have to bypass your browser's cache to see the changes. Internet Explorer: press Ctrl-F5, Mozilla: hold down Shift while clicking Reload (or press Ctrl-Shift-R), Opera/Konqueror: press F5, Safari: hold down Shift + Alt while clicking Reload, Chrome: hold down Shift while clicking Reload.
//https://commons.wikimedia.org/w/index.php?title=MediaWiki:Gadget-GallerySlideshow.js&oldid=255203828
//mw.loader.load('//zh.wikipedia.org/w/load.php?modules=ext.gadget.site-lib');
window.wgUXS = function (wg, hans, hant, cn, tw, hk, sg, zh, mo, my) {
    var ret = {
        'zh': zh || hans || hant || cn || tw || hk || sg || mo || my,
        'zh-hans': hans || cn || sg || my,
        'zh-hant': hant || tw || hk || mo,
        'zh-cn': cn || hans || sg || my,
        'zh-sg': sg || hans || cn || my,
        'zh-tw': tw || hant || hk || mo,
        'zh-hk': hk || hant || mo || tw,
        'zh-mo': mo || hant || hk || tw
    };
    return ret[wg] || zh || hans || hant || cn || tw || hk || sg || mo || my; //保證每一語言有值
};

window.wgULS = function (hans, hant, cn, tw, hk, sg, zh, mo, my) {
    return wgUXS(mw.config.get('wgUserLanguage'), hans, hant, cn, tw, hk, sg, zh, mo, my);
};
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 = { 
			zh: {
				"gs-label-start": wgULS("幻灯片(所有图片)","幻燈片(所有圖片)"),
				"gs-label-gallery": wgULS("图库幻灯片","圖庫幻燈片"),
				"gs-label-started": wgULS("显示幻灯片","顯示幻燈片"),
				"gs-label-category": wgULS("分类幻灯片","分類幻燈片"),
				"gs-label-continue": wgULS("重新开始","重新開始"),
				"gs-title-start": wgULS("开始播放所有图像的幻灯片(按文件名的字母顺序排列)","開始播放所有圖像的幻燈片(按檔案名的字母順序排列)"),
				"gs-title-gallery": wgULS("从本页中的图像开始制作幻灯片","從本頁中的圖像開始製作幻燈片"),
				"gs-title-started": wgULS("重新打开幻灯片视窗","重新打開幻燈片視窗"),
				"gs-title-category": wgULS("开始其中一个分类的幻灯片显示(按分类的字母排序,从分类的第一个文件开始)","開始其中一個分類的幻燈片顯示(按分類的字母排序,從分類的第一個檔案開始)"),
				"gs-title-continue": wgULS("继续幻灯片放映,这是您上次访问此页面时离开的位置。","繼續幻燈片放映,這是您上次存取此頁面時離開的位置。")
			}
		}, languageNameParts = mw.config.get('wgUserLanguage').split('-'), lang;
		
		translations.no = translations.nb;
		if (translations[languageNameParts[0]]) {
			lang = languageNameParts[0];
		} else {
			lang = 'zh';
		}
		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', 'jquery.hoverIntent'], 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);
					}
				});
				mw.loader.load('//commons.wikimedia.org/w/index.php?title=User:Sunny00217/GallerySlideshow/setting.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'),
			_switchToIcon = function($b) {
				$b.removeClass('ui-button-text-icon-secondary')
					.removeClass('ui-button-text-icon-primary').addClass('ui-button-icon-only');
			};
		$buttons.each(function(i, b) {
			var $b = $(b),
				oldClass = $b.attr('class'),
				$t = $b.find('span.ui-button-text'),
				tw = $t.width();

			$b.hoverIntent(function() {
				var hasOldClass = false;
				$t.stop(true).delay(200).animate({
					width: tw,
					opacity: 1
				}, {
					duration: 'fast',
					easing: 'linear',
					step: function() {
						if (hasOldClass) return;
						$b.attr('class', oldClass);
						hasOldClass = true;
					}
				});
			}, function() {
				$t.delay(800).animate({
					width: 0,
					opacity: 0
				}, function() {
					_switchToIcon($b);
				});
			});
			_switchToIcon($b);
			$t.width(0).fadeTo(0, 0);
		});
	});
};

// 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);
} );