nearly have layout editor working

This commit is contained in:
John Bintz 2009-08-30 11:00:58 -04:00
parent 8a204399b3
commit 37d31ab83a
4 changed files with 356 additions and 117 deletions

View File

@ -1,30 +1,36 @@
var FloatedDivConstructor = Class.create({ var FloatedDivConstructor = Class.create({
'areas': ["header", "comic", "body", "footer"],
'generate_html': function(layout) { 'generate_html': function(layout) {
var output = []; var output = [];
output.push('<div id="container">'); output.push('<div id="container">');
var areas = $w("header comic body footer");
var i, il; var i, il;
var indent = 1; var indent = 1;
var gi = function() { return " ".times(indent); } var gi = function() { return " ".times(indent); }
var has_whole_sidebar = null; 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; var range = null;
if (layout.left) { if (has_layout.left) {
if (layout.right) { if (has_layout.right) {
range = []; range = [];
var all_same = true; 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) { if (!all_same) {
$w('left right').each(function(field) { $w('left right').each(function(field) {
if (!has_whole_sidebar) { 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; has_whole_sidebar = field;
} }
} }
@ -32,24 +38,24 @@ var FloatedDivConstructor = Class.create({
} }
if (!has_whole_sidebar) { 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 { } else {
switch (has_whole_sidebar) { 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 { } else {
range = layout.left; range = has_layout.left;
} }
} else { } 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) { if ((i == 0) && has_whole_sidebar) {
output.push(gi() + '<div id="whole-sidebar-container">'); output.push(gi() + '<div id="whole-sidebar-container">');
indent++; indent++;
@ -62,8 +68,8 @@ var FloatedDivConstructor = Class.create({
} }
$w("left right").each(function(field) { $w("left right").each(function(field) {
if (field != has_whole_sidebar) { 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>'); 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) {
if (range[1] == i) { if (range[1] == i) {
@ -91,22 +97,48 @@ var FloatedDivConstructor = Class.create({
return output.join("\n"); return output.join("\n");
}, },
'generate_css': function(info) { 'generate_css': function(layout) {
var output = []; var output = [];
var include_container = false; var include_container = false;
var area_margins = {};
var i;
var myThis = this;
$w('left right').each(function(field) { $w('left right').each(function(field) {
if (info[field]) { if (layout[field].active) {
include_container = true; 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) { if (include_container) {
output.unshift('#sidebar-container, #whole-sidebar-container { overflow: hidden }'); output.unshift('#sidebar-container, #whole-sidebar-container { overflow: hidden }');
output.push('.clear { clear: both }'); output.push('.clear { clear: both }');
} }
if (layout.body) {
output.unshift('#container { width: ' + layout.body + 'px }');
}
return output.join("\n"); return output.join("\n");
} }
}); });

View File

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

View File

@ -41,55 +41,62 @@ var LayoutEditor = Class.create({
handle.insert(b); handle.insert(b);
handle.insert(inside); handle.insert(inside);
myThis.container.insert(handle); myThis.container.insert(handle);
myThis.sidebar_handles[which] = handle;
var generate_handle_move = function(g) { var generate_handle_move = function(g) {
return function(e) { return function(e) {
Event.stop(e); Event.stop(e);
var cy = handle.viewportOffset()['top']; var cy = handle.viewportOffset()['top'] + document.viewport.getScrollOffsets()['top'];
var ch = handle.getDimensions()['height']; var ch = handle.getDimensions()['height'];
var ny, nh; var ny, nh;
switch(g.className) { switch(g.className) {
case 'top': case 'top':
ny = e.clientY; ny = e.clientY + document.viewport.getScrollOffsets()['top'];
nh = ch + (cy - ny); nh = ch + (cy - ny);
break; break;
case 'bottom': case 'bottom':
nh = ch + (cy + ch - e.clientY); ny = cy;
nh = e.clientY - cy + document.viewport.getScrollOffsets()['top'];
break; break;
} }
if (nh < 5) { nh = 5; } if (nh < 5) { nh = 5; }
handle.style.top = ny; handle.style.top = ny;
handle.style.height = nh; handle.style.height = nh;
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];
}
}
}
if (closest['bottom'][1] < closest['top'][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(); 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 };
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) {
if (closest[field] == null) { closest[field] = [distance[field], i]; }
if (distance[field] < closest[field][0]) {
closest[field] = [distance[field], i];
}
}
}
top.console.log(closest);
myThis.info.change('sidebars', which, [closest.top[1], closest.bottom[1]]);
};
inside.observe('mousedown', function(e) { Event.stop(e); }); inside.observe('mousedown', function(e) { Event.stop(e); });
handle.observe('mousedown', function(e) { Event.stop(e); }); handle.observe('mousedown', function(e) { Event.stop(e); });
@ -105,18 +112,19 @@ var LayoutEditor = Class.create({
Event.observe(document.body, 'mouseup', function() { Event.observe(document.body, 'mouseup', function() {
Event.stopObserving(document.body, 'mousemove', t_handle); Event.stopObserving(document.body, 'mousemove', t_handle);
Event.stopObserving(document.body, 'mousemove', b_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) { 'register_info': function(info) {
this.info = info; this.info = info;
var myThis = this; var myThis = this;
this.info.onchange = function() { this.info.onChange = function() {
myThis.draw_sidebars(); myThis.draw();
} };
}, },
'draw': function() { 'draw': function() {
this.draw_sidebars(); this.draw_sidebars();
@ -124,62 +132,85 @@ var LayoutEditor = Class.create({
'draw_sidebars': function() { 'draw_sidebars': function() {
var myThis = this; var myThis = this;
$w('left right').each(function(field) { $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 h = 0;
var i; 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']; 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; var l;
switch (field) { switch (field) {
case 'left': case 'left':
l = myThis.container.viewportOffset()['left']; l = myThis.container.viewportOffset()['left']; break;
break;
case 'right': 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) { for (param in field_map) {
myThis.sidebar_handles[field].style[param] = field_map[param]; myThis.sidebar_handles[field].style[param] = field_map[param];
} }
myThis.sidebar_handles[field].align_bottom(); myThis.sidebar_handles[field].align_bottom();
} else {
myThis.sidebar_handles[field].hide();
} }
}); });
myThis.info.do_sidebar_drag();
} }
}); });
var LayoutInfo = Class.create({ var LayoutInfo = Class.create({
'sidebars': { 'info': {
'left': [1, 3], 'right': [2, 3] 'body': 800,
}, 'left': {
'widths': { 'active': true,
'body': 800, 'left': 200, 'right': 175 'start': 0,
}, 'end': 3,
'change': function(group, detail, value) { 'width': 200
if (this[group]) { },
if (this[group][detail]) { 'right': {
this[group][detail] = value; 'active': true,
this.onchange(); 'start': 0,
} 'end': 3,
'width': 175
} }
} },
'register_form': function(target) {
var myThis = this;
$w('left right').each(function(which) {
var i;
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();
}
});

View File

@ -3,10 +3,29 @@
<title>Layout Editor</title> <title>Layout Editor</title>
<script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="LayoutEditor.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 { #layout-editor-container > div > div {
border: solid red 1px; border: solid red 1px;
background-color: #aaa; background-color: #aaa;
@ -19,23 +38,52 @@
height: 5px; height: 5px;
background: #999; background: #999;
position: absolute; 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> </style>
</head> </head>
<body> <body>
<div id="layout-editor-container" style="width: 300px"></div> <div style="overflow: hidden">
<form id="layout-editor-controls"> <div id="left">
<h3>Sidebars</h3> <div style="margin-bottom: 10px">
<div id="layout-editor-container" style="width: 300px"></div>
</form> </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>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> </body>
</html> </html>