github-migration
/
comicpress-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

floated div layout generator working

This commit is contained in:
John Bintz 2009-08-27 18:15:34 -04:00
parent ef56ea9248
commit 3558c228f7
2 changed files with 110 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
addons/Core/layout_constructors/FloatedDivConstructor.js
View File

@ -3,16 +3,43 @@ var FloatedDivConstructor = Class.create({
var output = []; var output = [];
output.push('<div id="container">'); output.push('<div id="container">');
var areas = $w("header comic body footer"); var areas = $w("header comic body footer");
var i, il; var i, il;
var indent = 1; var indent = 1;
var gi = function() { return " ".times(indent); }
var has_whole_sidebar = null;
var range = null; var range = null;
if (layout.left) { if (layout.left) {
if (layout.right) { if (layout.right) {
range[0] = Math.min(layout.left[0], layout.right[0]); range = [];
range[1] = Math.max(layout.left[1], layout.right[1]);
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 { } else {
range = layout.left; range = layout.left;
} }
@ -23,29 +50,41 @@ var FloatedDivConstructor = Class.create({
} }
for (i = 0, il = areas.length; i < il; ++i) { 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) {
if (range[0] == i) { if (range[0] == i) {
output.push(" ".times(indent) + '<div id="sidebar-container">'); output.push(gi() + '<div id="sidebar-container">');
indent++; indent++;
} }
$w("left right").each(function(field) { $w("left right").each(function(field) {
if (layout[field]) { if (field != has_whole_sidebar) {
if (layout[field][0] == i) { if (layout[field]) {
output.push(" ".times(indent) + '<div id="' + field + '-sidebar"><?php echo $' + field + '_sidebar ?></div>'); if (layout[field][0] == i) {
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) {
if (range[1] == i) { if (range[1] == i) {
output.push(" ".times(indent) + '<br class="clear" />'); output.push(gi() + '<br class="clear" />');
indent--; 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>'); output.push('</div>');
@ -64,7 +103,7 @@ var FloatedDivConstructor = Class.create({
}); });
if (include_container) { if (include_container) {
output.unshift('#sidebar-container { overflow: hidden }'); output.unshift('#sidebar-container, #whole-sidebar-container { overflow: hidden }');
output.push('.clear { clear: both }'); output.push('.clear { clear: both }');
} }

68
addons/Core/layout_constructors/LayoutConstructorsTest.html
View File

@ -15,20 +15,69 @@
[ [
{ {
'input': {}, '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]}, '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]}, '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]}, '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) { ].each(function(info) {
var f = new FloatedDivConstructor(); var f = new FloatedDivConstructor();
myThis.assertEqual(info.expected_result, f.generate_html(info.input)); myThis.assertEqual(info.expected_result, f.generate_html(info.input));
@ -44,11 +93,16 @@
}, },
{ {
'input': {'left': {'width': '200'}}, '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'}}, '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) { ].each(function(info) {
var f = new FloatedDivConstructor(); var f = new FloatedDivConstructor();