GifPlayer

GifPlayer Control

This script should not be not be installed directly. It is a library for other scripts to include with the meta directive // @require https://update.greasyfork.org/scripts/438693/1009492/GifPlayer.js

  1. (function($) {
  2.  
  3. function GifPlayer(preview, options){
  4. this.previewElement=preview;
  5. this.spinnerElement=$("<div class = 'spinner'></div>");
  6. this.options=options;
  7. this.gifLoaded=false;
  8. }
  9.  
  10. GifPlayer.prototype = {
  11.  
  12. activate: function(){
  13. this.wrap();
  14. this.addSpinner();
  15. this.addControl();
  16. this.addEvents();
  17. },
  18.  
  19. wrap: function(){
  20. this.wrapper = this.previewElement.wrap("<div class='gifplayer-wrapper'></div>").parent();
  21. this.wrapper.css('width', this.previewElement.width());
  22. this.wrapper.css('height', this.previewElement.height());
  23. this.previewElement.addClass('gifplayer');
  24. this.previewElement.css('cursor','pointer');
  25. },
  26.  
  27. getGifSrc: function(){
  28. var size = "-" + this.previewElement.width() + 'x' + this.previewElement.height();
  29. var linkHref = this.previewElement.attr('src').replace(size, '').replace('.png','.gif');
  30. return linkHref;
  31. },
  32.  
  33. addControl: function(){
  34. this.playElement = $("<ins class='play-gif'>" + this.options.label + "</ins>");
  35. this.playElement.css('left', this.previewElement.width()/2 + this.playElement.width()/2);
  36. this.wrapper.append(this.playElement);
  37. },
  38.  
  39. addEvents: function(){
  40. var gp=this;
  41. gp.playElement.on( 'click', function(e){
  42. $(this).hide();
  43. gp.spinnerElement.show();
  44. gp.loadGif();
  45. e.preventDefault();
  46. e.stopPropagation();
  47. });
  48. gp.previewElement.on( 'click', function(e){
  49. if(gp.playElement.is(':visible')){
  50. gp.playElement.hide();
  51. gp.spinnerElement.show();
  52. gp.loadGif();
  53. }
  54. e.preventDefault();
  55. e.stopPropagation();
  56. });
  57. gp.spinnerElement.on('click', function(e){
  58. e.preventDefault();
  59. e.stopPropagation();
  60. });
  61. },
  62.  
  63. loadGif: function(){
  64. if(!this.gifLoaded){
  65. this.enableAbort();
  66. }
  67. var gifSrc=this.getGifSrc();
  68. var gifWidth=this.previewElement.width();
  69. var gifHeight=this.previewElement.height();
  70. this.gifElement=$("<img src='" + gifSrc + "' width='"+ gifWidth + "' height=' "+ gifHeight +" '/>");
  71. var gp=this;
  72. this.gifElement.load( function(){
  73. gp.gifLoaded=true;
  74. gp.resetEvents();
  75. $(this).css('cursor','pointer');
  76. $(this).css('position','absolute');
  77. $(this).css('top','0');
  78. $(this).css('left','0');
  79. gp.previewElement.hide();
  80. gp.wrapper.append(gp.gifElement);
  81. gp.spinnerElement.hide();
  82. $(this).click( function(e){
  83. $(this).remove();
  84. gp.previewElement.show();
  85. gp.playElement.show();
  86. e.preventDefault();
  87. e.stopPropagation();
  88. });
  89. });
  90. },
  91.  
  92. enableAbort: function(){
  93. var gp = this;
  94. this.previewElement.click( function(e){
  95. gp.abortLoading(e);
  96. });
  97. this.spinnerElement.click( function(e){
  98. gp.abortLoading(e);
  99. });
  100. },
  101.  
  102. abortLoading: function(e){
  103. this.spinnerElement.hide();
  104. this.playElement.show();
  105. e.preventDefault();
  106. e.stopPropagation();
  107. this.gifElement.off('load').on( 'load', function(ev){
  108. ev.preventDefault();
  109. ev.stopPropagation();
  110. });
  111. this.resetEvents();
  112. },
  113.  
  114. resetEvents: function(){
  115. this.previewElement.off('click');
  116. this.playElement.off('click');
  117. this.spinnerElement.off('click');
  118. this.addEvents();
  119. },
  120.  
  121. addSpinner: function(){
  122. this.wrapper.append(this.spinnerElement);
  123. this.spinnerElement.hide();
  124. }
  125.  
  126. }
  127.  
  128. $.fn.gifplayer = function(options) {
  129. this.each(function(){
  130. options = $.extend({}, $.fn.gifplayer.defaults, options);
  131. var gifplayer = new GifPlayer($(this), options);
  132. gifplayer.activate();
  133. });
  134. }
  135.  
  136. $.fn.gifplayer.defaults = {
  137. label: 'gif'
  138. };
  139.  
  140. })(jQuery);