lg-autoplay.js 6.1 KB

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