From 5661b1c9ee0d4cb0f253dff11fe7347aee5a563d Mon Sep 17 00:00:00 2001 From: Harry Love Date: Mon, 9 Jan 2012 15:20:08 -0800 Subject: [PATCH 1/4] Change demo flexie src call to use relative path --- demo/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demo/index.html b/demo/index.html index f9493fd..42bc5dc 100644 --- a/demo/index.html +++ b/demo/index.html @@ -103,6 +103,6 @@ - + \ No newline at end of file From f3e8df82e1d8c5250adfccc28cd1ca24fc570ce5 Mon Sep 17 00:00:00 2001 From: Harry Love Date: Mon, 9 Jan 2012 15:28:11 -0800 Subject: [PATCH 2/4] Fixes issue #32 Check for existence of object before assigning. Fixes "Uncaught TypeError: Cannot read property 'children' of undefined" --- src/flexie.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/flexie.js b/src/flexie.js index 631deea..0f82d40 100755 --- a/src/flexie.js +++ b/src/flexie.js @@ -1067,14 +1067,14 @@ var Flexie = (function (win, doc) { isNested; while (parent.FLX_DOM_ID) { - obj = FLEX_BOXES[parent.FLX_DOM_ID]; - matrix = createMatchMatrix(obj.children, sanitizeChildren(parent, parent.childNodes), NULL); - - totalFlex += matrix.total; - isNested = TRUE; - - parent = parent.parentNode; - } + if (FLEX_BOXES[parent.FLX_DOM_ID]) { + obj = FLEX_BOXES[parent.FLX_DOM_ID]; + matrix = createMatchMatrix(obj.children, sanitizeChildren(parent, parent.childNodes), NULL); + totalFlex += matrix.total; + isNested = TRUE; + } + parent = parent.parentNode; + } return { nested : isNested, @@ -1895,7 +1895,7 @@ var Flexie = (function (win, doc) { while (parent) { flex = FLEX_BOXES[parent.FLX_DOM_ID]; - if (flex) { + if (flex && flex.nodes) { cleanPositioningProperties(flex.nodes); self.setup(flex.target, flex.nodes, flex); } From f9df5ea880c82a0fb36f28dcddc44d21b225991f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=98yvind=20Smestad?= Date: Wed, 26 Jun 2013 09:41:33 +0200 Subject: [PATCH 3/4] Fix for initializing Flexie with JS for nested layouts in IE 9 and lower, with tests. The tests only contain relevant flexbox code, and will not flex in browsers where flexbox is natively supported. --- src/flexie.js | 10 ++++---- test/css/nested-grid-js.css | 33 +++++++++++++++++++++++++ test/css/nested-grid.css | 48 +++++++++++++++++++++++++++++++++++++ test/nested-grid-js.html | 37 ++++++++++++++++++++++++++++ test/nested-grid.html | 23 ++++++++++++++++++ 5 files changed, 147 insertions(+), 4 deletions(-) create mode 100644 test/css/nested-grid-js.css create mode 100644 test/css/nested-grid.css create mode 100644 test/nested-grid-js.html create mode 100644 test/nested-grid.html diff --git a/src/flexie.js b/src/flexie.js index 0f82d40..eb16343 100755 --- a/src/flexie.js +++ b/src/flexie.js @@ -1548,11 +1548,13 @@ var Flexie = (function (win, doc) { x = flexers[key][k]; max = NULL; - for (m = 0, n = x.properties.length; m < n; m++) { - rule = x.properties[m]; + if (x.properties) { + for (m = 0, n = x.properties.length; m < n; m++) { + rule = x.properties[m]; - if ((RESTRICTIVE_PROPERTIES).test(rule.property)) { - max = parseFloat(rule.value); + if ((RESTRICTIVE_PROPERTIES).test(rule.property)) { + max = parseFloat(rule.value); + } } } diff --git a/test/css/nested-grid-js.css b/test/css/nested-grid-js.css new file mode 100644 index 0000000..593b8ac --- /dev/null +++ b/test/css/nested-grid-js.css @@ -0,0 +1,33 @@ +/* set up stuff: */ +body, html { + width: 100%; + height: 100%; + padding: 0; + margin: 0; + font: normal 13px/16px "Helvetica Neue", Helvetica, Arial, sans-serif; +} + +#box-wrap { + margin: 0 auto; + width: 70%; + height: 99%; + border: 1px solid #8ec1da; + background: #d9ecf5; +} + +#box-wrap-inner div { + margin: 10px; + background: #f8f8f8; + border: 1px solid #8ec1da; + text-align: center; + line-height: 50px; +} + +/* Sizing of flex-boxes: */ +#box-wrap-inner { + height: 100%; +} + +#menu { + width: 200px; +} diff --git a/test/css/nested-grid.css b/test/css/nested-grid.css new file mode 100644 index 0000000..0b27c11 --- /dev/null +++ b/test/css/nested-grid.css @@ -0,0 +1,48 @@ +/* set up stuff: */ +body, html { + width: 100%; + height: 100%; + padding: 0; + margin: 0; + font: normal 13px/16px "Helvetica Neue", Helvetica, Arial, sans-serif; +} + +#box-wrap { + margin: 0 auto; + width: 70%; + height: 99%; + border: 1px solid #8ec1da; + background: #d9ecf5; +} + +#box-wrap-inner div { + margin: 10px; + background: #f8f8f8; + border: 1px solid #8ec1da; + text-align: center; + line-height: 50px; +} + +/* Sizing of flex-boxes: */ +#box-wrap-inner { + height: 100%; +} + +#menu { + width: 200px; +} + +/* Flexie specific styles: */ +#box-wrap-inner { + display: box; + box-orient: vertical; +} + +#box-2 { + box-flex: 1; + display: box; +} + +#main { + box-flex: 1; +} diff --git a/test/nested-grid-js.html b/test/nested-grid-js.html new file mode 100644 index 0000000..871ec2b --- /dev/null +++ b/test/nested-grid-js.html @@ -0,0 +1,37 @@ + + + + + Flexie grid + + + + +
+
+
Box 1
+
+ +
main
+
+
Box 3
+
+
+ + + + + diff --git a/test/nested-grid.html b/test/nested-grid.html new file mode 100644 index 0000000..d2e4846 --- /dev/null +++ b/test/nested-grid.html @@ -0,0 +1,23 @@ + + + + + Flexie grid + + + + +
+
+
Box 1
+
+ +
main
+
+
Box 3
+
+
+ + + + From 40da658919f27d7ec1a789fc1fe825aec2207e97 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=98yvind=20Smestad?= Date: Fri, 19 Jul 2013 09:39:01 +0200 Subject: [PATCH 4/4] Disable automatic initialization on startup, to allow using the library through JavaScript only (with no magic CSS parsing). --- src/flexie.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/flexie.js b/src/flexie.js index eb16343..bcca499 100755 --- a/src/flexie.js +++ b/src/flexie.js @@ -2030,7 +2030,7 @@ var Flexie = (function (win, doc) { FLX.version = "1.0.3"; // Load when the DOM is ready - attachLoadMethod(FLX.init); + //attachLoadMethod(FLX.init); return FLX; }(this, document));