working on javascript layout management
This commit is contained in:
John Bintz
parent
3543e14aea
commit
127a8d84e4
|
|
@ -0,0 +1,73 @@
|
|||
var FloatedDivConstructor = Class.create({
|
||||
'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 range = null;
|
||||
if (layout.left) {
|
||||
if (layout.right) {
|
||||
range[0] = Math.min(layout.left[0], layout.right[0]);
|
||||
range[1] = Math.max(layout.left[1], layout.right[1]);
|
||||
} else {
|
||||
range = layout.left;
|
||||
}
|
||||
} else {
|
||||
if (layout.right) {
|
||||
range = layout.right;
|
||||
}
|
||||
}
|
||||
|
||||
for (i = 0, il = areas.length; i < il; ++i) {
|
||||
if (range) {
|
||||
if (range[0] == i) {
|
||||
output.push(" ".times(indent) + '<div id="sidebar-container">');
|
||||
indent++;
|
||||
}
|
||||
$w("left right").each(function(field) {
|
||||
if (layout[field]) {
|
||||
if (layout[field][0] == i) {
|
||||
output.push(" ".times(indent) + '<div id="' + field + '-sidebar"><?php echo $' + field + '_sidebar ?></div>');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
output.push(" ".times(indent) + '<div id="' + areas[i] + '"><?php echo $' + areas[i] + ' ?></div>');
|
||||
|
||||
if (range) {
|
||||
if (range[1] == i) {
|
||||
output.push(" ".times(indent) + '<br class="clear" />');
|
||||
indent--;
|
||||
output.push(" ".times(indent) + '</div>');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
output.push('</div>');
|
||||
|
||||
return output.join("\n");
|
||||
},
|
||||
'generate_css': function(info) {
|
||||
var output = [];
|
||||
var include_container = false;
|
||||
|
||||
$w('left right').each(function(field) {
|
||||
if (info[field]) {
|
||||
include_container = true;
|
||||
output.push('#' + field + '-sidebar { float: ' + field + '; display: inline; width: ' + info[field].width + 'px }');
|
||||
}
|
||||
});
|
||||
|
||||
if (include_container) {
|
||||
output.unshift('#sidebar-container { overflow: hidden }');
|
||||
output.push('.clear { clear: both }');
|
||||
}
|
||||
|
||||
return output.join("\n");
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>LayoutConstructorsTest</title>
|
||||
<script type="text/javascript" src="testcase.js"></script>
|
||||
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"></script>
|
||||
<script type="text/javascript" src="FloatedDivConstructor.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
var FloatedDivConstructorTest = TestCase.create({
|
||||
name: "Floated Div Constructor Test",
|
||||
|
||||
testGenerateHTML: function() {
|
||||
var myThis = this;
|
||||
[
|
||||
{
|
||||
'input': {},
|
||||
'expected_result': '<div id="container">\n <div id="header"><?php echo $header ?></div>\n <div id="comic"><?php echo $comic ?></div>\n <div id="body"><?php echo $body ?></div>\n <div id="footer"><?php echo $footer ?></div>\n</div>'
|
||||
},
|
||||
{
|
||||
'input': {'left': [0, 0]},
|
||||
'expected_result': '<div id="container">\n <div id="sidebar-container">\n <div id="left-sidebar"><?php echo $left_sidebar ?></div>\n <div id="header"><?php echo $header ?></div>\n <br class="clear" />\n </div>\n <div id="comic"><?php echo $comic ?></div>\n <div id="body"><?php echo $body ?></div>\n <div id="footer"><?php echo $footer ?></div>\n</div>'
|
||||
},
|
||||
{
|
||||
'input': {'left': [0, 1]},
|
||||
'expected_result': '<div id="container">\n <div id="sidebar-container">\n <div id="left-sidebar"><?php echo $left_sidebar ?></div>\n <div id="header"><?php echo $header ?></div>\n <div id="comic"><?php echo $comic ?></div>\n <br class="clear" />\n </div>\n <div id="body"><?php echo $body ?></div>\n <div id="footer"><?php echo $footer ?></div>\n</div>'
|
||||
},
|
||||
{
|
||||
'input': {'right': [0, 1]},
|
||||
'expected_result': '<div id="container">\n <div id="sidebar-container">\n <div id="right-sidebar"><?php echo $right_sidebar ?></div>\n <div id="header"><?php echo $header ?></div>\n <div id="comic"><?php echo $comic ?></div>\n <br class="clear" />\n </div>\n <div id="body"><?php echo $body ?></div>\n <div id="footer"><?php echo $footer ?></div>\n</div>'
|
||||
}
|
||||
].each(function(info) {
|
||||
var f = new FloatedDivConstructor();
|
||||
myThis.assertEqual(info.expected_result, f.generate_html(info.input));
|
||||
});
|
||||
},
|
||||
|
||||
testCreateCSS: function() {
|
||||
var myThis = this;
|
||||
[
|
||||
{
|
||||
'input': {},
|
||||
'expected_result': ''
|
||||
},
|
||||
{
|
||||
'input': {'left': {'width': '200'}},
|
||||
'expected_result': '#sidebar-container { overflow: hidden }\n#left-sidebar { float: left; display: inline; width: 200px }\n.clear { clear: both }'
|
||||
},
|
||||
{
|
||||
'input': {'left': {'width': '200'}, 'right': {'width': '100'}},
|
||||
'expected_result': '#sidebar-container { overflow: hidden }\n#left-sidebar { float: left; display: inline; width: 200px }\n#right-sidebar { float: right; display: inline; width: 100px }\n.clear { clear: both }'
|
||||
}
|
||||
].each(function(info) {
|
||||
var f = new FloatedDivConstructor();
|
||||
myThis.assertEqual(info.expected_result, f.generate_css(info.input));
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
FloatedDivConstructorTest.run();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
var TableLayoutConstructor = Class.create({
|
||||
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,8 @@
|
|||
<div class="wrap">
|
||||
<div id="layout-designer">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
|
||||
</script>
|
||||
Loading…
Reference in New Issue