Added detach methods and fixed update method.

Author: marcj

src/ElementQueries.js

@@ -11,6 +11,10 @@
      * @constructor
      */
     var ElementQueries = this.ElementQueries = function() {
+
+        this.withTracking = false;
+        var elements = [];
+
         /**
          *
          * @param element
@@ -28,9 +32,8 @@
          *
          * @copyright https://github.com/Mr0grog/element-query/blob/master/LICENSE
          *
-         * @param element
-         * @param value
-         * @param units
+         * @param {HTMLElement} element
+         * @param {*} value
          * @returns {*}
          */
         function convertToPx(element, value) {
@@ -139,11 +142,15 @@
             } else {
                 element.elementQueriesSetupInformation = new SetupInformation(element);
                 element.elementQueriesSetupInformation.addOption(options);
-                new ResizeSensor(element, function() {
+                element.elementQueriesSensor = new ResizeSensor(element, function() {
                     element.elementQueriesSetupInformation.call();
                 });
             }
             element.elementQueriesSetupInformation.call();
+
+            if (this.withTracking) {
+                elements.push(element);
+            }
         }
 
         /**
@@ -218,23 +225,72 @@
 
         /**
          * 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() {
+        this.init = function(withTracking) {
+            this.withTracking = withTracking;
             for (var i = 0, j = document.styleSheets.length; i < j; i++) {
                 readRules(document.styleSheets[i].cssText || document.styleSheets[i].cssRules || document.styleSheets[i].rules);
             }
         };
 
-        this.update = function() {
+        /**
+         *
+         * @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.update = function(withTracking) {
+            this.withTracking = withTracking;
             this.init();
         };
+
+        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.';
+            }
+
+            var element;
+            while (element = elements.pop()) {
+                ElementQueries.detach(element);
+            }
+
+            elements = [];
+        };
     };
 
-    function init() {
-        ElementQueries.instance = new ElementQueries().init();
-        ElementQueries.update = function() {
-            ElementQueries.instance.update();
+    /**
+     *
+     * @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)
+     */
+    ElementQueries.update = function(withTracking) {
+        ElementQueries.instance.update(withTracking);
+    };
+
+    /**
+     * Removes all sensor and elementquery information from the element.
+     *
+     * @param {HTMLElement} element
+     */
+    ElementQueries.detach = function(element) {
+        if (element.elementQueriesSetupInformation) {
+            element.elementQueriesSensor.detach();
+            delete element.elementQueriesSetupInformation;
+            delete element.elementQueriesSensor;
+            console.log('detached');
+        } else {
+            console.log('detached already', element);
         }
+    };
+
+    ElementQueries.withTracking = false;
+
+    function init() {
+        ElementQueries.instance = new ElementQueries();
+        ElementQueries.instance.init(ElementQueries.withTracking);
     }
 
     if (window.addEventListener) {

src/ResizeSensor.js

@@ -102,7 +102,9 @@
             reset();
 
             var changed = function() {
-                element.resizedAttached.call();
+                if (element.resizedAttached) {
+                    element.resizedAttached.call();
+                }
             };
 
             var addEvent = function(el, name, cb) {
@@ -139,6 +141,18 @@
         } else {
             attachResizeEvent(element, callback);
         }
-    }
 
-})();
+        this.detach = function() {
+            ResizeSensor.detach(element);
+        };
+    };
+
+    this.ResizeSensor.detach = function(element) {
+        if (element.resizeSensor) {
+            element.removeChild(element.resizeSensor);
+            delete element.resizeSensor;
+            delete element.resizedAttached;
+        }
+    };
+
+})();

test/index.html

@@ -327,6 +327,29 @@
             }
         }
 
+        .dynamicElement {
+            margin: 50px;
+            width: 50px;
+
+            -moz-animation-name: animHeight;
+            animation-name: animHeight;
+            -webkit-animation-name: animHeight;
+
+            animation-duration: 3s;
+            -moz-animation-duration: 3s;
+            -webkit-animation-duration: 3s;
+            animation-iteration-count: infinite;
+            -webkit-animation-iteration-count: infinite;
+
+            display: inline-block;
+            border: 1px solid #eee;
+            background-color: #f9f9f9;
+        }
+
+        .dynamic {
+            margin: 15px;
+        }
+
     </style>
     Drag the gray line at the right to see it in action.
 </head>
@@ -378,7 +401,7 @@ <h2>Demo 4 - height<button id="startStop4">Start/Stop</button></h2>
             </div>
         </div>
 
-        <div style="height: 150px">
+        <div style="height: 200px">
             <div class="examplesResizerDemosXY">
                 <div id="example-5">
                     0 changes
@@ -426,5 +449,44 @@ <h2>Demo 4 - height<button id="startStop4">Start/Stop</button></h2>
                 });
             })();
         </script>
+        <div class="dynamic">
+            <input type="text" value="10" id="dynamicCount" />
+            <button onclick="addDynamic()">Add</button>
+            <button onclick="detachDynamic()">Detach</button>
+            <button onclick="removeDynamic()">Remove</button>
+            <div id="dynamicCounter"></div>
+            <div id="dynamicContainer"></div>
+        </div>
+        <script>
+            var container = $('dynamicContainer');
+            var dynamicCount = $('dynamicCount');
+            var dynamicCounter = $('dynamicCounter');
+
+            window.detachDynamic = function() {
+                container.getChildren().each(function(element) {
+                    ResizeSensor.detach(element);
+                });
+            };
+
+            window.removeDynamic = function() {
+                container.empty();
+            };
+
+            window.addDynamic = function() {
+                container.empty();
+                var i = 0, to = dynamicCount.value, div, counter = 0;
+                for (; i < to; i++) {
+                    div = new Element('div', {
+                        'class': 'dynamicElement',
+                        text: '#' + i
+                    }).inject(container);
+
+                    new ResizeSensor(div, function(){
+                        counter++;
+                        dynamicCounter.set('text', counter + ' changes.');
+                    });
+                }
+            }
+        </script>
     </div>
 </body>