codecell.js
383 lines
| 12.4 KiB
| application/javascript
|
JavascriptLexer
Brian E. Granger
|
r4349 | |||
//============================================================================ | ||||
// CodeCell | ||||
//============================================================================ | ||||
Brian E. Granger
|
r4352 | var IPython = (function (IPython) { | ||
Brian E. Granger
|
r4349 | |||
Brian E. Granger
|
r4352 | var utils = IPython.utils; | ||
var CodeCell = function (notebook) { | ||||
this.code_mirror = null; | ||||
this.input_prompt_number = ' '; | ||||
Brian E. Granger
|
r4389 | this.is_completing = false; | ||
this.completion_cursor = null; | ||||
Brian E. Granger
|
r4497 | this.outputs = []; | ||
Brian E. Granger
|
r4352 | IPython.Cell.apply(this, arguments); | ||
}; | ||||
CodeCell.prototype = new IPython.Cell(); | ||||
CodeCell.prototype.create_element = function () { | ||||
Brian E. Granger
|
r4361 | var cell = $('<div></div>').addClass('cell border-box-sizing code_cell vbox'); | ||
Brian E. Granger
|
r4360 | var input = $('<div></div>').addClass('input hbox'); | ||
Brian E. Granger
|
r4379 | input.append($('<div/>').addClass('prompt input_prompt')); | ||
Brian E. Granger
|
r4360 | var input_area = $('<div/>').addClass('input_area box-flex1'); | ||
Brian E. Granger
|
r4352 | this.code_mirror = CodeMirror(input_area.get(0), { | ||
indentUnit : 4, | ||||
enterMode : 'flat', | ||||
Brian E. Granger
|
r4378 | tabMode: 'shift', | ||
Brian E. Granger
|
r4504 | mode: 'python', | ||
theme: 'ipython', | ||||
Brian E. Granger
|
r4378 | onKeyEvent: $.proxy(this.handle_codemirror_keyevent,this) | ||
Brian E. Granger
|
r4352 | }); | ||
input.append(input_area); | ||||
Brian E. Granger
|
r4360 | var output = $('<div></div>').addClass('output vbox'); | ||
Brian E. Granger
|
r4352 | cell.append(input).append(output); | ||
this.element = cell; | ||||
this.collapse() | ||||
}; | ||||
Brian E. Granger
|
r4378 | 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 (event.keyCode === 13 && event.shiftKey) { | ||||
// Always ignore shift-enter in CodeMirror as we handle it. | ||||
return true; | ||||
Brian E. Granger
|
r4393 | // } else if (event.keyCode == 32 && (event.ctrlKey || event.metaKey) && !event.altKey) { | ||
} else if (event.keyCode == 9) { | ||||
Brian E. Granger
|
r4389 | var cur = editor.getCursor(); | ||
Brian E. Granger
|
r4393 | var pre_cursor = editor.getRange({line:cur.line,ch:0},cur).trim(); | ||
if (pre_cursor === "") { | ||||
// Don't autocomplete if the part of the line before the cursor is empty. | ||||
// In this case, let CodeMirror handle indentation. | ||||
return false; | ||||
} else { | ||||
// 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; | ||||
} | ||||
Brian E. Granger
|
r4378 | } else { | ||
Brian E. Granger
|
r4389 | if (this.is_completing && this.completion_cursor !== editor.getCursor()) { | ||
this.is_completing = false; | ||||
this.completion_cursor = null; | ||||
} | ||||
Brian E. Granger
|
r4378 | return false; | ||
}; | ||||
}; | ||||
Brian E. Granger
|
r4389 | |||
CodeCell.prototype.finish_completing = function (matched_text, matches) { | ||||
if (!this.is_completing || matches.length === 0) {return;} | ||||
// console.log("Got matches", matched_text, matches); | ||||
var that = this; | ||||
var cur = this.completion_cursor; | ||||
var complete = $('<div/>').addClass('completions'); | ||||
var select = $('<select/>').attr('multiple','true'); | ||||
for (var i=0; i<matches.length; ++i) { | ||||
select.append($('<option/>').text(matches[i])); | ||||
} | ||||
select.children().first().attr('selected','true'); | ||||
select.attr('size',Math.min(10,matches.length)); | ||||
var pos = this.code_mirror.cursorCoords(); | ||||
complete.css('left',pos.x+'px'); | ||||
complete.css('top',pos.yBot+'px'); | ||||
complete.append(select); | ||||
$('body').append(complete); | ||||
var done = false; | ||||
var insert = function (selected_text) { | ||||
that.code_mirror.replaceRange( | ||||
selected_text, | ||||
{line: cur.line, ch: (cur.ch-matched_text.length)}, | ||||
{line: cur.line, ch: cur.ch} | ||||
); | ||||
}; | ||||
var close = function () { | ||||
if (done) return; | ||||
done = true; | ||||
complete.remove(); | ||||
that.is_completing = false; | ||||
that.completion_cursor = null; | ||||
}; | ||||
var pick = function () { | ||||
insert(select.val()[0]); | ||||
close(); | ||||
setTimeout(function(){that.code_mirror.focus();}, 50); | ||||
}; | ||||
select.blur(close); | ||||
select.keydown(function (event) { | ||||
var code = event.which; | ||||
if (code === 13 || code === 32) { | ||||
// 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(); | ||||
} else { | ||||
// All other key presses simple exit completion. | ||||
event.stopPropagation(); | ||||
event.preventDefault(); | ||||
close(); | ||||
that.code_mirror.focus(); | ||||
} | ||||
}); | ||||
// Double click also causes a pick. | ||||
select.dblclick(pick); | ||||
select.focus(); | ||||
}; | ||||
Brian E. Granger
|
r4352 | CodeCell.prototype.select = function () { | ||
IPython.Cell.prototype.select.apply(this); | ||||
Brian E. Granger
|
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(); | ||||
if (s === '') this.code_mirror.setValue('.'); | ||||
Brian E. Granger
|
r4352 | this.code_mirror.focus(); | ||
Brian E. Granger
|
r4504 | if (s === '') this.code_mirror.setValue(''); | ||
Brian E. Granger
|
r4352 | }; | ||
Brian E. Granger
|
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); | ||||
}; | ||||
CodeCell.prototype.append_pyout = function (json) { | ||||
n = json.prompt_number || ' '; | ||||
Brian E. Granger
|
r4379 | var toinsert = $("<div/>").addClass("output_area output_pyout hbox"); | ||
Brian E. Granger
|
r4352 | toinsert.append($('<div/>'). | ||
addClass('prompt output_prompt'). | ||||
html('Out[' + n + ']:') | ||||
); | ||||
Brian E. Granger
|
r4497 | this.append_mime_type(json, toinsert); | ||
Brian E. Granger
|
r4352 | toinsert.children().last().addClass("box_flex1"); | ||
this.element.find("div.output").append(toinsert); | ||||
// If we just output latex, typeset it. | ||||
Brian E. Granger
|
r4497 | if (json.latex !== undefined) { | ||
Brian E. Granger
|
r4349 | MathJax.Hub.Queue(["Typeset",MathJax.Hub]); | ||
}; | ||||
}; | ||||
Brian E. Granger
|
r4497 | CodeCell.prototype.append_pyerr = function (json) { | ||
var tb = json.traceback; | ||||
Brian E. Granger
|
r4352 | var s = ''; | ||
var len = tb.length; | ||||
for (var i=0; i<len; i++) { | ||||
s = s + tb[i] + '\n'; | ||||
} | ||||
s = s + '\n'; | ||||
Brian E. Granger
|
r4497 | this.append_text(s); | ||
}; | ||||
CodeCell.prototype.append_stream = function (json) { | ||||
this.append_text(json.text); | ||||
Brian E. Granger
|
r4352 | }; | ||
Brian E. Granger
|
r4349 | |||
Brian E. Granger
|
r4497 | CodeCell.prototype.append_display_data = function (json) { | ||
this.append_mime_type(json); | ||||
}; | ||||
CodeCell.prototype.append_mime_type = function (json, element) { | ||||
if (json.html !== undefined) { | ||||
this.append_html(json.html, element); | ||||
} else if (json.latex !== undefined) { | ||||
this.append_latex(json.latex, element); | ||||
Brian E. Granger
|
r4352 | // If it is undefined, then we just appended to div.output, which | ||
// makes the latex visible and we can typeset it. The typesetting | ||||
// has to be done after the latex is on the page. | ||||
if (element === undefined) { | ||||
MathJax.Hub.Queue(["Typeset",MathJax.Hub]); | ||||
}; | ||||
Brian E. Granger
|
r4497 | } 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.text !== undefined) { | ||||
this.append_text(json.text, element); | ||||
Brian E. Granger
|
r4352 | }; | ||
return element; | ||||
}; | ||||
Brian E. Granger
|
r4349 | |||
MinRK
|
r4403 | CodeCell.prototype.append_html = function (html, element) { | ||
element = element || this.element.find("div.output"); | ||||
var toinsert = $("<div/>").addClass("output_area output_html"); | ||||
toinsert.append(html); | ||||
element.append(toinsert); | ||||
return element; | ||||
} | ||||
Brian E. Granger
|
r4497 | CodeCell.prototype.append_text = function (data, element) { | ||
Brian E. Granger
|
r4352 | element = element || this.element.find("div.output"); | ||
Brian E. Granger
|
r4379 | var toinsert = $("<div/>").addClass("output_area output_stream"); | ||
toinsert.append($("<pre/>").html(utils.fixConsole(data))); | ||||
Brian E. Granger
|
r4352 | element.append(toinsert); | ||
return element; | ||||
}; | ||||
Brian E. Granger
|
r4349 | |||
Brian E. Granger
|
r4352 | CodeCell.prototype.append_svg = function (svg, element) { | ||
element = element || this.element.find("div.output"); | ||||
var toinsert = $("<div/>").addClass("output_area output_svg"); | ||||
toinsert.append(svg); | ||||
element.append(toinsert); | ||||
return element; | ||||
}; | ||||
Brian E. Granger
|
r4349 | |||
Brian E. Granger
|
r4352 | CodeCell.prototype.append_png = function (png, element) { | ||
element = element || this.element.find("div.output"); | ||||
var toinsert = $("<div/>").addClass("output_area output_png"); | ||||
toinsert.append($("<img/>").attr('src','data:image/png;base64,'+png)); | ||||
element.append(toinsert); | ||||
return element; | ||||
}; | ||||
Brian E. Granger
|
r4349 | |||
Brian E. Granger
|
r4352 | CodeCell.prototype.append_latex = function (latex, element) { | ||
// This method cannot do the typesetting because the latex first has to | ||||
// be on the page. | ||||
element = element || this.element.find("div.output"); | ||||
Brian E. Granger
|
r4379 | var toinsert = $("<div/>").addClass("output_area output_latex"); | ||
Brian E. Granger
|
r4352 | toinsert.append(latex); | ||
element.append(toinsert); | ||||
return element; | ||||
} | ||||
Brian E. Granger
|
r4349 | |||
Brian E. Granger
|
r4352 | CodeCell.prototype.clear_output = function () { | ||
this.element.find("div.output").html(""); | ||||
Brian E. Granger
|
r4497 | this.outputs = []; | ||
Brian E. Granger
|
r4352 | }; | ||
Brian E. Granger
|
r4349 | |||
Brian E. Granger
|
r4390 | CodeCell.prototype.clear_input = function () { | ||
this.code_mirror.setValue(''); | ||||
}; | ||||
Brian E. Granger
|
r4352 | CodeCell.prototype.collapse = function () { | ||
this.element.find('div.output').hide(); | ||||
}; | ||||
Brian E. Granger
|
r4349 | |||
Brian E. Granger
|
r4352 | CodeCell.prototype.expand = function () { | ||
this.element.find('div.output').show(); | ||||
}; | ||||
Brian E. Granger
|
r4349 | |||
Brian E. Granger
|
r4352 | CodeCell.prototype.set_input_prompt = function (number) { | ||
var n = number || ' '; | ||||
this.input_prompt_number = n | ||||
this.element.find('div.input_prompt').html('In [' + n + ']:'); | ||||
}; | ||||
Brian E. Granger
|
r4349 | |||
Brian E. Granger
|
r4352 | CodeCell.prototype.get_code = function () { | ||
return this.code_mirror.getValue(); | ||||
}; | ||||
Brian E. Granger
|
r4349 | |||
Brian E. Granger
|
r4352 | CodeCell.prototype.set_code = function (code) { | ||
return this.code_mirror.setValue(code); | ||||
}; | ||||
Brian E. Granger
|
r4349 | |||
Brian E. Granger
|
r4352 | CodeCell.prototype.at_top = function () { | ||
var cursor = this.code_mirror.getCursor(); | ||||
if (cursor.line === 0) { | ||||
return true; | ||||
} else { | ||||
return false; | ||||
} | ||||
Brian E. Granger
|
r4349 | }; | ||
Brian E. Granger
|
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; | ||||
} | ||||
Brian E. Granger
|
r4349 | }; | ||
Brian E. Granger
|
r4352 | CodeCell.prototype.fromJSON = function (data) { | ||
Brian E. Granger
|
r4497 | // console.log('Import from JSON:', data); | ||
Brian E. Granger
|
r4352 | if (data.cell_type === 'code') { | ||
Brian E. Granger
|
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(); | ||||
}; | ||||
Brian E. Granger
|
r4497 | var len = data.outputs.length; | ||
for (var i=0; i<len; i++) { | ||||
this.append_output(data.outputs[i]); | ||||
}; | ||||
Brian E. Granger
|
r4352 | }; | ||
}; | ||||
CodeCell.prototype.toJSON = function () { | ||||
Brian E. Granger
|
r4497 | var data = {}; | ||
Brian E. Granger
|
r4484 | data.input = this.get_code(); | ||
data.cell_type = 'code'; | ||||
if (this.input_prompt_number !== ' ') { | ||||
data.prompt_number = this.input_prompt_number | ||||
Brian E. Granger
|
r4352 | }; | ||
Brian E. Granger
|
r4497 | var outputs = []; | ||
var len = this.outputs.length; | ||||
for (var i=0; i<len; i++) { | ||||
outputs[i] = this.outputs[i]; | ||||
}; | ||||
data.outputs = outputs; | ||||
Brian E. Granger
|
r4484 | data.language = 'python'; | ||
Brian E. Granger
|
r4497 | // console.log('Export to JSON:',data); | ||
Brian E. Granger
|
r4484 | return data; | ||
Brian E. Granger
|
r4352 | }; | ||
Brian E. Granger
|
r4497 | |||
Brian E. Granger
|
r4352 | IPython.CodeCell = CodeCell; | ||
return IPython; | ||||
}(IPython)); | ||||