1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 | var __assign = function() {
|
24 | __assign = Object.assign || function __assign(t) {
|
25 | for (var s, i = 1, n = arguments.length; i < n; i++) {
|
26 | s = arguments[i];
|
27 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
28 | }
|
29 | return t;
|
30 | };
|
31 | return __assign.apply(this, arguments);
|
32 | };
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 | var lGEvents = {
|
40 | afterAppendSlide: 'lgAfterAppendSlide',
|
41 | init: 'lgInit',
|
42 | hasVideo: 'lgHasVideo',
|
43 | containerResize: 'lgContainerResize',
|
44 | updateSlides: 'lgUpdateSlides',
|
45 | afterAppendSubHtml: 'lgAfterAppendSubHtml',
|
46 | beforeOpen: 'lgBeforeOpen',
|
47 | afterOpen: 'lgAfterOpen',
|
48 | slideItemLoad: 'lgSlideItemLoad',
|
49 | beforeSlide: 'lgBeforeSlide',
|
50 | afterSlide: 'lgAfterSlide',
|
51 | posterClick: 'lgPosterClick',
|
52 | dragStart: 'lgDragStart',
|
53 | dragMove: 'lgDragMove',
|
54 | dragEnd: 'lgDragEnd',
|
55 | beforeNextSlide: 'lgBeforeNextSlide',
|
56 | beforePrevSlide: 'lgBeforePrevSlide',
|
57 | beforeClose: 'lgBeforeClose',
|
58 | afterClose: 'lgAfterClose',
|
59 | rotateLeft: 'lgRotateLeft',
|
60 | rotateRight: 'lgRotateRight',
|
61 | flipHorizontal: 'lgFlipHorizontal',
|
62 | flipVertical: 'lgFlipVertical',
|
63 | autoplay: 'lgAutoplay',
|
64 | autoplayStart: 'lgAutoplayStart',
|
65 | autoplayStop: 'lgAutoplayStop',
|
66 | };
|
67 |
|
68 | var rotateSettings = {
|
69 | rotate: true,
|
70 | rotateSpeed: 400,
|
71 | rotateLeft: true,
|
72 | rotateRight: true,
|
73 | flipHorizontal: true,
|
74 | flipVertical: true,
|
75 | rotatePluginStrings: {
|
76 | flipVertical: 'Flip vertical',
|
77 | flipHorizontal: 'Flip horizontal',
|
78 | rotateLeft: 'Rotate left',
|
79 | rotateRight: 'Rotate right',
|
80 | },
|
81 | };
|
82 |
|
83 | var Rotate = (function () {
|
84 | function Rotate(instance, $LG) {
|
85 |
|
86 | this.core = instance;
|
87 | this.$LG = $LG;
|
88 |
|
89 | this.settings = __assign(__assign({}, rotateSettings), this.core.settings);
|
90 | return this;
|
91 | }
|
92 | Rotate.prototype.buildTemplates = function () {
|
93 | var rotateIcons = '';
|
94 | if (this.settings.flipVertical) {
|
95 | rotateIcons += "<button type=\"button\" id=\"lg-flip-ver\" aria-label=\"" + this.settings.rotatePluginStrings['flipVertical'] + "\" class=\"lg-flip-ver lg-icon\"></button>";
|
96 | }
|
97 | if (this.settings.flipHorizontal) {
|
98 | rotateIcons += "<button type=\"button\" id=\"lg-flip-hor\" aria-label=\"" + this.settings.rotatePluginStrings['flipHorizontal'] + "\" class=\"lg-flip-hor lg-icon\"></button>";
|
99 | }
|
100 | if (this.settings.rotateLeft) {
|
101 | rotateIcons += "<button type=\"button\" id=\"lg-rotate-left\" aria-label=\"" + this.settings.rotatePluginStrings['rotateLeft'] + "\" class=\"lg-rotate-left lg-icon\"></button>";
|
102 | }
|
103 | if (this.settings.rotateRight) {
|
104 | rotateIcons += "<button type=\"button\" id=\"lg-rotate-right\" aria-label=\"" + this.settings.rotatePluginStrings['rotateRight'] + "\" class=\"lg-rotate-right lg-icon\"></button>";
|
105 | }
|
106 | this.core.$toolbar.append(rotateIcons);
|
107 | };
|
108 | Rotate.prototype.init = function () {
|
109 | var _this = this;
|
110 | if (!this.settings.rotate) {
|
111 | return;
|
112 | }
|
113 | this.buildTemplates();
|
114 |
|
115 |
|
116 | this.rotateValuesList = {};
|
117 |
|
118 | this.core.LGel.on(lGEvents.slideItemLoad + ".rotate", function (event) {
|
119 | var index = event.detail.index;
|
120 | var rotateEl = _this.core
|
121 | .getSlideItem(index)
|
122 | .find('.lg-img-rotate')
|
123 | .get();
|
124 | if (!rotateEl) {
|
125 | var imageWrap = _this.core
|
126 | .getSlideItem(index)
|
127 | .find('.lg-object')
|
128 | .first();
|
129 | imageWrap.wrap('lg-img-rotate');
|
130 |
|
131 | _this.core
|
132 | .getSlideItem(_this.core.index)
|
133 | .find('.lg-img-rotate')
|
134 | .css('transition-duration', _this.settings.rotateSpeed + 'ms');
|
135 | }
|
136 | });
|
137 | this.core.outer
|
138 | .find('#lg-rotate-left')
|
139 | .first()
|
140 | .on('click.lg', this.rotateLeft.bind(this));
|
141 | this.core.outer
|
142 | .find('#lg-rotate-right')
|
143 | .first()
|
144 | .on('click.lg', this.rotateRight.bind(this));
|
145 | this.core.outer
|
146 | .find('#lg-flip-hor')
|
147 | .first()
|
148 | .on('click.lg', this.flipHorizontal.bind(this));
|
149 | this.core.outer
|
150 | .find('#lg-flip-ver')
|
151 | .first()
|
152 | .on('click.lg', this.flipVertical.bind(this));
|
153 |
|
154 | this.core.LGel.on(lGEvents.beforeSlide + ".rotate", function (event) {
|
155 | if (!_this.rotateValuesList[event.detail.index]) {
|
156 | _this.rotateValuesList[event.detail.index] = {
|
157 | rotate: 0,
|
158 | flipHorizontal: 1,
|
159 | flipVertical: 1,
|
160 | };
|
161 | }
|
162 | });
|
163 | };
|
164 | Rotate.prototype.applyStyles = function () {
|
165 | var $image = this.core
|
166 | .getSlideItem(this.core.index)
|
167 | .find('.lg-img-rotate')
|
168 | .first();
|
169 | $image.css('transform', 'rotate(' +
|
170 | this.rotateValuesList[this.core.index].rotate +
|
171 | 'deg)' +
|
172 | ' scale3d(' +
|
173 | this.rotateValuesList[this.core.index].flipHorizontal +
|
174 | ', ' +
|
175 | this.rotateValuesList[this.core.index].flipVertical +
|
176 | ', 1)');
|
177 | };
|
178 | Rotate.prototype.rotateLeft = function () {
|
179 | this.rotateValuesList[this.core.index].rotate -= 90;
|
180 | this.applyStyles();
|
181 | this.triggerEvents(lGEvents.rotateLeft, {
|
182 | rotate: this.rotateValuesList[this.core.index].rotate,
|
183 | });
|
184 | };
|
185 | Rotate.prototype.rotateRight = function () {
|
186 | this.rotateValuesList[this.core.index].rotate += 90;
|
187 | this.applyStyles();
|
188 | this.triggerEvents(lGEvents.rotateRight, {
|
189 | rotate: this.rotateValuesList[this.core.index].rotate,
|
190 | });
|
191 | };
|
192 | Rotate.prototype.getCurrentRotation = function (el) {
|
193 | if (!el) {
|
194 | return 0;
|
195 | }
|
196 | var st = this.$LG(el).style();
|
197 | var tm = st.getPropertyValue('-webkit-transform') ||
|
198 | st.getPropertyValue('-moz-transform') ||
|
199 | st.getPropertyValue('-ms-transform') ||
|
200 | st.getPropertyValue('-o-transform') ||
|
201 | st.getPropertyValue('transform') ||
|
202 | 'none';
|
203 | if (tm !== 'none') {
|
204 | var values = tm.split('(')[1].split(')')[0].split(',');
|
205 | if (values) {
|
206 | var angle = Math.round(Math.atan2(values[1], values[0]) * (180 / Math.PI));
|
207 | return angle < 0 ? angle + 360 : angle;
|
208 | }
|
209 | }
|
210 | return 0;
|
211 | };
|
212 | Rotate.prototype.flipHorizontal = function () {
|
213 | var rotateEl = this.core
|
214 | .getSlideItem(this.core.index)
|
215 | .find('.lg-img-rotate')
|
216 | .first()
|
217 | .get();
|
218 | var currentRotation = this.getCurrentRotation(rotateEl);
|
219 | var rotateAxis = 'flipHorizontal';
|
220 | if (currentRotation === 90 || currentRotation === 270) {
|
221 | rotateAxis = 'flipVertical';
|
222 | }
|
223 | this.rotateValuesList[this.core.index][rotateAxis] *= -1;
|
224 | this.applyStyles();
|
225 | this.triggerEvents(lGEvents.flipHorizontal, {
|
226 | flipHorizontal: this.rotateValuesList[this.core.index][rotateAxis],
|
227 | });
|
228 | };
|
229 | Rotate.prototype.flipVertical = function () {
|
230 | var rotateEl = this.core
|
231 | .getSlideItem(this.core.index)
|
232 | .find('.lg-img-rotate')
|
233 | .first()
|
234 | .get();
|
235 | var currentRotation = this.getCurrentRotation(rotateEl);
|
236 | var rotateAxis = 'flipVertical';
|
237 | if (currentRotation === 90 || currentRotation === 270) {
|
238 | rotateAxis = 'flipHorizontal';
|
239 | }
|
240 | this.rotateValuesList[this.core.index][rotateAxis] *= -1;
|
241 | this.applyStyles();
|
242 | this.triggerEvents(lGEvents.flipVertical, {
|
243 | flipVertical: this.rotateValuesList[this.core.index][rotateAxis],
|
244 | });
|
245 | };
|
246 | Rotate.prototype.triggerEvents = function (event, detail) {
|
247 | var _this = this;
|
248 | setTimeout(function () {
|
249 | _this.core.LGel.trigger(event, detail);
|
250 | }, this.settings.rotateSpeed + 10);
|
251 | };
|
252 | Rotate.prototype.isImageOrientationChanged = function () {
|
253 | var rotateValue = this.rotateValuesList[this.core.index];
|
254 | var isRotated = Math.abs(rotateValue.rotate) % 360 !== 0;
|
255 | var ifFlippedHor = rotateValue.flipHorizontal < 0;
|
256 | var ifFlippedVer = rotateValue.flipVertical < 0;
|
257 | return isRotated || ifFlippedHor || ifFlippedVer;
|
258 | };
|
259 | Rotate.prototype.closeGallery = function () {
|
260 | if (this.isImageOrientationChanged()) {
|
261 | this.core.getSlideItem(this.core.index).css('opacity', 0);
|
262 | }
|
263 | this.rotateValuesList = {};
|
264 | };
|
265 | Rotate.prototype.destroy = function () {
|
266 |
|
267 | this.core.LGel.off('.lg.rotate');
|
268 | this.core.LGel.off('.rotate');
|
269 | };
|
270 | return Rotate;
|
271 | }());
|
272 |
|
273 | export default Rotate;
|
274 |
|