codecell.js
797 lines
| 29.8 KiB
| application/javascript
|
JavascriptLexer
|
r4609 | //---------------------------------------------------------------------------- | ||
// 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. | ||||
//---------------------------------------------------------------------------- | ||||
|
r4349 | |||
//============================================================================ | ||||
// CodeCell | ||||
//============================================================================ | ||||
|
r4352 | var IPython = (function (IPython) { | ||
|
r4349 | |||
|
r4352 | var utils = IPython.utils; | ||
var CodeCell = function (notebook) { | ||||
this.code_mirror = null; | ||||
|
r5428 | this.input_prompt_number = ' '; | ||
|
r4389 | this.is_completing = false; | ||
this.completion_cursor = null; | ||||
|
r4497 | this.outputs = []; | ||
|
r4533 | this.collapsed = false; | ||
|
r5566 | this.tooltip_timeout = null; | ||
|
r4352 | IPython.Cell.apply(this, arguments); | ||
}; | ||||
CodeCell.prototype = new IPython.Cell(); | ||||
CodeCell.prototype.create_element = function () { | ||||
|
r4361 | var cell = $('<div></div>').addClass('cell border-box-sizing code_cell vbox'); | ||
|
r4629 | cell.attr('tabindex','2'); | ||
|
r4360 | var input = $('<div></div>').addClass('input hbox'); | ||
|
r4379 | input.append($('<div/>').addClass('prompt input_prompt')); | ||
|
r4360 | var input_area = $('<div/>').addClass('input_area box-flex1'); | ||
|
r4352 | this.code_mirror = CodeMirror(input_area.get(0), { | ||
indentUnit : 4, | ||||
|
r4504 | mode: 'python', | ||
theme: 'ipython', | ||||
|
r5200 | readOnly: this.read_only, | ||
|
r4378 | onKeyEvent: $.proxy(this.handle_codemirror_keyevent,this) | ||
|
r4352 | }); | ||
input.append(input_area); | ||||
|
r4360 | var output = $('<div></div>').addClass('output vbox'); | ||
|
r4352 | cell.append(input).append(output); | ||
this.element = cell; | ||||
|
r5479 | this.collapse(); | ||
|
r4352 | }; | ||
|
r5398 | //TODO, try to diminish the number of parameters. | ||
|
r5566 | CodeCell.prototype.request_tooltip_after_time = function (pre_cursor,time){ | ||
var that = this; | ||||
|
r5398 | if (pre_cursor === "" || pre_cursor === "(" ) { | ||
// don't do anything if line beggin with '(' or is empty | ||||
} else { | ||||
// Will set a timer to request tooltip in `time` | ||||
that.tooltip_timeout = setTimeout(function(){ | ||||
IPython.notebook.request_tool_tip(that, pre_cursor) | ||||
},time); | ||||
} | ||||
}; | ||||
|
r4352 | |||
|
r4378 | CodeCell.prototype.handle_codemirror_keyevent = function (editor, event) { | ||
|
r5016 | // 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. | ||||
|
r5399 | |||
|
r5400 | // note that we are comparing and setting the time to wait at each key press. | ||
// a better wqy might be to generate a new function on each time change and | ||||
// assign it to CodeCell.prototype.request_tooltip_after_time | ||||
tooltip_wait_time = this.notebook.time_before_tooltip; | ||||
|
r5399 | tooltip_on_tab = this.notebook.tooltip_on_tab; | ||
|
r5398 | var that = this; | ||
|
r5397 | // whatever key is pressed, first, cancel the tooltip request before | ||
// they are sent, and remove tooltip if any | ||||
|
r5524 | if(event.type === 'keydown' ){ | ||
|
r5566 | that.remove_and_cancel_tooltip(); | ||
|
r5397 | } | ||
|
r5398 | |||
|
r4704 | if (event.keyCode === 13 && (event.shiftKey || event.ctrlKey)) { | ||
|
r4378 | // Always ignore shift-enter in CodeMirror as we handle it. | ||
return true; | ||||
|
r5403 | }else if (event.which === 40 && event.type === 'keypress' && tooltip_wait_time >= 0) { | ||
// triger aon keypress (!) otherwise inconsistent event.which depending on plateform | ||||
// browser and keyboard layout ! | ||||
|
r5399 | // Pressing '(' , request tooltip, don't forget to reappend it | ||
|
r5397 | var cursor = editor.getCursor(); | ||
|
r5399 | var pre_cursor = editor.getRange({line:cursor.line,ch:0},cursor).trim()+'('; | ||
|
r5566 | that.request_tooltip_after_time(pre_cursor,tooltip_wait_time); | ||
|
r4555 | } else if (event.keyCode === 9 && event.type == 'keydown') { | ||
// Tab completion. | ||||
|
r4389 | var cur = editor.getCursor(); | ||
|
r5398 | //Do not trim here because of tooltip | ||
var pre_cursor = editor.getRange({line:cur.line,ch:0},cur); | ||||
if (pre_cursor.trim() === "") { | ||||
|
r5016 | // Don't autocomplete if the part of the line before the cursor | ||
// is empty. In this case, let CodeMirror handle indentation. | ||||
|
r4393 | return false; | ||
|
r5399 | } else if ((pre_cursor.substr(-1) === "("|| pre_cursor.substr(-1) === " ") && tooltip_on_tab ) { | ||
|
r5566 | that.request_tooltip_after_time(pre_cursor,0); | ||
|
r4393 | } else { | ||
|
r5398 | pre_cursor.trim(); | ||
|
r4393 | // Autocomplete the current line. | ||
event.stop(); | ||||
var line = editor.getLine(cur.line); | ||||
this.is_completing = true; | ||||
this.completion_cursor = cur; | ||||
IPython.notebook.complete_cell(this, line, cur.ch); | ||||
return true; | ||||
} | ||||
|
r4529 | } else if (event.keyCode === 8 && event.type == 'keydown') { | ||
|
r4512 | // 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; | ||||
|
r5479 | } | ||
|
r5016 | } else if (event.keyCode === 76 && event.ctrlKey && event.shiftKey | ||
|
r5025 | && event.type == 'keydown') { | ||
|
r5016 | // toggle line numbers with Ctrl-Shift-L | ||
|
r5025 | this.toggle_line_numbers(); | ||
|
r5016 | } | ||
|
r5025 | else { | ||
|
r5016 | // keypress/keyup also trigger on TAB press, and we don't want to | ||
// use those to disable tab completion. | ||||
|
r4555 | if (this.is_completing && event.keyCode !== 9) { | ||
var ed_cur = editor.getCursor(); | ||||
var cc_cur = this.completion_cursor; | ||||
if (ed_cur.line !== cc_cur.line || ed_cur.ch !== cc_cur.ch) { | ||||
this.is_completing = false; | ||||
this.completion_cursor = null; | ||||
|
r5479 | } | ||
} | ||||
|
r4378 | return false; | ||
}; | ||||
|
r5479 | return false; | ||
|
r4378 | }; | ||
|
r5566 | CodeCell.prototype.remove_and_cancel_tooltip = function() { | ||
|
r5397 | // note that we don't handle closing directly inside the calltip | ||
// as in the completer, because it is not focusable, so won't | ||||
// get the event. | ||||
|
r5566 | if (this.tooltip_timeout != null){ | ||
clearTimeout(this.tooltip_timeout); | ||||
$('#tooltip').remove(); | ||||
this.tooltip_timeout = null; | ||||
} | ||||
|
r5397 | } | ||
|
r5404 | CodeCell.prototype.finish_tooltip = function (reply) { | ||
defstring=reply.definition; | ||||
docstring=reply.docstring; | ||||
|
r5411 | if(docstring == null){docstring="<empty docstring>"}; | ||
|
r5404 | name=reply.name; | ||
|
r5397 | |||
var that = this; | ||||
var tooltip = $('<div/>').attr('id', 'tooltip').addClass('tooltip'); | ||||
|
r5405 | // remove to have the tooltip not Limited in X and Y | ||
tooltip.addClass('smalltooltip'); | ||||
var pre=$('<pre/>').html(utils.fixConsole(docstring)); | ||||
|
r5407 | var expandlink=$('<a/>').attr('href',"#"); | ||
expandlink.addClass("ui-corner-all"); //rounded corner | ||||
expandlink.attr('role',"button"); | ||||
//expandlink.addClass('ui-button'); | ||||
//expandlink.addClass('ui-state-default'); | ||||
var expandspan=$('<span/>').text('Expand'); | ||||
expandspan.addClass('ui-icon'); | ||||
expandspan.addClass('ui-icon-plus'); | ||||
expandlink.append(expandspan); | ||||
expandlink.attr('id','expanbutton'); | ||||
expandlink.click(function(){ | ||||
|
r5405 | tooltip.removeClass('smalltooltip'); | ||
tooltip.addClass('bigtooltip'); | ||||
$('#expanbutton').remove(); | ||||
setTimeout(function(){that.code_mirror.focus();}, 50); | ||||
}); | ||||
|
r5407 | var morelink=$('<a/>').attr('href',"#"); | ||
morelink.attr('role',"button"); | ||||
morelink.addClass('ui-button'); | ||||
//morelink.addClass("ui-corner-all"); //rounded corner | ||||
//morelink.addClass('ui-state-default'); | ||||
var morespan=$('<span/>').text('Open in Pager'); | ||||
morespan.addClass('ui-icon'); | ||||
morespan.addClass('ui-icon-arrowstop-l-n'); | ||||
morelink.append(morespan); | ||||
morelink.click(function(){ | ||||
|
r5404 | var msg_id = IPython.notebook.kernel.execute(name+"?"); | ||
IPython.notebook.msg_cell_map[msg_id] = IPython.notebook.selected_cell().cell_id; | ||||
|
r5566 | that.remove_and_cancel_tooltip(); | ||
|
r5404 | setTimeout(function(){that.code_mirror.focus();}, 50); | ||
}); | ||||
|
r5407 | var closelink=$('<a/>').attr('href',"#"); | ||
closelink.attr('role',"button"); | ||||
closelink.addClass('ui-button'); | ||||
//closelink.addClass("ui-corner-all"); //rounded corner | ||||
//closelink.adClass('ui-state-default'); // grey background and blue cross | ||||
var closespan=$('<span/>').text('Close'); | ||||
closespan.addClass('ui-icon'); | ||||
closespan.addClass('ui-icon-close'); | ||||
closelink.append(closespan); | ||||
closelink.click(function(){ | ||||
|
r5566 | that.remove_and_cancel_tooltip(); | ||
|
r5404 | setTimeout(function(){that.code_mirror.focus();}, 50); | ||
}); | ||||
|
r5405 | //construct the tooltip | ||
|
r5407 | tooltip.append(closelink); | ||
tooltip.append(expandlink); | ||||
tooltip.append(morelink); | ||||
|
r5405 | if(defstring){ | ||
defstring_html= $('<pre/>').html(utils.fixConsole(defstring)); | ||||
tooltip.append(defstring_html); | ||||
} | ||||
|
r5404 | tooltip.append(pre); | ||
|
r5397 | var pos = this.code_mirror.cursorCoords(); | ||
tooltip.css('left',pos.x+'px'); | ||||
tooltip.css('top',pos.yBot+'px'); | ||||
$('body').append(tooltip); | ||||
// issues with cross-closing if multiple tooltip in less than 5sec | ||||
// keep it comented for now | ||||
|
r5566 | // setTimeout(that.remove_and_cancel_tooltip, 5000); | ||
|
r5397 | }; | ||
|
r5507 | // As you type completer | ||
|
r4389 | CodeCell.prototype.finish_completing = function (matched_text, matches) { | ||
|
r5523 | //return if not completing or nothing to complete | ||
if (!this.is_completing || matches.length === 0) {return;} | ||||
|
r5507 | |||
|
r5523 | // for later readability | ||
|
r5522 | var key = { tab:9, | ||
|
r5523 | esc:27, | ||
backspace:8, | ||||
|
r5522 | space:13, | ||
shift:16, | ||||
enter:32, | ||||
// _ is 189 | ||||
|
r5523 | isCompSymbol : function (code) | ||
{return ((code>64 && code <=122)|| code == 189)} | ||||
|
r5522 | } | ||
|
r5523 | |||
// smart completion, sort kwarg ending with '=' | ||||
|
r5401 | var newm = new Array(); | ||
if(this.notebook.smart_completer) | ||||
{ | ||||
kwargs = new Array(); | ||||
other = new Array(); | ||||
for(var i=0;i<matches.length; ++i){ | ||||
if(matches[i].substr(-1) === '='){ | ||||
kwargs.push(matches[i]); | ||||
}else{other.push(matches[i]);} | ||||
} | ||||
newm = kwargs.concat(other); | ||||
matches=newm; | ||||
} | ||||
|
r5507 | // end sort kwargs | ||
|
r5523 | // give common prefix of a array of string | ||
|
r5518 | function sharedStart(A){ | ||
if(A.length > 1 ){ | ||||
|
r5523 | var tem1, tem2, s, A= A.slice(0).sort(); | ||
tem1= A[0]; | ||||
s= tem1.length; | ||||
tem2= A.pop(); | ||||
while(s && tem2.indexOf(tem1)== -1){ | ||||
tem1= tem1.substring(0, --s); | ||||
} | ||||
return tem1; | ||||
|
r5518 | } | ||
return ""; | ||||
} | ||||
|
r4389 | |||
|
r5406 | //try to check if the user is typing tab at least twice after a word | ||
// and completion is "done" | ||||
fallback_on_tooltip_after=2 | ||||
if(matches.length==1 && matched_text === matches[0]) | ||||
{ | ||||
if(this.npressed >fallback_on_tooltip_after && this.prevmatch==matched_text) | ||||
{ | ||||
console.log('Ok, you really want to complete after pressing tab '+this.npressed+' times !'); | ||||
|
r5412 | console.log('You should understand that there is no (more) completion for that !'); | ||
|
r5406 | console.log("I'll show you the tooltip, will you stop bothering me ?"); | ||
|
r5566 | this.request_tooltip_after_time(matched_text+'(',0); | ||
|
r5406 | return; | ||
} | ||||
this.prevmatch=matched_text | ||||
this.npressed=this.npressed+1; | ||||
} | ||||
else | ||||
{ | ||||
this.prevmatch=""; | ||||
this.npressed=0; | ||||
} | ||||
|
r5507 | // end fallback on tooltip | ||
|
r5523 | //================================== | ||
|
r5507 | // Real completion logic start here | ||
|
r4389 | var that = this; | ||
var cur = this.completion_cursor; | ||||
|
r5507 | var done = false; | ||
// call to dismmiss the completer | ||||
var close = function () { | ||||
if (done) return; | ||||
done = true; | ||||
if (complete!=undefined) | ||||
{complete.remove();} | ||||
that.is_completing = false; | ||||
that.completion_cursor = null; | ||||
}; | ||||
|
r4554 | |||
|
r5507 | // insert the given text and exit the completer | ||
|
r5531 | var insert = function (selected_text, event) { | ||
|
r4554 | that.code_mirror.replaceRange( | ||
selected_text, | ||||
{line: cur.line, ch: (cur.ch-matched_text.length)}, | ||||
{line: cur.line, ch: cur.ch} | ||||
); | ||||
|
r5531 | if(event != null){ | ||
event.stopPropagation(); | ||||
event.preventDefault(); | ||||
} | ||||
|
r5507 | close(); | ||
setTimeout(function(){that.code_mirror.focus();}, 50); | ||||
}; | ||||
// insert the curent highlited selection and exit | ||||
var pick = function () { | ||||
|
r5531 | insert(select.val()[0],null); | ||
|
r4554 | }; | ||
|
r5507 | |||
// Define function to clear the completer, refill it with the new | ||||
|
r5523 | // matches, update the pseuso typing field. autopick insert match if | ||
// only one left, in no matches (anymore) dismiss itself by pasting | ||||
// what the user have typed until then | ||||
|
r5531 | var complete_with = function(matches,typed_text,autopick,event) | ||
|
r5507 | { | ||
|
r5522 | // If autopick an only one match, past. | ||
// Used to 'pick' when pressing tab | ||||
|
r5507 | if (matches.length < 1) { | ||
|
r5531 | insert(typed_text,event); | ||
if(event !=null){ | ||||
event.stopPropagation(); | ||||
event.preventDefault(); | ||||
} | ||||
|
r5522 | } else if (autopick && matches.length==1) { | ||
|
r5531 | insert(matches[0],event); | ||
if(event !=null){ | ||||
event.stopPropagation(); | ||||
event.preventDefault(); | ||||
} | ||||
|
r5507 | } | ||
|
r5522 | //clear the previous completion if any | ||
|
r5507 | complete.children().children().remove(); | ||
$('#asyoutype').text(typed_text); | ||||
select=$('#asyoutypeselect'); | ||||
for (var i=0; i<matches.length; ++i) { | ||||
select.append($('<option/>').html(matches[i])); | ||||
} | ||||
select.children().first().attr('selected','true'); | ||||
} | ||||
// create html for completer | ||||
|
r4389 | var complete = $('<div/>').addClass('completions'); | ||
|
r5507 | complete.attr('id','complete'); | ||
complete.append($('<p/>').attr('id', 'asyoutype').html(matched_text));//pseudo input field | ||||
|
r4389 | var select = $('<select/>').attr('multiple','true'); | ||
|
r5507 | select.attr('id', 'asyoutypeselect') | ||
select.attr('size',Math.min(10,matches.length)); | ||||
|
r4389 | var pos = this.code_mirror.cursorCoords(); | ||
|
r5507 | |||
// TODO: I propose to remove enough horizontal pixel | ||||
// to align the text later | ||||
|
r4389 | complete.css('left',pos.x+'px'); | ||
complete.css('top',pos.yBot+'px'); | ||||
complete.append(select); | ||||
$('body').append(complete); | ||||
|
r5523 | // So a first actual completion. see if all the completion start wit | ||
// the same letter and complete if necessary | ||||
|
r5522 | fastForward = sharedStart(matches) | ||
typed_characters= fastForward.substr(matched_text.length); | ||||
|
r5531 | complete_with(matches,matched_text+typed_characters,true,null); | ||
|
r5522 | filterd=matches; | ||
|
r5507 | // Give focus to select, and make it filter the match as the user type | ||
|
r5523 | // by filtering the previous matches. Called by .keypress and .keydown | ||
|
r5509 | var downandpress = function (event,press_or_down) { | ||
|
r5522 | var code = event.which; | ||
var autopick = false; // auto 'pick' if only one match | ||||
|
r5509 | if (press_or_down === 0){ | ||
|
r5522 | press=true; down=false; //Are we called from keypress or keydown | ||
|
r5509 | } else if (press_or_down == 1){ | ||
|
r5522 | press=false; down=true; | ||
|
r5509 | } | ||
|
r5522 | if (code === key.shift) { | ||
|
r5508 | // nothing on Shift | ||
return; | ||||
} | ||||
|
r5522 | if (code === key.space || code === key.enter) { | ||
|
r4389 | // Pressing SPACE or ENTER will cause a pick | ||
event.stopPropagation(); | ||||
event.preventDefault(); | ||||
pick(); | ||||
} else if (code === 38 || code === 40) { | ||||
// We don't want the document keydown handler to handle UP/DOWN, | ||||
// but we want the default action. | ||||
event.stopPropagation(); | ||||
|
r5522 | //} else if ( key.isCompSymbol(code)|| (code==key.backspace)||(code==key.tab && down)){ | ||
|
r5531 | } else if ( (code==key.backspace)||(code==key.tab && down) || press || key.isCompSymbol(code)){ | ||
if( key.isCompSymbol(code) && press) | ||||
|
r5507 | { | ||
|
r5509 | var newchar = String.fromCharCode(code); | ||
|
r5507 | typed_characters=typed_characters+newchar; | ||
|
r5522 | } else if (code == key.tab) { | ||
|
r5518 | fastForward = sharedStart(filterd) | ||
ffsub = fastForward.substr(matched_text.length+typed_characters.length); | ||||
typed_characters=typed_characters+ffsub; | ||||
|
r5522 | autopick=true; | ||
|
r5518 | event.stopPropagation(); | ||
event.preventDefault(); | ||||
|
r5531 | } else if (code == key.backspace && down) { | ||
|
r5523 | // cancel if user have erase everything, otherwise decrease | ||
// what we filter with | ||||
|
r5507 | if (typed_characters.length <= 0) | ||
{ | ||||
|
r5531 | insert(matched_text,event) | ||
|
r5507 | } | ||
typed_characters=typed_characters.substr(0,typed_characters.length-1); | ||||
|
r5531 | }else{return} | ||
|
r5509 | re = new RegExp("^"+"\%?"+matched_text+typed_characters,""); | ||
|
r5523 | filterd = matches.filter(function(x){return re.test(x)}); | ||
|
r5531 | complete_with(filterd,matched_text+typed_characters,autopick,event); | ||
|
r5523 | } else if(down){ // abort only on .keydown | ||
|
r5507 | // abort with what the user have pressed until now | ||
|
r5523 | console.log('aborting with keycode : '+code+' is down :'+down); | ||
|
r5531 | insert(matched_text+typed_characters,event); | ||
|
r4389 | } | ||
|
r5509 | } | ||
select.keydown(function (event) { | ||||
downandpress(event,1) | ||||
}); | ||||
select.keypress(function (event) { | ||||
downandpress(event,0) | ||||
|
r4389 | }); | ||
// Double click also causes a pick. | ||||
|
r5507 | // and bind the last actions. | ||
|
r4389 | select.dblclick(pick); | ||
|
r5507 | select.blur(close); | ||
|
r4389 | select.focus(); | ||
}; | ||||
|
r5020 | CodeCell.prototype.toggle_line_numbers = function () { | ||
|
r5025 | if (this.code_mirror.getOption('lineNumbers') == false) { | ||
this.code_mirror.setOption('lineNumbers', true); | ||||
} else { | ||||
this.code_mirror.setOption('lineNumbers', false); | ||||
} | ||||
|
r5479 | this.code_mirror.refresh(); | ||
|
r5020 | }; | ||
|
r4389 | |||
|
r4352 | CodeCell.prototype.select = function () { | ||
IPython.Cell.prototype.select.apply(this); | ||||
|
r4504 | // Todo: this dance is needed because as of CodeMirror 2.12, focus is | ||
// not causing the cursor to blink if the editor is empty initially. | ||||
// While this seems to fix the issue, this should be fixed | ||||
// in CodeMirror proper. | ||||
var s = this.code_mirror.getValue(); | ||||
|
r4352 | this.code_mirror.focus(); | ||
|
r4504 | if (s === '') this.code_mirror.setValue(''); | ||
|
r4352 | }; | ||
|
r4675 | 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); | ||||
}; | ||||
|
r4497 | CodeCell.prototype.append_output = function (json) { | ||
this.expand(); | ||||
if (json.output_type === 'pyout') { | ||||
this.append_pyout(json); | ||||
} else if (json.output_type === 'pyerr') { | ||||
this.append_pyerr(json); | ||||
} else if (json.output_type === 'display_data') { | ||||
this.append_display_data(json); | ||||
} else if (json.output_type === 'stream') { | ||||
this.append_stream(json); | ||||
}; | ||||
this.outputs.push(json); | ||||
}; | ||||
|
r4642 | CodeCell.prototype.create_output_area = function () { | ||
var oa = $("<div/>").addClass("hbox output_area"); | ||||
oa.append($('<div/>').addClass('prompt')); | ||||
return oa; | ||||
}; | ||||
|
r4497 | CodeCell.prototype.append_pyout = function (json) { | ||
n = json.prompt_number || ' '; | ||||
|
r4642 | var toinsert = this.create_output_area(); | ||
toinsert.find('div.prompt').addClass('output_prompt').html('Out[' + n + ']:'); | ||||
|
r4625 | this.append_mime_type(json, toinsert); | ||
|
r4642 | this.element.find('div.output').append(toinsert); | ||
|
r4352 | // If we just output latex, typeset it. | ||
|
r5306 | if ((json.latex !== undefined) || (json.html !== undefined)) { | ||
|
r4349 | MathJax.Hub.Queue(["Typeset",MathJax.Hub]); | ||
}; | ||||
}; | ||||
|
r4497 | CodeCell.prototype.append_pyerr = function (json) { | ||
var tb = json.traceback; | ||||
|
r4540 | if (tb !== undefined && tb.length > 0) { | ||
|
r4528 | var s = ''; | ||
var len = tb.length; | ||||
for (var i=0; i<len; i++) { | ||||
s = s + tb[i] + '\n'; | ||||
} | ||||
s = s + '\n'; | ||||
|
r4642 | var toinsert = this.create_output_area(); | ||
this.append_text(s, toinsert); | ||||
this.element.find('div.output').append(toinsert); | ||||
|
r4528 | }; | ||
|
r4497 | }; | ||
CodeCell.prototype.append_stream = function (json) { | ||||
|
r4864 | // temporary fix: if stream undefined (json file written prior to this patch), | ||
// default to most likely stdout: | ||||
if (json.stream == undefined){ | ||||
json.stream = 'stdout'; | ||||
} | ||||
|
r4865 | var subclass = "output_"+json.stream; | ||
|
r4864 | if (this.outputs.length > 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 | ||||
|
r4865 | this.element.find('div.'+subclass).last().find('pre').append(json.text); | ||
|
r4864 | return; | ||
} | ||||
} | ||||
// If we got here, attach a new div | ||||
|
r4642 | var toinsert = this.create_output_area(); | ||
|
r4883 | this.append_text(json.text, toinsert, "output_stream "+subclass); | ||
|
r4642 | this.element.find('div.output').append(toinsert); | ||
|
r4352 | }; | ||
|
r4349 | |||
|
r4497 | CodeCell.prototype.append_display_data = function (json) { | ||
|
r4642 | var toinsert = this.create_output_area(); | ||
|
r5479 | this.append_mime_type(json, toinsert); | ||
|
r4642 | this.element.find('div.output').append(toinsert); | ||
|
r4553 | // If we just output latex, typeset it. | ||
|
r5306 | if ( (json.latex !== undefined) || (json.html !== undefined) ) { | ||
|
r4553 | MathJax.Hub.Queue(["Typeset",MathJax.Hub]); | ||
}; | ||||
|
r4497 | }; | ||
CodeCell.prototype.append_mime_type = function (json, element) { | ||||
if (json.html !== undefined) { | ||||
|
r4642 | this.append_html(json.html, element); | ||
|
r4497 | } else if (json.latex !== undefined) { | ||
|
r4642 | this.append_latex(json.latex, element); | ||
|
r4497 | } else if (json.svg !== undefined) { | ||
|
r4642 | this.append_svg(json.svg, element); | ||
|
r4497 | } else if (json.png !== undefined) { | ||
|
r4642 | this.append_png(json.png, element); | ||
|
r4528 | } else if (json.jpeg !== undefined) { | ||
|
r4642 | this.append_jpeg(json.jpeg, element); | ||
|
r4497 | } else if (json.text !== undefined) { | ||
|
r4642 | this.append_text(json.text, element); | ||
|
r4352 | }; | ||
}; | ||||
|
r4349 | |||
|
r4403 | CodeCell.prototype.append_html = function (html, element) { | ||
|
r4642 | var toinsert = $("<div/>").addClass("box_flex1 output_subarea output_html rendered_html"); | ||
|
r4403 | toinsert.append(html); | ||
element.append(toinsert); | ||||
|
r5479 | }; | ||
|
r4403 | |||
|
r4865 | CodeCell.prototype.append_text = function (data, element, extra_class) { | ||
|
r4883 | var toinsert = $("<div/>").addClass("box_flex1 output_subarea output_text"); | ||
|
r4865 | if (extra_class){ | ||
toinsert.addClass(extra_class); | ||||
} | ||||
|
r4540 | toinsert.append($("<pre/>").html(data)); | ||
|
r4352 | element.append(toinsert); | ||
}; | ||||
|
r4349 | |||
|
r4352 | CodeCell.prototype.append_svg = function (svg, element) { | ||
|
r4642 | var toinsert = $("<div/>").addClass("box_flex1 output_subarea output_svg"); | ||
|
r4352 | toinsert.append(svg); | ||
element.append(toinsert); | ||||
}; | ||||
|
r4349 | |||
|
r4352 | CodeCell.prototype.append_png = function (png, element) { | ||
|
r4642 | var toinsert = $("<div/>").addClass("box_flex1 output_subarea output_png"); | ||
|
r4352 | toinsert.append($("<img/>").attr('src','data:image/png;base64,'+png)); | ||
element.append(toinsert); | ||||
}; | ||||
|
r4349 | |||
|
r4528 | CodeCell.prototype.append_jpeg = function (jpeg, element) { | ||
|
r4642 | var toinsert = $("<div/>").addClass("box_flex1 output_subarea output_jpeg"); | ||
|
r4528 | toinsert.append($("<img/>").attr('src','data:image/jpeg;base64,'+jpeg)); | ||
element.append(toinsert); | ||||
}; | ||||
|
r4352 | CodeCell.prototype.append_latex = function (latex, element) { | ||
// This method cannot do the typesetting because the latex first has to | ||||
// be on the page. | ||||
|
r4642 | var toinsert = $("<div/>").addClass("box_flex1 output_subarea output_latex"); | ||
|
r4352 | toinsert.append(latex); | ||
element.append(toinsert); | ||||
|
r5479 | }; | ||
|
r4349 | |||
|
r5085 | CodeCell.prototype.clear_output = 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); | ||||
} | ||||
} | ||||
} | ||||
|
r4352 | }; | ||
|
r4349 | |||
|
r4390 | CodeCell.prototype.clear_input = function () { | ||
this.code_mirror.setValue(''); | ||||
}; | ||||
|
r4352 | CodeCell.prototype.collapse = function () { | ||
|
r4533 | if (!this.collapsed) { | ||
this.element.find('div.output').hide(); | ||||
this.collapsed = true; | ||||
}; | ||||
|
r4352 | }; | ||
|
r4349 | |||
|
r4352 | CodeCell.prototype.expand = function () { | ||
|
r4533 | if (this.collapsed) { | ||
this.element.find('div.output').show(); | ||||
this.collapsed = false; | ||||
}; | ||||
|
r4352 | }; | ||
|
r4349 | |||
|
r4639 | CodeCell.prototype.toggle_output = function () { | ||
if (this.collapsed) { | ||||
this.expand(); | ||||
} else { | ||||
this.collapse(); | ||||
}; | ||||
}; | ||||
|
r4352 | CodeCell.prototype.set_input_prompt = function (number) { | ||
|
r5428 | var n = number || ' '; | ||
|
r5479 | this.input_prompt_number = n; | ||
|
r4352 | this.element.find('div.input_prompt').html('In [' + n + ']:'); | ||
}; | ||||
|
r4349 | |||
|
r4352 | CodeCell.prototype.get_code = function () { | ||
return this.code_mirror.getValue(); | ||||
}; | ||||
|
r4349 | |||
|
r4352 | CodeCell.prototype.set_code = function (code) { | ||
return this.code_mirror.setValue(code); | ||||
}; | ||||
|
r4349 | |||
|
r4352 | CodeCell.prototype.at_top = function () { | ||
var cursor = this.code_mirror.getCursor(); | ||||
if (cursor.line === 0) { | ||||
return true; | ||||
} else { | ||||
return false; | ||||
} | ||||
|
r4349 | }; | ||
|
r4352 | CodeCell.prototype.at_bottom = function () { | ||
var cursor = this.code_mirror.getCursor(); | ||||
if (cursor.line === (this.code_mirror.lineCount()-1)) { | ||||
return true; | ||||
} else { | ||||
return false; | ||||
} | ||||
|
r4349 | }; | ||
|
r4352 | CodeCell.prototype.fromJSON = function (data) { | ||
|
r4865 | console.log('Import from JSON:', data); | ||
|
r4352 | if (data.cell_type === 'code') { | ||
|
r4484 | if (data.input !== undefined) { | ||
this.set_code(data.input); | ||||
} | ||||
if (data.prompt_number !== undefined) { | ||||
this.set_input_prompt(data.prompt_number); | ||||
} else { | ||||
this.set_input_prompt(); | ||||
}; | ||||
|
r4497 | var len = data.outputs.length; | ||
for (var i=0; i<len; i++) { | ||||
this.append_output(data.outputs[i]); | ||||
}; | ||||
|
r4533 | if (data.collapsed !== undefined) { | ||
if (data.collapsed) { | ||||
this.collapse(); | ||||
}; | ||||
}; | ||||
|
r4352 | }; | ||
}; | ||||
CodeCell.prototype.toJSON = function () { | ||||
|
r4497 | var data = {}; | ||
|
r4484 | data.input = this.get_code(); | ||
data.cell_type = 'code'; | ||||
if (this.input_prompt_number !== ' ') { | ||||
|
r5479 | data.prompt_number = this.input_prompt_number; | ||
|
r4352 | }; | ||
|
r4497 | var outputs = []; | ||
var len = this.outputs.length; | ||||
for (var i=0; i<len; i++) { | ||||
outputs[i] = this.outputs[i]; | ||||
}; | ||||
data.outputs = outputs; | ||||
|
r4484 | data.language = 'python'; | ||
|
r4533 | data.collapsed = this.collapsed; | ||
|
r4497 | // console.log('Export to JSON:',data); | ||
|
r4484 | return data; | ||
|
r4352 | }; | ||
|
r4497 | |||
|
r4352 | IPython.CodeCell = CodeCell; | ||
return IPython; | ||||
}(IPython)); | ||||