multiple floating code boxes

multiple floating code boxes, possibly with uml view and code interpretation too

by Andy Bulka

HTML

<script src="https://raw.github.com/ariya/esprima/master/esprima.js"></script>
<script src="http://codemirror.net/lib/codemirror.js"></script>
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<h1>Multiple floating box code parser.</h1>
<div class="workspace">
    <div id="node1" class="node">
        <div class="rotater"></div>
        <textarea id="code1" class="code">
function findSequence(goal) {
  if (goal == "z")
    alert("zzz");
  else
    alert(55);
}
function add(a,b) { alert(a+b); }
function findSequence2() { alert("hi"); }
        </textarea>
        <div class="uml">
        </div>
    </div>
    
    <div id="node2" class="node">
        <div class="rotater"></div>
        <textarea id="code2" class="code">
function add(a,b) { alert(a+b); }
function add2(a,b) { alert(a+b); }
        </textarea>
        <div class="uml">
        </div>
    </div>
</div>

CSS

.workspace { width:600px; height:500px; background:beige; float:left}
.node {position="absolute"; border-color:black; border-width:2px; border-style:dashed; margin=14px;}

.selected { border-color:red; border-width:2px; border-style:dashed;}

#node1 { left:0; top:10; height: 130px; width:500px;}
#node2 { left:10; top:190; height: 100px; width:350px;}
.rotater {height: 10px; width:20px; margin:3px; background:DarkSeaGreen; float:right;  opacity:0.2; cursor: hand; cursor: pointer; }
.uml { display: none; margin:3px; background:beige; border:none;}
.uml_func { margin:3px; background:antiquewhite; clear:both; }
.uml_func:nth-child(odd) { background-color:Bisque }
.uml_func:nth-child(even) { background-color:BurlyWood }
.f_button {float:left;}

JavaScript

var editors = [];

function init_editor(id, height)
{
    var textarea = $("#"+id)[0];
    var editor = CodeMirror.fromTextArea(textarea, {
        lineNumbers: true,
        matchBrackets: true,
        tabSize: 2,
        mode: {name: "javascript", json: true},
        autoClearEmptyLines: true,
        lineWrapping: true
    });
    $(editor.getScrollerElement()).height(height);
    editors[id] = editor;
    return editor;
}
init_editor("code1", 130);
init_editor("code2", 100);

$('.node').draggable().resizable();

$(".rotater").hover(
    function() {
    $(this).stop().animate({"opacity": "0.8"}, "slow");
    },
    function() {
    $(this).stop().animate({"opacity": "0.2"}, "slow");
});
$(".rotater").click(
    function(e) {
        var node = $(e.target).parent();
        var uml = $('div.uml', node);
        var code = $('textarea.code', node);
        
        uml.toggle();
        $('div.CodeMirror', node).toggle();
        
        var id = code[0].id;
        var editor = editors[id];
        
        if (uml.is(':visible')) {
            parse(editor.getValue(), uml);
        }
    }
);

var syntax;

function parse(thecode, $uml) {
    syntax = esprima.parse(thecode);

    $uml.html('');
    var i;
    for (i = 0; i < syntax.body.length; ++i) {
        var el = syntax.body[i];

        // Main Text div
        var line_div = $uml.append($('<div>', {
         text: el.id.name,
         class: 'uml_func'
        }));
        
        // Build a button to execute that function
        var element = $("<input>", {
            type: "button",
            val: el.id.name,
            name: "blah",
            "class": "f_button",
        });
        line_div.append(element);
        //element.on("click", doclickeval);
        //element.data("num_params", 9);

        // Add parameters
        if (el.params.length > 0) {
            $.each(el.params, function(index, value) {
                
                var element = $("<input>", {
                   ...