משתמש:קיפודנחש/gallery-slideshow.js

"use strict";
$(function() {
	function createSlideshow(index, galleryDiv) {
		
		var fadeOutRate = window.GSL_fadeout || 800,
			fadeInRate = window.GSL_fadeoin || 800,
			slideShowDelay = window.GSL_delay || 4000,
			$gallery = $('ul.gallery', galleryDiv),
			allImgAnchors = $('ul.gallery > li > div > div > div > a.image', galleryDiv),
			allCaptions = $('ul.gallery > li div.gallerytext', galleryDiv),
			radiosDiv = $('.gallery-slideshow-radios', galleryDiv),
			radioTemplate = $('.gallery-slideshow-radio', galleryDiv),
			oneSlideTemplate = $('.gallery-slideshow-slide', galleryDiv),
			allSlides = [],
			allRadios = [],
			slideShow,
			currentSlide,
			timer,
			tipsyOptions = {
				title: tipsyTooltip,
				html: true,
				delayIn: 500,
				fade: true,
				delayOut: 0
			},
			buttonOptions = {
				last: {index: -1},
				first: {index: 0},
				next: {offset: 1},
				prev: {offset: -1},
				play: {tooltip: 'החל מצגת תמונות', action: playButtonClicked},
				stop: {tooltip: 'עצור מצגת תמונות'}
			};
			
		function quadrant(elem, x) {
			x -= elem.offset().left;
			return Math.floor(4.0 * x / elem.width());
		}
		
		function makeOneSlide(index) {
			var anchor = allImgAnchors[index],
				caption = allCaptions[index],
				res,
				image = $('img', anchor)
					.click(imageClicked)
					.mousemove(function(e) {
						$(this).data({mouseloc: e.clientX});
					})
					.data({tiptype: 'image', index: index})
					.tipsy(tipsyOptions);
			radioTemplate.before(' ').before(
				radioTemplate.clone()
				.html(radioTemplate.html().replace('$NUM', (index+1)))
				.data({index: index, tiptype: 'radio'})
				.click(radioClicked)
				.tipsy(tipsyOptions)
			);
			if (oneSlideTemplate.length) {
				res = oneSlideTemplate.clone();
				$('.gallery-slideshow-slide-image', res).append(image);
				$('.gallery-slideshow-slide-caption', res).append(caption);
			}
			else
				res = $('<div>', {'class': 'gallery-slideshow-slide'})
					.append(image)
					.append(caption);
			return res.toggle(false);
		}
		
		function switchToSlide(i) {
			function showNew(immediate) {
				$('.gallery-slideshow-current-index', galleryDiv).text(1 + currentSlide);
				$('.gallery-slideshow-radio', galleryDiv)
					.removeClass('gallery-slideshow-radio-selected')
					.filter(function() {return $(this).data('index') == currentSlide;})
					.addClass('gallery-slideshow-radio-selected');
				allSlides[currentSlide].fadeIn(immediate ? 0 : fadeInRate, function() {
					slideShow.css({minHeight: slideShow.height(), minWidth: slideShow.width()})});
			}
			
			if (i == currentSlide)
				return;
			var previous = currentSlide;
			currentSlide = (i + allSlides.length) % allSlides.length;
			if (typeof previous == 'number')
				allSlides[previous].fadeOut(fadeOutRate, showNew);
			else
				showNew(true);
		}
		
		function advance(step) { // step might be nagative.
			return switchToSlide(next(step));
		}
		
		function next(offset) {
			return (currentSlide + offset + allSlides.length) % allSlides.length;
		}
		
		function tipOfGotoImage(index) {
			index = (index + allSlides.length) % allSlides.length;
			return 'לתמונה ' + (index+1) + ':<br/>' + allCaptions[index].innerHTML;
		}
		
		function tipsyTooltip() {
			var $this = $(this);
			switch ($this.data('tiptype')) {
				case 'image':
					var imgnum = $this.data('index'),
						mouseloc = $this.data('mouseloc');
					switch (quadrant($this, mouseloc)) {
						case 0: return tipOfGotoImage(next(1))
						case 1:
						case 2: return 'לדף הקובץ של התמונה';
						case 3: return tipOfGotoImage(next(-1));
					}
					break;
				case 'button':
					var offset = $this.data('offset'),
						index = $this.data('index');
					return (typeof offset == 'number' && tipOfGotoImage(next(offset))) ||
							(typeof index == 'number' && tipOfGotoImage(index)) ||
							$this.data('tooltip');
					break;
				case 'radio':
					return tipOfGotoImage($this.data('index'));
					break;
			}
		}
		
		function stopAnim() {
			$(galleryDiv).stop(false, true);
			clearInterval(timer);
			$('.gallery-slideshow-play', galleryDiv).button('enable');
			$('.gallery-slideshow-stop', galleryDiv).button('disable');
			$('.tipsy').remove();
		}
		
		function imageClicked(e) {
			stopAnim();
			switch (quadrant($(this), e.clientX)) {
				case 0: advance(1);
						break;
				case 1:
				case 2: window.location = allImgAnchors[currentSlide].href;
						break;
				case 3: advance(-1);
						break;
			}
		}
		
		function radioClicked() {
			stopAnim();
			switchToSlide($(this).data('index'));
		}
		
		function playButtonClicked() {
			stopAnim();
			timer = setInterval(function() {
				advance(1);
			}, slideShowDelay);
			$('.gallery-slideshow-play', galleryDiv).button('disable');
			$('.gallery-slideshow-stop', galleryDiv).button('enable');
			$('.tipsy').remove();
		}
		
		function buttonClicked(e) {
			var button = $(this),
  				offset = button.data('offset'),
				index = button.data('index'),
				action = button.data('action');
			stopAnim();
			if (typeof offset == 'number')
				advance(offset);
			else if (typeof index == 'number')
				switchToSlide(index);
			else if (typeof action == 'function')
				action();
		}
		
		function getButtonName(elem) {
			for (var suffix in buttonOptions)
				if (elem.hasClass('gallery-slideshow-' + suffix))
					return suffix;
			return {};
		}
		slideShow = $('.gallery-slideshow-div');
		if (! slideShow.length)
			slideShow = $('<div>', {'class' : 'gallery-slideshow-div'})
			.insertBefore($gallery);
		$gallery.toggle(false);
		for (var i = 0; i < allImgAnchors.length; i++) {
			var slide = makeOneSlide(i);
			allSlides.push(slide);
			slideShow.append(slide);
		}
		radioTemplate.toggle(false);
		var buttonTemplates = $('.gallery-slideshow-button');
		buttonTemplates.each(function(index, template) {
			var $template = $(template),
				buttonName = getButtonName($template),
				text = $template.text(),
				className = $template.attr('class');
			$('<button>', {'class': className})
				.insertBefore($template)
				.button({label: text, text: false, icons: {primary: className}})
				.click(buttonClicked)
				.data($.extend({tiptype: 'button'}, buttonOptions[buttonName]))
				.tipsy(tipsyOptions);
			$template.remove();
		});
		switchToSlide(0);
		stopAnim();
	}
	
	if ($('div.gallery-slideshow').length) {
		mw.util.addCSS($('.gallery-slideshow-style').text());		
		mw.loader.using(['jquery.ui', 'jquery.tipsy'], function() {
			$('div.gallery-slideshow').each(createSlideshow);
		});
	}
});