☰

GifPlayer

GifPlayer Control

Dieses Skript sollte nicht direkt installiert werden. Es handelt sich hier um eine Bibliothek für andere Skripte, welche über folgenden Befehl in den Metadaten eines Skriptes eingebunden wird // @require https://update.greasyfork.org/scripts/438693/1009492/GifPlayer.js 

 (function($) {

 	function GifPlayer(preview, options){
 		this.previewElement=preview;
 		this.spinnerElement=$("<div class = 'spinner'></div>");
 		this.options=options;
 		this.gifLoaded=false;
 	}

 	GifPlayer.prototype = {

 		activate: function(){
 			this.wrap();
 			this.addSpinner();
 			this.addControl();
 			this.addEvents();
 		},

 		wrap: function(){
 			this.wrapper = this.previewElement.wrap("<div class='gifplayer-wrapper'></div>").parent();
 			this.wrapper.css('width', this.previewElement.width());
 			this.wrapper.css('height', this.previewElement.height());
 			this.previewElement.addClass('gifplayer');
 			this.previewElement.css('cursor','pointer');
 		},

 		getGifSrc: function(){
 			var size = "-" + this.previewElement.width() + 'x' + this.previewElement.height();
 			var linkHref = 	this.previewElement.attr('src').replace(size, '').replace('.png','.gif');
 			return linkHref;
 		},

 		addControl: function(){
 			this.playElement = $("<ins class='play-gif'>" + this.options.label + "</ins>");
 			this.playElement.css('left', this.previewElement.width()/2 + this.playElement.width()/2);
 			this.wrapper.append(this.playElement);
 		},

 		addEvents: function(){
 			var gp=this;
 			gp.playElement.on( 'click', function(e){
 				$(this).hide();
 				gp.spinnerElement.show();
 				gp.loadGif();
 				e.preventDefault();
   				e.stopPropagation();
 			});
 			gp.previewElement.on( 'click', function(e){
 				if(gp.playElement.is(':visible')){
	 				gp.playElement.hide();
	 				gp.spinnerElement.show();
	 				gp.loadGif();
 				}
 				e.preventDefault();
   				e.stopPropagation();
 			});
 			gp.spinnerElement.on('click', function(e){
 				e.preventDefault();
   				e.stopPropagation();
 			});
 		},

 		loadGif: function(){
 			if(!this.gifLoaded){
 				this.enableAbort();
 			}
 			var gifSrc=this.getGifSrc();
 			var gifWidth=this.previewElement.width();
 			var gifHeight=this.previewElement.height();
 			this.gifElement=$("<img src='" + gifSrc + "' width='"+ gifWidth + "' height=' "+ gifHeight +" '/>");
 			var gp=this;
 			this.gifElement.load( function(){
 				gp.gifLoaded=true;
 				gp.resetEvents();
 				$(this).css('cursor','pointer');
 				$(this).css('position','absolute');
 				$(this).css('top','0');
 				$(this).css('left','0');
				gp.previewElement.hide();
 				gp.wrapper.append(gp.gifElement);
 				gp.spinnerElement.hide();
 				
 				$(this).click( function(e){
 					$(this).remove();
 					gp.previewElement.show();
 					gp.playElement.show();
 					e.preventDefault();
 					e.stopPropagation();
 				});
			});
 			
 		},

 		enableAbort: function(){
 			var gp = this;
 			this.previewElement.click( function(e){
 				gp.abortLoading(e);
 			});
 			this.spinnerElement.click( function(e){
 				gp.abortLoading(e);
 			});
 		},

 		abortLoading: function(e){
 			this.spinnerElement.hide();
			this.playElement.show();
			e.preventDefault();
			e.stopPropagation();
			this.gifElement.off('load').on( 'load', function(ev){
				ev.preventDefault();
				ev.stopPropagation();
			});
			this.resetEvents();
 		},

 		resetEvents: function(){
 			this.previewElement.off('click');
			this.playElement.off('click');
			this.spinnerElement.off('click');
			this.addEvents();
 		},

 		addSpinner: function(){
 			this.wrapper.append(this.spinnerElement);
 			this.spinnerElement.hide();
 		}

 	}

 	$.fn.gifplayer = function(options) {
 		this.each(function(){
 			options = $.extend({}, $.fn.gifplayer.defaults, options);
 			var gifplayer = new GifPlayer($(this), options);
 			gifplayer.activate();
 		});	
 	}

 	$.fn.gifplayer.defaults = {
 		label: 'gif'
 	};

 })(jQuery);