Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

New HTMl cell working with CodeMirror editing.

  • Loading branch information...
commit 653f15749a26cbcda10f5d70e02303ccd9a338b6 1 parent b0e516c
@ellisonbg ellisonbg authored
View
44 IPython/frontend/html/notebook/static/css/notebook.css
@@ -201,11 +201,11 @@ div.output_html {
div.output_png {
}
-div.text_cell {
+div.html_cell {
background-color: white;
}
-textarea.text_cell_input {
+textarea.html_cell_input {
/* Slightly bigger than the rest of the notebook */
font-size: 116%;
font-family: monospace;
@@ -218,7 +218,7 @@ textarea.text_cell_input {
color: black;
}
-div.text_cell_render {
+div.html_cell_render {
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
/* Slightly bigger than the rest of the notebook */
font-size: 116%;
@@ -230,25 +230,25 @@ div.text_cell_render {
color: black;
}
-div.text_cell_render em {font-style: italic;}
-div.text_cell_render strong {font-weight: bold;}
-div.text_cell_render u {text-decoration: underline;}
-div.text_cell_render :link { text-decoration: underline }
-div.text_cell_render :visited { text-decoration: underline }
-div.text_cell_render h1 {font-size: 197%; margin: .67em 0; font-weight: bold;}
-div.text_cell_render h2 {font-size: 153.9%; margin: .75em 0; font-weight: bold;}
-div.text_cell_render h3 {font-size: 116%; margin: .83em 0; font-weight: bold;}
-div.text_cell_render h4 {margin: 1.12em 0; font-weight: bold;}
-div.text_cell_render h5 {font-size: 85%.; margin: 1.5em 0; font-weight: bold;}
-div.text_cell_render h6 {font-size: 77%; margin: 1.67em 0; font-weight: bold;}
-div.text_cell_render ul {list-style:disc; margin-left: 40px;}
-div.text_cell_render ul ul {list-style:square; margin-left: 40px;}
-div.text_cell_render ul ul ul {list-style:circle; margin-left: 40px;}
-div.text_cell_render ol {list-style:upper-roman; margin-left: 40px;}
-div.text_cell_render ol ol {list-style:upper-alpha;}
-div.text_cell_render ol ol ol {list-style:decimal;}
-div.text_cell_render ol ol ol ol {list-style:lower-alpha;}
-div.text_cell_render ol ol ol ol ol {list-style:lower-roman;}
+div.html_cell_render em {font-style: italic;}
+div.html_cell_render strong {font-weight: bold;}
+div.html_cell_render u {text-decoration: underline;}
+div.html_cell_render :link { text-decoration: underline }
+div.html_cell_render :visited { text-decoration: underline }
+div.html_cell_render h1 {font-size: 197%; margin: .67em 0; font-weight: bold;}
+div.html_cell_render h2 {font-size: 153.9%; margin: .75em 0; font-weight: bold;}
+div.html_cell_render h3 {font-size: 116%; margin: .83em 0; font-weight: bold;}
+div.html_cell_render h4 {margin: 1.12em 0; font-weight: bold;}
+div.html_cell_render h5 {font-size: 85%.; margin: 1.5em 0; font-weight: bold;}
+div.html_cell_render h6 {font-size: 77%; margin: 1.67em 0; font-weight: bold;}
+div.html_cell_render ul {list-style:disc; margin-left: 40px;}
+div.html_cell_render ul ul {list-style:square; margin-left: 40px;}
+div.html_cell_render ul ul ul {list-style:circle; margin-left: 40px;}
+div.html_cell_render ol {list-style:upper-roman; margin-left: 40px;}
+div.html_cell_render ol ol {list-style:upper-alpha;}
+div.html_cell_render ol ol ol {list-style:decimal;}
+div.html_cell_render ol ol ol ol {list-style:lower-alpha;}
+div.html_cell_render ol ol ol ol ol {list-style:lower-roman;}
.CodeMirror {
View
113 IPython/frontend/html/notebook/static/js/htmlcell.js
@@ -1,37 +1,38 @@
//============================================================================
-// TextCell
+// HTMLCell
//============================================================================
var IPython = (function (IPython) {
- var TextCell = function (notebook) {
+ var HTMLCell = function (notebook) {
IPython.Cell.apply(this, arguments);
this.placeholder = "Type <strong>HTML</strong> and LaTeX: $\\alpha^2$"
this.rendered = false;
};
- TextCell.prototype = new IPython.Cell();
+ HTMLCell.prototype = new IPython.Cell();
- TextCell.prototype.create_element = function () {
- var cell = $("<div>").addClass('cell text_cell border-box-sizing').
- append(
- $("<textarea>" + this.placeholder + "</textarea>").
- addClass('text_cell_input').
- attr('rows',1).
- attr('cols',80).
- autogrow()
- ).append(
- // The tabindex=-1 makes this div focusable.
- $('<div></div>').addClass('text_cell_render').attr('tabindex','-1')
- )
+
+ HTMLCell.prototype.create_element = function () {
+ var cell = $("<div>").addClass('cell html_cell border-box-sizing');
+ var input_area = $('<div/>').addClass('html_cell_input');
+ this.code_mirror = CodeMirror(input_area.get(0), {
+ indentUnit : 4,
+ enterMode : 'flat',
+ tabMode: 'shift',
+ value: this.placeholder
+ });
+ // The tabindex=-1 makes this div focusable.
+ var render_area = $('<div/>').addClass('html_cell_render').attr('tabindex','-1');
+ cell.append(input_area).append(render_area);
this.element = cell;
};
- TextCell.prototype.bind_events = function () {
+ HTMLCell.prototype.bind_events = function () {
IPython.Cell.prototype.bind_events.apply(this);
var that = this;
this.element.keydown(function (event) {
@@ -45,71 +46,71 @@ var IPython = (function (IPython) {
};
- TextCell.prototype.select = function () {
+ HTMLCell.prototype.select = function () {
IPython.Cell.prototype.select.apply(this);
- var output = this.element.find("div.text_cell_render");
+ var output = this.element.find("div.html_cell_render");
output.trigger('focus');
};
- TextCell.prototype.edit = function () {
+ HTMLCell.prototype.edit = function () {
if (this.rendered === true) {
- var text_cell = this.element;
- var input = text_cell.find("textarea.text_cell_input");
- var output = text_cell.find("div.text_cell_render");
+ var html_cell = this.element;
+ var output = html_cell.find("div.html_cell_render");
output.hide();
- input.show().trigger('focus');
+ html_cell.find('div.html_cell_input').show();
+ this.code_mirror.focus();
+ this.code_mirror.refresh();
this.rendered = false;
};
};
- TextCell.prototype.render = function () {
+ HTMLCell.prototype.render = function () {
if (this.rendered === false) {
- var text_cell = this.element;
- var input = text_cell.find("textarea.text_cell_input");
- var output = text_cell.find("div.text_cell_render");
- var text = input.val();
- if (text === "") {
- text = this.placeholder;
- input.val(text);
- };
- output.html(text)
- input.html(text);
+ var html_cell = this.element;
+ var output = html_cell.find("div.html_cell_render");
+ var text = this.get_source();
+ if (text === "") {text = this.placeholder;};
+ this.set_render(text);
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
- input.hide();
+ html_cell.find('div.html_cell_input').hide();
output.show();
this.rendered = true;
};
};
- TextCell.prototype.config_mathjax = function () {
- var text_cell = this.element;
+ HTMLCell.prototype.config_mathjax = function () {
+ var html_cell = this.element;
var that = this;
- text_cell.click(function () {
+ html_cell.click(function () {
that.edit();
}).focusout(function () {
that.render();
});
- text_cell.trigger("focusout");
+ html_cell.trigger("focusout");
+ };
+
+
+ HTMLCell.prototype.get_source = function() {
+ return this.code_mirror.getValue();
};
- TextCell.prototype.get_text = function() {
- return this.element.find("textarea.text_cell_input").val();
+ HTMLCell.prototype.set_source = function(text) {
+ this.code_mirror.setValue(text);
+ this.code_mirror.refresh();
};
- TextCell.prototype.set_text = function(text) {
- this.element.find("textarea.text_cell_input").val(text);
- this.element.find("textarea.text_cell_input").html(text);
- this.element.find("div.text_cell_render").html(text);
+ HTMLCell.prototype.set_render = function(text) {
+ this.element.find('div.html_cell_render').html(text);
};
- TextCell.prototype.at_top = function () {
+ HTMLCell.prototype.at_top = function () {
if (this.rendered) {
return true;
} else {
@@ -118,7 +119,7 @@ var IPython = (function (IPython) {
};
- TextCell.prototype.at_bottom = function () {
+ HTMLCell.prototype.at_bottom = function () {
if (this.rendered) {
return true;
} else {
@@ -127,24 +128,24 @@ var IPython = (function (IPython) {
};
- TextCell.prototype.fromJSON = function (data) {
- if (data.cell_type === 'text') {
- if (data.text !== undefined) {
- this.set_text(data.text);
- this.grow(this.element.find("textarea.text_cell_input"));
+ HTMLCell.prototype.fromJSON = function (data) {
+ if (data.cell_type === 'html') {
+ if (data.source !== undefined) {
+ this.set_source(data.source);
+ this.set_render(data.source);
};
};
}
- TextCell.prototype.toJSON = function () {
+ HTMLCell.prototype.toJSON = function () {
var data = {}
- data.cell_type = 'text';
- data.text = this.get_text();
+ data.cell_type = 'html';
+ data.source = this.get_source();
return data;
};
- IPython.TextCell = TextCell;
+ IPython.HTMLCell = HTMLCell;
return IPython;
View
27 IPython/frontend/html/notebook/static/js/notebook.js
@@ -320,10 +320,10 @@ var IPython = (function (IPython) {
}
- Notebook.prototype.insert_text_cell_before = function (index) {
+ Notebook.prototype.insert_html_cell_before = function (index) {
// TODO: Bounds check for i
var i = this.index_or_selected(index);
- var cell = new IPython.TextCell(this);
+ var cell = new IPython.HTMLCell(this);
cell.config_mathjax();
this.insert_cell_before(cell, i);
this.select(this.find_cell_index(cell));
@@ -331,10 +331,10 @@ var IPython = (function (IPython) {
}
- Notebook.prototype.insert_text_cell_after = function (index) {
+ Notebook.prototype.insert_html_cell_after = function (index) {
// TODO: Bounds check for i
var i = this.index_or_selected(index);
- var cell = new IPython.TextCell(this);
+ var cell = new IPython.HTMLCell(this);
cell.config_mathjax();
this.insert_cell_after(cell, i);
this.select(this.find_cell_index(cell));
@@ -342,31 +342,32 @@ var IPython = (function (IPython) {
}
- Notebook.prototype.text_to_code = function (index) {
+ Notebook.prototype.html_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 IPython.TextCell) {
+ if (source_cell instanceof IPython.HTMLCell) {
this.insert_code_cell_after(i);
var target_cell = this.cells()[i+1];
- target_cell.set_code(source_cell.get_text());
+ target_cell.set_code(source_cell.get_source());
source_element.remove();
};
};
- Notebook.prototype.code_to_text = function (index) {
+ Notebook.prototype.code_to_html = 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 IPython.CodeCell) {
- this.insert_text_cell_after(i);
+ this.insert_html_cell_after(i);
var target_cell = this.cells()[i+1];
var text = source_cell.get_code();
if (text === "") {text = target_cell.placeholder;};
- target_cell.set_text(text);
+ target_cell.set_source(text);
+ target_cell.set_render(text);
source_element.remove();
target_cell.edit();
};
@@ -508,7 +509,7 @@ var IPython = (function (IPython) {
var code = cell.get_code();
var msg_id = that.kernel.execute(cell.get_code());
that.msg_cell_map[msg_id] = cell.cell_id;
- } else if (cell instanceof IPython.TextCell) {
+ } else if (cell instanceof IPython.HTMLCell) {
cell.render();
}
if (default_options.terminal) {
@@ -561,8 +562,8 @@ var IPython = (function (IPython) {
if (cell_data.cell_type == 'code') {
new_cell = this.insert_code_cell_after();
new_cell.fromJSON(cell_data);
- } else if (cell_data.cell_type === 'text') {
- new_cell = this.insert_text_cell_after();
+ } else if (cell_data.cell_type === 'html') {
+ new_cell = this.insert_html_cell_after();
new_cell.fromJSON(cell_data);
};
};
View
6 IPython/frontend/html/notebook/static/js/panelsection.js
@@ -153,10 +153,10 @@ var IPython = (function (IPython) {
IPython.notebook.move_cell_down();
});
this.content.find('#to_code').click(function () {
- IPython.notebook.text_to_code();
+ IPython.notebook.html_to_code();
});
- this.content.find('#to_text').click(function () {
- IPython.notebook.code_to_text();
+ this.content.find('#to_html').click(function () {
+ IPython.notebook.code_to_html();
});
this.content.find('#run_selected_cell').click(function () {
IPython.notebook.execute_selected_cell();
View
4 IPython/frontend/html/notebook/templates/notebook.html
@@ -96,7 +96,7 @@ <h3 class="section_header">Cell</h3>
<div class="section_row">
<span id="cell_type" class="section_row_buttons">
<button id="to_code">Code</button>
- <button id="to_text">Text</button>
+ <button id="to_html">HTML</button>
</span>
<span class="button_label">Cell Type</span>
</div>
@@ -174,7 +174,7 @@ <h3 class="section_header">Help</h3>
<script src="static/js/utils.js" type="text/javascript" charset="utf-8"></script>
<script src="static/js/cell.js" type="text/javascript" charset="utf-8"></script>
<script src="static/js/codecell.js" type="text/javascript" charset="utf-8"></script>
-<script src="static/js/textcell.js" type="text/javascript" charset="utf-8"></script>
+<script src="static/js/htmlcell.js" type="text/javascript" charset="utf-8"></script>
<script src="static/js/kernel.js" type="text/javascript" charset="utf-8"></script>
<script src="static/js/kernelstatus.js" type="text/javascript" charset="utf-8"></script>
<script src="static/js/layout.js" type="text/javascript" charset="utf-8"></script>
Please sign in to comment.
Something went wrong with that request. Please try again.