Initial draft of HTML5/JS/CSS3 notebook.

IPython/frontend/html/notebook/notebook.py

@@ -0,0 +1,40 @@
+
+import os
+
+import tornado.httpserver
+import tornado.ioloop
+import tornado.options
+import tornado.web
+
+from tornado.options import define, options
+
+define("port", default=8888, help="run on the given port", type=int)
+
+class MainHandler(tornado.web.RequestHandler):
+    def get(self):
+        self.render('notebook.html')
+
+
+class NotebookApplication(tornado.web.Application):
+    def __init__(self):
+        handlers = [
+            (r"/", MainHandler)
+        ]
+        settings = dict(
+            template_path=os.path.join(os.path.dirname(__file__), "templates"),
+            static_path=os.path.join(os.path.dirname(__file__), "static"),
+        )
+        tornado.web.Application.__init__(self, handlers, **settings)
+
+
+def main():
+    tornado.options.parse_command_line()
+    application = NotebookApplication()
+    http_server = tornado.httpserver.HTTPServer(application)
+    http_server.listen(options.port)
+    tornado.ioloop.IOLoop.instance().start()
+
+
+if __name__ == "__main__":
+    main()
+

IPython/frontend/html/notebook/static/css/notebook.css

@@ -0,0 +1,173 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+
+body {
+    background-color: white;
+}
+
+span#ipython_notebook h1 {
+    font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
+    font-size: 32pt;
+    padding: 10px;
+    margin: 10px;
+}
+
+
+div#toolbar {
+    width: 100%;
+    height: auto;
+    border-bottom-width: 2px;
+    border-bottom-style: solid;
+    border-bottom-color: black;
+	padding: 5px;
+}
+
+#main_toolbar {
+}
+
+#main_toolbar button {
+    font-size: 0.9em;
+}
+
+div.notebook {
+    width: 760px;
+    height: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    background-color: white;
+
+/*  Uncomment this block for help in debugging the padding and margins
+/*    border-left-width: 1px;
+    border-left-style: solid;
+    border-left-color: black;
+    border-right-width: 1px;
+    border-right-style: solid;
+    border-right-color: black;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-bottom-color: black;*/
+}
+
+div.cell {
+    width: 740px;
+    margin: 5px 5px 5px 5px;
+    padding: 5px;
+    font-size: 11pt;
+    position: relative;
+}
+
+div.code_cell {
+    background-color: white;
+}
+
+div.prompt {
+    vertical-align: top;
+    display: table-cell;
+    width: 85px;
+    min-width 80px !important;
+    font-family: Menlo, "Courier New", Courier, mono;
+    font-weight: normal;
+    font-style: normal;
+}
+
+div.input {
+    display: table;
+    height: auto;
+}
+
+div.input_prompt {
+    color: blue;
+}
+
+
+textarea.input_area {
+    text-align: left;
+    font-family: Menlo, "Courier New", Courier, mono;
+    font-size: inherit;
+    border-style: none;
+    display: table-cell;
+    margin: 0;
+    padding: 0;
+    overflow: auto;
+    font-weight: normal;
+    font-style: normal;
+    width: 665px;
+    outline: none;
+    resize: none;
+}
+
+
+div.output {
+    display: table;
+}
+
+div.output_prompt {
+    color: red;
+}
+
+div.output_area {
+    text-align: left;
+    font-family: Menlo, "Courier New", Courier, mono;
+    font-size: inherit;
+    margin:  0;
+    padding:  0;
+    display: table-cell;
+    width:  665px;
+}
+
+div.text_cell {
+    background-color: white;
+}
+
+textarea.text_cell_input {
+    font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
+    font-size: inherit;
+    outline: none;
+    resize: none;
+    width:  inherit;
+    border-style: none;
+    padding: 0;
+    margin: 0;
+    color: black;
+}
+
+div.text_cell_render {
+    font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
+    font-size: inherit;
+    outline: none;
+    resize: none;
+    width:  inherit;
+    border-style: none;
+    padding: 0;
+    margin: 0;
+    color: black;
+}
+
+div.text_cell_render em {
+    font-style: italic;
+}
+
+div.text_cell_render strong {
+    font-weight: bold;
+}
+

IPython/frontend/html/notebook/static/js/notebook.js

@@ -0,0 +1,501 @@
+var IPYTHON = {};
+
+
+//============================================================================
+// Notebook
+//============================================================================
+
+
+var Notebook = function (selector) {
+    this.element = $(selector);
+    this.element.data("notebook", this);
+    this.next_prompt_number = 1;
+    this.bind_events();
+}
+
+
+Notebook.prototype.bind_events = function () {
+    var that = this;
+    that.element.keydown(function (event) {
+        // console.log(event);
+        if (event.which == 38 && event.shiftKey) {
+            that.select_prev();
+        } else if (event.which == 40 && event.shiftKey) {
+            that.select_next();
+        }
+    });
+};
+
+
+// Cell indexing, retrieval, etc.
+
+
+Notebook.prototype.cell_elements = function () {
+    return this.element.children("div.cell");
+}
+
+
+Notebook.prototype.ncells = function (cell) {
+    return this.cell_elements().length;
+}
+
+
+// TODO: we are often calling cells as cells()[i], which we should optimize
+// to cells(i) or a new method.
+Notebook.prototype.cells = function () {
+    return this.cell_elements().toArray().map(function (e) {
+        return $(e).data("cell");
+    });
+}
+
+
+Notebook.prototype.find_cell_index = function (cell) {
+    var result = null;
+    this.cell_elements().filter(function (index) {
+        if ($(this).data("cell") === cell) {
+            result = index;
+        };
+    });
+    return result;
+};
+
+
+Notebook.prototype.index_or_selected = function (index) {
+    return index || this.selected_index() || 0;
+}
+
+
+Notebook.prototype.select = function (index) {
+    if (index !== undefined && index >= 0 && index < this.ncells()) {
+        if (this.selected_index() !== null) {
+            this.selected_cell().unselect();
+        };
+        this.cells()[index].select();
+    };
+    return this;
+};
+
+
+Notebook.prototype.select_next = function () {
+    var index = this.selected_index();
+    if (index !== null && index >= 0 && (index+1) < this.ncells()) {
+        this.select(index+1);
+    };
+    return this;
+};
+
+
+Notebook.prototype.select_prev = function () {
+    var index = this.selected_index();
+    if (index !== null && index >= 0 && (index-1) < this.ncells()) {
+        this.select(index-1);
+    };
+    return this;
+};
+
+
+Notebook.prototype.selected_index = function () {
+    var result = null;
+    this.cell_elements().filter(function (index) {
+        if ($(this).data("cell").selected === true) {
+            result = index;
+        };
+    });
+    return result;
+};
+
+
+Notebook.prototype.selected_cell = function () {
+    return this.cell_elements().eq(this.selected_index()).data("cell");
+}
+
+
+// Cell insertion, deletion and moving.
+
+
+Notebook.prototype.delete_cell = function (index) {
+    var i = index || this.selected_index();
+    if (i !== null && i >= 0 && i < this.ncells()) {
+        this.cell_elements().eq(i).remove();
+        if (i === (this.ncells())) {
+            this.select(i-1);
+        } else {
+            this.select(i);
+        };
+    };
+    return this;
+};
+
+
+Notebook.prototype.append_cell = function (cell) {
+    this.element.append(cell.element);
+    return this;
+};
+
+
+Notebook.prototype.insert_cell_after = function (cell, index) {
+    var ncells = this.ncells();
+    if (ncells === 0) {
+        this.append_cell(cell);
+        return this;
+    };
+    if (index >= 0 && index < ncells) {
+        this.cell_elements().eq(index).after(cell.element);
+    };
+    return this
+};
+
+
+Notebook.prototype.insert_cell_before = function (cell, index) {
+    var ncells = this.ncells();
+    if (ncells === 0) {
+        this.append_cell(cell);
+        return this;
+    };
+    if (index > 0 && index < ncells) {
+        this.cell_elements().eq(index).before(cell.element);
+    };
+    return this;
+};
+
+
+Notebook.prototype.move_cell_up = function (index) {
+    var i = index || this.selected_index();
+    if (i !== null && i < this.ncells() && i > 0) {
+        var pivot = this.cell_elements().eq(i-1);
+        var tomove = this.cell_elements().eq(i);
+        if (pivot !== null && tomove !== null) {
+            tomove.detach();
+            pivot.before(tomove);
+        };
+    };
+    return this;
+}
+
+
+Notebook.prototype.move_cell_down = function (index) {
+    var i = index || this.selected_index();
+    if (i !== null && i < (this.ncells()-1) && i >= 0) {
+        var pivot = this.cell_elements().eq(i+1)
+        var tomove = this.cell_elements().eq(i)
+        if (pivot !== null && tomove !== null) {
+            tomove.detach();
+            pivot.after(tomove);
+        };
+    };
+    return this;
+}
+
+
+Notebook.prototype.sort_cells = function () {
+    var ncells = this.ncells();
+    var swapped;
+    do {
+        swapped = false
+        for (var i=1; i<ncells; i++) {
+            current = this.cell_elements().eq(i).data("cell");
+            previous = this.cell_elements().eq(i-1).data("cell");
+            if (previous.input_prompt_number > current.input_prompt_number) {
+                this.move_cell_up(i);
+                swapped = true;
+            };
+        };
+    } while (swapped);
+    return this;
+};
+
+
+Notebook.prototype.insert_code_cell_before = function (index) {
+    // TODO: Bounds check for i
+    var i = this.index_or_selected(index);
+    var cell = new CodeCell(this);
+    cell.set_input_prompt(this.next_prompt_number);
+    this.next_prompt_number = this.next_prompt_number + 1;
+    this.insert_cell_before(cell, i);
+    this.select(this.find_cell_index(cell));
+    return this;
+}
+
+
+Notebook.prototype.insert_code_cell_after = function (index) {
+    // TODO: Bounds check for i
+    var i = this.index_or_selected(index);
+    var cell = new CodeCell(this);
+    cell.set_input_prompt(this.next_prompt_number);
+    this.next_prompt_number = this.next_prompt_number + 1;
+    this.insert_cell_after(cell, i);
+    this.select(this.find_cell_index(cell));
+    return this;
+}
+
+
+Notebook.prototype.insert_text_cell_before = function (index) {
+    // TODO: Bounds check for i
+    var i = this.index_or_selected(index);
+    var cell = new TextCell(this);
+    cell.config_mathjax();
+    this.insert_cell_before(cell, i);
+    this.select(this.find_cell_index(cell));
+    return this;
+}
+
+
+Notebook.prototype.insert_text_cell_after = function (index) {
+    // TODO: Bounds check for i
+    var i = this.index_or_selected(index);
+    var cell = new TextCell(this);
+    cell.config_mathjax();
+    this.insert_cell_after(cell, i);
+    this.select(this.find_cell_index(cell));
+    return this;
+}
+
+
+Notebook.prototype.text_to_code = function (index) {
+    // TODO: Bounds check for i
+    var i = this.index_or_selected(index);
+    var source_element = this.cell_elements().eq(i);
+    var source_cell = source_element.data("cell");
+    if (source_cell instanceof TextCell) {
+        this.insert_code_cell_after(i);
+        var target_cell = this.cells()[i+1];
+        var text = source_element.find("textarea.text_cell_input").val();
+        target_cell.element.find("textarea.input_area").val(text);
+        source_element.remove();
+    };
+};
+
+
+Notebook.prototype.code_to_text = function (index) {
+    // TODO: Bounds check for i
+    var i = this.index_or_selected(index);
+    var source_element = this.cell_elements().eq(i);
+    var source_cell = source_element.data("cell");
+    if (source_cell instanceof CodeCell) {
+        this.insert_text_cell_after(i);
+        var target_cell = this.cells()[i+1];
+        var text = source_element.find("textarea.input_area").val();
+        target_cell.element.find("textarea.text_cell_input").val(text);
+        target_cell.element.find("textarea.text_cell_input").html(text);
+        target_cell.element.find("div.text_cell_render").html(text);
+
+        source_element.remove();
+    };
+};
+
+
+// Cell collapsing
+
+Notebook.prototype.collapse = function (index) {
+    var i = this.index_or_selected(index);
+    this.cells()[i].collapse();
+}
+
+
+Notebook.prototype.expand = function (index) {
+    var i = this.index_or_selected(index);
+    this.cells()[i].expand();
+}
+
+
+//============================================================================
+// Cell
+//============================================================================
+
+
+var Cell = function (notebook) {
+    this.notebook = notebook;
+    this.selected = false;
+    this.element;
+    this.create_element();
+    if (this.element !== undefined) {
+        this.element.data("cell", this);
+        this.bind_events();
+    }
+};
+
+
+Cell.prototype.select = function () {
+    this.element.addClass('ui-widget-content ui-corner-all');
+    this.selected = true;
+    this.element.find('textarea').trigger('focusin');
+};
+
+
+Cell.prototype.unselect = function () {
+    this.element.removeClass('ui-widget-content ui-corner-all');
+    this.selected = false;
+};
+
+
+Cell.prototype.bind_events = function () {
+    var that = this;
+    var nb = that.notebook
+    that.element.click(function (event) {
+        if (that.selected === false) {
+            nb.select(nb.find_cell_index(that));
+        };
+    });
+    that.element.focusin(function (event) {
+        if (that.selected === false) {
+            nb.select(nb.find_cell_index(that));
+        };
+    });
+};
+
+
+// Subclasses must implement create_element.
+Cell.prototype.create_element = function () {};
+
+
+//============================================================================
+// CodeCell
+//============================================================================
+
+
+var CodeCell = function (notebook) {
+    Cell.apply(this, arguments);
+    this.input_prompt_number = ' ';
+    this.output_prompt_number = ' ';
+};
+
+
+CodeCell.prototype = new Cell();
+
+
+CodeCell.prototype.create_element = function () {
+    var cell =  $('<div></div>').addClass('cell code_cell')
+    var input = $('<div></div>').addClass('input').append(
+                    $('<div/>').addClass('prompt input_prompt')
+                ).append(
+                    $('<textarea/>').addClass('input_area').
+                    attr('rows',1).
+                    attr('cols',80).
+                    attr('wrap','hard').
+                    autoGrow()
+                );
+    var output = $('<div></div>').addClass('output').append(
+                    $('<div/>').addClass('prompt output_prompt')
+                ).append(
+                    $('<div/>').addClass('output_area')
+                );
+    output.hide();
+    cell.append(input).append(output);
+    this.element = cell;
+};
+
+
+CodeCell.prototype.collapse = function () {
+    this.element.find('div.output').hide();
+};
+
+
+CodeCell.prototype.expand = function () {
+    this.element.find('div.output').show();
+};
+
+
+CodeCell.prototype.set_prompt = function (number) {
+    this.set_input_prompt(number);
+    this.set_output_prompt(number);
+};
+
+CodeCell.prototype.set_input_prompt = function (number) {
+    var n = number || ' ';
+    this.input_prompt_number = n
+    this.element.find('div.input_prompt').html('In&nbsp;[' + n + ']:');
+};
+
+
+CodeCell.prototype.set_output_prompt = function (number) {
+    var n = number || ' ';
+    this.output_prompt_number = n
+    this.element.find('div.output_prompt').html('Out[' + n + ']:');
+};
+
+
+//============================================================================
+// TextCell
+//============================================================================
+
+
+var TextCell = function (notebook) {
+    Cell.apply(this, arguments);
+};
+
+
+TextCell.prototype = new Cell();
+
+
+TextCell.prototype.create_element = function () {
+    var cell = $('<div></div').addClass('cell text_cell').
+               append(
+                   $('<textarea>Type HTML/LaTex content here</textarea>').
+                   addClass('text_cell_input').
+                   attr('rows',1).
+                   attr('cols',80).
+                   autoGrow()
+               ).append(
+                   $('<div></div>').addClass('text_cell_render')
+               )
+    this.element = cell;
+};
+
+
+TextCell.prototype.config_mathjax = function () {
+    var text_cell = this.element;
+    var input = text_cell.find("textarea.text_cell_input");
+    var output = text_cell.find("div.text_cell_render");
+
+    text_cell.click(function () {
+        output.hide();
+        input.show().trigger('focus');
+    }).focusout(function () {
+        var text = input.val();
+        output.html(text)
+        input.html(text);
+        MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
+        input.hide();
+        output.show();
+    });
+    
+    text_cell.trigger("focusout");
+};
+
+
+$(document).ready(function () {
+
+    MathJax.Hub.Config({
+        tex2jax: {
+            inlineMath: [ ['$','$'], ["\\(","\\)"] ],
+            displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
+        }
+    });
+
+    $("ul#main_menu").wijmenu({animation:{animated: "slide", duration: 100, easing: null}});
+    IPYTHON.notebook = new Notebook('div.notebook');
+    IPYTHON.notebook.insert_code_cell_after();
+
+    $("#move_cell").buttonset();
+    $("#move_up").button("option", "icons", {primary:"ui-icon-arrowthick-1-n"});
+    $("#move_up").button("option", "text", false);
+    $("#move_up").click(function () {IPYTHON.notebook.move_cell_up();});
+    $("#move_down").button("option", "icons", {primary:"ui-icon-arrowthick-1-s"});
+    $("#move_down").button("option", "text", false);
+    $("#move_down").click(function () {IPYTHON.notebook.move_cell_down();});
+
+    $("#insert_delete").buttonset();
+    $("#insert_cell_before").click(function () {IPYTHON.notebook.insert_code_cell_before();});
+    $("#insert_cell_after").click(function () {IPYTHON.notebook.insert_code_cell_after();});
+    $("#delete_cell").button("option", "icons", {primary:"ui-icon-closethick"});
+    $("#delete_cell").button("option", "text", false);
+    $("#delete_cell").click(function () {IPYTHON.notebook.delete_cell();});
+
+    $("#cell_type").buttonset();
+    $("#to_code").click(function () {IPYTHON.notebook.text_to_code();});
+    $("#to_text").click(function () {IPYTHON.notebook.code_to_text();});
+
+    $("#sort").buttonset();
+    $("#sort_cells").click(function () {IPYTHON.notebook.sort_cells();});
+
+});

IPython/frontend/html/notebook/templates/notebook.html

@@ -0,0 +1,84 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+    <meta charset="utf-8">
+
+    <title>IPython Notebook</title>
+    <link rel="stylesheet" href="static/css/notebook.css" type="text/css" />
+    <link rel="stylesheet" href="static/jquery/css/jquery.wijmo-open.1.1.3.css" type="text/css" />
+    <link rel="stylesheet" href="static/jquery/css/themes/aristo/jquery-wijmo.css" type="text/css" />
+    <!-- <link rel="stylesheet" href="static/jquery/css/themes/ui-lightness/jquery-ui-1.8.10.custom.css" type="text/css" /> -->
+    <!-- <script src="static/mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript" charset="utf-8"></script> -->
+    <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" charset="utf-8"></script>
+</head>
+
+<body>
+
+<div id="header">
+    <span id="ipython_notebook"><h1>IPython Notebook</h1></span>
+</div>
+
+<div id="tools">
+
+<ul id="main_menu">
+    <li><a>Cell</a>
+        <ul>
+            <li><a>Run</a></li>
+            <li><a>Move up</a></li>
+            <li><a>Move down</a></li>
+            <li><a>Delete</a></li>
+        </ul>
+    </li>
+    <li><a>Kernel</a>
+        <ul>
+            <li><a>Interrupt</a></li>
+            <li><a>Restart</a></li>
+        </ul>
+    </li>
+    <li><a>Help</a>
+        <ul>
+            <li><a>Notebook help</a></li>
+            <li></li>
+            <li><a href="http://docs.python.org" target="_blank">Python Docs</a></li>
+            <li><a href="http://ipython.github.com/ipython-doc/dev/index.html" target="_blank">IPython Docs</a></li>
+            <li><a href="http://docs.scipy.org/doc/numpy/reference/" target="_blank">NumPy Docs</a></li>
+            <li><a href="http://docs.scipy.org/doc/scipy/reference/" target="_blank">SciPy Docs</a></li>
+            <li><a href="http://docs.sympy.org/dev/index.html" target="_blank">SymPy Docs</a></li>
+        </ul>
+    </li>
+</ul>
+
+<div id="toolbar">
+    <span id="main_toolbar">
+        <span id="move_cell">
+            <button id="move_up">Move up</button>
+            <button id="move_down">Move down</button>
+        </span>
+        <span id="insert_delete">
+            <button id="insert_cell_before">Before</button>
+            <button id="insert_cell_after">After</button>
+            <button id="delete_cell">Delete</button>
+        </span>
+        <span id="cell_type">
+            <button id="to_code">Code</button>
+            <button id="to_text">Text</button>
+        </span>
+        <span id="sort">
+            <button id="sort_cells">Sort</button>
+        </span>
+    </span>
+</div>
+
+</div>
+
+<div class="notebook"></div>
+
+<script src="static/jquery/js/jquery-1.5.1.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="static/jquery/js/jquery-ui-1.8.10.custom.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="static/jquery/js/jquery.autogrow.js" type="text/javascript" charset="utf-8"></script>
+<script src="static/jquery/js/jquery.wijmo-open.1.1.3.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="static/js/notebook.js" type="text/javascript" charset="utf-8"></script>
+</body>
+
+</html>