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.lgRotate = 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 rotateSettings = {
|
75 | rotate: true,
|
76 | rotateSpeed: 400,
|
77 | rotateLeft: true,
|
78 | rotateRight: true,
|
79 | flipHorizontal: true,
|
80 | flipVertical: true,
|
81 | rotatePluginStrings: {
|
82 | flipVertical: 'Flip vertical',
|
83 | flipHorizontal: 'Flip horizontal',
|
84 | rotateLeft: 'Rotate left',
|
85 | rotateRight: 'Rotate right',
|
86 | },
|
87 | };
|
88 |
|
89 | var Rotate = (function () {
|
90 | function Rotate(instance, $LG) {
|
91 |
|
92 | this.core = instance;
|
93 | this.$LG = $LG;
|
94 |
|
95 | this.settings = __assign(__assign({}, rotateSettings), this.core.settings);
|
96 | return this;
|
97 | }
|
98 | Rotate.prototype.buildTemplates = function () {
|
99 | var rotateIcons = '';
|
100 | if (this.settings.flipVertical) {
|
101 | rotateIcons += "<button type=\"button\" id=\"lg-flip-ver\" aria-label=\"" + this.settings.rotatePluginStrings['flipVertical'] + "\" class=\"lg-flip-ver lg-icon\"></button>";
|
102 | }
|
103 | if (this.settings.flipHorizontal) {
|
104 | rotateIcons += "<button type=\"button\" id=\"lg-flip-hor\" aria-label=\"" + this.settings.rotatePluginStrings['flipHorizontal'] + "\" class=\"lg-flip-hor lg-icon\"></button>";
|
105 | }
|
106 | if (this.settings.rotateLeft) {
|
107 | rotateIcons += "<button type=\"button\" id=\"lg-rotate-left\" aria-label=\"" + this.settings.rotatePluginStrings['rotateLeft'] + "\" class=\"lg-rotate-left lg-icon\"></button>";
|
108 | }
|
109 | if (this.settings.rotateRight) {
|
110 | rotateIcons += "<button type=\"button\" id=\"lg-rotate-right\" aria-label=\"" + this.settings.rotatePluginStrings['rotateRight'] + "\" class=\"lg-rotate-right lg-icon\"></button>";
|
111 | }
|
112 | this.core.$toolbar.append(rotateIcons);
|
113 | };
|
114 | Rotate.prototype.init = function () {
|
115 | var _this = this;
|
116 | if (!this.settings.rotate) {
|
117 | return;
|
118 | }
|
119 | this.buildTemplates();
|
120 |
|
121 |
|
122 | this.rotateValuesList = {};
|
123 |
|
124 | this.core.LGel.on(lGEvents.slideItemLoad + ".rotate", function (event) {
|
125 | var index = event.detail.index;
|
126 | var rotateEl = _this.core
|
127 | .getSlideItem(index)
|
128 | .find('.lg-img-rotate')
|
129 | .get();
|
130 | if (!rotateEl) {
|
131 | var imageWrap = _this.core
|
132 | .getSlideItem(index)
|
133 | .find('.lg-object')
|
134 | .first();
|
135 | imageWrap.wrap('lg-img-rotate');
|
136 |
|
137 | _this.core
|
138 | .getSlideItem(_this.core.index)
|
139 | .find('.lg-img-rotate')
|
140 | .css('transition-duration', _this.settings.rotateSpeed + 'ms');
|
141 | }
|
142 | });
|
143 | this.core.outer
|
144 | .find('#lg-rotate-left')
|
145 | .first()
|
146 | .on('click.lg', this.rotateLeft.bind(this));
|
147 | this.core.outer
|
148 | .find('#lg-rotate-right')
|
149 | .first()
|
150 | .on('click.lg', this.rotateRight.bind(this));
|
151 | this.core.outer
|
152 | .find('#lg-flip-hor')
|
153 | .first()
|
154 | .on('click.lg', this.flipHorizontal.bind(this));
|
155 | this.core.outer
|
156 | .find('#lg-flip-ver')
|
157 | .first()
|
158 | .on('click.lg', this.flipVertical.bind(this));
|
159 |
|
160 | this.core.LGel.on(lGEvents.beforeSlide + ".rotate", function (event) {
|
161 | if (!_this.rotateValuesList[event.detail.index]) {
|
162 | _this.rotateValuesList[event.detail.index] = {
|
163 | rotate: 0,
|
164 | flipHorizontal: 1,
|
165 | flipVertical: 1,
|
166 | };
|
167 | }
|
168 | });
|
169 | };
|
170 | Rotate.prototype.applyStyles = function () {
|
171 | var $image = this.core
|
172 | .getSlideItem(this.core.index)
|
173 | .find('.lg-img-rotate')
|
174 | .first();
|
175 | $image.css('transform', 'rotate(' +
|
176 | this.rotateValuesList[this.core.index].rotate +
|
177 | 'deg)' +
|
178 | ' scale3d(' +
|
179 | this.rotateValuesList[this.core.index].flipHorizontal +
|
180 | ', ' +
|
181 | this.rotateValuesList[this.core.index].flipVertical +
|
182 | ', 1)');
|
183 | };
|
184 | Rotate.prototype.rotateLeft = function () {
|
185 | this.rotateValuesList[this.core.index].rotate -= 90;
|
186 | this.applyStyles();
|
187 | this.triggerEvents(lGEvents.rotateLeft, {
|
188 | rotate: this.rotateValuesList[this.core.index].rotate,
|
189 | });
|
190 | };
|
191 | Rotate.prototype.rotateRight = function () {
|
192 | this.rotateValuesList[this.core.index].rotate += 90;
|
193 | this.applyStyles();
|
194 | this.triggerEvents(lGEvents.rotateRight, {
|
195 | rotate: this.rotateValuesList[this.core.index].rotate,
|
196 | });
|
197 | };
|
198 | Rotate.prototype.getCurrentRotation = function (el) {
|
199 | if (!el) {
|
200 | return 0;
|
201 | }
|
202 | var st = this.$LG(el).style();
|
203 | var tm = st.getPropertyValue('-webkit-transform') ||
|
204 | st.getPropertyValue('-moz-transform') ||
|
205 | st.getPropertyValue('-ms-transform') ||
|
206 | st.getPropertyValue('-o-transform') ||
|
207 | st.getPropertyValue('transform') ||
|
208 | 'none';
|
209 | if (tm !== 'none') {
|
210 | var values = tm.split('(')[1].split(')')[0].split(',');
|
211 | if (values) {
|
212 | var angle = Math.round(Math.atan2(values[1], values[0]) * (180 / Math.PI));
|
213 | return angle < 0 ? angle + 360 : angle;
|
214 | }
|
215 | }
|
216 | return 0;
|
217 | };
|
218 | Rotate.prototype.flipHorizontal = function () {
|
219 | var rotateEl = this.core
|
220 | .getSlideItem(this.core.index)
|
221 | .find('.lg-img-rotate')
|
222 | .first()
|
223 | .get();
|
224 | var currentRotation = this.getCurrentRotation(rotateEl);
|
225 | var rotateAxis = 'flipHorizontal';
|
226 | if (currentRotation === 90 || currentRotation === 270) {
|
227 | rotateAxis = 'flipVertical';
|
228 | }
|
229 | this.rotateValuesList[this.core.index][rotateAxis] *= -1;
|
230 | this.applyStyles();
|
231 | this.triggerEvents(lGEvents.flipHorizontal, {
|
232 | flipHorizontal: this.rotateValuesList[this.core.index][rotateAxis],
|
233 | });
|
234 | };
|
235 | Rotate.prototype.flipVertical = function () {
|
236 | var rotateEl = this.core
|
237 | .getSlideItem(this.core.index)
|
238 | .find('.lg-img-rotate')
|
239 | .first()
|
240 | .get();
|
241 | var currentRotation = this.getCurrentRotation(rotateEl);
|
242 | var rotateAxis = 'flipVertical';
|
243 | if (currentRotation === 90 || currentRotation === 270) {
|
244 | rotateAxis = 'flipHorizontal';
|
245 | }
|
246 | this.rotateValuesList[this.core.index][rotateAxis] *= -1;
|
247 | this.applyStyles();
|
248 | this.triggerEvents(lGEvents.flipVertical, {
|
249 | flipVertical: this.rotateValuesList[this.core.index][rotateAxis],
|
250 | });
|
251 | };
|
252 | Rotate.prototype.triggerEvents = function (event, detail) {
|
253 | var _this = this;
|
254 | setTimeout(function () {
|
255 | _this.core.LGel.trigger(event, detail);
|
256 | }, this.settings.rotateSpeed + 10);
|
257 | };
|
258 | Rotate.prototype.isImageOrientationChanged = function () {
|
259 | var rotateValue = this.rotateValuesList[this.core.index];
|
260 | var isRotated = Math.abs(rotateValue.rotate) % 360 !== 0;
|
261 | var ifFlippedHor = rotateValue.flipHorizontal < 0;
|
262 | var ifFlippedVer = rotateValue.flipVertical < 0;
|
263 | return isRotated || ifFlippedHor || ifFlippedVer;
|
264 | };
|
265 | Rotate.prototype.closeGallery = function () {
|
266 | if (this.isImageOrientationChanged()) {
|
267 | this.core.getSlideItem(this.core.index).css('opacity', 0);
|
268 | }
|
269 | this.rotateValuesList = {};
|
270 | };
|
271 | Rotate.prototype.destroy = function () {
|
272 |
|
273 | this.core.LGel.off('.lg.rotate');
|
274 | this.core.LGel.off('.rotate');
|
275 | };
|
276 | return Rotate;
|
277 | }());
|
278 |
|
279 | return Rotate;
|
280 |
|
281 | })));
|
282 |
|