lg-autoplay.js 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  1. /**!
  2. * lg-autoplay.js | 1.0.0 | October 5th 2016
  3. * http://sachinchoolur.github.io/lg-autoplay.js
  4. * Copyright (c) 2016 Sachin N;
  5. * @license GPLv3
  6. */(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.LgAutoplay = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
  7. (function (global, factory) {
  8. if (typeof define === "function" && define.amd) {
  9. define([], factory);
  10. } else if (typeof exports !== "undefined") {
  11. factory();
  12. } else {
  13. var mod = {
  14. exports: {}
  15. };
  16. factory();
  17. global.lgAutoplay = mod.exports;
  18. }
  19. })(this, function () {
  20. 'use strict';
  21. var _extends = Object.assign || function (target) {
  22. for (var i = 1; i < arguments.length; i++) {
  23. var source = arguments[i];
  24. for (var key in source) {
  25. if (Object.prototype.hasOwnProperty.call(source, key)) {
  26. target[key] = source[key];
  27. }
  28. }
  29. }
  30. return target;
  31. };
  32. var autoplayDefaults = {
  33. autoplay: false,
  34. pause: 5000,
  35. progressBar: true,
  36. fourceAutoplay: false,
  37. autoplayControls: true,
  38. appendAutoplayControlsTo: '.lg-toolbar'
  39. };
  40. /**
  41. * Creates the autoplay plugin.
  42. * @param {object} element - lightGallery element
  43. */
  44. var Autoplay = function Autoplay(element) {
  45. this.el = element;
  46. this.core = window.lgData[this.el.getAttribute('lg-uid')];
  47. // Execute only if items are above 1
  48. if (this.core.items.length < 2) {
  49. return false;
  50. }
  51. this.core.s = _extends({}, autoplayDefaults, this.core.s);
  52. this.interval = false;
  53. // Identify if slide happened from autoplay
  54. this.fromAuto = true;
  55. // Identify if autoplay canceled from touch/drag
  56. this.canceledOnTouch = false;
  57. // save fourceautoplay value
  58. this.fourceAutoplayTemp = this.core.s.fourceAutoplay;
  59. // do not allow progress bar if browser does not support css3 transitions
  60. if (!this.core.doCss()) {
  61. this.core.s.progressBar = false;
  62. }
  63. this.init();
  64. return this;
  65. };
  66. Autoplay.prototype.init = function () {
  67. var _this = this;
  68. // append autoplay controls
  69. if (_this.core.s.autoplayControls) {
  70. _this.controls();
  71. }
  72. // Create progress bar
  73. if (_this.core.s.progressBar) {
  74. _this.core.outer.querySelector('.lg').insertAdjacentHTML('beforeend', '<div class="lg-progress-bar"><div class="lg-progress"></div></div>');
  75. }
  76. // set progress
  77. _this.progress();
  78. // Start autoplay
  79. if (_this.core.s.autoplay) {
  80. _this.startlAuto();
  81. }
  82. // cancel interval on touchstart and dragstart
  83. utils.on(_this.el, 'onDragstart.lgtm touchstart.lgtm', function () {
  84. if (_this.interval) {
  85. _this.cancelAuto();
  86. _this.canceledOnTouch = true;
  87. }
  88. });
  89. // restore autoplay if autoplay canceled from touchstart / dragstart
  90. utils.on(_this.el, 'onDragend.lgtm touchend.lgtm onSlideClick.lgtm', function () {
  91. if (!_this.interval && _this.canceledOnTouch) {
  92. _this.startlAuto();
  93. _this.canceledOnTouch = false;
  94. }
  95. });
  96. };
  97. Autoplay.prototype.progress = function () {
  98. var _this = this;
  99. var _progressBar;
  100. var _progress;
  101. utils.on(_this.el, 'onBeforeSlide.lgtm', function () {
  102. // start progress bar animation
  103. if (_this.core.s.progressBar && _this.fromAuto) {
  104. _progressBar = _this.core.outer.querySelector('.lg-progress-bar');
  105. _progress = _this.core.outer.querySelector('.lg-progress');
  106. if (_this.interval) {
  107. _progress.removeAttribute('style');
  108. utils.removeClass(_progressBar, 'lg-start');
  109. setTimeout(function () {
  110. utils.setVendor(_progress, 'Transition', 'width ' + (_this.core.s.speed + _this.core.s.pause) + 'ms ease 0s');
  111. utils.addClass(_progressBar, 'lg-start');
  112. }, 20);
  113. }
  114. }
  115. // Remove setinterval if slide is triggered manually and fourceautoplay is false
  116. if (!_this.fromAuto && !_this.core.s.fourceAutoplay) {
  117. _this.cancelAuto();
  118. }
  119. _this.fromAuto = false;
  120. });
  121. };
  122. // Manage autoplay via play/stop buttons
  123. Autoplay.prototype.controls = function () {
  124. var _this = this;
  125. var _html = '<span class="lg-autoplay-button lg-icon"></span>';
  126. // Append autoplay controls
  127. _this.core.outer.querySelector(this.core.s.appendAutoplayControlsTo).insertAdjacentHTML('beforeend', _html);
  128. utils.on(_this.core.outer.querySelector('.lg-autoplay-button'), 'click.lg', function () {
  129. if (utils.hasClass(_this.core.outer, 'lg-show-autoplay')) {
  130. _this.cancelAuto();
  131. _this.core.s.fourceAutoplay = false;
  132. } else {
  133. if (!_this.interval) {
  134. _this.startlAuto();
  135. _this.core.s.fourceAutoplay = _this.fourceAutoplayTemp;
  136. }
  137. }
  138. });
  139. };
  140. // Autostart gallery
  141. Autoplay.prototype.startlAuto = function () {
  142. var _this = this;
  143. utils.setVendor(_this.core.outer.querySelector('.lg-progress'), 'Transition', 'width ' + (_this.core.s.speed + _this.core.s.pause) + 'ms ease 0s');
  144. utils.addClass(_this.core.outer, 'lg-show-autoplay');
  145. utils.addClass(_this.core.outer.querySelector('.lg-progress-bar'), 'lg-start');
  146. _this.interval = setInterval(function () {
  147. if (_this.core.index + 1 < _this.core.items.length) {
  148. _this.core.index++;
  149. } else {
  150. _this.core.index = 0;
  151. }
  152. _this.fromAuto = true;
  153. _this.core.slide(_this.core.index, false, false);
  154. }, _this.core.s.speed + _this.core.s.pause);
  155. };
  156. // cancel Autostart
  157. Autoplay.prototype.cancelAuto = function () {
  158. clearInterval(this.interval);
  159. this.interval = false;
  160. if (this.core.outer.querySelector('.lg-progress')) {
  161. this.core.outer.querySelector('.lg-progress').removeAttribute('style');
  162. }
  163. utils.removeClass(this.core.outer, 'lg-show-autoplay');
  164. utils.removeClass(this.core.outer.querySelector('.lg-progress-bar'), 'lg-start');
  165. };
  166. Autoplay.prototype.destroy = function () {
  167. this.cancelAuto();
  168. if (this.core.outer.querySelector('.lg-progress-bar')) {
  169. this.core.outer.querySelector('.lg-progress-bar').parentNode.removeChild(this.core.outer.querySelector('.lg-progress-bar'));
  170. }
  171. };
  172. window.lgModules.autoplay = Autoplay;
  173. });
  174. },{}]},{},[1])(1)
  175. });