Use ResizeObserver when available and check for initial invisible elements (marcj#213)

ResizeObserver is Chrome only at the moment.

When a resize  sensor has been added to an invisible element, then we check coming with this commit every frame whether it is actually visible (rendered) and then start the sensor process. Otherwise the sensor would just not work on initial invisible elements.

Author: movedoa

src/ResizeSensor.js

@@ -83,6 +83,9 @@
      * @constructor
      */
     var ResizeSensor = function(element, callback) {
+       
+        var observer;
+       
         /**
          *
          * @constructor
@@ -94,9 +97,9 @@
             };
 
             var i, j;
-            this.call = function() {
+            this.call = function(sizeInfo) {
                 for (i = 0, j = q.length; i < j; i++) {
-                    q[i].call();
+                    q[i].call(this, sizeInfo);
                 }
             };
 
@@ -152,32 +155,50 @@
             var expand = element.resizeSensor.childNodes[0];
             var expandChild = expand.childNodes[0];
             var shrink = element.resizeSensor.childNodes[1];
-            var dirty, rafId, newWidth, newHeight;
+
+            var dirty, rafId;
             var size = getElementSize(element);
             var lastWidth = size.width;
             var lastHeight = size.height;
-
-            var reset = function() {
-                //set display to block, necessary otherwise hidden elements won't ever work
-                var invisible = element.offsetWidth === 0 && element.offsetHeight === 0;
-
-                if (invisible) {
-                    var saveDisplay = element.style.display;
-                    element.style.display = 'block';
-                }
-
+            var initialHiddenCheck = true, resetRAF_id;
+            
+            
+            var resetExpandShrink = function () {
                 expandChild.style.width = '100000px';
                 expandChild.style.height = '100000px';
-
+        
                 expand.scrollLeft = 100000;
                 expand.scrollTop = 100000;
-
+        
                 shrink.scrollLeft = 100000;
                 shrink.scrollTop = 100000;
+            };
 
-                if (invisible) {
-                    element.style.display = saveDisplay;
+            var reset = function() {
+                // Check if element is hidden
+                if (initialHiddenCheck) {
+                    if (!expand.scrollTop && !expand.scrollLeft) {
+
+                        // reset
+                        resetExpandShrink();
+
+                        // Check in next frame
+                        if (!resetRAF_id){
+                            resetRAF_id = requestAnimationFrame(function(){
+                                resetRAF_id = 0;
+                                
+                                reset();
+                            });
+                        }
+                        
+                        return;
+                    } else {
+                        // Stop checking
+                        initialHiddenCheck = false;
+                    }
                 }
+
+                resetExpandShrink();
             };
             element.resizeSensor.resetSensor = reset;
 
@@ -186,19 +207,17 @@
 
                 if (!dirty) return;
 
-                lastWidth = newWidth;
-                lastHeight = newHeight;
+                lastWidth = size.width;
+                lastHeight = size.height;
 
                 if (element.resizedAttached) {
-                    element.resizedAttached.call();
+                    element.resizedAttached.call(size);
                 }
             };
 
             var onScroll = function() {
-                var size = getElementSize(element);
-                var newWidth = size.width;
-                var newHeight = size.height;
-                dirty = newWidth != lastWidth || newHeight != lastHeight;
+                size = getElementSize(element);
+                dirty = size.width !== lastWidth || size.height !== lastHeight;
 
                 if (dirty && !rafId) {
                     rafId = requestAnimationFrame(onResized);
@@ -218,16 +237,41 @@
             addEvent(expand, 'scroll', onScroll);
             addEvent(shrink, 'scroll', onScroll);
 
-			// Fix for custom Elements
-			requestAnimationFrame(reset);
+            // Fix for custom Elements
+            requestAnimationFrame(reset);
+        }
+         
+        if (typeof ResizeObserver !== "undefined") {
+            observer = new ResizeObserver(function(element){
+                forEachElement(element, function (elem) {
+                    callback.call(
+                        this,
+                        {
+                            width: elem.contentRect.width,
+                            height: elem.contentRect.height
+                        }
+                   );
+                });
+            });
+            if (element !== undefined) {
+                forEachElement(element, function(elem){
+                   observer.observe(elem);
+                });
+            }
+        }
+        else {
+            forEachElement(element, function(elem){
+                attachResizeEvent(elem, callback);
+            });
         }
-
-        forEachElement(element, function(elem){
-            attachResizeEvent(elem, callback);
-        });
 
         this.detach = function(ev) {
-            ResizeSensor.detach(element, ev);
+            if (typeof ResizeObserver != "undefined") {
+               observer.unobserve(element);
+            }
+            else {
+                ResizeSensor.detach(element, ev);
+            }
         };
 
         this.reset = function() {