From 9fe2fbf47d1ab8b2f7ddc7765c46a8f23656af0b Mon Sep 17 00:00:00 2001 From: Julien Pradelle Date: Wed, 2 Oct 2019 17:43:36 +0200 Subject: [PATCH 1/9] Add support of sticky position on ResizeSensor (#277) --- src/ResizeSensor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js index ed4ef54..163292e 100755 --- a/src/ResizeSensor.js +++ b/src/ResizeSensor.js @@ -195,7 +195,7 @@ var computedStyle = window.getComputedStyle(element); var position = computedStyle ? computedStyle.getPropertyValue('position') : null; - if ('absolute' !== position && 'relative' !== position && 'fixed' !== position) { + if ('absolute' !== position && 'relative' !== position && 'fixed' !== position && 'sticky' !== position) { element.style.position = 'relative'; } From 4b06648bae36250ea6843a13a56ed5621e55d168 Mon Sep 17 00:00:00 2001 From: "Marc J. Schmidt" Date: Mon, 7 Oct 2019 14:42:36 +0200 Subject: [PATCH 2/9] Create FUNDING.yml --- .github/FUNDING.yml | 1 + 1 file changed, 1 insertion(+) create mode 100644 .github/FUNDING.yml diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 0000000..7e45dcf --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1 @@ +github: marcj From 1e406129f7112681d956eb36db0b0a3966e2ea7b Mon Sep 17 00:00:00 2001 From: Ruhao Gao Date: Fri, 22 Nov 2019 23:57:44 +0800 Subject: [PATCH 3/9] cancelAnimationFrame for reset when detach is called (#282) In ResizeSensor, we use requestAnimationFrame for reset. However, if an element is added to DOM and removed from DOM very quickly (even before the first reset happens), the reset itself will stuck in an infinite loop. It also causes memory leak because the reset function holds the element forever. --- src/ResizeSensor.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js index 163292e..2909cd0 100755 --- a/src/ResizeSensor.js +++ b/src/ResizeSensor.js @@ -102,6 +102,8 @@ * @constructor */ var ResizeSensor = function(element, callback) { + var lastAnimationFrame = 0; + /** * * @constructor @@ -204,7 +206,7 @@ var lastWidth = 0; var lastHeight = 0; var initialHiddenCheck = true; - var lastAnimationFrame = 0; + lastAnimationFrame = 0; var resetExpandShrink = function () { var width = element.offsetWidth; @@ -281,7 +283,7 @@ addEvent(shrink, 'scroll', onScroll); // Fix for custom Elements - requestAnimationFrame(reset); + lastAnimationFrame = requestAnimationFrame(reset); } forEachElement(element, function(elem){ @@ -289,6 +291,11 @@ }); this.detach = function(ev) { + // clean up the unfinished animation frame to prevent a potential endless requestAnimationFrame of reset + if (!lastAnimationFrame) { + window.cancelAnimationFrame(lastAnimationFrame); + lastAnimationFrame = 0; + } ResizeSensor.detach(element, ev); }; From 8f127c7c96cb8c21253cbe07cf2f1a826ac0b575 Mon Sep 17 00:00:00 2001 From: "Marc J. Schmidt" Date: Fri, 22 Nov 2019 17:13:16 +0100 Subject: [PATCH 4/9] bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 36a73d7..62e68f0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "css-element-queries", - "version": "1.2.1", + "version": "1.2.2", "description": "CSS-Element-Queries Polyfill. Proof-of-concept for high-speed element dimension/media queries in valid css.", "main": "index.js", "typings": "css-element-queries.d.ts", From 72adc49c52dc8bbc34de4e494952220fdae2af9e Mon Sep 17 00:00:00 2001 From: "Marc J. Schmidt" Date: Fri, 3 Jan 2020 17:23:18 +0100 Subject: [PATCH 5/9] Fixed #282, #285 - fix issue with detecting invisible elements. --- src/ResizeSensor.js | 39 ++++++++++++++++++++++++++------------- tests/demo.html | 33 +++++++++++++++++++++++++++++++-- 2 files changed, 57 insertions(+), 15 deletions(-) diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js index 2909cd0..12985d0 100755 --- a/src/ResizeSensor.js +++ b/src/ResizeSensor.js @@ -36,6 +36,13 @@ return globalWindow.setTimeout(fn, 20); }; + var cancelAnimationFrame = globalWindow.cancelAnimationFrame || + globalWindow.mozCancelAnimationFrame || + globalWindow.webkitCancelAnimationFrame || + function (timer) { + globalWindow.clearTimeout(timer); + }; + /** * Iterate over each of the provided element(s). * @@ -102,8 +109,9 @@ * @constructor */ var ResizeSensor = function(element, callback) { - var lastAnimationFrame = 0; - + //Is used when checking in reset() only for invisible elements + var lastAnimationFrameForInvisibleCheck = 0; + /** * * @constructor @@ -201,12 +209,15 @@ element.style.position = 'relative'; } - var dirty, rafId; + var dirty = false; + + //last request animation frame id used in onscroll event + var rafId = 0; var size = getElementSize(element); var lastWidth = 0; var lastHeight = 0; var initialHiddenCheck = true; - lastAnimationFrame = 0; + lastAnimationFrameForInvisibleCheck = 0; var resetExpandShrink = function () { var width = element.offsetWidth; @@ -228,10 +239,9 @@ var invisible = element.offsetWidth === 0 && element.offsetHeight === 0; if (invisible) { // Check in next frame - if (!lastAnimationFrame){ - lastAnimationFrame = requestAnimationFrame(function(){ - lastAnimationFrame = 0; - + if (!lastAnimationFrameForInvisibleCheck){ + lastAnimationFrameForInvisibleCheck = requestAnimationFrame(function(){ + lastAnimationFrameForInvisibleCheck = 0; reset(); }); } @@ -282,8 +292,11 @@ addEvent(expand, 'scroll', onScroll); addEvent(shrink, 'scroll', onScroll); - // Fix for custom Elements - lastAnimationFrame = requestAnimationFrame(reset); + // Fix for custom Elements and invisible elements + lastAnimationFrameForInvisibleCheck = requestAnimationFrame(function(){ + lastAnimationFrameForInvisibleCheck = 0; + reset(); + }); } forEachElement(element, function(elem){ @@ -292,9 +305,9 @@ this.detach = function(ev) { // clean up the unfinished animation frame to prevent a potential endless requestAnimationFrame of reset - if (!lastAnimationFrame) { - window.cancelAnimationFrame(lastAnimationFrame); - lastAnimationFrame = 0; + if (!lastAnimationFrameForInvisibleCheck) { + cancelAnimationFrame(lastAnimationFrameForInvisibleCheck); + lastAnimationFrameForInvisibleCheck = 0; } ResizeSensor.detach(element, ev); }; diff --git a/tests/demo.html b/tests/demo.html index d8a75c2..22968f0 100644 --- a/tests/demo.html +++ b/tests/demo.html @@ -97,6 +97,15 @@ .example-2[min-width~="400px"] .example-2-box { background-color: gray; } + + #example-invisible { + display: none; + } + + #example-invisible[min-width~="100px"]{ + color: red; + font-weight: bold; + } + + +

Performance Demo

@@ -393,4 +422,4 @@

Performance Demo

- \ No newline at end of file + From df88b1e9a738206cb0e624da424a19699d14638d Mon Sep 17 00:00:00 2001 From: "Marc J. Schmidt" Date: Fri, 3 Jan 2020 17:25:48 +0100 Subject: [PATCH 6/9] bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 62e68f0..964230f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "css-element-queries", - "version": "1.2.2", + "version": "1.2.3", "description": "CSS-Element-Queries Polyfill. Proof-of-concept for high-speed element dimension/media queries in valid css.", "main": "index.js", "typings": "css-element-queries.d.ts", From 97da8b71f90aa82d42ba61ebf2f05cf56f12cd24 Mon Sep 17 00:00:00 2001 From: Acinho <53146324+Acinho@users.noreply.github.com> Date: Tue, 14 Apr 2020 01:12:01 +0200 Subject: [PATCH 7/9] Fixed check for canceling last animation frame for invisible check (#289) Co-authored-by: Aleksandar Adamovic --- src/ResizeSensor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js index 12985d0..2bae953 100755 --- a/src/ResizeSensor.js +++ b/src/ResizeSensor.js @@ -305,7 +305,7 @@ this.detach = function(ev) { // clean up the unfinished animation frame to prevent a potential endless requestAnimationFrame of reset - if (!lastAnimationFrameForInvisibleCheck) { + if (lastAnimationFrameForInvisibleCheck) { cancelAnimationFrame(lastAnimationFrameForInvisibleCheck); lastAnimationFrameForInvisibleCheck = 0; } From ee21dfe74f096e8733183296ad34af89a18992ba Mon Sep 17 00:00:00 2001 From: Achara Date: Mon, 13 Apr 2020 19:14:10 -0400 Subject: [PATCH 8/9] fix invoking element.resizeSensor.resetSensor when it is undefined to cause js error (#291) Co-authored-by: akelley --- src/ResizeSensor.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js index 2bae953..9a25503 100755 --- a/src/ResizeSensor.js +++ b/src/ResizeSensor.js @@ -313,13 +313,19 @@ }; this.reset = function() { - element.resizeSensor.resetSensor(); + //To prevent invoking element.resizeSensor.resetSensor if it's undefined + if (element.resizeSensor.resetSensor) { + element.resizeSensor.resetSensor(); + } }; }; ResizeSensor.reset = function(element) { forEachElement(element, function(elem){ - elem.resizeSensor.resetSensor(); + //To prevent invoking element.resizeSensor.resetSensor if it's undefined + if (element.resizeSensor.resetSensor) { + elem.resizeSensor.resetSensor(); + } }); }; From 4eae4654f4683923153d8dd8f5c0d1bc2067b2a8 Mon Sep 17 00:00:00 2001 From: Maksym Kobieliev Date: Fri, 3 Jul 2020 18:51:03 +0300 Subject: [PATCH 9/9] Add a Size interface to the typings (#293) Co-authored-by: Maksym Kobieliev --- css-element-queries.d.ts | 2 +- src/ResizeSensor.d.ts | 7 ++++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/css-element-queries.d.ts b/css-element-queries.d.ts index 97ee144..3fe0706 100644 --- a/css-element-queries.d.ts +++ b/css-element-queries.d.ts @@ -1,2 +1,2 @@ -export { ResizeSensor, ResizeSensorCallback } from "./src/ResizeSensor"; +export { ResizeSensor, ResizeSensorCallback, Size } from "./src/ResizeSensor"; export { ElementQueries } from './src/ElementQueries'; \ No newline at end of file diff --git a/src/ResizeSensor.d.ts b/src/ResizeSensor.d.ts index ad6c412..3fba8c6 100644 --- a/src/ResizeSensor.d.ts +++ b/src/ResizeSensor.d.ts @@ -1,4 +1,9 @@ -export declare type ResizeSensorCallback = (size: { width: number; height: number; }) => void; +export declare interface Size { + width: number; + height: number; +} + +export declare type ResizeSensorCallback = (size: Size) => void; export declare class ResizeSensor { /**