Просмотр файла wu-static/js/lightgallery/js/lg-autoplay.js

Размер файла: 6.09Kb
  1. /*! lg-autoplay - v1.0.0 - 2016-09-20
  2. * http://sachinchoolur.github.io/lightGallery
  3. * Copyright (c) 2016 Sachin N; Licensed GPLv3 */
  4.  
  5. (function (root, factory) {
  6. if (typeof define === 'function' && define.amd) {
  7. // AMD. Register as an anonymous module unless amdModuleId is set
  8. define([], function () {
  9. return (factory());
  10. });
  11. } else if (typeof exports === 'object') {
  12. // Node. Does not work with strict CommonJS, but
  13. // only CommonJS-like environments that support module.exports,
  14. // like Node.
  15. module.exports = factory();
  16. } else {
  17. factory();
  18. }
  19. }(this, function () {
  20.  
  21.  
  22. (function($, window, document, undefined) {
  23.  
  24. 'use strict';
  25.  
  26. var defaults = {
  27. autoplay: false,
  28. pause: 5000,
  29. progressBar: true,
  30. fourceAutoplay: false,
  31. autoplayControls: true,
  32. appendAutoplayControlsTo: '.lg-toolbar'
  33. };
  34.  
  35. /**
  36. * Creates the autoplay plugin.
  37. * @param {object} element - lightGallery element
  38. */
  39. var Autoplay = function(element) {
  40.  
  41. this.core = $(element).data('lightGallery');
  42.  
  43. this.$el = $(element);
  44.  
  45. // Execute only if items are above 1
  46. if (this.core.$items.length < 2) {
  47. return false;
  48. }
  49.  
  50. this.core.s = $.extend({}, defaults, this.core.s);
  51. this.interval = false;
  52.  
  53. // Identify if slide happened from autoplay
  54. this.fromAuto = true;
  55.  
  56. // Identify if autoplay canceled from touch/drag
  57. this.canceledOnTouch = false;
  58.  
  59. // save fourceautoplay value
  60. this.fourceAutoplayTemp = this.core.s.fourceAutoplay;
  61.  
  62. // do not allow progress bar if browser does not support css3 transitions
  63. if (!this.core.doCss()) {
  64. this.core.s.progressBar = false;
  65. }
  66.  
  67. this.init();
  68.  
  69. return this;
  70. };
  71.  
  72. Autoplay.prototype.init = function() {
  73. var _this = this;
  74.  
  75. // append autoplay controls
  76. if (_this.core.s.autoplayControls) {
  77. _this.controls();
  78. }
  79.  
  80. // Create progress bar
  81. if (_this.core.s.progressBar) {
  82. _this.core.$outer.find('.lg').append('<div class="lg-progress-bar"><div class="lg-progress"></div></div>');
  83. }
  84.  
  85. // set progress
  86. _this.progress();
  87.  
  88. // Start autoplay
  89. if (_this.core.s.autoplay) {
  90. _this.startlAuto();
  91. }
  92.  
  93. // cancel interval on touchstart and dragstart
  94. _this.$el.on('onDragstart.lg.tm touchstart.lg.tm', function() {
  95. if (_this.interval) {
  96. _this.cancelAuto();
  97. _this.canceledOnTouch = true;
  98. }
  99. });
  100.  
  101. // restore autoplay if autoplay canceled from touchstart / dragstart
  102. _this.$el.on('onDragend.lg.tm touchend.lg.tm onSlideClick.lg.tm', function() {
  103. if (!_this.interval && _this.canceledOnTouch) {
  104. _this.startlAuto();
  105. _this.canceledOnTouch = false;
  106. }
  107. });
  108.  
  109. };
  110.  
  111. Autoplay.prototype.progress = function() {
  112.  
  113. var _this = this;
  114. var _$progressBar;
  115. var _$progress;
  116.  
  117. _this.$el.on('onBeforeSlide.lg.tm', function() {
  118.  
  119. // start progress bar animation
  120. if (_this.core.s.progressBar && _this.fromAuto) {
  121. _$progressBar = _this.core.$outer.find('.lg-progress-bar');
  122. _$progress = _this.core.$outer.find('.lg-progress');
  123. if (_this.interval) {
  124. _$progress.removeAttr('style');
  125. _$progressBar.removeClass('lg-start');
  126. setTimeout(function() {
  127. _$progress.css('transition', 'width ' + (_this.core.s.speed + _this.core.s.pause) + 'ms ease 0s');
  128. _$progressBar.addClass('lg-start');
  129. }, 20);
  130. }
  131. }
  132.  
  133. // Remove setinterval if slide is triggered manually and fourceautoplay is false
  134. if (!_this.fromAuto && !_this.core.s.fourceAutoplay) {
  135. _this.cancelAuto();
  136. }
  137.  
  138. _this.fromAuto = false;
  139.  
  140. });
  141. };
  142.  
  143. // Manage autoplay via play/stop buttons
  144. Autoplay.prototype.controls = function() {
  145. var _this = this;
  146. var _html = '<span class="lg-autoplay-button lg-icon"></span>';
  147.  
  148. // Append autoplay controls
  149. $(this.core.s.appendAutoplayControlsTo).append(_html);
  150.  
  151. _this.core.$outer.find('.lg-autoplay-button').on('click.lg', function() {
  152. if ($(_this.core.$outer).hasClass('lg-show-autoplay')) {
  153. _this.cancelAuto();
  154. _this.core.s.fourceAutoplay = false;
  155. } else {
  156. if (!_this.interval) {
  157. _this.startlAuto();
  158. _this.core.s.fourceAutoplay = _this.fourceAutoplayTemp;
  159. }
  160. }
  161. });
  162. };
  163.  
  164. // Autostart gallery
  165. Autoplay.prototype.startlAuto = function() {
  166. var _this = this;
  167.  
  168. _this.core.$outer.find('.lg-progress').css('transition', 'width ' + (_this.core.s.speed + _this.core.s.pause) + 'ms ease 0s');
  169. _this.core.$outer.addClass('lg-show-autoplay');
  170. _this.core.$outer.find('.lg-progress-bar').addClass('lg-start');
  171.  
  172. _this.interval = setInterval(function() {
  173. if (_this.core.index + 1 < _this.core.$items.length) {
  174. _this.core.index++;
  175. } else {
  176. _this.core.index = 0;
  177. }
  178.  
  179. _this.fromAuto = true;
  180. _this.core.slide(_this.core.index, false, false);
  181. }, _this.core.s.speed + _this.core.s.pause);
  182. };
  183.  
  184. // cancel Autostart
  185. Autoplay.prototype.cancelAuto = function() {
  186. clearInterval(this.interval);
  187. this.interval = false;
  188. this.core.$outer.find('.lg-progress').removeAttr('style');
  189. this.core.$outer.removeClass('lg-show-autoplay');
  190. this.core.$outer.find('.lg-progress-bar').removeClass('lg-start');
  191. };
  192.  
  193. Autoplay.prototype.destroy = function() {
  194.  
  195. this.cancelAuto();
  196. this.core.$outer.find('.lg-progress-bar').remove();
  197. };
  198.  
  199. $.fn.lightGallery.modules.autoplay = Autoplay;
  200.  
  201. })(jQuery, window, document);
  202.  
  203.  
  204. }));