<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>A smart, organizing text editor</title>
<link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="/static/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<link href="/static/shoofle.css" rel="stylesheet" type="text/css">
<script src="/static/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
body {
background-color: gray;
margin: 1em;
}
#editor p {
margin: 0;
}
.block {
font-family: monospace;
background-color: white;
padding: 4px;
display: block;
}
.if-elseif-else-wrapper {
white-space: normal;
background-color: rgb(200,200,255);
}
.branch {
margin-right: 4px;
background-color: rgb(200,255,200);
display: inline-block;
}
.while-wrapper {
background-color: rgb(255,200,200);
}
</style>
</head>
<body style="background-color: gray; margin: 1em;">
<div class="block" id="editor" contentEditable>
<p class="code">some kind of preparation code, I guess</p>
<p class="code">or something</p>
<div class="branch if">
<p class="condition">if (condition)</p>
<div class="block base">
<p>do something in response to a true condition</p>
</div>
</div>
<div class="branch else-if">
<p class="condition">else if (some other condition)</p>
<div class="block base">
<p>then we should do something specific else</p>
</div>
</div>
<div class="branch else">
<p class="condition">else</p>
<div class="block base">
<p>some fallback thing!</p>
</div>
</div>
<p>some code</p>
<p>do other thing</p>
<p>{} | : {} ();</p>
<div class="while-wrapper">
<p class="condition">while (something)</p>
<div class="block base">
<p>update the counters</p>
<p>hack the gibsons</p>
<p>do the stuff</p>
</div>
</div>
</div>
<script type="text/javascript">
var finds_if_regex = /(?:\s*)((?:else\s*)?if\s*\([^)]+\)\s*)\{([^}]*)\}/;
function respond_to_ifs() {
var editor = $('#editor');
var lines_of_code = editor.find('p');
lines_of_code.each(individual_line_if);
}
function individual_line_if() {
if (!finds_if_regex.exec($(this).text())) { return true; }
var split_up = $(this).text().split(finds_if_regex);
var branch = $('<div></div>').addClass('branch if');
$(this).before(branch);
if (split_up[0].length > 0) {
branch.before($('<p></p>').text(split_up[0]));
}
branch.append($('<p class="condition"></p>').text(split_up[1]));
branch.append($('<div></div>').addClass('block').append($(this)));
$(this).before('{');
$(this).text(split_up[2]);
$(this).after('}');
if (split_up[3].length > 0) {
branch.after($('<p></p>').text(split_up[2]));
}
}
var finds_else_regex = /(?:[^\S])\s*else\s*(\{[^}]*\})/;
function make_new_else(c1, c2) {
var target;
if (c1 == undefined) { target = $(this); }
if (c2 == undefined) { target = $(c1); }
else { target = $(c2); }
if (!target.is('.block.base')) {
target.find('.block.base')
}
}
$(document).ready(function () {
$('#editor').on('input', function() { respond_to_ifs(); });
});
</script>
</body>
</html>