230 lines
7.3 KiB
JavaScript
230 lines
7.3 KiB
JavaScript
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", "class": this.sections[i][0] });
|
|
var inside = new Element("div");
|
|
section.insert(inside);
|
|
this.container.insert(section);
|
|
this.section_handles.push(section);
|
|
}
|
|
|
|
this.sidebar_handles = {};
|
|
var myThis = this;
|
|
$w('left right').each(function(which) {
|
|
var handle = new Element("div", { 'style': 'position: absolute; z-index: 1' });
|
|
var inside = new Element("div");
|
|
|
|
var t = new Element("div", { 'class': 'top' });
|
|
var b = new Element("div", { 'class': 'bottom' });
|
|
|
|
handle.align_bottom = function() {
|
|
var h = handle.getDimensions()['height'];
|
|
b.style.top = h - 5;
|
|
};
|
|
|
|
handle.insert(t);
|
|
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'] + document.viewport.getScrollOffsets()['top'];
|
|
var ch = handle.getDimensions()['height'];
|
|
var ny, nh;
|
|
|
|
switch(g.className) {
|
|
case 'top':
|
|
ny = e.clientY + document.viewport.getScrollOffsets()['top'];
|
|
nh = ch + (cy - ny);
|
|
break;
|
|
case 'bottom':
|
|
ny = cy;
|
|
nh = e.clientY - cy + document.viewport.getScrollOffsets()['top'];
|
|
break;
|
|
}
|
|
if (nh < 5) { nh = 5; }
|
|
handle.style.top = ny;
|
|
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();
|
|
};
|
|
};
|
|
|
|
inside.observe('mousedown', function(e) { Event.stop(e); });
|
|
handle.observe('mousedown', function(e) { Event.stop(e); });
|
|
|
|
var t_handle = generate_handle_move(t);
|
|
var b_handle = generate_handle_move(b);
|
|
|
|
t.observe('mousedown', function(e) {
|
|
Event.observe(document.body, 'mousemove', t_handle);
|
|
});
|
|
b.observe('mousedown', function(e) {
|
|
Event.observe(document.body, 'mousemove', b_handle);
|
|
});
|
|
Event.observe(document.body, 'mouseup', function() {
|
|
Event.stopObserving(document.body, 'mousemove', t_handle);
|
|
Event.stopObserving(document.body, 'mousemove', b_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();
|
|
};
|
|
},
|
|
'draw': function() {
|
|
this.draw_sidebars();
|
|
},
|
|
'draw_sidebars': function() {
|
|
var myThis = this;
|
|
$w('left right').each(function(field) {
|
|
if (myThis.info.info[field].active) {
|
|
if (myThis.info.info.body > myThis.info.info[field].width) {
|
|
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.start; i <= fi.end; ++i) {
|
|
h += myThis.section_handles[i].getDimensions()['height'];
|
|
}
|
|
var w = Math.floor((fi.width / myThis.info.info.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];
|
|
}
|
|
myThis.sidebar_handles[field].align_bottom();
|
|
} else {
|
|
myThis.sidebar_handles[field].hide();
|
|
}
|
|
} else {
|
|
myThis.sidebar_handles[field].hide();
|
|
}
|
|
});
|
|
myThis.info.do_sidebar_drag();
|
|
}
|
|
});
|
|
|
|
|
|
var LayoutInfo = Class.create({
|
|
'info': {
|
|
'body': 800,
|
|
'left': {
|
|
'active': true,
|
|
'start': 0,
|
|
'end': 3,
|
|
'width': 200
|
|
},
|
|
'right': {
|
|
'active': true,
|
|
'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('input[name=' + 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;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
var body_width = target.select('input[name=body-width]').pop();
|
|
if (body_width) {
|
|
body_width.value = myThis.info.body;
|
|
body_width.observe('keyup', function(e) {
|
|
myThis.info.body = e.currentTarget.value.replace(/[^0-9]/, '');
|
|
myThis.onChange();
|
|
});
|
|
}
|
|
},
|
|
'do_sidebar_drag': function() {
|
|
this.onSidebarDrag();
|
|
},
|
|
'onChange': function() {}
|
|
});
|
|
|