You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
3.1 KiB
120 lines
3.1 KiB
<!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>
|
|
|