Simplify the "move" logic with a new "jump" indicator.

dist/js/splide.js

@@ -1184,13 +1184,11 @@
         Slides.update();
       }
     }
-    function move(dest, index, prev, callback) {
-      const forwards = dest > prev;
-      const closest = toIndex(getPosition());
-      const detouring = exceededLimit(forwards) && abs(dest - closest) > abs(dest - prev);
+    function move(dest, index, prev, forwards, callback) {
       cancel();
-      if ((dest !== index || detouring) && canShift(forwards)) {
-        translate(shift(getPosition(), forwards), true);
+      const shiftBackwards = dest !== index ? dest > index : forwards;
+      if ((dest !== index || exceededLimit(forwards)) && canShift(shiftBackwards)) {
+        translate(shift(getPosition(), shiftBackwards), true);
       }
       indices = [index, prev, dest];
       set(MOVING);
@@ -1357,12 +1355,12 @@
     }
     function go(control, callback) {
       if (!isBusy()) {
-        const dest = parse(control);
+        const [dest, forwards] = parse(control);
         const index = loop(dest);
         if (canGo(dest, index)) {
           Scroll.cancel();
           setIndex(index);
-          Move.move(dest, index, prevIndex, callback);
+          Move.move(dest, index, prevIndex, forwards, callback);
         }
       }
     }
@@ -1385,22 +1383,23 @@
       });
     }
     function parse(control) {
-      let index = currIndex;
+      let dest = currIndex;
+      let forwards = true;
       if (isString(control)) {
-        const [, indicator, number] = control.match(/([+\-<>]\|?)(\d+)?/) || [];
-        if (indicator === "+" || indicator === "-") {
-          index = computeDestIndex(currIndex + +`${indicator}${+number || 1}`, currIndex);
-        } else if (indicator === ">") {
-          index = number ? toIndex(+number) : getNext(true);
-        } else if (indicator === "<") {
-          index = getPrev(true);
-        } else if (indicator === ">|") {
-          index = endIndex;
+        const [, indicator, number] = control.match(/([+-]|>>?|<<?)(-?\d+)?/) || [];
+        const oneOf = (...indicators) => includes(indicators, indicator);
+        forwards = oneOf("+", ">", ">>");
+        if (oneOf("+", "-")) {
+          dest = computeDestIndex(currIndex + +`${indicator}${+number || 1}`, currIndex);
+        } else if (oneOf(">", "<")) {
+          dest = number ? toIndex(+number) : getAdjacent(!forwards, true);
+        } else if (oneOf(">>", "<<")) {
+          dest = number ? +number || 0 : forwards ? endIndex : 0;
         }
       } else {
-        index = isLoop ? control : clamp(control, 0, endIndex);
+        dest = isLoop ? control : clamp(control, 0, endIndex);
       }
-      return index;
+      return [dest, forwards];
     }
     function getAdjacent(prev, destination) {
       const number = perMove || (hasFocus() ? 1 : perPage);
@@ -1778,6 +1777,7 @@
     const { Move, Scroll, Controller, Elements: { track }, Breakpoints: { reduce } } = Components;
     const { resolve, orient } = Components.Direction;
     const { getPosition, exceededLimit } = Move;
+    let startCoord;
     let basePosition;
     let baseEvent;
     let prevBaseEvent;
@@ -1809,6 +1809,7 @@
             target = isTouch ? track : window;
             dragging = state.is([MOVING, SCROLLING]);
             prevBaseEvent = null;
+            startCoord = coordOf(e);
             binder.bind(target, POINTER_MOVE_EVENTS, onPointerMove, SCROLL_LISTENER_OPTIONS);
             binder.bind(target, POINTER_UP_EVENTS, onPointerUp, SCROLL_LISTENER_OPTIONS);
             Move.cancel();
@@ -1869,20 +1870,22 @@
       basePosition = getPosition();
     }
     function move(e) {
+      const { go } = Controller;
       const { updateOnDragged = true } = options;
       const velocity = computeVelocity(e);
       const destination = computeDestination(velocity);
+      const forwards = orient(coordOf(e) - startCoord) > 0;
       const rewind = options.rewind && options.rewindByDrag;
       const scroll = updateOnDragged ? Controller.scroll : Scroll.scroll;
       reduce(false);
       if (isFree) {
         scroll(destination, void 0, options.snap);
       } else if (Splide.is(FADE)) {
-        Controller.go(orient(sign(velocity)) < 0 ? rewind ? "<" : "-" : rewind ? ">" : "+");
+        go(forwards ? rewind ? ">" : "+" : rewind ? "<" : "-");
       } else if (Splide.is(SLIDE) && exceeded && rewind) {
-        Controller.go(exceededLimit(true) ? ">" : "<");
+        go(exceededLimit(true) ? ">" : "<");
       } else {
-        Controller.go(Controller.toDest(destination));
+        go(`${forwards ? ">>" : "<<"}${Controller.toDest(destination)}`);
       }
       reduce(true);
     }

src/js/components/Controller/Controller.ts

@@ -2,7 +2,17 @@ import { EVENT_END_INDEX_CHANGED, EVENT_REFRESH, EVENT_RESIZED, EVENT_UPDATED }
 import { MOVING, SCROLLING } from '../../constants/states';
 import { LOOP, SLIDE } from '../../constants/types';
 import { AnyFunction, BaseComponent, ComponentConstructor } from '../../types';
-import { apply, approximatelyEqual, between, clamp, floor, isString, isUndefined, min } from '@splidejs/utils';
+import {
+  apply,
+  approximatelyEqual,
+  between,
+  clamp,
+  floor,
+  includes,
+  isString,
+  isUndefined,
+  min,
+} from '@splidejs/utils';
 
 
 /**
@@ -133,13 +143,13 @@ export const Controller: ComponentConstructor<ControllerComponent> = ( Splide, C
    */
   function go( control: number | string, callback?: AnyFunction ): void {
     if ( ! isBusy() ) {
-      const dest  = parse( control );
+      const [ dest, forwards ] = parse( control );
       const index = loop( dest );
 
       if ( canGo( dest, index ) ) {
         Scroll.cancel();
         setIndex( index );
-        Move.move( dest, index, prevIndex, callback );
+        Move.move( dest, index, prevIndex, forwards, callback );
       }
     }
   }
@@ -197,32 +207,34 @@ export const Controller: ComponentConstructor<ControllerComponent> = ( Splide, C
   }
 
   /**
-   * Parses the control and returns a slide index.
+   * Parses the control and returns a dest index.
    *
    * @param control - A control pattern to parse.
    *
    * @return A `dest` index.
    */
-  function parse( control: number | string ): number {
-    let index = currIndex;
+  function parse( control: number | string ): [ number, boolean ] {
+    let dest     = currIndex;
+    let forwards = true;
 
     if ( isString( control ) ) {
-      const [ , indicator, number ] = control.match( /([+\-<>]\|?)(\d+)?/ ) || [];
-
-      if ( indicator === '+' || indicator === '-' ) {
-        index = computeDestIndex( currIndex + +`${ indicator }${ +number || 1 }`, currIndex );
-      } else if ( indicator === '>' ) {
-        index = number ? toIndex( +number ) : getNext( true );
-      } else if ( indicator === '<' ) {
-        index = getPrev( true );
-      } else if ( indicator === '>|' ) {
-        index = endIndex;
+      const [ , indicator, number ] = control.match( /([+-]|>>?|<<?)(-?\d+)?/ ) || [];
+      const oneOf = ( ...indicators: string[] ) => includes( indicators, indicator );
+
+      forwards = oneOf( '+', '>', '>>' );
+
+      if ( oneOf( '+', '-' ) ) {
+        dest = computeDestIndex( currIndex + +`${ indicator }${ +number || 1 }`, currIndex );
+      } else if ( oneOf( '>', '<' ) ) {
+        dest = number ? toIndex( +number ) : getAdjacent( ! forwards, true );
+      } else if ( oneOf( '>>', '<<' ) ) {
+        dest = number ? +number || 0 : forwards ? endIndex : 0;
       }
     } else {
-      index = isLoop ? control : clamp( control, 0, endIndex );
+      dest = isLoop ? control : clamp( control, 0, endIndex );
     }
 
-    return index;
+    return [ dest, forwards ];
   }
 
   /**

src/js/components/Controller/test/slide.test.ts

@@ -119,7 +119,7 @@ describe( 'Controller#go()', () => {
   test( 'can move the slider to the end page.', () => {
     const splide = init( { speed: 0 } );
 
-    splide.go( '>|' );
+    splide.go( '>>' );
     expect( splide.index ).toBe( splide.length - 1 );
   } );
 } );

src/js/components/Drag/Drag.ts

@@ -38,6 +38,11 @@ export const Drag: ComponentConstructor<DragComponent> = ( Splide, Components, o
   const { resolve, orient } = Components.Direction;
   const { getPosition, exceededLimit } = Move;
 
+  /**
+   * The position where the pointer gets active.
+   */
+  let startCoord: number;
+
   /**
    * The base slider position to calculate the delta of coords.
    */
@@ -124,6 +129,7 @@ export const Drag: ComponentConstructor<DragComponent> = ( Splide, Components, o
           target        = isTouch ? track : window;
           dragging      = state.is( [ MOVING, SCROLLING ] );
           prevBaseEvent = null;
+          startCoord    = coordOf( e );
 
           binder.bind( target, POINTER_MOVE_EVENTS, onPointerMove, SCROLL_LISTENER_OPTIONS );
           binder.bind( target, POINTER_UP_EVENTS, onPointerUp, SCROLL_LISTENER_OPTIONS );
@@ -228,9 +234,11 @@ export const Drag: ComponentConstructor<DragComponent> = ( Splide, Components, o
    * @param e - A TouchEvent or MouseEvent object.
    */
   function move( e: TouchEvent | MouseEvent ): void {
+    const { go } = Controller;
     const { updateOnDragged = true } = options;
     const velocity    = computeVelocity( e );
     const destination = computeDestination( velocity );
+    const forwards    = orient( coordOf( e ) - startCoord ) > 0;
     const rewind      = options.rewind && options.rewindByDrag;
     const scroll      = updateOnDragged ? Controller.scroll : Scroll.scroll;
 
@@ -239,11 +247,11 @@ export const Drag: ComponentConstructor<DragComponent> = ( Splide, Components, o
     if ( isFree ) {
       scroll( destination, undefined, options.snap );
     } else if ( Splide.is( FADE ) ) {
-      Controller.go( orient( sign( velocity ) ) < 0 ? ( rewind ? '<' : '-' ) : ( rewind ? '>' : '+' ) );
+      go( forwards ? ( rewind ? '>' : '+' ) : ( rewind ? '<' : '-' ) );
     } else if ( Splide.is( SLIDE ) && exceeded && rewind ) {
-      Controller.go( exceededLimit( true ) ? '>' : '<' );
+      go( exceededLimit( true ) ? '>' : '<' ); // todo
     } else {
-      Controller.go( Controller.toDest( destination ) );
+      go( `${ forwards ? '>>' : '<<' }${ Controller.toDest( destination ) }` );
     }
 
     reduce( true );

src/js/components/Move/Move.ts

@@ -19,7 +19,7 @@ import { abs, ceil, clamp, isUndefined, rect, style } from '@splidejs/utils';
  * @since 3.0.0
  */
 export interface MoveComponent extends BaseComponent {
-  move( dest: number, index: number, prev: number, callback?: AnyFunction ): void;
+  move( dest: number, index: number, prev: number, forwards: boolean, callback?: AnyFunction ): void;
   jump( index: number ): void;
   translate( position: number, preventLoop?: boolean ): void;
   shift( position: number, backwards: boolean ): number;
@@ -100,15 +100,13 @@ export const Move: ComponentConstructor<MoveComponent> = ( Splide, Components, o
    * @param prev     - A previous index.
    * @param callback - Optional. A callback function invoked after transition ends.
    */
-  function move( dest: number, index: number, prev: number, callback?: AnyFunction ): void {
-    const forwards  = dest > prev;
-    const closest   = toIndex( getPosition() );
-    const detouring = exceededLimit( forwards ) && ( abs( dest - closest ) > abs( dest - prev ) );
-
+  function move( dest: number, index: number, prev: number, forwards: boolean, callback?: AnyFunction ): void {
     cancel();
 
-    if ( ( dest !== index || detouring ) && canShift( forwards ) ) {
-      translate( shift( getPosition(), forwards  ), true );
+    const shiftBackwards = dest !== index ? dest > index : forwards;
+
+    if ( ( dest !== index || exceededLimit( forwards ) ) && canShift( shiftBackwards ) ) {
+      translate( shift( getPosition(), shiftBackwards ), true );
     }
 
     indices = [ index, prev, dest ];
@@ -177,10 +175,10 @@ export const Move: ComponentConstructor<MoveComponent> = ( Splide, Components, o
   }
 
   /**
-   * Adds or subtracts the slider width to the provided position.
+   * Adds or subtracts the carousel width to the provided position.
    *
    * @param position  - A position to shift.
-   * @param backwards - Determines whether to shift the slider backwards or forwards.
+   * @param backwards - Determines whether to shift the carousel backwards or forwards.
    *
    * @return The shifted position.
    */