templates/index.html

<html>
  <head>
      <link rel="stylesheet" href="/media_files/style.css" type="text/css" />
<script src="/media_files/jquery-1.3.2.js" type="text/javascript"></script>
<script src="/media_files/jquery.hotkeys.js" type="text/javascript"></script>
<script src="/media_files/json2.js" type="text/javascript"></script>
<script type="text/javascript">

function get_selection_range(input) {
    /*
    Return the start and end positions of the currently selected text
    in the input text area (a DOM object).

    INPUT:
        input -- a DOM object (a textarea)

    OUTPUT:
        an array of two nonnegative integers
    */
    // If the attribute input.selectionStart is present, use that:
    if (input.selectionStart || input.selectionStart == 0) {
        return Array(input.selectionStart, input.selectionEnd);
    } else {
        var start, end;
        var range = document.selection.createRange();

        var tmprange = range.duplicate();
        tmprange.moveToElementText(input);
        tmprange.setEndPoint("endToStart", range);
        start = tmprange.text.length;

        tmprange = range.duplicate();
        tmprange.moveToElementText(input);
        tmprange.setEndPoint("endToEnd", range);
        end = tmprange.text.length;

        return Array(start, end);
    }
}


$.fn.selectRange = function(start, end) {
        return this.each(function() {
                if(this.setSelectionRange) {
                        this.focus();
                        this.setSelectionRange(start, end);
                } else if(this.createTextRange) {
                        var range = this.createTextRange();
                        range.collapse(true);
                        range.moveEnd('character', end);
                        range.moveStart('character', start);
                        range.select();
                }
        });
};

function focus_next_cell(cell) {
    var next_cell = cell.parent().next().children("textarea.cell_input");
    if (next_cell.length == 0) return;
    next_cell.focus();
    next_cell.selectRange(0, 0);
};

function focus_prev_cell(cell) {
    var prev_cell = cell.parent().prev().children("textarea.cell_input");
    if (prev_cell.length == 0) return;
    if (prev_cell.parent().attr("class") == "disabled") return;
    prev_cell.focus();
    prev_cell.selectRange(0, 0);
};

function insert_cell_before(cell) {
    cell.parent().before(create_cell());
};

function insert_cell_after(cell) {
    cell.parent().after(create_cell());
};

function join_cells(cell) {
    var prev_cell = cell.parent().prev().children("textarea.cell_input");
    if (prev_cell.length == 0) return;
    if (cell.val() != "") {
        if (prev_cell.val() != "") {
            prev_cell.val(prev_cell.val() + "\n" + cell.val());
        } else {
            prev_cell.val(cell.val());
        }
    }
    focus_prev_cell(cell);
    cell.parent().remove();
};

function calculate_textarea_rows(text, cols) {
    /*
       Calculates the number of rows in the textarea.

       text ... the text in the textarea
       cols ... the number of columns in the text area

       Returns: the number of rows

       This function counts the number of new lines and takes wrapping into
       account.
       */
    var lines = text.split('\n');
    var rows = lines.length;
    for (var i = 0; i < lines.length; i++)
    {
        var line = lines[i];
        if (line.length >= cols) rows += Math.floor(line.length / cols);
    }
    return rows;
}

function get_cursor_row(node) {
    /*
       Returns the row the cursor is on
       */
    var r = get_selection_range(node.context)[0];
    var lines = node.val().split('\n');
    var cols = node.context.cols;
    var row = 0;
    var chars = 0;
    for (var i = 0; i < lines.length; i++)
    {
        var line = lines[i];
        chars += line.length+1;
        if (r < chars) return row;
        row += 1;
    }
    return row-1;
}


function handle_resize(node, type) {
    /*
       Resizes the textarea (node) if needed.

       node ... the JQuery element
       type ... one of +1 (enter pressed) or -1 (backspace pressed)
                or 0 (copy & paste, or joining cells)

        Currently "type" is not used, but it may be used to do more accurate
        calculation of the number of rows in the future.
       */
    var t = node.context;
    var text = t.value;
    t.rows = calculate_textarea_rows(text, t.cols);
}


    var i=1;
    function create_cell() {
        /* This is a safety catch:
        if (i > 10) return; */
        /* Creates a new cell by cloning the disabled prototype */
        var a = $("#cell_prototype").clone().removeClass("disabled").addClass("cell");
        a.children(".input_prompt").text("In [" + i + "]:");
        a.children(".output_prompt").text("Out[" + i + "]:");
        a.children("a.eval_button").click(eval_click);
        a.children("div.insert_new_cell").click(insert_new_cell_click);
        a.children("textarea.cell_input").focus(cell_input_focus);
        a.children("textarea.cell_input").blur(cell_input_blur);
        a.children("textarea.cell_input").bind('keydown', 'Shift+return',
            function(event) {
                event.preventDefault();
                eval_click(event);
                focus_next_cell($(event.target));
                return true;
            });
        a.children("textarea.cell_input").bind('keydown', 'backspace',
            function(event) {
                if (get_selection_range(event.target)[0] == 0) {
                    event.preventDefault();
                    join_cells($(event.target));
                    return true;
                }
                handle_resize($(event.target), -1)
            });
        a.children("textarea.cell_input").bind('keydown', 'up',
            function(event) {
                if (get_cursor_row($(event.target)) == 0) {
                    event.preventDefault();
                    focus_prev_cell($(event.target));
                    return true;
                }
            });
        a.children("textarea.cell_input").bind('keydown', 'down',
            function(event) {
                if (get_cursor_row($(event.target)) + 1 == event.target.rows) {
                    event.preventDefault();
                    focus_next_cell($(event.target));
                    return true;
                }
            });
        a.children("textarea.cell_input").bind('keydown', 'return',
            function(event) {
                handle_resize($(event.target), +1);
                return true;
            });
        a.children("textarea.cell_input").bind('keydown', 'tab',
            function(event) {
                event.preventDefault();
                var pos = get_selection_range(event.target)[0];
                var text = event.target.value;
                text = text.substring(0, pos) + "    " + text.substring(pos,
                    text.length);
                event.target.value = text;
                return true;
            });
        a.children("textarea.cell_input").keyup(function(event) {
                handle_resize($(event.target), 0);
                return true;
            });
        i += 1;
        return a;
    };
    function insert_new_cell_click(event) {
        /* Gets called whenever the the "insert new cell" blue area is clicked,
           so this puts the new cell above the current one */
        event.preventDefault();
        insert_cell_before($(event.target));
    };
    function eval_click(event) {
        /* Gets called whenever the "evaluate" link is clicked */
        event.preventDefault();
        var t = $(event.target).parent().children("textarea");
        var output = $(event.target).parent().children("span.cell_output");
        var output_prompt = $(event.target).parent().children("span.output_prompt");
        var payload = { code: t.val(), time: "2pm" };
        payload = JSON.stringify(payload);
        $.post("/eval_cell/", { "payload": payload }, function(data) {
                //console.log(data.result);
                if (data.result != "") {
                    output_prompt.show();
                    output.empty();
                    output.append(data.result);
                }
                }, "json");
        var next_cell = $(event.target).parent().next().children("textarea.cell_input");
        if (next_cell.length == 0) insert_cell_after($(event.target));
    };
    function cell_input_focus(event) {
        /* Gets called whenever the user "gets into" the cell */
        event.preventDefault();
        $("textarea.cell_input_active").removeClass("cell_input_active").addClass("cell_input");
        $("a.eval_button").hide();
        $(event.target).removeClass("cell_input").addClass("cell_input_active");
        $(event.target).siblings("a.eval_button").show();
    };
    function cell_input_blur(event) {
        /* Gets called whenever the user "gets into" the cell */
        event.preventDefault();
        $(event.target).removeClass("cell_input_active").addClass("cell_input");
        $(event.target).siblings("a.eval_button").fadeOut();
    };
$(document).ready(function() {
    var cell = $("#cell_prototype > textarea");
    insert_cell_after(cell);
    focus_next_cell(cell);
});
</script>
<style type="text/css">
    a.test { font-weight: bold; }
</style>


    <title>Notebook</title>
  </head>
  <body>
      <h2>Notebook demo</h2>
      <p>Source code: <a href="http://github.com/certik/notebook">http://github.com/certik/notebook</a></p>
      <p>Made using <a href="http://jquery.com/">jQuery</a></p>

<div class="disabled" id="cell_prototype">
    <div class="insert_new_cell"></div>
    <span class="input_prompt">In [1]:</span>
    <textarea class="cell_input" rows=1 cols=80></textarea>
    <a href="" class="eval_button" alt="Click here or press shift-return to evaluate">evaluate</a>
    <div class="output_delimiter"></div>
    <span class="output_prompt">Out[1]:</span>
    <span class="cell_output"></span>
</div>

  </body>
</html>