Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

107 lines (83 sloc) 4.207 kb
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="description" content="Plumb is a web layout composition tool for use with the Blueprint framework">
<meta name="keywords" content="css html layout blueprint web design wysiwyg graphical composition tool">
<script src="plumb.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="plumb.css" type="text/css" media="screen" charset="utf-8">
<title>Plumb</title>
</head>
<body>
<div id="modes">
<button id="select"><img src="images/select.gif"></button>
<button id="draw"><img src="images/draw.gif"></button>
</div>
<div id="layout"></div>
<div id="show">
<div id="about">
This is <b>Plumb</b>, a web layout composition tool for use with the <a href="http://blueprintcss.org">Blueprint framework</a>. Pretty much you just draw some stuff up above and it makes HTML for you. If it doesn't work, <a href="http://github.com/mdaines/plumb/issues">tell me about it</a> or <a href="http://github.com/mdaines/plumb">fork it on GitHub</a>.
<address>&mdash; <a href="http://mdaines.com/">Michael Daines</a></address>
</div>
<div id="html" style="display: none;">
<pre><code></code></pre>
</div>
</div>
<script type="text/javascript" charset="utf-8">
Event.observe(document, "dom:loaded", function() {
Plumb.setup("layout");
$("select").observe("mousedown", function() { Plumb.setMode("select"); });
$("draw").observe("mousedown", function() { Plumb.setMode("draw"); });
Plumb.observe("plumb:modechanged", function() {
$("layout").removeClassName("select", "draw");
$("layout").addClassName(Plumb.mode);
$("modes").select("button").invoke("removeClassName", "set");
$(Plumb.mode).addClassName("set");
});
Plumb.setMode("draw");
function updateOutput() {
$("html").show();
try {
var container = new Element("div");
Plumb.Output.output(Plumb.Recognition.recognize(), container);
function outputChildren(element, level) {
var html = "";
if (Object.isUndefined(level))
level = 0;
element.immediateDescendants().each(function(child) {
html += "&nbsp;&nbsp;".times(level) + "&lt;div class=&quot;" + child.className + "&quot;&gt;\n";
if (child.immediateDescendants().any())
html += outputChildren(child, level + 1);
else
html += "&nbsp;&nbsp;".times(level + 1) + "Lorem ipsum dolor\n";
html += "&nbsp;&nbsp;".times(level) + "&lt;/div&gt;\n";
});
return html;
}
$("html").down("pre code").update(outputChildren(container));
} catch (e) {
if (e == Plumb.UnsupportedLayout) {
$("html").down("pre code").update("Plumb can't fully subdivide the rows and columns in this layout.");
} else if (e == Plumb.Overlap) {
$("html").down("pre code").update("Plumb can't recognize layouts with overlapping shapes.");
} else {
throw e;
}
}
}
Plumb.observe("plumb:finishedresizing", updateOutput);
Plumb.observe("plumb:finisheddragging", updateOutput);
Plumb.observe("plumb:selectiondestroyed", updateOutput);
});
</script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-165120-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.