comicpress-core/classes/layout_manager/index.html

90 lines
2.7 KiB
HTML

<html>
<head>
<title>Layout Editor</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="LayoutEditor.js"></script>
<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;
width: 100%;
height: 100%
}
#layout-editor-container div.top,
#layout-editor-container div.bottom {
height: 5px;
background: #999;
position: absolute;
border: none;
cursor: ns-resize
}
#left {
float: left;
display: inline;
width: 320px;
}
#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" name="left-active" value="yes" /> Use Left Sidebar</label>
<label>Width: <input type="text" name="left-width" value="200" /></label>
</fieldset>
<fieldset>
<label><input type="checkbox" name="right-active" value="yes" /> Use Right Sidebar</label>
<label>Width: <input type="text" name="right-width" value="200" /></label>
</fieldset>
<fieldset>
<label>Body Width: <input type="text" name="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>
</html>