You are not currently logged in. Are you accessing the unsecure (http) portal? Click here to switch to the secure portal. |
MediaWiki:Gadget-GallerySlideshow.js
Note: After saving, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Clear the cache in Tools → Preferences
/**
* 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'
});
});
});