feat: add "MediaQuery.upTo()" and support of "down" mq to "MediaQuery.is()"

diff --git a/js/foundation.util.mediaQuery.js b/js/foundation.util.mediaQuery.js
index ae408543af3df5bd036d9a71e959e5ac4672034f..cd3f5888b8c261c70eda1423e082667166f3564e 100644 (file)
--- a/js/foundation.util.mediaQuery.js
+++ b/js/foundation.util.mediaQuery.js
@@ -142,6 +142,23 @@ var MediaQuery = {
     return false;
   },
 
+  /**
+   * Checks if the screen is as wide as a breakpoint or smaller.
+   * @function
+   * @param {String} size - Name of the breakpoint to check.
+   * @returns {Boolean} `true` if the breakpoint matches, `false` if it's wider.
+   */
+  upTo(size) {
+    const firstMatch = this.queries.find((query) => {
+      return window.matchMedia(query.value).matches
+    });
+    const firstMatchName = (typeof matched === 'object')
+      ? firstMatch.name
+      : firstMatch;
+
+    return size === firstMatchName;
+  },
+
   /**
    * Checks if the screen matches to a breakpoint.
    * @function
@@ -160,6 +177,10 @@ var MediaQuery = {
     if (bpModifier === 'down') {
       return this.atLeast(bpSize);
     }
+    // At leat the breakpoint  (included)
+    if (!bpModifier || bpModifier === 'up') {
+      return this.upTo(bpSize);
+    }
 
     throw new Error(`
       invalid breakpoint passed to MediaQuery.is().