floated div layout generator working
This commit is contained in:
John Bintz
parent
ef56ea9248
commit
3558c228f7
|
|
@ -3,16 +3,43 @@ var FloatedDivConstructor = Class.create({
|
|||
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 range = null;
|
||||
if (layout.left) {
|
||||
if (layout.right) {
|
||||
range = [];
|
||||
|
||||
var all_same = true;
|
||||
for (i = 0; i < 2; ++i) {
|
||||
if (layout.left[i] != 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)) {
|
||||
has_whole_sidebar = field;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (!has_whole_sidebar) {
|
||||
range[0] = Math.min(layout.left[0], layout.right[0]);
|
||||
range[1] = Math.max(layout.left[1], layout.right[1]);
|
||||
} else {
|
||||
switch (has_whole_sidebar) {
|
||||
case 'left': range = layout.right; break;
|
||||
case 'right': range = layout.left; break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
range = layout.left;
|
||||
}
|
||||
|
|
@ -23,29 +50,41 @@ var FloatedDivConstructor = Class.create({
|
|||
}
|
||||
|
||||
for (i = 0, il = areas.length; i < il; ++i) {
|
||||
if ((i == 0) && has_whole_sidebar) {
|
||||
output.push(gi() + '<div id="whole-sidebar-container">');
|
||||
indent++;
|
||||
output.push(gi() + '<div id="' + has_whole_sidebar + '-sidebar"><?php echo $' + has_whole_sidebar + '_sidebar ?></div>');
|
||||
}
|
||||
if (range) {
|
||||
if (range[0] == i) {
|
||||
output.push(" ".times(indent) + '<div id="sidebar-container">');
|
||||
output.push(gi() + '<div id="sidebar-container">');
|
||||
indent++;
|
||||
}
|
||||
$w("left right").each(function(field) {
|
||||
if (field != has_whole_sidebar) {
|
||||
if (layout[field]) {
|
||||
if (layout[field][0] == i) {
|
||||
output.push(" ".times(indent) + '<div id="' + field + '-sidebar"><?php echo $' + field + '_sidebar ?></div>');
|
||||
output.push(gi() + '<div id="' + field + '-sidebar"><?php echo $' + field + '_sidebar ?></div>');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
output.push(" ".times(indent) + '<div id="' + areas[i] + '"><?php echo $' + areas[i] + ' ?></div>');
|
||||
output.push(gi() + '<div id="' + areas[i] + '"><?php echo $' + areas[i] + ' ?></div>');
|
||||
|
||||
if (range) {
|
||||
if (range[1] == i) {
|
||||
output.push(" ".times(indent) + '<br class="clear" />');
|
||||
output.push(gi() + '<br class="clear" />');
|
||||
indent--;
|
||||
output.push(" ".times(indent) + '</div>');
|
||||
output.push(gi() + '</div>');
|
||||
}
|
||||
}
|
||||
if ((i == 3) && has_whole_sidebar) {
|
||||
output.push(gi() + '<br class="clear" />');
|
||||
indent--;
|
||||
output.push(gi() + '</div>');
|
||||
}
|
||||
}
|
||||
|
||||
output.push('</div>');
|
||||
|
|
@ -64,7 +103,7 @@ var FloatedDivConstructor = Class.create({
|
|||
});
|
||||
|
||||
if (include_container) {
|
||||
output.unshift('#sidebar-container { overflow: hidden }');
|
||||
output.unshift('#sidebar-container, #whole-sidebar-container { overflow: hidden }');
|
||||
output.push('.clear { clear: both }');
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,20 +15,69 @@
|
|||
[
|
||||
{
|
||||
'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>'
|
||||
'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>'
|
||||
'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>'
|
||||
'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>'
|
||||
}
|
||||
'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>'
|
||||
},
|
||||
{
|
||||
'input': {'left': [0, 3], 'right': [0, 1]},
|
||||
'expected_result': '<div id="container">\n' +
|
||||
' <div id="whole-sidebar-container">\n' +
|
||||
' <div id="left-sidebar"><?php echo $left_sidebar ?></div>\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' +
|
||||
' <br class="clear" />\n' +
|
||||
' </div>\n' +
|
||||
'</div>'
|
||||
},
|
||||
].each(function(info) {
|
||||
var f = new FloatedDivConstructor();
|
||||
myThis.assertEqual(info.expected_result, f.generate_html(info.input));
|
||||
|
|
@ -44,11 +93,16 @@
|
|||
},
|
||||
{
|
||||
'input': {'left': {'width': '200'}},
|
||||
'expected_result': '#sidebar-container { overflow: hidden }\n#left-sidebar { float: left; display: inline; width: 200px }\n.clear { clear: both }'
|
||||
'expected_result': '#sidebar-container, #whole-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 }'
|
||||
'expected_result': '#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'
|
||||
+ '.clear { clear: both }'
|
||||
}
|
||||
].each(function(info) {
|
||||
var f = new FloatedDivConstructor();
|
||||
|
|
|
|||
Loading…
Reference in New Issue