From e19168f44ca8e3b5936c965fbc917f56c3d72deb Mon Sep 17 00:00:00 2001 From: Alexander Dobetsberger Date: Tue, 6 Feb 2018 13:24:47 +0100 Subject: [PATCH 1/7] Add size data to callback --- src/ResizeSensor.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js index 0846014..91d3316 100755 --- a/src/ResizeSensor.js +++ b/src/ResizeSensor.js @@ -94,9 +94,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); } }; @@ -190,7 +190,11 @@ lastHeight = newHeight; if (element.resizedAttached) { - element.resizedAttached.call(); + element.resizedAttached.call( + { + width: lastWidth, + height: lastHeight + }); } }; From 2394495d5bf58445475067d83d112dc7906e6aca Mon Sep 17 00:00:00 2001 From: Alexander Dobetsberger Date: Tue, 6 Feb 2018 13:30:31 +0100 Subject: [PATCH 2/7] Add size data to callback --- src/ResizeSensor.js | 76 +++++++++++++++++++++++++++------------------ 1 file changed, 46 insertions(+), 30 deletions(-) diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js index 91d3316..621b275 100755 --- a/src/ResizeSensor.js +++ b/src/ResizeSensor.js @@ -152,32 +152,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 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; + }; 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'; - } - - 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; - } + // 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; + } + // Stop checking + else{ + initialHiddenCheck = false; + } + } + + resetExpandShrink_(); }; element.resizeSensor.resetSensor = reset; @@ -186,8 +204,8 @@ if (!dirty) return; - lastWidth = newWidth; - lastHeight = newHeight; + lastWidth = size.width; + lastHeight = size.height; if (element.resizedAttached) { element.resizedAttached.call( @@ -199,10 +217,8 @@ }; 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); @@ -222,8 +238,8 @@ addEvent(expand, 'scroll', onScroll); addEvent(shrink, 'scroll', onScroll); - // Fix for custom Elements - requestAnimationFrame(reset); + // Fix for custom Elements + requestAnimationFrame(reset); } forEachElement(element, function(elem){ From cbcfa9a7da5018c7397ac267b3e358131f25faea Mon Sep 17 00:00:00 2001 From: Alexander Dobetsberger Date: Tue, 6 Feb 2018 14:24:50 +0100 Subject: [PATCH 3/7] Use ResizeObserver when available --- src/ResizeSensor.js | 38 +++++++++++++++++++++++++++++++++----- 1 file changed, 33 insertions(+), 5 deletions(-) diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js index 621b275..cadfc74 100755 --- a/src/ResizeSensor.js +++ b/src/ResizeSensor.js @@ -83,6 +83,9 @@ * @constructor */ var ResizeSensor = function(element, callback) { + + var observer; + /** * * @constructor @@ -241,13 +244,38 @@ // Fix for custom Elements requestAnimationFrame(reset); } - - forEachElement(element, function(elem){ - attachResizeEvent(elem, callback); - }); + + if (typeof ResizeObserver != "undefined") { + observer = new ResizeObserver(function(entries){ + for (var entry of entries) { + callback.call( + this, + { + width: entry.contentRect.width, + height: entry.contentRect.height + } + ); + } + }); + if (element !== undefined) { + forEachElement(element, function(elem){ + observer.observe(elem); + }); + } + } + else { + 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() { From 82332b3d7fc9db688b7c9d50d6135b86630cd478 Mon Sep 17 00:00:00 2001 From: Alexander Dobetsberger Date: Wed, 14 Feb 2018 10:00:33 +0100 Subject: [PATCH 4/7] Fix IE11 --- src/ResizeSensor.js | 90 ++++++++++++++++++++++----------------------- 1 file changed, 45 insertions(+), 45 deletions(-) diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js index cadfc74..66b77b8 100755 --- a/src/ResizeSensor.js +++ b/src/ResizeSensor.js @@ -83,9 +83,9 @@ * @constructor */ var ResizeSensor = function(element, callback) { - + var observer; - + /** * * @constructor @@ -161,44 +161,44 @@ var lastWidth = size.width; var lastHeight = size.height; 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; - }; + expandChild.style.width = '100000px'; + expandChild.style.height = '100000px'; + + expand.scrollLeft = 100000; + expand.scrollTop = 100000; + + shrink.scrollLeft = 100000; + shrink.scrollTop = 100000; + }; 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; - } - // Stop checking - else{ - initialHiddenCheck = false; - } - } - - resetExpandShrink_(); + // 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; + } + // Stop checking + else{ + initialHiddenCheck = false; + } + } + + resetExpandShrink_(); }; element.resizeSensor.resetSensor = reset; @@ -240,22 +240,22 @@ addEvent(expand, 'scroll', onScroll); addEvent(shrink, 'scroll', onScroll); - + // Fix for custom Elements requestAnimationFrame(reset); } - + if (typeof ResizeObserver != "undefined") { - observer = new ResizeObserver(function(entries){ - for (var entry of entries) { + observer = new ResizeObserver(function(element){ + forEachElement(element, function (elem) { callback.call( this, { - width: entry.contentRect.width, - height: entry.contentRect.height + width: elem.contentRect.width, + height: elem.contentRect.height } ); - } + }); }); if (element !== undefined) { forEachElement(element, function(elem){ From 4d8f3ee750cc4c7336bb03cafa82b34aba75431f Mon Sep 17 00:00:00 2001 From: Alexander Dobetsberger Date: Wed, 14 Feb 2018 10:08:37 +0100 Subject: [PATCH 5/7] Whoops, wrong indentation --- src/ResizeSensor.js | 80 ++++++++++++++++++++++----------------------- 1 file changed, 40 insertions(+), 40 deletions(-) diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js index 66b77b8..9d5956c 100755 --- a/src/ResizeSensor.js +++ b/src/ResizeSensor.js @@ -83,9 +83,9 @@ * @constructor */ var ResizeSensor = function(element, callback) { - + var observer; - + /** * * @constructor @@ -161,44 +161,44 @@ var lastWidth = size.width; var lastHeight = size.height; 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; - }; + expandChild.style.width = '100000px'; + expandChild.style.height = '100000px'; + + expand.scrollLeft = 100000; + expand.scrollTop = 100000; + + shrink.scrollLeft = 100000; + shrink.scrollTop = 100000; + }; 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; - } - // Stop checking - else{ - initialHiddenCheck = false; - } - } - - resetExpandShrink_(); + // 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; + } + // Stop checking + else{ + initialHiddenCheck = false; + } + } + + resetExpandShrink_(); }; element.resizeSensor.resetSensor = reset; @@ -240,11 +240,11 @@ addEvent(expand, 'scroll', onScroll); addEvent(shrink, 'scroll', onScroll); - + // Fix for custom Elements requestAnimationFrame(reset); } - + if (typeof ResizeObserver != "undefined") { observer = new ResizeObserver(function(element){ forEachElement(element, function (elem) { From d4f6590e67060b3166b719abb1c6e03f6e0e80ba Mon Sep 17 00:00:00 2001 From: Alexander Dobetsberger Date: Thu, 1 Mar 2018 13:18:01 +0100 Subject: [PATCH 6/7] Use Spaces --- src/ResizeSensor.js | 68 ++++++++++++++++++++++----------------------- 1 file changed, 34 insertions(+), 34 deletions(-) diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js index 9d5956c..071858b 100755 --- a/src/ResizeSensor.js +++ b/src/ResizeSensor.js @@ -164,41 +164,41 @@ var resetExpandShrink_ = function () { - expandChild.style.width = '100000px'; - expandChild.style.height = '100000px'; - - expand.scrollLeft = 100000; - expand.scrollTop = 100000; - - shrink.scrollLeft = 100000; - shrink.scrollTop = 100000; - }; + expandChild.style.width = '100000px'; + expandChild.style.height = '100000px'; + + expand.scrollLeft = 100000; + expand.scrollTop = 100000; + + shrink.scrollLeft = 100000; + shrink.scrollTop = 100000; + }; 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; - } - // Stop checking - else{ - initialHiddenCheck = false; - } - } - - resetExpandShrink_(); + // 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; + } + // Stop checking + else{ + initialHiddenCheck = false; + } + } + + resetExpandShrink_(); }; element.resizeSensor.resetSensor = reset; From 3a6a8f9d673548c17221c269b6ddc5c21c5e60ab Mon Sep 17 00:00:00 2001 From: Alexander Dobetsberger Date: Thu, 1 Mar 2018 17:15:30 +0100 Subject: [PATCH 7/7] Cleanup --- src/ResizeSensor.js | 24 ++++++++++-------------- 1 file changed, 10 insertions(+), 14 deletions(-) diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js index 071858b..d03e17d 100755 --- a/src/ResizeSensor.js +++ b/src/ResizeSensor.js @@ -163,7 +163,7 @@ var initialHiddenCheck = true, resetRAF_id; - var resetExpandShrink_ = function () { + var resetExpandShrink = function () { expandChild.style.width = '100000px'; expandChild.style.height = '100000px'; @@ -173,13 +173,14 @@ shrink.scrollLeft = 100000; shrink.scrollTop = 100000; }; + var reset = function() { // Check if element is hidden - if (initialHiddenCheck){ + if (initialHiddenCheck) { if (!expand.scrollTop && !expand.scrollLeft) { // reset - resetExpandShrink_(); + resetExpandShrink(); // Check in next frame if (!resetRAF_id){ @@ -191,14 +192,13 @@ } return; - } - // Stop checking - else{ + } else { + // Stop checking initialHiddenCheck = false; } } - resetExpandShrink_(); + resetExpandShrink(); }; element.resizeSensor.resetSensor = reset; @@ -211,11 +211,7 @@ lastHeight = size.height; if (element.resizedAttached) { - element.resizedAttached.call( - { - width: lastWidth, - height: lastHeight - }); + element.resizedAttached.call(size); } }; @@ -245,7 +241,7 @@ requestAnimationFrame(reset); } - if (typeof ResizeObserver != "undefined") { + if (typeof ResizeObserver !== "undefined") { observer = new ResizeObserver(function(element){ forEachElement(element, function (elem) { callback.call( @@ -273,7 +269,7 @@ if (typeof ResizeObserver != "undefined") { observer.unobserve(element); } - else{ + else { ResizeSensor.detach(element, ev); } };