github-migration/comicpress-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

nearly have layout editor working

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
addons/Core/layout_constructors/FloatedDivConstructor.js
View File

@ -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 (layout.right) {
if (has_layout.left) {
if (has_layout.right) {
range = [];
var all_same = true;
for (i = 0; i < 2; ++i) {
if (layout.left[i] != layout.right[i]) { all_same = false; break; }
for (i = 0; i <= 1; ++i) {
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[1] = Math.max(layout.left[1], layout.right[1]);
range[0] = Math.min(has_layout.left[0], has_layout.right[0]);
range[1] = Math.max(has_layout.left[1], has_layout.right[1]);
} else {
switch (has_whole_sidebar) {
case 'left': range = layout.right; break;
case 'right': range = layout.left; break;
case 'left': range = has_layout.right; break;
case 'right': range = has_layout.left; break;
}
}
} else {
range = layout.left;
range = has_layout.left;
}
} else {
if (layout.right) {
range = layout.right;
if (has_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 (layout[field][0] == i) {
if (has_layout[field]) {
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");
}
});

148
addons/Core/layout_constructors/LayoutConstructorsTest.html
View File

@ -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'}},
'expected_result': '#sidebar-container, #whole-sidebar-container { overflow: hidden }\n'
'input': {
'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'}},
'expected_result': '#sidebar-container, #whole-sidebar-container { overflow: hidden }\n'
'input': {
'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) {

133
addons/Core/layout_manager/LayoutEditor.js
View File

@ -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);
myThis.info.change('sidebars', which, [closest.top[1], closest.bottom[1]]);
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();
};
};
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() {
myThis.draw_sidebars();
}
this.info.onChange = function() {
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]) {
var fi = myThis.info.sidebars[field];
var t = myThis.section_handles[fi[0]].viewportOffset()['top'];
if (myThis.info.info[field].active) {
myThis.sidebar_handles[field].show();
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'];
break;
l = myThis.container.viewportOffset()['left']; break;
case 'right':
l = myThis.container.viewportOffset()['left'] + myThis.width - w;
break;
l = myThis.container.viewportOffset()['left'] + myThis.width - w; break;
}
var field_map = {
'top': t,
'left': l,
'width': w,
'height': h
};
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];
}
myThis.sidebar_handles[field].align_bottom();
} else {
myThis.sidebar_handles[field].hide();
}
});
myThis.info.do_sidebar_drag();
}
});
var LayoutInfo = Class.create({
'sidebars': {
'left': [1, 3], 'right': [2, 3]
'info': {
'body': 800,
'left': {
'active': true,
'start': 0,
'end': 3,
'width': 200
},
'widths': {
'body': 800, 'left': 200, 'right': 175
'right': {
'active': true,
'start': 0,
'end': 3,
'width': 175
}
},
'change': function(group, detail, value) {
if (this[group]) {
if (this[group][detail]) {
this[group][detail] = value;
this.onchange();
'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;
}
}
}
});
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();
}
},
'do_sidebar_drag': function() {
this.onSidebarDrag();
},
'onChange': function() {}
});

66
addons/Core/layout_manager/index.html
View File

@ -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">
#layout-editor-container > div {
}
<script type="text/javascript" src="../layout_constructors/FloatedDivConstructor.js"></script>
<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 {
cursor: n-resize
#left {
float: left;
display: inline;
width: 320px;
}
#layout-editor-container div.bottom {
cursor: s-resize
#right {
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>