מדיה ויקי:SlideShow.js

// סקריפט המשמש את תבנית המצגת  // Written by [[he:User:קובי כרמל]]  // version 3.3  'use strict';  if(!window.SS_DEBUG) {  	var SlideShow = function(object, fullScreen){  		var self = this;  		this.buttons = {  			options: { 				html: true, 				delayIn: 500, 				fade: true, 				delayOut: 0 			},  			attr: { 				'zoomin': self.local.showFullScreen, 				'seek-end': self.local.firstImage, 				'seek-next': self.local.prevImage, 				'triangle-1-w': self.local.play, 				'seek-prev': self.local.nextImage, 				'seek-start': self.local.lastImage, 				'help': self.local.help 			},  			create: function(){  				var toolbar = object.find('.gallery-slideshow-toolbar');  				for(var b in self.buttons.attr) { 					if(b == 'zoomin' && fullScreen) 						continue; 					var className = 'ui-icon-' + b, 						button = $('<button>', {'class': className}) 							.button({label: self.buttons.attr[b], text: false, icons: {primary: className}}) 							.tipsy(self.buttons.options) 							.click(function(e){ 								self.animate($(this), e.isTrigger); 							});  					toolbar.append(button); 				}  				toolbar.children().css({width: 25, height: 25}); 			}  		};  		this.height = 0; // computed height  		this.length = 0; // Amount of images  		this.object = object;  		this.theight = 0; // the greatest height of images title  		this.addBullets = function(){  			var options = self.buttons.options, 				bullets = object.find('.slideshow-bullets');  			self.links.each(function(){ 				options.fallback = $(this).data('title'); 				bullets 					.append($('<span>', {'class': 'ui-icon ui-icon-radio-off'}) 						.tipsy(options) 						.click(function(){ 							self.animate($(this).index()); 						}) 				) 			}) 		};  		this.addImages = function(res){  			var pages = res.query.pages;  			self.links.each(function(){ 				var info, 					title = self.decodeLink($(this)), 					isFirst = !self.length;  				for(var i in pages) 					if(pages[i].title == title) { 						info = pages[i].imageinfo[0]; 						break; 					}  				var height = info.thumbheight, 					src = info.thumburl;  				$(this).children() 					.attr('src', src) 					.width(info.thumbwidth) 					.height(height) 					.wrap($('<div>', {'class': 'img-wrapper'}) 						.css('right', isFirst ? 0 : self.imageWidth) 				);  				if(!$(this).index()) { 					$(this).addClass('active'); 					object.find('.slideshow-title').css('display', 'block'); // IE to hell 					object.find('.slideshow-files').css('opacity', 1).show(); 					object.find('.slideshow-preview, #slideshow-loading').hide(); 				}  				if(self.height < height) 					self.height = height;  				self.length++; 			});  			self.addBullets(); 			self.showNavigator();  			if (!fullScreen) { 				if ($.client.profile().name == 'msie') 					setTimeout(self.computeHeight, 500); 				else 					self.computeHeight(); 			} 		};  		this.addTitles = function(){ 			var title, 				htmlTitle, 				theight, 				rows = object.find('.slideshow-preprocessing p').html().split(self.local.file + ':');  			object.find('.slideshow-title').hide();  			for(var i = 0; i < rows.length; i++) { 				if(!$.trim(rows[i])) { 					rows.splice(i, 1); 					i--; 					continue; 				} 				title = rows[i].split('#');  				if(title[2]) 					for(var m = 2; m < title.length; m++) 						title[1] += '#' + title[m];  				htmlTitle = title[1] || ''; 				self.links.eq(i).data({title: htmlTitle});  				theight = object.find('.theight-calculator').html(htmlTitle).height();  				if(self.theight < theight) 					self.theight = theight; 			} 		};  		this.animate = function(button, trigger){ 			var bullet = typeof button == 'number', 				slider = object.find('.slideshow-files'), 				active = slider.children('a.active'), 				index = bullet ? button : self.getActive();  			if(!bullet) { 				var method, className = function(){ 					var cls = button.attr('class').split(' '); 					for(var n in cls) 						if(cls[n].match(/ui-icon-/)) 							return cls[n].replace('ui-icon-', ''); 				}.call();  				switch(className) { 					case 'zoomin': 						return self.fullScreen(); 					case 'seek-end': 						if(index) method = 'prev'; 						index = 0; 						break; 					case 'seek-next': 						if(index) method = 'prev'; 						index--; 						break; 					case 'seek-prev': 						if(index < self.length - 1) method = 'next'; 						else self.stop(); 						index++; 						break; 					case 'seek-start': 						if(index < self.length) method = 'next'; 						index = self.length - 1; 						break; 					case 'triangle-1-w': 						return self.play(); 					case 'stop': 						return self.stop(); 					case 'help': 						return window.open(location.protocol + '//' + location.hostname + '/wiki/' + self.local.helpPage, '_blank'); 				}  				button.blur(); 			}  			if(!trigger) self.stop();  			var toImage = slider.find('a').eq(index), 				zIndex = eval(object.find('.active').children().css('z-index')), 				newImage = toImage.children(), 				oldImage = active.children(), 				animComplete = function(){ 					newImage.css('zIndex', zIndex + 1); 					active.removeClass('active').children().css({right: self.imageWidth, marginTop: 0}); 					toImage.addClass('active').children().css('right', 0); 					object.find('.slideshow-title').html(toImage.find('img').data('title')); 					self.showNavigator(); 				};  			var effects = {};  			effects[self.local.verSliding] = { 				prev: { 					old: { 						animate: {right: self.imageWidth} 					},  					toNew: { 						css: {right: 0} 					} 				},  				next: { 					toNew: { 						css: {zIndex: zIndex + 1}, 						animate: {right: 0} 					} 				} 			};  			effects[self.local.horizSliding] = { 				prev: { 					toNew: { 						css: {marginTop: -self.imageHeight, zIndex: zIndex + 1, right: 0}, 						animate: {marginTop: 0} 					} 				},  				next: { 					old: { 						css: {zIndex: zIndex + 1}, 						animate: {marginTop: -self.imageHeight} 					}, 					toNew: { 						css: {right: 0} 					} 				} 			};  			effects[self.local.fading] = { 				next: { 					toNew: { 						css: {zIndex: zIndex + 1, opacity: 0, right: 0}, 						animate: {opacity: 1} 					} 				} 			};  			if(bullet) { 				var oldIndex = self.getActive(); 				if(oldIndex == index) 					return; 				method = index > oldIndex ? 'next' : 'prev'; 			}  			if(method) { 				var effect; 				if(effects[self.currentEffect]) 					effect = effects[self.currentEffect][method]; 				else 					effect = effects[self.local.verSliding][method];  				if(!effect) effect = effects[self.currentEffect][method == 'next' ? 'prev' : 'next'];  				if(effect.toNew) { 					if(effect.toNew.css) newImage.css(effect.toNew.css); 					if(effect.toNew.animate) newImage.animate(effect.toNew.animate, self.duration, animComplete); 				}  				if(effect.old) { 					if(effect.old.css) oldImage.css(effect.old.css); 					if(effect.old.animate) oldImage.animate(effect.old.animate, self.duration, animComplete); 				} 			} 		};  		this.computeHeight = function(){ 			var theight = self.theight, 				heightDiff = theight - 57, 				caption = object.find('.slideshow-caption'), 				capHeight = caption.text() ? caption.show().height() : 0, 				bullHeight = object.find('.slideshow-bullets').height(), 				height = self.height + heightDiff + bullHeight + capHeight;  			object 				.height(height + 120) 				.find('.slideshow-wrapper') 				.height(height + 65) 				.find('.slideshow-files') 				.height(self.height + 2) 				.nextAll('.slideshow-title') 				.height(theight); 		};  		this.construct = function(){  			var imageBox = object.find('.slideshow-files');  			self.requires = imageBox.html(); 			self.links = imageBox.find(' .gallerybox > div > .thumb a.image'); 			imageBox.html(self.links); 			self.addTitles();  			if(fullScreen) 				imageBox.after($('<div>', {id: 'slideshow-loading'}).text(self.local.loading + '...'));  			self.getSource(); 		};  		this.decodeLink = function(elem){ 			return self.local.file + ':' + decodeURIComponent(elem.attr('href').split(':')[1].replace(/_/g, ' ')); 		};  		this.fullScreen = function(){  			var content = object.clone(), 				toolbar = object.find('.gallery-slideshow-toolbar').clone().empty(), 				option = { 					imageWidth: 600, 					imageHeight: 400 				};  			for(var o in option) { 				if(!content.find('.' + o).length) 					content.find('.slideshow-custom').append($('<div>').addClass(o)); 				content.find('.' + o).text(option[o]); 			}  			content.find('.gallery-slideshow-toolbar, .slideshow-navigator').remove(); 			content.find('.slideshow-bullets').empty(); 			content.find('.slideshow-files') 				.css('opacity', 0) 				.height(option.imageHeight) 				.html(self.requires); 			content.find('.slideshow-title').height(30);  			content.css({ 				width: option.imageWidth, 				height: option.imageHeight + 55 			});  			$('#ssDialog').remove();  			var options = { 				bgiframe: true, 				draggable: false, 				resizable: false, 				width: option.imageWidth + 30, 				height: option.imageHeight + 110, 				modal: true 			};  			var $dialog = $('<div>', {id: 'ssDialog'});  			$dialog 				.css({ 					display: 'none', 					overflow: 'visible' 				}) 				.append(content);  			$('body').append($dialog);  			$dialog.dialog(options);  			if ($.client.profile().name == 'msie') // for the cursed IE 				$('html').scrollTop($('#ssDialog').offset().top - 120);  			toolbar.css({ 				textAlign: 'center', 				border: 'none' 			});  			var uiDialog = $dialog.parent();  			uiDialog.find('.ui-dialog-title').replaceWith(toolbar);  			var fs = new SlideShow(uiDialog, true);  			fs.run(); 		};  		this.getActive = function(){ 			return object.find('a.active').index(); 		};  		this.getSource = function(){  			var titles = [], 				param = { 					action: 'query', 					format: 'json', 					prop: 'imageinfo', 					iiprop: 'url', 					iiurlwidth: self.imageWidth, 					iiurlheight: self.imageHeight 				};  			self.links.each(function(){ 				titles.push(self.decodeLink($(this))); 			});  			param.titles = titles.join('|');  			$.getJSON('/w/api.php', param, function(res){ 				self.addImages(res); 			}) 		};  		this.play = function(){ 			clearInterval(self.timer); 			object.find('.ui-icon-triangle-1-w').toggleClass('ui-icon-triangle-1-w ui-icon-stop') 				.filter('button') 				.attr('original-title', self.local.stop); 			self.timer = setInterval(function(){ 				object.find('button.ui-icon-seek-prev').click(); 			}, self.delay); 		};  		this.setOptions = function(){ 			var options = { 				currentEffect: object.find('.currentEffect').text() || self.local.verSliding, 				imageHeight: parseInt(object.find('.imageHeight').text()) || 265, 				imageWidth: parseInt(object.find('.imageWidth').text()) || 220, 				duration: parseInt(object.find('.duration').text()) || 600, 				delay: parseInt(object.find('.delay').text()) || 3000 			};  			for(var o in options) 				self[o] = options[o]; 		};  		this.showNavigator = function(){ 			var index = self.getActive(), 				text = self.local.imageOf.replace('$1', index + 1).replace('$2', self.length);  			object.find('.slideshow-navigator').text(text); 			object.find('.slideshow-title').html(self.links.eq(index).data('title')); 			object.find('.slideshow-bullets span') 				.eq(index) 				.toggleClass('ui-icon-radio-off ui-icon-bullet') 				.siblings('.ui-icon-bullet') 				.toggleClass('ui-icon-radio-off ui-icon-bullet'); 		};  		this.run = function(){ 			self.setOptions(); 			self.construct(); 			self.buttons.create(); 		};  		this.stop = function(){ 			clearInterval(self.timer); 			object.find('.ui-icon-stop') 				.toggleClass('ui-icon-triangle-1-w ui-icon-stop') 				.filter('button') 				.attr('original-title', self.local.play) 				.blur(); 		} 	};  	SlideShow.prototype.local = { 		direction: 'rtl', 		showFullScreen: 'צפיה בתמונות מוגדלות', 		firstImage: 'לתמונה הראשונה', 		prevImage: 'לתמונה הקודמת', 		play: 'הפעלת המצגת', 		nextImage: 'לתמונה הבאה', 		lastImage: 'לתמונה האחרונה', 		help: 'עזרה', 		file: 'קובץ', 		helpPage: 'עזרה:מצגת תמונות', 		horizSliding: 'החלקה אנכית', 		verSliding: 'החלקה אופקית', 		fading: 'עמעום', 		loading: 'טוען תמונות', 		stop: 'סיום מצגת', 		imageOf: 'תמונה $1 מתוך $2' 	};  	$(function(){ 		if ( $('.gallery-slideshow').length === 0 ) return; 		mw.loader.using(['jquery.ui', 'jquery.tipsy'], function(){ 			$('.gallery-slideshow') 				.each(function(){ 					var slide = new SlideShow($(this)); 					slide.run(); 				}) 				.on('click', function(){ 					$('.gallery-slideshow.selected').removeClass('selected'); 					$(this).addClass('selected'); 				});  			$(document).keydown(function(event){  				var code = event.keyCode, 					$dialog = $('#ssDialog'), 					$elem = $dialog.is(':visible') ? $dialog.prev() : $('.gallery-slideshow.selected'); // is full screen?  				if((code != 37 && code != 39) || !mw.config.get('wgIsArticle') || !$elem.length) 					return;  				if(code == 37) 					$elem.find('button.ui-icon-seek-prev').click(); 				else 					$elem.find('button.ui-icon-seek-next').click();  				return false; 			}) 		}) 	});  	importStylesheet('Mediawiki:SlideShow.css'); }