outputarea.js
942 lines
| 31.5 KiB
| application/javascript
|
JavascriptLexer
|
r7177 | //---------------------------------------------------------------------------- | ||
|
r10776 | // Copyright (C) 2008 The IPython Development Team | ||
|
r7177 | // | ||
// Distributed under the terms of the BSD License. The full license is in | ||||
// the file COPYING, distributed as part of this software. | ||||
//---------------------------------------------------------------------------- | ||||
//============================================================================ | ||||
// OutputArea | ||||
//============================================================================ | ||||
|
r10776 | /** | ||
* @module IPython | ||||
* @namespace IPython | ||||
* @submodule OutputArea | ||||
*/ | ||||
|
r7177 | var IPython = (function (IPython) { | ||
"use strict"; | ||||
var utils = IPython.utils; | ||||
|
r10776 | /** | ||
* @class OutputArea | ||||
* | ||||
* @constructor | ||||
*/ | ||||
|
r7177 | var OutputArea = function (selector, prompt_area) { | ||
this.selector = selector; | ||||
|
r7362 | this.wrapper = $(selector); | ||
|
r7177 | this.outputs = []; | ||
this.collapsed = false; | ||||
|
r7362 | this.scrolled = false; | ||
|
r14856 | this.trusted = true; | ||
|
r12592 | this.clear_queued = null; | ||
|
r7177 | if (prompt_area === undefined) { | ||
this.prompt_area = true; | ||||
|
r7181 | } else { | ||
this.prompt_area = 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 | |||
|
r10897 | this.collapse_button.addClass("btn 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 | ||
|
r9227 | if ( IPython.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; | ||||
|
r7177 | } else if (msg_type === "pyout") { | ||
|
r14131 | json = content.data; | ||
json.output_type = msg_type; | ||||
json.metadata = content.metadata; | ||||
|
r7177 | json.prompt_number = content.execution_count; | ||
} else if (msg_type === "pyerr") { | ||||
json.ename = content.ename; | ||||
json.evalue = content.evalue; | ||||
json.traceback = content.traceback; | ||||
|
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', | ||||
'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 | |||
|
r7177 | if (json.output_type === 'pyout') { | ||
|
r14134 | this.append_pyout(json); | ||
|
r7177 | } else if (json.output_type === 'pyerr') { | ||
this.append_pyerr(json); | ||||
} else if (json.output_type === 'stream') { | ||||
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 | |||
|
r7177 | this.outputs.push(json); | ||
}; | ||||
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 | |||
|
r14134 | OutputArea.prototype.append_pyout = 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) { | ||||
inserted.addClass('output_pyout'); | ||||
} | ||||
|
r12332 | this._safe_append(toinsert); | ||
|
r7177 | // If we just output latex, typeset it. | ||
|
r14148 | if ((json['text/latex'] !== undefined) || (json['text/html'] !== undefined)) { | ||
|
r7177 | this.typeset(); | ||
|
r9555 | } | ||
|
r7177 | }; | ||
OutputArea.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<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) { | ||||
append_text.apply(this, [s, {}, toinsert]).addClass('output_pyerr'); | ||||
} | ||||
|
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: | ||||
|
r7350 | var pre = this.element.find('div.'+subclass).last().find('pre'); | ||
var html = utils.fixCarriageReturn( | ||||
|
r7339 | pre.html() + utils.fixConsole(text)); | ||
|
r15406 | // The only user content injected with this HTML call is | ||
|
r15376 | // escaped by the fixConsole() method. | ||
|
r7339 | pre.html(html); | ||
|
r7177 | return; | ||
} | ||||
} | ||||
|
r7339 | |||
if (!text.replace("\r", "")) { | ||||
// text is nothing (empty string, \r, etc.) | ||||
// so don't append any elements, which might add undesirable space | ||||
return; | ||||
} | ||||
|
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); | ||
|
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. | ||||
|
r14148 | if ((json['text/latex'] !== undefined) || (json['text/html'] !== 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') { | ||
|
r15644 | value = IPython.security.sanitize_html(value); | ||
} 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); | ||
} | ||||
|
r15644 | $([IPython.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); | ||
|
r14035 | IPython.keyboard_manager.register_events(toinsert); | ||
|
r7177 | toinsert.append(html); | ||
element.append(toinsert); | ||||
|
r14883 | return toinsert; | ||
|
r7177 | }; | ||
|
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); | ||
IPython.keyboard_manager.register_events(toinsert); | ||||
element.append(toinsert); | ||||
|
r14885 | // FIXME TODO : remove `container element for 3.0` | ||
|
r14884 | //backward compat, js should be eval'ed in a context where `container` is defined. | ||
var container = element; | ||||
container.show = function(){console.log('Warning "container.show()" is deprecated.')}; | ||||
|
r14885 | // end backward compat | ||
|
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 | |||
|
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") | ||||
.attr('type', 'text') | ||||
|
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 | ||||
|
r15619 | if (event.which === IPython.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. | ||||
IPython.keyboard_manager.register_events(raw_input); | ||||
// 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(); | ||
|
r10368 | var content = { | ||
output_type : 'stream', | ||||
name : 'stdout', | ||||
text : theprompt.text() + value + '\n' | ||||
} | ||||
// remove form container | ||||
container.parent().remove(); | ||||
// replace with plaintext version in stdout | ||||
this.append_output(content, false); | ||||
$([IPython.events]).trigger('send_input_reply.Kernel', value); | ||||
} | ||||
|
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; | ||||
|
r14120 | if (msg_type === "display_data" || msg_type === "pyout") { | ||
|
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); | ||||
|
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; | ||||
|
r14123 | if (msg_type === "display_data" || msg_type === "pyout") { | ||
// 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); | ||
|
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', | ||||
'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, | ||||
"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 | |||
IPython.OutputArea = OutputArea; | ||||
return IPython; | ||||
}(IPython)); | ||||