nearly have layout editor working

addons/Core/layout_constructors/FloatedDivConstructor.js

@@ -1,30 +1,36 @@
 var FloatedDivConstructor = Class.create({
+  'areas': ["header", "comic", "body", "footer"],
   'generate_html': function(layout) {
     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 has_layout = {};
+    $w('left right').each(function(which) {
+      if (layout[which].active) {
+        has_layout[which] = [layout[which].start, layout[which].end];
+      }
+    });
+    
     var range = null;
-    if (layout.left) {
+    if (has_layout.left) {
-      if (layout.right) {
+      if (has_layout.right) {
         range = [];
 
         var all_same = true;
-        for (i = 0; i < 2; ++i) {
+        for (i = 0; i <= 1; ++i) {
-          if (layout.left[i] != layout.right[i]) { all_same = false; break; }
+          if (has_layout.left[i] != has_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)) {
+              if ((has_layout[field][0] == 0) && (has_layout[field][1] == 3)) {
                 has_whole_sidebar = field;
               }
             }
@@ -32,24 +38,24 @@ var FloatedDivConstructor = Class.create({
         }
 
         if (!has_whole_sidebar) {
-          range[0] = Math.min(layout.left[0], layout.right[0]);
+          range[0] = Math.min(has_layout.left[0], has_layout.right[0]);
-          range[1] = Math.max(layout.left[1], layout.right[1]);
+          range[1] = Math.max(has_layout.left[1], has_layout.right[1]);
         } else {
           switch (has_whole_sidebar) {
-            case 'left': range = layout.right; break;
+            case 'left': range = has_layout.right; break;
-            case 'right': range = layout.left; break;
+            case 'right': range = has_layout.left; break;
           }
         }
       } else {
-        range = layout.left;
+        range = has_layout.left;
       }
     } else {
-      if (layout.right) {
+      if (has_layout.right) {
-        range = layout.right;
+        range = has_layout.right;
       }
     }
 
-    for (i = 0, il = areas.length; i < il; ++i) {
+    for (i = 0, il = this.areas.length; i < il; ++i) {
       if ((i == 0) && has_whole_sidebar) {
         output.push(gi() + '<div id="whole-sidebar-container">');
         indent++;
@@ -62,8 +68,8 @@ var FloatedDivConstructor = Class.create({
         }
         $w("left right").each(function(field) {
           if (field != has_whole_sidebar) {
-            if (layout[field]) {
+            if (has_layout[field]) {
-              if (layout[field][0] == i) {
+              if (has_layout[field][0] == i) {
                 output.push(gi() + '<div id="' + field + '-sidebar"><?php echo $' + field + '_sidebar ?></div>');
               }
             }
@@ -71,7 +77,7 @@ var FloatedDivConstructor = Class.create({
         });
       }
 
-      output.push(gi() + '<div id="' + areas[i] + '"><?php echo $' + areas[i] + ' ?></div>');
+      output.push(gi() + '<div id="' + this.areas[i] + '"><?php echo $' + this.areas[i] + ' ?></div>');
 
       if (range) {
         if (range[1] == i) {
@@ -91,22 +97,48 @@ var FloatedDivConstructor = Class.create({
 
     return output.join("\n");
   },
-  'generate_css': function(info) {
+  'generate_css': function(layout) {
     var output = [];
     var include_container = false;
     
+    var area_margins = {};
+    var i;
+    var myThis = this;
+    
     $w('left right').each(function(field) {
-      if (info[field]) {
+      if (layout[field].active) {
         include_container = true;
-        output.push('#' + field + '-sidebar { float: ' + field + '; display: inline; width: ' + info[field].width + 'px }');
+        output.push('#' + field + '-sidebar { float: ' + field + '; display: inline; width: ' + layout[field].width + 'px }');
+        
+        for (i = layout[field].start; i <= layout[field].end; ++i) {
+          var area = myThis.areas[i];
+          if (!area_margins[area]) { area_margins[area] = {}; }
+          area_margins[area][field] = layout[field].width;
+        }
       }
     });
 
+    for (i = 0; i < this.areas.length; ++i) {
+      var area = this.areas[i];
+      if (area_margins[area]) {
+        var types = [];
+        var type;
+        for (type in area_margins[area]) {
+          types.push("margin-" + type + ": " + area_margins[area][type] + "px"); 
+        }
+        output.push("#" + area + " { " + types.join("; ") + " }");
+      }
+    }
+    
     if (include_container) {
       output.unshift('#sidebar-container, #whole-sidebar-container { overflow: hidden }');
       output.push('.clear { clear: both }');
     }
 
+    if (layout.body) {
+      output.unshift('#container { width: ' + layout.body + 'px }'); 
+    }
+
     return output.join("\n");
   }
 });

addons/Core/layout_constructors/LayoutConstructorsTest.html

@@ -14,7 +14,18 @@
           var myThis = this;
           [
             {
-              'input': {},
+              'input': {
+                'left': {
+                  'active': false,
+                  'start':  0,
+                  'end':    3
+                },
+                'right': {
+                  'active': false,
+                  'start':  1,
+                  'end':    3
+                }
+              },
               'expected_result': '<div id="container">\n' +
                                  '  <div id="header"><?php echo $header ?></div>\n' +
                                  '  <div id="comic"><?php echo $comic ?></div>\n' +
@@ -23,7 +34,18 @@
                                  '</div>'
             },
             {
-              'input': {'left': [0, 0]},
+              'input': {
+                'left': {
+                  'active': true,
+                  'start':  0, 
+                  'end':    0
+                }, 
+                'right': {
+                  'active': false,
+                  'start':  0,
+                  'end':    3
+                }
+              },
               'expected_result': '<div id="container">\n' +
                                  '  <div id="sidebar-container">\n' +
                                  '    <div id="left-sidebar"><?php echo $left_sidebar ?></div>\n' +
@@ -36,7 +58,17 @@
                                  '</div>'
             },
             {
-              'input': {'left': [0, 1]},
+              'input': {
+                'left': {
+                  'active': true, 
+                  'start':  0, 
+                  'end':    1
+                }, 'right': {
+                  'active': false, 
+                  'start':  1, 
+                  'end':    3
+                }
+               },
               'expected_result': '<div id="container">\n' +
                                  '  <div id="sidebar-container">\n' +
                                  '    <div id="left-sidebar"><?php echo $left_sidebar ?></div>\n' +
@@ -49,7 +81,18 @@
                                  '</div>'
             },
             {
-              'input': {'right': [0, 1]},
+              'input': {
+                'right': {
+                  'active': true, 
+                  'start':  0, 
+                  'end':    1
+                 }, 
+                 'left': {
+                  'active': false, 
+                  'start':  1, 
+                  'end':    3
+                 }
+               },
               'expected_result': '<div id="container">\n' +
                                  '  <div id="sidebar-container">\n' +
                                  '    <div id="right-sidebar"><?php echo $right_sidebar ?></div>\n' +
@@ -62,7 +105,18 @@
                                  '</div>'
             },
             {
-              'input': {'left': [0, 3], 'right': [0, 1]},
+              'input': {
+                'left': {
+                  'active': true,
+                  'start': 0, 
+                  'end':   3
+                },
+                'right': {
+                  'active': true,
+                  'start':  0, 
+                  'end':    1
+                }
+              },
               'expected_result': '<div id="container">\n' +
                                  '  <div id="whole-sidebar-container">\n' +
                                  '    <div id="left-sidebar"><?php echo $left_sidebar ?></div>\n' +
@@ -88,20 +142,94 @@
           var myThis = this;
           [
             {
-              'input': {},
+              'input': {
+                'left': {
+                  'active': false, 
+                  'start':  0,
+                  'end':    0, 
+                  'width':  0
+                }, 
+                'right': {
+                  'active': false, 
+                  'start':  0, 
+                  'end':    0, 
+                  'width':  0
+                }
+              },
               'expected_result': ''
             },
             {
-              'input': {'left': {'width': '200'}},
+              'input': {
-              'expected_result': '#sidebar-container, #whole-sidebar-container { overflow: hidden }\n'
+                'body': '800', 
+                'left': {
+                  'active': true, 
+                  'start':  0, 
+                  'end':    3, 
+                  'width':  200
+                }, 
+                'right': {
+                  'active': false, 
+                  'start':  1, 
+                  'end':    3, 
+                  'width':  175
+                }
+              },
+              'expected_result': '#container { width: 800px }\n'
+                               + '#sidebar-container, #whole-sidebar-container { overflow: hidden }\n'
                                + '#left-sidebar { float: left; display: inline; width: 200px }\n'
+                               + '#header { margin-left: 200px }\n'
+                               + '#comic { margin-left: 200px }\n'
+                               + '#body { margin-left: 200px }\n'
+                               + '#footer { margin-left: 200px }\n'
                                + '.clear { clear: both }'
             },
             {
-              'input': {'left': {'width': '200'}, 'right': {'width': '100'}},
+              'input': {
-              'expected_result': '#sidebar-container, #whole-sidebar-container { overflow: hidden }\n'
+                'body': '800', 
+                'left': {
+                  'active': true, 
+                  'start':  1, 
+                  'end':    2, 
+                  'width':  200
+                }, 
+                'right': {
+                  'active': false, 
+                  'start':  1, 
+                  'end':    3, 
+                  'width':  175
+                }
+              },
+              'expected_result': '#container { width: 800px }\n'
+                               + '#sidebar-container, #whole-sidebar-container { overflow: hidden }\n'
+                               + '#left-sidebar { float: left; display: inline; width: 200px }\n'
+                               + '#comic { margin-left: 200px }\n'
+                               + '#body { margin-left: 200px }\n'
+                               + '.clear { clear: both }'
+            },
+            {
+              'input': {
+                'body': '800', 
+                'left': {
+                  'active': true, 
+                  'start':  0, 
+                  'end':    1, 
+                  'width':  200
+                }, 
+                'right': {
+                  'active': true, 
+                  'start':  0,
+                  'end':    3, 
+                  'width':  100
+                }
+              },
+              'expected_result': '#container { width: 800px }\n'
+                               + '#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'
+                               + '#header { margin-left: 200px; margin-right: 100px }\n'
+                               + '#comic { margin-left: 200px; margin-right: 100px }\n'
+                               + '#body { margin-right: 100px }\n'
+                               + '#footer { margin-right: 100px }\n'
                                + '.clear { clear: both }'
             }
           ].each(function(info) {

addons/Core/layout_manager/LayoutEditor.js

@@ -41,53 +41,60 @@ var LayoutEditor = Class.create({
       handle.insert(b);      
       handle.insert(inside);
       myThis.container.insert(handle);
+      myThis.sidebar_handles[which] = handle;
       
       var generate_handle_move = function(g) {
         return function(e) {
           Event.stop(e);
           
-          var cy = handle.viewportOffset()['top'];
+          var cy = handle.viewportOffset()['top'] + document.viewport.getScrollOffsets()['top'];
           var ch = handle.getDimensions()['height'];          
           var ny, nh;
           
           switch(g.className) {
             case 'top':
-              ny = e.clientY;
+              ny = e.clientY + document.viewport.getScrollOffsets()['top'];
               nh = ch + (cy - ny);
               break;
             case 'bottom':
-              nh = ch + (cy + ch - e.clientY);
+              ny = cy; 
+              nh = e.clientY - cy + document.viewport.getScrollOffsets()['top'];
               break;
           }
           if (nh < 5) { nh = 5; }
           handle.style.top = ny;
           handle.style.height = nh;
 
-          handle.align_bottom();
-        };
-      };
-      
-      var snap_handle = function() {
-        var ty = handle.viewportOffset()['top'];
-        var by = ty + handle.getDimensions()['height'];
-        
           var i, il;
           var h = 0;
           var closest = { 'top': null, 'bottom': null };
+          
+          var ty = ny;
+          var by = ty + nh;
+          
           for (i = 0, il = myThis.section_handles.length; i < il; ++i) {
             var distance = { 'top': null, 'bottom': null };
             distance.top = Math.abs(ty - h);
             h += myThis.section_handles[i].getDimensions()['height'];
             distance.bottom = Math.abs(by - h);
             for (field in closest) {
+              var ty = handle.viewportOffset()['top'];
+              var by = ny + handle.getDimensions()['height'];
+              
               if (closest[field] == null) { closest[field] = [distance[field], i]; }
               if (distance[field] < closest[field][0]) {
                 closest[field] = [distance[field], i]; 
               }
             }
           }
-        top.console.log(closest);
+          if (closest['bottom'][1] < closest['top'][1]) {
-        myThis.info.change('sidebars', which, [closest.top[1], closest.bottom[1]]);
+            closest['bottom'][1] = closest['top'][1]; 
+          }
+          myThis.info.info[which].start = closest['top'][1];
+          myThis.info.info[which].end = closest['bottom'][1];
+          
+          handle.align_bottom();
+        };
       };
             
       inside.observe('mousedown', function(e) { Event.stop(e); });
@@ -105,18 +112,19 @@ var LayoutEditor = Class.create({
       Event.observe(document.body, 'mouseup', function() {
         Event.stopObserving(document.body, 'mousemove', t_handle);
         Event.stopObserving(document.body, 'mousemove', b_handle);
-        snap_handle();
+      });
     });
     
-      myThis.sidebar_handles[which] = handle;
+    Event.observe(document.body, 'mouseup', function() {
+      myThis.draw_sidebars();
     });
   },
   'register_info': function(info) {
     this.info = info;
     var myThis = this;
-    this.info.onchange = function() {
+    this.info.onChange = function() {
-      myThis.draw_sidebars();  
+      myThis.draw();
-    }
+    };
   },
   'draw': function() {
     this.draw_sidebars();  
@@ -124,62 +132,85 @@ var LayoutEditor = Class.create({
   'draw_sidebars': function() {
     var myThis = this;
     $w('left right').each(function(field) {
-      if (myThis.info.sidebars[field]) {
+      if (myThis.info.info[field].active) {
-        var fi = myThis.info.sidebars[field];
+        myThis.sidebar_handles[field].show();
-        var t = myThis.section_handles[fi[0]].viewportOffset()['top'];
+        var fi = myThis.info.info[field];
+        var t = myThis.section_handles[fi.start].viewportOffset()['top'] + document.viewport.getScrollOffsets()['top'];
         var h = 0;
         var i;
-        for (i = fi[0]; i <= fi[1]; ++i) {
+        for (i = fi.start; i <= fi.end; ++i) {
           h += myThis.section_handles[i].getDimensions()['height'];
         }
-        var w = Math.floor((myThis.info.widths[field] / myThis.info.widths.body) * myThis.width);
+        var w = Math.floor((fi.width / myThis.info.info.body) * myThis.width);
         var l;
         switch (field) {
           case 'left':
-            l = myThis.container.viewportOffset()['left'];
+            l = myThis.container.viewportOffset()['left']; break;
-            break;
           case 'right':
-            l = myThis.container.viewportOffset()['left'] + myThis.width - w;
+            l = myThis.container.viewportOffset()['left'] + myThis.width - w; break;
-            break;
         }
-        var field_map = {
+        var field_map = { 'top': t, 'left': l, 'width': w, 'height': h };
-          'top': t,
-          'left': l,
-          'width': w,
-          'height': h
-        };
         for (param in field_map) {
           myThis.sidebar_handles[field].style[param] = field_map[param];
         }
         myThis.sidebar_handles[field].align_bottom();
+      } else {
+        myThis.sidebar_handles[field].hide();
       }
     });
+    myThis.info.do_sidebar_drag();
   }
 });
 
+
 var LayoutInfo = Class.create({
-  'sidebars': {
+  'info': { 
-    'left': [1, 3], 'right': [2, 3]
+    'body': 800,
+    'left': {
+      'active': true, 
+      'start':  0,
+      'end':    3,
+      'width':  200
     }, 
-  'widths': {
+    'right': {
-    'body': 800, 'left': 200, 'right': 175
+      'active': true, 
+      'start':  0,
+      'end':    3,
+      'width':  175
+    }
   },
-  'change': function(group, detail, value) {
+  'register_form': function(target) {
-    if (this[group]) {
+    var myThis = this;
-      if (this[group][detail]) {
+    $w('left right').each(function(which) {
-        this[group][detail] = value;
+      var i;
-        this.onchange(); 
+      var get_v = function(v) { return v; }
+      for (i in myThis.info[which]) {
+        var my_which = get_v(which);
+        var f = target.select('#' + which + "-" + i).pop();        
+        if (f) {
+          switch (i) {
+            case 'active':
+              f.checked = myThis.info[my_which]['active'];
+              f.observe('click', function(e) {
+                myThis.info[my_which]['active'] = e.currentTarget.checked;
+                myThis.onChange();
+              });
+              break;
+            case 'width':
+              f.value = myThis.info[my_which]['width'];
+              f.observe('keyup', function(e) {
+                myThis.info[my_which]['width'] = e.currentTarget.value.replace(/[^0-9]/, '');
+                myThis.onChange();
+              });
+              break; 
           }  
         }
       }
+    });
+  },
+  'do_sidebar_drag': function() {
+    this.onSidebarDrag();
+  },
+  'onChange': function() {}
 });
 
-Event.observe(window, 'load', function() {
-  if ($('layout-editor-container')) {
-    var l = new LayoutEditor($('layout-editor-container')); 
-    
-    var info = new LayoutInfo();
-    l.register_info(info);
-    l.draw();
-  }
-});

addons/Core/layout_manager/index.html

@@ -3,10 +3,29 @@
     <title>Layout Editor</title>
     <script type="text/javascript" src="prototype.js"></script>
     <script type="text/javascript" src="LayoutEditor.js"></script>
-    <style type="text/css">
+    <script type="text/javascript" src="../layout_constructors/FloatedDivConstructor.js"></script>
-      #layout-editor-container > div {
+    <script type="text/javascript">
-      }
+      var f = new FloatedDivConstructor();
             
+      Event.observe(window, 'load', function() {
+        var info = new LayoutInfo();
+        info.onSidebarDrag = function() {
+          $('html-container').value = f.generate_html(info.info);
+          $('css-container').value = f.generate_css(info.info);
+        };
+
+        if ($('layout-editor-container')) {
+          var l = new LayoutEditor($('layout-editor-container')); 
+          
+          l.register_info(info);
+          info.register_form($('layout-editor-form'));      
+          
+          l.draw();
+        }
+      });
+      
+    </script>
+    <style type="text/css">    
       #layout-editor-container > div > div {
         border: solid red 1px;
         background-color: #aaa;
@@ -19,23 +38,52 @@
         height: 5px;
         background: #999;
         position: absolute;
-        border: none
+        border: none;
+        cursor: ns-resize
       }
       
-      #layout-editor-container div.top {
+      #left {
-        cursor: n-resize 
+        float: left;
+        display: inline;
+        width: 320px; 
       }
       
-      #layout-editor-container div.bottom {
+      #right {
-        cursor: s-resize 
+        margin-left: 320px;
       }
     </style>
   </head>
   <body>
+    <div style="overflow: hidden">
+      <div id="left">
+        <div style="margin-bottom: 10px">
           <div id="layout-editor-container" style="width: 300px"></div>
+        </div>
+        <div id="layout-editor-form">
+          <fieldset>
+            <label><input type="checkbox" id="left-active" value="yes" /> Use Left Sidebar</label>
+            <label>Width: <input type="text" id="left-width" value="200" /></label>
+          </fieldset>
+          <fieldset>
+            <label><input type="checkbox" id="right-active" value="yes" /> Use Right Sidebar</label>
+            <label>Width: <input type="text" id="right-width" value="200" /></label>
+          </fieldset>
+          <fieldset>
+            <label>Body Width: <input type="text" id="body-width" value="200" /></label>
+          </fieldset>
+        </div>
+      </div>
+      <div id="right">
         <form id="layout-editor-controls">
-      <h3>Sidebars</h3>
+          <h3>Code</h3>
+          <h4>HTML</h4>
+          <textarea id="html-container" rows="15" cols="80"></textarea>
           
+          <h4>CSS</h4>
+          <textarea id="css-container" rows="15" cols="80"></textarea>
         </form>
+      </div>
+      <br style="clear: both" />
+    </div>
   </body>
 </html>