Add `reduce()` method to Media and refactoring the code.

dist/js/splide.cjs.js

@@ -580,7 +580,14 @@ function Throttle(func, duration) {
   return throttled;
 }
 
+function omit(object, keys) {
+  toArray(keys || ownKeys(object)).forEach(function (key) {
+    delete object[key];
+  });
+}
+
 function Media(Splide2, Components2, options) {
+  var reducedMotion = options.reducedMotion || {};
   var binder = EventBinder();
   var breakpoints = options.breakpoints || {};
   var queries = [];
@@ -592,7 +599,7 @@ function Media(Splide2, Components2, options) {
     }).forEach(function (key) {
       register(breakpoints[key], "(" + (isMin ? "min" : "max") + "-width:" + key + "px)");
     });
-    register(options.reducedMotion || {}, MEDIA_PREFERS_REDUCED_MOTION);
+    register(reducedMotion, MEDIA_PREFERS_REDUCED_MOTION);
     update();
   }
 
@@ -613,9 +620,7 @@ function Media(Splide2, Components2, options) {
     var merged = queries.reduce(function (merged2, entry) {
       return merge(merged2, entry[1].matches ? entry[0] : {});
     }, {});
-    forOwn(options, function (value, key) {
-      delete options[key];
-    });
+    omit(options);
     merge(options, merged);
 
     if (options.destroy) {
@@ -629,17 +634,16 @@ function Media(Splide2, Components2, options) {
     }
   }
 
-  function matches(media) {
-    return queries.some(function (entry) {
-      return entry[1].media === media && entry[1].matches;
-    });
+  function reduce(enable) {
+    if (matchMedia(MEDIA_PREFERS_REDUCED_MOTION).matches) {
+      enable ? merge(options, reducedMotion) : omit(options, ownKeys(reducedMotion));
+    }
   }
 
   return {
     setup: setup,
-    mount: noop,
     destroy: destroy,
-    matches: matches
+    reduce: reduce
   };
 }
 
@@ -2095,8 +2099,9 @@ function Drag(Splide2, Components2, options) {
   var state = Splide2.state;
   var Move = Components2.Move,
       Scroll = Components2.Scroll,
-      Controller = Components2.Controller;
-  var track = Components2.Elements.track;
+      Controller = Components2.Controller,
+      track = Components2.Elements.track,
+      reduce = Components2.Media.reduce;
   var _Components2$Directio2 = Components2.Direction,
       resolve = _Components2$Directio2.resolve,
       orient = _Components2$Directio2.orient;
@@ -2210,26 +2215,19 @@ function Drag(Splide2, Components2, options) {
     var velocity = computeVelocity(e);
     var destination = computeDestination(velocity);
     var rewind = options.rewind && options.rewindByDrag;
-    var reduced = Components2.Media.matches(MEDIA_PREFERS_REDUCED_MOTION);
-    var go = Controller.go;
-
-    if (reduced) {
-      delete options.speed;
-    }
+    reduce(false);
 
     if (isFree) {
       Controller.scroll(destination, 0, options.snap);
     } else if (Splide2.is(FADE)) {
-      go(orient(sign(velocity)) < 0 ? rewind ? "<" : "-" : rewind ? ">" : "+");
+      Controller.go(orient(sign(velocity)) < 0 ? rewind ? "<" : "-" : rewind ? ">" : "+");
     } else if (Splide2.is(SLIDE) && exceeded && rewind) {
-      go(exceededLimit(true) ? ">" : "<");
+      Controller.go(exceededLimit(true) ? ">" : "<");
     } else {
-      go(Controller.toDest(destination), true);
+      Controller.go(Controller.toDest(destination), true);
     }
 
-    if (reduced) {
-      options.speed = 0;
-    }
+    reduce(true);
   }
 
   function shouldStart(e) {

dist/js/splide.esm.js

@@ -575,7 +575,14 @@ function Throttle(func, duration) {
   return throttled;
 }
 
+function omit(object, keys) {
+  toArray(keys || ownKeys(object)).forEach(function (key) {
+    delete object[key];
+  });
+}
+
 function Media(Splide2, Components2, options) {
+  var reducedMotion = options.reducedMotion || {};
   var binder = EventBinder();
   var breakpoints = options.breakpoints || {};
   var queries = [];
@@ -587,7 +594,7 @@ function Media(Splide2, Components2, options) {
     }).forEach(function (key) {
       register(breakpoints[key], "(" + (isMin ? "min" : "max") + "-width:" + key + "px)");
     });
-    register(options.reducedMotion || {}, MEDIA_PREFERS_REDUCED_MOTION);
+    register(reducedMotion, MEDIA_PREFERS_REDUCED_MOTION);
     update();
   }
 
@@ -608,9 +615,7 @@ function Media(Splide2, Components2, options) {
     var merged = queries.reduce(function (merged2, entry) {
       return merge(merged2, entry[1].matches ? entry[0] : {});
     }, {});
-    forOwn(options, function (value, key) {
-      delete options[key];
-    });
+    omit(options);
     merge(options, merged);
 
     if (options.destroy) {
@@ -624,17 +629,16 @@ function Media(Splide2, Components2, options) {
     }
   }
 
-  function matches(media) {
-    return queries.some(function (entry) {
-      return entry[1].media === media && entry[1].matches;
-    });
+  function reduce(enable) {
+    if (matchMedia(MEDIA_PREFERS_REDUCED_MOTION).matches) {
+      enable ? merge(options, reducedMotion) : omit(options, ownKeys(reducedMotion));
+    }
   }
 
   return {
     setup: setup,
-    mount: noop,
     destroy: destroy,
-    matches: matches
+    reduce: reduce
   };
 }
 
@@ -2090,8 +2094,9 @@ function Drag(Splide2, Components2, options) {
   var state = Splide2.state;
   var Move = Components2.Move,
       Scroll = Components2.Scroll,
-      Controller = Components2.Controller;
-  var track = Components2.Elements.track;
+      Controller = Components2.Controller,
+      track = Components2.Elements.track,
+      reduce = Components2.Media.reduce;
   var _Components2$Directio2 = Components2.Direction,
       resolve = _Components2$Directio2.resolve,
       orient = _Components2$Directio2.orient;
@@ -2205,26 +2210,19 @@ function Drag(Splide2, Components2, options) {
     var velocity = computeVelocity(e);
     var destination = computeDestination(velocity);
     var rewind = options.rewind && options.rewindByDrag;
-    var reduced = Components2.Media.matches(MEDIA_PREFERS_REDUCED_MOTION);
-    var go = Controller.go;
-
-    if (reduced) {
-      delete options.speed;
-    }
+    reduce(false);
 
     if (isFree) {
       Controller.scroll(destination, 0, options.snap);
     } else if (Splide2.is(FADE)) {
-      go(orient(sign(velocity)) < 0 ? rewind ? "<" : "-" : rewind ? ">" : "+");
+      Controller.go(orient(sign(velocity)) < 0 ? rewind ? "<" : "-" : rewind ? ">" : "+");
     } else if (Splide2.is(SLIDE) && exceeded && rewind) {
-      go(exceededLimit(true) ? ">" : "<");
+      Controller.go(exceededLimit(true) ? ">" : "<");
     } else {
-      go(Controller.toDest(destination), true);
+      Controller.go(Controller.toDest(destination), true);
     }
 
-    if (reduced) {
-      options.speed = 0;
-    }
+    reduce(true);
   }
 
   function shouldStart(e) {

dist/js/splide.js

@@ -177,6 +177,12 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     return object;
   }
 
+  function omit(object, keys) {
+    toArray(keys || ownKeys(object)).forEach(function (key) {
+      delete object[key];
+    });
+  }
+
   function removeAttribute(elms, attrs) {
     forEach(elms, function (elm) {
       forEach(attrs, function (attr) {
@@ -577,6 +583,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   }
 
   function Media(Splide2, Components2, options) {
+    var reducedMotion = options.reducedMotion || {};
     var binder = EventBinder();
     var breakpoints = options.breakpoints || {};
     var queries = [];
@@ -588,7 +595,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       }).forEach(function (key) {
         register(breakpoints[key], "(" + (isMin ? "min" : "max") + "-width:" + key + "px)");
       });
-      register(options.reducedMotion || {}, MEDIA_PREFERS_REDUCED_MOTION);
+      register(reducedMotion, MEDIA_PREFERS_REDUCED_MOTION);
       update();
     }
 
@@ -609,9 +616,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       var merged = queries.reduce(function (merged2, entry) {
         return merge(merged2, entry[1].matches ? entry[0] : {});
       }, {});
-      forOwn(options, function (value, key) {
-        delete options[key];
-      });
+      omit(options);
       merge(options, merged);
 
       if (options.destroy) {
@@ -625,17 +630,16 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       }
     }
 
-    function matches(media) {
-      return queries.some(function (entry) {
-        return entry[1].media === media && entry[1].matches;
-      });
+    function reduce(enable) {
+      if (matchMedia(MEDIA_PREFERS_REDUCED_MOTION).matches) {
+        enable ? merge(options, reducedMotion) : omit(options, ownKeys(reducedMotion));
+      }
     }
 
     return {
       setup: setup,
-      mount: noop,
       destroy: destroy,
-      matches: matches
+      reduce: reduce
     };
   }
 
@@ -2091,8 +2095,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     var state = Splide2.state;
     var Move = Components2.Move,
         Scroll = Components2.Scroll,
-        Controller = Components2.Controller;
-    var track = Components2.Elements.track;
+        Controller = Components2.Controller,
+        track = Components2.Elements.track,
+        reduce = Components2.Media.reduce;
     var _Components2$Directio2 = Components2.Direction,
         resolve = _Components2$Directio2.resolve,
         orient = _Components2$Directio2.orient;
@@ -2206,26 +2211,19 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       var velocity = computeVelocity(e);
       var destination = computeDestination(velocity);
       var rewind = options.rewind && options.rewindByDrag;
-      var reduced = Components2.Media.matches(MEDIA_PREFERS_REDUCED_MOTION);
-      var go = Controller.go;
-
-      if (reduced) {
-        delete options.speed;
-      }
+      reduce(false);
 
       if (isFree) {
         Controller.scroll(destination, 0, options.snap);
       } else if (Splide2.is(FADE)) {
-        go(orient(sign(velocity)) < 0 ? rewind ? "<" : "-" : rewind ? ">" : "+");
+        Controller.go(orient(sign(velocity)) < 0 ? rewind ? "<" : "-" : rewind ? ">" : "+");
       } else if (Splide2.is(SLIDE) && exceeded && rewind) {
-        go(exceededLimit(true) ? ">" : "<");
+        Controller.go(exceededLimit(true) ? ">" : "<");
       } else {
-        go(Controller.toDest(destination), true);
+        Controller.go(Controller.toDest(destination), true);
       }
 
-      if (reduced) {
-        options.speed = 0;
-      }
+      reduce(true);
     }
 
     function shouldStart(e) {

dist/types/index.d.ts

@@ -4,7 +4,7 @@
  * @since 3.0.0
  */
 interface MediaComponent extends BaseComponent {
-    matches(key: string): boolean;
+    reduce(reduced: boolean): void;
 }
 
 /**

src/js/components/Drag/Drag.ts

@@ -1,7 +1,6 @@
 import { CLASS_ARROW, CLASS_PAGINATION_PAGE } from '../../constants/classes';
 import { EVENT_DRAG, EVENT_DRAGGED, EVENT_DRAGGING, EVENT_MOUNTED, EVENT_UPDATED } from '../../constants/events';
 import { SCROLL_LISTENER_OPTIONS } from '../../constants/listener-options';
-import { MEDIA_PREFERS_REDUCED_MOTION } from '../../constants/media';
 import { DRAGGING, IDLE, MOVING, SCROLLING } from '../../constants/states';
 import { FADE, LOOP, SLIDE } from '../../constants/types';
 import { EventInterface } from '../../constructors';
@@ -35,8 +34,7 @@ export interface DragComponent extends BaseComponent {
 export function Drag( Splide: Splide, Components: Components, options: Options ): DragComponent {
   const { on, emit, bind, unbind } = EventInterface( Splide );
   const { state } = Splide;
-  const { Move, Scroll, Controller } = Components;
-  const { track } = Components.Elements;
+  const { Move, Scroll, Controller, Elements: { track }, Media: { reduce } } = Components;
   const { resolve, orient } = Components.Direction;
   const { getPosition, exceededLimit } = Move;
 
@@ -229,26 +227,20 @@ export function Drag( Splide: Splide, Components: Components, options: Options )
     const velocity    = computeVelocity( e );
     const destination = computeDestination( velocity );
     const rewind      = options.rewind && options.rewindByDrag;
-    const reduced     = Components.Media.matches( MEDIA_PREFERS_REDUCED_MOTION );
-    const { go } = Controller;
 
-    if ( reduced ) {
-      delete options.speed;
-    }
+    reduce( false );
 
     if ( isFree ) {
       Controller.scroll( destination, 0, options.snap );
     } else if ( Splide.is( FADE ) ) {
-      go( orient( sign( velocity ) ) < 0 ? ( rewind ? '<' : '-' ) : ( rewind ? '>' : '+' ) );
+      Controller.go( orient( sign( velocity ) ) < 0 ? ( rewind ? '<' : '-' ) : ( rewind ? '>' : '+' ) );
     } else if ( Splide.is( SLIDE ) && exceeded && rewind ) {
-      go( exceededLimit( true ) ? '>' : '<' );
+      Controller.go( exceededLimit( true ) ? '>' : '<' );
     } else {
-      go( Controller.toDest( destination ), true );
+      Controller.go( Controller.toDest( destination ), true );
     }
 
-    if ( reduced ) {
-      options.speed = 0;
-    }
+    reduce( true );
   }
 
   /**

src/js/components/Media/Media.ts

@@ -3,7 +3,7 @@ import { DESTROYED } from '../../constants/states';
 import { EventBinder } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
-import { forOwn, merge, noop, ownKeys } from '../../utils';
+import { merge, omit, ownKeys } from '../../utils';
 
 
 /**
@@ -12,7 +12,7 @@ import { forOwn, merge, noop, ownKeys } from '../../utils';
  * @since 3.0.0
  */
 export interface MediaComponent extends BaseComponent {
-  matches( key: string ): boolean;
+  reduce( reduced: boolean ): void;
 }
 
 /**
@@ -27,8 +27,9 @@ export interface MediaComponent extends BaseComponent {
  * @return A Media component object.
  */
 export function Media( Splide: Splide, Components: Components, options: Options ): MediaComponent {
-  const binder      = EventBinder();
-  const breakpoints = options.breakpoints || {};
+  const reducedMotion = options.reducedMotion || {};
+  const binder        = EventBinder();
+  const breakpoints   = options.breakpoints || {};
 
   /**
    * Stores options and MediaQueryList object.
@@ -47,7 +48,7 @@ export function Media( Splide: Splide, Components: Components, options: Options
         register( breakpoints[ key ], `(${ isMin ? 'min' : 'max' }-width:${ key }px)` );
       } );
 
-    register( options.reducedMotion || {}, MEDIA_PREFERS_REDUCED_MOTION );
+    register( reducedMotion, MEDIA_PREFERS_REDUCED_MOTION );
     update();
   }
 
@@ -83,7 +84,7 @@ export function Media( Splide: Splide, Components: Components, options: Options
       return merge( merged, entry[ 1 ].matches ? entry[ 0 ] : {} );
     }, {} );
 
-    forOwn( options, ( value, key ) => { delete options[ key ] } );
+    omit( options );
     merge( options, merged );
 
     if ( options.destroy ) {
@@ -98,20 +99,20 @@ export function Media( Splide: Splide, Components: Components, options: Options
   }
 
   /**
-   * Checks if the document matches the registered media query or not.
+   * Disables or enables `reducedMotion` options.
+   * This method does nothing when the document does not match the query.
    *
-   * @param media - A registered media query.
-   *
-   * @return `true` if the document matches the query, or otherwise `false`.
+   * @param enable - Determines whether to apply `reducedMotion` options or not.
    */
-  function matches( media: string ): boolean {
-    return queries.some( entry => entry[ 1 ].media === media && entry[ 1 ].matches );
+  function reduce( enable: boolean ): void {
+    if ( matchMedia( MEDIA_PREFERS_REDUCED_MOTION ).matches ) {
+      enable ? merge( options, reducedMotion ) : omit( options, ownKeys( reducedMotion ) );
+    }
   }
 
   return {
     setup,
-    mount: noop,
     destroy,
-    matches,
+    reduce,
   };
 }

src/js/components/Media/test/general.test.ts

@@ -2,7 +2,7 @@ import { DESTROYED } from '../../../constants/states';
 import { init } from '../../../test';
 
 
-describe( 'Options', () => {
+describe( 'Media', () => {
   beforeAll( () => {
     window.matchMedia = () => ( {
       matches            : true, // All queries match the media string.
@@ -29,6 +29,28 @@ describe( 'Options', () => {
   test( 'can merge options for prefers-reduced-motion:reduce.', () => {
     const splide = init();
     expect( splide.options.speed ).toBe( 0 );
+    expect( splide.options.rewindSpeed ).toBe( 0 );
+    expect( splide.options.autoplay ).toBe( 'pause' );
+  } );
+
+  test( 'can enable or disable `reducedMotion` option by `reduce()`.', () => {
+    const splide = init( { speed: 1000, rewindSpeed: 2000, autoplay: true } );
+    const { reduce } = splide.Components.Media;
+
+    expect( splide.options.speed ).toBe( 0 );
+    expect( splide.options.rewindSpeed ).toBe( 0 );
+    expect( splide.options.autoplay ).toBe( 'pause' );
+
+    reduce( false );
+
+    expect( splide.options.speed ).toBe( 1000 );
+    expect( splide.options.rewindSpeed ).toBe( 2000 );
+    expect( splide.options.autoplay ).toBe( true );
+
+    reduce( true );
+
+    expect( splide.options.speed ).toBe( 0 );
+    expect( splide.options.rewindSpeed ).toBe( 0 );
     expect( splide.options.autoplay ).toBe( 'pause' );
   } );
 } );

src/js/utils/object/index.ts

@@ -1,4 +1,5 @@
 export { assign }   from './assign/assign';
 export { forOwn }   from './forOwn/forOwn';
 export { merge }    from './merge/merge';
+export { omit }     from './omit/omit';
 export { ownKeys }  from './ownKeys/ownKeys';

src/js/utils/object/omit/omit.test.ts

@@ -0,0 +1,54 @@
+import { omit } from './omit';
+
+
+describe( 'omit', () => {
+  function hasOwn( object: object, key: string ): boolean {
+    return Object.prototype.hasOwnProperty.call( object, key );
+  }
+  
+  test( 'can delete specified key.', () => {
+    const object = { a: 1, b: 2, c: 3 };
+
+    expect( hasOwn( object, 'a' ) ).toBe( true );
+    expect( hasOwn( object, 'b' ) ).toBe( true );
+
+    omit( object, 'a' );
+    expect( hasOwn( object, 'a' ) ).toBe( false );
+
+    omit( object, 'b' );
+    expect( hasOwn( object, 'b' ) ).toBe( false );
+  } );
+
+  test( 'can delete specified keys.', () => {
+    const object = { a: 1, b: 2, c: 3 };
+
+    omit( object, [ 'a', 'b' ] );
+    expect( hasOwn( object, 'a' ) ).toBe( false );
+    expect( hasOwn( object, 'b' ) ).toBe( false );
+  } );
+
+  test( 'can delete all own enumerable keys.', () => {
+    const object = { a: 1, b: 2, c: 3 };
+
+    omit( object );
+    expect( hasOwn( object, 'a' ) ).toBe( false );
+    expect( hasOwn( object, 'b' ) ).toBe( false );
+    expect( hasOwn( object, 'c' ) ).toBe( false );
+    expect( Object.keys( object ).length ).toBe( 0 );
+  } );
+
+  test( 'should not delete inherited keys.', () => {
+    const parent = { a: 1, b: 2, c: 3 };
+    const object = Object.create( parent );
+
+    omit( object );
+
+    expect( hasOwn( parent, 'a' ) ).toBe( true );
+    expect( hasOwn( parent, 'b' ) ).toBe( true );
+    expect( hasOwn( parent, 'c' ) ).toBe( true );
+
+    expect( object.a ).toBe( 1 );
+    expect( object.b ).toBe( 2 );
+    expect( object.c ).toBe( 3 );
+  } );
+} );

src/js/utils/object/omit/omit.ts

@@ -0,0 +1,15 @@
+import { toArray } from '../../array';
+import { ownKeys } from '../ownKeys/ownKeys';
+
+
+/**
+ * Deletes specified own keys from the object.
+ *
+ * @param object - An object.
+ * @param keys   - A key or keys to delete. If not specified, all own enumerable keys will be deleted.
+ */
+export function omit( object: object, keys?: string | string[] ): void {
+  toArray( keys || ownKeys( object ) ).forEach( key => {
+    delete object[ key ];
+  } );
+}