Make `breakpoints` behave same as CSS media query, using all options whose query matches.

dist/js/splide.js

@@ -13,38 +13,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 })(this, function () {
   'use strict';
 
-  var EVENT_MOUNTED = "mounted";
-  var EVENT_READY = "ready";
-  var EVENT_MOVE = "move";
-  var EVENT_MOVED = "moved";
-  var EVENT_SHIFTED = "shifted";
-  var EVENT_CLICK = "click";
-  var EVENT_ACTIVE = "active";
-  var EVENT_INACTIVE = "inactive";
-  var EVENT_VISIBLE = "visible";
-  var EVENT_HIDDEN = "hidden";
-  var EVENT_SLIDE_KEYDOWN = "slide:keydown";
-  var EVENT_REFRESH = "refresh";
-  var EVENT_UPDATED = "updated";
-  var EVENT_MEDIA = "media";
-  var EVENT_RESIZE = "resize";
-  var EVENT_RESIZED = "resized";
-  var EVENT_REPOSITIONED = "repositioned";
-  var EVENT_DRAG = "drag";
-  var EVENT_DRAGGING = "dragging";
-  var EVENT_DRAGGED = "dragged";
-  var EVENT_SCROLL = "scroll";
-  var EVENT_SCROLLED = "scrolled";
-  var EVENT_DESTROY = "destroy";
-  var EVENT_ARROWS_MOUNTED = "arrows:mounted";
-  var EVENT_ARROWS_UPDATED = "arrows:updated";
-  var EVENT_PAGINATION_MOUNTED = "pagination:mounted";
-  var EVENT_PAGINATION_UPDATED = "pagination:updated";
-  var EVENT_NAVIGATION_MOUNTED = "navigation:mounted";
-  var EVENT_AUTOPLAY_PLAY = "autoplay:play";
-  var EVENT_AUTOPLAY_PLAYING = "autoplay:playing";
-  var EVENT_AUTOPLAY_PAUSE = "autoplay:pause";
-  var EVENT_LAZYLOAD_LOADED = "lazyload:loaded";
   var CREATED = 1;
   var MOUNTED = 2;
   var IDLE = 3;
@@ -70,10 +38,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     return Array.prototype.slice.call(arrayLike, start, end);
   }
 
-  function find(arrayLike, predicate) {
-    return slice(arrayLike).filter(predicate)[0];
-  }
-
   function apply(func) {
     return func.bind.apply(func, [null].concat(slice(arguments, 1)));
   }
@@ -167,9 +131,11 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     return selector ? children(parent, selector)[0] : parent.firstElementChild;
   }
 
+  var ownKeys = Object.keys;
+
   function forOwn(object, iteratee, right) {
     if (object) {
-      var keys = Object.keys(object);
+      var keys = ownKeys(object);
       keys = right ? keys.reverse() : keys;
 
       for (var i = 0; i < keys.length; i++) {
@@ -440,6 +406,38 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     };
   }
 
+  var EVENT_MOUNTED = "mounted";
+  var EVENT_READY = "ready";
+  var EVENT_MOVE = "move";
+  var EVENT_MOVED = "moved";
+  var EVENT_SHIFTED = "shifted";
+  var EVENT_CLICK = "click";
+  var EVENT_ACTIVE = "active";
+  var EVENT_INACTIVE = "inactive";
+  var EVENT_VISIBLE = "visible";
+  var EVENT_HIDDEN = "hidden";
+  var EVENT_SLIDE_KEYDOWN = "slide:keydown";
+  var EVENT_REFRESH = "refresh";
+  var EVENT_UPDATED = "updated";
+  var EVENT_RESIZE = "resize";
+  var EVENT_RESIZED = "resized";
+  var EVENT_REPOSITIONED = "repositioned";
+  var EVENT_DRAG = "drag";
+  var EVENT_DRAGGING = "dragging";
+  var EVENT_DRAGGED = "dragged";
+  var EVENT_SCROLL = "scroll";
+  var EVENT_SCROLLED = "scrolled";
+  var EVENT_DESTROY = "destroy";
+  var EVENT_ARROWS_MOUNTED = "arrows:mounted";
+  var EVENT_ARROWS_UPDATED = "arrows:updated";
+  var EVENT_PAGINATION_MOUNTED = "pagination:mounted";
+  var EVENT_PAGINATION_UPDATED = "pagination:updated";
+  var EVENT_NAVIGATION_MOUNTED = "navigation:mounted";
+  var EVENT_AUTOPLAY_PLAY = "autoplay:play";
+  var EVENT_AUTOPLAY_PLAYING = "autoplay:playing";
+  var EVENT_AUTOPLAY_PAUSE = "autoplay:pause";
+  var EVENT_LAZYLOAD_LOADED = "lazyload:loaded";
+
   function EventInterface(Splide2) {
     var bus = Splide2 ? Splide2.event.bus : document.createDocumentFragment();
     var binder = EventBinder();
@@ -585,40 +583,44 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   function Media(Splide2, Components2, options) {
     var binder = EventBinder();
     var breakpoints = options.breakpoints || {};
-    var initialOptions = merge({}, options);
+    var initialOptions = Splide2._io;
     var queries = [];
 
     function setup() {
       var isMin = options.mediaQuery === "min";
-      register(Object.keys(breakpoints).sort(function (n, m) {
-        return isMin ? +m - +n : +n - +m;
-      }).map(function (key) {
-        return [breakpoints[key], "(" + (isMin ? "min" : "max") + "-width:" + key + "px)"];
-      }));
-      register([[options.reducedMotion, "(prefers-reduced-motion: reduce)"]]);
+      ownKeys(breakpoints).sort(function (n, m) {
+        return isMin ? +n - +m : +m - +n;
+      }).forEach(function (key) {
+        register(breakpoints[key], "(" + (isMin ? "min" : "max") + "-width:" + key + "px)");
+      });
+      register(options.reducedMotion || {}, "(prefers-reduced-motion: reduce)");
       update();
     }
 
+    function reset() {
+      ownKeys(options).forEach(function (key) {
+        !(key in initialOptions) && delete options[key];
+      });
+    }
+
     function destroy(completely) {
       if (completely) {
         binder.destroy();
       }
     }
 
-    function register(entries) {
-      queries.push(entries.map(function (entry) {
-        var query = matchMedia(entry[1]);
-        binder.bind(query, "change", update);
-        return [entry[0], query];
-      }));
+    function register(options2, query) {
+      var queryList = matchMedia(query);
+      binder.bind(queryList, "change", update);
+      queries.push([options2, queryList]);
     }
 
     function update() {
       var options2 = accumulate();
       var destruction = options2.destroy;
+      reset();
 
       if (destruction) {
-        Splide2.options = initialOptions;
         Splide2.destroy(destruction === "completely");
       } else if (Splide2.state.is(DESTROYED)) {
         destroy(true);
@@ -631,12 +633,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     }
 
     function accumulate() {
-      return queries.reduce(function (merged, entries) {
-        var entry = find(entries, function (entry2) {
-          return entry2[1].matches;
-        }) || [];
-        entry[1] && Splide2.emit(EVENT_MEDIA, entry[1]);
-        return merge(merged, entry[0] || {});
+      return queries.reduce(function (merged, entry) {
+        return merge(merged, entry[1].matches ? entry[0] : {});
       }, merge({}, initialOptions));
     }
 
@@ -2277,7 +2275,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
     function isDraggable(target2) {
       var noDrag = options.noDrag;
-      return !matches(target2, "." + CLASS_PAGINATION_PAGE + ", ." + CLASS_ARROW) && !noDrag || !matches(target2, noDrag);
+      return !matches(target2, "." + CLASS_PAGINATION_PAGE + ", ." + CLASS_ARROW) && (!noDrag || !matches(target2, noDrag));
     }
 
     function isTouchEvent(e) {
@@ -2964,6 +2962,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         assert(false, "Invalid JSON");
       }
 
+      this._io = merge({}, options);
       this._options = options;
     }
 

src/js/components/Drag/Drag.ts

@@ -367,8 +367,9 @@ export function Drag( Splide: Splide, Components: Components, options: Options )
    */
   function isDraggable( target: EventTarget ): boolean {
     const { noDrag } = options;
+
     return ! matches( target, `.${ CLASS_PAGINATION_PAGE }, .${ CLASS_ARROW }` )
-      && ! noDrag || ! matches( target, noDrag );
+      && ( ! noDrag || ! matches( target, noDrag ) );
   }
 
   /**

src/js/components/Media/Media.ts

@@ -1,9 +1,8 @@
-import { EVENT_MEDIA } from '../../constants/events';
 import { DESTROYED } from '../../constants/states';
 import { EventBinder } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
-import { find, merge, noop } from '../../utils';
+import { merge, noop, ownKeys } from '../../utils';
 
 
 /**
@@ -17,7 +16,7 @@ export interface MediaComponent extends BaseComponent {
 /**
  * The component for observing media queries and update options if necessary.
  *
- * @since 3.0.0
+ * @since 4.0.0
  *
  * @param Splide     - A Splide instance.
  * @param Components - A collection of components.
@@ -32,12 +31,12 @@ export function Media( Splide: Splide, Components: Components, options: Options
   /**
    * Keeps the initial options to apply when no matched query exists.
    */
-  const initialOptions = merge( {}, options );
+  const initialOptions = Splide._io;
 
   /**
    * Stores options and MediaQueryList object.
    */
-  const queries: Array<[ Options, MediaQueryList ][]> = [];
+  const queries: Array<[ Options, MediaQueryList ]> = [];
 
   /**
    * Called when the component is constructed.
@@ -45,15 +44,25 @@ export function Media( Splide: Splide, Components: Components, options: Options
   function setup(): void {
     const isMin = options.mediaQuery === 'min';
 
-    register( Object.keys( breakpoints )
-      .sort( ( n, m ) => isMin ? +m - +n : +n - +m )
-      .map<[ Options, string ]>( key => [ breakpoints[ key ], `(${ isMin ? 'min' : 'max' }-width:${ key }px)` ] ) );
-
-    register( [ [ options.reducedMotion, '(prefers-reduced-motion: reduce)' ] ] );
+    ownKeys( breakpoints )
+      .sort( ( n, m ) => isMin ? +n - +m  : +m - +n )
+      .forEach( key => {
+        register( breakpoints[ key ], `(${ isMin ? 'min' : 'max' }-width:${ key }px)` );
+      } );
 
+    register( options.reducedMotion || {}, '(prefers-reduced-motion: reduce)' );
     update();
   }
 
+  /**
+   * Remove all keys from current options that initial options do not include.
+   */
+  function reset(): void {
+    ownKeys( options ).forEach( key => {
+      ! ( key in initialOptions ) && delete options[ key ];
+    } );
+  }
+
   /**
    * Destroys the component.
    *
@@ -68,14 +77,13 @@ export function Media( Splide: Splide, Components: Components, options: Options
   /**
    * Registers entries as [ Options, media query string ].
    *
-   * @param entries - An array with entries.
+   * @param options - Options.
+   * @param query   - A query string.
    */
-  function register( entries: [ Options, string? ][] ): void {
-    queries.push( entries.map<[ Options, MediaQueryList ]>( entry => {
-      const query = matchMedia( entry[ 1 ] );
-      binder.bind( query, 'change', update );
-      return [ entry[ 0 ], query ];
-    } ) );
+  function register( options: Options, query: string ): void {
+    const queryList = matchMedia( query );
+    binder.bind( queryList, 'change', update );
+    queries.push( [ options, queryList ] );
   }
 
   /**
@@ -85,8 +93,9 @@ export function Media( Splide: Splide, Components: Components, options: Options
     const options = accumulate();
     const { destroy: destruction } = options;
 
+    reset();
+
     if ( destruction ) {
-      Splide.options = initialOptions;
       Splide.destroy( destruction === 'completely' );
     } else if ( Splide.state.is( DESTROYED ) ) {
       destroy( true );
@@ -105,10 +114,8 @@ export function Media( Splide: Splide, Components: Components, options: Options
    * @return Merged options.
    */
   function accumulate(): Options {
-    return queries.reduce<Options>( ( merged, entries ) => {
-      const entry = find( entries, entry => entry[ 1 ].matches ) || [];
-      entry[ 1 ] && Splide.emit( EVENT_MEDIA, entry[ 1 ] );
-      return merge( merged, entry[ 0 ] || {} );
+    return queries.reduce<Options>( ( merged, entry ) => {
+      return merge( merged, entry[ 1 ].matches ? entry[ 0 ] : {} );
     }, merge( {}, initialOptions ) );
   }
 

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

@@ -1,4 +1,3 @@
-import { EVENT_MEDIA } from '../../../constants/events';
 import { DESTROYED } from '../../../constants/states';
 import { init } from '../../../test';
 
@@ -32,17 +31,4 @@ describe( 'Options', () => {
     expect( splide.options.speed ).toBe( 0 );
     expect( splide.options.autoplay ).toBe( 'pause' );
   } );
-
-  test( 'can emit events when any media query changes.', () => {
-    const splide   = init( { breakpoints: { 640: { perPage: 4 } } }, { mount: false } );
-    const callback = jest.fn();
-
-    splide.on( EVENT_MEDIA, query => {
-      expect( query.matches ).toBe( true );
-      callback();
-    } );
-
-    splide.mount();
-    expect( callback ).toHaveBeenCalledTimes( 2 ); // a breakpoint and prefers-reduced-motion
-  } );
 } );

src/js/constants/events.ts

@@ -11,7 +11,6 @@ export const EVENT_HIDDEN             = 'hidden';
 export const EVENT_SLIDE_KEYDOWN      = 'slide:keydown';
 export const EVENT_REFRESH            = 'refresh';
 export const EVENT_UPDATED            = 'updated';
-export const EVENT_MEDIA              = 'media';
 export const EVENT_RESIZE             = 'resize';
 export const EVENT_RESIZED            = 'resized';
 export const EVENT_REPOSITIONED       = 'repositioned';

src/js/core/Splide/Splide.ts

@@ -54,7 +54,14 @@ export class Splide {
   readonly splides: SyncTarget[] = [];
 
   /**
-   * The collection of options.
+   * Keeps the initial options.
+   *
+   * @internal
+   */
+  readonly _io: Options;
+
+  /**
+   * The current options.
    */
   private readonly _options: Options = {};
 
@@ -93,6 +100,7 @@ export class Splide {
       assert( false, 'Invalid JSON' );
     }
 
+    this._io      = merge( {}, options );
     this._options = options;
   }
 

src/js/utils/object/forOwn/forOwn.ts

@@ -1,3 +1,6 @@
+import { ownKeys } from '../ownKeys/ownKeys';
+
+
 /**
  * Iterates over the provided object by own enumerable keys with calling the iteratee function.
  *
@@ -13,7 +16,7 @@ export function forOwn<T extends object>(
   right?: boolean
 ): T {
   if ( object ) {
-    let keys = Object.keys( object );
+    let keys = ownKeys( object );
     keys = right ? keys.reverse() : keys;
 
     for ( let i = 0; i < keys.length; i++ ) {

src/js/utils/object/index.ts

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

src/js/utils/object/ownKeys/ownKeys.ts

@@ -0,0 +1,4 @@
+/**
+ * An alias of Object.keys
+ */
+export const ownKeys = Object.keys;