1 | 1 |
deleted file mode 100644 |
... | ... |
@@ -1,598 +0,0 @@ |
1 |
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } |
|
2 |
- |
|
3 |
-import { getWindow } from 'ssr-window'; |
|
4 |
-import $ from '../../utils/dom'; |
|
5 |
-import { bindModuleMethods, getTranslate } from '../../utils/utils'; |
|
6 |
-var Zoom = { |
|
7 |
- // Calc Scale From Multi-touches |
|
8 |
- getDistanceBetweenTouches: function getDistanceBetweenTouches(e) { |
|
9 |
- if (e.targetTouches.length < 2) return 1; |
|
10 |
- var x1 = e.targetTouches[0].pageX; |
|
11 |
- var y1 = e.targetTouches[0].pageY; |
|
12 |
- var x2 = e.targetTouches[1].pageX; |
|
13 |
- var y2 = e.targetTouches[1].pageY; |
|
14 |
- var distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); |
|
15 |
- return distance; |
|
16 |
- }, |
|
17 |
- // Events |
|
18 |
- onGestureStart: function onGestureStart(e) { |
|
19 |
- var swiper = this; |
|
20 |
- var support = swiper.support; |
|
21 |
- var params = swiper.params.zoom; |
|
22 |
- var zoom = swiper.zoom; |
|
23 |
- var gesture = zoom.gesture; |
|
24 |
- zoom.fakeGestureTouched = false; |
|
25 |
- zoom.fakeGestureMoved = false; |
|
26 |
- |
|
27 |
- if (!support.gestures) { |
|
28 |
- if (e.type !== 'touchstart' || e.type === 'touchstart' && e.targetTouches.length < 2) { |
|
29 |
- return; |
|
30 |
- } |
|
31 |
- |
|
32 |
- zoom.fakeGestureTouched = true; |
|
33 |
- gesture.scaleStart = Zoom.getDistanceBetweenTouches(e); |
|
34 |
- } |
|
35 |
- |
|
36 |
- if (!gesture.$slideEl || !gesture.$slideEl.length) { |
|
37 |
- gesture.$slideEl = $(e.target).closest("." + swiper.params.slideClass); |
|
38 |
- if (gesture.$slideEl.length === 0) gesture.$slideEl = swiper.slides.eq(swiper.activeIndex); |
|
39 |
- gesture.$imageEl = gesture.$slideEl.find('img, svg, canvas, picture, .swiper-zoom-target'); |
|
40 |
- gesture.$imageWrapEl = gesture.$imageEl.parent("." + params.containerClass); |
|
41 |
- gesture.maxRatio = gesture.$imageWrapEl.attr('data-swiper-zoom') || params.maxRatio; |
|
42 |
- |
|
43 |
- if (gesture.$imageWrapEl.length === 0) { |
|
44 |
- gesture.$imageEl = undefined; |
|
45 |
- return; |
|
46 |
- } |
|
47 |
- } |
|
48 |
- |
|
49 |
- if (gesture.$imageEl) { |
|
50 |
- gesture.$imageEl.transition(0); |
|
51 |
- } |
|
52 |
- |
|
53 |
- swiper.zoom.isScaling = true; |
|
54 |
- }, |
|
55 |
- onGestureChange: function onGestureChange(e) { |
|
56 |
- var swiper = this; |
|
57 |
- var support = swiper.support; |
|
58 |
- var params = swiper.params.zoom; |
|
59 |
- var zoom = swiper.zoom; |
|
60 |
- var gesture = zoom.gesture; |
|
61 |
- |
|
62 |
- if (!support.gestures) { |
|
63 |
- if (e.type !== 'touchmove' || e.type === 'touchmove' && e.targetTouches.length < 2) { |
|
64 |
- return; |
|
65 |
- } |
|
66 |
- |
|
67 |
- zoom.fakeGestureMoved = true; |
|
68 |
- gesture.scaleMove = Zoom.getDistanceBetweenTouches(e); |
|
69 |
- } |
|
70 |
- |
|
71 |
- if (!gesture.$imageEl || gesture.$imageEl.length === 0) { |
|
72 |
- if (e.type === 'gesturechange') zoom.onGestureStart(e); |
|
73 |
- return; |
|
74 |
- } |
|
75 |
- |
|
76 |
- if (support.gestures) { |
|
77 |
- zoom.scale = e.scale * zoom.currentScale; |
|
78 |
- } else { |
|
79 |
- zoom.scale = gesture.scaleMove / gesture.scaleStart * zoom.currentScale; |
|
80 |
- } |
|
81 |
- |
|
82 |
- if (zoom.scale > gesture.maxRatio) { |
|
83 |
- zoom.scale = gesture.maxRatio - 1 + Math.pow(zoom.scale - gesture.maxRatio + 1, 0.5); |
|
84 |
- } |
|
85 |
- |
|
86 |
- if (zoom.scale < params.minRatio) { |
|
87 |
- zoom.scale = params.minRatio + 1 - Math.pow(params.minRatio - zoom.scale + 1, 0.5); |
|
88 |
- } |
|
89 |
- |
|
90 |
- gesture.$imageEl.transform("translate3d(0,0,0) scale(" + zoom.scale + ")"); |
|
91 |
- }, |
|
92 |
- onGestureEnd: function onGestureEnd(e) { |
|
93 |
- var swiper = this; |
|
94 |
- var device = swiper.device; |
|
95 |
- var support = swiper.support; |
|
96 |
- var params = swiper.params.zoom; |
|
97 |
- var zoom = swiper.zoom; |
|
98 |
- var gesture = zoom.gesture; |
|
99 |
- |
|
100 |
- if (!support.gestures) { |
|
101 |
- if (!zoom.fakeGestureTouched || !zoom.fakeGestureMoved) { |
|
102 |
- return; |
|
103 |
- } |
|
104 |
- |
|
105 |
- if (e.type !== 'touchend' || e.type === 'touchend' && e.changedTouches.length < 2 && !device.android) { |
|
106 |
- return; |
|
107 |
- } |
|
108 |
- |
|
109 |
- zoom.fakeGestureTouched = false; |
|
110 |
- zoom.fakeGestureMoved = false; |
|
111 |
- } |
|
112 |
- |
|
113 |
- if (!gesture.$imageEl || gesture.$imageEl.length === 0) return; |
|
114 |
- zoom.scale = Math.max(Math.min(zoom.scale, gesture.maxRatio), params.minRatio); |
|
115 |
- gesture.$imageEl.transition(swiper.params.speed).transform("translate3d(0,0,0) scale(" + zoom.scale + ")"); |
|
116 |
- zoom.currentScale = zoom.scale; |
|
117 |
- zoom.isScaling = false; |
|
118 |
- if (zoom.scale === 1) gesture.$slideEl = undefined; |
|
119 |
- }, |
|
120 |
- onTouchStart: function onTouchStart(e) { |
|
121 |
- var swiper = this; |
|
122 |
- var device = swiper.device; |
|
123 |
- var zoom = swiper.zoom; |
|
124 |
- var gesture = zoom.gesture, |
|
125 |
- image = zoom.image; |
|
126 |
- if (!gesture.$imageEl || gesture.$imageEl.length === 0) return; |
|
127 |
- if (image.isTouched) return; |
|
128 |
- if (device.android && e.cancelable) e.preventDefault(); |
|
129 |
- image.isTouched = true; |
|
130 |
- image.touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX; |
|
131 |
- image.touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY; |
|
132 |
- }, |
|
133 |
- onTouchMove: function onTouchMove(e) { |
|
134 |
- var swiper = this; |
|
135 |
- var zoom = swiper.zoom; |
|
136 |
- var gesture = zoom.gesture, |
|
137 |
- image = zoom.image, |
|
138 |
- velocity = zoom.velocity; |
|
139 |
- if (!gesture.$imageEl || gesture.$imageEl.length === 0) return; |
|
140 |
- swiper.allowClick = false; |
|
141 |
- if (!image.isTouched || !gesture.$slideEl) return; |
|
142 |
- |
|
143 |
- if (!image.isMoved) { |
|
144 |
- image.width = gesture.$imageEl[0].offsetWidth; |
|
145 |
- image.height = gesture.$imageEl[0].offsetHeight; |
|
146 |
- image.startX = getTranslate(gesture.$imageWrapEl[0], 'x') || 0; |
|
147 |
- image.startY = getTranslate(gesture.$imageWrapEl[0], 'y') || 0; |
|
148 |
- gesture.slideWidth = gesture.$slideEl[0].offsetWidth; |
|
149 |
- gesture.slideHeight = gesture.$slideEl[0].offsetHeight; |
|
150 |
- gesture.$imageWrapEl.transition(0); |
|
151 |
- |
|
152 |
- if (swiper.rtl) { |
|
153 |
- image.startX = -image.startX; |
|
154 |
- image.startY = -image.startY; |
|
155 |
- } |
|
156 |
- } // Define if we need image drag |
|
157 |
- |
|
158 |
- |
|
159 |
- var scaledWidth = image.width * zoom.scale; |
|
160 |
- var scaledHeight = image.height * zoom.scale; |
|
161 |
- if (scaledWidth < gesture.slideWidth && scaledHeight < gesture.slideHeight) return; |
|
162 |
- image.minX = Math.min(gesture.slideWidth / 2 - scaledWidth / 2, 0); |
|
163 |
- image.maxX = -image.minX; |
|
164 |
- image.minY = Math.min(gesture.slideHeight / 2 - scaledHeight / 2, 0); |
|
165 |
- image.maxY = -image.minY; |
|
166 |
- image.touchesCurrent.x = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX; |
|
167 |
- image.touchesCurrent.y = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY; |
|
168 |
- |
|
169 |
- if (!image.isMoved && !zoom.isScaling) { |
|
170 |
- if (swiper.isHorizontal() && (Math.floor(image.minX) === Math.floor(image.startX) && image.touchesCurrent.x < image.touchesStart.x || Math.floor(image.maxX) === Math.floor(image.startX) && image.touchesCurrent.x > image.touchesStart.x)) { |
|
171 |
- image.isTouched = false; |
|
172 |
- return; |
|
173 |
- } |
|
174 |
- |
|
175 |
- if (!swiper.isHorizontal() && (Math.floor(image.minY) === Math.floor(image.startY) && image.touchesCurrent.y < image.touchesStart.y || Math.floor(image.maxY) === Math.floor(image.startY) && image.touchesCurrent.y > image.touchesStart.y)) { |
|
176 |
- image.isTouched = false; |
|
177 |
- return; |
|
178 |
- } |
|
179 |
- } |
|
180 |
- |
|
181 |
- if (e.cancelable) { |
|
182 |
- e.preventDefault(); |
|
183 |
- } |
|
184 |
- |
|
185 |
- e.stopPropagation(); |
|
186 |
- image.isMoved = true; |
|
187 |
- image.currentX = image.touchesCurrent.x - image.touchesStart.x + image.startX; |
|
188 |
- image.currentY = image.touchesCurrent.y - image.touchesStart.y + image.startY; |
|
189 |
- |
|
190 |
- if (image.currentX < image.minX) { |
|
191 |
- image.currentX = image.minX + 1 - Math.pow(image.minX - image.currentX + 1, 0.8); |
|
192 |
- } |
|
193 |
- |
|
194 |
- if (image.currentX > image.maxX) { |
|
195 |
- image.currentX = image.maxX - 1 + Math.pow(image.currentX - image.maxX + 1, 0.8); |
|
196 |
- } |
|
197 |
- |
|
198 |
- if (image.currentY < image.minY) { |
|
199 |
- image.currentY = image.minY + 1 - Math.pow(image.minY - image.currentY + 1, 0.8); |
|
200 |
- } |
|
201 |
- |
|
202 |
- if (image.currentY > image.maxY) { |
|
203 |
- image.currentY = image.maxY - 1 + Math.pow(image.currentY - image.maxY + 1, 0.8); |
|
204 |
- } // Velocity |
|
205 |
- |
|
206 |
- |
|
207 |
- if (!velocity.prevPositionX) velocity.prevPositionX = image.touchesCurrent.x; |
|
208 |
- if (!velocity.prevPositionY) velocity.prevPositionY = image.touchesCurrent.y; |
|
209 |
- if (!velocity.prevTime) velocity.prevTime = Date.now(); |
|
210 |
- velocity.x = (image.touchesCurrent.x - velocity.prevPositionX) / (Date.now() - velocity.prevTime) / 2; |
|
211 |
- velocity.y = (image.touchesCurrent.y - velocity.prevPositionY) / (Date.now() - velocity.prevTime) / 2; |
|
212 |
- if (Math.abs(image.touchesCurrent.x - velocity.prevPositionX) < 2) velocity.x = 0; |
|
213 |
- if (Math.abs(image.touchesCurrent.y - velocity.prevPositionY) < 2) velocity.y = 0; |
|
214 |
- velocity.prevPositionX = image.touchesCurrent.x; |
|
215 |
- velocity.prevPositionY = image.touchesCurrent.y; |
|
216 |
- velocity.prevTime = Date.now(); |
|
217 |
- gesture.$imageWrapEl.transform("translate3d(" + image.currentX + "px, " + image.currentY + "px,0)"); |
|
218 |
- }, |
|
219 |
- onTouchEnd: function onTouchEnd() { |
|
220 |
- var swiper = this; |
|
221 |
- var zoom = swiper.zoom; |
|
222 |
- var gesture = zoom.gesture, |
|
223 |
- image = zoom.image, |
|
224 |
- velocity = zoom.velocity; |
|
225 |
- if (!gesture.$imageEl || gesture.$imageEl.length === 0) return; |
|
226 |
- |
|
227 |
- if (!image.isTouched || !image.isMoved) { |
|
228 |
- image.isTouched = false; |
|
229 |
- image.isMoved = false; |
|
230 |
- return; |
|
231 |
- } |
|
232 |
- |
|
233 |
- image.isTouched = false; |
|
234 |
- image.isMoved = false; |
|
235 |
- var momentumDurationX = 300; |
|
236 |
- var momentumDurationY = 300; |
|
237 |
- var momentumDistanceX = velocity.x * momentumDurationX; |
|
238 |
- var newPositionX = image.currentX + momentumDistanceX; |
|
239 |
- var momentumDistanceY = velocity.y * momentumDurationY; |
|
240 |
- var newPositionY = image.currentY + momentumDistanceY; // Fix duration |
|
241 |
- |
|
242 |
- if (velocity.x !== 0) momentumDurationX = Math.abs((newPositionX - image.currentX) / velocity.x); |
|
243 |
- if (velocity.y !== 0) momentumDurationY = Math.abs((newPositionY - image.currentY) / velocity.y); |
|
244 |
- var momentumDuration = Math.max(momentumDurationX, momentumDurationY); |
|
245 |
- image.currentX = newPositionX; |
|
246 |
- image.currentY = newPositionY; // Define if we need image drag |
|
247 |
- |
|
248 |
- var scaledWidth = image.width * zoom.scale; |
|
249 |
- var scaledHeight = image.height * zoom.scale; |
|
250 |
- image.minX = Math.min(gesture.slideWidth / 2 - scaledWidth / 2, 0); |
|
251 |
- image.maxX = -image.minX; |
|
252 |
- image.minY = Math.min(gesture.slideHeight / 2 - scaledHeight / 2, 0); |
|
253 |
- image.maxY = -image.minY; |
|
254 |
- image.currentX = Math.max(Math.min(image.currentX, image.maxX), image.minX); |
|
255 |
- image.currentY = Math.max(Math.min(image.currentY, image.maxY), image.minY); |
|
256 |
- gesture.$imageWrapEl.transition(momentumDuration).transform("translate3d(" + image.currentX + "px, " + image.currentY + "px,0)"); |
|
257 |
- }, |
|
258 |
- onTransitionEnd: function onTransitionEnd() { |
|
259 |
- var swiper = this; |
|
260 |
- var zoom = swiper.zoom; |
|
261 |
- var gesture = zoom.gesture; |
|
262 |
- |
|
263 |
- if (gesture.$slideEl && swiper.previousIndex !== swiper.activeIndex) { |
|
264 |
- if (gesture.$imageEl) { |
|
265 |
- gesture.$imageEl.transform('translate3d(0,0,0) scale(1)'); |
|
266 |
- } |
|
267 |
- |
|
268 |
- if (gesture.$imageWrapEl) { |
|
269 |
- gesture.$imageWrapEl.transform('translate3d(0,0,0)'); |
|
270 |
- } |
|
271 |
- |
|
272 |
- zoom.scale = 1; |
|
273 |
- zoom.currentScale = 1; |
|
274 |
- gesture.$slideEl = undefined; |
|
275 |
- gesture.$imageEl = undefined; |
|
276 |
- gesture.$imageWrapEl = undefined; |
|
277 |
- } |
|
278 |
- }, |
|
279 |
- // Toggle Zoom |
|
280 |
- toggle: function toggle(e) { |
|
281 |
- var swiper = this; |
|
282 |
- var zoom = swiper.zoom; |
|
283 |
- |
|
284 |
- if (zoom.scale && zoom.scale !== 1) { |
|
285 |
- // Zoom Out |
|
286 |
- zoom.out(); |
|
287 |
- } else { |
|
288 |
- // Zoom In |
|
289 |
- zoom.in(e); |
|
290 |
- } |
|
291 |
- }, |
|
292 |
- in: function _in(e) { |
|
293 |
- var swiper = this; |
|
294 |
- var window = getWindow(); |
|
295 |
- var zoom = swiper.zoom; |
|
296 |
- var params = swiper.params.zoom; |
|
297 |
- var gesture = zoom.gesture, |
|
298 |
- image = zoom.image; |
|
299 |
- |
|
300 |
- if (!gesture.$slideEl) { |
|
301 |
- if (swiper.params.virtual && swiper.params.virtual.enabled && swiper.virtual) { |
|
302 |
- gesture.$slideEl = swiper.$wrapperEl.children("." + swiper.params.slideActiveClass); |
|
303 |
- } else { |
|
304 |
- gesture.$slideEl = swiper.slides.eq(swiper.activeIndex); |
|
305 |
- } |
|
306 |
- |
|
307 |
- gesture.$imageEl = gesture.$slideEl.find('img, svg, canvas, picture, .swiper-zoom-target'); |
|
308 |
- gesture.$imageWrapEl = gesture.$imageEl.parent("." + params.containerClass); |
|
309 |
- } |
|
310 |
- |
|
311 |
- if (!gesture.$imageEl || gesture.$imageEl.length === 0) return; |
|
312 |
- gesture.$slideEl.addClass("" + params.zoomedSlideClass); |
|
313 |
- var touchX; |
|
314 |
- var touchY; |
|
315 |
- var offsetX; |
|
316 |
- var offsetY; |
|
317 |
- var diffX; |
|
318 |
- var diffY; |
|
319 |
- var translateX; |
|
320 |
- var translateY; |
|
321 |
- var imageWidth; |
|
322 |
- var imageHeight; |
|
323 |
- var scaledWidth; |
|
324 |
- var scaledHeight; |
|
325 |
- var translateMinX; |
|
326 |
- var translateMinY; |
|
327 |
- var translateMaxX; |
|
328 |
- var translateMaxY; |
|
329 |
- var slideWidth; |
|
330 |
- var slideHeight; |
|
331 |
- |
|
332 |
- if (typeof image.touchesStart.x === 'undefined' && e) { |
|
333 |
- touchX = e.type === 'touchend' ? e.changedTouches[0].pageX : e.pageX; |
|
334 |
- touchY = e.type === 'touchend' ? e.changedTouches[0].pageY : e.pageY; |
|
335 |
- } else { |
|
336 |
- touchX = image.touchesStart.x; |
|
337 |
- touchY = image.touchesStart.y; |
|
338 |
- } |
|
339 |
- |
|
340 |
- zoom.scale = gesture.$imageWrapEl.attr('data-swiper-zoom') || params.maxRatio; |
|
341 |
- zoom.currentScale = gesture.$imageWrapEl.attr('data-swiper-zoom') || params.maxRatio; |
|
342 |
- |
|
343 |
- if (e) { |
|
344 |
- slideWidth = gesture.$slideEl[0].offsetWidth; |
|
345 |
- slideHeight = gesture.$slideEl[0].offsetHeight; |
|
346 |
- offsetX = gesture.$slideEl.offset().left + window.scrollX; |
|
347 |
- offsetY = gesture.$slideEl.offset().top + window.scrollY; |
|
348 |
- diffX = offsetX + slideWidth / 2 - touchX; |
|
349 |
- diffY = offsetY + slideHeight / 2 - touchY; |
|
350 |
- imageWidth = gesture.$imageEl[0].offsetWidth; |
|
351 |
- imageHeight = gesture.$imageEl[0].offsetHeight; |
|
352 |
- scaledWidth = imageWidth * zoom.scale; |
|
353 |
- scaledHeight = imageHeight * zoom.scale; |
|
354 |
- translateMinX = Math.min(slideWidth / 2 - scaledWidth / 2, 0); |
|
355 |
- translateMinY = Math.min(slideHeight / 2 - scaledHeight / 2, 0); |
|
356 |
- translateMaxX = -translateMinX; |
|
357 |
- translateMaxY = -translateMinY; |
|
358 |
- translateX = diffX * zoom.scale; |
|
359 |
- translateY = diffY * zoom.scale; |
|
360 |
- |
|
361 |
- if (translateX < translateMinX) { |
|
362 |
- translateX = translateMinX; |
|
363 |
- } |
|
364 |
- |
|
365 |
- if (translateX > translateMaxX) { |
|
366 |
- translateX = translateMaxX; |
|
367 |
- } |
|
368 |
- |
|
369 |
- if (translateY < translateMinY) { |
|
370 |
- translateY = translateMinY; |
|
371 |
- } |
|
372 |
- |
|
373 |
- if (translateY > translateMaxY) { |
|
374 |
- translateY = translateMaxY; |
|
375 |
- } |
|
376 |
- } else { |
|
377 |
- translateX = 0; |
|
378 |
- translateY = 0; |
|
379 |
- } |
|
380 |
- |
|
381 |
- gesture.$imageWrapEl.transition(300).transform("translate3d(" + translateX + "px, " + translateY + "px,0)"); |
|
382 |
- gesture.$imageEl.transition(300).transform("translate3d(0,0,0) scale(" + zoom.scale + ")"); |
|
383 |
- }, |
|
384 |
- out: function out() { |
|
385 |
- var swiper = this; |
|
386 |
- var zoom = swiper.zoom; |
|
387 |
- var params = swiper.params.zoom; |
|
388 |
- var gesture = zoom.gesture; |
|
389 |
- |
|
390 |
- if (!gesture.$slideEl) { |
|
391 |
- if (swiper.params.virtual && swiper.params.virtual.enabled && swiper.virtual) { |
|
392 |
- gesture.$slideEl = swiper.$wrapperEl.children("." + swiper.params.slideActiveClass); |
|
393 |
- } else { |
|
394 |
- gesture.$slideEl = swiper.slides.eq(swiper.activeIndex); |
|
395 |
- } |
|
396 |
- |
|
397 |
- gesture.$imageEl = gesture.$slideEl.find('img, svg, canvas, picture, .swiper-zoom-target'); |
|
398 |
- gesture.$imageWrapEl = gesture.$imageEl.parent("." + params.containerClass); |
|
399 |
- } |
|
400 |
- |
|
401 |
- if (!gesture.$imageEl || gesture.$imageEl.length === 0) return; |
|
402 |
- zoom.scale = 1; |
|
403 |
- zoom.currentScale = 1; |
|
404 |
- gesture.$imageWrapEl.transition(300).transform('translate3d(0,0,0)'); |
|
405 |
- gesture.$imageEl.transition(300).transform('translate3d(0,0,0) scale(1)'); |
|
406 |
- gesture.$slideEl.removeClass("" + params.zoomedSlideClass); |
|
407 |
- gesture.$slideEl = undefined; |
|
408 |
- }, |
|
409 |
- toggleGestures: function toggleGestures(method) { |
|
410 |
- var swiper = this; |
|
411 |
- var zoom = swiper.zoom; |
|
412 |
- var selector = zoom.slideSelector, |
|
413 |
- passive = zoom.passiveListener; |
|
414 |
- swiper.$wrapperEl[method]('gesturestart', selector, zoom.onGestureStart, passive); |
|
415 |
- swiper.$wrapperEl[method]('gesturechange', selector, zoom.onGestureChange, passive); |
|
416 |
- swiper.$wrapperEl[method]('gestureend', selector, zoom.onGestureEnd, passive); |
|
417 |
- }, |
|
418 |
- enableGestures: function enableGestures() { |
|
419 |
- if (this.zoom.gesturesEnabled) return; |
|
420 |
- this.zoom.gesturesEnabled = true; |
|
421 |
- this.zoom.toggleGestures('on'); |
|
422 |
- }, |
|
423 |
- disableGestures: function disableGestures() { |
|
424 |
- if (!this.zoom.gesturesEnabled) return; |
|
425 |
- this.zoom.gesturesEnabled = false; |
|
426 |
- this.zoom.toggleGestures('off'); |
|
427 |
- }, |
|
428 |
- // Attach/Detach Events |
|
429 |
- enable: function enable() { |
|
430 |
- var swiper = this; |
|
431 |
- var support = swiper.support; |
|
432 |
- var zoom = swiper.zoom; |
|
433 |
- if (zoom.enabled) return; |
|
434 |
- zoom.enabled = true; |
|
435 |
- var passiveListener = swiper.touchEvents.start === 'touchstart' && support.passiveListener && swiper.params.passiveListeners ? { |
|
436 |
- passive: true, |
|
437 |
- capture: false |
|
438 |
- } : false; |
|
439 |
- var activeListenerWithCapture = support.passiveListener ? { |
|
440 |
- passive: false, |
|
441 |
- capture: true |
|
442 |
- } : true; |
|
443 |
- var slideSelector = "." + swiper.params.slideClass; |
|
444 |
- swiper.zoom.passiveListener = passiveListener; |
|
445 |
- swiper.zoom.slideSelector = slideSelector; // Scale image |
|
446 |
- |
|
447 |
- if (support.gestures) { |
|
448 |
- swiper.$wrapperEl.on(swiper.touchEvents.start, swiper.zoom.enableGestures, passiveListener); |
|
449 |
- swiper.$wrapperEl.on(swiper.touchEvents.end, swiper.zoom.disableGestures, passiveListener); |
|
450 |
- } else if (swiper.touchEvents.start === 'touchstart') { |
|
451 |
- swiper.$wrapperEl.on(swiper.touchEvents.start, slideSelector, zoom.onGestureStart, passiveListener); |
|
452 |
- swiper.$wrapperEl.on(swiper.touchEvents.move, slideSelector, zoom.onGestureChange, activeListenerWithCapture); |
|
453 |
- swiper.$wrapperEl.on(swiper.touchEvents.end, slideSelector, zoom.onGestureEnd, passiveListener); |
|
454 |
- |
|
455 |
- if (swiper.touchEvents.cancel) { |
|
456 |
- swiper.$wrapperEl.on(swiper.touchEvents.cancel, slideSelector, zoom.onGestureEnd, passiveListener); |
|
457 |
- } |
|
458 |
- } // Move image |
|
459 |
- |
|
460 |
- |
|
461 |
- swiper.$wrapperEl.on(swiper.touchEvents.move, "." + swiper.params.zoom.containerClass, zoom.onTouchMove, activeListenerWithCapture); |
|
462 |
- }, |
|
463 |
- disable: function disable() { |
|
464 |
- var swiper = this; |
|
465 |
- var zoom = swiper.zoom; |
|
466 |
- if (!zoom.enabled) return; |
|
467 |
- var support = swiper.support; |
|
468 |
- swiper.zoom.enabled = false; |
|
469 |
- var passiveListener = swiper.touchEvents.start === 'touchstart' && support.passiveListener && swiper.params.passiveListeners ? { |
|
470 |
- passive: true, |
|
471 |
- capture: false |
|
472 |
- } : false; |
|
473 |
- var activeListenerWithCapture = support.passiveListener ? { |
|
474 |
- passive: false, |
|
475 |
- capture: true |
|
476 |
- } : true; |
|
477 |
- var slideSelector = "." + swiper.params.slideClass; // Scale image |
|
478 |
- |
|
479 |
- if (support.gestures) { |
|
480 |
- swiper.$wrapperEl.off(swiper.touchEvents.start, swiper.zoom.enableGestures, passiveListener); |
|
481 |
- swiper.$wrapperEl.off(swiper.touchEvents.end, swiper.zoom.disableGestures, passiveListener); |
|
482 |
- } else if (swiper.touchEvents.start === 'touchstart') { |
|
483 |
- swiper.$wrapperEl.off(swiper.touchEvents.start, slideSelector, zoom.onGestureStart, passiveListener); |
|
484 |
- swiper.$wrapperEl.off(swiper.touchEvents.move, slideSelector, zoom.onGestureChange, activeListenerWithCapture); |
|
485 |
- swiper.$wrapperEl.off(swiper.touchEvents.end, slideSelector, zoom.onGestureEnd, passiveListener); |
|
486 |
- |
|
487 |
- if (swiper.touchEvents.cancel) { |
|
488 |
- swiper.$wrapperEl.off(swiper.touchEvents.cancel, slideSelector, zoom.onGestureEnd, passiveListener); |
|
489 |
- } |
|
490 |
- } // Move image |
|
491 |
- |
|
492 |
- |
|
493 |
- swiper.$wrapperEl.off(swiper.touchEvents.move, "." + swiper.params.zoom.containerClass, zoom.onTouchMove, activeListenerWithCapture); |
|
494 |
- } |
|
495 |
-}; |
|
496 |
-export default { |
|
497 |
- name: 'zoom', |
|
498 |
- params: { |
|
499 |
- zoom: { |
|
500 |
- enabled: false, |
|
501 |
- maxRatio: 3, |
|
502 |
- minRatio: 1, |
|
503 |
- toggle: true, |
|
504 |
- containerClass: 'swiper-zoom-container', |
|
505 |
- zoomedSlideClass: 'swiper-slide-zoomed' |
|
506 |
- } |
|
507 |
- }, |
|
508 |
- create: function create() { |
|
509 |
- var swiper = this; |
|
510 |
- bindModuleMethods(swiper, { |
|
511 |
- zoom: _extends({ |
|
512 |
- enabled: false, |
|
513 |
- scale: 1, |
|
514 |
- currentScale: 1, |
|
515 |
- isScaling: false, |
|
516 |
- gesture: { |
|
517 |
- $slideEl: undefined, |
|
518 |
- slideWidth: undefined, |
|
519 |
- slideHeight: undefined, |
|
520 |
- $imageEl: undefined, |
|
521 |
- $imageWrapEl: undefined, |
|
522 |
- maxRatio: 3 |
|
523 |
- }, |
|
524 |
- image: { |
|
525 |
- isTouched: undefined, |
|
526 |
- isMoved: undefined, |
|
527 |
- currentX: undefined, |
|
528 |
- currentY: undefined, |
|
529 |
- minX: undefined, |
|
530 |
- minY: undefined, |
|
531 |
- maxX: undefined, |
|
532 |
- maxY: undefined, |
|
533 |
- width: undefined, |
|
534 |
- height: undefined, |
|
535 |
- startX: undefined, |
|
536 |
- startY: undefined, |
|
537 |
- touchesStart: {}, |
|
538 |
- touchesCurrent: {} |
|
539 |
- }, |
|
540 |
- velocity: { |
|
541 |
- x: undefined, |
|
542 |
- y: undefined, |
|
543 |
- prevPositionX: undefined, |
|
544 |
- prevPositionY: undefined, |
|
545 |
- prevTime: undefined |
|
546 |
- } |
|
547 |
- }, Zoom) |
|
548 |
- }); |
|
549 |
- var scale = 1; |
|
550 |
- Object.defineProperty(swiper.zoom, 'scale', { |
|
551 |
- get: function get() { |
|
552 |
- return scale; |
|
553 |
- }, |
|
554 |
- set: function set(value) { |
|
555 |
- if (scale !== value) { |
|
556 |
- var imageEl = swiper.zoom.gesture.$imageEl ? swiper.zoom.gesture.$imageEl[0] : undefined; |
|
557 |
- var slideEl = swiper.zoom.gesture.$slideEl ? swiper.zoom.gesture.$slideEl[0] : undefined; |
|
558 |
- swiper.emit('zoomChange', value, imageEl, slideEl); |
|
559 |
- } |
|
560 |
- |
|
561 |
- scale = value; |
|
562 |
- } |
|
563 |
- }); |
|
564 |
- }, |
|
565 |
- on: { |
|
566 |
- init: function init(swiper) { |
|
567 |
- if (swiper.params.zoom.enabled) { |
|
568 |
- swiper.zoom.enable(); |
|
569 |
- } |
|
570 |
- }, |
|
571 |
- destroy: function destroy(swiper) { |
|
572 |
- swiper.zoom.disable(); |
|
573 |
- }, |
|
574 |
- touchStart: function touchStart(swiper, e) { |
|
575 |
- if (!swiper.zoom.enabled) return; |
|
576 |
- swiper.zoom.onTouchStart(e); |
|
577 |
- }, |
|
578 |
- touchEnd: function touchEnd(swiper, e) { |
|
579 |
- if (!swiper.zoom.enabled) return; |
|
580 |
- swiper.zoom.onTouchEnd(e); |
|
581 |
- }, |
|
582 |
- doubleTap: function doubleTap(swiper, e) { |
|
583 |
- if (!swiper.animating && swiper.params.zoom.enabled && swiper.zoom.enabled && swiper.params.zoom.toggle) { |
|
584 |
- swiper.zoom.toggle(e); |
|
585 |
- } |
|
586 |
- }, |
|
587 |
- transitionEnd: function transitionEnd(swiper) { |
|
588 |
- if (swiper.zoom.enabled && swiper.params.zoom.enabled) { |
|
589 |
- swiper.zoom.onTransitionEnd(); |
|
590 |
- } |
|
591 |
- }, |
|
592 |
- slideChange: function slideChange(swiper) { |
|
593 |
- if (swiper.zoom.enabled && swiper.params.zoom.enabled && swiper.params.cssMode) { |
|
594 |
- swiper.zoom.onTransitionEnd(); |
|
595 |
- } |
|
596 |
- } |
|
597 |
- } |
|
598 |
-}; |
|
599 | 0 |
\ No newline at end of file |
1 | 1 |
new file mode 100644 |
... | ... |
@@ -0,0 +1,598 @@ |
1 |
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } |
|
2 |
+ |
|
3 |
+import { getWindow } from 'ssr-window'; |
|
4 |
+import $ from '../../utils/dom'; |
|
5 |
+import { bindModuleMethods, getTranslate } from '../../utils/utils'; |
|
6 |
+var Zoom = { |
|
7 |
+ // Calc Scale From Multi-touches |
|
8 |
+ getDistanceBetweenTouches: function getDistanceBetweenTouches(e) { |
|
9 |
+ if (e.targetTouches.length < 2) return 1; |
|
10 |
+ var x1 = e.targetTouches[0].pageX; |
|
11 |
+ var y1 = e.targetTouches[0].pageY; |
|
12 |
+ var x2 = e.targetTouches[1].pageX; |
|
13 |
+ var y2 = e.targetTouches[1].pageY; |
|
14 |
+ var distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); |
|
15 |
+ return distance; |
|
16 |
+ }, |
|
17 |
+ // Events |
|
18 |
+ onGestureStart: function onGestureStart(e) { |
|
19 |
+ var swiper = this; |
|
20 |
+ var support = swiper.support; |
|
21 |
+ var params = swiper.params.zoom; |
|
22 |
+ var zoom = swiper.zoom; |
|
23 |
+ var gesture = zoom.gesture; |
|
24 |
+ zoom.fakeGestureTouched = false; |
|
25 |
+ zoom.fakeGestureMoved = false; |
|
26 |
+ |
|
27 |
+ if (!support.gestures) { |
|
28 |
+ if (e.type !== 'touchstart' || e.type === 'touchstart' && e.targetTouches.length < 2) { |
|
29 |
+ return; |
|
30 |
+ } |
|
31 |
+ |
|
32 |
+ zoom.fakeGestureTouched = true; |
|
33 |
+ gesture.scaleStart = Zoom.getDistanceBetweenTouches(e); |
|
34 |
+ } |
|
35 |
+ |
|
36 |
+ if (!gesture.$slideEl || !gesture.$slideEl.length) { |
|
37 |
+ gesture.$slideEl = $(e.target).closest("." + swiper.params.slideClass); |
|
38 |
+ if (gesture.$slideEl.length === 0) gesture.$slideEl = swiper.slides.eq(swiper.activeIndex); |
|
39 |
+ gesture.$imageEl = gesture.$slideEl.find('img, svg, canvas, picture, .swiper-zoom-target'); |
|
40 |
+ gesture.$imageWrapEl = gesture.$imageEl.parent("." + params.containerClass); |
|
41 |
+ gesture.maxRatio = gesture.$imageWrapEl.attr('data-swiper-zoom') || params.maxRatio; |
|
42 |
+ |
|
43 |
+ if (gesture.$imageWrapEl.length === 0) { |
|
44 |
+ gesture.$imageEl = undefined; |
|
45 |
+ return; |
|
46 |
+ } |
|
47 |
+ } |
|
48 |
+ |
|
49 |
+ if (gesture.$imageEl) { |
|
50 |
+ gesture.$imageEl.transition(0); |
|
51 |
+ } |
|
52 |
+ |
|
53 |
+ swiper.zoom.isScaling = true; |
|
54 |
+ }, |
|
55 |
+ onGestureChange: function onGestureChange(e) { |
|
56 |
+ var swiper = this; |
|
57 |
+ var support = swiper.support; |
|
58 |
+ var params = swiper.params.zoom; |
|
59 |
+ var zoom = swiper.zoom; |
|
60 |
+ var gesture = zoom.gesture; |
|
61 |
+ |
|
62 |
+ if (!support.gestures) { |
|
63 |
+ if (e.type !== 'touchmove' || e.type === 'touchmove' && e.targetTouches.length < 2) { |
|
64 |
+ return; |
|
65 |
+ } |
|
66 |
+ |
|
67 |
+ zoom.fakeGestureMoved = true; |
|
68 |
+ gesture.scaleMove = Zoom.getDistanceBetweenTouches(e); |
|
69 |
+ } |
|
70 |
+ |
|
71 |
+ if (!gesture.$imageEl || gesture.$imageEl.length === 0) { |
|
72 |
+ if (e.type === 'gesturechange') zoom.onGestureStart(e); |
|
73 |
+ return; |
|
74 |
+ } |
|
75 |
+ |
|
76 |
+ if (support.gestures) { |
|
77 |
+ zoom.scale = e.scale * zoom.currentScale; |
|
78 |
+ } else { |
|
79 |
+ zoom.scale = gesture.scaleMove / gesture.scaleStart * zoom.currentScale; |
|
80 |
+ } |
|
81 |
+ |
|
82 |
+ if (zoom.scale > gesture.maxRatio) { |
|
83 |
+ zoom.scale = gesture.maxRatio - 1 + Math.pow(zoom.scale - gesture.maxRatio + 1, 0.5); |
|
84 |
+ } |
|
85 |
+ |
|
86 |
+ if (zoom.scale < params.minRatio) { |
|
87 |
+ zoom.scale = params.minRatio + 1 - Math.pow(params.minRatio - zoom.scale + 1, 0.5); |
|
88 |
+ } |
|
89 |
+ |
|
90 |
+ gesture.$imageEl.transform("translate3d(0,0,0) scale(" + zoom.scale + ")"); |
|
91 |
+ }, |
|
92 |
+ onGestureEnd: function onGestureEnd(e) { |
|
93 |
+ var swiper = this; |
|
94 |
+ var device = swiper.device; |
|
95 |
+ var support = swiper.support; |
|
96 |
+ var params = swiper.params.zoom; |
|
97 |
+ var zoom = swiper.zoom; |
|
98 |
+ var gesture = zoom.gesture; |
|
99 |
+ |
|
100 |
+ if (!support.gestures) { |
|
101 |
+ if (!zoom.fakeGestureTouched || !zoom.fakeGestureMoved) { |
|
102 |
+ return; |
|
103 |
+ } |
|
104 |
+ |
|
105 |
+ if (e.type !== 'touchend' || e.type === 'touchend' && e.changedTouches.length < 2 && !device.android) { |
|
106 |
+ return; |
|
107 |
+ } |
|
108 |
+ |
|
109 |
+ zoom.fakeGestureTouched = false; |
|
110 |
+ zoom.fakeGestureMoved = false; |
|
111 |
+ } |
|
112 |
+ |
|
113 |
+ if (!gesture.$imageEl || gesture.$imageEl.length === 0) return; |
|
114 |
+ zoom.scale = Math.max(Math.min(zoom.scale, gesture.maxRatio), params.minRatio); |
|
115 |
+ gesture.$imageEl.transition(swiper.params.speed).transform("translate3d(0,0,0) scale(" + zoom.scale + ")"); |
|
116 |
+ zoom.currentScale = zoom.scale; |
|
117 |
+ zoom.isScaling = false; |
|
118 |
+ if (zoom.scale === 1) gesture.$slideEl = undefined; |
|
119 |
+ }, |
|
120 |
+ onTouchStart: function onTouchStart(e) { |
|
121 |
+ var swiper = this; |
|
122 |
+ var device = swiper.device; |
|
123 |
+ var zoom = swiper.zoom; |
|
124 |
+ var gesture = zoom.gesture, |
|
125 |
+ image = zoom.image; |
|
126 |
+ if (!gesture.$imageEl || gesture.$imageEl.length === 0) return; |
|
127 |
+ if (image.isTouched) return; |
|
128 |
+ if (device.android && e.cancelable) e.preventDefault(); |
|
129 |
+ image.isTouched = true; |
|
130 |
+ image.touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX; |
|
131 |
+ image.touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY; |
|
132 |
+ }, |
|
133 |
+ onTouchMove: function onTouchMove(e) { |
|
134 |
+ var swiper = this; |
|
135 |
+ var zoom = swiper.zoom; |
|
136 |
+ var gesture = zoom.gesture, |
|
137 |
+ image = zoom.image, |
|
138 |
+ velocity = zoom.velocity; |
|
139 |
+ if (!gesture.$imageEl || gesture.$imageEl.length === 0) return; |
|
140 |
+ swiper.allowClick = false; |
|
141 |
+ if (!image.isTouched || !gesture.$slideEl) return; |
|
142 |
+ |
|
143 |
+ if (!image.isMoved) { |
|
144 |
+ image.width = gesture.$imageEl[0].offsetWidth; |
|
145 |
+ image.height = gesture.$imageEl[0].offsetHeight; |
|
146 |
+ image.startX = getTranslate(gesture.$imageWrapEl[0], 'x') || 0; |
|
147 |
+ image.startY = getTranslate(gesture.$imageWrapEl[0], 'y') || 0; |
|
148 |
+ gesture.slideWidth = gesture.$slideEl[0].offsetWidth; |
|
149 |
+ gesture.slideHeight = gesture.$slideEl[0].offsetHeight; |
|
150 |
+ gesture.$imageWrapEl.transition(0); |
|
151 |
+ |
|
152 |
+ if (swiper.rtl) { |
|
153 |
+ image.startX = -image.startX; |
|
154 |
+ image.startY = -image.startY; |
|
155 |
+ } |
|
156 |
+ } // Define if we need image drag |
|
157 |
+ |
|
158 |
+ |
|
159 |
+ var scaledWidth = image.width * zoom.scale; |
|
160 |
+ var scaledHeight = image.height * zoom.scale; |
|
161 |
+ if (scaledWidth < gesture.slideWidth && scaledHeight < gesture.slideHeight) return; |
|
162 |
+ image.minX = Math.min(gesture.slideWidth / 2 - scaledWidth / 2, 0); |
|
163 |
+ image.maxX = -image.minX; |
|
164 |
+ image.minY = Math.min(gesture.slideHeight / 2 - scaledHeight / 2, 0); |
|
165 |
+ image.maxY = -image.minY; |
|
166 |
+ image.touchesCurrent.x = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX; |
|
167 |
+ image.touchesCurrent.y = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY; |
|
168 |
+ |
|
169 |
+ if (!image.isMoved && !zoom.isScaling) { |
|
170 |
+ if (swiper.isHorizontal() && (Math.floor(image.minX) === Math.floor(image.startX) && image.touchesCurrent.x < image.touchesStart.x || Math.floor(image.maxX) === Math.floor(image.startX) && image.touchesCurrent.x > image.touchesStart.x)) { |
|
171 |
+ image.isTouched = false; |
|
172 |
+ return; |
|
173 |
+ } |
|
174 |
+ |
|
175 |
+ if (!swiper.isHorizontal() && (Math.floor(image.minY) === Math.floor(image.startY) && image.touchesCurrent.y < image.touchesStart.y || Math.floor(image.maxY) === Math.floor(image.startY) && image.touchesCurrent.y > image.touchesStart.y)) { |
|
176 |
+ image.isTouched = false; |
|
177 |
+ return; |
|
178 |
+ } |
|
179 |
+ } |
|
180 |
+ |
|
181 |
+ if (e.cancelable) { |
|
182 |
+ e.preventDefault(); |
|
183 |
+ } |
|
184 |
+ |
|
185 |
+ e.stopPropagation(); |
|
186 |
+ image.isMoved = true; |
|
187 |
+ image.currentX = image.touchesCurrent.x - image.touchesStart.x + image.startX; |
|
188 |
+ image.currentY = image.touchesCurrent.y - image.touchesStart.y + image.startY; |
|
189 |
+ |
|
190 |
+ if (image.currentX < image.minX) { |
|
191 |
+ image.currentX = image.minX + 1 - Math.pow(image.minX - image.currentX + 1, 0.8); |
|
192 |
+ } |
|
193 |
+ |
|
194 |
+ if (image.currentX > image.maxX) { |
|
195 |
+ image.currentX = image.maxX - 1 + Math.pow(image.currentX - image.maxX + 1, 0.8); |
|
196 |
+ } |
|
197 |
+ |
|
198 |
+ if (image.currentY < image.minY) { |
|
199 |
+ image.currentY = image.minY + 1 - Math.pow(image.minY - image.currentY + 1, 0.8); |
|
200 |
+ } |
|
201 |
+ |
|
202 |
+ if (image.currentY > image.maxY) { |
|
203 |
+ image.currentY = image.maxY - 1 + Math.pow(image.currentY - image.maxY + 1, 0.8); |
|
204 |
+ } // Velocity |
|
205 |
+ |
|
206 |
+ |
|
207 |
+ if (!velocity.prevPositionX) velocity.prevPositionX = image.touchesCurrent.x; |
|
208 |
+ if (!velocity.prevPositionY) velocity.prevPositionY = image.touchesCurrent.y; |
|
209 |
+ if (!velocity.prevTime) velocity.prevTime = Date.now(); |
|
210 |
+ velocity.x = (image.touchesCurrent.x - velocity.prevPositionX) / (Date.now() - velocity.prevTime) / 2; |
|
211 |
+ velocity.y = (image.touchesCurrent.y - velocity.prevPositionY) / (Date.now() - velocity.prevTime) / 2; |
|
212 |
+ if (Math.abs(image.touchesCurrent.x - velocity.prevPositionX) < 2) velocity.x = 0; |
|
213 |
+ if (Math.abs(image.touchesCurrent.y - velocity.prevPositionY) < 2) velocity.y = 0; |
|
214 |
+ velocity.prevPositionX = image.touchesCurrent.x; |
|
215 |
+ velocity.prevPositionY = image.touchesCurrent.y; |
|
216 |
+ velocity.prevTime = Date.now(); |
|
217 |
+ gesture.$imageWrapEl.transform("translate3d(" + image.currentX + "px, " + image.currentY + "px,0)"); |
|
218 |
+ }, |
|
219 |
+ onTouchEnd: function onTouchEnd() { |
|
220 |
+ var swiper = this; |
|
221 |
+ var zoom = swiper.zoom; |
|
222 |
+ var gesture = zoom.gesture, |
|
223 |
+ image = zoom.image, |
|
224 |
+ velocity = zoom.velocity; |
|
225 |
+ if (!gesture.$imageEl || gesture.$imageEl.length === 0) return; |
|
226 |
+ |
|
227 |
+ if (!image.isTouched || !image.isMoved) { |
|
228 |
+ image.isTouched = false; |
|
229 |
+ image.isMoved = false; |
|
230 |
+ return; |
|
231 |
+ } |
|
232 |
+ |
|
233 |
+ image.isTouched = false; |
|
234 |
+ image.isMoved = false; |
|
235 |
+ var momentumDurationX = 300; |
|
236 |
+ var momentumDurationY = 300; |
|
237 |
+ var momentumDistanceX = velocity.x * momentumDurationX; |
|
238 |
+ var newPositionX = image.currentX + momentumDistanceX; |
|
239 |
+ var momentumDistanceY = velocity.y * momentumDurationY; |
|
240 |
+ var newPositionY = image.currentY + momentumDistanceY; // Fix duration |
|
241 |
+ |
|
242 |
+ if (velocity.x !== 0) momentumDurationX = Math.abs((newPositionX - image.currentX) / velocity.x); |
|
243 |
+ if (velocity.y !== 0) momentumDurationY = Math.abs((newPositionY - image.currentY) / velocity.y); |
|
244 |
+ var momentumDuration = Math.max(momentumDurationX, momentumDurationY); |
|
245 |
+ image.currentX = newPositionX; |
|
246 |
+ image.currentY = newPositionY; // Define if we need image drag |
|
247 |
+ |
|
248 |
+ var scaledWidth = image.width * zoom.scale; |
|
249 |
+ var scaledHeight = image.height * zoom.scale; |
|
250 |
+ image.minX = Math.min(gesture.slideWidth / 2 - scaledWidth / 2, 0); |
|
251 |
+ image.maxX = -image.minX; |
|
252 |
+ image.minY = Math.min(gesture.slideHeight / 2 - scaledHeight / 2, 0); |
|
253 |
+ image.maxY = -image.minY; |
|
254 |
+ image.currentX = Math.max(Math.min(image.currentX, image.maxX), image.minX); |
|
255 |
+ image.currentY = Math.max(Math.min(image.currentY, image.maxY), image.minY); |
|
256 |
+ gesture.$imageWrapEl.transition(momentumDuration).transform("translate3d(" + image.currentX + "px, " + image.currentY + "px,0)"); |
|
257 |
+ }, |
|
258 |
+ onTransitionEnd: function onTransitionEnd() { |
|
259 |
+ var swiper = this; |
|
260 |
+ var zoom = swiper.zoom; |
|
261 |
+ var gesture = zoom.gesture; |
|
262 |
+ |
|
263 |
+ if (gesture.$slideEl && swiper.previousIndex !== swiper.activeIndex) { |
|
264 |
+ if (gesture.$imageEl) { |
|
265 |
+ gesture.$imageEl.transform('translate3d(0,0,0) scale(1)'); |
|
266 |
+ } |
|
267 |
+ |
|
268 |
+ if (gesture.$imageWrapEl) { |
|
269 |
+ gesture.$imageWrapEl.transform('translate3d(0,0,0)'); |
|
270 |
+ } |
|
271 |
+ |
|
272 |
+ zoom.scale = 1; |
|
273 |
+ zoom.currentScale = 1; |
|
274 |
+ gesture.$slideEl = undefined; |
|
275 |
+ gesture.$imageEl = undefined; |
|
276 |
+ gesture.$imageWrapEl = undefined; |
|
277 |
+ } |
|
278 |
+ }, |
|
279 |
+ // Toggle Zoom |
|
280 |
+ toggle: function toggle(e) { |
|
281 |
+ var swiper = this; |
|
282 |
+ var zoom = swiper.zoom; |
|
283 |
+ |
|
284 |
+ if (zoom.scale && zoom.scale !== 1) { |
|
285 |
+ // Zoom Out |
|
286 |
+ zoom.out(); |
|
287 |
+ } else { |
|
288 |
+ // Zoom In |
|
289 |
+ zoom.in(e); |
|
290 |
+ } |
|
291 |
+ }, |
|
292 |
+ in: function _in(e) { |
|
293 |
+ var swiper = this; |
|
294 |
+ var window = getWindow(); |
|
295 |
+ var zoom = swiper.zoom; |
|
296 |
+ var params = swiper.params.zoom; |
|
297 |
+ var gesture = zoom.gesture, |
|
298 |
+ image = zoom.image; |
|
299 |
+ |
|
300 |
+ if (!gesture.$slideEl) { |
|
301 |
+ if (swiper.params.virtual && swiper.params.virtual.enabled && swiper.virtual) { |
|
302 |
+ gesture.$slideEl = swiper.$wrapperEl.children("." + swiper.params.slideActiveClass); |
|
303 |
+ } else { |
|
304 |
+ gesture.$slideEl = swiper.slides.eq(swiper.activeIndex); |
|
305 |
+ } |
|
306 |
+ |
|
307 |
+ gesture.$imageEl = gesture.$slideEl.find('img, svg, canvas, picture, .swiper-zoom-target'); |
|
308 |
+ gesture.$imageWrapEl = gesture.$imageEl.parent("." + params.containerClass); |
|
309 |
+ } |
|
310 |
+ |
|
311 |
+ if (!gesture.$imageEl || gesture.$imageEl.length === 0) return; |
|
312 |
+ gesture.$slideEl.addClass("" + params.zoomedSlideClass); |
|
313 |
+ var touchX; |
|
314 |
+ var touchY; |
|
315 |
+ var offsetX; |
|
316 |
+ var offsetY; |
|
317 |
+ var diffX; |
|
318 |
+ var diffY; |
|
319 |
+ var translateX; |
|
320 |
+ var translateY; |
|
321 |
+ var imageWidth; |
|
322 |
+ var imageHeight; |
|
323 |
+ var scaledWidth; |
|
324 |
+ var scaledHeight; |
|
325 |
+ var translateMinX; |
|
326 |
+ var translateMinY; |
|
327 |
+ var translateMaxX; |
|
328 |
+ var translateMaxY; |
|
329 |
+ var slideWidth; |
|
330 |
+ var slideHeight; |
|
331 |
+ |
|
332 |
+ if (typeof image.touchesStart.x === 'undefined' && e) { |
|
333 |
+ touchX = e.type === 'touchend' ? e.changedTouches[0].pageX : e.pageX; |
|
334 |
+ touchY = e.type === 'touchend' ? e.changedTouches[0].pageY : e.pageY; |
|
335 |
+ } else { |
|
336 |
+ touchX = image.touchesStart.x; |
|
337 |
+ touchY = image.touchesStart.y; |
|
338 |
+ } |
|
339 |
+ |
|
340 |
+ zoom.scale = gesture.$imageWrapEl.attr('data-swiper-zoom') || params.maxRatio; |
|
341 |
+ zoom.currentScale = gesture.$imageWrapEl.attr('data-swiper-zoom') || params.maxRatio; |
|
342 |
+ |
|
343 |
+ if (e) { |
|
344 |
+ slideWidth = gesture.$slideEl[0].offsetWidth; |
|
345 |
+ slideHeight = gesture.$slideEl[0].offsetHeight; |
|
346 |
+ offsetX = gesture.$slideEl.offset().left + window.scrollX; |
|
347 |
+ offsetY = gesture.$slideEl.offset().top + window.scrollY; |
|
348 |
+ diffX = offsetX + slideWidth / 2 - touchX; |
|
349 |
+ diffY = offsetY + slideHeight / 2 - touchY; |
|
350 |
+ imageWidth = gesture.$imageEl[0].offsetWidth; |
|
351 |
+ imageHeight = gesture.$imageEl[0].offsetHeight; |
|
352 |
+ scaledWidth = imageWidth * zoom.scale; |
|
353 |
+ scaledHeight = imageHeight * zoom.scale; |
|
354 |
+ translateMinX = Math.min(slideWidth / 2 - scaledWidth / 2, 0); |
|
355 |
+ translateMinY = Math.min(slideHeight / 2 - scaledHeight / 2, 0); |
|
356 |
+ translateMaxX = -translateMinX; |
|
357 |
+ translateMaxY = -translateMinY; |
|
358 |
+ translateX = diffX * zoom.scale; |
|
359 |
+ translateY = diffY * zoom.scale; |
|
360 |
+ |
|
361 |
+ if (translateX < translateMinX) { |
|
362 |
+ translateX = translateMinX; |
|
363 |
+ } |
|
364 |
+ |
|
365 |
+ if (translateX > translateMaxX) { |
|
366 |
+ translateX = translateMaxX; |
|
367 |
+ } |
|
368 |
+ |
|
369 |
+ if (translateY < translateMinY) { |
|
370 |
+ translateY = translateMinY; |
|
371 |
+ } |
|
372 |
+ |
|
373 |
+ if (translateY > translateMaxY) { |
|
374 |
+ translateY = translateMaxY; |
|
375 |
+ } |
|
376 |
+ } else { |
|
377 |
+ translateX = 0; |
|
378 |
+ translateY = 0; |
|
379 |
+ } |
|
380 |
+ |
|
381 |
+ gesture.$imageWrapEl.transition(300).transform("translate3d(" + translateX + "px, " + translateY + "px,0)"); |
|
382 |
+ gesture.$imageEl.transition(300).transform("translate3d(0,0,0) scale(" + zoom.scale + ")"); |
|
383 |
+ }, |
|
384 |
+ out: function out() { |
|
385 |
+ var swiper = this; |
|
386 |
+ var zoom = swiper.zoom; |
|
387 |
+ var params = swiper.params.zoom; |
|
388 |
+ var gesture = zoom.gesture; |
|
389 |
+ |
|
390 |
+ if (!gesture.$slideEl) { |
|
391 |
+ if (swiper.params.virtual && swiper.params.virtual.enabled && swiper.virtual) { |
|
392 |
+ gesture.$slideEl = swiper.$wrapperEl.children("." + swiper.params.slideActiveClass); |
|
393 |
+ } else { |
|
394 |
+ gesture.$slideEl = swiper.slides.eq(swiper.activeIndex); |
|
395 |
+ } |
|
396 |
+ |
|
397 |
+ gesture.$imageEl = gesture.$slideEl.find('img, svg, canvas, picture, .swiper-zoom-target'); |
|
398 |
+ gesture.$imageWrapEl = gesture.$imageEl.parent("." + params.containerClass); |
|
399 |
+ } |
|
400 |
+ |
|
401 |
+ if (!gesture.$imageEl || gesture.$imageEl.length === 0) return; |
|
402 |
+ zoom.scale = 1; |
|
403 |
+ zoom.currentScale = 1; |
|
404 |
+ gesture.$imageWrapEl.transition(300).transform('translate3d(0,0,0)'); |
|
405 |
+ gesture.$imageEl.transition(300).transform('translate3d(0,0,0) scale(1)'); |
|
406 |
+ gesture.$slideEl.removeClass("" + params.zoomedSlideClass); |
|
407 |
+ gesture.$slideEl = undefined; |
|
408 |
+ }, |
|
409 |
+ toggleGestures: function toggleGestures(method) { |
|
410 |
+ var swiper = this; |
|
411 |
+ var zoom = swiper.zoom; |
|
412 |
+ var selector = zoom.slideSelector, |
|
413 |
+ passive = zoom.passiveListener; |
|
414 |
+ swiper.$wrapperEl[method]('gesturestart', selector, zoom.onGestureStart, passive); |
|
415 |
+ swiper.$wrapperEl[method]('gesturechange', selector, zoom.onGestureChange, passive); |
|
416 |
+ swiper.$wrapperEl[method]('gestureend', selector, zoom.onGestureEnd, passive); |
|
417 |
+ }, |
|
418 |
+ enableGestures: function enableGestures() { |
|
419 |
+ if (this.zoom.gesturesEnabled) return; |
|
420 |
+ this.zoom.gesturesEnabled = true; |
|
421 |
+ this.zoom.toggleGestures('on'); |
|
422 |
+ }, |
|
423 |
+ disableGestures: function disableGestures() { |
|
424 |
+ if (!this.zoom.gesturesEnabled) return; |
|
425 |
+ this.zoom.gesturesEnabled = false; |
|
426 |
+ this.zoom.toggleGestures('off'); |
|
427 |
+ }, |
|
428 |
+ // Attach/Detach Events |
|
429 |
+ enable: function enable() { |
|
430 |
+ var swiper = this; |
|
431 |
+ var support = swiper.support; |
|
432 |
+ var zoom = swiper.zoom; |
|
433 |
+ if (zoom.enabled) return; |
|
434 |
+ zoom.enabled = true; |
|
435 |
+ var passiveListener = swiper.touchEvents.start === 'touchstart' && support.passiveListener && swiper.params.passiveListeners ? { |
|
436 |
+ passive: true, |
|
437 |
+ capture: false |
|
438 |
+ } : false; |
|
439 |
+ var activeListenerWithCapture = support.passiveListener ? { |
|
440 |
+ passive: false, |
|
441 |
+ capture: true |
|
442 |
+ } : true; |
|
443 |
+ var slideSelector = "." + swiper.params.slideClass; |
|
444 |
+ swiper.zoom.passiveListener = passiveListener; |
|
445 |
+ swiper.zoom.slideSelector = slideSelector; // Scale image |
|
446 |
+ |
|
447 |
+ if (support.gestures) { |
|
448 |
+ swiper.$wrapperEl.on(swiper.touchEvents.start, swiper.zoom.enableGestures, passiveListener); |
|
449 |
+ swiper.$wrapperEl.on(swiper.touchEvents.end, swiper.zoom.disableGestures, passiveListener); |
|
450 |
+ } else if (swiper.touchEvents.start === 'touchstart') { |
|
451 |
+ swiper.$wrapperEl.on(swiper.touchEvents.start, slideSelector, zoom.onGestureStart, passiveListener); |
|
452 |
+ swiper.$wrapperEl.on(swiper.touchEvents.move, slideSelector, zoom.onGestureChange, activeListenerWithCapture); |
|
453 |
+ swiper.$wrapperEl.on(swiper.touchEvents.end, slideSelector, zoom.onGestureEnd, passiveListener); |
|
454 |
+ |
|
455 |
+ if (swiper.touchEvents.cancel) { |
|
456 |
+ swiper.$wrapperEl.on(swiper.touchEvents.cancel, slideSelector, zoom.onGestureEnd, passiveListener); |
|
457 |
+ } |
|
458 |
+ } // Move image |
|
459 |
+ |
|
460 |
+ |
|
461 |
+ swiper.$wrapperEl.on(swiper.touchEvents.move, "." + swiper.params.zoom.containerClass, zoom.onTouchMove, activeListenerWithCapture); |
|
462 |
+ }, |
|
463 |
+ disable: function disable() { |
|
464 |
+ var swiper = this; |
|
465 |
+ var zoom = swiper.zoom; |
|
466 |
+ if (!zoom.enabled) return; |
|
467 |
+ var support = swiper.support; |
|
468 |
+ swiper.zoom.enabled = false; |
|
469 |
+ var passiveListener = swiper.touchEvents.start === 'touchstart' && support.passiveListener && swiper.params.passiveListeners ? { |
|
470 |
+ passive: true, |
|
471 |
+ capture: false |
|
472 |
+ } : false; |
|
473 |
+ var activeListenerWithCapture = support.passiveListener ? { |
|
474 |
+ passive: false, |
|
475 |
+ capture: true |
|
476 |
+ } : true; |
|
477 |
+ var slideSelector = "." + swiper.params.slideClass; // Scale image |
|
478 |
+ |
|
479 |
+ if (support.gestures) { |
|
480 |
+ swiper.$wrapperEl.off(swiper.touchEvents.start, swiper.zoom.enableGestures, passiveListener); |
|
481 |
+ swiper.$wrapperEl.off(swiper.touchEvents.end, swiper.zoom.disableGestures, passiveListener); |
|
482 |
+ } else if (swiper.touchEvents.start === 'touchstart') { |
|
483 |
+ swiper.$wrapperEl.off(swiper.touchEvents.start, slideSelector, zoom.onGestureStart, passiveListener); |
|
484 |
+ swiper.$wrapperEl.off(swiper.touchEvents.move, slideSelector, zoom.onGestureChange, activeListenerWithCapture); |
|
485 |
+ swiper.$wrapperEl.off(swiper.touchEvents.end, slideSelector, zoom.onGestureEnd, passiveListener); |
|
486 |
+ |
|
487 |
+ if (swiper.touchEvents.cancel) { |
|
488 |
+ swiper.$wrapperEl.off(swiper.touchEvents.cancel, slideSelector, zoom.onGestureEnd, passiveListener); |
|
489 |
+ } |
|
490 |
+ } // Move image |
|
491 |
+ |
|
492 |
+ |
|
493 |
+ swiper.$wrapperEl.off(swiper.touchEvents.move, "." + swiper.params.zoom.containerClass, zoom.onTouchMove, activeListenerWithCapture); |
|
494 |
+ } |
|
495 |
+}; |
|
496 |
+export default { |
|
497 |
+ name: 'zoom', |
|
498 |
+ params: { |
|
499 |
+ zoom: { |
|
500 |
+ enabled: false, |
|
501 |
+ maxRatio: 3, |
|
502 |
+ minRatio: 1, |
|
503 |
+ toggle: true, |
|
504 |
+ containerClass: 'swiper-zoom-container', |
|
505 |
+ zoomedSlideClass: 'swiper-slide-zoomed' |
|
506 |
+ } |
|
507 |
+ }, |
|
508 |
+ create: function create() { |
|
509 |
+ var swiper = this; |
|
510 |
+ bindModuleMethods(swiper, { |
|
511 |
+ zoom: _extends({ |
|
512 |
+ enabled: false, |
|
513 |
+ scale: 1, |
|
514 |
+ currentScale: 1, |
|
515 |
+ isScaling: false, |
|
516 |
+ gesture: { |
|
517 |
+ $slideEl: undefined, |
|
518 |
+ slideWidth: undefined, |
|
519 |
+ slideHeight: undefined, |
|
520 |
+ $imageEl: undefined, |
|
521 |
+ $imageWrapEl: undefined, |
|
522 |
+ maxRatio: 3 |
|
523 |
+ }, |
|
524 |
+ image: { |
|
525 |
+ isTouched: undefined, |
|
526 |
+ isMoved: undefined, |
|
527 |
+ currentX: undefined, |
|
528 |
+ currentY: undefined, |
|
529 |
+ minX: undefined, |
|
530 |
+ minY: undefined, |
|
531 |
+ maxX: undefined, |
|
532 |
+ maxY: undefined, |
|
533 |
+ width: undefined, |
|
534 |
+ height: undefined, |
|
535 |
+ startX: undefined, |
|
536 |
+ startY: undefined, |
|
537 |
+ touchesStart: {}, |
|
538 |
+ touchesCurrent: {} |
|
539 |
+ }, |
|
540 |
+ velocity: { |
|
541 |
+ x: undefined, |
|
542 |
+ y: undefined, |
|
543 |
+ prevPositionX: undefined, |
|
544 |
+ prevPositionY: undefined, |
|
545 |
+ prevTime: undefined |
|
546 |
+ } |
|
547 |
+ }, Zoom) |
|
548 |
+ }); |
|
549 |
+ var scale = 1; |
|
550 |
+ Object.defineProperty(swiper.zoom, 'scale', { |
|
551 |
+ get: function get() { |
|
552 |
+ return scale; |
|
553 |
+ }, |
|
554 |
+ set: function set(value) { |
|
555 |
+ if (scale !== value) { |
|
556 |
+ var imageEl = swiper.zoom.gesture.$imageEl ? swiper.zoom.gesture.$imageEl[0] : undefined; |
|
557 |
+ var slideEl = swiper.zoom.gesture.$slideEl ? swiper.zoom.gesture.$slideEl[0] : undefined; |
|
558 |
+ swiper.emit('zoomChange', value, imageEl, slideEl); |
|
559 |
+ } |
|
560 |
+ |
|
561 |
+ scale = value; |
|
562 |
+ } |
|
563 |
+ }); |
|
564 |
+ }, |
|
565 |
+ on: { |
|
566 |
+ init: function init(swiper) { |
|
567 |
+ if (swiper.params.zoom.enabled) { |
|
568 |
+ swiper.zoom.enable(); |
|
569 |
+ } |
|
570 |
+ }, |
|
571 |
+ destroy: function destroy(swiper) { |
|
572 |
+ swiper.zoom.disable(); |
|
573 |
+ }, |
|
574 |
+ touchStart: function touchStart(swiper, e) { |
|
575 |
+ if (!swiper.zoom.enabled) return; |
|
576 |
+ swiper.zoom.onTouchStart(e); |
|
577 |
+ }, |
|
578 |
+ touchEnd: function touchEnd(swiper, e) { |
|
579 |
+ if (!swiper.zoom.enabled) return; |
|
580 |
+ swiper.zoom.onTouchEnd(e); |
|
581 |
+ }, |
|
582 |
+ doubleTap: function doubleTap(swiper, e) { |
|
583 |
+ if (!swiper.animating && swiper.params.zoom.enabled && swiper.zoom.enabled && swiper.params.zoom.toggle) { |
|
584 |
+ swiper.zoom.toggle(e); |
|
585 |
+ } |
|
586 |
+ }, |
|
587 |
+ transitionEnd: function transitionEnd(swiper) { |
|
588 |
+ if (swiper.zoom.enabled && swiper.params.zoom.enabled) { |
|
589 |
+ swiper.zoom.onTransitionEnd(); |
|
590 |
+ } |
|
591 |
+ }, |
|
592 |
+ slideChange: function slideChange(swiper) { |
|
593 |
+ if (swiper.zoom.enabled && swiper.params.zoom.enabled && swiper.params.cssMode) { |
|
594 |
+ swiper.zoom.onTransitionEnd(); |
|
595 |
+ } |
|
596 |
+ } |
|
597 |
+ } |
|
598 |
+}; |
|
0 | 599 |
\ No newline at end of file |