From fbce9421cae021500dfd552040a060f8565a0414 2011-08-09 18:37:14 From: Brian Granger Date: 2011-08-09 18:37:14 Subject: [PATCH] Refactoring of text/markdown/rst/html cells. --- diff --git a/IPython/frontend/html/notebook/static/css/notebook.css b/IPython/frontend/html/notebook/static/css/notebook.css index 1555d00..471111f 100644 --- a/IPython/frontend/html/notebook/static/css/notebook.css +++ b/IPython/frontend/html/notebook/static/css/notebook.css @@ -69,7 +69,7 @@ div.section_content { span.section_row_buttons > button { - width: 60px; + width: 70px; } .section_row { @@ -205,31 +205,15 @@ div.output_html { div.output_png { } -div.html_cell { +div.text_cell { background-color: white; } -div.html_cell_input { - color: black; -} - -div.html_cell_render { - font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; - /* Slightly bigger than the rest of the notebook */ - font-size: 116%; - outline: none; - resize: none; - width: inherit; - border-style: none; - padding: 5px; - color: black; -} - -div.rst_cell_input { +div.text_cell_input { color: black; } -div.rst_cell_render { +div.text_cell_render { font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; /* Slightly bigger than the rest of the notebook */ font-size: 116%; @@ -241,27 +225,6 @@ div.rst_cell_render { color: black; } -.rendered_html {color: black;} -.rendered_html em {font-style: italic;} -.rendered_html strong {font-weight: bold;} -.rendered_html u {text-decoration: underline;} -.rendered_html :link { text-decoration: underline } -.rendered_html :visited { text-decoration: underline } -.rendered_html h1 {font-size: 197%; margin: .67em 0; font-weight: bold;} -.rendered_html h2 {font-size: 153.9%; margin: .75em 0; font-weight: bold;} -.rendered_html h3 {font-size: 116%; margin: .83em 0; font-weight: bold;} -.rendered_html h4 {margin: 1.12em 0; font-weight: bold;} -.rendered_html h5 {font-size: 85%.; margin: 1.5em 0; font-weight: bold;} -.rendered_html h6 {font-size: 77%; margin: 1.67em 0; font-weight: bold;} -.rendered_html ul {list-style:disc; margin-left: 40px;} -.rendered_html ul ul {list-style:square; margin-left: 40px;} -.rendered_html ul ul ul {list-style:circle; margin-left: 40px;} -.rendered_html ol {list-style:upper-roman; margin-left: 40px;} -.rendered_html ol ol {list-style:upper-alpha;} -.rendered_html ol ol ol {list-style:decimal;} -.rendered_html ol ol ol ol {list-style:lower-alpha;} -.rendered_html ol ol ol ol ol {list-style:lower-roman;} - .CodeMirror { line-height: 1.231; /* Changed from 1em to our global default */ } diff --git a/IPython/frontend/html/notebook/static/css/renderedhtml.css b/IPython/frontend/html/notebook/static/css/renderedhtml.css new file mode 100644 index 0000000..2efd415 --- /dev/null +++ b/IPython/frontend/html/notebook/static/css/renderedhtml.css @@ -0,0 +1,20 @@ +.rendered_html {color: black;} +.rendered_html em {font-style: italic;} +.rendered_html strong {font-weight: bold;} +.rendered_html u {text-decoration: underline;} +.rendered_html :link { text-decoration: underline } +.rendered_html :visited { text-decoration: underline } +.rendered_html h1 {font-size: 197%; margin: .67em 0; font-weight: bold;} +.rendered_html h2 {font-size: 153.9%; margin: .75em 0; font-weight: bold;} +.rendered_html h3 {font-size: 116%; margin: .83em 0; font-weight: bold;} +.rendered_html h4 {margin: 1.12em 0; font-weight: bold;} +.rendered_html h5 {font-size: 85%.; margin: 1.5em 0; font-weight: bold;} +.rendered_html h6 {font-size: 77%; margin: 1.67em 0; font-weight: bold;} +.rendered_html ul {list-style:disc; margin-left: 40px;} +.rendered_html ul ul {list-style:square; margin-left: 40px;} +.rendered_html ul ul ul {list-style:circle; margin-left: 40px;} +.rendered_html ol {list-style:upper-roman; margin-left: 40px;} +.rendered_html ol ol {list-style:upper-alpha;} +.rendered_html ol ol ol {list-style:decimal;} +.rendered_html ol ol ol ol {list-style:lower-alpha;} +.rendered_html ol ol ol ol ol {list-style:lower-roman;} \ No newline at end of file diff --git a/IPython/frontend/html/notebook/static/js/cell.js b/IPython/frontend/html/notebook/static/js/cell.js index 1384967..ba11ab8 100644 --- a/IPython/frontend/html/notebook/static/js/cell.js +++ b/IPython/frontend/html/notebook/static/js/cell.js @@ -23,7 +23,7 @@ var IPython = (function (IPython) { Cell.prototype.select = function () { this.element.addClass('ui-widget-content ui-corner-all'); this.selected = true; - // TODO: we need t test across browsers to see if both of these are needed. + // TODO: we need to test across browsers to see if both of these are needed. // In the meantime, there should not be any harm in having them both. this.element.find('textarea').trigger('focusin'); this.element.find('textarea').trigger('focus'); diff --git a/IPython/frontend/html/notebook/static/js/leftpanel.js b/IPython/frontend/html/notebook/static/js/leftpanel.js index 1d64991..5cfec05 100644 --- a/IPython/frontend/html/notebook/static/js/leftpanel.js +++ b/IPython/frontend/html/notebook/static/js/leftpanel.js @@ -12,7 +12,7 @@ var IPython = (function (IPython) { this.left_panel_element = $(left_panel_selector); this.left_panel_splitter_element = $(left_panel_splitter_selector); this.expanded = true; - this.width = 250; + this.width = 300; this.style(); this.bind_events(); this.create_children(); diff --git a/IPython/frontend/html/notebook/static/js/notebook.js b/IPython/frontend/html/notebook/static/js/notebook.js index 452bcb9..95e4f1c 100644 --- a/IPython/frontend/html/notebook/static/js/notebook.js +++ b/IPython/frontend/html/notebook/static/js/notebook.js @@ -342,10 +342,10 @@ var IPython = (function (IPython) { } - Notebook.prototype.insert_rst_cell_before = function (index) { + Notebook.prototype.insert_markdown_cell_before = function (index) { // TODO: Bounds check for i var i = this.index_or_selected(index); - var cell = new IPython.RSTCell(this); + var cell = new IPython.MarkdownCell(this); cell.config_mathjax(); this.insert_cell_before(cell, i); this.select(this.find_cell_index(cell)); @@ -353,10 +353,10 @@ var IPython = (function (IPython) { } - Notebook.prototype.insert_rst_cell_after = function (index) { + Notebook.prototype.insert_markdown_cell_after = function (index) { // TODO: Bounds check for i var i = this.index_or_selected(index); - var cell = new IPython.RSTCell(this); + var cell = new IPython.MarkdownCell(this); cell.config_mathjax(); this.insert_cell_after(cell, i); this.select(this.find_cell_index(cell)); @@ -369,7 +369,8 @@ var IPython = (function (IPython) { 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.HTMLCell || source_cell instanceof IPython.RSTCell) { + if (source_cell instanceof IPython.HTMLCell || + source_cell instanceof IPython.MarkdownCell) { this.insert_code_cell_after(i); var target_cell = this.cells()[i+1]; target_cell.set_code(source_cell.get_source()); @@ -378,20 +379,23 @@ var IPython = (function (IPython) { }; - Notebook.prototype.to_rst = function (index) { + Notebook.prototype.to_markdown = 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"); var target_cell = null; if (source_cell instanceof IPython.CodeCell) { - this.insert_rst_cell_after(i); + this.insert_markdown_cell_after(i); var target_cell = this.cells()[i+1]; var text = source_cell.get_code(); } else if (source_cell instanceof IPython.HTMLCell) { - this.insert_rst_cell_after(i); + this.insert_markdown_cell_after(i); var target_cell = this.cells()[i+1]; var text = source_cell.get_source(); + if (text === source_cell.placeholder) { + text = target_cell.placeholder; + } } if (target_cell !== null) { if (text === "") {text = target_cell.placeholder;}; @@ -412,10 +416,13 @@ var IPython = (function (IPython) { this.insert_html_cell_after(i); var target_cell = this.cells()[i+1]; var text = source_cell.get_code(); - } else if (source_cell instanceof IPython.RSTCell) { + } else if (source_cell instanceof IPython.MarkdownCell) { this.insert_html_cell_after(i); var target_cell = this.cells()[i+1]; var text = source_cell.get_source(); + if (text === source_cell.placeholder) { + text = target_cell.placeholder; + } } if (target_cell !== null) { if (text === "") {text = target_cell.placeholder;}; diff --git a/IPython/frontend/html/notebook/static/js/panelsection.js b/IPython/frontend/html/notebook/static/js/panelsection.js index a197961..e955b73 100644 --- a/IPython/frontend/html/notebook/static/js/panelsection.js +++ b/IPython/frontend/html/notebook/static/js/panelsection.js @@ -158,8 +158,8 @@ var IPython = (function (IPython) { this.content.find('#to_html').click(function () { IPython.notebook.to_html(); }); - this.content.find('#to_rst').click(function () { - IPython.notebook.to_rst(); + this.content.find('#to_markdown').click(function () { + IPython.notebook.to_markdown(); }); this.content.find('#run_selected_cell').click(function () { IPython.notebook.execute_selected_cell(); diff --git a/IPython/frontend/html/notebook/static/js/rstcell.js b/IPython/frontend/html/notebook/static/js/rstcell.js deleted file mode 100644 index 5e7d612..0000000 --- a/IPython/frontend/html/notebook/static/js/rstcell.js +++ /dev/null @@ -1,187 +0,0 @@ - -//============================================================================ -// RSTCell -//============================================================================ - -var IPython = (function (IPython) { - - var RSTCell = function (notebook) { - IPython.Cell.apply(this, arguments); - this.placeholder = "Type ReStructured Text *here*." - this.rendered = false; - }; - - - RSTCell.prototype = new IPython.Cell(); - - - - RSTCell.prototype.create_element = function () { - var cell = $("
").addClass('cell rst_cell border-box-sizing'); - var input_area = $('
').addClass('rst_cell_input'); - this.code_mirror = CodeMirror(input_area.get(0), { - indentUnit : 4, - enterMode : 'flat', - tabMode: 'shift', - mode: 'rst', - theme: 'default', - value: this.placeholder - }); - // The tabindex=-1 makes this div focusable. - var render_area = $('
').addClass('rst_cell_render'). - addClass('rendered_html').attr('tabindex','-1'); - cell.append(input_area).append(render_area); - this.element = cell; - }; - - - RSTCell.prototype.bind_events = function () { - IPython.Cell.prototype.bind_events.apply(this); - var that = this; - this.element.keydown(function (event) { - if (event.which === 13) { - if (that.rendered) { - that.edit(); - event.preventDefault(); - }; - }; - }); - }; - - - RSTCell.prototype.select = function () { - IPython.Cell.prototype.select.apply(this); - var output = this.element.find("div.rst_cell_render"); - output.trigger('focus'); - }; - - - RSTCell.prototype.edit = function () { - if (this.rendered === true) { - var rst_cell = this.element; - var output = rst_cell.find("div.rst_cell_render"); - output.hide(); - rst_cell.find('div.rst_cell_input').show(); - this.code_mirror.focus(); - this.code_mirror.refresh(); - this.rendered = false; - }; - }; - - - RSTCell.prototype.render = function () { - if (this.rendered === false) { - var text = this.get_source(); - if (text === '') {text = this.placeholder;}; - var html = IPython.markdown_converter.makeHtml(text); - this.set_rendered(html); - MathJax.Hub.Queue(["Typeset",MathJax.Hub]); - this.element.find('div.rst_cell_input').hide(); - this.element.find("div.rst_cell_render").show(); - this.rendered = true; - }; - }; - - - RSTCell.prototype.render_rst = function () { - if (this.rendered === false) { - var text = this.get_source(); - if (text === "") {text = this.placeholder;}; - var settings = { - processData : false, - cache : false, - type : "POST", - data : text, - headers : {'Content-Type': 'application/x-rst'}, - success : $.proxy(this.handle_rendered,this) - }; - $.ajax("/rstservice/render", settings); - }; - }; - - - RSTCell.prototype.handle_rendered = function (data, status, xhr) { - this.set_rendered(data); - MathJax.Hub.Queue(["Typeset",MathJax.Hub]); - this.element.find('div.rst_cell_input').hide(); - this.element.find("div.rst_cell_render").show(); - this.rendered = true; - }; - - - RSTCell.prototype.config_mathjax = function () { - var rst_cell = this.element; - var that = this; - rst_cell.click(function () { - that.edit(); - }).focusout(function () { - that.render(); - }); - - rst_cell.trigger("focusout"); - }; - - - RSTCell.prototype.get_source = function () { - return this.code_mirror.getValue(); - }; - - - RSTCell.prototype.set_source = function (text) { - this.code_mirror.setValue(text); - this.code_mirror.refresh(); - }; - - - RSTCell.prototype.set_rendered = function (text) { - this.element.find('div.rst_cell_render').html(text); - }; - - - RSTCell.prototype.get_rendered = function () { - return this.element.find('div.rst_cell_render').html(); - }; - - - RSTCell.prototype.at_top = function () { - if (this.rendered) { - return true; - } else { - return false; - } - }; - - - RSTCell.prototype.at_bottom = function () { - if (this.rendered) { - return true; - } else { - return false; - } - }; - - - RSTCell.prototype.fromJSON = function (data) { - if (data.cell_type === 'rst') { - if (data.source !== undefined) { - this.set_source(data.source); - this.set_rendered(data.rendered); - }; - }; - } - - - RSTCell.prototype.toJSON = function () { - var data = {} - data.cell_type = 'rst'; - data.source = this.get_source(); - data.rendered = this.get_rendered(); - return data; - }; - - IPython.RSTCell = RSTCell; - - return IPython; - -}(IPython)); - diff --git a/IPython/frontend/html/notebook/static/js/htmlcell.js b/IPython/frontend/html/notebook/static/js/textcell.js similarity index 58% rename from IPython/frontend/html/notebook/static/js/htmlcell.js rename to IPython/frontend/html/notebook/static/js/textcell.js index e084d43..9f670da 100644 --- a/IPython/frontend/html/notebook/static/js/htmlcell.js +++ b/IPython/frontend/html/notebook/static/js/textcell.js @@ -1,41 +1,44 @@ //============================================================================ -// HTMLCell +// TextCell //============================================================================ var IPython = (function (IPython) { - var HTMLCell = function (notebook) { + // TextCell base class + + var TextCell = function (notebook) { + this.code_mirror_mode = this.code_mirror_mode || 'htmlmixed'; + this.placeholder = this.placeholder || ''; IPython.Cell.apply(this, arguments); - this.placeholder = "Type HTML and LaTeX: $\\alpha^2$" this.rendered = false; + this.cell_type = this.cell_type || 'text'; }; - HTMLCell.prototype = new IPython.Cell(); - + TextCell.prototype = new IPython.Cell(); - HTMLCell.prototype.create_element = function () { - var cell = $("
").addClass('cell html_cell border-box-sizing'); - var input_area = $('
').addClass('html_cell_input'); + TextCell.prototype.create_element = function () { + var cell = $("
").addClass('cell text_cell border-box-sizing'); + var input_area = $('
').addClass('text_cell_input'); this.code_mirror = CodeMirror(input_area.get(0), { indentUnit : 4, enterMode : 'flat', tabMode: 'shift', - mode: 'htmlmixed', + mode: this.code_mirror_mode, theme: 'default', value: this.placeholder }); // The tabindex=-1 makes this div focusable. - var render_area = $('
').addClass('html_cell_render'). + var render_area = $('
').addClass('text_cell_render'). addClass('rendered_html').attr('tabindex','-1'); cell.append(input_area).append(render_area); this.element = cell; }; - HTMLCell.prototype.bind_events = function () { + TextCell.prototype.bind_events = function () { IPython.Cell.prototype.bind_events.apply(this); var that = this; this.element.keydown(function (event) { @@ -49,19 +52,19 @@ var IPython = (function (IPython) { }; - HTMLCell.prototype.select = function () { + TextCell.prototype.select = function () { IPython.Cell.prototype.select.apply(this); - var output = this.element.find("div.html_cell_render"); + var output = this.element.find("div.text_cell_render"); output.trigger('focus'); }; - HTMLCell.prototype.edit = function () { + TextCell.prototype.edit = function () { if (this.rendered === true) { - var html_cell = this.element; - var output = html_cell.find("div.html_cell_render"); + var text_cell = this.element; + var output = text_cell.find("div.text_cell_render"); output.hide(); - html_cell.find('div.html_cell_input').show(); + text_cell.find('div.text_cell_input').show(); this.code_mirror.focus(); this.code_mirror.refresh(); this.rendered = false; @@ -69,51 +72,45 @@ var IPython = (function (IPython) { }; - HTMLCell.prototype.render = function () { - if (this.rendered === false) { - 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_rendered(text); - MathJax.Hub.Queue(["Typeset",MathJax.Hub]); - html_cell.find('div.html_cell_input').hide(); - output.show(); - this.rendered = true; - }; - }; + // Subclasses must define render. + TextCell.prototype.render = function () {}; - HTMLCell.prototype.config_mathjax = function () { - var html_cell = this.element; + TextCell.prototype.config_mathjax = function () { + var text_cell = this.element; var that = this; - html_cell.click(function () { + text_cell.click(function () { that.edit(); }).focusout(function () { that.render(); }); - html_cell.trigger("focusout"); + text_cell.trigger("focusout"); }; - HTMLCell.prototype.get_source = function() { + TextCell.prototype.get_source = function() { return this.code_mirror.getValue(); }; - HTMLCell.prototype.set_source = function(text) { + TextCell.prototype.set_source = function(text) { this.code_mirror.setValue(text); this.code_mirror.refresh(); }; - HTMLCell.prototype.set_rendered = function(text) { - this.element.find('div.html_cell_render').html(text); + TextCell.prototype.get_rendered = function(text) { + return this.element.find('div.text_cell_render').html(); + }; + + + TextCell.prototype.set_rendered = function(text) { + this.element.find('div.text_cell_render').html(text); }; - HTMLCell.prototype.at_top = function () { + TextCell.prototype.at_top = function () { if (this.rendered) { return true; } else { @@ -122,7 +119,7 @@ var IPython = (function (IPython) { }; - HTMLCell.prototype.at_bottom = function () { + TextCell.prototype.at_bottom = function () { if (this.rendered) { return true; } else { @@ -131,8 +128,8 @@ var IPython = (function (IPython) { }; - HTMLCell.prototype.fromJSON = function (data) { - if (data.cell_type === 'html') { + TextCell.prototype.fromJSON = function (data) { + if (data.cell_type === this.cell_type) { if (data.source !== undefined) { this.set_source(data.source); this.set_rendered(data.source); @@ -141,14 +138,110 @@ var IPython = (function (IPython) { } - HTMLCell.prototype.toJSON = function () { + TextCell.prototype.toJSON = function () { var data = {} - data.cell_type = 'html'; + data.cell_type = this.cell_type; data.source = this.get_source(); + data.rendered = this.get_rendered(); return data; }; + + // HTMLCell + + var HTMLCell = function (notebook) { + this.placeholder = "Type HTML and LaTeX: $\\alpha^2$"; + IPython.TextCell.apply(this, arguments); + this.cell_type = 'html'; + }; + + + HTMLCell.prototype = new TextCell(); + + + HTMLCell.prototype.render = function () { + if (this.rendered === false) { + var text = this.get_source(); + if (text === "") {text = this.placeholder;}; + this.set_rendered(text); + MathJax.Hub.Queue(["Typeset",MathJax.Hub]); + this.element.find('div.text_cell_input').hide(); + this.element.find("div.text_cell_render").show(); + this.rendered = true; + }; + }; + + + // MarkdownCell + + var MarkdownCell = function (notebook) { + this.placeholder = "Type *Markdown* and LaTeX: $\\alpha^2$"; + IPython.TextCell.apply(this, arguments); + this.cell_type = 'markdown'; + }; + + + MarkdownCell.prototype = new TextCell(); + + + MarkdownCell.prototype.render = function () { + if (this.rendered === false) { + var text = this.get_source(); + if (text === "") {text = this.placeholder;}; + var html = IPython.markdown_converter.makeHtml(text); + this.set_rendered(html); + MathJax.Hub.Queue(["Typeset",MathJax.Hub]); + this.element.find('div.text_cell_input').hide(); + this.element.find("div.text_cell_render").show(); + this.rendered = true; + }; + }; + + + // RSTCell + + var RSTCell = function (notebook) { + this.placeholder = "Type *ReStructured Text* and LaTeX: $\\alpha^2$"; + IPython.TextCell.apply(this, arguments); + this.cell_type = 'rst'; + }; + + + RSTCell.prototype = new TextCell(); + + + RSTCell.prototype.render = function () { + if (this.rendered === false) { + var text = this.get_source(); + if (text === "") {text = this.placeholder;}; + var settings = { + processData : false, + cache : false, + type : "POST", + data : text, + headers : {'Content-Type': 'application/x-rst'}, + success : $.proxy(this.handle_render,this) + }; + $.ajax("/rstservice/render", settings); + this.element.find('div.text_cell_input').hide(); + this.element.find("div.text_cell_render").show(); + this.set_rendered("Rendering..."); + }; + }; + + + RSTCell.prototype.handle_render = function (data, status, xhr) { + this.set_rendered(data); + MathJax.Hub.Queue(["Typeset",MathJax.Hub]); + this.rendered = true; + }; + + + IPython.TextCell = TextCell; IPython.HTMLCell = HTMLCell; + IPython.MarkdownCell = MarkdownCell; + IPython.RSTCell = RSTCell; + return IPython; diff --git a/IPython/frontend/html/notebook/templates/notebook.html b/IPython/frontend/html/notebook/templates/notebook.html index 5b463da..fb23792 100644 --- a/IPython/frontend/html/notebook/templates/notebook.html +++ b/IPython/frontend/html/notebook/templates/notebook.html @@ -28,6 +28,8 @@ + + @@ -82,6 +84,14 @@ Actions
+ + + + + + +
+
@@ -96,14 +106,6 @@ Move
- - - - - - Format -
-
@@ -173,12 +175,22 @@ + + + + + + + + + + + - - + @@ -188,14 +200,7 @@ - - - - - - - - +