vevet 5.0.3 → 5.0.5

package/src/components/Snap/index.ts

@@ -4,7 +4,9 @@ import {
   ISnapCallbacksMap,
   ISnapMagnet,
   ISnapMutableProps,
+  ISnapNexPrevArg,
   ISnapStaticProps,
+  ISnapToSlideArg,
 } from './types';
 import { TRequiredProps } from '@/internal/requiredProps';
 import { Raf } from '../Raf';
@@ -17,6 +19,7 @@ import {
   damp,
   lerp,
   toPixels,
+  closest,
 } from '@/utils';
 import { SnapSlide } from './Slide';
 import { SnapWheel } from './Wheel';
@@ -49,6 +52,7 @@ export class Snap<
   public _getStatic(): TRequiredProps<StaticProps> {
     return {
       ...super._getStatic(),
+      eventsEmitter: null,
       activeIndex: 0,
     } as TRequiredProps<StaticProps>;
   }
@@ -122,6 +126,9 @@ export class Snap<
   /** Active slide index */
   protected _activeIndex: number;
 
+  /** Target slide index */
+  protected _targetIndex?: number;
+
   constructor(props?: StaticProps & MutableProps) {
     super(props);
 
@@ -227,6 +234,11 @@ export class Snap<
     return this.props.container;
   }
 
+  /** Get events emitter */
+  get eventsEmitter() {
+    return this.props.eventsEmitter ?? this.container;
+  }
+
   /** Container size depending on direction (width or height) */
   get domSize() {
     return this._domSize;
@@ -297,7 +309,7 @@ export class Snap<
     const slide = slides.find(({ index }) => index === this.activeIndex);
     if (props.stickOnResize && slide) {
       this.track.clampTarget();
-      this.track.set(slide.staticCoord);
+      this.track.set(slide.magnets[0]);
     }
 
     // Emit callbacks
@@ -337,18 +349,24 @@ export class Snap<
       return;
     }
 
-    const { track, props } = this;
+    const { _swipe: swipe, track, props } = this;
 
     // Update values
     this._updateSlidesCoords();
     this._updateSlidesProgress();
 
     // Get magnet after slide coordinates are updated
-    const { magnet, _swipe: swipe } = this;
+    const { magnet } = this;
 
     // Active index change
-    if (magnet && magnet.slide.index !== this._activeIndex) {
+    if (
+      magnet &&
+      magnet.slide.index !== this._activeIndex &&
+      (typeof this._targetIndex === 'undefined' ||
+        magnet.slide.index === this._targetIndex)
+    ) {
       this._activeIndex = magnet.slide.index;
+      this._targetIndex = undefined;
       this.callbacks.emit('activeSlide', this.activeSlide);
     }
 
@@ -452,10 +470,8 @@ export class Snap<
       return undefined;
     }
 
-    const magnet = magnets.reduce((prev, curr) =>
-      Math.abs(curr.magnet - current) < Math.abs(prev.magnet - current)
-        ? curr
-        : prev,
+    const magnet = magnets.reduce((p, c) =>
+      Math.abs(c.magnet - current) < Math.abs(p.magnet - current) ? c : p,
     );
 
     return {
@@ -518,12 +534,20 @@ export class Snap<
       this._timeline = undefined;
     });
 
+    tm.on('destroy', () => {
+      this._targetIndex = undefined;
+    });
+
     tm.play();
   }
 
   /** Go to a slide by index */
-  public toSlide(targetIndex: number, duration = this.props.duration) {
-    const { isEmpty, activeIndex, slides, track } = this;
+  public toSlide(
+    targetIndex: number,
+    { direction = null, duration = this.props.duration }: ISnapToSlideArg = {},
+  ) {
+    const { isEmpty, activeIndex, slides, track, props } = this;
+    const { current, max, loopCount } = track;
 
     if (isEmpty) {
       return;
@@ -531,42 +555,75 @@ export class Snap<
 
     const index = loop(targetIndex, 0, this.slides.length);
 
+    // Stick if the same slide
+
     if (index === activeIndex) {
       this.stick();
 
       return;
     }
 
+    this._targetIndex = index;
+
+    // Get nearest magnet
+
     const slideMagnets = slides[index].magnets;
-    const current = track.loopedCurrent;
+    const targetMagnet = slideMagnets[0] + loopCount * max;
 
-    const magnet = slideMagnets.reduce((prev, curr) =>
-      Math.abs(curr - current) < Math.abs(prev - current) ? curr : prev,
-    );
+    // Use static magnet when not looping
+
+    if (!props.loop) {
+      this.toCoord(targetMagnet, duration);
+
+      return;
+    }
+
+    // Or calculate closest magnet
 
-    this.toCoord(this.track.current + (magnet - track.loopedCurrent), duration);
+    const targetMagnetMin = targetMagnet - max;
+    const targetMagnetMax = targetMagnet + max;
+    const allMagnets = [targetMagnetMin, targetMagnet, targetMagnetMax];
+
+    if (typeof direction === 'string') {
+      const magnets = allMagnets.filter((magnet) =>
+        direction === 'next' ? magnet >= current : magnet <= current,
+      );
+      const magnet = closest(current, magnets);
+
+      this.toCoord(magnet, duration);
+    } else {
+      const magnet = closest(current, allMagnets);
+
+      this.toCoord(magnet, duration);
+    }
   }
 
   /** Go to next slide */
-  public next(duration = this.props.duration) {
+  public next({
+    duration = this.props.duration,
+    skip = 1,
+  }: ISnapNexPrevArg = {}) {
     const { props, slides, activeIndex } = this;
 
     const index = props.loop
-      ? loop(activeIndex + 1, 0, slides.length)
-      : Math.min(activeIndex + 1, slides.length - 1);
+      ? loop(activeIndex + skip, 0, slides.length)
+      : Math.min(activeIndex + skip, slides.length - 1);
 
-    this.toSlide(index, duration);
+    this.toSlide(index, { duration, direction: 'next' });
   }
 
   /** Go to previous slide */
-  public prev(duration = this.props.duration) {
+  public prev({
+    duration = this.props.duration,
+    skip = 1,
+  }: ISnapNexPrevArg = {}) {
     const { props, slides, activeIndex } = this;
 
     const index = props.loop
-      ? loop(activeIndex - 1, 0, slides.length)
-      : Math.max(activeIndex - 1, 0);
+      ? loop(activeIndex - skip, 0, slides.length)
+      : Math.max(activeIndex - skip, 0);
 
-    this.toSlide(index, duration);
+    this.toSlide(index, { duration, direction: 'prev' });
   }
 
   /**

package/src/components/Snap/types.ts

@@ -13,8 +13,12 @@ import { ISnapSlideProps } from './Slide/types';
 
 /** Static properties for the Snap component */
 export interface ISnapStaticProps extends IModuleStaticProps {
-  /** HTML container element where listeners are attached */
+  /** HTML container  */
   container: HTMLElement;
+  /** HTML Element used to emit events
+   * @default null
+   */
+  eventsEmitter?: HTMLElement | null;
   /**
    * Default active index
    * @default 0
@@ -171,3 +175,13 @@ export interface ISnapMagnet {
   /** Difference with current coordinate */
   diff: number;
 }
+
+export interface ISnapNexPrevArg {
+  duration?: TSnapDuration;
+  skip?: number;
+}
+
+export interface ISnapToSlideArg {
+  direction?: 'next' | 'prev' | null;
+  duration?: TSnapDuration;
+}

package/src/utils/common/closest.ts

@@ -0,0 +1,11 @@
+/**
+ * Get closest value in array to target value.
+ *
+ * @example
+ * closest(5, [3, 6, 9, 12, 15]); // => 6
+ */
+export function closest(target: number, values: number[]) {
+  return values.reduce((prev, curr) =>
+    Math.abs(curr - target) < Math.abs(prev - target) ? curr : prev,
+  );
+}

package/src/utils/common/index.ts

@@ -1,2 +1,3 @@
-export * from './uid';
+export * from './closest';
 export * from './toPixels';
+export * from './uid';

package/src/version.ts

@@ -1,2 +1,2 @@
-const version = '5.0.3';
+const version = '5.0.5';
 export default version;