ab-mediaquery - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

AB-mediaQuery.js

@@ -39,2 +39,3 @@ !(function(name, definition) {
 
+
   var MediaQuery = function(opt) {
@@ -44,3 +45,3 @@ if (!(this instanceof MediaQuery)) return new MediaQuery(opt);
     this.settings = extend({}, MediaQuery.defaults, opt);
-    this.queries  = [];
+    this.queries  = {};
     this.current  = '';
@@ -52,8 +53,6 @@
   MediaQuery.defaults = {
-    tiny:     0,
-    small:    480,
-    medium:   1024,
-    large:    1280,
-    huge:     1440,
-    unit:     "px"
+    small:    '30em',
+    medium:   '64em',
+    large:    '80em',
+    huge:     '90em'
   };
@@ -63,2 +62,10 @@
     init: function() {
+      this._defineQueries();
+      this.current = this._getCurrentSize();
+      this._watcher();
+
+      return this;
+    },
+
+    _defineQueries: function() {
       // Create #AB-mediaQuery element to extract mediaQueries from generated font-family CSS rule
@@ -69,46 +76,27 @@ var meta = document.createElement('meta');
 
-      var namedQueries = this.getQueries();
+      var namedQueries = this._getQueries();
+
+      // 'tiny' has specific rules
+      this.queries['tinyOnly'] = 'screen and (max-width: '+ (parseFloat(namedQueries.small)-0.01) +'em)';
+      this.queries['tiny']     = 'screen';
+
+      // define other media queries
       for (var key in namedQueries) {
         if (!namedQueries.hasOwnProperty( key )) continue;
 
-        if (key !== 'unit') {
-          this.queries.push({
-            name: key,
-            value: 'screen and (min-width: ' + namedQueries[key] + namedQueries.unit + ')'
-          });
-        }
-      }
-
-      this.current = this._getCurrentSize();
-      this._watcher();
-      this._setVar();
-
-      return this;
-    },
-
-    _setVar: function() {
-      var namedQueries = this.getQueries();
-      this.is = {};
-
-      for (var key in namedQueries) {
-        if (!namedQueries.hasOwnProperty(key) && key === 'unit') continue;
         switch (key) {
-          case 'tiny':
-            this.is[key + '_only'] = 'screen and (max-width: '+ (namedQueries.small-1) + namedQueries.unit +')';
-            this.is[key + '_up']   = 'screen and (min-width: '+ namedQueries[key] + namedQueries.unit +')';
-            break;
           case 'small':
-            this.is[key + '_only'] = 'screen and (min-width: '+ namedQueries[key] + namedQueries.unit +') and (max-width: '+ (namedQueries.medium-1) + namedQueries.unit +')';
-            this.is[key + '_up']   = 'screen and (min-width: '+ namedQueries[key] + namedQueries.unit +')';
+            this.queries[key + 'Only'] = 'screen and (min-width: '+ namedQueries[key] +') and (max-width: '+ (parseFloat(namedQueries.medium)-0.01) +'em)';
+            this.queries[key]          = 'screen and (min-width: '+ namedQueries[key] +')';
             break;
           case 'medium':
-            this.is[key + '_only'] = 'screen and (min-width: '+ namedQueries[key] + namedQueries.unit +') and (max-width: '+ (namedQueries.large-1) + namedQueries.unit +')';
-            this.is[key + '_up']   = 'screen and (min-width: '+ namedQueries[key] + namedQueries.unit +')';
+            this.queries[key + 'Only'] = 'screen and (min-width: '+ namedQueries[key] +') and (max-width: '+ (parseFloat(namedQueries.large)-0.01) +'em)';
+            this.queries[key]          = 'screen and (min-width: '+ namedQueries[key] +')';
             break;
           case 'large':
-            this.is[key + '_only'] = 'screen and (min-width: '+ namedQueries[key] + namedQueries.unit +') and (max-width: '+ (namedQueries.huge-1) + namedQueries.unit +')';
-            this.is[key + '_up']   = 'screen and (min-width: '+ namedQueries[key] + namedQueries.unit +')';
+            this.queries[key + 'Only'] = 'screen and (min-width: '+ namedQueries[key] +') and (max-width: '+ (parseFloat(namedQueries.huge)-0.01) +'em)';
+            this.queries[key]          = 'screen and (min-width: '+ namedQueries[key] +')';
             break;
           case 'huge':
-            this.is[key + '_up']   = 'screen and (min-width: '+ namedQueries[key] + namedQueries.unit +')';
+            this.queries[key]          = 'screen and (min-width: '+ namedQueries[key] +')';
             break;
@@ -120,19 +108,19 @@ }
     _getCurrentSize: function() {
-      var matched;
+      var matched,
+          that = this;
 
-      this.queries.forEach(function(el, i, array) {
-        if (window.matchMedia(el.value).matches) matched = el;
-      });
+      for (var key in that.queries) {
+        if (!that.queries.hasOwnProperty( key )) continue;
+        if (window.matchMedia(that.queries[key]).matches) matched = key;
+      }
 
-      if (typeof matched === 'object') {
-        return matched.name;
-      } else {
-        return matched;
-      }
+      if (typeof matched === 'object') return matched.name;
+      return matched;
     },
 
-    getQueries: function() {
-      var metaMD = document.getElementById('AB-mediaQuery');
-      var fontMD = window.getComputedStyle(metaMD, null).getPropertyValue("font-family");
-      var extractedStyles = decodeURI(fontMD.trim().slice(1, -1));
+    _getQueries: function() {
+      var metaMD = document.getElementById('AB-mediaQuery'),
+          fontMD = window.getComputedStyle(metaMD, null).getPropertyValue("font-family"),
+          extractedStyles = decodeURI(fontMD.trim().slice(1, -1));
+
       return isJson(extractedStyles) ? JSON.parse(extractedStyles) : this.settings;
@@ -143,9 +131,3 @@ },
       if (typeof size === 'undefined') return;
-
-      var queries = this.queries;
-
-      for (var i = 0, len = queries.length; i < len; i++) {
-        var thisQuery = queries[i];
-        if (size === thisQuery.name) return thisQuery.value;
-      }
+      return this.queries[size];
     },
@@ -167,7 +149,7 @@
           }
-        }, 200);
+        }, 150);
       };
     },
 
-    atLeast: function(size) {
+    is: function(size) {
       var query = this.get(size);
@@ -174,0 +156,0 @@ if (query) return window.matchMedia(query).matches;

package.json

 {
   "name": "ab-mediaquery",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "AB-mediaQuery is the JavaScript side of Media Queries. It proposes you some very useful methods for your scripts",
@@ -5,0 +5,0 @@ "main": "AB-mediaQuery.js",

README.md

@@ -11,3 +11,3 @@ # AB-mediaQuery
 
-The plugin is commonJS and AMD compliant.
+The plugin is CommonJS and AMD compliant.
 
@@ -17,3 +17,8 @@
 
-You only need to call that function to create `AB.mediaQuery` object and bind the breakpoint 'watcher':
+Define your breakpoints in your Sass or Less. include `AB-mediaQuery.scss` or `AB-mediaQuery.less` and edit breakpoints on your needs.
+
+That must be in EM: http://zellwk.com/blog/media-query-units/. Here is a calculator if needed: http://pxtoem.com/
+
+
+You then only need to call that function to create `AB.mediaQuery` object and bind the breakpoint 'watcher':
 ```
@@ -23,3 +28,13 @@ mediaQuery();
 
+In case you don't want to use Sass/Less definition, you can specify breakpoints on initialization:
+```
+mediaQuery({
+  small:    '480em',
+  medium:   '1024em',
+  large:    '1280em',
+  huge:     '1440em'
+});
+```
 
+
 ## What you get
@@ -33,6 +48,15 @@
 
-check if the current breakpoint is at least the specified one and return true/false:
+Check if window respects the breakpoint specified and return true/false. You can check:
+* tiny
+* tinyOnly
+* small
+* smallOnly
+* medium
+* mediumOnly
+* large
+* largeOnly
+* huge
 
 ```
-AB.mediaQuery.atLeast('small');
+AB.mediaQuery.is('smallOnly');
 ```
@@ -47,7 +71,2 @@
 
-You can list watched media queries generated by the plugin:
-```
-AB.mediaQuery.getQueries();
-```
-
 Return media query rule from breakpoint name:
@@ -54,0 +73,0 @@ ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

11137

increased by24.69%

Number of package files

7

increased by40%

Number of lines in readme file

72

increased by35.85%

Worsened metrics

Lines of code

129

decreased by-12.24%

No dependency changes