From 7587a6553a8a240fe20479703bbd9d971571b51f Mon Sep 17 00:00:00 2001 From: Stephen Lautier
Date: Thu, 9 May 2019 11:13:38 +0200 Subject: [PATCH 01/17] feat(typings): export TS typings (#266) --- css-element-queries.d.ts | 1 + package.json | 1 + src/ResizeSensor.d.ts | 2 +- 3 files changed, 3 insertions(+), 1 deletion(-) create mode 100644 css-element-queries.d.ts diff --git a/css-element-queries.d.ts b/css-element-queries.d.ts new file mode 100644 index 0000000..0ca3bc3 --- /dev/null +++ b/css-element-queries.d.ts @@ -0,0 +1 @@ +export { ResizeSensor, ResizeSensorCallback } from "./src/ResizeSensor"; \ No newline at end of file diff --git a/package.json b/package.json index 154a842..8c38109 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "1.1.1", "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", "directories": { "test": "test" }, diff --git a/src/ResizeSensor.d.ts b/src/ResizeSensor.d.ts index b0a5fdf..634ced0 100644 --- a/src/ResizeSensor.d.ts +++ b/src/ResizeSensor.d.ts @@ -1,6 +1,6 @@ export declare type ResizeSensorCallback = (size: { width: number; height: number; }) => void; -declare class ResizeSensor { +export declare class ResizeSensor { constructor(element: Element | Element[], callback: ResizeSensorCallback); detach(callback?: ResizeSensorCallback): void; reset(): void; From 0cadf8d661208028768ec25be239e1c78cfba9ea Mon Sep 17 00:00:00 2001 From: resurtm
Date: Thu, 9 May 2019 11:14:37 +0200 Subject: [PATCH 02/17] Fix Firefox extension content script #257 (#258) --- src/ResizeSensor.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js index 555a906..03fb2e9 100755 --- a/src/ResizeSensor.js +++ b/src/ResizeSensor.js @@ -19,14 +19,21 @@ if (typeof window === "undefined") { return null; } + // https://github.com/Semantic-Org/Semantic-UI/issues/3855 + // https://github.com/marcj/css-element-queries/issues/257 + var globalWindow = typeof window != 'undefined' && window.Math == Math + ? window + : typeof self != 'undefined' && self.Math == Math + ? self + : Function('return this')(); // Only used for the dirty checking, so the event callback count is limited to max 1 call per fps per sensor. // In combination with the event based resize sensor this saves cpu time, because the sensor is too fast and // would generate too many unnecessary events. - var requestAnimationFrame = window.requestAnimationFrame || - window.mozRequestAnimationFrame || - window.webkitRequestAnimationFrame || + var requestAnimationFrame = globalWindow.requestAnimationFrame || + globalWindow.mozRequestAnimationFrame || + globalWindow.webkitRequestAnimationFrame || function (fn) { - return window.setTimeout(fn, 20); + return globalWindow.setTimeout(fn, 20); }; /** From 389ca9900ca65a9104b2e965946b9f7f77c165bc Mon Sep 17 00:00:00 2001 From: jelhan
Date: Thu, 9 May 2019 11:15:35 +0200 Subject: [PATCH 03/17] fix: do not require Content-Secruity-Policy style-src 'unsafe-inline' (#256) --- src/ResizeSensor.js | 68 +++++++++++++++++++++++++++++++++++---------- 1 file changed, 53 insertions(+), 15 deletions(-) diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js index 03fb2e9..32451e3 100755 --- a/src/ResizeSensor.js +++ b/src/ResizeSensor.js @@ -81,6 +81,18 @@ } } + /** + * Apply CSS styles to element. + * + * @param {HTMLElement} element + * @param {Object} style + */ + function setStyle(element, style) { + Object.keys(style).forEach(function(key) { + element.style[key] = style[key]; + }); + } + /** * Class for dimension change detection. * @@ -138,18 +150,47 @@ element.resizeSensor = document.createElement('div'); element.resizeSensor.dir = 'ltr'; element.resizeSensor.className = 'resize-sensor'; - var style = 'pointer-events: none; position: absolute; left: 0px; top: 0px; right: 0; bottom: 0; ' + - 'overflow: hidden; z-index: -1; visibility: hidden; max-width: 100%;'; - var styleChild = 'position: absolute; left: 0; top: 0; transition: 0s;'; - - element.resizeSensor.style.cssText = style; - element.resizeSensor.innerHTML = - '
' + - '
' + - '
' + - '
' + - '
' + - '
'; + + var style = { + pointerEvents: 'none', + position: 'absolute', + left: '0px', + top: '0px', + right: '0px', + bottom: '0px', + overflow: 'hidden', + zIndex: '-1', + visibility: 'hidden', + maxWidth: '100%' + }; + var styleChild = { + position: 'absolute', + left: '0px', + top: '0px', + transition: '0s', + }; + + setStyle(element.resizeSensor, style); + + var expand = document.createElement('div'); + expand.className = 'resize-sensor-expand'; + setStyle(expand, style); + + var expandChild = document.createElement('div'); + setStyle(expandChild, styleChild); + expand.appendChild(expandChild); + + var shrink = document.createElement('div'); + shrink.className = 'resize-sensor-shrink'; + setStyle(shrink, style); + + var shrinkChild = document.createElement('div'); + setStyle(shrinkChild, styleChild); + setStyle(shrinkChild, { width: '200%', height: '200%' }); + shrink.appendChild(shrinkChild); + + element.resizeSensor.appendChild(expand); + element.resizeSensor.appendChild(shrink); element.appendChild(element.resizeSensor); var computedStyle = window.getComputedStyle(element); @@ -158,9 +199,6 @@ element.style.position = 'relative'; } - var expand = element.resizeSensor.childNodes[0]; - var expandChild = expand.childNodes[0]; - var shrink = element.resizeSensor.childNodes[1]; var dirty, rafId; var size = getElementSize(element); var lastWidth = size.width; From eab5e1b51904d2570f979c941fded6b86dd3e7b0 Mon Sep 17 00:00:00 2001 From: "Marc J. Schmidt"
Date: Thu, 9 May 2019 11:43:55 +0200 Subject: [PATCH 04/17] Trigger initially the resize sensor, fixes #265 --- src/ElementQueries.js | 5 ++--- src/ResizeSensor.d.ts | 21 +++++++++++++++++++++ src/ResizeSensor.js | 4 ++-- 3 files changed, 25 insertions(+), 5 deletions(-) diff --git a/src/ElementQueries.js b/src/ElementQueries.js index 23038d0..4fe4298 100755 --- a/src/ElementQueries.js +++ b/src/ElementQueries.js @@ -170,13 +170,12 @@ if (!element.elementQueriesSetupInformation) { element.elementQueriesSetupInformation = new SetupInformation(element, id); } + if (!element.elementQueriesSensor) { element.elementQueriesSensor = new ResizeSensor(element, function () { element.elementQueriesSetupInformation.call(); }); } - - element.elementQueriesSetupInformation.call(); } /** @@ -441,7 +440,7 @@ for (var i = 0, j = document.styleSheets.length; i < j; i++) { try { if (document.styleSheets[i].href && 0 === document.styleSheets[i].href.indexOf('file://')) { - console.log("CssElementQueries: unable to parse local css files, " + document.styleSheets[i].href); + console.warn("CssElementQueries: unable to parse local css files, " + document.styleSheets[i].href); } readRules(document.styleSheets[i].cssRules || document.styleSheets[i].rules || document.styleSheets[i].cssText); diff --git a/src/ResizeSensor.d.ts b/src/ResizeSensor.d.ts index 634ced0..ad6c412 100644 --- a/src/ResizeSensor.d.ts +++ b/src/ResizeSensor.d.ts @@ -1,11 +1,32 @@ export declare type ResizeSensorCallback = (size: { width: number; height: number; }) => void; export declare class ResizeSensor { + /** + * Creates a new resize sensor on given elements. The provided callback is called max 1 times per requestAnimationFrame and + * is called initially. + */ constructor(element: Element | Element[], callback: ResizeSensorCallback); + + /** + * Removes the resize sensor, and stops listening to resize events. + */ detach(callback?: ResizeSensorCallback): void; + + /** + * Resets the resize sensors, so for the next element resize is correctly detected. This is rare cases necessary + * when the resize sensor isn't initialised correctly or is in a broken state due to DOM modifications. + */ reset(): void; + /** + * Removes the resize sensor, and stops listening to resize events. + */ static detach(element: Element | Element[], callback?: ResizeSensorCallback): void; + + /** + * Resets the resize sensors, so for the next element resize is correctly detected. This is rare cases necessary + * when the resize sensor isn't initialised correctly or is in a broken state due to DOM modifications. + */ static reset(element: Element | Element[]): void; } diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js index 32451e3..ed4ef54 100755 --- a/src/ResizeSensor.js +++ b/src/ResizeSensor.js @@ -201,8 +201,8 @@ var dirty, rafId; var size = getElementSize(element); - var lastWidth = size.width; - var lastHeight = size.height; + var lastWidth = 0; + var lastHeight = 0; var initialHiddenCheck = true; var lastAnimationFrame = 0; From c4f7808afb490d81b7210b0b756ef3bda99d4cc5 Mon Sep 17 00:00:00 2001 From: "Marc J. Schmidt"
Date: Thu, 9 May 2019 11:45:33 +0200 Subject: [PATCH 05/17] bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 8c38109..6aefde2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "css-element-queries", - "version": "1.1.1", + "version": "1.2.0", "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 5d92e05e136137d11e0203c9d5ca06a99645f601 Mon Sep 17 00:00:00 2001 From: "Marc J. Schmidt"
Date: Thu, 9 May 2019 11:47:18 +0200 Subject: [PATCH 06/17] added npmignore file --- .npmignore | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 .npmignore diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..4f29079 --- /dev/null +++ b/.npmignore @@ -0,0 +1,2 @@ +.idea +tests From d1816ad53474b06e2d4c20fbaa5e3b00e46a0aaf Mon Sep 17 00:00:00 2001 From: ThibaudAV
Date: Wed, 17 Jul 2019 18:33:53 +0200 Subject: [PATCH 07/17] feat(typings): export ElementQueries typings (#267) --- css-element-queries.d.ts | 3 ++- src/ElementQueries.d.ts | 14 ++++++++++++++ 2 files changed, 16 insertions(+), 1 deletion(-) create mode 100644 src/ElementQueries.d.ts diff --git a/css-element-queries.d.ts b/css-element-queries.d.ts index 0ca3bc3..97ee144 100644 --- a/css-element-queries.d.ts +++ b/css-element-queries.d.ts @@ -1 +1,2 @@ -export { ResizeSensor, ResizeSensorCallback } from "./src/ResizeSensor"; \ No newline at end of file +export { ResizeSensor, ResizeSensorCallback } from "./src/ResizeSensor"; +export { ElementQueries } from './src/ElementQueries'; \ No newline at end of file diff --git a/src/ElementQueries.d.ts b/src/ElementQueries.d.ts new file mode 100644 index 0000000..00c5d93 --- /dev/null +++ b/src/ElementQueries.d.ts @@ -0,0 +1,14 @@ +export declare class ElementQueries { + /** + * Attaches to DOMLoadContent + */ + static listen(): void; + + /** + * Parses all available CSS and attach ResizeSensor to those elements which have rules attached. + * Make sure this is called after 'load' event, because CSS files are not ready when domReady is fired. + */ + static init(): void; +} + +export default ElementQueries; From 7d0ffa0c8955f72be9650ce36ab4205d14ebeb29 Mon Sep 17 00:00:00 2001 From: "Marc J. Schmidt"
Date: Wed, 17 Jul 2019 18:36:01 +0200 Subject: [PATCH 08/17] bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6aefde2..36a73d7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "css-element-queries", - "version": "1.2.0", + "version": "1.2.1", "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 9fe2fbf47d1ab8b2f7ddc7765c46a8f23656af0b Mon Sep 17 00:00:00 2001 From: Julien Pradelle
Date: Wed, 2 Oct 2019 17:43:36 +0200 Subject: [PATCH 09/17] 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 10/17] 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 11/17] 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 12/17] 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 13/17] 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
-