UNPKG

7.8 kBJavaScriptView Raw
1import { now } from '../../shared/utils.js';
2export default function freeMode({
3 swiper,
4 extendParams,
5 emit,
6 once
7}) {
8 extendParams({
9 freeMode: {
10 enabled: false,
11 momentum: true,
12 momentumRatio: 1,
13 momentumBounce: true,
14 momentumBounceRatio: 1,
15 momentumVelocityRatio: 1,
16 sticky: false,
17 minimumVelocity: 0.02
18 }
19 });
20
21 function onTouchMove() {
22 const {
23 touchEventsData: data,
24 touches
25 } = swiper; // Velocity
26
27 if (data.velocities.length === 0) {
28 data.velocities.push({
29 position: touches[swiper.isHorizontal() ? 'startX' : 'startY'],
30 time: data.touchStartTime
31 });
32 }
33
34 data.velocities.push({
35 position: touches[swiper.isHorizontal() ? 'currentX' : 'currentY'],
36 time: now()
37 });
38 }
39
40 function onTouchEnd({
41 currentPos
42 }) {
43 const {
44 params,
45 $wrapperEl,
46 rtlTranslate: rtl,
47 snapGrid,
48 touchEventsData: data
49 } = swiper; // Time diff
50
51 const touchEndTime = now();
52 const timeDiff = touchEndTime - data.touchStartTime;
53
54 if (currentPos < -swiper.minTranslate()) {
55 swiper.slideTo(swiper.activeIndex);
56 return;
57 }
58
59 if (currentPos > -swiper.maxTranslate()) {
60 if (swiper.slides.length < snapGrid.length) {
61 swiper.slideTo(snapGrid.length - 1);
62 } else {
63 swiper.slideTo(swiper.slides.length - 1);
64 }
65
66 return;
67 }
68
69 if (params.freeMode.momentum) {
70 if (data.velocities.length > 1) {
71 const lastMoveEvent = data.velocities.pop();
72 const velocityEvent = data.velocities.pop();
73 const distance = lastMoveEvent.position - velocityEvent.position;
74 const time = lastMoveEvent.time - velocityEvent.time;
75 swiper.velocity = distance / time;
76 swiper.velocity /= 2;
77
78 if (Math.abs(swiper.velocity) < params.freeMode.minimumVelocity) {
79 swiper.velocity = 0;
80 } // this implies that the user stopped moving a finger then released.
81 // There would be no events with distance zero, so the last event is stale.
82
83
84 if (time > 150 || now() - lastMoveEvent.time > 300) {
85 swiper.velocity = 0;
86 }
87 } else {
88 swiper.velocity = 0;
89 }
90
91 swiper.velocity *= params.freeMode.momentumVelocityRatio;
92 data.velocities.length = 0;
93 let momentumDuration = 1000 * params.freeMode.momentumRatio;
94 const momentumDistance = swiper.velocity * momentumDuration;
95 let newPosition = swiper.translate + momentumDistance;
96 if (rtl) newPosition = -newPosition;
97 let doBounce = false;
98 let afterBouncePosition;
99 const bounceAmount = Math.abs(swiper.velocity) * 20 * params.freeMode.momentumBounceRatio;
100 let needsLoopFix;
101
102 if (newPosition < swiper.maxTranslate()) {
103 if (params.freeMode.momentumBounce) {
104 if (newPosition + swiper.maxTranslate() < -bounceAmount) {
105 newPosition = swiper.maxTranslate() - bounceAmount;
106 }
107
108 afterBouncePosition = swiper.maxTranslate();
109 doBounce = true;
110 data.allowMomentumBounce = true;
111 } else {
112 newPosition = swiper.maxTranslate();
113 }
114
115 if (params.loop && params.centeredSlides) needsLoopFix = true;
116 } else if (newPosition > swiper.minTranslate()) {
117 if (params.freeMode.momentumBounce) {
118 if (newPosition - swiper.minTranslate() > bounceAmount) {
119 newPosition = swiper.minTranslate() + bounceAmount;
120 }
121
122 afterBouncePosition = swiper.minTranslate();
123 doBounce = true;
124 data.allowMomentumBounce = true;
125 } else {
126 newPosition = swiper.minTranslate();
127 }
128
129 if (params.loop && params.centeredSlides) needsLoopFix = true;
130 } else if (params.freeMode.sticky) {
131 let nextSlide;
132
133 for (let j = 0; j < snapGrid.length; j += 1) {
134 if (snapGrid[j] > -newPosition) {
135 nextSlide = j;
136 break;
137 }
138 }
139
140 if (Math.abs(snapGrid[nextSlide] - newPosition) < Math.abs(snapGrid[nextSlide - 1] - newPosition) || swiper.swipeDirection === 'next') {
141 newPosition = snapGrid[nextSlide];
142 } else {
143 newPosition = snapGrid[nextSlide - 1];
144 }
145
146 newPosition = -newPosition;
147 }
148
149 if (needsLoopFix) {
150 once('transitionEnd', () => {
151 swiper.loopFix();
152 });
153 } // Fix duration
154
155
156 if (swiper.velocity !== 0) {
157 if (rtl) {
158 momentumDuration = Math.abs((-newPosition - swiper.translate) / swiper.velocity);
159 } else {
160 momentumDuration = Math.abs((newPosition - swiper.translate) / swiper.velocity);
161 }
162
163 if (params.freeMode.sticky) {
164 // If freeMode.sticky is active and the user ends a swipe with a slow-velocity
165 // event, then durations can be 20+ seconds to slide one (or zero!) slides.
166 // It's easy to see this when simulating touch with mouse events. To fix this,
167 // limit single-slide swipes to the default slide duration. This also has the
168 // nice side effect of matching slide speed if the user stopped moving before
169 // lifting finger or mouse vs. moving slowly before lifting the finger/mouse.
170 // For faster swipes, also apply limits (albeit higher ones).
171 const moveDistance = Math.abs((rtl ? -newPosition : newPosition) - swiper.translate);
172 const currentSlideSize = swiper.slidesSizesGrid[swiper.activeIndex];
173
174 if (moveDistance < currentSlideSize) {
175 momentumDuration = params.speed;
176 } else if (moveDistance < 2 * currentSlideSize) {
177 momentumDuration = params.speed * 1.5;
178 } else {
179 momentumDuration = params.speed * 2.5;
180 }
181 }
182 } else if (params.freeMode.sticky) {
183 swiper.slideToClosest();
184 return;
185 }
186
187 if (params.freeMode.momentumBounce && doBounce) {
188 swiper.updateProgress(afterBouncePosition);
189 swiper.setTransition(momentumDuration);
190 swiper.setTranslate(newPosition);
191 swiper.transitionStart(true, swiper.swipeDirection);
192 swiper.animating = true;
193 $wrapperEl.transitionEnd(() => {
194 if (!swiper || swiper.destroyed || !data.allowMomentumBounce) return;
195 emit('momentumBounce');
196 swiper.setTransition(params.speed);
197 setTimeout(() => {
198 swiper.setTranslate(afterBouncePosition);
199 $wrapperEl.transitionEnd(() => {
200 if (!swiper || swiper.destroyed) return;
201 swiper.transitionEnd();
202 });
203 }, 0);
204 });
205 } else if (swiper.velocity) {
206 emit('_freeModeNoMomentumRelease');
207 swiper.updateProgress(newPosition);
208 swiper.setTransition(momentumDuration);
209 swiper.setTranslate(newPosition);
210 swiper.transitionStart(true, swiper.swipeDirection);
211
212 if (!swiper.animating) {
213 swiper.animating = true;
214 $wrapperEl.transitionEnd(() => {
215 if (!swiper || swiper.destroyed) return;
216 swiper.transitionEnd();
217 });
218 }
219 } else {
220 swiper.updateProgress(newPosition);
221 }
222
223 swiper.updateActiveIndex();
224 swiper.updateSlidesClasses();
225 } else if (params.freeMode.sticky) {
226 swiper.slideToClosest();
227 return;
228 } else if (params.freeMode) {
229 emit('_freeModeNoMomentumRelease');
230 }
231
232 if (!params.freeMode.momentum || timeDiff >= params.longSwipesMs) {
233 swiper.updateProgress();
234 swiper.updateActiveIndex();
235 swiper.updateSlidesClasses();
236 }
237 }
238
239 Object.assign(swiper, {
240 freeMode: {
241 onTouchMove,
242 onTouchEnd
243 }
244 });
245}
\No newline at end of file