1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | (function (global, factory) {
|
9 | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
10 | typeof define === 'function' && define.amd ? define(factory) :
|
11 | (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.lgAutoplay = factory());
|
12 | }(this, (function () { 'use strict';
|
13 |
|
14 | |
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 | var __assign = function() {
|
30 | __assign = Object.assign || function __assign(t) {
|
31 | for (var s, i = 1, n = arguments.length; i < n; i++) {
|
32 | s = arguments[i];
|
33 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
34 | }
|
35 | return t;
|
36 | };
|
37 | return __assign.apply(this, arguments);
|
38 | };
|
39 |
|
40 | |
41 |
|
42 |
|
43 |
|
44 |
|
45 | var lGEvents = {
|
46 | afterAppendSlide: 'lgAfterAppendSlide',
|
47 | init: 'lgInit',
|
48 | hasVideo: 'lgHasVideo',
|
49 | containerResize: 'lgContainerResize',
|
50 | updateSlides: 'lgUpdateSlides',
|
51 | afterAppendSubHtml: 'lgAfterAppendSubHtml',
|
52 | beforeOpen: 'lgBeforeOpen',
|
53 | afterOpen: 'lgAfterOpen',
|
54 | slideItemLoad: 'lgSlideItemLoad',
|
55 | beforeSlide: 'lgBeforeSlide',
|
56 | afterSlide: 'lgAfterSlide',
|
57 | posterClick: 'lgPosterClick',
|
58 | dragStart: 'lgDragStart',
|
59 | dragMove: 'lgDragMove',
|
60 | dragEnd: 'lgDragEnd',
|
61 | beforeNextSlide: 'lgBeforeNextSlide',
|
62 | beforePrevSlide: 'lgBeforePrevSlide',
|
63 | beforeClose: 'lgBeforeClose',
|
64 | afterClose: 'lgAfterClose',
|
65 | rotateLeft: 'lgRotateLeft',
|
66 | rotateRight: 'lgRotateRight',
|
67 | flipHorizontal: 'lgFlipHorizontal',
|
68 | flipVertical: 'lgFlipVertical',
|
69 | autoplay: 'lgAutoplay',
|
70 | autoplayStart: 'lgAutoplayStart',
|
71 | autoplayStop: 'lgAutoplayStop',
|
72 | };
|
73 |
|
74 | var autoplaySettings = {
|
75 | autoplay: true,
|
76 | slideShowAutoplay: false,
|
77 | slideShowInterval: 5000,
|
78 | progressBar: true,
|
79 | forceSlideShowAutoplay: false,
|
80 | autoplayControls: true,
|
81 | appendAutoplayControlsTo: '.lg-toolbar',
|
82 | autoplayPluginStrings: {
|
83 | toggleAutoplay: 'Toggle Autoplay',
|
84 | },
|
85 | };
|
86 |
|
87 | |
88 |
|
89 |
|
90 |
|
91 | var Autoplay = (function () {
|
92 | function Autoplay(instance) {
|
93 | this.core = instance;
|
94 |
|
95 | this.settings = __assign(__assign({}, autoplaySettings), this.core.settings);
|
96 | return this;
|
97 | }
|
98 | Autoplay.prototype.init = function () {
|
99 | var _this = this;
|
100 | if (!this.settings.autoplay) {
|
101 | return;
|
102 | }
|
103 | this.interval = false;
|
104 |
|
105 | this.fromAuto = true;
|
106 |
|
107 | this.pausedOnTouchDrag = false;
|
108 | this.pausedOnSlideChange = false;
|
109 |
|
110 | if (this.settings.autoplayControls) {
|
111 | this.controls();
|
112 | }
|
113 |
|
114 | if (this.settings.progressBar) {
|
115 | this.core.outer.append('<div class="lg-progress-bar"><div class="lg-progress"></div></div>');
|
116 | }
|
117 |
|
118 | if (this.settings.slideShowAutoplay) {
|
119 | this.core.LGel.once(lGEvents.slideItemLoad + ".autoplay", function () {
|
120 | _this.startAutoPlay();
|
121 | });
|
122 | }
|
123 |
|
124 | this.core.LGel.on(lGEvents.dragStart + ".autoplay touchstart.lg.autoplay", function () {
|
125 | if (_this.interval) {
|
126 | _this.stopAutoPlay();
|
127 | _this.pausedOnTouchDrag = true;
|
128 | }
|
129 | });
|
130 |
|
131 | this.core.LGel.on(lGEvents.dragEnd + ".autoplay touchend.lg.autoplay", function () {
|
132 | if (!_this.interval && _this.pausedOnTouchDrag) {
|
133 | _this.startAutoPlay();
|
134 | _this.pausedOnTouchDrag = false;
|
135 | }
|
136 | });
|
137 | this.core.LGel.on(lGEvents.beforeSlide + ".autoplay", function () {
|
138 | _this.showProgressBar();
|
139 | if (!_this.fromAuto && _this.interval) {
|
140 | _this.stopAutoPlay();
|
141 | _this.pausedOnSlideChange = true;
|
142 | }
|
143 | else {
|
144 | _this.pausedOnSlideChange = false;
|
145 | }
|
146 | _this.fromAuto = false;
|
147 | });
|
148 |
|
149 | this.core.LGel.on(lGEvents.afterSlide + ".autoplay", function () {
|
150 | if (_this.pausedOnSlideChange &&
|
151 | !_this.interval &&
|
152 | _this.settings.forceSlideShowAutoplay) {
|
153 | _this.startAutoPlay();
|
154 | _this.pausedOnSlideChange = false;
|
155 | }
|
156 | });
|
157 |
|
158 | this.showProgressBar();
|
159 | };
|
160 | Autoplay.prototype.showProgressBar = function () {
|
161 | var _this = this;
|
162 | if (this.settings.progressBar && this.fromAuto) {
|
163 | var _$progressBar_1 = this.core.outer.find('.lg-progress-bar');
|
164 | var _$progress_1 = this.core.outer.find('.lg-progress');
|
165 | if (this.interval) {
|
166 | _$progress_1.removeAttr('style');
|
167 | _$progressBar_1.removeClass('lg-start');
|
168 | setTimeout(function () {
|
169 | _$progress_1.css('transition', 'width ' +
|
170 | (_this.core.settings.speed +
|
171 | _this.settings.slideShowInterval) +
|
172 | 'ms ease 0s');
|
173 | _$progressBar_1.addClass('lg-start');
|
174 | }, 20);
|
175 | }
|
176 | }
|
177 | };
|
178 |
|
179 | Autoplay.prototype.controls = function () {
|
180 | var _this = this;
|
181 | var _html = "<button aria-label=\"" + this.settings.autoplayPluginStrings['toggleAutoplay'] + "\" type=\"button\" class=\"lg-autoplay-button lg-icon\"></button>";
|
182 |
|
183 | this.core.outer
|
184 | .find(this.settings.appendAutoplayControlsTo)
|
185 | .append(_html);
|
186 | this.core.outer
|
187 | .find('.lg-autoplay-button')
|
188 | .first()
|
189 | .on('click.lg.autoplay', function () {
|
190 | if (_this.core.outer.hasClass('lg-show-autoplay')) {
|
191 | _this.stopAutoPlay();
|
192 | }
|
193 | else {
|
194 | if (!_this.interval) {
|
195 | _this.startAutoPlay();
|
196 | }
|
197 | }
|
198 | });
|
199 | };
|
200 |
|
201 | Autoplay.prototype.startAutoPlay = function () {
|
202 | var _this = this;
|
203 | this.core.outer
|
204 | .find('.lg-progress')
|
205 | .css('transition', 'width ' +
|
206 | (this.core.settings.speed +
|
207 | this.settings.slideShowInterval) +
|
208 | 'ms ease 0s');
|
209 | this.core.outer.addClass('lg-show-autoplay');
|
210 | this.core.outer.find('.lg-progress-bar').addClass('lg-start');
|
211 | this.core.LGel.trigger(lGEvents.autoplayStart, {
|
212 | index: this.core.index,
|
213 | });
|
214 | this.interval = setInterval(function () {
|
215 | if (_this.core.index + 1 < _this.core.galleryItems.length) {
|
216 | _this.core.index++;
|
217 | }
|
218 | else {
|
219 | _this.core.index = 0;
|
220 | }
|
221 | _this.core.LGel.trigger(lGEvents.autoplay, {
|
222 | index: _this.core.index,
|
223 | });
|
224 | _this.fromAuto = true;
|
225 | _this.core.slide(_this.core.index, false, false, 'next');
|
226 | }, this.core.settings.speed + this.settings.slideShowInterval);
|
227 | };
|
228 |
|
229 | Autoplay.prototype.stopAutoPlay = function () {
|
230 | if (this.interval) {
|
231 | this.core.LGel.trigger(lGEvents.autoplayStop, {
|
232 | index: this.core.index,
|
233 | });
|
234 | this.core.outer.find('.lg-progress').removeAttr('style');
|
235 | this.core.outer.removeClass('lg-show-autoplay');
|
236 | this.core.outer.find('.lg-progress-bar').removeClass('lg-start');
|
237 | }
|
238 | clearInterval(this.interval);
|
239 | this.interval = false;
|
240 | };
|
241 | Autoplay.prototype.closeGallery = function () {
|
242 | this.stopAutoPlay();
|
243 | };
|
244 | Autoplay.prototype.destroy = function () {
|
245 | if (this.settings.autoplay) {
|
246 | this.core.outer.find('.lg-progress-bar').remove();
|
247 | }
|
248 |
|
249 | this.core.LGel.off('.lg.autoplay');
|
250 | this.core.LGel.off('.autoplay');
|
251 | };
|
252 | return Autoplay;
|
253 | }());
|
254 |
|
255 | return Autoplay;
|
256 |
|
257 | })));
|
258 |
|