2009-08-28 17:00:47 +00:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Layout Editor</title>
|
|
|
|
|
<script type="text/javascript" src="prototype.js"></script>
|
|
|
|
|
<script type="text/javascript" src="LayoutEditor.js"></script>
|
2009-08-30 15:00:58 +00:00
|
|
|
<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();
|
|
|
|
|
}
|
|
|
|
|
});
|
2009-08-29 15:13:18 +00:00
|
|
|
|
2009-08-30 15:00:58 +00:00
|
|
|
</script>
|
|
|
|
|
<style type="text/css">
|
2009-08-29 15:13:18 +00:00
|
|
|
#layout-editor-container > div > div {
|
|
|
|
|
border: solid red 1px;
|
|
|
|
|
background-color: #aaa;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%
|
2009-08-28 17:00:47 +00:00
|
|
|
}
|
2009-08-29 18:26:55 +00:00
|
|
|
|
|
|
|
|
#layout-editor-container div.top,
|
|
|
|
|
#layout-editor-container div.bottom {
|
|
|
|
|
height: 5px;
|
|
|
|
|
background: #999;
|
|
|
|
|
position: absolute;
|
2009-08-30 15:00:58 +00:00
|
|
|
border: none;
|
|
|
|
|
cursor: ns-resize
|
2009-08-29 18:26:55 +00:00
|
|
|
}
|
|
|
|
|
|
2009-08-30 15:00:58 +00:00
|
|
|
#left {
|
|
|
|
|
float: left;
|
|
|
|
|
display: inline;
|
|
|
|
|
width: 320px;
|
2009-08-29 18:26:55 +00:00
|
|
|
}
|
2009-08-30 15:00:58 +00:00
|
|
|
|
|
|
|
|
#right {
|
|
|
|
|
margin-left: 320px;
|
2009-08-29 18:26:55 +00:00
|
|
|
}
|
2009-08-28 17:00:47 +00:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2009-08-30 15:00:58 +00:00
|
|
|
<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>
|
2009-08-30 17:27:31 +00:00
|
|
|
<label><input type="checkbox" name="left-active" value="yes" /> Use Left Sidebar</label>
|
|
|
|
|
<label>Width: <input type="text" name="left-width" value="200" /></label>
|
2009-08-30 15:00:58 +00:00
|
|
|
</fieldset>
|
|
|
|
|
<fieldset>
|
2009-08-30 17:27:31 +00:00
|
|
|
<label><input type="checkbox" name="right-active" value="yes" /> Use Right Sidebar</label>
|
|
|
|
|
<label>Width: <input type="text" name="right-width" value="200" /></label>
|
2009-08-30 15:00:58 +00:00
|
|
|
</fieldset>
|
|
|
|
|
<fieldset>
|
2009-08-30 17:27:31 +00:00
|
|
|
<label>Body Width: <input type="text" name="body-width" value="200" /></label>
|
2009-08-30 15:00:58 +00:00
|
|
|
</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>
|
2009-08-28 17:00:47 +00:00
|
|
|
</body>
|
2009-08-29 15:13:18 +00:00
|
|
|
</html>
|
