MediaWiki:Gadget-ImageStack.js
From WikiMSK
Note: After publishing, 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 / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
// Written by User:Hellerhoff, 2011
/** Script for Template:Imagestack */
/*jshint curly:false, jquery:true */
var launch = function($c) {
'use strict';
var $imageStacks = $('div.ImageStack', $c);
if (0 === $imageStacks.length) return;
$('.ImageStack_JS_required').hide();
if (document.URL.match(/printable/g)) return;
var scrollobject = false; // flag for scroll-dragging
var mouse_y = 0;
$(document).on('mouseup', function(event) {
var did_scroll = !scrollobject;
scrollobject = false; // unset flag
return did_scroll;
}); // bind mouseup
$imageStacks.each(function() {
var currentImage = 0,
length, loop,
$images, $t, $counter, $leftLink,
$rightLink, $currentCount;
$t = $(this);
loop = $t.find('.ImageStack_loop').length ? true : false;
//Use when 1.17 final is in use
//loop = $t.attr('data-loop') == 'true' ? true : false; //Get loop prop
$images = $t.find('.ImageStackUnits div.center');
length = $images.length;
if (!length) return true;
$counter = $('<div class="ImageStackCounter">');
$leftLink = $('<a>', {
href: '#',
text: '< '
}).click(function() {
toggleImage(-1, loop);
return false;
});
$rightLink = $('<a>', {
href: '#',
text: ' >'
}).click(function() {
toggleImage(1, loop);
return false;
});
$currentCount = $('<span>', {
'class': 'ImageStackCounterCurrent',
text: '0'
});
$counter.append($leftLink, '(', $currentCount, '/', length, ')', $rightLink);
$counter.addClass('center');
$t.prepend($counter);
$leftLink.add($rightLink).css({
fontSize: "110%",
fontweight: "bold"
});
$images.on('mousewheel', function(event, delta) {
delta = Math.floor(delta);
if (delta !== 0) toggleImage(-delta, loop);
return false;
});
$images.on('mousedown', function(event) { // prepare scroll by drag
mouse_y = event.screenY; // remember mouse-position
scrollobject = true; // set flag
return false;
});
$images.on('mousemove', function(event) {
if (scrollobject && Math.abs(mouse_y - event.screenY) > 10) {
var offset = (mouse_y < event.screenY) ? 1 : -1;
mouse_y = event.screenY; // remember mouse-position for next event
toggleImage(offset, loop);
}
return false;
});
var toggleImage = function(offset, loop) {
currentImage += offset; //add offset
$leftLink.show();
$rightLink.show();
if (!loop) {
if (currentImage <= 0) {
currentImage = 0;
$leftLink.hide();
} else if (currentImage >= $images.length - 1) {
currentImage = $images.length - 1;
$rightLink.hide();
}
} else {
if (currentImage < 0) currentImage = $images.length - 1;
if (currentImage >= $images.length) currentImage = 0;
}
$images.hide(); //Hide all
$images.eq(currentImage).show();
$currentCount.text(currentImage + 1);
};
toggleImage(0, loop);
});
};
mw.hook( 'wikipage.content' ).add( launch );