Implemented better responsive image functionality.

Better readme

Author: marcj

README.md

@@ -1,5 +1,5 @@
-CSS Element Queries
-===================
+# CSS Element Queries
+
 
 [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/marcj/css-element-queries?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
 
@@ -15,43 +15,53 @@ Features:
  - no interval/timeout detection. Truly event-based through integrated ResizeSensor class.
  - no CSS modifications. Valid CSS Syntax
  - all CSS selectors available. Uses regular attribute selector. No need to write rules in HTML.
- - supports and tested in webkit, gecko and IE(7/8/9/10/11).
+ - supports and tested in webkit, gecko and IE(7/8/9/10/11)
  - `min-width`, `min-height`, `max-width` and `max-height` are supported so far
  - works with any layout modifications: HTML (innerHTML etc), inline styles, DOM mutation, CSS3 transitions, fluid layout changes (also percent changes), pseudo classes (:hover etc.), window resizes and more
  - no Javascript-Framework dependency (works with jQuery, Mootools, etc.)
+ - Works beautiful for responsive images without FOUC
 
 More demos and information: http://marcj.github.io/css-element-queries/
 
-Example
--------
+## Examples
+
+### Element Query
 
 ```css
-.widget-name {
-    padding: 25px;
+.widget-name h2 {
+    font-size: 12px;
 }
-.widget-name[max-width="200px"] {
-    padding: 0;
+
+.widget-name[min-width~="400px"] h2 {
+    font-size: 18px;
 }
-.widget-name[min-width="500px"] {
+
+.widget-name[min-width~="900px"] h2 {
     padding: 55px;
+    text-align: center;
+    font-size: 24px;
 }
 
-/* responsive images */
-.responsive-image img {
-    width: 100%;
+.widget-name[min-width~="700px"] h2 {
+    font-size: 34px;
+    color: red;
 }
+```
 
-.responsive-image[max-width^='400px'] img {
-    content: url(demo/image-400px.jpg);
-}
+```html
+<div class="widget-name">
+   <h2>Element responsiveness FTW!</h2>
+</div>
+```
 
-.responsive-image[max-width^='1000px'] img {
-    content: url(demo/image-1000px.jpg);
-}
+### Responsive image
 
-.responsive-image[min-width='1000px'] img {
-    content: url(demo/image-full.jpg);
-}
+```html
+    <div data-responsive-image>
+        <img data-src="http://placehold.it/350x150"/>
+        <img min-width="350" data-src="http://placehold.it/700x300"/>
+        <img min-width="700" data-src="http://placehold.it/1400x600"/>
+    </div>
 ```
 
 Include the javascript files at the bottom and you're good to go. No custom javascript calls needed.
@@ -61,6 +71,13 @@ Include the javascript files at the bottom and you're good to go. No custom java
 <script src="src/ElementQueries.js"></script>
 ```
 
+## See it in action:
+
+Here live http://marcj.github.io/css-element-queries/.
+
+![Demo](http://marcj.github.io/css-element-queries/images/css-element-queries-demo.gif)
+
+
 ## Module Loader
 
 If you're using a module loader you need to trigger the event listening or initialization yourself:
@@ -77,13 +94,12 @@ EQ.listen();
 EQ.init();
 ```
 
-Issues
-------
+## Issues
 
  - So far does not work on `img` and other elements that can't contain other elements. Wrapping with a `div` works fine though (See demo).
  - Adds additional hidden elements into selected target element and forces target element to be relative or absolute.
 
 
-License
--------
-MIT license. Copyright [Marc J. Schmidt](http://marcjschmidt.de/).
+## License
+
+MIT license. Copyright [Marc J. Schmidt](https://twitter.com/MarcJSchmidt).

src/ElementQueries.js

@@ -19,7 +19,7 @@
      */
     var ElementQueries = this.ElementQueries = function() {
 
-        this.withTracking = false;
+        var trackingActive = false;
         var elements = [];
 
         /**
@@ -130,6 +130,8 @@
                 }
 
                 for (var k in attributes) {
+                    if(!attributes.hasOwnProperty(k)) continue;
+
                     if (attrValues[attributes[k]]) {
                         this.element.setAttribute(attributes[k], attrValues[attributes[k]].substr(1));
                     } else {
@@ -155,7 +157,7 @@
             }
             element.elementQueriesSetupInformation.call();
 
-            if (ElementQueries.instance.withTracking && elements.indexOf(element) < 0) {
+            if (trackingActive && elements.indexOf(element) < 0) {
                 elements.push(element);
             }
         }
@@ -174,7 +176,7 @@
             else allQueries[mode][property][value] += ','+selector;
         }
 
-        function executeQueries() {
+        function getQuery() {
             var query;
             if (document.querySelectorAll) query = document.querySelectorAll.bind(document);
             if (!query && 'undefined' !== typeof $$) query = $$;
@@ -184,21 +186,135 @@
                 throw 'No document.querySelectorAll, jQuery or Mootools\'s $$ found.';
             }
 
+            return query;
+        }
+
+        /**
+         * Start the magic. Go through all collected rules (readRules()) and attach the resize-listener.
+         */
+        function findElementQueriesElements() {
+            var query = getQuery();
+
             for (var mode in allQueries) if (allQueries.hasOwnProperty(mode)) {
-              for (var property in allQueries[mode]) if (allQueries[mode].hasOwnProperty(property)) {
-                for (var value in allQueries[mode][property]) if (allQueries[mode][property].hasOwnProperty(value)) {
-                  var elements = query(allQueries[mode][property][value]);
-                  for (var i = 0, j = elements.length; i < j; i++) {
-                    setupElement(elements[i], {
-                      mode: mode,
-                      property: property,
-                      value: value
-                    });
-                  }
+
+                for (var property in allQueries[mode]) if (allQueries[mode].hasOwnProperty(property)) {
+                    for (var value in allQueries[mode][property]) if (allQueries[mode][property].hasOwnProperty(value)) {
+                        var elements = query(allQueries[mode][property][value]);
+                        for (var i = 0, j = elements.length; i < j; i++) {
+                            setupElement(elements[i], {
+                                mode: mode,
+                                property: property,
+                                value: value
+                            });
+                        }
+                    }
                 }
-              }
+
             }
+        }
+
+        /**
+         *
+         * @param {HTMLElement} element
+         */
+        function attachResponsiveImage(element) {
+            var children = [];
+            var rules = [];
+            var sources = [];
+            var defaultImageId = 0;
+            var lastActiveImage = -1;
+            var loadedImages = [];
 
+            for (var i in element.children) {
+                if(!element.children.hasOwnProperty(i)) continue;
+
+                if (element.children[i].tagName.toLowerCase() === 'img') {
+                    children.push(element.children[i]);
+
+                    var minWidth = element.children[i].getAttribute('min-width') || element.children[i].getAttribute('data-min-width');
+                    //var minHeight = element.children[i].getAttribute('min-height') || element.children[i].getAttribute('data-min-height');
+                    var src = element.children[i].getAttribute('data-src') || element.children[i].getAttribute('url');
+
+                    sources.push(src);
+
+                    var rule = {
+                        minWidth: minWidth
+                    };
+
+                    rules.push(rule);
+
+                    if (!minWidth) {
+                        defaultImageId = children.length - 1;
+                        element.children[i].style.display = 'block';
+                    } else {
+                        element.children[i].style.display = 'none';
+                    }
+                }
+            }
+
+            lastActiveImage = defaultImageId;
+
+            function check() {
+                var imageToDisplay = false, i;
+
+                for (i in children){
+                    if(!children.hasOwnProperty(i)) continue;
+
+                    if (rules[i].minWidth) {
+                        if (element.offsetWidth > rules[i].minWidth) {
+                            imageToDisplay = i;
+                        }
+                    }
+                }
+
+                if (!imageToDisplay) {
+                    //no rule matched, show default
+                    imageToDisplay = defaultImageId;
+                }
+
+                if (lastActiveImage != imageToDisplay) {
+                    //image change
+
+                    if (!loadedImages[imageToDisplay]){
+                        //image has not been loaded yet, we need to load the image first in memory to prevent flash of
+                        //no content
+
+                        var image = new Image();
+                        image.onload = function() {
+                            children[imageToDisplay].src = sources[imageToDisplay];
+
+                            children[lastActiveImage].style.display = 'none';
+                            children[imageToDisplay].style.display = 'block';
+
+                            loadedImages[imageToDisplay] = true;
+
+                            lastActiveImage = imageToDisplay;
+                        };
+
+                        image.src = sources[imageToDisplay];
+                    } else {
+                        children[lastActiveImage].style.display = 'none';
+                        children[imageToDisplay].style.display = 'block';
+                        lastActiveImage = imageToDisplay;
+                    }
+                }
+            }
+
+            element.resizeSensor = new ResizeSensor(element, check);
+            check();
+
+            if (trackingActive) {
+                elements.push(element);
+            }
+        }
+
+        function findResponsiveImages(){
+            var query = getQuery();
+
+            var elements = query('[data-responsive-image],[responsive-image]');
+            for (var i = 0, j = elements.length; i < j; i++) {
+                attachResponsiveImage(elements[i]);
+            }
         }
 
         var regex = /,?[\s\t]*([^,\n]*?)((?:\[[\s\t]*?(?:min|max)-(?:width|height)[\s\t]*?[~$\^]?=[\s\t]*?"[^"]*?"[\s\t]*?])+)([^,\n\s\{]*)/mgi;
@@ -249,14 +365,17 @@
             }
         }
 
+        var defaultCssInjected = false;
+
         /**
          * Searches all css rules and setups the event listener to all elements with element query rules..
          *
          * @param {Boolean} withTracking allows and requires you to use detach, since we store internally all used elements
          *                               (no garbage collection possible if you don not call .detach() first)
          */
         this.init = function(withTracking) {
-            this.withTracking = withTracking;
+            trackingActive = typeof withTracking === 'undefined' ? false : withTracking;
+
             for (var i = 0, j = document.styleSheets.length; i < j; i++) {
                 try {
                     readRules(document.styleSheets[i].cssRules || document.styleSheets[i].rules || document.styleSheets[i].cssText);
@@ -266,7 +385,17 @@
                     }
                 }
             }
-            executeQueries();
+
+            if (!defaultCssInjected) {
+                var style = document.createElement('style');
+                style.type = 'text/css';
+                style.innerHTML = '[responsive-image] > img, [data-responsive-image] {overflow: hidden; padding: 0; } [responsive-image] > img, [data-responsive-image] > img { width: 100%;}';
+                document.getElementsByTagName('head')[0].appendChild(style);
+                defaultCssInjected = true;
+            }
+
+            findElementQueriesElements();
+            findResponsiveImages();
         };
 
         /**
@@ -275,14 +404,13 @@
          *                               (no garbage collection possible if you don not call .detach() first)
          */
         this.update = function(withTracking) {
-            this.withTracking = withTracking;
-            this.init();
+            this.init(withTracking);
         };
 
         this.detach = function() {
             if (!this.withTracking) {
                 throw 'withTracking is not enabled. We can not detach elements since we don not store it.' +
-                'Use ElementQueries.withTracking = true; before domready.';
+                'Use ElementQueries.withTracking = true; before domready or call ElementQueryes.update(true).';
             }
 
             var element;
@@ -310,12 +438,18 @@
      */
     ElementQueries.detach = function(element) {
         if (element.elementQueriesSetupInformation) {
+            //element queries
             element.elementQueriesSensor.detach();
             delete element.elementQueriesSetupInformation;
             delete element.elementQueriesSensor;
-            console.log('detached');
+
+        } else if (element.resizeSensor) {
+            //responsive image
+
+            element.resizeSensor.detach();
+            delete element.resizeSensor;
         } else {
-            console.log('detached already', element);
+            //console.log('detached already', element);
         }
     };