From 3558c228f7e733f70dc5cffd5a2e5639504f1fb0 Mon Sep 17 00:00:00 2001
From: John Bintz <john@coswellproductions.com>
Date: Thu, 27 Aug 2009 18:15:34 -0400
Subject: [PATCH] floated div layout generator working

---
 .../FloatedDivConstructor.js                  | 59 +++++++++++++---
 .../LayoutConstructorsTest.html               | 68 +++++++++++++++++--
 2 files changed, 110 insertions(+), 17 deletions(-)

diff --git a/addons/Core/layout_constructors/FloatedDivConstructor.js b/addons/Core/layout_constructors/FloatedDivConstructor.js
index 47787ae..01de19e 100644
--- a/addons/Core/layout_constructors/FloatedDivConstructor.js
+++ b/addons/Core/layout_constructors/FloatedDivConstructor.js
@@ -3,16 +3,43 @@ var FloatedDivConstructor = Class.create({
     var output = [];
     output.push('<div id="container">');
 
+
     var areas = $w("header comic body footer");
     var i, il;
 
     var indent = 1;
+    var gi = function() { return "  ".times(indent); }
+    var has_whole_sidebar = null;
 
     var range = null;
     if (layout.left) {
       if (layout.right) {
-        range[0] = Math.min(layout.left[0], layout.right[0]);
-        range[1] = Math.max(layout.left[1], layout.right[1]);
+        range = [];
+
+        var all_same = true;
+        for (i = 0; i < 2; ++i) {
+          if (layout.left[i] != layout.right[i]) { all_same = false; break; }
+        }
+
+        if (!all_same) {
+          $w('left right').each(function(field) {
+            if (!has_whole_sidebar) {
+              if ((layout[field][0] == 0) && (layout[field][1] == 3)) {
+                has_whole_sidebar = field;
+              }
+            }
+          });
+        }
+
+        if (!has_whole_sidebar) {
+          range[0] = Math.min(layout.left[0], layout.right[0]);
+          range[1] = Math.max(layout.left[1], layout.right[1]);
+        } else {
+          switch (has_whole_sidebar) {
+            case 'left': range = layout.right; break;
+            case 'right': range = layout.left; break;
+          }
+        }
       } else {
         range = layout.left;
       }
@@ -23,29 +50,41 @@ var FloatedDivConstructor = Class.create({
     }
 
     for (i = 0, il = areas.length; i < il; ++i) {
+      if ((i == 0) && has_whole_sidebar) {
+        output.push(gi() + '<div id="whole-sidebar-container">');
+        indent++;
+        output.push(gi() + '<div id="' + has_whole_sidebar + '-sidebar"><?php echo $' + has_whole_sidebar + '_sidebar ?></div>');
+      }
       if (range) {
         if (range[0] == i) {
-          output.push("  ".times(indent) + '<div id="sidebar-container">');
+          output.push(gi() + '<div id="sidebar-container">');
           indent++;
         }
         $w("left right").each(function(field) {
-          if (layout[field]) {
-            if (layout[field][0] == i) {
-              output.push("  ".times(indent) + '<div id="' + field + '-sidebar"><?php echo $' + field + '_sidebar ?></div>');
+          if (field != has_whole_sidebar) {
+            if (layout[field]) {
+              if (layout[field][0] == i) {
+                output.push(gi() + '<div id="' + field + '-sidebar"><?php echo $' + field + '_sidebar ?></div>');
+              }
             }
           }
         });
       }
 
-      output.push("  ".times(indent) + '<div id="' + areas[i] + '"><?php echo $' + areas[i] + ' ?></div>');
+      output.push(gi() + '<div id="' + areas[i] + '"><?php echo $' + areas[i] + ' ?></div>');
 
       if (range) {
         if (range[1] == i) {
-          output.push("  ".times(indent) + '<br class="clear" />');
+          output.push(gi() + '<br class="clear" />');
           indent--;
-          output.push("  ".times(indent) + '</div>');
+          output.push(gi() + '</div>');
         }
       }
+      if ((i == 3) && has_whole_sidebar) {
+        output.push(gi() + '<br class="clear" />');
+        indent--;
+        output.push(gi() + '</div>');
+      }
     }
 
     output.push('</div>');
@@ -64,7 +103,7 @@ var FloatedDivConstructor = Class.create({
     });
 
     if (include_container) {
-      output.unshift('#sidebar-container { overflow: hidden }');
+      output.unshift('#sidebar-container, #whole-sidebar-container { overflow: hidden }');
       output.push('.clear { clear: both }');
     }
 
diff --git a/addons/Core/layout_constructors/LayoutConstructorsTest.html b/addons/Core/layout_constructors/LayoutConstructorsTest.html
index 0922e18..153fc6a 100644
--- a/addons/Core/layout_constructors/LayoutConstructorsTest.html
+++ b/addons/Core/layout_constructors/LayoutConstructorsTest.html
@@ -15,20 +15,69 @@
           [
             {
               'input': {},
-              'expected_result': '<div id="container">\n  <div id="header"><?php echo $header ?></div>\n  <div id="comic"><?php echo $comic ?></div>\n  <div id="body"><?php echo $body ?></div>\n  <div id="footer"><?php echo $footer ?></div>\n</div>'
+              'expected_result': '<div id="container">\n' +
+                                 '  <div id="header"><?php echo $header ?></div>\n' +
+                                 '  <div id="comic"><?php echo $comic ?></div>\n' +
+                                 '  <div id="body"><?php echo $body ?></div>\n' +
+                                 '  <div id="footer"><?php echo $footer ?></div>\n' +
+                                 '</div>'
             },
             {
               'input': {'left': [0, 0]},
-              'expected_result': '<div id="container">\n  <div id="sidebar-container">\n    <div id="left-sidebar"><?php echo $left_sidebar ?></div>\n    <div id="header"><?php echo $header ?></div>\n    <br class="clear" />\n  </div>\n  <div id="comic"><?php echo $comic ?></div>\n  <div id="body"><?php echo $body ?></div>\n  <div id="footer"><?php echo $footer ?></div>\n</div>'
+              'expected_result': '<div id="container">\n' +
+                                 '  <div id="sidebar-container">\n' +
+                                 '    <div id="left-sidebar"><?php echo $left_sidebar ?></div>\n' +
+                                 '    <div id="header"><?php echo $header ?></div>\n' +
+                                 '    <br class="clear" />\n' +
+                                 '  </div>\n' +
+                                 '  <div id="comic"><?php echo $comic ?></div>\n' +
+                                 '  <div id="body"><?php echo $body ?></div>\n' +
+                                 '  <div id="footer"><?php echo $footer ?></div>\n' +
+                                 '</div>'
             },
             {
               'input': {'left': [0, 1]},
-              'expected_result': '<div id="container">\n  <div id="sidebar-container">\n    <div id="left-sidebar"><?php echo $left_sidebar ?></div>\n    <div id="header"><?php echo $header ?></div>\n    <div id="comic"><?php echo $comic ?></div>\n    <br class="clear" />\n  </div>\n  <div id="body"><?php echo $body ?></div>\n  <div id="footer"><?php echo $footer ?></div>\n</div>'
+              'expected_result': '<div id="container">\n' +
+                                 '  <div id="sidebar-container">\n' +
+                                 '    <div id="left-sidebar"><?php echo $left_sidebar ?></div>\n' +
+                                 '    <div id="header"><?php echo $header ?></div>\n' +
+                                 '    <div id="comic"><?php echo $comic ?></div>\n' +
+                                 '    <br class="clear" />\n' +
+                                 '  </div>\n' +
+                                 '  <div id="body"><?php echo $body ?></div>\n' +
+                                 '  <div id="footer"><?php echo $footer ?></div>\n' +
+                                 '</div>'
             },
             {
               'input': {'right': [0, 1]},
-              'expected_result': '<div id="container">\n  <div id="sidebar-container">\n    <div id="right-sidebar"><?php echo $right_sidebar ?></div>\n    <div id="header"><?php echo $header ?></div>\n    <div id="comic"><?php echo $comic ?></div>\n    <br class="clear" />\n  </div>\n  <div id="body"><?php echo $body ?></div>\n  <div id="footer"><?php echo $footer ?></div>\n</div>'
-            }
+              'expected_result': '<div id="container">\n' +
+                                 '  <div id="sidebar-container">\n' +
+                                 '    <div id="right-sidebar"><?php echo $right_sidebar ?></div>\n' +
+                                 '    <div id="header"><?php echo $header ?></div>\n' +
+                                 '    <div id="comic"><?php echo $comic ?></div>\n' +
+                                 '    <br class="clear" />\n' +
+                                 '  </div>\n' +
+                                 '  <div id="body"><?php echo $body ?></div>\n' +
+                                 '  <div id="footer"><?php echo $footer ?></div>\n' +
+                                 '</div>'
+            },
+            {
+              'input': {'left': [0, 3], 'right': [0, 1]},
+              'expected_result': '<div id="container">\n' +
+                                 '  <div id="whole-sidebar-container">\n' +
+                                 '    <div id="left-sidebar"><?php echo $left_sidebar ?></div>\n' +
+                                 '    <div id="sidebar-container">\n' +
+                                 '      <div id="right-sidebar"><?php echo $right_sidebar ?></div>\n' +
+                                 '      <div id="header"><?php echo $header ?></div>\n' +
+                                 '      <div id="comic"><?php echo $comic ?></div>\n' +
+                                 '      <br class="clear" />\n' +
+                                 '    </div>\n' +
+                                 '    <div id="body"><?php echo $body ?></div>\n' +
+                                 '    <div id="footer"><?php echo $footer ?></div>\n' +
+                                 '    <br class="clear" />\n' +
+                                 '  </div>\n' +
+                                 '</div>'
+            },
           ].each(function(info) {
             var f = new FloatedDivConstructor();
             myThis.assertEqual(info.expected_result, f.generate_html(info.input));
@@ -44,11 +93,16 @@
             },
             {
               'input': {'left': {'width': '200'}},
-              'expected_result': '#sidebar-container { overflow: hidden }\n#left-sidebar { float: left; display: inline; width: 200px }\n.clear { clear: both }'
+              'expected_result': '#sidebar-container, #whole-sidebar-container { overflow: hidden }\n'
+                               + '#left-sidebar { float: left; display: inline; width: 200px }\n'
+                               + '.clear { clear: both }'
             },
             {
               'input': {'left': {'width': '200'}, 'right': {'width': '100'}},
-              'expected_result': '#sidebar-container { overflow: hidden }\n#left-sidebar { float: left; display: inline; width: 200px }\n#right-sidebar { float: right; display: inline; width: 100px }\n.clear { clear: both }'
+              'expected_result': '#sidebar-container, #whole-sidebar-container { overflow: hidden }\n'
+                               + '#left-sidebar { float: left; display: inline; width: 200px }\n'
+                               + '#right-sidebar { float: right; display: inline; width: 100px }\n'
+                               + '.clear { clear: both }'
             }
           ].each(function(info) {
             var f = new FloatedDivConstructor();