From 7b75906546d21472afb7aad9d19c09a28aae6255 Mon Sep 17 00:00:00 2001
From: Martin Skogevall
Date: Mon, 20 Jan 2014 21:55:24 +0100
Subject: [PATCH 001/122] Avoid non-initialized resize-sensor width/heights
when element initially has zero width or height. The underflow will never
trigger in these cases otherwise.
---
src/ResizeSensor.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js
index 890680e..93fea38 100644
--- a/src/ResizeSensor.js
+++ b/src/ResizeSensor.js
@@ -114,8 +114,8 @@
element.style.position = 'relative';
}
- var x = 0,
- y = 0,
+ var x = -1,
+ y = -1,
firstStyle = element.resizeSensor.firstElementChild.firstChild.style,
lastStyle = element.resizeSensor.lastElementChild.firstChild.style;
From 26956a152aecced81563807feac1bdf73da53461 Mon Sep 17 00:00:00 2001
From: Gordon Syme
Date: Tue, 18 Mar 2014 18:57:35 +0000
Subject: [PATCH 002/122] Add MIT license as suggested in
https://github.com/marcj/css-element-queries/issues/10
---
LICENSE | 19 +++++++++++++++++++
README.md | 27 +++++++++++++++++++++++++++
src/ElementQueries.js | 7 ++++++-
src/ResizeSensor.js | 5 +++++
4 files changed, 57 insertions(+), 1 deletion(-)
create mode 100644 LICENSE
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..5ea0745
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,19 @@
+Copyright (c) 2013 Marc J. Scmidt
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/README.md b/README.md
index a92b0fc..5388616 100644
--- a/README.md
+++ b/README.md
@@ -71,3 +71,30 @@ Event-Based resize detection inspired by [backalleycoder.com](http://www.backall
[](https://bitdeli.com/free "Bitdeli Badge")
+
+License
+-------
+This code is copyright 2013 Marc J. Schmidt and is licensed under the MIT license. See the `LICENSE` file for the full text.
+
+
+ElementQueries.convertToPx covered by the following license:
+
+> Copyright (c) 2013 Rob Brackett
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of
+> this software and associated documentation files (the "Software"), to deal in
+> the Software without restriction, including without limitation the rights to
+> use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+> of the Software, and to permit persons to whom the Software is furnished to do
+> so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
diff --git a/src/ElementQueries.js b/src/ElementQueries.js
index 2efe47c..5fa2f05 100644
--- a/src/ElementQueries.js
+++ b/src/ElementQueries.js
@@ -1,3 +1,8 @@
+/**
+ * Copyright 2013 Marc J. Schmidt. See the LICENSE file at the top-level
+ * directory of this distribution and at
+ * https://github.com/marcj/css-element-queries/blob/master/LICENSE.
+ */
;
(function() {
/**
@@ -21,7 +26,7 @@
/**
*
- * @copyright https://github.com/Mr0grog/element-query
+ * @copyright https://github.com/Mr0grog/element-query/blob/master/LICENSE
*
* @param element
* @param value
diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js
index 93fea38..54ba91d 100644
--- a/src/ResizeSensor.js
+++ b/src/ResizeSensor.js
@@ -1,3 +1,8 @@
+/**
+ * Copyright 2013 Marc J. Schmidt. See the LICENSE file at the top-level
+ * directory of this distribution and at
+ * https://github.com/marcj/css-element-queries/blob/master/LICENSE.
+ */
;
(function() {
From 6bf1d4a38791b1306b68afe7aca1adf5d7e0b675 Mon Sep 17 00:00:00 2001
From: "Marc J. Schmidt"
Date: Tue, 18 Mar 2014 22:08:21 +0100
Subject: [PATCH 003/122] Update LICENSE
---
LICENSE | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/LICENSE b/LICENSE
index 5ea0745..4de61dc 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,4 +1,4 @@
-Copyright (c) 2013 Marc J. Scmidt
+Copyright (c) 2013 Marc J. Schmidt
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
From e44c0c4cb8e12c727de430702a14a9ef22653f5b Mon Sep 17 00:00:00 2001
From: Marcin Warpechowski
Date: Wed, 2 Apr 2014 14:32:52 +0200
Subject: [PATCH 004/122] fix "TypeError: Illegal invocation" when using
document.querySelectorAll (no MooTools or jQuery on page)
---
src/ElementQueries.js | 7 ++++---
1 file changed, 4 insertions(+), 3 deletions(-)
diff --git a/src/ElementQueries.js b/src/ElementQueries.js
index 5fa2f05..48d17ba 100644
--- a/src/ElementQueries.js
+++ b/src/ElementQueries.js
@@ -148,9 +148,10 @@
* @param {String} value
*/
function queueQuery(selector, mode, property, value) {
- var query = document.querySelectorAll;
- if ('undefined' !== typeof $$) query = $$;
- if ('undefined' !== typeof jQuery) query = jQuery;
+ var query;
+ if (document.querySelectorAll) query = document.querySelectorAll.bind(document);
+ if (!query && 'undefined' !== typeof $$) query = $$;
+ if (!query && 'undefined' !== typeof jQuery) query = jQuery;
if (!query) {
throw 'No document.querySelectorAll, jQuery or Mootools\'s $$ found.';
From 09553fc13b4aa1cc95bd99d55f8d6869698863d6 Mon Sep 17 00:00:00 2001
From: slopjong
Date: Thu, 10 Apr 2014 15:15:04 +0200
Subject: [PATCH 005/122] Bower file created
---
bower.json | 19 +++++++++++++++++++
1 file changed, 19 insertions(+)
create mode 100644 bower.json
diff --git a/bower.json b/bower.json
new file mode 100644
index 0000000..4c1c11a
--- /dev/null
+++ b/bower.json
@@ -0,0 +1,19 @@
+{
+ "name": "css-element-queries",
+ "version": "0.0.1",
+ "main": [
+ "./src/js/ElementQueries.js",
+ "./src/js/ResizeSensor.js"
+ ],
+ "ignore": [
+ "**/.*",
+ "_*",
+ "Gruntfile.js",
+ "composer.json",
+ "package.json",
+ "*.html"
+ ],
+ "dependencies": {
+ }
+}
+
From e3ffcabf814d99533e38fa86094a8a6ef90f4f33 Mon Sep 17 00:00:00 2001
From: Dennis Mueller
Date: Tue, 22 Apr 2014 10:07:22 +0200
Subject: [PATCH 006/122] Fixed Issue #17: min-height/max-height not working
---
src/ElementQueries.js | 4 +++-
src/ResizeSensor.js | 0
2 files changed, 3 insertions(+), 1 deletion(-)
mode change 100644 => 100755 src/ElementQueries.js
mode change 100644 => 100755 src/ResizeSensor.js
diff --git a/src/ElementQueries.js b/src/ElementQueries.js
old mode 100644
new mode 100755
index 48d17ba..e898072
--- a/src/ElementQueries.js
+++ b/src/ElementQueries.js
@@ -199,7 +199,9 @@
for (var i = 0, j = rules.length; i < j; i++) {
if (1 === rules[i].type) {
selector = rules[i].selectorText || rules[i].cssText;
- if (-1 !== selector.indexOf('min-width') || -1 !== selector.indexOf('max-width')) {
+ if (-1 !== selector.indexOf('min-height') || -1 !== selector.indexOf('max-height')) {
+ extractQuery(selector);
+ }else if(-1 !== selector.indexOf('min-width') || -1 !== selector.indexOf('max-width')) {
extractQuery(selector);
}
} else if (4 === rules[i].type) {
diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js
old mode 100644
new mode 100755
From 1bf024b383014eb7ba5dd88245d7321999d01ca0 Mon Sep 17 00:00:00 2001
From: "Marc J. Schmidt"
Date: Mon, 8 Sep 2014 00:05:18 +0200
Subject: [PATCH 007/122] Fixed #14 - resize detection didn't work in chrome
anymore.
Chrome 34 introduced a new element property 'onresize' which doesn't work and blows up our 'onresize' detection.
---
src/ResizeSensor.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js
index 890680e..c90c9eb 100644
--- a/src/ResizeSensor.js
+++ b/src/ResizeSensor.js
@@ -79,8 +79,8 @@
return;
}
- if ('onresize' in element) {
- //internet explorer
+ if ('onresize' in element && 11 > document.documentMode) {
+ //internet explorer up to 10
if (element.attachEvent) {
element.attachEvent('onresize', function() {
element.resizedAttached.call();
From f7ce03dc90cd16aa2926d0277845335c5a8689d5 Mon Sep 17 00:00:00 2001
From: "Marc J. Schmidt"
Date: Mon, 8 Sep 2014 00:09:43 +0200
Subject: [PATCH 008/122] Removed that aggressive license stuff.
---
README.md | 25 +------------------------
src/ElementQueries.js | 2 +-
src/ResizeSensor.js | 2 +-
3 files changed, 3 insertions(+), 26 deletions(-)
diff --git a/README.md b/README.md
index 5388616..4f925aa 100644
--- a/README.md
+++ b/README.md
@@ -74,27 +74,4 @@ Event-Based resize detection inspired by [backalleycoder.com](http://www.backall
License
-------
-This code is copyright 2013 Marc J. Schmidt and is licensed under the MIT license. See the `LICENSE` file for the full text.
-
-
-ElementQueries.convertToPx covered by the following license:
-
-> Copyright (c) 2013 Rob Brackett
->
-> Permission is hereby granted, free of charge, to any person obtaining a copy of
-> this software and associated documentation files (the "Software"), to deal in
-> the Software without restriction, including without limitation the rights to
-> use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
-> of the Software, and to permit persons to whom the Software is furnished to do
-> so, subject to the following conditions:
->
-> The above copyright notice and this permission notice shall be included in all
-> copies or substantial portions of the Software.
->
-> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-> SOFTWARE.
+MIT license. Copyright [Marc J. Schmidt](http://marcjschmidt.de/).
\ No newline at end of file
diff --git a/src/ElementQueries.js b/src/ElementQueries.js
index e898072..d0a093a 100755
--- a/src/ElementQueries.js
+++ b/src/ElementQueries.js
@@ -1,5 +1,5 @@
/**
- * Copyright 2013 Marc J. Schmidt. See the LICENSE file at the top-level
+ * Copyright Marc J. Schmidt. See the LICENSE file at the top-level
* directory of this distribution and at
* https://github.com/marcj/css-element-queries/blob/master/LICENSE.
*/
diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js
index e078626..7cc76db 100755
--- a/src/ResizeSensor.js
+++ b/src/ResizeSensor.js
@@ -1,5 +1,5 @@
/**
- * Copyright 2013 Marc J. Schmidt. See the LICENSE file at the top-level
+ * Copyright Marc J. Schmidt. See the LICENSE file at the top-level
* directory of this distribution and at
* https://github.com/marcj/css-element-queries/blob/master/LICENSE.
*/
From c35a2406b3a063efc1671b9167dbd1470daf7b8d Mon Sep 17 00:00:00 2001
From: "Marc J. Schmidt"
Date: Mon, 8 Sep 2014 00:10:17 +0200
Subject: [PATCH 009/122] Bumped up version
---
bower.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/bower.json b/bower.json
index 4c1c11a..269e2ce 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
{
"name": "css-element-queries",
- "version": "0.0.1",
+ "version": "0.0.2",
"main": [
"./src/js/ElementQueries.js",
"./src/js/ResizeSensor.js"
From d96e17397c3fa3e6cea96b239ef02628169267f0 Mon Sep 17 00:00:00 2001
From: "Marc J. Schmidt"
Date: Mon, 8 Sep 2014 05:43:57 +0200
Subject: [PATCH 010/122] Implemented better resize detection, added a test
file and added ElementQuery.update method.
---
README.md | 7 +-
src/ElementQueries.js | 32 +++-
src/ResizeSensor.js | 143 ++++++--------
test/index.html | 430 ++++++++++++++++++++++++++++++++++++++++++
4 files changed, 514 insertions(+), 98 deletions(-)
create mode 100644 test/index.html
diff --git a/README.md b/README.md
index 4f925aa..74c5e94 100644
--- a/README.md
+++ b/README.md
@@ -13,7 +13,7 @@ Features:
- no interval/timeout detection. Truly event-based
- no CSS modifications. Valid CSS Syntax
- all CSS selectors available. Uses regular attribute selector
- - supports and tested in webkit, gecko and IE(8/9/10).
+ - supports and tested in webkit, gecko and IE(7/8/9/10/11).
- `min-width`, `min-height`, `max-width` and `max-height` are supported so far
- works with any layout modifications: HTML (innerHTML etc), inline styles, DOM mutation, CSS3 transitions, fluid layout changes (also percent changes), pseudo classes (:hover etc.), window resizes and more
- no Javascript-Framework dependency (works with jQuery, Mootools, etc.)
@@ -63,12 +63,9 @@ Issues
------
- So far does not work on `img` tags. Wrapping with a `div` works fine though (See demo).
- - [only non-IE]: Adds additional hidden element into selected target element and forces target element to be relative or absolute.
+ - Adds additional hidden element into selected target element and forces target element to be relative or absolute.
-Event-Based resize detection inspired by [backalleycoder.com](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/) <3
-
-
[](https://bitdeli.com/free "Bitdeli Badge")
diff --git a/src/ElementQueries.js b/src/ElementQueries.js
index d0a093a..25563e7 100755
--- a/src/ElementQueries.js
+++ b/src/ElementQueries.js
@@ -70,15 +70,16 @@
*/
function SetupInformation(element) {
this.element = element;
- this.options = [];
- var i, j, option, width = 0, height = 0, value, actualValue, attrValues, attrValue, attrName;
+ this.options = {};
+ var key, option, width = 0, height = 0, value, actualValue, attrValues, attrValue, attrName;
/**
- * @param option {mode: 'min|max', property: 'width|height', value: '123px'}
+ * @param {Object} option {mode: 'min|max', property: 'width|height', value: '123px'}
*/
this.addOption = function(option) {
- this.options.push(option);
- }
+ var idx = [option.mode, option.property, option.value].join(',');
+ this.options[idx] = option;
+ };
var attributes = ['min-width', 'min-height', 'max-width', 'max-height'];
@@ -92,8 +93,12 @@
attrValues = {};
- for (i = 0, j = this.options.length; i < j; i++) {
- option = this.options[i];
+ for (key in this.options) {
+ if (!this.options.hasOwnProperty(key)){
+ continue;
+ }
+ option = this.options[key];
+
value = convertToPx(this.element, option.value);
actualValue = option.property == 'width' ? width : height;
@@ -218,11 +223,18 @@
for (var i = 0, j = document.styleSheets.length; i < j; i++) {
readRules(document.styleSheets[i].cssText || document.styleSheets[i].cssRules || document.styleSheets[i].rules);
}
- }
- }
+ };
+
+ this.update = function() {
+ this.init();
+ };
+ };
function init() {
- new ElementQueries().init();
+ ElementQueries.instance = new ElementQueries().init();
+ ElementQueries.update = function() {
+ ElementQueries.instance.update();
+ }
}
if (window.addEventListener) {
diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js
index 7cc76db..d10b3b3 100755
--- a/src/ResizeSensor.js
+++ b/src/ResizeSensor.js
@@ -15,28 +15,6 @@
* @constructor
*/
this.ResizeSensor = function(element, callback) {
- /**
- * Adds a listener to the over/under-flow event.
- *
- * @param {HTMLElement} element
- * @param {Function} callback
- */
- function addResizeListener(element, callback) {
- if (window.OverflowEvent) {
- //webkit
- element.addEventListener('overflowchanged', function(e) {
- callback.call(this, e);
- });
- } else {
- element.addEventListener('overflow', function(e) {
- callback.call(this, e);
- });
- element.addEventListener('underflow', function(e) {
- callback.call(this, e);
- });
- }
- }
-
/**
*
* @constructor
@@ -84,71 +62,70 @@
return;
}
- if ('onresize' in element && 11 > document.documentMode) {
- //internet explorer up to 10
- if (element.attachEvent) {
- element.attachEvent('onresize', function() {
- element.resizedAttached.call();
- });
- } else if (element.addEventListener) {
- element.addEventListener('resize', function(){
- element.resizedAttached.call();
- });
- }
- } else {
- var myResized = function() {
- if (setupSensor()) {
- element.resizedAttached.call();
- }
- };
- element.resizeSensor = document.createElement('div');
- element.resizeSensor.className = 'resize-sensor';
- var style =
- 'position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1;';
- element.resizeSensor.style.cssText = style;
- element.resizeSensor.innerHTML =
- '
+ This is content from the first responsive demo without media queries. It uses the element queries provided by this library.
+
+
+
+
+
Demo 2
+
+ Box
+
+
+ First 1/2 box
+
+
+ Second 1/2 box
+
+
+
+
+
+
+
Demo 3 - width
+
+ This box is animated through css transitions.
+ We attached a resize-listener to this box. See below.
+
+
+ No changes.
+
+
+
+
+
+
Demo 4 - height
+
+ This box is animated through css transitions.
+ We attached a resize-listener to this box. See below.
+
+
+ No changes.
+
+
+
+
+
+
+
+ 0 changes
+
+
+
+
+
+
+
+
\ No newline at end of file
From bc9bc40620d18e93d923bc44f1ab73d6248032f9 Mon Sep 17 00:00:00 2001
From: "Marc J. Schmidt"
Date: Wed, 10 Sep 2014 14:50:24 +0200
Subject: [PATCH 011/122] Update README.md
---
README.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/README.md b/README.md
index 74c5e94..0adb7bf 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
CSS Element Queries
===================
-Element Queries is a polyfill adding support for element based media-queries to all new browsers (incl. IE8+).
+Element Queries is a polyfill adding support for element based media-queries to all new browsers (incl. IE7+).
It allows not only to define media-queries based on window-size but also adds 'media-queries' functionality depending on element (any selector supported)
size while not causing performance lags due to event based implementation.
@@ -71,4 +71,4 @@ Issues
License
-------
-MIT license. Copyright [Marc J. Schmidt](http://marcjschmidt.de/).
\ No newline at end of file
+MIT license. Copyright [Marc J. Schmidt](http://marcjschmidt.de/).
From cdb65619c37665d22e097468e32d9f5cdaaac06d Mon Sep 17 00:00:00 2001
From: "Marc J. Schmidt"
Date: Sat, 13 Sep 2014 16:01:23 +0200
Subject: [PATCH 012/122] Update README.md
---
README.md | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/README.md b/README.md
index 0adb7bf..9f296b8 100644
--- a/README.md
+++ b/README.md
@@ -9,10 +9,10 @@ It's a proof-of-concept event-based CSS element dimension query with valid CSS s
Features:
- - no performance issues
- - no interval/timeout detection. Truly event-based
+ - no performance issues since it listens on size changes of each element, not only on window.onresize (like all other element query polifills).
+ - no interval/timeout detection. Truly event-based through integrated ResizeSensor class.
- no CSS modifications. Valid CSS Syntax
- - all CSS selectors available. Uses regular attribute selector
+ - all CSS selectors available. Uses regular attribute selector. No need to write rules in HTML.
- supports and tested in webkit, gecko and IE(7/8/9/10/11).
- `min-width`, `min-height`, `max-width` and `max-height` are supported so far
- works with any layout modifications: HTML (innerHTML etc), inline styles, DOM mutation, CSS3 transitions, fluid layout changes (also percent changes), pseudo classes (:hover etc.), window resizes and more
From 0975de58ffed09150f7b01542c8d5e99128a1d77 Mon Sep 17 00:00:00 2001
From: "Marc J. Schmidt"
Date: Sat, 13 Sep 2014 16:08:00 +0200
Subject: [PATCH 013/122] Update README.md
---
README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/README.md b/README.md
index 9f296b8..35ce42d 100644
--- a/README.md
+++ b/README.md
@@ -9,7 +9,7 @@ It's a proof-of-concept event-based CSS element dimension query with valid CSS s
Features:
- - no performance issues since it listens on size changes of each element, not only on window.onresize (like all other element query polifills).
+ - no performance issues since it listens only on size changes of elements that have element query rules defined through css. Other element query polifills only listen on `window.onresize` which causes performance issues and allows only to detect changes via window.resize event and not inside layout changes like css3 animation, :hover, DOM changes etc.
- no interval/timeout detection. Truly event-based through integrated ResizeSensor class.
- no CSS modifications. Valid CSS Syntax
- all CSS selectors available. Uses regular attribute selector. No need to write rules in HTML.
From 58ef9cab08b0b3cc8dfbbec998dae6f5957b5e77 Mon Sep 17 00:00:00 2001
From: Kyle Mathews
Date: Sat, 4 Oct 2014 14:32:28 -0700
Subject: [PATCH 014/122] Correct check for array fixes #21
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray
---
src/ResizeSensor.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js
index d10b3b3..753eb27 100755
--- a/src/ResizeSensor.js
+++ b/src/ResizeSensor.js
@@ -128,7 +128,7 @@
});
}
- if ('array' === typeof element
+ if ("[object Array]" === Object.prototype.toString.call(element)
|| ('undefined' !== typeof jQuery && element instanceof jQuery) //jquery
|| ('undefined' !== typeof Elements && element instanceof Elements) //mootools
) {
@@ -141,4 +141,4 @@
}
}
-})();
\ No newline at end of file
+})();
From 822fee72c8c88dcacc15c58e810298c89700625a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raphael=20von=20der=20Gr=C3=BCn?=
Date: Tue, 14 Oct 2014 18:29:40 +0200
Subject: [PATCH 015/122] Fix main paths in bower.json
---
bower.json | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/bower.json b/bower.json
index 269e2ce..678b95f 100644
--- a/bower.json
+++ b/bower.json
@@ -2,8 +2,8 @@
"name": "css-element-queries",
"version": "0.0.2",
"main": [
- "./src/js/ElementQueries.js",
- "./src/js/ResizeSensor.js"
+ "./src/ElementQueries.js",
+ "./src/ResizeSensor.js"
],
"ignore": [
"**/.*",
From dbe74388dcfcc5940f9b5453226b38e9f80044b7 Mon Sep 17 00:00:00 2001
From: maslianok
Date: Wed, 15 Oct 2014 18:36:35 +0300
Subject: [PATCH 016/122] fixed condition
---
src/ResizeSensor.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js
index 753eb27..1058ec1 100755
--- a/src/ResizeSensor.js
+++ b/src/ResizeSensor.js
@@ -77,7 +77,7 @@
'';
element.appendChild(element.resizeSensor);
- if ('absolute' !== getComputedStyle(element, 'position')) {
+ if (!{fixed: 1, absolute: 1}[getComputedStyle(element, 'position')]) {
element.style.position = 'relative';
}
From 45f922fee198d3d264b35291c846ec5ea69399fd Mon Sep 17 00:00:00 2001
From: "Marc J. Schmidt"
Date: Tue, 13 Jan 2015 16:30:13 +0100
Subject: [PATCH 017/122] Update README.md
---
README.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/README.md b/README.md
index 35ce42d..b2ca7bf 100644
--- a/README.md
+++ b/README.md
@@ -62,8 +62,8 @@ Include the javascript files at the bottom and you're good to go. No custom java
Issues
------
- - So far does not work on `img` tags. Wrapping with a `div` works fine though (See demo).
- - Adds additional hidden element into selected target element and forces target element to be relative or absolute.
+ - So far does not work on `img` and other elements that can't contain other elements. Wrapping with a `div` works fine though (See demo).
+ - Adds additional hidden elements into selected target element and forces target element to be relative or absolute.
[](https://bitdeli.com/free "Bitdeli Badge")
From 572f1aa8c798063be46aedce86eba341e53ce1c6 Mon Sep 17 00:00:00 2001
From: "Marc J. Schmidt"
Date: Tue, 13 Jan 2015 17:22:52 +0100
Subject: [PATCH 018/122] Added detach methods and fixed update method.
---
src/ElementQueries.js | 76 +++++++++++++++++++++++++++++++++++++------
src/ResizeSensor.js | 20 ++++++++++--
test/index.html | 64 +++++++++++++++++++++++++++++++++++-
3 files changed, 146 insertions(+), 14 deletions(-)
diff --git a/src/ElementQueries.js b/src/ElementQueries.js
index 25563e7..25ded86 100755
--- a/src/ElementQueries.js
+++ b/src/ElementQueries.js
@@ -11,6 +11,10 @@
* @constructor
*/
var ElementQueries = this.ElementQueries = function() {
+
+ this.withTracking = false;
+ var elements = [];
+
/**
*
* @param element
@@ -28,9 +32,8 @@
*
* @copyright https://github.com/Mr0grog/element-query/blob/master/LICENSE
*
- * @param element
- * @param value
- * @param units
+ * @param {HTMLElement} element
+ * @param {*} value
* @returns {*}
*/
function convertToPx(element, value) {
@@ -139,11 +142,15 @@
} else {
element.elementQueriesSetupInformation = new SetupInformation(element);
element.elementQueriesSetupInformation.addOption(options);
- new ResizeSensor(element, function() {
+ element.elementQueriesSensor = new ResizeSensor(element, function() {
element.elementQueriesSetupInformation.call();
});
}
element.elementQueriesSetupInformation.call();
+
+ if (this.withTracking) {
+ elements.push(element);
+ }
}
/**
@@ -218,23 +225,72 @@
/**
* Searches all css rules and setups the event listener to all elements with element query rules..
+ *
+ * @param {Boolean} withTracking allows and requires you to use detach, since we store internally all used elements
+ * (no garbage collection possible if you don not call .detach() first)
*/
- this.init = function() {
+ this.init = function(withTracking) {
+ this.withTracking = withTracking;
for (var i = 0, j = document.styleSheets.length; i < j; i++) {
readRules(document.styleSheets[i].cssText || document.styleSheets[i].cssRules || document.styleSheets[i].rules);
}
};
- this.update = function() {
+ /**
+ *
+ * @param {Boolean} withTracking allows and requires you to use detach, since we store internally all used elements
+ * (no garbage collection possible if you don not call .detach() first)
+ */
+ this.update = function(withTracking) {
+ this.withTracking = withTracking;
this.init();
};
+
+ this.detach = function() {
+ if (!this.withTracking) {
+ throw 'withTracking is not enabled. We can not detach elements since we don not store it.' +
+ 'Use ElementQueries.withTracking = true; before domready.';
+ }
+
+ var element;
+ while (element = elements.pop()) {
+ ElementQueries.detach(element);
+ }
+
+ elements = [];
+ };
};
- function init() {
- ElementQueries.instance = new ElementQueries().init();
- ElementQueries.update = function() {
- ElementQueries.instance.update();
+ /**
+ *
+ * @param {Boolean} withTracking allows and requires you to use detach, since we store internally all used elements
+ * (no garbage collection possible if you don not call .detach() first)
+ */
+ ElementQueries.update = function(withTracking) {
+ ElementQueries.instance.update(withTracking);
+ };
+
+ /**
+ * Removes all sensor and elementquery information from the element.
+ *
+ * @param {HTMLElement} element
+ */
+ ElementQueries.detach = function(element) {
+ if (element.elementQueriesSetupInformation) {
+ element.elementQueriesSensor.detach();
+ delete element.elementQueriesSetupInformation;
+ delete element.elementQueriesSensor;
+ console.log('detached');
+ } else {
+ console.log('detached already', element);
}
+ };
+
+ ElementQueries.withTracking = false;
+
+ function init() {
+ ElementQueries.instance = new ElementQueries();
+ ElementQueries.instance.init(ElementQueries.withTracking);
}
if (window.addEventListener) {
diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js
index 1058ec1..687e17d 100755
--- a/src/ResizeSensor.js
+++ b/src/ResizeSensor.js
@@ -102,7 +102,9 @@
reset();
var changed = function() {
- element.resizedAttached.call();
+ if (element.resizedAttached) {
+ element.resizedAttached.call();
+ }
};
var addEvent = function(el, name, cb) {
@@ -139,6 +141,18 @@
} else {
attachResizeEvent(element, callback);
}
- }
-})();
+ this.detach = function() {
+ ResizeSensor.detach(element);
+ };
+ };
+
+ this.ResizeSensor.detach = function(element) {
+ if (element.resizeSensor) {
+ element.removeChild(element.resizeSensor);
+ delete element.resizeSensor;
+ delete element.resizedAttached;
+ }
+ };
+
+})();
\ No newline at end of file
diff --git a/test/index.html b/test/index.html
index 93e0122..6f9a889 100644
--- a/test/index.html
+++ b/test/index.html
@@ -327,6 +327,29 @@
}
}
+ .dynamicElement {
+ margin: 50px;
+ width: 50px;
+
+ -moz-animation-name: animHeight;
+ animation-name: animHeight;
+ -webkit-animation-name: animHeight;
+
+ animation-duration: 3s;
+ -moz-animation-duration: 3s;
+ -webkit-animation-duration: 3s;
+ animation-iteration-count: infinite;
+ -webkit-animation-iteration-count: infinite;
+
+ display: inline-block;
+ border: 1px solid #eee;
+ background-color: #f9f9f9;
+ }
+
+ .dynamic {
+ margin: 15px;
+ }
+
Drag the gray line at the right to see it in action.
@@ -378,7 +401,7 @@
Demo 4 - height
-
+
0 changes
@@ -426,5 +449,44 @@
Demo 4 - height
});
})();
+
+
+
+
+
+
+
+
+
\ No newline at end of file
From 4855c4aaf7e6afcf2df951917b6e6afb3df12682 Mon Sep 17 00:00:00 2001
From: Stephan de Vries
Date: Thu, 29 Jan 2015 12:59:29 +0100
Subject: [PATCH 019/122] Fixed incorrect CSS comment
---
README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/README.md b/README.md
index b2ca7bf..389225e 100644
--- a/README.md
+++ b/README.md
@@ -34,7 +34,7 @@ Example
padding: 55px;
}
-/* responsive images /*
+/* responsive images */
.responsive-image img {
width: 100%;
}
From 3f87e2a4dd0eeb79a2583a97d42bd6d8bb7d2219 Mon Sep 17 00:00:00 2001
From: "Marc J. Schmidt"
Date: Tue, 10 Feb 2015 17:33:44 +0100
Subject: [PATCH 020/122] Added ondomready inits
---
src/ElementQueries.js | 44 +++++++++++++++++++++++++++++++++++++------
1 file changed, 38 insertions(+), 6 deletions(-)
diff --git a/src/ElementQueries.js b/src/ElementQueries.js
index 25ded86..f822139 100755
--- a/src/ElementQueries.js
+++ b/src/ElementQueries.js
@@ -288,15 +288,47 @@
ElementQueries.withTracking = false;
- function init() {
- ElementQueries.instance = new ElementQueries();
+ ElementQueries.init = function() {
+ if (!ElementQueries.instance) {
+ ElementQueries.instance = new ElementQueries();
+ }
+
ElementQueries.instance.init(ElementQueries.withTracking);
- }
+ };
+
+ var domLoaded = function (callback) {
+ /* Internet Explorer */
+ /*@cc_on
+ @if (@_win32 || @_win64)
+ document.write('
-
\ No newline at end of file
+
From 76d8de3c7da5710543ab435f2739189d08671cbb Mon Sep 17 00:00:00 2001
From: ElManouche
Date: Fri, 24 Apr 2015 10:45:03 +0200
Subject: [PATCH 022/122] Fix the External stylesheets error in Firefox
To circumvent the SecurityError in Firefox when attempting to access the cssRules attribute on external stylesheets, you must use a try/catch statement.
---
src/ElementQueries.js | 8 +++++++-
1 file changed, 7 insertions(+), 1 deletion(-)
diff --git a/src/ElementQueries.js b/src/ElementQueries.js
index f822139..3287b8d 100755
--- a/src/ElementQueries.js
+++ b/src/ElementQueries.js
@@ -232,7 +232,13 @@
this.init = function(withTracking) {
this.withTracking = withTracking;
for (var i = 0, j = document.styleSheets.length; i < j; i++) {
- readRules(document.styleSheets[i].cssText || document.styleSheets[i].cssRules || document.styleSheets[i].rules);
+ try {
+ readRules(document.styleSheets[i].cssText || document.styleSheets[i].cssRules || document.styleSheets[i].rules);
+ } catch(e) {
+ if (e.name !== 'SecurityError') {
+ throw e;
+ }
+ }
}
};
From c5c7f3e0f15d2d5e6853ed7f96b3d0df92d5ec23 Mon Sep 17 00:00:00 2001
From: Hauke Stange
Date: Mon, 4 May 2015 12:18:01 +0200
Subject: [PATCH 023/122] add .gitignore
---
.gitignore | 1 +
1 file changed, 1 insertion(+)
create mode 100644 .gitignore
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..c2658d7
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+node_modules/
From 29a7e9a091b39f34404b39b830dcfa253a7cffdf Mon Sep 17 00:00:00 2001
From: Hauke Stange
Date: Mon, 4 May 2015 12:19:40 +0200
Subject: [PATCH 024/122] add grunt and bump task
---
Gruntfile.js | 16 ++++++++++++++++
package.json | 26 ++++++++++++++++++++++++++
2 files changed, 42 insertions(+)
create mode 100644 Gruntfile.js
create mode 100644 package.json
diff --git a/Gruntfile.js b/Gruntfile.js
new file mode 100644
index 0000000..265a0de
--- /dev/null
+++ b/Gruntfile.js
@@ -0,0 +1,16 @@
+/* jshint node: true */
+module.exports = function(grunt) {
+ 'use strict';
+
+ grunt.loadNpmTasks('grunt-bump');
+
+ grunt.initConfig({
+ bump: {
+ options: {
+ files: ['package.json', 'bower.json'],
+ commitFiles: ['package.json', 'bower.json'],
+ pushTo: 'origin'
+ }
+ }
+ });
+};
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..71307c7
--- /dev/null
+++ b/package.json
@@ -0,0 +1,26 @@
+{
+ "name": "css-element-queries",
+ "version": "0.2.0",
+ "description": "CSS-Element-Queries Polyfill. proof-of-concept for high-speed element dimension/media queries in valid css.",
+ "main": "src/ElementQueries.js",
+ "directories": {
+ "test": "test"
+ },
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git@github.com:marcj/css-element-queries.git"
+ },
+ "author": "Marc J. Schmidt",
+ "license": "MIT",
+ "bugs": {
+ "url": "https://github.com/marcj/css-element-queries/issues"
+ },
+ "homepage": "https://github.com/marcj/css-element-queries",
+ "devDependencies": {
+ "grunt": "^0.4.5",
+ "grunt-bump": "^0.3.1"
+ }
+}
From b72df9150c5f3b671441514d345577b6c3c892be Mon Sep 17 00:00:00 2001
From: Hauke Stange
Date: Mon, 4 May 2015 12:20:38 +0200
Subject: [PATCH 025/122] set version in bower.json to current version
fix #50
---
bower.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/bower.json b/bower.json
index 678b95f..6120f81 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
{
"name": "css-element-queries",
- "version": "0.0.2",
+ "version": "0.2.0",
"main": [
"./src/ElementQueries.js",
"./src/ResizeSensor.js"
From 2cc37a8ebffd408d0f013752cd55ac342f5bb589 Mon Sep 17 00:00:00 2001
From: "Marc J. Schmidt"
Date: Mon, 4 May 2015 13:39:22 +0200
Subject: [PATCH 026/122] Release v0.2.1
---
bower.json | 2 +-
package.json | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/bower.json b/bower.json
index 6120f81..0295673 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
{
"name": "css-element-queries",
- "version": "0.2.0",
+ "version": "0.2.1",
"main": [
"./src/ElementQueries.js",
"./src/ResizeSensor.js"
diff --git a/package.json b/package.json
index 71307c7..a68c90e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "css-element-queries",
- "version": "0.2.0",
+ "version": "0.2.1",
"description": "CSS-Element-Queries Polyfill. proof-of-concept for high-speed element dimension/media queries in valid css.",
"main": "src/ElementQueries.js",
"directories": {
From 268a16055dda89a5359004cac20d64c3371a5ab0 Mon Sep 17 00:00:00 2001
From: "Marc J. Schmidt"
Date: Sat, 6 Jun 2015 23:05:06 +0200
Subject: [PATCH 027/122] Remove bitdeli, added gitter
---
README.md | 5 ++---
1 file changed, 2 insertions(+), 3 deletions(-)
diff --git a/README.md b/README.md
index 389225e..8b361f5 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,8 @@
CSS Element Queries
===================
+[](https://gitter.im/marcj/css-element-queries?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
+
Element Queries is a polyfill adding support for element based media-queries to all new browsers (incl. IE7+).
It allows not only to define media-queries based on window-size but also adds 'media-queries' functionality depending on element (any selector supported)
size while not causing performance lags due to event based implementation.
@@ -64,9 +66,6 @@ Issues
- So far does not work on `img` and other elements that can't contain other elements. Wrapping with a `div` works fine though (See demo).
- Adds additional hidden elements into selected target element and forces target element to be relative or absolute.
-
-
-[](https://bitdeli.com/free "Bitdeli Badge")
License
From 6fbaa67c90ab2afcc44af9419ea2f6b068f9be52 Mon Sep 17 00:00:00 2001
From: "Marc J. Schmidt"
Date: Wed, 1 Jul 2015 10:38:22 +0200
Subject: [PATCH 028/122] Added index.js
---
bower.json | 2 +-
index.js | 2 ++
package.json | 4 ++--
3 files changed, 5 insertions(+), 3 deletions(-)
create mode 100644 index.js
diff --git a/bower.json b/bower.json
index 0295673..b25b96f 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
{
"name": "css-element-queries",
- "version": "0.2.1",
+ "version": "0.3.0",
"main": [
"./src/ElementQueries.js",
"./src/ResizeSensor.js"
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..4d7bd83
--- /dev/null
+++ b/index.js
@@ -0,0 +1,2 @@
+require('./src/ResizeSensor');
+require('./src/ElementQueries');
diff --git a/package.json b/package.json
index a68c90e..ec54cf1 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
{
"name": "css-element-queries",
- "version": "0.2.1",
+ "version": "0.3.0",
"description": "CSS-Element-Queries Polyfill. proof-of-concept for high-speed element dimension/media queries in valid css.",
- "main": "src/ElementQueries.js",
+ "main": "index.js",
"directories": {
"test": "test"
},
From 226f8cf898504e057053308942a2d464b9703390 Mon Sep 17 00:00:00 2001
From: Rick Huynh
Date: Thu, 20 Aug 2015 16:01:01 -0500
Subject: [PATCH 029/122] Fix to properly add the tracked elements
This is a fix to properly add the tracked elements to the elements array. Previously, this.withTracking would end up referencing window instead of the ElementQueries instance. The elements.indexOf(element) is to prevent adding duplicate elements.
Fixes #61
---
src/ElementQueries.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/ElementQueries.js b/src/ElementQueries.js
index 3287b8d..2e4b566 100755
--- a/src/ElementQueries.js
+++ b/src/ElementQueries.js
@@ -148,7 +148,7 @@
}
element.elementQueriesSetupInformation.call();
- if (this.withTracking) {
+ if (ElementQueries.instance.withTracking && elements.indexOf(element) < 0) {
elements.push(element);
}
}
From 841c8669a31c00b6a8d16c48249139ec9ed0033e Mon Sep 17 00:00:00 2001
From: Dusty Holmes
Date: Tue, 15 Sep 2015 16:55:26 -0500
Subject: [PATCH 030/122] Fix a race condition where a rapid shrink and expand
will cause neither to trigger a change
If a user manages to rapidly change both the shrink and expand, then the first one to fire may reset the last width and height causing the other scroll event to fail the change check, incorrectly. By keeping them on separate variables, we prevent this kind of exception.
---
src/ResizeSensor.js | 25 ++++++++++++++++++-------
1 file changed, 18 insertions(+), 7 deletions(-)
diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js
index 687e17d..d329d95 100755
--- a/src/ResizeSensor.js
+++ b/src/ResizeSensor.js
@@ -86,17 +86,28 @@
var shrink = element.resizeSensor.childNodes[1];
var shrinkChild = shrink.childNodes[0];
- var lastWidth, lastHeight;
+ var lastShrinkWidth, lastShrinkHeight;
+ var lastExpandWidth, lastExpandHeight;
var reset = function() {
+ resetExpand();
+ resetShrink();
+ };
+
+ var resetExpand = function() {
expandChild.style.width = expand.offsetWidth + 10 + 'px';
expandChild.style.height = expand.offsetHeight + 10 + 'px';
expand.scrollLeft = expand.scrollWidth;
expand.scrollTop = expand.scrollHeight;
+ lastExpandWidth = element.offsetWidth;
+ lastExpandHeight = element.offsetHeight;
+ };
+
+ var resetShrink = function() {
shrink.scrollLeft = shrink.scrollWidth;
shrink.scrollTop = shrink.scrollHeight;
- lastWidth = element.offsetWidth;
- lastHeight = element.offsetHeight;
+ lastShrinkWidth = element.offsetWidth;
+ lastShrinkHeight = element.offsetHeight;
};
reset();
@@ -116,17 +127,17 @@
};
addEvent(expand, 'scroll', function() {
- if (element.offsetWidth > lastWidth || element.offsetHeight > lastHeight) {
+ if (element.offsetWidth > lastExpandWidth || element.offsetHeight > lastExpandHeight) {
changed();
}
- reset();
+ resetExpand();
});
addEvent(shrink, 'scroll',function() {
- if (element.offsetWidth < lastWidth || element.offsetHeight < lastHeight) {
+ if (element.offsetWidth < lastShrinkWidth || element.offsetHeight < lastShrinkHeight) {
changed();
}
- reset();
+ resetShrink();
});
}
From bdc4ecc86b7b8b1af6a423ce0ec132aa87b0f7e8 Mon Sep 17 00:00:00 2001
From: Dusty Holmes
Date: Wed, 16 Sep 2015 11:25:17 -0500
Subject: [PATCH 031/122] Undo some of the previous change
Resetting the scroll positions for both expand and shrink is valuable in a single reset function. Without that, scroll positions were not getting reset properly at all times.
---
src/ResizeSensor.js | 20 ++++++--------------
1 file changed, 6 insertions(+), 14 deletions(-)
diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js
index d329d95..a76d614 100755
--- a/src/ResizeSensor.js
+++ b/src/ResizeSensor.js
@@ -90,24 +90,12 @@
var lastExpandWidth, lastExpandHeight;
var reset = function() {
- resetExpand();
- resetShrink();
- };
-
- var resetExpand = function() {
expandChild.style.width = expand.offsetWidth + 10 + 'px';
expandChild.style.height = expand.offsetHeight + 10 + 'px';
expand.scrollLeft = expand.scrollWidth;
expand.scrollTop = expand.scrollHeight;
- lastExpandWidth = element.offsetWidth;
- lastExpandHeight = element.offsetHeight;
- };
-
- var resetShrink = function() {
shrink.scrollLeft = shrink.scrollWidth;
shrink.scrollTop = shrink.scrollHeight;
- lastShrinkWidth = element.offsetWidth;
- lastShrinkHeight = element.offsetHeight;
};
reset();
@@ -130,14 +118,18 @@
if (element.offsetWidth > lastExpandWidth || element.offsetHeight > lastExpandHeight) {
changed();
}
- resetExpand();
+ reset();
+ lastExpandWidth = element.offsetWidth;
+ lastExpandHeight = element.offsetHeight;
});
addEvent(shrink, 'scroll',function() {
if (element.offsetWidth < lastShrinkWidth || element.offsetHeight < lastShrinkHeight) {
changed();
}
- resetShrink();
+ reset();
+ lastShrinkWidth = element.offsetWidth;
+ lastShrinkHeight = element.offsetHeight;
});
}
From 4086a9059d2b37f402f4db4921363a76a97dd403 Mon Sep 17 00:00:00 2001
From: Dusty Holmes
Date: Thu, 17 Sep 2015 08:58:55 -0500
Subject: [PATCH 032/122] Fix issue caused by not resetting both scrollbar
positions
---
src/ResizeSensor.js | 31 ++++++++++++-------------------
1 file changed, 12 insertions(+), 19 deletions(-)
diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js
index a76d614..3d0d599 100755
--- a/src/ResizeSensor.js
+++ b/src/ResizeSensor.js
@@ -86,8 +86,7 @@
var shrink = element.resizeSensor.childNodes[1];
var shrinkChild = shrink.childNodes[0];
- var lastShrinkWidth, lastShrinkHeight;
- var lastExpandWidth, lastExpandHeight;
+ var lastWidth, lastHeight;
var reset = function() {
expandChild.style.width = expand.offsetWidth + 10 + 'px';
@@ -96,6 +95,8 @@
expand.scrollTop = expand.scrollHeight;
shrink.scrollLeft = shrink.scrollWidth;
shrink.scrollTop = shrink.scrollHeight;
+ lastWidth = element.offsetWidth;
+ lastHeight = element.offsetHeight;
};
reset();
@@ -113,24 +114,16 @@
el.addEventListener(name, cb);
}
};
+
+ var onScroll = function() {
+ if (element.offsetWidth != lastWidth || element.offsetHeight != lastHeight) {
+ changed();
+ }
+ reset();
+ }
- addEvent(expand, 'scroll', function() {
- if (element.offsetWidth > lastExpandWidth || element.offsetHeight > lastExpandHeight) {
- changed();
- }
- reset();
- lastExpandWidth = element.offsetWidth;
- lastExpandHeight = element.offsetHeight;
- });
-
- addEvent(shrink, 'scroll',function() {
- if (element.offsetWidth < lastShrinkWidth || element.offsetHeight < lastShrinkHeight) {
- changed();
- }
- reset();
- lastShrinkWidth = element.offsetWidth;
- lastShrinkHeight = element.offsetHeight;
- });
+ addEvent(expand, 'scroll', onScroll);
+ addEvent(shrink, 'scroll', onScroll);
}
if ("[object Array]" === Object.prototype.toString.call(element)
From 97b7e6b770392cd070034955c68f2733e9324212 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C2=A3ukasz=20Zdanikowski?=
Date: Wed, 30 Sep 2015 15:02:30 +0200
Subject: [PATCH 033/122] Add support for multi queries, eg.
[min-width="1px"][max-width="2px"]
---
src/ElementQueries.js | 6 ++++--
1 file changed, 4 insertions(+), 2 deletions(-)
diff --git a/src/ElementQueries.js b/src/ElementQueries.js
index 2e4b566..6e7c357 100755
--- a/src/ElementQueries.js
+++ b/src/ElementQueries.js
@@ -179,17 +179,19 @@
}
}
- var regex = /,?([^,\n]*)\[[\s\t]*(min|max)-(width|height)[\s\t]*[~$\^]?=[\s\t]*"([^"]*)"[\s\t]*]([^\n\s\{]*)/mgi;
+ var regex = /,?([^,\n]*?)\[[\s\t]*?(min|max)-(width|height)[\s\t]*?[~$\^]?=[\s\t]*?"([^"]*?)"[\s\t]*?]([^\n\s\{]*?)/mgi;
/**
* @param {String} css
*/
function extractQuery(css) {
var match;
+ var smatch;
css = css.replace(/'/g, '"');
while (null !== (match = regex.exec(css))) {
if (5 < match.length) {
- queueQuery(match[1] || match[5], match[2], match[3], match[4]);
+ smatch = match[1] || match[5] || smatch;
+ queueQuery(smatch, match[2], match[3], match[4]);
}
}
}
From 5127e931ca16a2300d605f39546c9325c3023bf0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz?=
Date: Thu, 1 Oct 2015 11:45:12 +0200
Subject: [PATCH 034/122] Fix for proper handling of native node lists
Proper handling for NodeList and HTMLCollection objects
---
src/ResizeSensor.js | 9 ++++++---
1 file changed, 6 insertions(+), 3 deletions(-)
diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js
index 3d0d599..65315d2 100755
--- a/src/ResizeSensor.js
+++ b/src/ResizeSensor.js
@@ -125,8 +125,11 @@
addEvent(expand, 'scroll', onScroll);
addEvent(shrink, 'scroll', onScroll);
}
-
- if ("[object Array]" === Object.prototype.toString.call(element)
+
+ var elementType = Object.prototype.toString.call(element);
+ if ('[object Array]' === elementType
+ || ('[object NodeList]' === elementTyle)
+ || ('[object HTMLCollection]' === elementTyle)
|| ('undefined' !== typeof jQuery && element instanceof jQuery) //jquery
|| ('undefined' !== typeof Elements && element instanceof Elements) //mootools
) {
@@ -151,4 +154,4 @@
}
};
-})();
\ No newline at end of file
+})();
From 5149c38b73cbd726f86476548c53f391c4a20229 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz?=
Date: Fri, 2 Oct 2015 18:32:30 +0200
Subject: [PATCH 035/122] Typo fix
Sorry for that elementTyle should be elementType
---
src/ResizeSensor.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js
index 65315d2..5b9c8b8 100755
--- a/src/ResizeSensor.js
+++ b/src/ResizeSensor.js
@@ -128,8 +128,8 @@
var elementType = Object.prototype.toString.call(element);
if ('[object Array]' === elementType
- || ('[object NodeList]' === elementTyle)
- || ('[object HTMLCollection]' === elementTyle)
+ || ('[object NodeList]' === elementType)
+ || ('[object HTMLCollection]' === elementType)
|| ('undefined' !== typeof jQuery && element instanceof jQuery) //jquery
|| ('undefined' !== typeof Elements && element instanceof Elements) //mootools
) {
From 99ab7da9d19a60bdb95b5ba366793b9559e452ff Mon Sep 17 00:00:00 2001
From: Zacharias Luiten
Date: Tue, 20 Oct 2015 14:37:47 +0200
Subject: [PATCH 036/122] detach correctly when element is collection typed,
fixes #54
---
src/ResizeSensor.js | 17 +++++++++++++----
1 file changed, 13 insertions(+), 4 deletions(-)
diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js
index 5b9c8b8..e5ce136 100755
--- a/src/ResizeSensor.js
+++ b/src/ResizeSensor.js
@@ -125,14 +125,16 @@
addEvent(expand, 'scroll', onScroll);
addEvent(shrink, 'scroll', onScroll);
}
-
+
var elementType = Object.prototype.toString.call(element);
- if ('[object Array]' === elementType
+ var isCollectionTyped = ('[object Array]' === elementType
|| ('[object NodeList]' === elementType)
|| ('[object HTMLCollection]' === elementType)
|| ('undefined' !== typeof jQuery && element instanceof jQuery) //jquery
|| ('undefined' !== typeof Elements && element instanceof Elements) //mootools
- ) {
+ );
+
+ if (isCollectionTyped) {
var i = 0, j = element.length;
for (; i < j; i++) {
attachResizeEvent(element[i], callback);
@@ -142,7 +144,14 @@
}
this.detach = function() {
- ResizeSensor.detach(element);
+ if (isCollectionTyped) {
+ var i = 0, j = element.length;
+ for (; i < j; i++) {
+ ResizeSensor.detach(element[i]);
+ }
+ } else {
+ ResizeSensor.detach(element);
+ }
};
};
From 50cdad5ed731acea0f0c1aee077c7c8a09486380 Mon Sep 17 00:00:00 2001
From: wickning1
Date: Fri, 11 Dec 2015 21:39:03 -0600
Subject: [PATCH 037/122] dramatically increase the performance of initial page
load when a lot of css rules use element queries
---
src/ElementQueries.js | 34 +++++++++++++++++++++++++---------
1 file changed, 25 insertions(+), 9 deletions(-)
diff --git a/src/ElementQueries.js b/src/ElementQueries.js
index 6e7c357..855f0ab 100755
--- a/src/ElementQueries.js
+++ b/src/ElementQueries.js
@@ -159,7 +159,15 @@
* @param {String} property width|height
* @param {String} value
*/
+ var allQueries = {};
function queueQuery(selector, mode, property, value) {
+ if (typeof(allQueries[mode]) == 'undefined') allQueries[mode] = {};
+ if (typeof(allQueries[mode][property]) == 'undefined') allQueries[mode][property] = {};
+ if (typeof(allQueries[mode][property][value]) == 'undefined') allQueries[mode][property][value] = selector;
+ else allQueries[mode][property][value] += ','+selector;
+ }
+
+ function executeQueries() {
var query;
if (document.querySelectorAll) query = document.querySelectorAll.bind(document);
if (!query && 'undefined' !== typeof $$) query = $$;
@@ -169,14 +177,21 @@
throw 'No document.querySelectorAll, jQuery or Mootools\'s $$ found.';
}
- var elements = query(selector);
- for (var i = 0, j = elements.length; i < j; i++) {
- setupElement(elements[i], {
- mode: mode,
- property: property,
- value: value
- });
+ for (var mode in allQueries) if (allQueries.hasOwnProperty(mode)) {
+ for (var property in allQueries[mode]) if (allQueries[mode].hasOwnProperty(property)) {
+ for (var value in allQueries[mode][property]) if (allQueries[mode][property].hasOwnProperty(value)) {
+ var elements = query(allQueries[mode][property][value]);
+ for (var i = 0, j = elements.length; i < j; i++) {
+ setupElement(elements[i], {
+ mode: mode,
+ property: property,
+ value: value
+ });
+ }
+ }
+ }
}
+
}
var regex = /,?([^,\n]*?)\[[\s\t]*?(min|max)-(width|height)[\s\t]*?[~$\^]?=[\s\t]*?"([^"]*?)"[\s\t]*?]([^\n\s\{]*?)/mgi;
@@ -242,6 +257,7 @@
}
}
}
+ executeQueries();
};
/**
@@ -320,7 +336,7 @@
document.addEventListener('DOMContentLoaded', callback, false);
}
/* Safari, iCab, Konqueror */
- if (/KHTML|WebKit|iCab/i.test(navigator.userAgent)) {
+ else if (/KHTML|WebKit|iCab/i.test(navigator.userAgent)) {
var DOMLoadTimer = setInterval(function () {
if (/loaded|complete/i.test(document.readyState)) {
callback();
@@ -329,7 +345,7 @@
}, 10);
}
/* Other web browsers */
- window.onload = callback;
+ else window.onload = callback;
};
if (window.addEventListener) {
From 833dee08c0cca4156a11e3a2d8176c403c4ea15f Mon Sep 17 00:00:00 2001
From: wickning1
Date: Fri, 11 Dec 2015 21:49:45 -0600
Subject: [PATCH 038/122] fix bug where css parsing fails when attribute
portion of selector comes first
---
src/ElementQueries.js | 14 ++++++++------
1 file changed, 8 insertions(+), 6 deletions(-)
diff --git a/src/ElementQueries.js b/src/ElementQueries.js
index 6e7c357..fccd4b6 100755
--- a/src/ElementQueries.js
+++ b/src/ElementQueries.js
@@ -179,8 +179,8 @@
}
}
- var regex = /,?([^,\n]*?)\[[\s\t]*?(min|max)-(width|height)[\s\t]*?[~$\^]?=[\s\t]*?"([^"]*?)"[\s\t]*?]([^\n\s\{]*?)/mgi;
-
+ var regex = /,?[\s\t]*([^,\n]*?)((?:\[[\s\t]*?(?:min|max)-(?:width|height)[\s\t]*?[~$\^]?=[\s\t]*?"[^"]*?"[\s\t]*?])+)([^,\n\s\{]*)/mgi;
+ var attrRegex = /\[[\s\t]*?(min|max)-(width|height)[\s\t]*?[~$\^]?=[\s\t]*?"([^"]*?)"[\s\t]*?]/mgi;
/**
* @param {String} css
*/
@@ -189,9 +189,11 @@
var smatch;
css = css.replace(/'/g, '"');
while (null !== (match = regex.exec(css))) {
- if (5 < match.length) {
- smatch = match[1] || match[5] || smatch;
- queueQuery(smatch, match[2], match[3], match[4]);
+ smatch = match[1] + match[3];
+ attrs = match[2];
+
+ while (null !== (attrMatch = attrRegex.exec(attrs))) {
+ queueQuery(smatch, attrMatch[1], attrMatch[2], attrMatch[3]);
}
}
}
@@ -235,7 +237,7 @@
this.withTracking = withTracking;
for (var i = 0, j = document.styleSheets.length; i < j; i++) {
try {
- readRules(document.styleSheets[i].cssText || document.styleSheets[i].cssRules || document.styleSheets[i].rules);
+ readRules(document.styleSheets[i].cssRules || document.styleSheets[i].rules || document.styleSheets[i].cssText);
} catch(e) {
if (e.name !== 'SecurityError') {
throw e;
From a062c2b36aeb4ceeb43534e5823e9962e26ec36f Mon Sep 17 00:00:00 2001
From: Casey Foster
Date: Wed, 27 Jan 2016 16:58:04 -0600
Subject: [PATCH 039/122] Fix #63 Use overflow: hidden instead of scroll
---
src/ResizeSensor.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js
index e5ce136..177e04e 100755
--- a/src/ResizeSensor.js
+++ b/src/ResizeSensor.js
@@ -64,7 +64,7 @@
element.resizeSensor = document.createElement('div');
element.resizeSensor.className = 'resize-sensor';
- var style = 'position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;';
+ var style = 'position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;';
var styleChild = 'position: absolute; left: 0; top: 0;';
element.resizeSensor.style.cssText = style;
@@ -114,7 +114,7 @@
el.addEventListener(name, cb);
}
};
-
+
var onScroll = function() {
if (element.offsetWidth != lastWidth || element.offsetHeight != lastHeight) {
changed();
From a2f12d94ab9516a31d14bae299c4879c435cb8b8 Mon Sep 17 00:00:00 2001
From: Alberto Villa
Date: Thu, 28 Jan 2016 22:12:17 +0100
Subject: [PATCH 040/122] Force 'expand' child to have no transitions
If its size update were animated, the element could become smaller
than its parent, thus making impossible to scroll 'expand' to bottom
on further 'scroll' events and breaking the sensor.
---
src/ResizeSensor.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js
index 177e04e..204d445 100755
--- a/src/ResizeSensor.js
+++ b/src/ResizeSensor.js
@@ -65,7 +65,7 @@
element.resizeSensor = document.createElement('div');
element.resizeSensor.className = 'resize-sensor';
var style = 'position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;';
- var styleChild = 'position: absolute; left: 0; top: 0;';
+ var styleChild = 'position: absolute; left: 0; top: 0; transition: 0s;';
element.resizeSensor.style.cssText = style;
element.resizeSensor.innerHTML =
From e33b90b34a1941061da299049b562139c168cdb8 Mon Sep 17 00:00:00 2001
From: "Marc J. Schmidt"
Date: Sun, 31 Jan 2016 14:02:19 +0100
Subject: [PATCH 041/122] Made modules loadable via node commonjs
---
README.md | 16 ++++++++++++++++
src/ElementQueries.js | 24 ++++++++++++++++++------
src/ResizeSensor.js | 14 +++++++++++---
3 files changed, 45 insertions(+), 9 deletions(-)
diff --git a/README.md b/README.md
index 8b361f5..49377a5 100644
--- a/README.md
+++ b/README.md
@@ -61,6 +61,22 @@ Include the javascript files at the bottom and you're good to go. No custom java
```
+## Module Loader
+
+If you're using a module loader you need to trigger the event listening or initialization yourself:
+
+```javascript
+var EQ = require('node_modules/css-element-queries/ElementQueries');
+
+ //attaches to DOMLoadContent
+EQ.listen();
+
+//or if you want to trigger it yourself.
+// Parse 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.
+EQ.init();
+```
+
Issues
------
diff --git a/src/ElementQueries.js b/src/ElementQueries.js
index 65ecf94..d19b83f 100755
--- a/src/ElementQueries.js
+++ b/src/ElementQueries.js
@@ -5,6 +5,13 @@
*/
;
(function() {
+
+ var ResizeSensor = window.ResizeSensor;
+
+ if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+ ResizeSensor = require('./ResizeSensor');
+ }
+
/**
*
* @type {Function}
@@ -350,11 +357,16 @@
else window.onload = callback;
};
- if (window.addEventListener) {
- window.addEventListener('load', ElementQueries.init, false);
- } else {
- window.attachEvent('onload', ElementQueries.init);
- }
- domLoaded(ElementQueries.init);
+ ElementQueries.listen = function() {
+ domLoaded(ElementQueries.init);
+ };
+ // make available to common module loader
+ if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+ module.exports = ElementQueries;
+ }
+ else {
+ window.ElementQueries = ElementQueries;
+ ElementQueries.listen();
+ }
})();
diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js
index 204d445..8fe2db9 100755
--- a/src/ResizeSensor.js
+++ b/src/ResizeSensor.js
@@ -14,7 +14,7 @@
*
* @constructor
*/
- this.ResizeSensor = function(element, callback) {
+ var ResizeSensor = function(element, callback) {
/**
*
* @constructor
@@ -120,7 +120,7 @@
changed();
}
reset();
- }
+ };
addEvent(expand, 'scroll', onScroll);
addEvent(shrink, 'scroll', onScroll);
@@ -155,7 +155,7 @@
};
};
- this.ResizeSensor.detach = function(element) {
+ ResizeSensor.detach = function(element) {
if (element.resizeSensor) {
element.removeChild(element.resizeSensor);
delete element.resizeSensor;
@@ -163,4 +163,12 @@
}
};
+ // make available to common module loader
+ if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+ module.exports = ResizeSensor;
+ }
+ else {
+ window.ResizeSensor = ResizeSensor;
+ }
+
})();
From 786c776fdbd5ba2bffb24d9ff7b133677580b8cc Mon Sep 17 00:00:00 2001
From: "Marc J. Schmidt"
Date: Sun, 31 Jan 2016 16:15:25 +0100
Subject: [PATCH 042/122] Implemented better responsive image functionality.
Better readme
---
README.md | 70 ++++++++++-------
src/ElementQueries.js | 176 +++++++++++++++++++++++++++++++++++++-----
2 files changed, 198 insertions(+), 48 deletions(-)
diff --git a/README.md b/README.md
index 49377a5..e573631 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
-CSS Element Queries
-===================
+# CSS Element Queries
+
[](https://gitter.im/marcj/css-element-queries?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
@@ -15,43 +15,53 @@ Features:
- no interval/timeout detection. Truly event-based through integrated ResizeSensor class.
- no CSS modifications. Valid CSS Syntax
- all CSS selectors available. Uses regular attribute selector. No need to write rules in HTML.
- - supports and tested in webkit, gecko and IE(7/8/9/10/11).
+ - supports and tested in webkit, gecko and IE(7/8/9/10/11)
- `min-width`, `min-height`, `max-width` and `max-height` are supported so far
- works with any layout modifications: HTML (innerHTML etc), inline styles, DOM mutation, CSS3 transitions, fluid layout changes (also percent changes), pseudo classes (:hover etc.), window resizes and more
- no Javascript-Framework dependency (works with jQuery, Mootools, etc.)
+ - Works beautiful for responsive images without FOUC
More demos and information: http://marcj.github.io/css-element-queries/
-Example
--------
+## Examples
+
+### Element Query
```css
-.widget-name {
- padding: 25px;
+.widget-name h2 {
+ font-size: 12px;
}
-.widget-name[max-width="200px"] {
- padding: 0;
+
+.widget-name[min-width~="400px"] h2 {
+ font-size: 18px;
}
-.widget-name[min-width="500px"] {
+
+.widget-name[min-width~="900px"] h2 {
padding: 55px;
+ text-align: center;
+ font-size: 24px;
}
-/* responsive images */
-.responsive-image img {
- width: 100%;
+.widget-name[min-width~="700px"] h2 {
+ font-size: 34px;
+ color: red;
}
+```
-.responsive-image[max-width^='400px'] img {
- content: url(demo/image-400px.jpg);
-}
+```html
+