outputarea.js
1001 lines
| 34.2 KiB
| application/javascript
|
JavascriptLexer
|
r16568 | // Copyright (c) IPython Development Team. | ||
// Distributed under the terms of the Modified BSD License. | ||||
|
r7177 | |||
|
r17198 | define([ | ||
'base/js/namespace', | ||||
|
r17215 | 'jqueryui', | ||
|
r17198 | 'base/js/utils', | ||
'base/js/security', | ||||
'base/js/keyboard', | ||||
'notebook/js/mathjaxutils', | ||||
], function(IPython, $, utils, security, keyboard, mathjaxutils) { | ||||
|
r7177 | "use strict"; | ||
|
r10776 | /** | ||
* @class OutputArea | ||||
* | ||||
* @constructor | ||||
*/ | ||||
|
r17214 | var OutputArea = function (options) { | ||
this.selector = options.selector; | ||||
this.events = options.events; | ||||
this.keyboard_manager = options.keyboard_manager; | ||||
this.wrapper = $(options.selector); | ||||
|
r7177 | this.outputs = []; | ||
this.collapsed = false; | ||||
|
r7362 | this.scrolled = false; | ||
|
r14856 | this.trusted = true; | ||
|
r12592 | this.clear_queued = null; | ||
|
r17214 | if (options.prompt_area === undefined) { | ||
|
r7177 | this.prompt_area = true; | ||
|
r7181 | } else { | ||
|
r17214 | this.prompt_area = options.prompt_area; | ||
|
r9555 | } | ||
|
r7362 | this.create_elements(); | ||
|
r7177 | this.style(); | ||
|
r7362 | this.bind_events(); | ||
}; | ||||
|
r14886 | |||
/** | ||||
* Class prototypes | ||||
**/ | ||||
|
r7362 | OutputArea.prototype.create_elements = function () { | ||
this.element = $("<div/>"); | ||||
this.collapse_button = $("<div/>"); | ||||
this.prompt_overlay = $("<div/>"); | ||||
this.wrapper.append(this.prompt_overlay); | ||||
this.wrapper.append(this.element); | ||||
this.wrapper.append(this.collapse_button); | ||||
|
r7177 | }; | ||
OutputArea.prototype.style = function () { | ||||
|
r7362 | this.collapse_button.hide(); | ||
this.prompt_overlay.hide(); | ||||
this.wrapper.addClass('output_wrapper'); | ||||
|
r13332 | this.element.addClass('output'); | ||
|
r7362 | |||
|
r16913 | this.collapse_button.addClass("btn btn-default output_collapsed"); | ||
|
r9903 | this.collapse_button.attr('title', 'click to expand output'); | ||
|
r14634 | this.collapse_button.text('. . .'); | ||
|
r7362 | |||
this.prompt_overlay.addClass('out_prompt_overlay prompt'); | ||||
|
r9903 | this.prompt_overlay.attr('title', 'click to expand output; double click to hide output'); | ||
|
r7362 | |||
|
r7177 | this.collapse(); | ||
}; | ||||
|
r10776 | /** | ||
* Should the OutputArea scroll? | ||||
* Returns whether the height (in lines) exceeds a threshold. | ||||
* | ||||
* @private | ||||
* @method _should_scroll | ||||
* @param [lines=100]{Integer} | ||||
* @return {Bool} | ||||
* | ||||
*/ | ||||
|
r7362 | OutputArea.prototype._should_scroll = function (lines) { | ||
|
r10776 | if (lines <=0 ){ return } | ||
|
r7362 | if (!lines) { | ||
|
r7728 | lines = 100; | ||
|
r7362 | } | ||
// line-height from http://stackoverflow.com/questions/1185151 | ||||
var fontSize = this.element.css('font-size'); | ||||
var lineHeight = Math.floor(parseInt(fontSize.replace('px','')) * 1.5); | ||||
return (this.element.height() > lines * lineHeight); | ||||
}; | ||||
OutputArea.prototype.bind_events = function () { | ||||
var that = this; | ||||
this.prompt_overlay.dblclick(function () { that.toggle_output(); }); | ||||
this.prompt_overlay.click(function () { that.toggle_scroll(); }); | ||||
this.element.resize(function () { | ||||
|
r7733 | // FIXME: Firefox on Linux misbehaves, so automatic scrolling is disabled | ||
|
r17198 | if ( utils.browser[0] === "Firefox" ) { | ||
|
r7733 | return; | ||
} | ||||
|
r7362 | // maybe scroll output, | ||
// if it's grown large enough and hasn't already been scrolled. | ||||
|
r10776 | if ( !that.scrolled && that._should_scroll(OutputArea.auto_scroll_threshold)) { | ||
|
r7362 | that.scroll_area(); | ||
} | ||||
}); | ||||
this.collapse_button.click(function () { | ||||
that.expand(); | ||||
}); | ||||
}; | ||||
|
r7177 | OutputArea.prototype.collapse = function () { | ||
if (!this.collapsed) { | ||||
this.element.hide(); | ||||
|
r7362 | this.prompt_overlay.hide(); | ||
if (this.element.html()){ | ||||
this.collapse_button.show(); | ||||
} | ||||
|
r7177 | this.collapsed = true; | ||
|
r9555 | } | ||
|
r7177 | }; | ||
OutputArea.prototype.expand = function () { | ||||
if (this.collapsed) { | ||||
|
r7362 | this.collapse_button.hide(); | ||
|
r7177 | this.element.show(); | ||
|
r7362 | this.prompt_overlay.show(); | ||
|
r7177 | this.collapsed = false; | ||
|
r9555 | } | ||
|
r7177 | }; | ||
OutputArea.prototype.toggle_output = function () { | ||||
if (this.collapsed) { | ||||
this.expand(); | ||||
} else { | ||||
this.collapse(); | ||||
|
r9555 | } | ||
|
r7177 | }; | ||
|
r7362 | OutputArea.prototype.scroll_area = function () { | ||
this.element.addClass('output_scroll'); | ||||
|
r7423 | this.prompt_overlay.attr('title', 'click to unscroll output; double click to hide'); | ||
|
r7362 | this.scrolled = true; | ||
}; | ||||
OutputArea.prototype.unscroll_area = function () { | ||||
this.element.removeClass('output_scroll'); | ||||
|
r7423 | this.prompt_overlay.attr('title', 'click to scroll output; double click to hide'); | ||
|
r7362 | this.scrolled = false; | ||
}; | ||||
|
r10776 | /** | ||
* | ||||
|
r10778 | * Scroll OutputArea if height supperior than a threshold (in lines). | ||
|
r10776 | * | ||
|
r10778 | * Threshold is a maximum number of lines. If unspecified, defaults to | ||
|
r10782 | * OutputArea.minimum_scroll_threshold. | ||
|
r10778 | * | ||
|
r10793 | * Negative threshold will prevent the OutputArea from ever scrolling. | ||
|
r10776 | * | ||
* @method scroll_if_long | ||||
|
r10793 | * | ||
* @param [lines=20]{Number} Default to 20 if not set, | ||||
* behavior undefined for value of `0`. | ||||
|
r10776 | * | ||
**/ | ||||
|
r7362 | OutputArea.prototype.scroll_if_long = function (lines) { | ||
|
r10782 | var n = lines | OutputArea.minimum_scroll_threshold; | ||
|
r10776 | if(n <= 0){ | ||
return | ||||
} | ||||
if (this._should_scroll(n)) { | ||||
|
r7362 | // only allow scrolling long-enough output | ||
this.scroll_area(); | ||||
|
r9555 | } | ||
|
r7362 | }; | ||
OutputArea.prototype.toggle_scroll = function () { | ||||
if (this.scrolled) { | ||||
this.unscroll_area(); | ||||
} else { | ||||
// only allow scrolling long-enough output | ||||
|
r10776 | this.scroll_if_long(); | ||
|
r9555 | } | ||
|
r7362 | }; | ||
|
r7177 | // typeset with MathJax if MathJax is available | ||
OutputArea.prototype.typeset = function () { | ||||
if (window.MathJax){ | ||||
MathJax.Hub.Queue(["Typeset",MathJax.Hub]); | ||||
} | ||||
}; | ||||
|
r13207 | OutputArea.prototype.handle_output = function (msg) { | ||
|
r7177 | var json = {}; | ||
|
r13207 | var msg_type = json.output_type = msg.header.msg_type; | ||
var content = msg.content; | ||||
|
r7177 | if (msg_type === "stream") { | ||
json.text = content.data; | ||||
json.stream = content.name; | ||||
} else if (msg_type === "display_data") { | ||||
|
r14131 | json = content.data; | ||
json.output_type = msg_type; | ||||
json.metadata = content.metadata; | ||||
|
r16568 | } else if (msg_type === "execute_result") { | ||
|
r14131 | json = content.data; | ||
|
r16589 | json.output_type = msg_type; | ||
|
r14131 | json.metadata = content.metadata; | ||
|
r7177 | json.prompt_number = content.execution_count; | ||
|
r16569 | } else if (msg_type === "error") { | ||
|
r16589 | json.ename = content.ename; | ||
json.evalue = content.evalue; | ||||
json.traceback = content.traceback; | ||||
} else { | ||||
console.log("unhandled output message", msg); | ||||
return; | ||||
|
r9555 | } | ||
|
r14134 | this.append_output(json); | ||
|
r7177 | }; | ||
|
r14118 | |||
|
r14157 | |||
|
r14124 | OutputArea.prototype.rename_keys = function (data, key_map) { | ||
|
r14127 | var remapped = {}; | ||
|
r14115 | for (var key in data) { | ||
|
r14124 | var new_key = key_map[key] || key; | ||
|
r14157 | remapped[new_key] = data[key]; | ||
|
r14112 | } | ||
|
r14127 | return remapped; | ||
|
r7177 | }; | ||
|
r14158 | |||
OutputArea.output_types = [ | ||||
'application/javascript', | ||||
'text/html', | ||||
|
r16364 | 'text/markdown', | ||
|
r14158 | 'text/latex', | ||
'image/svg+xml', | ||||
'image/png', | ||||
'image/jpeg', | ||||
|
r15127 | 'application/pdf', | ||
|
r14158 | 'text/plain' | ||
]; | ||||
OutputArea.prototype.validate_output = function (json) { | ||||
// scrub invalid outputs | ||||
// TODO: right now everything is a string, but JSON really shouldn't be. | ||||
// nbformat 4 will fix that. | ||||
$.map(OutputArea.output_types, function(key){ | ||||
if (json[key] !== undefined && typeof json[key] !== 'string') { | ||||
console.log("Invalid type for " + key, json[key]); | ||||
delete json[key]; | ||||
} | ||||
}); | ||||
return json; | ||||
}; | ||||
|
r14856 | |||
|
r14134 | OutputArea.prototype.append_output = function (json) { | ||
|
r7177 | this.expand(); | ||
|
r16191 | |||
// validate output data types | ||||
json = this.validate_output(json); | ||||
|
r12592 | // Clear the output if clear is queued. | ||
|
r12817 | var needs_height_reset = false; | ||
|
r12592 | if (this.clear_queued) { | ||
this.clear_output(false); | ||||
|
r12817 | needs_height_reset = true; | ||
|
r12592 | } | ||
|
r16187 | |||
|
r17305 | var record_output = true; | ||
|
r16589 | if (json.output_type === 'execute_result') { | ||
|
r16568 | this.append_execute_result(json); | ||
|
r16589 | } else if (json.output_type === 'error') { | ||
|
r16569 | this.append_error(json); | ||
|
r7177 | } else if (json.output_type === 'stream') { | ||
|
r17305 | // append_stream might have merged the output with earlier stream output | ||
record_output = this.append_stream(json); | ||||
|
r9555 | } | ||
|
r16187 | |||
|
r16191 | // We must release the animation fixed height in a callback since Gecko | ||
// (FireFox) doesn't render the image immediately as the data is | ||||
// available. | ||||
var that = this; | ||||
var handle_appended = function ($el) { | ||||
// Only reset the height to automatic if the height is currently | ||||
// fixed (done by wait=True flag on clear_output). | ||||
if (needs_height_reset) { | ||||
that.element.height(''); | ||||
} | ||||
that.element.trigger('resize'); | ||||
}; | ||||
|
r16187 | if (json.output_type === 'display_data') { | ||
this.append_display_data(json, handle_appended); | ||||
|
r16191 | } else { | ||
|
r16187 | handle_appended(); | ||
} | ||||
|
r14856 | |||
|
r17305 | if (record_output) { | ||
this.outputs.push(json); | ||||
} | ||||
|
r7177 | }; | ||
OutputArea.prototype.create_output_area = function () { | ||||
|
r10216 | var oa = $("<div/>").addClass("output_area"); | ||
|
r7177 | if (this.prompt_area) { | ||
oa.append($('<div/>').addClass('prompt')); | ||||
} | ||||
return oa; | ||||
}; | ||||
|
r13412 | |||
|
r14116 | function _get_metadata_key(metadata, key, mime) { | ||
var mime_md = metadata[mime]; | ||||
// mime-specific higher priority | ||||
if (mime_md && mime_md[key] !== undefined) { | ||||
return mime_md[key]; | ||||
} | ||||
// fallback on global | ||||
return metadata[key]; | ||||
} | ||||
OutputArea.prototype.create_output_subarea = function(md, classes, mime) { | ||||
|
r13412 | var subarea = $('<div/>').addClass('output_subarea').addClass(classes); | ||
|
r14116 | if (_get_metadata_key(md, 'isolated', mime)) { | ||
|
r13412 | // Create an iframe to isolate the subarea from the rest of the | ||
// document | ||||
|
r13418 | var iframe = $('<iframe/>').addClass('box-flex1'); | ||
|
r13419 | iframe.css({'height':1, 'width':'100%', 'display':'block'}); | ||
|
r13412 | iframe.attr('frameborder', 0); | ||
iframe.attr('scrolling', 'auto'); | ||||
// Once the iframe is loaded, the subarea is dynamically inserted | ||||
iframe.on('load', function() { | ||||
// Workaround needed by Firefox, to properly render svg inside | ||||
// iframes, see http://stackoverflow.com/questions/10177190/ | ||||
// svg-dynamically-added-to-iframe-does-not-render-correctly | ||||
this.contentDocument.open(); | ||||
// Insert the subarea into the iframe | ||||
// We must directly write the html. When using Jquery's append | ||||
// method, javascript is evaluated in the parent document and | ||||
|
r15376 | // not in the iframe document. At this point, subarea doesn't | ||
// contain any user content. | ||||
|
r13412 | this.contentDocument.write(subarea.html()); | ||
this.contentDocument.close(); | ||||
var body = this.contentDocument.body; | ||||
|
r13418 | // Adjust the iframe height automatically | ||
|
r13412 | iframe.height(body.scrollHeight + 'px'); | ||
}); | ||||
// Elements should be appended to the inner subarea and not to the | ||||
// iframe | ||||
iframe.append = function(that) { | ||||
subarea.append(that); | ||||
}; | ||||
return iframe; | ||||
} else { | ||||
return subarea; | ||||
} | ||||
} | ||||
|
r13792 | OutputArea.prototype._append_javascript_error = function (err, element) { | ||
|
r12332 | // display a message when a javascript error occurs in display output | ||
var msg = "Javascript error adding output!" | ||||
|
r13792 | if ( element === undefined ) return; | ||
|
r15376 | element | ||
.append($('<div/>').text(msg).addClass('js-error')) | ||||
.append($('<div/>').text(err.toString()).addClass('js-error')) | ||||
.append($('<div/>').text('See your browser Javascript console for more details.').addClass('js-error')); | ||||
|
r12332 | }; | ||
OutputArea.prototype._safe_append = function (toinsert) { | ||||
// safely append an item to the document | ||||
// this is an object created by user code, | ||||
// and may have errors, which should not be raised | ||||
// under any circumstances. | ||||
try { | ||||
this.element.append(toinsert); | ||||
} catch(err) { | ||||
console.log(err); | ||||
|
r13792 | // Create an actual output_area and output_subarea, which creates | ||
// the prompt area and the proper indentation. | ||||
var toinsert = this.create_output_area(); | ||||
var subarea = $('<div/>').addClass('output_subarea'); | ||||
toinsert.append(subarea); | ||||
this._append_javascript_error(err, subarea); | ||||
this.element.append(toinsert); | ||||
|
r12332 | } | ||
}; | ||||
|
r7177 | |||
|
r16568 | OutputArea.prototype.append_execute_result = function (json) { | ||
|
r7177 | var n = json.prompt_number || ' '; | ||
var toinsert = this.create_output_area(); | ||||
if (this.prompt_area) { | ||||
|
r14634 | toinsert.find('div.prompt').addClass('output_prompt').text('Out[' + n + ']:'); | ||
|
r7177 | } | ||
|
r15729 | var inserted = this.append_mime_type(json, toinsert); | ||
if (inserted) { | ||||
|
r16589 | inserted.addClass('output_result'); | ||
|
r15729 | } | ||
|
r12332 | this._safe_append(toinsert); | ||
|
r7177 | // If we just output latex, typeset it. | ||
|
r16364 | if ((json['text/latex'] !== undefined) || | ||
(json['text/html'] !== undefined) || | ||||
(json['text/markdown'] !== undefined)) { | ||||
|
r7177 | this.typeset(); | ||
|
r9555 | } | ||
|
r7177 | }; | ||
|
r16569 | OutputArea.prototype.append_error = function (json) { | ||
|
r7177 | var tb = json.traceback; | ||
if (tb !== undefined && tb.length > 0) { | ||||
var s = ''; | ||||
var len = tb.length; | ||||
for (var i=0; i<len; i++) { | ||||
s = s + tb[i] + '\n'; | ||||
} | ||||
s = s + '\n'; | ||||
var toinsert = this.create_output_area(); | ||||
|
r15783 | var append_text = OutputArea.append_map['text/plain']; | ||
if (append_text) { | ||||
|
r16589 | append_text.apply(this, [s, {}, toinsert]).addClass('output_error'); | ||
|
r15783 | } | ||
|
r12332 | this._safe_append(toinsert); | ||
|
r9555 | } | ||
|
r7177 | }; | ||
OutputArea.prototype.append_stream = function (json) { | ||||
// temporary fix: if stream undefined (json file written prior to this patch), | ||||
// default to most likely stdout: | ||||
|
r15783 | if (json.stream === undefined){ | ||
|
r7177 | json.stream = 'stdout'; | ||
} | ||||
|
r7350 | var text = json.text; | ||
|
r7177 | var subclass = "output_"+json.stream; | ||
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 | ||||
// escape ANSI & HTML specials: | ||||
|
r17305 | last.text = utils.fixCarriageReturn(last.text + json.text); | ||
|
r7350 | var pre = this.element.find('div.'+subclass).last().find('pre'); | ||
|
r17305 | var html = utils.fixConsole(last.text); | ||
|
r15406 | // The only user content injected with this HTML call is | ||
|
r15376 | // escaped by the fixConsole() method. | ||
|
r7339 | pre.html(html); | ||
|
r17305 | // return false signals that we merged this output with the previous one, | ||
// and the new output shouldn't be recorded. | ||||
return false; | ||||
|
r7177 | } | ||
} | ||||
|
r7339 | |||
if (!text.replace("\r", "")) { | ||||
// text is nothing (empty string, \r, etc.) | ||||
// so don't append any elements, which might add undesirable space | ||||
|
r17305 | // return true to indicate the output should be recorded. | ||
return true; | ||||
|
r7339 | } | ||
|
r7177 | // If we got here, attach a new div | ||
var toinsert = this.create_output_area(); | ||||
|
r15783 | var append_text = OutputArea.append_map['text/plain']; | ||
if (append_text) { | ||||
append_text.apply(this, [text, {}, toinsert]).addClass("output_stream " + subclass); | ||||
} | ||||
|
r12332 | this._safe_append(toinsert); | ||
|
r17305 | return true; | ||
|
r7177 | }; | ||
|
r16187 | OutputArea.prototype.append_display_data = function (json, handle_inserted) { | ||
|
r7177 | var toinsert = this.create_output_area(); | ||
|
r16187 | if (this.append_mime_type(json, toinsert, handle_inserted)) { | ||
|
r13454 | this._safe_append(toinsert); | ||
// If we just output latex, typeset it. | ||||
|
r16364 | if ((json['text/latex'] !== undefined) || | ||
(json['text/html'] !== undefined) || | ||||
(json['text/markdown'] !== undefined)) { | ||||
|
r13454 | this.typeset(); | ||
} | ||||
|
r9555 | } | ||
|
r7177 | }; | ||
|
r14856 | OutputArea.safe_outputs = { | ||
'text/plain' : true, | ||||
|
r15643 | 'text/latex' : true, | ||
|
r14856 | 'image/png' : true, | ||
'image/jpeg' : true | ||||
}; | ||||
|
r16187 | OutputArea.prototype.append_mime_type = function (json, element, handle_inserted) { | ||
|
r16226 | for (var i=0; i < OutputArea.display_order.length; i++) { | ||
var type = OutputArea.display_order[i]; | ||||
|
r14135 | var append = OutputArea.append_map[type]; | ||
if ((json[type] !== undefined) && append) { | ||||
|
r15644 | var value = json[type]; | ||
|
r14856 | if (!this.trusted && !OutputArea.safe_outputs[type]) { | ||
|
r15644 | // not trusted, sanitize HTML | ||
|
r15634 | if (type==='text/html' || type==='text/svg') { | ||
|
r17198 | value = security.sanitize_html(value); | ||
|
r15644 | } else { | ||
|
r15658 | // don't display if we don't know how to sanitize it | ||
|
r15661 | console.log("Ignoring untrusted " + type + " output."); | ||
|
r15728 | continue; | ||
|
r14856 | } | ||
} | ||||
|
r14140 | var md = json.metadata || {}; | ||
|
r16187 | var toinsert = append.apply(this, [value, md, element, handle_inserted]); | ||
// Since only the png and jpeg mime types call the inserted | ||||
|
r16191 | // callback, if the mime type is something other we must call the | ||
|
r16187 | // inserted callback only when the element is actually inserted | ||
// into the DOM. Use a timeout of 0 to do this. | ||||
|
r16189 | if (['image/png', 'image/jpeg'].indexOf(type) < 0 && handle_inserted !== undefined) { | ||
|
r16187 | setTimeout(handle_inserted, 0); | ||
} | ||||
|
r17198 | this.events.trigger('output_appended.OutputArea', [type, value, md, toinsert]); | ||
|
r15729 | return toinsert; | ||
|
r9540 | } | ||
} | ||||
|
r15729 | return null; | ||
|
r7177 | }; | ||
|
r15762 | var append_html = function (html, md, element) { | ||
|
r14140 | var type = 'text/html'; | ||
|
r14116 | var toinsert = this.create_output_subarea(md, "output_html rendered_html", type); | ||
|
r17198 | this.keyboard_manager.register_events(toinsert); | ||
|
r7177 | toinsert.append(html); | ||
element.append(toinsert); | ||||
|
r14883 | return toinsert; | ||
|
r7177 | }; | ||
|
r16364 | var append_markdown = function(markdown, md, element) { | ||
var type = 'text/markdown'; | ||||
var toinsert = this.create_output_subarea(md, "output_markdown", type); | ||||
|
r17198 | var text_and_math = mathjaxutils.remove_math(markdown); | ||
|
r16364 | var text = text_and_math[0]; | ||
var math = text_and_math[1]; | ||||
var html = marked.parser(marked.lexer(text)); | ||||
|
r17198 | html = mathjaxutils.replace_math(html, math); | ||
|
r16364 | toinsert.append(html); | ||
element.append(toinsert); | ||||
return toinsert; | ||||
}; | ||||
|
r15762 | var append_javascript = function (js, md, element) { | ||
|
r7177 | // We just eval the JS code, element appears in the local scope. | ||
|
r14140 | var type = 'application/javascript'; | ||
|
r14884 | var toinsert = this.create_output_subarea(md, "output_javascript", type); | ||
|
r17198 | this.keyboard_manager.register_events(toinsert); | ||
|
r14884 | element.append(toinsert); | ||
|
r15992 | |||
// Fix for ipython/issues/5293, make sure `element` is the area which | ||||
// output can be inserted into at the time of JS execution. | ||||
element = toinsert; | ||||
|
r8071 | try { | ||
eval(js); | ||||
} catch(err) { | ||||
|
r13792 | console.log(err); | ||
|
r14884 | this._append_javascript_error(err, toinsert); | ||
|
r8071 | } | ||
|
r14884 | return toinsert; | ||
|
r9555 | }; | ||
|
r7177 | |||
|
r15762 | var append_text = function (data, md, element) { | ||
|
r14140 | var type = 'text/plain'; | ||
|
r14116 | var toinsert = this.create_output_subarea(md, "output_text", type); | ||
|
r7177 | // escape ANSI & HTML specials in plaintext: | ||
data = utils.fixConsole(data); | ||||
|
r7339 | data = utils.fixCarriageReturn(data); | ||
|
r8528 | data = utils.autoLinkUrls(data); | ||
|
r15406 | // The only user content injected with this HTML call is | ||
|
r15376 | // escaped by the fixConsole() method. | ||
|
r7177 | toinsert.append($("<pre/>").html(data)); | ||
element.append(toinsert); | ||||
|
r14883 | return toinsert; | ||
|
r7177 | }; | ||
|
r16203 | var append_svg = function (svg_html, md, element) { | ||
|
r14140 | var type = 'image/svg+xml'; | ||
|
r14116 | var toinsert = this.create_output_subarea(md, "output_svg", type); | ||
|
r16203 | |||
// Get the svg element from within the HTML. | ||||
var svg = $('<div />').html(svg_html).find('svg'); | ||||
var svg_area = $('<div />'); | ||||
var width = svg.attr('width'); | ||||
var height = svg.attr('height'); | ||||
svg | ||||
.width('100%') | ||||
.height('100%'); | ||||
svg_area | ||||
.width(width) | ||||
.height(height); | ||||
// The jQuery resize handlers don't seem to work on the svg element. | ||||
// When the svg renders completely, measure it's size and set the parent | ||||
// div to that size. Then set the svg to 100% the size of the parent | ||||
// div and make the parent div resizable. | ||||
this._dblclick_to_reset_size(svg_area, true, false); | ||||
svg_area.append(svg); | ||||
toinsert.append(svg_area); | ||||
|
r7355 | element.append(toinsert); | ||
|
r16203 | |||
|
r14883 | return toinsert; | ||
|
r7177 | }; | ||
|
r16203 | OutputArea.prototype._dblclick_to_reset_size = function (img, immediately, resize_parent) { | ||
// Add a resize handler to an element | ||||
// | ||||
// img: jQuery element | ||||
// immediately: bool=False | ||||
// Wait for the element to load before creating the handle. | ||||
// resize_parent: bool=True | ||||
// Should the parent of the element be resized when the element is | ||||
// reset (by double click). | ||||
var callback = function (){ | ||||
|
r7601 | var h0 = img.height(); | ||
var w0 = img.width(); | ||||
if (!(h0 && w0)) { | ||||
|
r15551 | // zero size, don't make it resizable | ||
|
r9555 | return; | ||
|
r7601 | } | ||
|
r7599 | img.resizable({ | ||
aspectRatio: true, | ||||
|
r7601 | autoHide: true | ||
}); | ||||
img.dblclick(function () { | ||||
// resize wrapper & image together for some reason: | ||||
img.height(h0); | ||||
img.width(w0); | ||||
|
r16203 | if (resize_parent === undefined || resize_parent) { | ||
img.parent().height(h0); | ||||
img.parent().width(w0); | ||||
} | ||||
|
r7599 | }); | ||
|
r16203 | }; | ||
if (immediately) { | ||||
callback(); | ||||
} else { | ||||
img.on("load", callback); | ||||
} | ||||
|
r9555 | }; | ||
|
r14727 | |||
var set_width_height = function (img, md, mime) { | ||||
// set width and height of an img element from metadata | ||||
var height = _get_metadata_key(md, 'height', mime); | ||||
|
r14807 | if (height !== undefined) img.attr('height', height); | ||
|
r14727 | var width = _get_metadata_key(md, 'width', mime); | ||
|
r14807 | if (width !== undefined) img.attr('width', width); | ||
|
r14727 | }; | ||
|
r16187 | var append_png = function (png, md, element, handle_inserted) { | ||
|
r14140 | var type = 'image/png'; | ||
|
r14116 | var toinsert = this.create_output_subarea(md, "output_png", type); | ||
|
r16189 | var img = $("<img/>"); | ||
if (handle_inserted !== undefined) { | ||||
|
r16191 | img.on('load', function(){ | ||
handle_inserted(img); | ||||
}); | ||||
|
r16187 | } | ||
|
r16190 | img[0].src = 'data:image/png;base64,'+ png; | ||
|
r14807 | set_width_height(img, md, 'image/png'); | ||
|
r7601 | this._dblclick_to_reset_size(img); | ||
|
r7352 | toinsert.append(img); | ||
|
r7177 | element.append(toinsert); | ||
|
r14883 | return toinsert; | ||
|
r7177 | }; | ||
|
r16187 | var append_jpeg = function (jpeg, md, element, handle_inserted) { | ||
|
r14140 | var type = 'image/jpeg'; | ||
|
r14116 | var toinsert = this.create_output_subarea(md, "output_jpeg", type); | ||
|
r16189 | var img = $("<img/>"); | ||
if (handle_inserted !== undefined) { | ||||
|
r16191 | img.on('load', function(){ | ||
handle_inserted(img); | ||||
}); | ||||
|
r16187 | } | ||
|
r16190 | img[0].src = 'data:image/jpeg;base64,'+ jpeg; | ||
|
r14807 | set_width_height(img, md, 'image/jpeg'); | ||
|
r7601 | this._dblclick_to_reset_size(img); | ||
|
r7352 | toinsert.append(img); | ||
|
r7177 | element.append(toinsert); | ||
|
r14883 | return toinsert; | ||
|
r7177 | }; | ||
|
r15762 | var append_pdf = function (pdf, md, element) { | ||
|
r15127 | var type = 'application/pdf'; | ||
var toinsert = this.create_output_subarea(md, "output_pdf", type); | ||||
var a = $('<a/>').attr('href', 'data:application/pdf;base64,'+pdf); | ||||
a.attr('target', '_blank'); | ||||
a.text('View PDF') | ||||
toinsert.append(a); | ||||
element.append(toinsert); | ||||
return toinsert; | ||||
} | ||||
|
r15762 | var append_latex = function (latex, md, element) { | ||
|
r7177 | // This method cannot do the typesetting because the latex first has to | ||
// be on the page. | ||||
|
r14140 | var type = 'text/latex'; | ||
|
r14116 | var toinsert = this.create_output_subarea(md, "output_latex", type); | ||
|
r7177 | toinsert.append(latex); | ||
element.append(toinsert); | ||||
|
r14883 | return toinsert; | ||
|
r7177 | }; | ||
|
r10776 | |||
|
r14132 | |||
|
r13207 | OutputArea.prototype.append_raw_input = function (msg) { | ||
|
r10370 | var that = this; | ||
|
r10368 | this.expand(); | ||
|
r13207 | var content = msg.content; | ||
|
r10368 | var area = this.create_output_area(); | ||
|
r11612 | |||
// disable any other raw_inputs, if they are left around | ||||
|
r15825 | $("div.output_subarea.raw_input_container").remove(); | ||
|
r11612 | |||
|
r16573 | var input_type = content.password ? 'password' : 'text'; | ||
|
r10368 | area.append( | ||
$("<div/>") | ||||
|
r15825 | .addClass("box-flex1 output_subarea raw_input_container") | ||
|
r10368 | .append( | ||
|
r10370 | $("<span/>") | ||
|
r15825 | .addClass("raw_input_prompt") | ||
|
r10370 | .text(content.prompt) | ||
) | ||||
.append( | ||||
$("<input/>") | ||||
.addClass("raw_input") | ||||
|
r16573 | .attr('type', input_type) | ||
|
r10934 | .attr("size", 47) | ||
|
r10370 | .keydown(function (event, ui) { | ||
// make sure we submit on enter, | ||||
// and don't re-execute the *cell* on shift-enter | ||||
|
r17198 | if (event.which === keyboard.keycodes.enter) { | ||
|
r10370 | that._submit_raw_input(); | ||
return false; | ||||
} | ||||
}) | ||||
|
r10368 | ) | ||
|
r10370 | ); | ||
|
r14046 | |||
|
r10368 | this.element.append(area); | ||
|
r14046 | var raw_input = area.find('input.raw_input'); | ||
// Register events that enable/disable the keyboard manager while raw | ||||
// input is focused. | ||||
|
r17198 | this.keyboard_manager.register_events(raw_input); | ||
|
r14046 | // Note, the following line used to read raw_input.focus().focus(). | ||
// This seemed to be needed otherwise only the cell would be focused. | ||||
// But with the modal UI, this seems to work fine with one call to focus(). | ||||
raw_input.focus(); | ||||
|
r10368 | } | ||
|
r14046 | |||
|
r10368 | OutputArea.prototype._submit_raw_input = function (evt) { | ||
|
r15825 | var container = this.element.find("div.raw_input_container"); | ||
var theprompt = container.find("span.raw_input_prompt"); | ||||
|
r10368 | var theinput = container.find("input.raw_input"); | ||
|
r10934 | var value = theinput.val(); | ||
|
r16573 | var echo = value; | ||
// don't echo if it's a password | ||||
if (theinput.attr('type') == 'password') { | ||||
echo = '········'; | ||||
} | ||||
|
r10368 | var content = { | ||
output_type : 'stream', | ||||
|
r17062 | stream : 'stdout', | ||
|
r16573 | text : theprompt.text() + echo + '\n' | ||
|
r10368 | } | ||
// remove form container | ||||
container.parent().remove(); | ||||
// replace with plaintext version in stdout | ||||
this.append_output(content, false); | ||||
|
r17198 | this.events.trigger('send_input_reply.Kernel', value); | ||
|
r10368 | } | ||
|
r7177 | |||
|
r13207 | OutputArea.prototype.handle_clear_output = function (msg) { | ||
|
r14977 | // msg spec v4 had stdout, stderr, display keys | ||
// v4.1 replaced these with just wait | ||||
// The default behavior is the same (stdout=stderr=display=True, wait=False), | ||||
// so v4 messages will still be properly handled, | ||||
// except for the rarely used clearing less than all output. | ||||
this.clear_output(msg.content.wait || false); | ||||
|
r9555 | }; | ||
|
r7177 | |||
|
r12592 | OutputArea.prototype.clear_output = function(wait) { | ||
if (wait) { | ||||
|
r12582 | |||
|
r12592 | // If a clear is queued, clear before adding another to the queue. | ||
if (this.clear_queued) { | ||||
this.clear_output(false); | ||||
}; | ||||
this.clear_queued = true; | ||||
} else { | ||||
|
r12606 | // Fix the output div's height if the clear_output is waiting for | ||
// new output (it is being used in an animation). | ||||
if (this.clear_queued) { | ||||
var height = this.element.height(); | ||||
this.element.height(height); | ||||
this.clear_queued = false; | ||||
} | ||||
|
r16191 | // Clear all | ||
// Remove load event handlers from img tags because we don't want | ||||
// them to fire if the image is never added to the page. | ||||
this.element.find('img').off('load'); | ||||
|
r12592 | this.element.html(""); | ||
this.outputs = []; | ||||
|
r14856 | this.trusted = true; | ||
|
r12592 | this.unscroll_area(); | ||
return; | ||||
}; | ||||
|
r7177 | }; | ||
// JSON serialization | ||||
OutputArea.prototype.fromJSON = function (outputs) { | ||||
var len = outputs.length; | ||||
|
r14127 | var data; | ||
|
r14134 | |||
|
r7177 | for (var i=0; i<len; i++) { | ||
|
r14130 | data = outputs[i]; | ||
var msg_type = data.output_type; | ||||
|
r16589 | if (msg_type == "pyout") { | ||
// pyout message has been renamed to execute_result, | ||||
// but the nbformat has not been updated, | ||||
// so transform back to pyout for json. | ||||
msg_type = data.output_type = "execute_result"; | ||||
} else if (msg_type == "pyerr") { | ||||
// pyerr message has been renamed to error, | ||||
// but the nbformat has not been updated, | ||||
// so transform back to pyerr for json. | ||||
msg_type = data.output_type = "error"; | ||||
} | ||||
if (msg_type === "display_data" || msg_type === "execute_result") { | ||||
|
r14123 | // convert short keys to mime keys | ||
|
r14136 | // TODO: remove mapping of short keys when we update to nbformat 4 | ||
|
r14130 | data = this.rename_keys(data, OutputArea.mime_map_r); | ||
data.metadata = this.rename_keys(data.metadata, OutputArea.mime_map_r); | ||||
|
r16667 | // msg spec JSON is an object, nbformat v3 JSON is a JSON string | ||
if (data["application/json"] !== undefined && typeof data["application/json"] === 'string') { | ||||
data["application/json"] = JSON.parse(data["application/json"]); | ||||
} | ||||
|
r14120 | } | ||
|
r14134 | this.append_output(data); | ||
|
r9555 | } | ||
|
r7177 | }; | ||
OutputArea.prototype.toJSON = function () { | ||||
var outputs = []; | ||||
var len = this.outputs.length; | ||||
|
r14127 | var data; | ||
|
r7177 | for (var i=0; i<len; i++) { | ||
|
r14130 | data = this.outputs[i]; | ||
var msg_type = data.output_type; | ||||
|
r16589 | if (msg_type === "display_data" || msg_type === "execute_result") { | ||
|
r14123 | // convert mime keys to short keys | ||
|
r14130 | data = this.rename_keys(data, OutputArea.mime_map); | ||
|
r14136 | data.metadata = this.rename_keys(data.metadata, OutputArea.mime_map); | ||
|
r16667 | // msg spec JSON is an object, nbformat v3 JSON is a JSON string | ||
if (data.json !== undefined && typeof data.json !== 'string') { | ||||
data.json = JSON.stringify(data.json); | ||||
} | ||||
|
r14123 | } | ||
|
r16589 | if (msg_type == "execute_result") { | ||
// pyout message has been renamed to execute_result, | ||||
// but the nbformat has not been updated, | ||||
// so transform back to pyout for json. | ||||
data.output_type = "pyout"; | ||||
} else if (msg_type == "error") { | ||||
// pyerr message has been renamed to error, | ||||
// but the nbformat has not been updated, | ||||
// so transform back to pyerr for json. | ||||
data.output_type = "pyerr"; | ||||
} | ||||
|
r14123 | outputs[i] = data; | ||
|
r9555 | } | ||
|
r7177 | return outputs; | ||
}; | ||||
|
r14985 | /** | ||
* Class properties | ||||
**/ | ||||
/** | ||||
* Threshold to trigger autoscroll when the OutputArea is resized, | ||||
* typically when new outputs are added. | ||||
* | ||||
* Behavior is undefined if autoscroll is lower than minimum_scroll_threshold, | ||||
* unless it is < 0, in which case autoscroll will never be triggered | ||||
* | ||||
* @property auto_scroll_threshold | ||||
* @type Number | ||||
* @default 100 | ||||
* | ||||
**/ | ||||
OutputArea.auto_scroll_threshold = 100; | ||||
/** | ||||
* Lower limit (in lines) for OutputArea to be made scrollable. OutputAreas | ||||
* shorter than this are never scrolled. | ||||
* | ||||
* @property minimum_scroll_threshold | ||||
* @type Number | ||||
* @default 20 | ||||
* | ||||
**/ | ||||
OutputArea.minimum_scroll_threshold = 20; | ||||
OutputArea.mime_map = { | ||||
"text/plain" : "text", | ||||
"text/html" : "html", | ||||
"image/svg+xml" : "svg", | ||||
"image/png" : "png", | ||||
"image/jpeg" : "jpeg", | ||||
"text/latex" : "latex", | ||||
"application/json" : "json", | ||||
"application/javascript" : "javascript", | ||||
}; | ||||
OutputArea.mime_map_r = { | ||||
"text" : "text/plain", | ||||
"html" : "text/html", | ||||
"svg" : "image/svg+xml", | ||||
"png" : "image/png", | ||||
"jpeg" : "image/jpeg", | ||||
"latex" : "text/latex", | ||||
"json" : "application/json", | ||||
"javascript" : "application/javascript", | ||||
}; | ||||
OutputArea.display_order = [ | ||||
'application/javascript', | ||||
'text/html', | ||||
|
r16364 | 'text/markdown', | ||
|
r14985 | 'text/latex', | ||
'image/svg+xml', | ||||
'image/png', | ||||
'image/jpeg', | ||||
|
r15127 | 'application/pdf', | ||
|
r14985 | 'text/plain' | ||
]; | ||||
OutputArea.append_map = { | ||||
|
r15762 | "text/plain" : append_text, | ||
"text/html" : append_html, | ||||
|
r16364 | "text/markdown": append_markdown, | ||
|
r15762 | "image/svg+xml" : append_svg, | ||
"image/png" : append_png, | ||||
"image/jpeg" : append_jpeg, | ||||
"text/latex" : append_latex, | ||||
"application/javascript" : append_javascript, | ||||
"application/pdf" : append_pdf | ||||
|
r14985 | }; | ||
|
r7177 | |||
|
r17198 | // For backwards compatability. | ||
|
r7177 | IPython.OutputArea = OutputArea; | ||
|
r17201 | return {'OutputArea': OutputArea}; | ||
|
r17198 | }); | ||