start work on layout manager
This commit is contained in:
parent
3558c228f7
commit
2c09f79528
|
@ -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();
|
||||||
|
}
|
||||||
|
});
|
|
@ -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>
|
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue