Simplify the "shift" condition.

NaotoshiFujita · NaotoshiFujita · commit 40ad465129b2 · 2022-05-28T18:00:56.000+09:00
diff --git a/dist/js/splide.cjs.js b/dist/js/splide.cjs.js
@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 4.0.5
+ * Version  : 4.0.6
  * License  : MIT
  * Copyright: 2022 Naotoshi Fujita
  */
@@ -1427,16 +1427,9 @@ function Move(Splide2, Components2, options) {
   }
 
   function move(dest, index, prev, callback) {
-    var position = getPosition();
-    var shifted = shift(position, dest > prev);
-    var oriented = orient(shifted);
-    var destination = toPosition(dest);
-    var shouldShift = dest !== index || abs(shifted - destination) < abs(position - destination);
-    var canShift = dest > prev ? oriented >= 0 : oriented <= list[resolve("scrollWidth")] - rect(track)[resolve("width")];
-
-    if (shouldShift && canShift) {
+    if (dest !== index && canShift(dest > prev)) {
       cancel();
-      translate(shifted, true);
+      translate(shift(getPosition(), dest > prev), true);
     }
 
     set(MOVING);
@@ -1462,9 +1455,9 @@ function Move(Splide2, Components2, options) {
 
   function loop(position) {
     if (Splide2.is(LOOP)) {
-      var diff = orient(position - getPosition());
-      var exceededMin = exceededLimit(false, position) && diff < 0;
-      var exceededMax = exceededLimit(true, position) && diff > 0;
+      var index = toIndex(position);
+      var exceededMax = index > Components2.Controller.getEnd();
+      var exceededMin = index < 0;
 
       if (exceededMin || exceededMax) {
         position = shift(position, exceededMax);
@@ -1533,6 +1526,11 @@ function Move(Splide2, Components2, options) {
     return toPosition(max ? Components2.Controller.getEnd() : 0, !!options.trimSpace);
   }
 
+  function canShift(backwards) {
+    var shifted = orient(shift(getPosition(), backwards));
+    return backwards ? shifted >= 0 : shifted <= list[resolve("scrollWidth")] - rect(track)[resolve("width")];
+  }
+
   function exceededLimit(max, position) {
     position = isUndefined(position) ? getPosition() : position;
     var exceededMin = max !== true && orient(position) < orient(getLimit(false));
diff --git a/dist/js/splide.esm.js b/dist/js/splide.esm.js
@@ -4,7 +4,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 /*!
  * Splide.js
- * Version  : 4.0.5
+ * Version  : 4.0.6
  * License  : MIT
  * Copyright: 2022 Naotoshi Fujita
  */
@@ -1422,16 +1422,9 @@ function Move(Splide2, Components2, options) {
   }
 
   function move(dest, index, prev, callback) {
-    var position = getPosition();
-    var shifted = shift(position, dest > prev);
-    var oriented = orient(shifted);
-    var destination = toPosition(dest);
-    var shouldShift = dest !== index || abs(shifted - destination) < abs(position - destination);
-    var canShift = dest > prev ? oriented >= 0 : oriented <= list[resolve("scrollWidth")] - rect(track)[resolve("width")];
-
-    if (shouldShift && canShift) {
+    if (dest !== index && canShift(dest > prev)) {
       cancel();
-      translate(shifted, true);
+      translate(shift(getPosition(), dest > prev), true);
     }
 
     set(MOVING);
@@ -1457,9 +1450,9 @@ function Move(Splide2, Components2, options) {
 
   function loop(position) {
     if (Splide2.is(LOOP)) {
-      var diff = orient(position - getPosition());
-      var exceededMin = exceededLimit(false, position) && diff < 0;
-      var exceededMax = exceededLimit(true, position) && diff > 0;
+      var index = toIndex(position);
+      var exceededMax = index > Components2.Controller.getEnd();
+      var exceededMin = index < 0;
 
       if (exceededMin || exceededMax) {
         position = shift(position, exceededMax);
@@ -1528,6 +1521,11 @@ function Move(Splide2, Components2, options) {
     return toPosition(max ? Components2.Controller.getEnd() : 0, !!options.trimSpace);
   }
 
+  function canShift(backwards) {
+    var shifted = orient(shift(getPosition(), backwards));
+    return backwards ? shifted >= 0 : shifted <= list[resolve("scrollWidth")] - rect(track)[resolve("width")];
+  }
+
   function exceededLimit(max, position) {
     position = isUndefined(position) ? getPosition() : position;
     var exceededMin = max !== true && orient(position) < orient(getLimit(false));
diff --git a/dist/js/splide.js b/dist/js/splide.js
@@ -4,7 +4,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 /*!
  * Splide.js
- * Version  : 4.0.5
+ * Version  : 4.0.6
  * License  : MIT
  * Copyright: 2022 Naotoshi Fujita
  */
@@ -1420,16 +1420,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     }
 
     function move(dest, index, prev, callback) {
-      var position = getPosition();
-      var shifted = shift(position, dest > prev);
-      var oriented = orient(shifted);
-      var destination = toPosition(dest);
-      var shouldShift = dest !== index || abs(shifted - destination) < abs(position - destination);
-      var canShift = dest > prev ? oriented >= 0 : oriented <= list[resolve("scrollWidth")] - rect(track)[resolve("width")];
-
-      if (shouldShift && canShift) {
+      if (dest !== index && canShift(dest > prev)) {
         cancel();
-        translate(shifted, true);
+        translate(shift(getPosition(), dest > prev), true);
       }
 
       set(MOVING);
@@ -1455,9 +1448,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
     function loop(position) {
       if (Splide2.is(LOOP)) {
-        var diff = orient(position - getPosition());
-        var exceededMin = exceededLimit(false, position) && diff < 0;
-        var exceededMax = exceededLimit(true, position) && diff > 0;
+        var index = toIndex(position);
+        var exceededMax = index > Components2.Controller.getEnd();
+        var exceededMin = index < 0;
 
         if (exceededMin || exceededMax) {
           position = shift(position, exceededMax);
@@ -1526,6 +1519,11 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       return toPosition(max ? Components2.Controller.getEnd() : 0, !!options.trimSpace);
     }
 
+    function canShift(backwards) {
+      var shifted = orient(shift(getPosition(), backwards));
+      return backwards ? shifted >= 0 : shifted <= list[resolve("scrollWidth")] - rect(track)[resolve("width")];
+    }
+
     function exceededLimit(max, position) {
       position = isUndefined(position) ? getPosition() : position;
       var exceededMin = max !== true && orient(position) < orient(getLimit(false));
diff --git a/dist/js/splide.min.js b/dist/js/splide.min.js
diff --git a/dist/js/splide.min.js.gz b/dist/js/splide.min.js.gz
diff --git a/dist/js/splide.min.js.map b/dist/js/splide.min.js.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "4.0.5",
+  "version": "4.0.6",
   "description": "Splide is a lightweight, flexible and accessible slider/carousel. No dependencies, no Lighthouse errors.",
   "author": "Naotoshi Fujita",
   "license": "MIT",
diff --git a/src/js/components/Autoplay/test/event.test.ts b/src/js/components/Autoplay/test/event.test.ts
@@ -67,6 +67,6 @@ describe( 'Autoplay', () => {
 
     // Around 2000ms
     await wait( 400 + 50 );
-    expect( progressRate ).toBeLessThan( 0.1 );
+    expect( progressRate ).toBeLessThan( 0.15 );
   } );
 } );
diff --git a/src/js/components/Move/Move.ts b/src/js/components/Move/Move.ts
@@ -90,19 +90,9 @@ export function Move( Splide: Splide, Components: Components, options: Options )
    * @param callback - Optional. A callback function invoked after transition ends.
    */
   function move( dest: number, index: number, prev: number, callback?: AnyFunction ): void {
-    const position    = getPosition();
-    const shifted     = shift( position, dest > prev );
-    const oriented    = orient( shifted );
-    const destination = toPosition( dest );
-    const shouldShift = dest !== index || abs( shifted - destination ) < abs( position - destination );
-
-    const canShift = dest > prev
-      ? oriented >= 0
-      : oriented <= list[ resolve( 'scrollWidth' ) ] - rect( track )[ resolve( 'width' ) ];
-
-    if ( shouldShift && canShift ) {
+    if ( dest !== index && canShift( dest > prev ) ) {
       cancel();
-      translate( shifted, true );
+      translate( shift( getPosition(), dest > prev ), true );
     }
 
     set( MOVING );
@@ -139,15 +129,15 @@ export function Move( Splide: Splide, Components: Components, options: Options )
   }
 
   /**
-   * Loops the provided position if it exceeds bounds.
+   * Loops the provided position if it exceeds bounds (limit indices).
    *
    * @param position - A position to loop.
    */
   function loop( position: number ): number {
     if ( Splide.is( LOOP ) ) {
-      const diff        = orient( position - getPosition() );
-      const exceededMin = exceededLimit( false, position ) && diff < 0;
-      const exceededMax = exceededLimit( true, position ) && diff > 0;
+      const index       = toIndex( position );
+      const exceededMax = index > Components.Controller.getEnd();
+      const exceededMin = index < 0;
 
       if ( exceededMin || exceededMax ) {
         position = shift( position, exceededMax );
@@ -267,6 +257,20 @@ export function Move( Splide: Splide, Components: Components, options: Options )
     return toPosition( max ? Components.Controller.getEnd() : 0, !! options.trimSpace );
   }
 
+  /**
+   * Checks if there is enough width to shift the slider.
+   *
+   * @param backwards - `true` for checking backwards, or `false` for doing forwards.
+   *
+   * @return `true` if the slider can be shifted for the specified direction, or otherwise `false`.
+   */
+  function canShift( backwards: boolean ): boolean {
+    const shifted = orient( shift( getPosition(), backwards ) );
+    return backwards
+      ? shifted >= 0
+      : shifted <= list[ resolve( 'scrollWidth' ) ] - rect( track )[ resolve( 'width' ) ];
+  }
+
   /**
    * Checks if the provided position exceeds the minimum or maximum limit or not.
    *
diff --git a/src/js/components/Move/test/general.test.ts b/src/js/components/Move/test/general.test.ts
@@ -1,4 +1,4 @@
-import { init } from '../../../test';
+import { init, setSlidesRect } from '../../../test';
 
 
 describe( 'Move', () => {
@@ -31,12 +31,15 @@ describe( 'Move', () => {
   } );
 
   test( 'can loop the slider if it exceeds bounds.', () => {
-    // Note: All clones do not have dimensions.
     const width    = 200;
     const splide   = init( { type: 'loop', width, height: 100 } );
     const { Move } = splide.Components;
     const { list } = splide.Components.Elements;
 
+    // All clones do not have dimensions in this jest env. Forcibly sets them.
+    setSlidesRect( splide.Components.Slides.get().map( Slide => Slide.slide ), list, width, 1 );
+    Move.jump( 0 );
+
     Move.translate( width );
     expect( list.style.transform ).toBe( `translateX(${ -width * ( splide.length - 1 ) }px)` );
 
diff --git a/src/js/test/utils/utils.ts b/src/js/test/utils/utils.ts
@@ -12,6 +12,18 @@ interface InitArgs extends BuildHtmlArgs {
   insertHtml?: boolean;
 }
 
+const DOM_RECT = {
+  x     : 0,
+  y     : 0,
+  width : 0,
+  height: 0,
+  top   : 0,
+  right : 0,
+  bottom: 0,
+  left  : 0,
+  toJSON: () => '',
+};
+
 /**
  * Creates a new splide instance.
  *
@@ -56,48 +68,25 @@ export function init( options: Options = {}, args: InitArgs = {} ): Splide {
 
   const root   = id ? document.getElementById( id ) : document.querySelector( `.${ CLASS_ROOT }` );
   const track  = root.querySelector( `.${ CLASS_TRACK }` );
-  const list   = root.querySelector( `.${ CLASS_LIST }` );
-  const slides = root.querySelectorAll( `.${ CLASS_SLIDE }` );
-
-  const domRect = {
-    x     : 0,
-    y     : 0,
-    width : 0,
-    height: 0,
-    top   : 0,
-    right : 0,
-    bottom: 0,
-    left  : 0,
-    toJSON: () => '',
-  };
+  const list   = root.querySelector<HTMLElement>( `.${ CLASS_LIST }` );
+  const slides = root.querySelectorAll<HTMLElement>( `.${ CLASS_SLIDE }` );
 
   root.getBoundingClientRect = (): DOMRect => {
-    return assign( {}, domRect, { width: +width } );
+    return assign( {}, DOM_RECT, { width: +width } );
   };
 
   track.getBoundingClientRect = (): DOMRect => {
-    return assign( {}, domRect, { width: +width, right: +width } );
+    return assign( {}, DOM_RECT, { width: +width, right: +width } );
   };
 
   list.getBoundingClientRect = (): DOMRect => {
-    return assign( {}, domRect, {
+    return assign( {}, DOM_RECT, {
       width: +width,
-      ...parseTransform( list as HTMLElement ),
+      ...parseTransform( list ),
     } );
   };
 
-  slides.forEach( ( slide, index ) => {
-    slide.getBoundingClientRect = (): DOMRect => {
-      const offsets = parseTransform( list as HTMLElement );
-
-      return assign( {}, domRect, {
-        width : slideWidth,
-        height: slideHeight,
-        left  : slideWidth * index + offsets.left,
-        right : slideWidth * index + slideWidth + offsets.left,
-      } );
-    };
-  } );
+  setSlidesRect( Array.from( slides ), list, slideWidth, slideHeight );
 
   const splide = new Splide( root as HTMLElement, options );
 
@@ -109,7 +98,30 @@ export function init( options: Options = {}, args: InitArgs = {} ): Splide {
 }
 
 /**
- * Converts translate values to positions.
+ * Forcibly sets dimensions of provided slides.
+ *
+ * @param slides - An array with slides.
+ * @param list   - A List element.
+ * @param width  - Width of each slide.
+ * @param height - Height of each slide.
+ */
+export function setSlidesRect( slides: HTMLElement[], list: HTMLElement, width: number, height: number ): void {
+  slides.forEach( ( slide, index ) => {
+    slide.getBoundingClientRect = (): DOMRect => {
+      const offsets = parseTransform( list );
+
+      return assign( {}, DOM_RECT, {
+        width : width,
+        height: height,
+        left  : width * index + offsets.left,
+        right : width * index + width + offsets.left,
+      } );
+    };
+  } );
+}
+
+/**
+ * Converts translate values to position.
  *
  * @param elm - An element to parse.
  *

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@splidejs/splide",`
`3`		`- "version": "4.0.5",`
	`3`	`+ "version": "4.0.6",`
`4`	`4`	`"description": "Splide is a lightweight, flexible and accessible slider/carousel. No dependencies, no Lighthouse errors.",`
`5`	`5`	`"author": "Naotoshi Fujita",`
`6`	`6`	`"license": "MIT",`