Refactoring. Add the `reducedMotion` option.

dist/js/splide.js

@@ -595,10 +595,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       }).map(function (key) {
         return [breakpoints[key], "(" + (isMin ? "min" : "max") + "-width:" + key + "px)"];
       }));
-      register([[{
-        speed: 0,
-        autoplay: "pause"
-      }, "(prefers-reduced-motion: reduce)"]]);
+      register([[options.reducedMotion, "(prefers-reduced-motion: reduce)"]]);
       update();
     }
 
@@ -618,11 +615,11 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
     function update() {
       var options2 = accumulate();
-      var _destroy = options2.destroy;
+      var destruction = options2.destroy;
 
-      if (_destroy) {
+      if (destruction) {
         Splide2.options = initialOptions;
-        Splide2.destroy(_destroy === "completely");
+        Splide2.destroy(destruction === "completely");
       } else if (Splide2.state.is(DESTROYED)) {
         destroy(true);
         Splide2.mount();
@@ -1586,7 +1583,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
         if (index > -1 && (allowSameIndex || index !== currIndex)) {
           setIndex(index);
-          options.useScroll ? scrollTo(dest, options.speed, callback) : Move.move(dest, index, prevIndex, callback);
+          Move.move(dest, index, prevIndex, callback);
         }
       }
     }
@@ -1598,10 +1595,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       });
     }
 
-    function scrollTo(index, duration, callback) {
-      scroll(toPosition(index, true), duration, false, callback);
-    }
-
     function parse(control) {
       var index = currIndex;
 
@@ -1721,7 +1714,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       mount: mount,
       go: go,
       scroll: scroll,
-      scrollTo: scrollTo,
       getNext: getNext,
       getPrev: getPrev,
       getAdjacent: getAdjacent,
@@ -2023,8 +2015,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         destination = Move.toPosition(Components2.Controller.toDest(destination % size)) + offset;
       }
 
+      var noDistance = approximatelyEqual(from, destination, 1);
       friction = 1;
-      duration = duration || max(abs(destination - from) / BASE_VELOCITY, MIN_DURATION);
+      duration = noDistance ? 0 : duration || max(abs(destination - from) / BASE_VELOCITY, MIN_DURATION);
       callback = onScrolled;
       interval = RequestInterval(duration, onEnd, apply(update, from, destination, noConstrain), 1);
       set(SCROLLING);
@@ -2844,7 +2837,11 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     focusableNodes: "a, button, textarea, input, select, iframe",
     live: true,
     classes: CLASSES,
-    i18n: I18N
+    i18n: I18N,
+    reducedMotion: {
+      speed: 0,
+      autoplay: "pause"
+    }
   };
 
   function Fade(Splide2, Components2, options) {
@@ -2880,8 +2877,10 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         bind = _EventInterface16.bind;
 
     var Move = Components2.Move,
-        Controller = Components2.Controller;
+        Controller = Components2.Controller,
+        Scroll = Components2.Scroll;
     var list = Components2.Elements.list;
+    var transition = apply(style, list, "transition");
     var endCallback;
 
     function mount() {
@@ -2899,9 +2898,13 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       var speed = getSpeed(index);
 
       if (abs(destination - position) >= 1 && speed >= 1) {
-        apply("transform " + speed + "ms " + options.easing);
-        Move.translate(destination, true);
-        endCallback = done;
+        if (options.useScroll) {
+          Scroll.scroll(destination, speed, false, done);
+        } else {
+          transition("transform " + speed + "ms " + options.easing);
+          Move.translate(destination, true);
+          endCallback = done;
+        }
       } else {
         Move.jump(index);
         done();
@@ -2909,7 +2912,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     }
 
     function cancel() {
-      apply("");
+      transition("");
+      Scroll.cancel();
     }
 
     function getSpeed(index) {
@@ -2927,10 +2931,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       return options.speed;
     }
 
-    function apply(transition) {
-      style(list, "transition", transition);
-    }
-
     return {
       mount: mount,
       start: start,

src/js/components/Controller/Controller.ts

@@ -14,7 +14,7 @@ import { apply, approximatelyEqual, between, clamp, floor, isString, isUndefined
  */
 export interface ControllerComponent extends BaseComponent {
   go( control: number | string, allowSameIndex?: boolean, callback?: AnyFunction ): void;
-  scrollTo( index: number, duration?: number, callback?: AnyFunction ): void;
+  // scrollTo( index: number, duration?: number, callback?: AnyFunction ): void;
   scroll( destination: number, duration?: number, snap?: boolean, callback?: AnyFunction ): void;
   getNext( destination?: boolean ): number;
   getPrev( destination?: boolean ): number;
@@ -117,7 +117,7 @@ export function Controller( Splide: Splide, Components: Components, options: Opt
 
       if ( index > -1 && ( allowSameIndex || index !== currIndex ) ) {
         setIndex( index );
-        options.useScroll ? scrollTo( dest, options.speed, callback ) : Move.move( dest, index, prevIndex, callback );
+        Move.move( dest, index, prevIndex, callback );
       }
     }
   }
@@ -137,16 +137,16 @@ export function Controller( Splide: Splide, Components: Components, options: Opt
     } );
   }
 
-  /**
-   * Scrolls the slider to the specified index with updating indices.
-   *
-   * @param index    - An index to scroll the slider to.
-   * @param duration - Optional. Specifies the scroll duration.
-   * @param callback - Optional. A callback function invoked after scroll ends.
-   */
-  function scrollTo( index: number, duration?: number, callback?: AnyFunction ): void {
-    scroll( toPosition( index, true ), duration, false, callback );
-  }
+  // /**
+  //  * Scrolls the slider to the specified index with updating indices.
+  //  *
+  //  * @param index    - An index to scroll the slider to.
+  //  * @param duration - Optional. Specifies the scroll duration.
+  //  * @param callback - Optional. A callback function invoked after scroll ends.
+  //  */
+  // function scrollTo( index: number, duration?: number, callback?: AnyFunction ): void {
+  //   scroll( toPosition( index, true ), duration, false, callback );
+  // }
 
   /**
    * Parses the control and returns a slide index.
@@ -245,6 +245,8 @@ export function Controller( Splide: Splide, Components: Components, options: Opt
    * Finalizes the dest index.
    * If the `trim` option is `move`, needs to find the dest index where the slider actually moves.
    *
+   * @todo
+   *
    * @param dest - A validated dest index.
    */
   function validate( dest: number ): number {
@@ -358,7 +360,7 @@ export function Controller( Splide: Splide, Components: Components, options: Opt
     mount,
     go,
     scroll,
-    scrollTo,
+    // scrollTo,
     getNext,
     getPrev,
     getAdjacent,

src/js/components/Elements/test/attributes.test.ts

@@ -1,4 +1,4 @@
-import { ALL_ATTRIBUTES, ARIA_ROLEDESCRIPTION, ROLE, TAB_INDEX } from '../../../constants/attributes';
+import { ALL_ATTRIBUTES, ARIA_ROLEDESCRIPTION, ROLE } from '../../../constants/attributes';
 import { buildHtml, init } from '../../../test';
 
 

src/js/components/Media/Media.ts

@@ -49,10 +49,7 @@ export function Media( Splide: Splide, Components: Components, options: Options
       .sort( ( n, m ) => isMin ? +m - +n : +n - +m )
       .map<[ Options, string ]>( key => [ breakpoints[ key ], `(${ isMin ? 'min' : 'max' }-width:${ key }px)` ] ) );
 
-    register( [ [ {
-      speed   : 0,
-      autoplay: 'pause',
-    }, '(prefers-reduced-motion: reduce)' ] ] );
+    register( [ [ options.reducedMotion, '(prefers-reduced-motion: reduce)' ] ] );
 
     update();
   }
@@ -86,11 +83,11 @@ export function Media( Splide: Splide, Components: Components, options: Options
    */
   function update(): void {
     const options = accumulate();
-    const { destroy: _destroy } = options;
+    const { destroy: destruction } = options;
 
-    if ( _destroy ) {
+    if ( destruction ) {
       Splide.options = initialOptions;
-      Splide.destroy( _destroy === 'completely' );
+      Splide.destroy( destruction === 'completely' );
     } else if ( Splide.state.is( DESTROYED ) ) {
       destroy( true );
       Splide.mount();

src/js/components/Scroll/Scroll.ts

@@ -4,7 +4,7 @@ import { SLIDE } from '../../constants/types';
 import { EventInterface, RequestInterval, RequestIntervalInterface } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
 import { AnyFunction, BaseComponent, Components, Options } from '../../types';
-import { abs, apply, floor, max, sign } from '../../utils';
+import { abs, apply, approximatelyEqual, floor, max, sign } from '../../utils';
 import { BASE_VELOCITY, BOUNCE_DIFF_THRESHOLD, BOUNCE_DURATION, FRICTION_FACTOR, MIN_DURATION } from './constants';
 
 
@@ -84,8 +84,10 @@ export function Scroll( Splide: Splide, Components: Components, options: Options
       destination = Move.toPosition( Components.Controller.toDest( destination % size ) ) + offset;
     }
 
+    const noDistance = approximatelyEqual( from, destination, 1 );
+
     friction = 1;
-    duration = duration || max( abs( destination - from ) / BASE_VELOCITY, MIN_DURATION );
+    duration = noDistance ? 0 : duration || max( abs( destination - from ) / BASE_VELOCITY, MIN_DURATION );
     callback = onScrolled;
     interval = RequestInterval( duration, onEnd, apply( update, from, destination, noConstrain ), 1 );
 

src/js/constants/defaults.ts

@@ -30,4 +30,8 @@ export const DEFAULTS: Options = {
   live              : true,
   classes           : CLASSES,
   i18n              : I18N,
+  reducedMotion: {
+    speed   : 0,
+    autoplay: 'pause',
+  },
 };

src/js/transitions/Slide/Slide.ts

@@ -2,7 +2,7 @@ import { SLIDE } from '../../constants/types';
 import { EventInterface } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
 import { Components, Options, TransitionComponent } from '../../types';
-import { abs, style } from '../../utils';
+import { abs, apply, style } from '../../utils';
 
 
 /**
@@ -18,8 +18,9 @@ import { abs, style } from '../../utils';
  */
 export function Slide( Splide: Splide, Components: Components, options: Options ): TransitionComponent {
   const { bind } = EventInterface( Splide );
-  const { Move, Controller } = Components;
+  const { Move, Controller, Scroll } = Components;
   const { list } = Components.Elements;
+  const transition = apply( style, list, 'transition' );
 
   /**
    * Holds the `done` callback function.
@@ -51,9 +52,13 @@ export function Slide( Splide: Splide, Components: Components, options: Options
     const speed       = getSpeed( index );
 
     if ( abs( destination - position ) >= 1 && speed >= 1 ) {
-      apply( `transform ${ speed }ms ${ options.easing }` );
-      Move.translate( destination, true );
-      endCallback = done;
+      if ( options.useScroll ) {
+        Scroll.scroll( destination, speed, false, done );
+      } else {
+        transition( `transform ${ speed }ms ${ options.easing }` );
+        Move.translate( destination, true );
+        endCallback = done;
+      }
     } else {
       Move.jump( index );
       done();
@@ -64,7 +69,8 @@ export function Slide( Splide: Splide, Components: Components, options: Options
    * Cancels the transition.
    */
   function cancel(): void {
-    apply( '' );
+    transition( '' );
+    Scroll.cancel();
   }
 
   /**
@@ -87,15 +93,6 @@ export function Slide( Splide: Splide, Components: Components, options: Options
     return options.speed;
   }
 
-  /**
-   * Applies the transition CSS property to the list element.
-   *
-   * @param transition - A transition CSS value.
-   */
-  function apply( transition: string ): void {
-    style( list, 'transition', transition );
-  }
-
   return {
     mount,
     start,

src/js/types/options.ts

@@ -207,6 +207,11 @@ export interface Options extends ResponsiveOptions {
    */
   breakpoints?: Record<string | number, ResponsiveOptions>,
 
+  /**
+   * Options used when the `(prefers-reduced-motion: reduce)` is detected.
+   */
+  reducedMotion?: Options;
+
   /**
    * The collection of class names.
    */