gridle - npm Package Compare versions

Comparing version 2.0.1 to 2.0.2

bower.json

 {
   "name": "gridle",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "authors": [
@@ -25,4 +25,8 @@ "Olivier Bossel <[e-mail]>"
   ],
-  "dependencies": {
+  "dependencies": {},
+  "devDependencies": {
+    "css-element-queries": "https://github.com/marcj/css-element-queries.git#~0.3.0",
+    "jquery": "~2.1.4",
+    "matchMedia": "https://github.com/paulirish/matchMedia.js.git#~0.2.0"
   }
 }

doc/00.get-started.md

@@ -22,3 +22,3 @@ ## Get Started
 Or simply by downloading the package :
-[Download the package](http://google.com)
+[Download the package](https://github.com/olivierbossel/gridle/archive/2.0.0.zip)
 
@@ -25,0 +25,0 @@ ### Files structure

doc/05.mixins.md

@@ -555,2 +555,36 @@ ## Mixins
 
+### Gridle element queries
+
+Gridle has a support for element queries (Thanks to Marc J Schmidt for his wonderfull work on the "polyfill"). To make your element responsive to his own width, use this mixin as described bellow
+
+```fn
+@include gridle_eq( {width} );
+```
+
+```scss
+.component {
+	background: yellow;
+
+	@include gridle_eq(+600px) {
+		// when the component is 600px and greater
+		background: pink;
+	}
+	@include gridle_eq(-300px) {
+		// when the component is 300px and lower
+		background: green;
+	}
+	@include gridle_eq(-100px) {
+		// when the component is 100px and lower
+		background: black;
+
+		.my-nested-element {
+			display: none;
+		}
+	}
+}
+```
+
+> The browsers did not support them natively. To use element queries, you need to integrate the <strong>gridle-eq.js</strong> file.
+
+
 ### Gridle set
@@ -557,0 +591,0 @@

doc/08.gridle-js.md

@@ -13,2 +13,5 @@ ## Gridle JS (1.0)
 	<script src=".../gridle.js"></script>
+
+	<!-- if need element-queries support -->
+	<script src=".../gridle-eq.js"></script>
 	<!-- ... -->
@@ -37,7 +40,4 @@ </head>
 		// do something here...
-	},
+	}
 
-	// optional : if specified, will fetch only this css file, otherwise, will fetch all the css in document until find states
-	cssPath : 'css/grid.css'  	// default : null
-
 });
@@ -191,2 +191,9 @@ ```
 
-> Be careful, when listen for event through the body tag, the event name will be prefixed by "gridle.". For example, update will become "gridle.update"
+> Be careful, when listen for event through the body tag, the event name will be prefixed by "gridle.". For example, update will become "gridle.update"
+
+
+### Element queries support
+
+Gridle support element queries but for now, the browsers did not support them natively. To use element queries, you need to integrate the <strong>gridle-eq.js</strong> file.
+
+Element queries "polyfill" is provided by [Marc J Schmidt](https://github.com/marcj/css-element-queries). Thanks a lot to him for his wonderfull work! You can integrate his polyfill instead of using the gridle-eq.js file if you prefer.

js/gridle.js

@@ -9,6 +9,14 @@
  * @created 	20.05.14
- * @updated 	29.09.15
- * @version 	1.0.13
+ * @updated 	09.10.15
+ * @version 	1.0.14
  */
-(function() {
+(function(factory) {
+  if (typeof define === 'function' && define.amd) {
+    define([], factory);
+  } else if (typeof exports === 'object') {
+    factory();
+  } else {
+    factory();
+  }
+})(function() {
 
@@ -18,3 +26,3 @@ /*
    */
-  var smokesignals;
+  var domLoaded, smokesignals, _domLoaded;
   smokesignals = {
@@ -28,9 +36,9 @@ convert: function(obj, handlers) {
       obj.emit = function(eventName) {
-        var handler, i, len, ref;
+        var handler, _i, _len, _ref;
         if (!handlers[eventName]) {
           return;
         }
-        ref = handlers[eventName];
-        for (i = 0, len = ref.length; i < len; i++) {
-          handler = ref[i];
+        _ref = handlers[eventName];
+        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+          handler = _ref[_i];
           handler.apply(obj, Array.prototype.slice.call(arguments, 1));
@@ -53,3 +61,2 @@ continue;
     _statesFindedInCss: false,
-    _cssLinks: [],
     _cssSettings: [],
@@ -65,3 +72,2 @@ _states: [],
     _settings: {
-      cssPath: null,
       onUpdate: null,
@@ -75,3 +81,3 @@ debug: null
     init: function(settings) {
-      var _cssLinks, index, link, ref, ref1;
+      var _ref, _ref1;
       this._inited = true;
@@ -82,4 +88,4 @@ if (settings != null) {
       if (settings && (settings.debug != null)) {
-                if ((ref = this._settings.debug) != null) {
-          ref;
+                if ((_ref = this._settings.debug) != null) {
+          _ref;
         } else {
@@ -90,4 +96,4 @@ settings.debug;
       if (settings && (settings.onStatesChange != null)) {
-                if ((ref1 = this._settings.onStatesChange) != null) {
-          ref1;
+                if ((_ref1 = this._settings.onStatesChange) != null) {
+          _ref1;
         } else {
@@ -97,18 +103,8 @@ settings.onStatesChange;
       }
-      this._debug('ajax request on stylesheets to find gridle states');
-      if (this._settings.cssPath) {
-        this._cssLinks.push({
-          href: this._settings.cssPath
-        });
-      } else {
-        _cssLinks = document.getElementsByTagName('link');
-        for (index in _cssLinks) {
-          link = _cssLinks[index];
-          if (!link) {
-            return false;
-          }
-          this._cssLinks.push(link);
-        }
-      }
-      return this._loadAndParseCss(this._cssLinks.length ? void 0 : this._launch);
+      this._debug('waiting for content to be fully loaded');
+      return domLoaded((function(_this) {
+        return function() {
+          return _this._parseCss();
+        };
+      })(this));
     },
@@ -119,66 +115,51 @@
      */
-    _loadAndParseCss: function() {
-      var index, link, ref;
-      ref = this._cssLinks;
-      for (index in ref) {
-        link = ref[index];
-        if (this._statesFindedInCss) {
-          return false;
-        }
-        if (!link || !link.href) {
-          continue;
-        }
-        this._debug('|--- ajax request on ', link.href);
-        this._ajax({
-          async: true,
-          url: link.href,
-          success: (function(_this) {
-            return function(response) {
-              var settings;
-              if (_this._statesFindedInCss) {
-                return false;
-              }
-              if (!response) {
-                _this._noSettingsFindedInThisCss(link);
-                return false;
-              }
-              settings = response.match(/#gridle-settings(?:\s*)\{(?:\s*)content(?:\s*):(?:\s*)\'(.+)\'(;\s*|\s*)\}/) && RegExp.$1;
-              if (!settings) {
-                _this._noSettingsFindedInThisCss(link);
-                return false;
-              }
+    _parseCss: function() {
+      var e, i, idx, j, rule, rules, settings, settings_found;
+      i = 0;
+      j = document.styleSheets.length;
+      settings_found = false;
+      while (i < j) {
+        try {
+          rules = document.styleSheets[i].cssText || document.styleSheets[i].cssRules || document.styleSheets[i].rules;
+          if (typeof rules === 'string') {
+            settings = rules.match(/#gridle-settings(?:\s*)\{(?:\s*)content(?:\s*):(?:\s*)\"(.+)\"(;\s*|\s*)\}/) && RegExp.$1;
+            if (settings) {
               settings = settings.toString().replace(/\\/g, '');
               settings = JSON.parse(settings);
-              _this._cssSettings = settings;
-              if (!settings.states) {
-                _this._debug('no queries finded in css');
-                _this._noSettingsFindedInThisCss(link);
-                return false;
+              this._cssSettings = settings;
+              settings_found = true;
+              this._cssSettings = settings;
+              this._statesInCss = settings.states;
+            }
+          } else {
+            for (idx in rules) {
+              rule = rules[idx];
+              if (/#gridle-settings/.test(rule.cssText)) {
+                settings = rule.cssText.toString().match(/:(.*);/) && RegExp.$1;
+                settings = settings.toString().replace(/\\/g, '');
+                settings = settings.trim();
+                settings = settings.substr(1);
+                settings = settings.substr(0, settings.length - 1);
+                settings = JSON.parse(settings);
+                if ((settings != null ? settings.states : void 0) != null) {
+                  this._cssSettings = settings;
+                  this._statesInCss = settings.states;
+                  settings_found = true;
+                  continue;
+                }
               }
-              _this._debug('|--- states finded in', link.href);
-              _this._statesFindedInCss = true;
-              _this._statesInCss = settings.states;
-              return _this._processFindedStates();
-            };
-          })(this),
-          error: (function(_this) {
-            return function(error) {
-              if (_this._statesFindedInCss) {
-                return false;
-              }
-              return _this._noSettingsFindedInThisCss(link);
-            };
-          })(this),
-          dataType: 'text'
-        });
+            }
+          }
+        } catch (_error) {
+          e = _error;
+          if (e.name !== 'SecurityError') {
+            throw e;
+          }
+        }
+        i++;
       }
-    },
-
-    /*
-    		Css link processed
-     */
-    _noSettingsFindedInThisCss: function(link) {
-      this._cssLinks.shift;
-      if (!this._cssLinks.length) {
-        return this._debug('no settings finded in css');
+      if (this._statesInCss) {
+        return this._processFindedStates();
+      } else {
+        return this._debug("no states found...");
       }
@@ -191,7 +172,7 @@ },
     _processFindedStates: function() {
-      var name, query, ref;
+      var name, query, _ref;
       this._debug('begin process finded states in css');
-      ref = this._statesInCss;
-      for (name in ref) {
-        query = ref[name];
+      _ref = this._statesInCss;
+      for (name in _ref) {
+        query = _ref[name];
         this._registerState(name, query);
@@ -259,3 +240,3 @@ }
     _updateStatesStatus: function() {
-      var defaultState, defaultStateIdx, key, ref, state, wasDefault;
+      var defaultState, defaultStateIdx, key, state, wasDefault, _ref;
       defaultState = this.getDefaultState();
@@ -270,5 +251,5 @@ defaultStateIdx = this._states.indexOf(defaultState);
       this._updatedStatesNames = [];
-      ref = this._states;
-      for (key in ref) {
-        state = ref[key];
+      _ref = this._states;
+      for (key in _ref) {
+        state = _ref[key];
         if (!state.updateOnResize) {
@@ -324,5 +305,7 @@ continue;
      */
-    _validateState: function(state) {
-      return matchMedia(state.query).matches;
-    },
+    _validateState: (function(_this) {
+      return function(state) {
+        return matchMedia(state.query).matches;
+      };
+    })(this),
 
@@ -400,6 +383,6 @@ /*
     getDefaultState: function() {
-      var i, len, ref, state;
-      ref = this.getRegisteredStates();
-      for (i = 0, len = ref.length; i < len; i++) {
-        state = ref[i];
+      var state, _i, _len, _ref;
+      _ref = this.getRegisteredStates();
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        state = _ref[_i];
         if (state.name === 'default') {
@@ -464,7 +447,7 @@ return state;
     isActive: function(stateName) {
-      var index, isActive, name, ref;
+      var index, isActive, name, _ref;
       isActive = false;
-      ref = this._activeStatesNames;
-      for (index in ref) {
-        name = ref[index];
+      _ref = this._activeStatesNames;
+      for (index in _ref) {
+        name = _ref[index];
         if (stateName === name) {
@@ -493,15 +476,85 @@ isActive = true;
   };
+
+  /*
+  	 * DomLoaded
+   */
+  _domLoaded = false;
+  domLoaded = function(callback) {
+    var _loaded;
+    _loaded = function(callback) {
+      if (_domLoaded) {
+        callback();
+        return;
+      }
+      return /* Internet Explorer */
+			/*@cc_on
+			@if (@_win32 || @_win64)
+				document.write('<script id="ieScriptLoad" defer src="//:"><\/script>');
+				document.getElementById('ieScriptLoad').onreadystatechange = function() {
+					if (this.readyState == 'complete') {
+						_domLoaded = true;
+						callback();
+					}
+				};
+			@end @*/
+			/* Mozilla, Chrome, Opera */
+			if (document.addEventListener) {
+				document.addEventListener('DOMContentLoaded', function() {
+					_domLoaded = true;
+					callback();
+				}, false);
+			}
+			/* Safari, iCab, Konqueror */
+			if (/KHTML|WebKit|iCab/i.test(navigator.userAgent)) {
+				var DOMLoadTimer = setInterval(function () {
+					if (/loaded|complete/i.test(document.readyState)) {
+						_domLoaded = true;
+						callback();
+						clearInterval(DOMLoadTimer);
+					}
+				}, 10);
+			}
+			/* Other web browsers */
+			window.onload = function() {
+				_domLoaded = true;
+				callback();
+			};;
+    };
+    if (window.addEventListener) {
+      window.addEventListener('load', (function(_this) {
+        return function() {
+          _domLoaded = true;
+          return callback();
+        };
+      })(this), false);
+    } else {
+      window.attachEvent('onload', (function(_this) {
+        return function() {
+          _domLoaded = true;
+          return callback();
+        };
+      })(this));
+    }
+    return _loaded((function(_this) {
+      return function() {
+        return callback();
+      };
+    })(this));
+  };
   smokesignals.convert(window.Gridle);
-  setTimeout(function() {
-    if (!Gridle._inited) {
-      return Gridle.init();
-    }
-  }, 500);
+  domLoaded(function() {
+    return setTimeout(function() {
+      if (!Gridle._inited) {
+        return Gridle.init();
+      }
+    }, 500);
+  });
   if (typeof window.define === 'function' && window.define.amd) {
-    return window.define([], function() {
+    window.define([], function() {
       return window.Gridle;
     });
   }
-})();
+  return Gridle;
+});
 
 //# sourceMappingURL=gridle.js.map

js/gridle.min.js

@@ -1,1 +0,1 @@
-!function(){var a;return a={convert:function(a,b){return b={},a.on=function(c,d){return(b[c]=b[c]||[]).push(d),a},a.emit=function(c){var d,e,f,g;if(b[c]){for(g=b[c],e=0,f=g.length;f>e;e++)d=g[e],d.apply(a,Array.prototype.slice.call(arguments,1));return a}},a}},window.Gridle={_inited:!1,_isReady:!1,_statesInCss:null,_statesFindedInCss:!1,_cssLinks:[],_cssSettings:[],_states:[],_activeStates:[],_activeStatesNames:[],_inactiveStates:[],_inactiveStatesNames:[],_updatedStates:[],_updatedStatesNames:[],resizeTimeout:null,_settings:{cssPath:null,onUpdate:null,debug:null},init:function(a){var b,c,d,e,f;if(this._inited=!0,null!=a&&(this._settings=a),a&&null!=a.debug&&(null!=(e=this._settings.debug)||a.debug),a&&null!=a.onStatesChange&&(null!=(f=this._settings.onStatesChange)||a.onStatesChange),this._debug("ajax request on stylesheets to find gridle states"),this._settings.cssPath)this._cssLinks.push({href:this._settings.cssPath});else{b=document.getElementsByTagName("link");for(c in b){if(d=b[c],!d)return!1;this._cssLinks.push(d)}}return this._loadAndParseCss(this._cssLinks.length?void 0:this._launch)},_loadAndParseCss:function(){var a,b,c;c=this._cssLinks;for(a in c){if(b=c[a],this._statesFindedInCss)return!1;b&&b.href&&(this._debug("|--- ajax request on ",b.href),this._ajax({async:!0,url:b.href,success:function(a){return function(c){var d;return a._statesFindedInCss?!1:c&&(d=c.match(/#gridle-settings(?:\s*)\{(?:\s*)content(?:\s*):(?:\s*)\'(.+)\'(;\s*|\s*)\}/)&&RegExp.$1)?(d=d.toString().replace(/\\/g,""),d=JSON.parse(d),a._cssSettings=d,d.states?(a._debug("|--- states finded in",b.href),a._statesFindedInCss=!0,a._statesInCss=d.states,a._processFindedStates()):(a._debug("no queries finded in css"),a._noSettingsFindedInThisCss(b),!1)):(a._noSettingsFindedInThisCss(b),!1)}}(this),error:function(a){return function(c){return a._statesFindedInCss?!1:a._noSettingsFindedInThisCss(b)}}(this),dataType:"text"}))}},_noSettingsFindedInThisCss:function(a){return this._cssLinks.shift,this._cssLinks.length?void 0:this._debug("no settings finded in css")},_processFindedStates:function(){var a,b,c;this._debug("begin process finded states in css"),c=this._statesInCss;for(a in c)b=c[a],this._registerState(a,b);return this._launch()},_launch:function(){return this._debug("launch"),this._isReady=!0,this._crossEmit("ready"),this._addEvent(window,"resize",function(a){return function(b){return clearTimeout(a.resizeTimeout),a.resizeTimeout=setTimeout(function(){return a._onResize()},100)}}(this)),this._onResize()},_onResize:function(){var a;return a=[],this._updateStatesStatus(),this.getActiveStatesNames().length&&this._debug("active states",this.getActiveStatesNames().join(",")),this.getInactiveStatesNames().length&&this._debug("inactive states",this.getInactiveStatesNames().join(",")),this.getUpdatedStatesNames().length?this._debug("updated states",this.getUpdatedStatesNames().join(",")):void 0},_registerState:function(a,b,c){var d;return d={name:a,query:b.query,settings:b,status:null,previous_status:null,updateOnResize:null!=c?c:!0},this._states.push(d),this._debug("|--- register state",a,d)},_updateStatesStatus:function(){var a,b,c,d,e,f;a=this.getDefaultState(),b=this._states.indexOf(a),f=a.status,this._activeStates=[],this._activeStatesNames=[],this._inactiveStates=[],this._inactiveStatesNames=[],this._updatedStates=[],this._updatedStatesNames=[],d=this._states;for(c in d)e=d[c],e.updateOnResize&&(this._states[c].previous_status=e.status,this._validateState(e)?(this._states[c].status||(this._updatedStates.push(e),this._updatedStatesNames.push(e.name)),this._states[c].status=!0,this._activeStates.push(e),this._activeStatesNames.push(e.name)):"default"!==e.name&&(this._states[c].status&&(this._updatedStates.push(e),this._updatedStatesNames.push(e.name)),this._states[c].status=!1,this._inactiveStates.push(e),this._inactiveStatesNames.push(e.name)));return this._activeStates.length?(this._states[b].status=!1,this._inactiveStates.push(a),this._inactiveStatesNames.push("default"),f&&(this._updatedStates.push(a),this._updatedStatesNames.push("default"))):(this._states[b].status=!0,this._activeStates.push(a),this._activeStatesNames.push("default"),f||(this._updatedStates.push(a),this._updatedStatesNames.push("default"))),this._updatedStates.length&&this._crossEmit("update",this._updatedStates,this._activeStates,this._inactiveStates),this._updatedStates.length&&this._settings.onUpdate?this._settings.onUpdate(this._updatedStates,this._activeStates,this._inactiveStates):void 0},_validateState:function(a){return matchMedia(a.query).matches},_addEvent:function(a,b,c){return a?a.addEventListener?a.addEventListener(b,c,!1):a.attachEvent?a.attachEvent("on"+b,c):a["on"+b]=c:!1},_crossEmit:function(a){return"undefined"!=typeof jQuery&&null!==jQuery&&(jQuery(this).trigger(a,Array.prototype.slice.call(arguments,1)),jQuery("body").trigger("gridle."+a,Array.prototype.slice.call(arguments,1))),this.emit.apply(this,arguments)},_ajax:function(a){var b,c;return b={type:a.type||"GET",url:a.url,success:a.success,error:a.error,dataType:a.dataType||"text",context:a.context},c=new XMLHttpRequest,b.context&&(c.context=b.context),c.open(b.type,b.url,!0),c.onreadystatechange=function(){var a;if(4!==c.readyState)return!1;switch(c.status){case 200:switch(b.dataType){case"json":a=JSON.parse(c.responseText);break;default:a=c.responseText}if(b.success)return b.success(a,c.status,c)}},c.send()},getDefaultState:function(){var a,b,c,d;for(c=this.getRegisteredStates(),a=0,b=c.length;b>a;a++)if(d=c[a],"default"===d.name)return d},getRegisteredStates:function(){return this._states},getUpdatedStates:function(){return this._updatedStates},getUpdatedStatesNames:function(){return this._updatedStatesNames},getActiveStates:function(){return this._activeStates},getActiveStatesNames:function(){return this._activeStatesNames},getInactiveStates:function(){return this._inactiveStates},getInactiveStatesNames:function(){return this._inactiveStatesNames},isActive:function(a){var b,c,d,e;c=!1,e=this._activeStatesNames;for(b in e)d=e[b],a===d&&(c=!0);return c},isReady:function(){return this._isReady},_debug:function(){return this._settings.debug?console.log("GRIDLE",arguments):void 0}},a.convert(window.Gridle),setTimeout(function(){return Gridle._inited?void 0:Gridle.init()},500),"function"==typeof window.define&&window.define.amd?window.define([],function(){return window.Gridle}):void 0}();
+!function(a){"function"==typeof define&&define.amd?define([],a):("object"==typeof exports,a())}(function(){var a,b,c;return b={convert:function(a,b){return b={},a.on=function(c,d){return(b[c]=b[c]||[]).push(d),a},a.emit=function(c){var d,e,f,g;if(b[c]){for(g=b[c],e=0,f=g.length;f>e;e++)d=g[e],d.apply(a,Array.prototype.slice.call(arguments,1));return a}},a}},window.Gridle={_inited:!1,_isReady:!1,_statesInCss:null,_statesFindedInCss:!1,_cssSettings:[],_states:[],_activeStates:[],_activeStatesNames:[],_inactiveStates:[],_inactiveStatesNames:[],_updatedStates:[],_updatedStatesNames:[],resizeTimeout:null,_settings:{onUpdate:null,debug:null},init:function(b){var c,d;return this._inited=!0,null!=b&&(this._settings=b),b&&null!=b.debug&&(null!=(c=this._settings.debug)||b.debug),b&&null!=b.onStatesChange&&(null!=(d=this._settings.onStatesChange)||b.onStatesChange),this._debug("waiting for content to be fully loaded"),a(function(a){return function(){return a._parseCss()}}(this))},_parseCss:function(){var a,b,c,d,e,f,g,h;for(b=0,d=document.styleSheets.length,h=!1;d>b;){try{if(f=document.styleSheets[b].cssText||document.styleSheets[b].cssRules||document.styleSheets[b].rules,"string"==typeof f)g=f.match(/#gridle-settings(?:\s*)\{(?:\s*)content(?:\s*):(?:\s*)\"(.+)\"(;\s*|\s*)\}/)&&RegExp.$1,g&&(g=g.toString().replace(/\\/g,""),g=JSON.parse(g),this._cssSettings=g,h=!0,this._cssSettings=g,this._statesInCss=g.states);else for(c in f)e=f[c],/#gridle-settings/.test(e.cssText)&&(g=e.cssText.toString().match(/:(.*);/)&&RegExp.$1,g=g.toString().replace(/\\/g,""),g=g.trim(),g=g.substr(1),g=g.substr(0,g.length-1),g=JSON.parse(g),null!=(null!=g?g.states:void 0))&&(this._cssSettings=g,this._statesInCss=g.states,h=!0)}catch(i){if(a=i,"SecurityError"!==a.name)throw a}b++}return this._statesInCss?this._processFindedStates():this._debug("no states found...")},_processFindedStates:function(){var a,b,c;this._debug("begin process finded states in css"),c=this._statesInCss;for(a in c)b=c[a],this._registerState(a,b);return this._launch()},_launch:function(){return this._debug("launch"),this._isReady=!0,this._crossEmit("ready"),this._addEvent(window,"resize",function(a){return function(){return clearTimeout(a.resizeTimeout),a.resizeTimeout=setTimeout(function(){return a._onResize()},100)}}(this)),this._onResize()},_onResize:function(){var a;return a=[],this._updateStatesStatus(),this.getActiveStatesNames().length&&this._debug("active states",this.getActiveStatesNames().join(",")),this.getInactiveStatesNames().length&&this._debug("inactive states",this.getInactiveStatesNames().join(",")),this.getUpdatedStatesNames().length?this._debug("updated states",this.getUpdatedStatesNames().join(",")):void 0},_registerState:function(a,b,c){var d;return d={name:a,query:b.query,settings:b,status:null,previous_status:null,updateOnResize:null!=c?c:!0},this._states.push(d),this._debug("|--- register state",a,d)},_updateStatesStatus:function(){var a,b,c,d,e,f;a=this.getDefaultState(),b=this._states.indexOf(a),e=a.status,this._activeStates=[],this._activeStatesNames=[],this._inactiveStates=[],this._inactiveStatesNames=[],this._updatedStates=[],this._updatedStatesNames=[],f=this._states;for(c in f)d=f[c],d.updateOnResize&&(this._states[c].previous_status=d.status,this._validateState(d)?(this._states[c].status||(this._updatedStates.push(d),this._updatedStatesNames.push(d.name)),this._states[c].status=!0,this._activeStates.push(d),this._activeStatesNames.push(d.name)):"default"!==d.name&&(this._states[c].status&&(this._updatedStates.push(d),this._updatedStatesNames.push(d.name)),this._states[c].status=!1,this._inactiveStates.push(d),this._inactiveStatesNames.push(d.name)));return this._activeStates.length?(this._states[b].status=!1,this._inactiveStates.push(a),this._inactiveStatesNames.push("default"),e&&(this._updatedStates.push(a),this._updatedStatesNames.push("default"))):(this._states[b].status=!0,this._activeStates.push(a),this._activeStatesNames.push("default"),e||(this._updatedStates.push(a),this._updatedStatesNames.push("default"))),this._updatedStates.length&&this._crossEmit("update",this._updatedStates,this._activeStates,this._inactiveStates),this._updatedStates.length&&this._settings.onUpdate?this._settings.onUpdate(this._updatedStates,this._activeStates,this._inactiveStates):void 0},_validateState:function(){return function(a){return matchMedia(a.query).matches}}(this),_addEvent:function(a,b,c){return a?a.addEventListener?a.addEventListener(b,c,!1):a.attachEvent?a.attachEvent("on"+b,c):a["on"+b]=c:!1},_crossEmit:function(a){return"undefined"!=typeof jQuery&&null!==jQuery&&(jQuery(this).trigger(a,Array.prototype.slice.call(arguments,1)),jQuery("body").trigger("gridle."+a,Array.prototype.slice.call(arguments,1))),this.emit.apply(this,arguments)},_ajax:function(a){var b,c;return b={type:a.type||"GET",url:a.url,success:a.success,error:a.error,dataType:a.dataType||"text",context:a.context},c=new XMLHttpRequest,b.context&&(c.context=b.context),c.open(b.type,b.url,!0),c.onreadystatechange=function(){var a;if(4!==c.readyState)return!1;switch(c.status){case 200:switch(b.dataType){case"json":a=JSON.parse(c.responseText);break;default:a=c.responseText}if(b.success)return b.success(a,c.status,c)}},c.send()},getDefaultState:function(){var a,b,c,d;for(d=this.getRegisteredStates(),b=0,c=d.length;c>b;b++)if(a=d[b],"default"===a.name)return a},getRegisteredStates:function(){return this._states},getUpdatedStates:function(){return this._updatedStates},getUpdatedStatesNames:function(){return this._updatedStatesNames},getActiveStates:function(){return this._activeStates},getActiveStatesNames:function(){return this._activeStatesNames},getInactiveStates:function(){return this._inactiveStates},getInactiveStatesNames:function(){return this._inactiveStatesNames},isActive:function(a){var b,c,d,e;c=!1,e=this._activeStatesNames;for(b in e)d=e[b],a===d&&(c=!0);return c},isReady:function(){return this._isReady},_debug:function(){return this._settings.debug?console.log("GRIDLE",arguments):void 0}},c=!1,a=function(a){var b;return b=function(a){return c?void a():void 0},window.addEventListener?window.addEventListener("load",function(){return function(){return c=!0,a()}}(this),!1):window.attachEvent("onload",function(){return function(){return c=!0,a()}}(this)),b(function(){return function(){return a()}}(this))},b.convert(window.Gridle),a(function(){return setTimeout(function(){return Gridle._inited?void 0:Gridle.init()},500)}),"function"==typeof window.define&&window.define.amd&&window.define([],function(){return window.Gridle}),Gridle});

package.json

 {
   "name": "gridle",
   "description": "Gridle grid system",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "main": "sass/gridle/_gridle.scss",
@@ -18,4 +18,6 @@ "scripts": {
     "grunt": ">=0.4.4",
+    "grunt-contrib-clean": "^0.6.0",
     "grunt-contrib-coffee": ">=0.9.0",
     "grunt-contrib-compass": ">=0.7.1",
+    "grunt-contrib-concat": "^0.5.1",
     "grunt-contrib-cssmin": "^0.12.0",
@@ -22,0 +24,0 @@ "grunt-contrib-sass": ">=0.7.3",

README.md

@@ -1,2 +0,2 @@
-# gridle (v2.0.1)
+# gridle (v2.0.2)
 
@@ -113,2 +113,29 @@
 
+## Element queries support
+
+Gridle has support for element queries with an easy mixin as all the rest of the framework. Thanks to [Marc J Schmidt](https://github.com/marcj/css-element-queries) for his awesome work on the hight efficient "polyfill".
+
+```scss
+.component {
+	background: yellow;
+
+	@include gridle_eq(+600px) {
+		// when the component is 600px and greater
+		background: pink;
+	}
+	@include gridle_eq(-300px) {
+		// when the component is 300px and lower
+		background: green;
+	}
+	@include gridle_eq(-100px) {
+		// when the component is 100px and lower
+		background: black;
+
+		.my-nested-element {
+			display: none;
+		}
+	}
+}
+```
+
 ## Flex as a choice
@@ -115,0 +142,0 @@

No alert changes

Improved metrics

Total package byte prevSize

1566703

increased by2.9%

Number of package files

63

increased by6.78%

Lines of code

14452

increased by3.97%

Number of lines in readme file

206

increased by15.08%

Worsened metrics

Dev dependency count

14

increased by16.67%

No dependency changes