start work on layout manager

2009-08-28 13:00:47 -04:00 · 2009-08-28 13:00:47 -04:00 · 2c09f79528
commit 2c09f79528
parent 3558c228f7
3 changed files with 4438 additions and 0 deletions
--- a/addons/Core/layout_manager/LayoutEditor.js
+++ b/addons/Core/layout_manager/LayoutEditor.js
@ -0,0 +1,98 @@
+var LayoutEditor = Class.create({
+  'ratio': 1.25,
+  'sections': [
+    [ 'header', .1 ],
+    [ 'comic',  .3 ],
+    [ 'blog',   .5 ],
+    [ 'footer', .1 ]
+  ],
+  'initialize': function(container) {
+    this.container = container; 
+    
+    this.width = this.container.getDimensions()['width'];
+    this.height = Math.floor(this.container.getDimensions()['width'] * this.ratio);
+    
+    var i, il;   
+    this.section_handles = [];
+    for (i = 0, il = this.sections.length; i < il; ++i) {
+      var sh = Math.floor(this.height * this.sections[i][1]);
+      var section = new Element("div", { 'style': "height: " + sh + "px" });
+      this.container.insert(section);
+      this.section_handles.push(section);
+    }
+    
+    this.sidebar_handles = {};
+    var myThis = this;
+    $w('left right').each(function(which) {
+      myThis.sidebar_handles[which] = new Element("div", { 'style': 'position: absolute; z-index: 1' });
+      myThis.container.insert(myThis.sidebar_handles[which]);
+    });
+  },
+  'register_info': function(info) {
+    this.info = info;
+    this.info.onchange = this.draw;
+  },
+  'draw': function() {
+    this.draw_sidebars();  
+  },
+  'draw_sidebars': function() {
+    var myThis = this;
+    $w('left right').each(function(field) {
+      if (myThis.info.sidebars[field]) {
+        var fi = myThis.info.sidebars[field];
+        var t = myThis.section_handles[fi[0]].viewportOffset()['top'];
+        var h = 0;
+        var i;
+        for (i = fi[0]; i <= fi[1]; ++i) {
+          h += myThis.section_handles[i].getDimensions()['height'];
+        }
+        var w = Math.floor((myThis.info.widths[field] / myThis.info.widths.body) * myThis.width);
+        var l;
+        switch (field) {
+          case 'left':
+            l = myThis.container.viewportOffset()['left'];
+            break;
+          case 'right':
+            l = myThis.container.viewportOffset()['left'] + myThis.width - w;
+            break;
+        }
+        var field_map = {
+          'top': t,
+          'left': l,
+          'width': w,
+          'height': h
+        };
+        for (param in field_map) {
+          myThis.sidebar_handles[field].style[param] = field_map[param];
+        }
+      }
+    });
+  }
+});
+
+var LayoutInfo = Class.create({
+  'sidebars': {
+    'left': [1, 3], 'right': [2, 3]
+  },
+  'widths': {
+    'body': 800, 'left': 200, 'right': 175
+  },  
+  'change': function(group, detail, value) {
+    if (this[group]) {
+      if (this[group][detail]) {
+        this[group][detail] = value;
+        this.onchange(); 
+      } 
+    }
+  }
+});
+
+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();
+  }
+});
--- a/addons/Core/layout_manager/index.html
+++ b/addons/Core/layout_manager/index.html
@ -0,0 +1,20 @@
+<html>
+  <head>
+    <title>Layout Editor</title>
+    <script type="text/javascript" src="prototype.js"></script>
+    <script type="text/javascript" src="LayoutEditor.js"></script>
+    <style type="text/css">
+      #layout-editor-container div {
+        border: solid red 1px ;
+        background-color: #aaa
+      }
+    </style>
+  </head>
+  <body>
+    <div id="layout-editor-container" style="width: 300px"></div>
+    <form id="layout-editor-controls">
+      <fieldset>
+      </fieldset>
+    </form>
+  </body>
+</html>
--- a/addons/Core/layout_manager/prototype.js
+++ b/addons/Core/layout_manager/prototype.js