Kaynağa Gözat

Add the `matches` method.

NaotoshiFujita 3 yıl önce
ebeveyn
işleme
c73a91a323

+ 14 - 8
dist/js/splide.js

@@ -584,16 +584,16 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     var binder = EventBinder();
     var binder = EventBinder();
     var breakpoints = options.breakpoints || {};
     var breakpoints = options.breakpoints || {};
     var initialOptions = Splide2._io;
     var initialOptions = Splide2._io;
-    var queries = [];
+    var queries = {};
 
 
     function setup() {
     function setup() {
       var isMin = options.mediaQuery === "min";
       var isMin = options.mediaQuery === "min";
       ownKeys(breakpoints).sort(function (n, m) {
       ownKeys(breakpoints).sort(function (n, m) {
         return isMin ? +n - +m : +m - +n;
         return isMin ? +n - +m : +m - +n;
       }).forEach(function (key) {
       }).forEach(function (key) {
-        register(breakpoints[key], "(" + (isMin ? "min" : "max") + "-width:" + key + "px)");
+        register(key, breakpoints[key], "(" + (isMin ? "min" : "max") + "-width:" + key + "px)");
       });
       });
-      register(options.reducedMotion || {}, "(prefers-reduced-motion: reduce)");
+      register("motion", options.reducedMotion || {}, "(prefers-reduced-motion: reduce)");
       update();
       update();
     }
     }
 
 
@@ -609,10 +609,10 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       }
       }
     }
     }
 
 
-    function register(options2, query) {
+    function register(key, options2, query) {
       var queryList = matchMedia(query);
       var queryList = matchMedia(query);
       binder.bind(queryList, "change", update);
       binder.bind(queryList, "change", update);
-      queries.push([options2, queryList]);
+      queries[key] = [options2, queryList];
     }
     }
 
 
     function update() {
     function update() {
@@ -633,15 +633,21 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     }
     }
 
 
     function accumulate() {
     function accumulate() {
-      return queries.reduce(function (merged, entry) {
-        return merge(merged, entry[1].matches ? entry[0] : {});
+      return ownKeys(queries).reduce(function (merged, key) {
+        return merge(merged, matches(key) || {});
       }, merge({}, initialOptions));
       }, merge({}, initialOptions));
     }
     }
 
 
+    function matches(key) {
+      var entry = queries[key];
+      return entry && entry[1].matches ? entry[0] : null;
+    }
+
     return {
     return {
       setup: setup,
       setup: setup,
       mount: noop,
       mount: noop,
-      destroy: destroy
+      destroy: destroy,
+      matches: matches
     };
     };
   }
   }
 
 

Dosya farkı çok büyük olduğundan ihmal edildi
+ 0 - 0
dist/js/splide.min.js


BIN
dist/js/splide.min.js.gz


Dosya farkı çok büyük olduğundan ihmal edildi
+ 0 - 0
dist/js/splide.min.js.map


+ 24 - 9
src/js/components/Media/Media.ts

@@ -11,6 +11,7 @@ import { merge, noop, ownKeys } from '../../utils';
  * @since 3.0.0
  * @since 3.0.0
  */
  */
 export interface MediaComponent extends BaseComponent {
 export interface MediaComponent extends BaseComponent {
+  matches( key: string ): void;
 }
 }
 
 
 /**
 /**
@@ -36,7 +37,7 @@ export function Media( Splide: Splide, Components: Components, options: Options
   /**
   /**
    * Stores options and MediaQueryList object.
    * Stores options and MediaQueryList object.
    */
    */
-  const queries: Array<[ Options, MediaQueryList ]> = [];
+  const queries: Record<string, [ Options, MediaQueryList ]> = {};
 
 
   /**
   /**
    * Called when the component is constructed.
    * Called when the component is constructed.
@@ -47,10 +48,10 @@ export function Media( Splide: Splide, Components: Components, options: Options
     ownKeys( breakpoints )
     ownKeys( breakpoints )
       .sort( ( n, m ) => isMin ? +n - +m  : +m - +n )
       .sort( ( n, m ) => isMin ? +n - +m  : +m - +n )
       .forEach( key => {
       .forEach( key => {
-        register( breakpoints[ key ], `(${ isMin ? 'min' : 'max' }-width:${ key }px)` );
+        register( key, breakpoints[ key ], `(${ isMin ? 'min' : 'max' }-width:${ key }px)` );
       } );
       } );
 
 
-    register( options.reducedMotion || {}, '(prefers-reduced-motion: reduce)' );
+    register( 'motion', options.reducedMotion || {}, '(prefers-reduced-motion: reduce)' );
     update();
     update();
   }
   }
 
 
@@ -77,13 +78,14 @@ export function Media( Splide: Splide, Components: Components, options: Options
   /**
   /**
    * Registers entries as [ Options, media query string ].
    * Registers entries as [ Options, media query string ].
    *
    *
-   * @param options - Options.
+   * @param key     - An unique key.
+   * @param options - Options merged to current options when the query matches the media.
    * @param query   - A query string.
    * @param query   - A query string.
    */
    */
-  function register( options: Options, query: string ): void {
+  function register( key: string, options: Options, query: string ): void {
     const queryList = matchMedia( query );
     const queryList = matchMedia( query );
     binder.bind( queryList, 'change', update );
     binder.bind( queryList, 'change', update );
-    queries.push( [ options, queryList ] );
+    queries[ key ] = [ options, queryList ];
   }
   }
 
 
   /**
   /**
@@ -114,14 +116,27 @@ export function Media( Splide: Splide, Components: Components, options: Options
    * @return Merged options.
    * @return Merged options.
    */
    */
   function accumulate(): Options {
   function accumulate(): Options {
-    return queries.reduce<Options>( ( merged, entry ) => {
-      return merge( merged, entry[ 1 ].matches ? entry[ 0 ] : {} );
-    }, merge( {}, initialOptions ) );
+    return ownKeys( queries )
+      .reduce( ( merged, key ) => merge( merged, matches( key ) || {} ), merge( {}, initialOptions ) );
+  }
+
+  /**
+   * Finds the entry, `[ options, query ]` registered by the specified key,
+   * and returns options if the query matches the current media.
+   *
+   * @param key - A key.
+   *
+   * @return An object with options if found, or otherwise `null`.
+   */
+  function matches( key: string ): Options | null {
+    const entry = queries[ key ];
+    return ( entry && entry[ 1 ].matches ) ? entry[ 0 ] : null;
   }
   }
 
 
   return {
   return {
     setup,
     setup,
     mount: noop,
     mount: noop,
     destroy,
     destroy,
+    matches,
   };
   };
 }
 }

Bu fark içinde çok fazla dosya değişikliği olduğu için bazı dosyalar gösterilmiyor