//---------------------------------------------------------------------------- // 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. //---------------------------------------------------------------------------- //============================================================================ // CodeCell //============================================================================ var IPython = (function (IPython) { "use strict"; var utils = IPython.utils; var key = IPython.utils.keycodes; var CodeCell = function (notebook) { this.code_mirror = null; this.input_prompt_number = null; this.outputs = []; this.collapsed = false; this.clear_out_timeout = null; IPython.Cell.apply(this, arguments); }; CodeCell.prototype = new IPython.Cell(); CodeCell.prototype.create_element = function () { var cell = $('
').addClass('cell border-box-sizing code_cell vbox'); cell.attr('tabindex','2'); var input = $('
').addClass('input hbox'); input.append($('
').addClass('prompt input_prompt')); var input_area = $('
').addClass('input_area box-flex1'); this.code_mirror = CodeMirror(input_area.get(0), { indentUnit : 4, mode: 'python', theme: 'ipython', readOnly: this.read_only, onKeyEvent: $.proxy(this.handle_codemirror_keyevent,this) }); input.append(input_area); var output = $('
').addClass('output vbox'); cell.append(input).append(output); this.element = cell; this.collapse(); // construct a completer this.completer = new IPython.Completer(this); }; CodeCell.prototype.handle_codemirror_keyevent = function (editor, event) { // This method gets called in CodeMirror's onKeyDown/onKeyPress // handlers and is used to provide custom key handling. Its return // value is used to determine if CodeMirror should ignore the event: // true = ignore, false = don't ignore. if (this.read_only){ return false; } var tooltip_on_tab = this.notebook.tooltip_on_tab; var that = this; // whatever key is pressed, first, cancel the tooltip request before // they are sent, and remove tooltip if any, except for tab again if(event.type === 'keydown' && event.which != key.tab ) { IPython.tooltip.remove_and_cancel_tooltip(); }; if (event.keyCode === key.enter && (event.shiftKey || event.ctrlKey)) { // Always ignore shift-enter in CodeMirror as we handle it. return true; } else if (event.which === 40 && event.type === 'keypress' && this.notebook.time_before_tooltip >= 0) { // triger on keypress (!) otherwise inconsistent event.which depending on plateform // browser and keyboard layout ! // Pressing '(' , request tooltip, don't forget to reappend it IPython.tooltip.pending(that); } else if (event.which === key.upArrow) { // 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) { // 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; }; } else if (event.keyCode === key.tab && event.type == 'keydown') { // Tab completion. var cur = editor.getCursor(); //Do not trim here because of tooltip var pre_cursor = editor.getRange({line:cur.line,ch:0},cur); if (pre_cursor.trim() === "") { // Don't autocomplete if the part of the line before the cursor // is empty. In this case, let CodeMirror handle indentation. return false; } else if ((pre_cursor.substr(-1) === "("|| pre_cursor.substr(-1) === " ") && tooltip_on_tab ) { IPython.tooltip.request(that); // Prevent the event from bubbling up. event.stop(); // Prevent CodeMirror from handling the tab. return true; } else { event.stop(); this.completer.startCompletion(); return true; }; } else if (event.keyCode === key.backspace && event.type == 'keydown') { // If backspace and the line ends with 4 spaces, remove them. var cur = editor.getCursor(); var line = editor.getLine(cur.line); var ending = line.slice(-4); if (ending === ' ') { editor.replaceRange('', {line: cur.line, ch: cur.ch-4}, {line: cur.line, ch: cur.ch} ); event.stop(); return true; } else { return false; }; } else { // keypress/keyup also trigger on TAB press, and we don't want to // use those to disable tab completion. return false; }; return false; }; CodeCell.prototype.finish_tooltip = function (reply) { IPython.tooltip.show(reply, this); }; // called when completion came back from the kernel. just forward CodeCell.prototype.finish_completing = function (matched_text, matches) { this.completer.finish_completing(matched_text,matches); } CodeCell.prototype.select = function () { IPython.Cell.prototype.select.apply(this); 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. }; CodeCell.prototype.select_all = function () { var start = {line: 0, ch: 0}; var nlines = this.code_mirror.lineCount(); var last_line = this.code_mirror.getLine(nlines-1); var end = {line: nlines-1, ch: last_line.length}; this.code_mirror.setSelection(start, end); }; CodeCell.prototype.append_output = function (json, dynamic) { // If dynamic is true, javascript output will be eval'd. this.expand(); this.flush_clear_timeout(); if (json.output_type === 'pyout') { this.append_pyout(json, dynamic); } else if (json.output_type === 'pyerr') { this.append_pyerr(json); } else if (json.output_type === 'display_data') { this.append_display_data(json, dynamic); } else if (json.output_type === 'stream') { this.append_stream(json); }; this.outputs.push(json); }; CodeCell.prototype.create_output_area = function () { var oa = $("
").addClass("hbox output_area"); oa.append($('
').addClass('prompt')); return oa; }; CodeCell.prototype.append_pyout = function (json, dynamic) { var n = json.prompt_number || ' '; var toinsert = this.create_output_area(); toinsert.find('div.prompt').addClass('output_prompt').html('Out[' + n + ']:'); this.append_mime_type(json, toinsert, dynamic); this.element.find('div.output').append(toinsert); // If we just output latex, typeset it. if ((json.latex !== undefined) || (json.html !== undefined)) { this.typeset(); }; }; CodeCell.prototype.append_pyerr = function (json) { var tb = json.traceback; if (tb !== undefined && tb.length > 0) { var s = ''; var len = tb.length; for (var i=0; i 0){ // have at least one output to consider var last = this.outputs[this.outputs.length-1]; if (last.output_type == 'stream' && json.stream == last.stream){ // latest output was in the same stream, // so append directly into its pre tag // escape ANSI & HTML specials: var text = utils.fixConsole(json.text); this.element.find('div.'+subclass).last().find('pre').append(text); return; } } // If we got here, attach a new div var toinsert = this.create_output_area(); this.append_text(json.text, toinsert, "output_stream "+subclass); this.element.find('div.output').append(toinsert); }; CodeCell.prototype.append_display_data = function (json, dynamic) { var toinsert = this.create_output_area(); this.append_mime_type(json, toinsert, dynamic); this.element.find('div.output').append(toinsert); // If we just output latex, typeset it. if ( (json.latex !== undefined) || (json.html !== undefined) ) { this.typeset(); }; }; CodeCell.prototype.append_mime_type = function (json, element, dynamic) { if (json.javascript !== undefined && dynamic) { this.append_javascript(json.javascript, element, dynamic); } else if (json.html !== undefined) { this.append_html(json.html, element); } else if (json.latex !== undefined) { this.append_latex(json.latex, element); } else if (json.svg !== undefined) { this.append_svg(json.svg, element); } else if (json.png !== undefined) { this.append_png(json.png, element); } else if (json.jpeg !== undefined) { this.append_jpeg(json.jpeg, element); } else if (json.text !== undefined) { this.append_text(json.text, element); }; }; CodeCell.prototype.append_html = function (html, element) { var toinsert = $("
").addClass("box_flex1 output_subarea output_html rendered_html"); toinsert.append(html); element.append(toinsert); }; CodeCell.prototype.append_javascript = function (js, container) { // We just eval the JS code, element appears in the local scope. var element = $("
").addClass("box_flex1 output_subarea"); container.append(element); // Div for js shouldn't be drawn, as it will add empty height to the area. container.hide(); // If the Javascript appends content to `element` that should be drawn, then // it must also call `container.show()`. eval(js); } CodeCell.prototype.append_text = function (data, element, extra_class) { var toinsert = $("
").addClass("box_flex1 output_subarea output_text"); // escape ANSI & HTML specials in plaintext: data = utils.fixConsole(data); if (extra_class){ toinsert.addClass(extra_class); } toinsert.append($("
").html(data));
        element.append(toinsert);
    };


    CodeCell.prototype.append_svg = function (svg, element) {
        var toinsert = $("
").addClass("box_flex1 output_subarea output_svg"); toinsert.append(svg); element.append(toinsert); }; CodeCell.prototype.append_png = function (png, element) { var toinsert = $("
").addClass("box_flex1 output_subarea output_png"); toinsert.append($("").attr('src','data:image/png;base64,'+png)); element.append(toinsert); }; CodeCell.prototype.append_jpeg = function (jpeg, element) { var toinsert = $("
").addClass("box_flex1 output_subarea output_jpeg"); toinsert.append($("").attr('src','data:image/jpeg;base64,'+jpeg)); element.append(toinsert); }; CodeCell.prototype.append_latex = function (latex, element) { // This method cannot do the typesetting because the latex first has to // be on the page. var toinsert = $("
").addClass("box_flex1 output_subarea output_latex"); toinsert.append(latex); element.append(toinsert); }; CodeCell.prototype.clear_output = function (stdout, stderr, other) { var that = this; if (this.clear_out_timeout != null){ // fire previous pending clear *immediately* clearTimeout(this.clear_out_timeout); this.clear_out_timeout = null; this.clear_output_callback(this._clear_stdout, this._clear_stderr, this._clear_other); } // store flags for flushing the timeout this._clear_stdout = stdout; this._clear_stderr = stderr; this._clear_other = other; this.clear_out_timeout = setTimeout(function(){ // really clear timeout only after a short delay // this reduces flicker in 'clear_output; print' cases that.clear_out_timeout = null; that._clear_stdout = that._clear_stderr = that._clear_other = null; that.clear_output_callback(stdout, stderr, other); }, 500 ); }; CodeCell.prototype.clear_output_callback = function (stdout, stderr, other) { var output_div = this.element.find("div.output"); if (stdout && stderr && other){ // clear all, no need for logic output_div.html(""); this.outputs = []; return; } // remove html output // each output_subarea that has an identifying class is in an output_area // which is the element to be removed. if (stdout){ output_div.find("div.output_stdout").parent().remove(); } if (stderr){ output_div.find("div.output_stderr").parent().remove(); } if (other){ output_div.find("div.output_subarea").not("div.output_stderr").not("div.output_stdout").parent().remove(); } // remove cleared outputs from JSON list: for (var i = this.outputs.length - 1; i >= 0; i--){ var out = this.outputs[i]; var output_type = out.output_type; if (output_type == "display_data" && other){ this.outputs.splice(i,1); }else if (output_type == "stream"){ if (stdout && out.stream == "stdout"){ this.outputs.splice(i,1); }else if (stderr && out.stream == "stderr"){ this.outputs.splice(i,1); } } } }; CodeCell.prototype.clear_input = function () { this.code_mirror.setValue(''); }; CodeCell.prototype.flush_clear_timeout = function() { var output_div = this.element.find('div.output'); if (this.clear_out_timeout){ clearTimeout(this.clear_out_timeout); this.clear_out_timeout = null; this.clear_output_callback(this._clear_stdout, this._clear_stderr, this._clear_other); }; } CodeCell.prototype.collapse = function () { if (!this.collapsed) { this.element.find('div.output').hide(); this.collapsed = true; }; }; CodeCell.prototype.expand = function () { if (this.collapsed) { this.element.find('div.output').show(); this.collapsed = false; }; }; CodeCell.prototype.toggle_output = function () { if (this.collapsed) { this.expand(); } else { this.collapse(); }; }; CodeCell.prototype.set_input_prompt = function (number) { this.input_prompt_number = number; var ns = number || " "; this.element.find('div.input_prompt').html('In [' + ns + ']:'); }; CodeCell.prototype.get_text = function () { return this.code_mirror.getValue(); }; CodeCell.prototype.set_text = function (code) { return this.code_mirror.setValue(code); }; CodeCell.prototype.at_top = function () { var cursor = this.code_mirror.getCursor(); if (cursor.line === 0) { return true; } else { return false; } }; CodeCell.prototype.at_bottom = function () { var cursor = this.code_mirror.getCursor(); if (cursor.line === (this.code_mirror.lineCount()-1)) { return true; } else { return false; } }; CodeCell.prototype.fromJSON = function (data) { if (data.cell_type === 'code') { if (data.input !== undefined) { this.set_text(data.input); } if (data.prompt_number !== undefined) { this.set_input_prompt(data.prompt_number); } else { this.set_input_prompt(); }; var len = data.outputs.length; for (var i=0; i