add doc to base Cell

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

@@ -1,240 +1,252
 //----------------------------------------------------------------------------
 //  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.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // Cell
 //============================================================================
 /**
  * @module Cell
  * An extendable module that provide base functionnality to create cell for notebook.
  */
 
 var IPython = (function (IPython) {
 
     var utils = IPython.utils;
 
     /**
-     * The Base `Cell` class from which to inherit 
+     * The Base `Cell` class from which to inherit
      * @class Cell
      */
 
     /*
      * @constructor
      */
     var Cell = function () {
         this.placeholder = this.placeholder || '';
         this.read_only = false;
         this.selected = false;
         this.element = null;
         this.metadata = {};
         // load this from metadata later ?
         this.user_highlight == 'auto';
         this.create_element();
         if (this.element !== null) {
             this.element.data("cell", this);
             this.bind_events();
         }
         this.cell_id = utils.uuid();
     };
 
 
     /**
      * Empty. Subclasses must implement create_element.
-     * This should contain all the code to create the DOM element in notebook 
+     * This should contain all the code to create the DOM element in notebook
      * and will be called by Base Class constructor.
      * @method create_element
      */
     Cell.prototype.create_element = function () {};
 
 
     /**
-     * Empty. Subclasses must implement create_element.
-     * This should contain all the code to create the DOM element in notebook 
-     * and will be called by Base Class constructor.
+     * Subclasses can implement override bind_events.
+     * Be carefull to call the parent method when overwriting as it fires event.
+     * this will be triggerd after create_element in constructor.
      * @method bind_events
      */
     Cell.prototype.bind_events = function () {
         var that = this;
         // We trigger events so that Cell doesn't have to depend on Notebook.
         that.element.click(function (event) {
             if (that.selected === false) {
                 $([IPython.events]).trigger('select.Cell', {'cell':that});
             }
         });
         that.element.focusin(function (event) {
             if (that.selected === false) {
                 $([IPython.events]).trigger('select.Cell', {'cell':that});
             }
         });
     };
 
+    /**
+     * Triger typsetting of math by mathjax on current cell element
+     * @method typeset
+     */
     Cell.prototype.typeset = function () {
         if (window.MathJax){
             var cell_math = this.element.get(0);
             MathJax.Hub.Queue(["Typeset",MathJax.Hub,cell_math]);
         }
     };
 
+    /**
+     * should be triggerd when cell is selected
+     * @method select
+     */
     Cell.prototype.select = function () {
         this.element.addClass('ui-widget-content ui-corner-all');
         this.selected = true;
     };
 
 
+    /**
+     * should be triggerd when cell is unselected
+     * @method unselect
+     */
     Cell.prototype.unselect = function () {
         this.element.removeClass('ui-widget-content ui-corner-all');
         this.selected = false;
     };
 
 
     Cell.prototype.get_text = function () {
     };
 
 
     Cell.prototype.set_text = function (text) {
     };
 
 
     Cell.prototype.refresh = function () {
         this.code_mirror.refresh();
     };
 
 
     Cell.prototype.edit = function () {
     };
 
 
     Cell.prototype.render = function () {
     };
 
 
     Cell.prototype.toJSON = function () {
         var data = {};
         data.metadata = this.metadata;
         return data;
     };
 
 
     Cell.prototype.fromJSON = function (data) {
         if (data.metadata !== undefined) {
             this.metadata = data.metadata;
         }
     };
 
 
     Cell.prototype.is_splittable = function () {
         return true;
     };
 
 
     Cell.prototype.get_pre_cursor = function () {
         var cursor = this.code_mirror.getCursor();
         var text = this.code_mirror.getRange({line:0,ch:0}, cursor);
         text = text.replace(/^\n+/, '').replace(/\n+$/, '');
         return text;
     }
 
 
     Cell.prototype.get_post_cursor = function () {
         var cursor = this.code_mirror.getCursor();
         var last_line_num = this.code_mirror.lineCount()-1;
         var last_line_len = this.code_mirror.getLine(last_line_num).length;
         var end = {line:last_line_num, ch:last_line_len}
         var text = this.code_mirror.getRange(cursor, end);
         text = text.replace(/^\n+/, '').replace(/\n+$/, '');
         return text;
     };
 
 
     Cell.prototype.grow = function(element) {
         // Grow the cell by hand. This is used upon reloading from JSON, when the
         // autogrow handler is not called.
         var dom = element.get(0);
         var lines_count = 0;
         // modified split rule from
         // http://stackoverflow.com/questions/2035910/how-to-get-the-number-of-lines-in-a-textarea/2036424#2036424
         var lines = dom.value.split(/\r|\r\n|\n/);
         lines_count = lines.length;
         if (lines_count >= 1) {
             dom.rows = lines_count;
         } else {
             dom.rows = 1;
         }
     };
 
 
     Cell.prototype.toggle_line_numbers = function () {
         if (this.code_mirror.getOption('lineNumbers') == false) {
             this.code_mirror.setOption('lineNumbers', true);
         } else {
             this.code_mirror.setOption('lineNumbers', false);
         }
         this.code_mirror.refresh();
     };
 
     Cell.prototype.force_highlight = function(mode) {
         this.user_highlight = mode;
         this.auto_highlight();
     };
 
     Cell.prototype._auto_highlight = function (modes) {
         //Here we handle manually selected modes
         if( this.user_highlight != undefined &&  this.user_highlight != 'auto' )
         {
             var mode = this.user_highlight;
             CodeMirror.autoLoadMode(this.code_mirror, mode);
             this.code_mirror.setOption('mode', mode);
             return;
         }
         var first_line = this.code_mirror.getLine(0);
         // loop on every pairs
         for( var mode in modes) {
             var regs = modes[mode]['reg'];
             // only one key every time but regexp can't be keys...
             for(var reg in regs ) {
                 // here we handle non magic_modes
                 if(first_line.match(regs[reg]) != null) {
                     if (mode.search('magic_') != 0) {
                         this.code_mirror.setOption('mode',mode);
                         CodeMirror.autoLoadMode(this.code_mirror, mode);
                         return;
                     }
                     var open = modes[mode]['open']|| "%%";
                     var close = modes[mode]['close']|| "%%end";
                     var mmode = mode;
                     mode = mmode.substr(6);
                     CodeMirror.autoLoadMode(this.code_mirror, mode);
                     // create on the fly a mode that swhitch between
                     // plain/text and smth else otherwise `%%` is
                     // source of some highlight issues.
                     // we use patchedGetMode to circumvent a bug in CM
                     CodeMirror.defineMode(mmode , function(config) {
                         return CodeMirror.multiplexingMode(
                         CodeMirror.patchedGetMode(config, 'text/plain'),
                             // always set someting on close
                             {open: open, close: close,
                              mode: CodeMirror.patchedGetMode(config, mode),
                              delimStyle: "delimit"
                             }
                         );
                     });
                     this.code_mirror.setOption('mode', mmode);
                     return;
                 }
             }
         }
         // fallback on default (python)
         var default_mode = this.default_mode || 'text/plain';
         this.code_mirror.setOption('mode', default_mode);
     };
 
     IPython.Cell = Cell;
 
     return IPython;
 
 }(IPython));
 

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

@@ -1,528 +1,529
 //----------------------------------------------------------------------------
 //  Copyright (C) 2008-2012  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
 //============================================================================
 
 /**
     A module that allow to create different type of Text Cell
  */
 var IPython = (function (IPython) {
 
     // TextCell base class
     var key = IPython.utils.keycodes;
 
     /**
      * Construct a new TextCell, codemirror mode is by default 'htmlmixed', and cell type is 'text'
      * cell start as not redered.
      *
      * @class TextCell
      * @constructor TextCell
+     * @extend Cell
      */
     var TextCell = function () {
         this.code_mirror_mode = this.code_mirror_mode || 'htmlmixed';
         IPython.Cell.apply(this, arguments);
         this.rendered = false;
         this.cell_type = this.cell_type || 'text';
     };
 
     TextCell.prototype = new IPython.Cell();
 
     /**
      * Create the DOM element of the TextCell
      * @method create_element
      * @private
      */
     TextCell.prototype.create_element = function () {
         var cell = $("<div>").addClass('cell text_cell border-box-sizing');
         cell.attr('tabindex','2');
         var input_area = $('<div/>').addClass('text_cell_input border-box-sizing');
         this.code_mirror = CodeMirror(input_area.get(0), {
             indentUnit : 4,
             mode: this.code_mirror_mode,
             theme: 'default',
             value: this.placeholder,
             readOnly: this.read_only,
             lineWrapping : true,
             extraKeys: {"Tab": "indentMore","Shift-Tab" : "indentLess"},
             onKeyEvent: $.proxy(this.handle_codemirror_keyevent,this)
         });
         // The tabindex=-1 makes this div focusable.
         var render_area = $('<div/>').addClass('text_cell_render border-box-sizing').
             addClass('rendered_html').attr('tabindex','-1');
         cell.append(input_area).append(render_area);
         this.element = cell;
     };
 
 
     /**
      * Bind the DOM evet to cell actions
      * Need to be called after TextCell.create_element
      * @private
      * @method bind_event
      */
     TextCell.prototype.bind_events = function () {
         IPython.Cell.prototype.bind_events.apply(this);
         var that = this;
         this.element.keydown(function (event) {
             if (event.which === 13 && !event.shiftKey) {
                 if (that.rendered) {
                     that.edit();
                     return false;
                 };
             };
         });
         this.element.dblclick(function () {
             that.edit();
         });
     };
 
     /**
      * This method gets called in CodeMirror's onKeyDown/onKeyPress
      * handlers and is used to provide custom key handling.
      *
      * Subclass should override this method to have custom handeling
      *
      * @method handle_codemirror_keyevent
      * @param {CodeMirror} editor - The codemirror instance bound to the cell
      * @param {event} event -
      * @return {Boolean} `true` if CodeMirror should ignore the event, `false` Otherwise
      */
     TextCell.prototype.handle_codemirror_keyevent = function (editor, event) {
 
         if (event.keyCode === 13 && (event.shiftKey || event.ctrlKey)) {
             // Always ignore shift-enter in CodeMirror as we handle it.
             return true;
         }
         return false;
     };
 
     /**
      * Select the current cell and trigger 'focus'
      * @method select
      */
     TextCell.prototype.select = function () {
         IPython.Cell.prototype.select.apply(this);
         var output = this.element.find("div.text_cell_render");
         output.trigger('focus');
     };
 
     /**
      * unselect the current cell and `render` it
      * @method unselect
      */
     TextCell.prototype.unselect = function() {
         // render on selection of another cell
         this.render();
         IPython.Cell.prototype.unselect.apply(this);
     };
 
     /**
      *
      * put the current cell in edition mode
      * @method edit
      */
     TextCell.prototype.edit = function () {
         if ( this.read_only ) return;
         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.refresh();
             this.code_mirror.focus();
             // We used to need an additional refresh() after the focus, but
             // it appears that this has been fixed in CM. This bug would show
             // up on FF when a newly loaded markdown cell was edited.
             this.rendered = false;
             if (this.get_text() === this.placeholder) {
                 this.set_text('');
                 this.refresh();
             }
         }
     };
 
 
     /**
      * Empty, Subclasses must define render.
      * @method render
      */
     TextCell.prototype.render = function () {};
 
 
     /**
      * setter: {{#crossLink "TextCell/set_text"}}{{/crossLink}}
      * @method get_text
      * @retrun {string} CodeMirror current text value
      */
     TextCell.prototype.get_text = function() {
         return this.code_mirror.getValue();
     };
 
     /**
      * @param {string} text - Codemiror text value
      * @see TextCell#get_text
      * @method set_text
      * */
     TextCell.prototype.set_text = function(text) {
         this.code_mirror.setValue(text);
         this.code_mirror.refresh();
     };
 
     /**
      * setter :{{#crossLink "TextCell/set_rendered"}}{{/crossLink}}
      * @method get_rendered
      * @return {html} html of rendered element
      * */
     TextCell.prototype.get_rendered = function() {
         return this.element.find('div.text_cell_render').html();
     };
 
     /**
      * @method set_rendered
      */
     TextCell.prototype.set_rendered = function(text) {
         this.element.find('div.text_cell_render').html(text);
     };
 
     /**
      * not deprecated, but implementation wrong
      * @method at_top
      * @deprecated
      * @return {Boolean} true is cell rendered, false otherwise
      * I doubt this is what it is supposed to do
      * this implementation is completly false
      */
     TextCell.prototype.at_top = function () {
         if (this.rendered) {
             return true;
         } else {
             return false;
         }
     };
 
 
     /**
      * not deprecated, but implementation wrong
      * @method at_bottom
      * @deprecated
      * @return {Boolean} true is cell rendered, false otherwise
      * I doubt this is what it is supposed to do
      * this implementation is completly false
      * */
     TextCell.prototype.at_bottom = function () {
         if (this.rendered) {
             return true;
         } else {
             return false;
         }
     };
 
     /**
      * Create Text cell from JSON
      * @param {json} data - JSON serialized text-cell
      * @method fromJSON
      */
     TextCell.prototype.fromJSON = function (data) {
         IPython.Cell.prototype.fromJSON.apply(this, arguments);
         if (data.cell_type === this.cell_type) {
             if (data.source !== undefined) {
                 this.set_text(data.source);
                 // make this value the starting point, so that we can only undo
                 // to this state, instead of a blank cell
                 this.code_mirror.clearHistory();
                 this.set_rendered(data.rendered || '');
                 this.rendered = false;
                 this.render();
             }
         }
     };
 
     /** Generate JSON from cell
      * @return {object} cell data serialised to json
      */
     TextCell.prototype.toJSON = function () {
         var data = IPython.Cell.prototype.toJSON.apply(this);
         data.cell_type = this.cell_type;
         data.source = this.get_text();
         return data;
     };
 
 
     /**
      * @constructor HtmlCell
      * @class HtmlCell
      * @extends TextCell
      */
     var HTMLCell = function () {
         this.placeholder = "Type <strong>HTML</strong> and LaTeX: $\\alpha^2$";
         IPython.TextCell.apply(this, arguments);
         this.cell_type = 'html';
     };
 
 
     HTMLCell.prototype = new TextCell();
 
     /**
      * @method render
      */
     HTMLCell.prototype.render = function () {
         if (this.rendered === false) {
             var text = this.get_text();
             if (text === "") { text = this.placeholder; }
             this.set_rendered(text);
             this.typeset();
             this.element.find('div.text_cell_input').hide();
             this.element.find("div.text_cell_render").show();
             this.rendered = true;
         }
     };
 
 
     /**
      * @class MarkdownCell
      * @constructor MarkdownCell
      * @extends HtmlCell
      */
     var MarkdownCell = function () {
         this.placeholder = "Type *Markdown* and LaTeX: $\\alpha^2$";
         IPython.TextCell.apply(this, arguments);
         this.cell_type = 'markdown';
     };
 
 
     MarkdownCell.prototype = new TextCell();
 
     /**
      * @method render
      */
     MarkdownCell.prototype.render = function () {
         if (this.rendered === false) {
             var text = this.get_text();
             if (text === "") { text = this.placeholder; }
             text = IPython.mathjaxutils.remove_math(text)
             var html = IPython.markdown_converter.makeHtml(text);
             html = IPython.mathjaxutils.replace_math(html)
             try {
                 this.set_rendered(html);
             } catch (e) {
                 console.log("Error running Javascript in Markdown:");
                 console.log(e);
                 this.set_rendered($("<div/>").addClass("js-error").html(
                     "Error rendering Markdown!<br/>" + e.toString())
                 );
             }
             this.element.find('div.text_cell_input').hide();
             this.element.find("div.text_cell_render").show();
             var code_snippets = this.element.find("pre > code");
             code_snippets.replaceWith(function () {
                 var code = $(this).html();
                 /* Substitute br for newlines and &nbsp; for spaces
                    before highlighting, since prettify doesn't
                    preserve those on all browsers */
                 code = code.replace(/(\r\n|\n|\r)/gm, "<br/>");
                 code = code.replace(/ /gm, '&nbsp;');
                 code = prettyPrintOne(code);
 
                 return '<code class="prettyprint">' + code + '</code>';
             });
             this.typeset()
             this.rendered = true;
         }
     };
 
 
     // RawCell
 
     /**
      * @class RawCell
      * @constructor RawCell
      * @extends TextCell
      */
     var RawCell = function () {
         this.placeholder = "Type plain text and LaTeX: $\\alpha^2$";
         this.code_mirror_mode = 'rst';
         IPython.TextCell.apply(this, arguments);
         this.cell_type = 'raw';
         var that = this
 
         this.element.focusout(
                 function() { that.auto_highlight(); }
             );
     };
 
 
     RawCell.prototype = new TextCell();
 
     /**
      * Trigger autodetection of highlight scheme for current cell
      * @method auto_highlight
      */
     RawCell.prototype.auto_highlight = function () {
         this._auto_highlight(IPython.config.raw_cell_highlight);
     };
 
     /** @method render **/
     RawCell.prototype.render = function () {
         this.rendered = true;
         this.edit();
     };
 
 
     /** @method handle_codemirror_keyevent **/
     RawCell.prototype.handle_codemirror_keyevent = function (editor, event) {
 
         var that = this;
         if (event.which === key.UPARROW && event.type === 'keydown') {
             // If we are not at the top, let CM handle the up arrow and
             // prevent the global keydown handler from handling it.
             if (!that.at_top()) {
                 event.stop();
                 return false;
             } else {
                 return true;
             };
         } else if (event.which === key.DOWNARROW && event.type === 'keydown') {
             // If we are not at the bottom, let CM handle the down arrow and
             // prevent the global keydown handler from handling it.
             if (!that.at_bottom()) {
                 event.stop();
                 return false;
             } else {
                 return true;
             };
         };
         return false;
     };
 
     /** @method select **/
     RawCell.prototype.select = function () {
         IPython.Cell.prototype.select.apply(this);
         this.code_mirror.refresh();
         this.code_mirror.focus();
     };
 
     /** @method at_top **/
     RawCell.prototype.at_top = function () {
         var cursor = this.code_mirror.getCursor();
         if (cursor.line === 0 && cursor.ch === 0) {
             return true;
         } else {
             return false;
         }
     };
 
 
     /** @method at_bottom **/
     RawCell.prototype.at_bottom = function () {
         var cursor = this.code_mirror.getCursor();
         if (cursor.line === (this.code_mirror.lineCount()-1) && cursor.ch === this.code_mirror.getLine(cursor.line).length) {
             return true;
         } else {
             return false;
         }
     };
 
 
-    /** 
+    /**
      * @class HeadingCell
      * @extends TextCell
      */
 
     /**
      * @constructor HeadingCell
      * @extends TextCell
      */
     var HeadingCell = function () {
         this.placeholder = "Type Heading Here";
         IPython.TextCell.apply(this, arguments);
         /**
          * heading level of the cell, use getter and setter to access
          * @property level
          */
         this.level = 1;
         this.cell_type = 'heading';
     };
 
 
     HeadingCell.prototype = new TextCell();
 
     /** @method fromJSON */
     HeadingCell.prototype.fromJSON = function (data) {
         if (data.level != undefined){
             this.level = data.level;
         }
         IPython.TextCell.prototype.fromJSON.apply(this, arguments);
     };
 
 
     /** @method toJSON */
     HeadingCell.prototype.toJSON = function () {
         var data = IPython.TextCell.prototype.toJSON.apply(this);
         data.level = this.get_level();
         return data;
     };
 
 
     /**
      * Change heading level of cell, and re-render
      * @method set_level
      */
     HeadingCell.prototype.set_level = function (level) {
         this.level = level;
         if (this.rendered) {
             this.rendered = false;
             this.render();
         };
     };
 
     /** The depth of header cell, based on html (h1 to h6)
      * @method get_level
      * @return {integer} level - for 1 to 6
      */
     HeadingCell.prototype.get_level = function () {
         return this.level;
     };
 
 
     HeadingCell.prototype.set_rendered = function (text) {
         var r = this.element.find("div.text_cell_render");
         r.empty();
         r.append($('<h'+this.level+'/>').html(text));
     };
 
 
     HeadingCell.prototype.get_rendered = function () {
         var r = this.element.find("div.text_cell_render");
         return r.children().first().html();
     };
 
 
     HeadingCell.prototype.render = function () {
         if (this.rendered === false) {
             var text = this.get_text();
             if (text === "") { text = this.placeholder; }
             this.set_rendered(text);
             this.typeset();
             this.element.find('div.text_cell_input').hide();
             this.element.find("div.text_cell_render").show();
             this.rendered = true;
         };
     };
 
     IPython.TextCell = TextCell;
     IPython.HTMLCell = HTMLCell;
     IPython.MarkdownCell = MarkdownCell;
     IPython.RawCell = RawCell;
     IPython.HeadingCell = HeadingCell;
 
 
     return IPython;
 
 }(IPython));