mirror/notebook
2
0
Fork 0
mirror of https://github.com/jupyter/notebook.git synced 2025-01-24 12:05:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

Initial draft of HTML5/JS/CSS3 notebook.

Browse Source
This commit is contained in:
Brian Granger 2011-03-17 21:09:04 -07:00 committed by Brian E. Granger
parent a79bd91af7
commit 360b6bf6ab
4 changed files with 798 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
IPython/frontend/html/notebook/notebook.py Normal file
View File

@ -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()

173
IPython/frontend/html/notebook/static/css/notebook.css Normal file
View File

@ -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;
}

501
IPython/frontend/html/notebook/static/js/notebook.js Normal file
View File

@ -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();});
});

84
IPython/frontend/html/notebook/templates/notebook.html Normal file
View File

@ -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>