diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js index 0846014..d03e17d 100755 --- a/src/ResizeSensor.js +++ b/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() {