MediaWiki:Gadget-ImageStack.js

// 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, $slider,
			pendingFrame, repaint, pendingScrollDelta = 0;
		const SCROLL_SLOWDOWN = 5;

		$t = $(this);
		currentImage = !isNaN( $t.data( 'imagestackStart' )) ? ( $t.data( 'imagestackStart' ))-1 : 0;
		pendingFrame = false;
		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, .ImageStackUnits figure.mw-halign-center');
		length = $images.length;
		if (!length) return true;

		$counter = $('<div class="ImageStackCounter">');
		$leftLink = $('<a>', {
			href: '#',
			text: '< '
		}).click(function() {
			currentImage--;
			repaint( true );
			return false;
		});
		$rightLink = $('<a>', {
			href: '#',
			text: ' >'
		}).click(function() {
			currentImage  ;
			repaint( true );
			return false;
		});

		$slider = $( '<input>', {
			type: 'range',
			style: 'width: 90%; display: block; margin: auto',
			min: 0,
			max: length-1,
			value: currentImage
		} ).on( 'input', function (e) {
			currentImage =  e.target.value;
			repaint( false );
		} );

		$currentCount = $('<span>', {
			'class': 'ImageStackCounterCurrent',
			text: currentImage
		});
		$counter.append($leftLink, '(', $currentCount, '/', length, ')', $rightLink, $slider);
		$counter.addClass('center');
		$t.prepend($counter);
		$leftLink.add($rightLink).css({
			fontSize: "110%",
			fontweight: "bold"
		});

		$images.on('mousewheel', function(event, delta) {
			// Scroll is too fast, so we buffer scroll events.
			pendingScrollDelta  = delta;
			var realDelta = Math.floor(pendingScrollDelta/SCROLL_SLOWDOWN);
			if (delta !== 0) {
				// We reverse the direction of scroll.
				currentImage -= realDelta > 2 ? 2 : realDelta;
				pendingScrollDelta -= realDelta*SCROLL_SLOWDOWN;
				repaint( true );
			}
			return false;
		});
		// FIXME the mousedown/mousemove probably don't work because images are links.
		$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
				currentImage  = offset;
				repaint( true );
			}
			return false;
		});

		var toggleImage = function() {
			$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);
			pendingFrame = false;
		};
		repaint = function ( updateSlider ) {
			if (pendingFrame) {
				return;
			}
			pendingFrame = true;
			if ( updateSlider ) $slider[0].value = currentImage;
			requestAnimationFrame(toggleImage);
		}
		toggleImage();
		// This makes first time scrolling smoother.
		$images.find( 'img' ).each( function () {
			this.decoding = 'sync';
			this.loading = 'eager';
		} );
	});
};

mw.hook( 'wikipage.content' ).add( launch );