Removed HTMLCell from UI and added better placeholder logic.

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

@@ -1,251 +1,251 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 2008-2011  The IPython Development Team
 //
 //  Distributed under the terms of the BSD License.  The full license is in
 //  the file COPYING, distributed as part of this software.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // PanelSection
 //============================================================================
 
 var IPython = (function (IPython) {
 
     var utils = IPython.utils;
 
     // Base PanelSection class
 
     var PanelSection = function (selector) {
         this.selector = selector;
         if (this.selector !== undefined) {
             this.element = $(selector);
             this.header = this.element.find('h3.section_header');
             this.content = this.element.find('div.section_content');
             this.style();
             this.bind_events();
         }
         this.expanded = true;
     };
 
 
     PanelSection.prototype.style = function () {
         this.header.addClass('ui-widget ui-state-default');
         this.content.addClass('ui-widget section_content');
     };
 
 
     PanelSection.prototype.bind_events = function () {
         var that = this;
         this.header.click(function () {
             that.toggle();
         });
         this.header.hover(function () {
             that.header.toggleClass('ui-state-hover');
         });
     };
 
 
     PanelSection.prototype.expand = function () {
         if (!this.expanded) {
             this.content.slideDown('fast');
             this.expanded = true;
         };
     };
 
 
     PanelSection.prototype.collapse = function () {
         if (this.expanded) {
             this.content.slideUp('fast');
             this.expanded = false;
         };
     };
 
 
     PanelSection.prototype.toggle = function () {
         if (this.expanded === true) {
             this.collapse();
         } else {
             this.expand();
         };
     };
 
 
     PanelSection.prototype.create_children = function () {};
 
 
     // NotebookSection
 
     var NotebookSection = function () {
         PanelSection.apply(this, arguments);
     };
 
 
     NotebookSection.prototype = new PanelSection();
 
 
     NotebookSection.prototype.style = function () {
         PanelSection.prototype.style.apply(this);
         this.content.addClass('ui-helper-clearfix');
         this.content.find('div.section_row').addClass('ui-helper-clearfix');
         this.content.find('#new_open').buttonset();
         this.content.find('#download_notebook').button();
         this.content.find('#upload_notebook').button();
         this.content.find('#download_format').addClass('ui-widget ui-widget-content');
         this.content.find('#download_format option').addClass('ui-widget ui-widget-content');
     };
 
 
     NotebookSection.prototype.bind_events = function () {
         PanelSection.prototype.bind_events.apply(this);
         var that = this;
         this.content.find('#new_notebook').click(function () {
             window.open('/new');
         });
         this.content.find('#open_notebook').click(function () {
             window.open('/');
         });
         this.content.find('#download_notebook').click(function () {
             var format = that.content.find('#download_format').val();
             var notebook_id = IPython.save_widget.get_notebook_id();
             var url = '/notebooks/' + notebook_id + '?format=' + format;
             window.open(url,'_newtab');
         });
     };
 
     // CellSection
 
     var CellSection = function () {
         PanelSection.apply(this, arguments);
     };
 
 
     CellSection.prototype = new PanelSection();
 
 
     CellSection.prototype.style = function () {
         PanelSection.prototype.style.apply(this);
         this.content.addClass('ui-helper-clearfix');
         this.content.find('div.section_row').addClass('ui-helper-clearfix');
         this.content.find('#delete_cell').button();
         this.content.find('#insert').buttonset();
         this.content.find('#move').buttonset();
         this.content.find('#cell_type').buttonset();
         this.content.find('#toggle_output').buttonset();
         this.content.find('#run_cells').buttonset();
     };
 
 
     CellSection.prototype.bind_events = function () {
         PanelSection.prototype.bind_events.apply(this);
         this.content.find('#collapse_cell').click(function () {
             IPython.notebook.collapse();
         });
         this.content.find('#expand_cell').click(function () {
             IPython.notebook.expand();
         });
         this.content.find('#clear_all_output').click(function () {
             IPython.notebook.clear_all_output();
         });
         this.content.find('#delete_cell').click(function () {
             IPython.notebook.delete_cell();
         });
         this.content.find('#insert_cell_above').click(function () {
             IPython.notebook.insert_code_cell_before();
         });
         this.content.find('#insert_cell_below').click(function () {
             IPython.notebook.insert_code_cell_after();
         });
         this.content.find('#move_cell_up').click(function () {
             IPython.notebook.move_cell_up();
         });
         this.content.find('#move_cell_down').click(function () {
             IPython.notebook.move_cell_down();
         });
         this.content.find('#to_code').click(function () {
             IPython.notebook.to_code();
         });
-        this.content.find('#to_html').click(function () {
-            IPython.notebook.to_html();
-        });
+//        this.content.find('#to_html').click(function () {
+//            IPython.notebook.to_html();
+//        });
         this.content.find('#to_markdown').click(function () {
             IPython.notebook.to_markdown();
         });
         this.content.find('#run_selected_cell').click(function () {
             IPython.notebook.execute_selected_cell();
         });
         this.content.find('#run_all_cells').click(function () {
             IPython.notebook.execute_all_cells();
         });
         this.content.find('#autoindent').change(function () {
             var state = $('#autoindent').prop('checked');
             IPython.notebook.set_autoindent(state);
         });
     };
 
 
     // KernelSection
 
     var KernelSection = function () {
         PanelSection.apply(this, arguments);
     };
 
 
     KernelSection.prototype = new PanelSection();
 
 
     KernelSection.prototype.style = function () {
         PanelSection.prototype.style.apply(this);
         this.content.addClass('ui-helper-clearfix');
         this.content.find('div.section_row').addClass('ui-helper-clearfix');
         this.content.find('#int_restart').buttonset();
     };
 
 
     KernelSection.prototype.bind_events = function () {
         PanelSection.prototype.bind_events.apply(this);
         this.content.find('#restart_kernel').click(function () {
             IPython.notebook.restart_kernel();
         });
         this.content.find('#int_kernel').click(function () {
             IPython.notebook.kernel.interrupt();
         });
     };
 
 
     // HelpSection
 
     var HelpSection = function () {
         PanelSection.apply(this, arguments);
     };
 
 
     HelpSection.prototype = new PanelSection();
 
 
     HelpSection.prototype.style = function () {
         PanelSection.prototype.style.apply(this);
         PanelSection.prototype.style.apply(this);
         this.content.addClass('ui-helper-clearfix');
         this.content.find('div.section_row').addClass('ui-helper-clearfix');
         this.content.find('#help_buttons0').buttonset();
         this.content.find('#help_buttons1').buttonset();
     };
 
 
     HelpSection.prototype.bind_events = function () {
         PanelSection.prototype.bind_events.apply(this);
     };
 
 
     // Set module variables
 
     IPython.PanelSection = PanelSection;
     IPython.NotebookSection = NotebookSection;
     IPython.CellSection = CellSection;
     IPython.KernelSection = KernelSection;
     IPython.HelpSection = HelpSection;
 
     return IPython;
 
 }(IPython));
 

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

@@ -1,254 +1,257 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 2008-2011  The IPython Development Team
 //
 //  Distributed under the terms of the BSD License.  The full license is in
 //  the file COPYING, distributed as part of this software.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // TextCell
 //============================================================================
 
 var IPython = (function (IPython) {
 
     // 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.rendered = false;
         this.cell_type = this.cell_type || 'text';
     };
 
 
     TextCell.prototype = new IPython.Cell();
 
 
     TextCell.prototype.create_element = function () {
         var cell = $("<div>").addClass('cell text_cell border-box-sizing');
         var input_area = $('<div/>').addClass('text_cell_input');
         this.code_mirror = CodeMirror(input_area.get(0), {
             indentUnit : 4,
             mode: this.code_mirror_mode,
             theme: 'default',
             value: this.placeholder
         });
         // The tabindex=-1 makes this div focusable.
         var render_area = $('<div/>').addClass('text_cell_render').
             addClass('rendered_html').attr('tabindex','-1');
         cell.append(input_area).append(render_area);
         this.element = cell;
     };
 
 
     TextCell.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();
                 };
             };
         });
     };
 
 
     TextCell.prototype.select = function () {
         IPython.Cell.prototype.select.apply(this);
         var output = this.element.find("div.text_cell_render");
         output.trigger('focus');
     };
 
 
     TextCell.prototype.edit = function () {
         if (this.rendered === true) {
             var text_cell = this.element;
             var output = text_cell.find("div.text_cell_render");  
             output.hide();
             text_cell.find('div.text_cell_input').show();
             this.code_mirror.focus();
             this.code_mirror.refresh();
             this.rendered = false;
+            if (this.get_source() === this.placeholder) {
+                this.set_source('');
+            };
         };
     };
 
 
     // Subclasses must define render.
     TextCell.prototype.render = function () {};
 
 
     TextCell.prototype.config_mathjax = function () {
         var text_cell = this.element;
         var that = this;
         text_cell.click(function () {
             that.edit();
         }).focusout(function () {
             that.render();
         });
         
         text_cell.trigger("focusout");
     };
 
 
     TextCell.prototype.get_source = function() {
         return this.code_mirror.getValue();
     };
 
 
     TextCell.prototype.set_source = function(text) {
         this.code_mirror.setValue(text);
         this.code_mirror.refresh();
     };
 
 
     TextCell.prototype.get_rendered = function() {
         return this.element.find('div.text_cell_render').html();
     };
 
 
     TextCell.prototype.set_rendered = function(text) {
         this.element.find('div.text_cell_render').html(text);
     };
 
 
     TextCell.prototype.at_top = function () {
         if (this.rendered) {
             return true;
         } else {
             return false;
         }
     };
 
 
     TextCell.prototype.at_bottom = function () {
         if (this.rendered) {
             return true;
         } else {
             return false;
         }
     };
 
 
     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.rendered || '');
                 this.rendered = false;
                 this.render();
             };
         };
     };
 
 
     TextCell.prototype.toJSON = function () {
         var data = {}
         data.cell_type = this.cell_type;
         data.source = this.get_source();
         return data;
     };
 
 
     // HTMLCell
 
     var HTMLCell = function (notebook) {
         this.placeholder = "Type <strong>HTML</strong> 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;
 
 }(IPython));
 

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

@@ -1,224 +1,224 b''
 <!DOCTYPE HTML>
 <html>
 
 <head>
     <meta charset="utf-8">
 
     <title>IPython Notebook</title>
 
     <link rel="stylesheet" href="static/jquery/css/themes/aristo/jquery-wijmo.css" type="text/css" />
 <!--     <link rel="stylesheet" href="static/jquery/css/themes/rocket/jquery-wijmo.css" type="text/css" /> -->
 <!--    <link rel="stylesheet" href="static/jquery/css/themes/smoothness/jquery-ui-1.8.14.custom.css" type="text/css" />-->
 
     <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML" charset="utf-8"></script>
     <!-- <script type='text/javascript' src='static/mathjax/MathJax.js?config=TeX-AMS_HTML' charset='utf-8'></script> -->
     <script type="text/javascript">
     if (typeof MathJax == 'undefined') {
         console.log("Trying to load local copy of MathJax");
         document.write(unescape("%3Cscript type='text/javascript' src='static/mathjax/MathJax.js%3Fconfig=TeX-AMS_HTML' charset='utf-8'%3E%3C/script%3E"));
     }
     </script>
 
     <link rel="stylesheet" href="static/codemirror-2.12/lib/codemirror.css">
     <link rel="stylesheet" href="static/codemirror-2.12/mode/rst/rst.css">
     <link rel="stylesheet" href="static/codemirror-2.12/theme/ipython.css">
     <link rel="stylesheet" href="static/codemirror-2.12/theme/default.css">
 
     <link rel="stylesheet" href="static/css/boilerplate.css" type="text/css" />
     <link rel="stylesheet" href="static/css/layout.css" type="text/css" />
     <link rel="stylesheet" href="static/css/base.css" type="text/css" />
     <link rel="stylesheet" href="static/css/notebook.css" type="text/css" />
     <link rel="stylesheet" href="static/css/renderedhtml.css" type="text/css" />
 
 
 </head>
 
 <body>
 
 <div id="header">
     <span id="ipython_notebook"><h1>IPython Notebook</h1></span>
     <span id="save_widget">
         <input type="text" id="notebook_name" size="20"></textarea>
         <span id="notebook_id" style="display:none">{{notebook_id}}</span>
         <button id="save_notebook">Save</button>
     </span>
     <span id="kernel_status">Idle</span>
 </div>
 
 <div id="main_app">
 
     <div id="left_panel">
 
         <div id="notebook_section">
             <h3 class="section_header">Notebook</h3>
             <div class="section_content">
                 <div class="section_row">
                     <span id="new_open" class="section_row_buttons">
                         <button id="new_notebook">New</button>
                         <button id="open_notebook">Open</button>
                     </span>
                     <span class="section_row_header">Actions</span>
                 </div>
                 <div class="section_row">
                     <span>
                         <select id="download_format">
                             <option value="xml">xml</option>
                             <option value="json">json</option>
                             <option value="py">py</option>
                         </select>
                     </span>
                     <span class="section_row_buttons">
                         <button id="download_notebook">Export</button>
                     </span>
                 </div>
             </div>
         </div>
 
         <div id="cell_section">
             <h3 class="section_header">Cell</h3>
             <div class="section_content">
                 <div class="section_row">
                     <span class="section_row_buttons">
                         <button id="delete_cell">Delete</button>
                     </span>
                     <span class="section_row_header">Actions</span>
                 </div>
                 <div class="section_row">
                     <span id="cell_type" class="section_row_buttons">
                         <button id="to_code">Code</button>
-                        <button id="to_html">HTML</button>
+<!--                        <button id="to_html">HTML</button>-->
                         <button id="to_markdown">Markdown</button>
                     </span>
                      <span class="button_label">Format</span> 
                 </div>
                 <div class="section_row">
                     <span id="toggle_output" class="section_row_buttons">
                         <button id="collapse_cell">Collapse</button>
                         <button id="expand_cell">Expand</button>
                         <button id="clear_all_output">ClearAll</button>
                     </span>
                     <span class="button_label">Output</span>
                 </div>
                 <div class="section_row">
                     <span id="insert" class="section_row_buttons">
                         <button id="insert_cell_above">Above</button>
                         <button id="insert_cell_below">Below</button>
                     </span>
                     <span class="button_label">Insert</span>
                 </div>
                 <div class="section_row">
                     <span id="move" class="section_row_buttons">
                         <button id="move_cell_up">Up</button>
                         <button id="move_cell_down">Down</button>
                     </span>
                     <span class="button_label">Move</span>
                 </div>
                 <div class="section_row">
                     <span id="run_cells" class="section_row_buttons">
                         <button id="run_selected_cell">Selected</button>
                         <button id="run_all_cells">All</button>
                     </span>
                     <span class="button_label">Run</span>
                 </div>
                 <div class="section_row">
                     <span id="autoindent_span">
                         <input type="checkbox" id="autoindent" checked="true"></input>
                     </span>
                     <span class="checkbox_label">Autoindent:</span>
                 </div>
             </div>
         </div>
 
         <div id="kernel_section">
             <h3 class="section_header">Kernel</h3>
             <div class="section_content">
                 <div class="section_row">
                     <span id="int_restart" class="section_row_buttons">
                         <button id="int_kernel">Interrupt</button>
                         <button id="restart_kernel">Restart</button>
                     </span>
                     <span class="section_row_header">Actions</span>
                 </div>
                 <div class="section_row">
                     <span id="kernel_persist">
                         <input type="checkbox" id="kill_kernel"></input>
                     </span>
                     <span class="checkbox_label">Kill kernel upon exit:</span>
                 </div>
             </div>
         </div>
 
         <div id="help_section">
             <h3 class="section_header">Help</h3>
             <div class="section_content">
                 <div class="section_row">
                     <span id="help_buttons0" class="section_row_buttons">
                         <button id="python_help"><a href="http://docs.python.org" target="_blank">Python</a></button>
                         <button id="ipython_help"><a href="http://ipython.org/documentation.html" target="_blank">IPython</a></button>
                         <button id="numpy_help"><a href="http://docs.scipy.org/doc/numpy/reference/" target="_blank">NumPy</a></button>
                     </span>
                     <span class="section_row_header">Links</span>
                 </div>
                 <div class="section_row">
                     <span id="help_buttons1" class="section_row_buttons">
                         <button id="matplotlib_help"><a href="http://matplotlib.sourceforge.net/" target="_blank">MPL</a></button>
                         <button id="scipy_help"><a href="http://docs.scipy.org/doc/scipy/reference/" target="_blank">SciPy</a></button>
                         <button id="sympy_help"><a href="http://docs.sympy.org/dev/index.html" target="_blank">SymPy</a></button>
                     </span>
                 </div>
                 <div class="section_row">
                     <span class="help_string">run selected cell</span>
                     <span class="help_string_label">Shift-Enter |</span>
                 </div>
                 <div class="section_row">
                     <span class="help_string">run in terminal mode</span>
                     <span class="help_string_label">Ctrl-Enter  |</span>
                 </div>
             </div>
         </div>
 
     </div>
     <div id="left_panel_splitter"></div>
     <div id="notebook_panel">
         <div id="notebook"></div>
         <div id="pager_splitter"></div>
         <div id="pager"></div>
     </div>
 
 </div>
 
 <script src="static/jquery/js/jquery-1.6.2.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/jquery/js/jquery-ui-1.8.14.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/codemirror-2.12/lib/codemirror.js" charset="utf-8"></script>
 <script src="static/codemirror-2.12/mode/python/python.js" charset="utf-8"></script>
 <script src="static/codemirror-2.12/mode/htmlmixed/htmlmixed.js" charset="utf-8"></script>
 <script src="static/codemirror-2.12/mode/xml/xml.js" charset="utf-8"></script>
 <script src="static/codemirror-2.12/mode/javascript/javascript.js" charset="utf-8"></script>
 <script src="static/codemirror-2.12/mode/css/css.js" charset="utf-8"></script>
 <script src="static/codemirror-2.12/mode/rst/rst.js" charset="utf-8"></script>
 
 <script src="static/pagedown/Markdown.Converter.js" charset="utf-8"></script>
 
 <script src="static/js/namespace.js" type="text/javascript" charset="utf-8"></script>
 <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/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>
 <script src="static/js/savewidget.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/pager.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/panelsection.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/leftpanel.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/notebook.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/notebook_main.js" type="text/javascript" charset="utf-8"></script>
 
 
 </body>
 
 </html>