lg-autoplay.es5.js 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
  1. /*!
  2. * lightgallery | 2.4.0-beta.0 | December 12th 2021
  3. * http://www.lightgalleryjs.com/
  4. * Copyright (c) 2020 Sachin Neravath;
  5. * @license GPLv3
  6. */
  7. /*! *****************************************************************************
  8. Copyright (c) Microsoft Corporation.
  9. Permission to use, copy, modify, and/or distribute this software for any
  10. purpose with or without fee is hereby granted.
  11. THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
  12. REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
  13. AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
  14. INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
  15. LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
  16. OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
  17. PERFORMANCE OF THIS SOFTWARE.
  18. ***************************************************************************** */
  19. var __assign = function() {
  20. __assign = Object.assign || function __assign(t) {
  21. for (var s, i = 1, n = arguments.length; i < n; i++) {
  22. s = arguments[i];
  23. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
  24. }
  25. return t;
  26. };
  27. return __assign.apply(this, arguments);
  28. };
  29. /**
  30. * List of lightGallery events
  31. * All events should be documented here
  32. * Below interfaces are used to build the website documentations
  33. * */
  34. var lGEvents = {
  35. afterAppendSlide: 'lgAfterAppendSlide',
  36. init: 'lgInit',
  37. hasVideo: 'lgHasVideo',
  38. containerResize: 'lgContainerResize',
  39. updateSlides: 'lgUpdateSlides',
  40. afterAppendSubHtml: 'lgAfterAppendSubHtml',
  41. beforeOpen: 'lgBeforeOpen',
  42. afterOpen: 'lgAfterOpen',
  43. slideItemLoad: 'lgSlideItemLoad',
  44. beforeSlide: 'lgBeforeSlide',
  45. afterSlide: 'lgAfterSlide',
  46. posterClick: 'lgPosterClick',
  47. dragStart: 'lgDragStart',
  48. dragMove: 'lgDragMove',
  49. dragEnd: 'lgDragEnd',
  50. beforeNextSlide: 'lgBeforeNextSlide',
  51. beforePrevSlide: 'lgBeforePrevSlide',
  52. beforeClose: 'lgBeforeClose',
  53. afterClose: 'lgAfterClose',
  54. rotateLeft: 'lgRotateLeft',
  55. rotateRight: 'lgRotateRight',
  56. flipHorizontal: 'lgFlipHorizontal',
  57. flipVertical: 'lgFlipVertical',
  58. autoplay: 'lgAutoplay',
  59. autoplayStart: 'lgAutoplayStart',
  60. autoplayStop: 'lgAutoplayStop',
  61. };
  62. var autoplaySettings = {
  63. autoplay: true,
  64. slideShowAutoplay: false,
  65. slideShowInterval: 5000,
  66. progressBar: true,
  67. forceSlideShowAutoplay: false,
  68. autoplayControls: true,
  69. appendAutoplayControlsTo: '.lg-toolbar',
  70. autoplayPluginStrings: { toggleAutoplay: 'Toggle Autoplay' },
  71. };
  72. /**
  73. * Creates the autoplay plugin.
  74. * @param {object} element - lightGallery element
  75. */
  76. var Autoplay = /** @class */ (function () {
  77. function Autoplay(instance) {
  78. this.core = instance;
  79. // extend module default settings with lightGallery core settings
  80. this.settings = __assign(__assign({}, autoplaySettings), this.core.settings);
  81. return this;
  82. }
  83. Autoplay.prototype.init = function () {
  84. var _this = this;
  85. if (!this.settings.autoplay) {
  86. return;
  87. }
  88. this.interval = false;
  89. // Identify if slide happened from autoplay
  90. this.fromAuto = true;
  91. // Identify if autoplay canceled from touch/drag
  92. this.pausedOnTouchDrag = false;
  93. this.pausedOnSlideChange = false;
  94. // append autoplay controls
  95. if (this.settings.autoplayControls) {
  96. this.controls();
  97. }
  98. // Create progress bar
  99. if (this.settings.progressBar) {
  100. this.core.outer.append('<div class="lg-progress-bar"><div class="lg-progress"></div></div>');
  101. }
  102. // Start autoplay
  103. if (this.settings.slideShowAutoplay) {
  104. this.core.LGel.once(lGEvents.slideItemLoad + ".autoplay", function () {
  105. _this.startAutoPlay();
  106. });
  107. }
  108. // cancel interval on touchstart and dragstart
  109. this.core.LGel.on(lGEvents.dragStart + ".autoplay touchstart.lg.autoplay", function () {
  110. if (_this.interval) {
  111. _this.stopAutoPlay();
  112. _this.pausedOnTouchDrag = true;
  113. }
  114. });
  115. // restore autoplay if autoplay canceled from touchstart / dragstart
  116. this.core.LGel.on(lGEvents.dragEnd + ".autoplay touchend.lg.autoplay", function () {
  117. if (!_this.interval && _this.pausedOnTouchDrag) {
  118. _this.startAutoPlay();
  119. _this.pausedOnTouchDrag = false;
  120. }
  121. });
  122. this.core.LGel.on(lGEvents.beforeSlide + ".autoplay", function () {
  123. _this.showProgressBar();
  124. if (!_this.fromAuto && _this.interval) {
  125. _this.stopAutoPlay();
  126. _this.pausedOnSlideChange = true;
  127. }
  128. else {
  129. _this.pausedOnSlideChange = false;
  130. }
  131. _this.fromAuto = false;
  132. });
  133. // restore autoplay if autoplay canceled from touchstart / dragstart
  134. this.core.LGel.on(lGEvents.afterSlide + ".autoplay", function () {
  135. if (_this.pausedOnSlideChange &&
  136. !_this.interval &&
  137. _this.settings.forceSlideShowAutoplay) {
  138. _this.startAutoPlay();
  139. _this.pausedOnSlideChange = false;
  140. }
  141. });
  142. // set progress
  143. this.showProgressBar();
  144. };
  145. Autoplay.prototype.showProgressBar = function () {
  146. var _this = this;
  147. if (this.settings.progressBar && this.fromAuto) {
  148. var _$progressBar_1 = this.core.outer.find('.lg-progress-bar');
  149. var _$progress_1 = this.core.outer.find('.lg-progress');
  150. if (this.interval) {
  151. _$progress_1.removeAttr('style');
  152. _$progressBar_1.removeClass('lg-start');
  153. setTimeout(function () {
  154. _$progress_1.css('transition', 'width ' +
  155. (_this.core.settings.speed +
  156. _this.settings.slideShowInterval) +
  157. 'ms ease 0s');
  158. _$progressBar_1.addClass('lg-start');
  159. }, 20);
  160. }
  161. }
  162. };
  163. // Manage autoplay via play/stop buttons
  164. Autoplay.prototype.controls = function () {
  165. var _this = this;
  166. var _html = "<button aria-label=\"" + this.settings.autoplayPluginStrings['toggleAutoplay'] + "\" type=\"button\" class=\"lg-autoplay-button lg-icon\"></button>";
  167. // Append autoplay controls
  168. this.core.outer
  169. .find(this.settings.appendAutoplayControlsTo)
  170. .append(_html);
  171. this.core.outer
  172. .find('.lg-autoplay-button')
  173. .first()
  174. .on('click.lg.autoplay', function () {
  175. if (_this.core.outer.hasClass('lg-show-autoplay')) {
  176. _this.stopAutoPlay();
  177. }
  178. else {
  179. if (!_this.interval) {
  180. _this.startAutoPlay();
  181. }
  182. }
  183. });
  184. };
  185. // Autostart gallery
  186. Autoplay.prototype.startAutoPlay = function () {
  187. var _this = this;
  188. this.core.outer
  189. .find('.lg-progress')
  190. .css('transition', 'width ' +
  191. (this.core.settings.speed +
  192. this.settings.slideShowInterval) +
  193. 'ms ease 0s');
  194. this.core.outer.addClass('lg-show-autoplay');
  195. this.core.outer.find('.lg-progress-bar').addClass('lg-start');
  196. this.core.LGel.trigger(lGEvents.autoplayStart, {
  197. index: this.core.index,
  198. });
  199. this.interval = setInterval(function () {
  200. if (_this.core.index + 1 < _this.core.galleryItems.length) {
  201. _this.core.index++;
  202. }
  203. else {
  204. _this.core.index = 0;
  205. }
  206. _this.core.LGel.trigger(lGEvents.autoplay, {
  207. index: _this.core.index,
  208. });
  209. _this.fromAuto = true;
  210. _this.core.slide(_this.core.index, false, false, 'next');
  211. }, this.core.settings.speed + this.settings.slideShowInterval);
  212. };
  213. // cancel Autostart
  214. Autoplay.prototype.stopAutoPlay = function () {
  215. if (this.interval) {
  216. this.core.LGel.trigger(lGEvents.autoplayStop, {
  217. index: this.core.index,
  218. });
  219. this.core.outer.find('.lg-progress').removeAttr('style');
  220. this.core.outer.removeClass('lg-show-autoplay');
  221. this.core.outer.find('.lg-progress-bar').removeClass('lg-start');
  222. }
  223. clearInterval(this.interval);
  224. this.interval = false;
  225. };
  226. Autoplay.prototype.closeGallery = function () {
  227. this.stopAutoPlay();
  228. };
  229. Autoplay.prototype.destroy = function () {
  230. if (this.settings.autoplay) {
  231. this.core.outer.find('.lg-progress-bar').remove();
  232. }
  233. // Remove all event listeners added by autoplay plugin
  234. this.core.LGel.off('.lg.autoplay');
  235. this.core.LGel.off('.autoplay');
  236. };
  237. return Autoplay;
  238. }());
  239. export default Autoplay;
  240. //# sourceMappingURL=lg-autoplay.es5.js.map