fixed resize sensor with elements that start hidden

marcj · Oct 16, 2018 · 74791b6 · 74791b6
1 parent 45334e9
commit 74791b6
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 19 deletions.
diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js
@@ -153,21 +153,14 @@
             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 initialHiddenCheck = true, resetRAF_id;
-
-            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;
+            var lastAnimationFrame = 0;
 
+            var resetExpandShrink = function () {
                 expandChild.style.width = '100000px';
                 expandChild.style.height = '100000px';
 
@@ -176,10 +169,30 @@
 
                 shrink.scrollLeft = 100000;
                 shrink.scrollTop = 100000;
+            };
 
-                if (invisible) {
-                    element.style.display = saveDisplay;
+            var reset = function() {
+                // Check if element is hidden
+                if (initialHiddenCheck) {
+                    var invisible = element.offsetWidth === 0 && element.offsetHeight === 0;
+                    if (invisible) {
+                        // Check in next frame
+                        if (!lastAnimationFrame){
+                            lastAnimationFrame = requestAnimationFrame(function(){
+                                lastAnimationFrame = 0;
+
+                                reset();
+                            });
+                        }
+
+                        return;
+                    } else {
+                        // Stop checking
+                        initialHiddenCheck = false;
+                    }
                 }
+
+                resetExpandShrink();
             };
             element.resizeSensor.resetSensor = reset;
 
@@ -188,19 +201,17 @@
 
                 if (!dirty) return;
 
-                lastWidth = newWidth;
-                lastHeight = newHeight;
+                lastWidth = size.width;
+                lastHeight = size.height;
 
                 if (element.resizedAttached) {
                     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);

diff --git a/tests/late-trigger.html b/tests/late-trigger.html
@@ -0,0 +1,48 @@
+
+<head>
+    <style type="text/css">
+        #test {
+            border: 1px solid red;
+            padding: 20px;
+            text-align: center;
+            font-size: 30px;
+        }
+
+        #wrap {
+            border: 1px solid green;
+            padding: 20px;
+            text-align: center;
+            font-size: 30px;
+        }
+    </style>
+
+    <script src="../src/ResizeSensor.js"></script>
+</head>
+<body>
+    <div id="wrap" style="display: none">
+        <div id="test"><span id="title"></span></div>
+    </div>
+
+    <script type="application/javascript">
+
+        var test = document.getElementById("test");
+        var title = document.getElementById("title");
+
+        //we start hidden, and make it visible later on
+        new ResizeSensor(test, function(size) {
+            console.log('Triggered', size);
+            title.innerHTML = size.width + "px X " + size.height + "px";
+        });
+
+        setTimeout(function() {
+            console.log('This should trigger a resize sensor event');
+            document.getElementById("wrap").style.display = "block";
+        }, 2000);
+
+        setTimeout(function() {
+            console.log('Another trigger');
+            document.getElementById("wrap").style.maxWidth = "500px";
+        }, 4000);
+
+    </script>
+</body>