// Copyright (c) IPython Development Team. // Distributed under the terms of the Modified BSD License. define([ 'base/js/namespace', 'jqueryui', 'base/js/utils', 'base/js/security', 'base/js/keyboard', 'notebook/js/mathjaxutils', 'components/marked/lib/marked', ], function(IPython, $, utils, security, keyboard, mathjaxutils, marked) { "use strict"; /** * @class OutputArea * * @constructor */ var OutputArea = function (options) { this.selector = options.selector; this.events = options.events; this.keyboard_manager = options.keyboard_manager; this.wrapper = $(options.selector); this.outputs = []; this.collapsed = false; this.scrolled = false; this.trusted = true; this.clear_queued = null; if (options.prompt_area === undefined) { this.prompt_area = true; } else { this.prompt_area = options.prompt_area; } this.create_elements(); this.style(); this.bind_events(); }; /** * Class prototypes **/ OutputArea.prototype.create_elements = function () { this.element = $("
"); this.collapse_button = $("
"); this.prompt_overlay = $("
"); this.wrapper.append(this.prompt_overlay); this.wrapper.append(this.element); this.wrapper.append(this.collapse_button); }; OutputArea.prototype.style = function () { this.collapse_button.hide(); this.prompt_overlay.hide(); this.wrapper.addClass('output_wrapper'); this.element.addClass('output'); this.collapse_button.addClass("btn btn-default output_collapsed"); this.collapse_button.attr('title', 'click to expand output'); this.collapse_button.text('. . .'); this.prompt_overlay.addClass('out_prompt_overlay prompt'); this.prompt_overlay.attr('title', 'click to expand output; double click to hide output'); this.collapse(); }; /** * Should the OutputArea scroll? * Returns whether the height (in lines) exceeds a threshold. * * @private * @method _should_scroll * @param [lines=100]{Integer} * @return {Bool} * */ OutputArea.prototype._should_scroll = function (lines) { if (lines <=0 ){ return; } if (!lines) { lines = 100; } // 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 () { // FIXME: Firefox on Linux misbehaves, so automatic scrolling is disabled if ( utils.browser[0] === "Firefox" ) { return; } // maybe scroll output, // if it's grown large enough and hasn't already been scrolled. if ( !that.scrolled && that._should_scroll(OutputArea.auto_scroll_threshold)) { that.scroll_area(); } }); this.collapse_button.click(function () { that.expand(); }); }; OutputArea.prototype.collapse = function () { if (!this.collapsed) { this.element.hide(); this.prompt_overlay.hide(); if (this.element.html()){ this.collapse_button.show(); } this.collapsed = true; } }; OutputArea.prototype.expand = function () { if (this.collapsed) { this.collapse_button.hide(); this.element.show(); this.prompt_overlay.show(); this.collapsed = false; } }; OutputArea.prototype.toggle_output = function () { if (this.collapsed) { this.expand(); } else { this.collapse(); } }; OutputArea.prototype.scroll_area = function () { this.element.addClass('output_scroll'); this.prompt_overlay.attr('title', 'click to unscroll output; double click to hide'); this.scrolled = true; }; OutputArea.prototype.unscroll_area = function () { this.element.removeClass('output_scroll'); this.prompt_overlay.attr('title', 'click to scroll output; double click to hide'); this.scrolled = false; }; /** * * Scroll OutputArea if height supperior than a threshold (in lines). * * Threshold is a maximum number of lines. If unspecified, defaults to * OutputArea.minimum_scroll_threshold. * * Negative threshold will prevent the OutputArea from ever scrolling. * * @method scroll_if_long * * @param [lines=20]{Number} Default to 20 if not set, * behavior undefined for value of `0`. * **/ OutputArea.prototype.scroll_if_long = function (lines) { var n = lines | OutputArea.minimum_scroll_threshold; if(n <= 0){ return; } if (this._should_scroll(n)) { // only allow scrolling long-enough output this.scroll_area(); } }; OutputArea.prototype.toggle_scroll = function () { if (this.scrolled) { this.unscroll_area(); } else { // only allow scrolling long-enough output this.scroll_if_long(); } }; // typeset with MathJax if MathJax is available OutputArea.prototype.typeset = function () { if (window.MathJax){ MathJax.Hub.Queue(["Typeset",MathJax.Hub]); } }; OutputArea.prototype.handle_output = function (msg) { var json = {}; var msg_type = json.output_type = msg.header.msg_type; var content = msg.content; if (msg_type === "stream") { json.text = content.text; json.name = content.name; } else if (msg_type === "display_data") { json.data = content.data; json.output_type = msg_type; json.metadata = content.metadata; } else if (msg_type === "execute_result") { json.data = content.data; json.output_type = msg_type; json.metadata = content.metadata; json.execution_count = content.execution_count; } else if (msg_type === "error") { json.ename = content.ename; json.evalue = content.evalue; json.traceback = content.traceback; } else { console.log("unhandled output message", msg); return; } this.append_output(json); }; OutputArea.output_types = [ 'application/javascript', 'text/html', 'text/markdown', 'text/latex', 'image/svg+xml', 'image/png', 'image/jpeg', 'application/pdf', 'text/plain' ]; OutputArea.prototype.validate_output = function (json) { // scrub invalid outputs var data = json.data; $.map(OutputArea.output_types, function(key){ if (key !== 'application/json' && data[key] !== undefined && typeof data[key] !== 'string' ) { console.log("Invalid type for " + key, data[key]); delete data[key]; } }); return json; }; OutputArea.prototype.append_output = function (json) { this.expand(); // validate output data types if (json.data) { json = this.validate_output(json); } // Clear the output if clear is queued. var needs_height_reset = false; if (this.clear_queued) { this.clear_output(false); needs_height_reset = true; } var record_output = true; if (json.output_type === 'execute_result') { this.append_execute_result(json); } else if (json.output_type === 'error') { this.append_error(json); } else if (json.output_type === 'stream') { // append_stream might have merged the output with earlier stream output record_output = this.append_stream(json); } // 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'); }; if (json.output_type === 'display_data') { this.append_display_data(json, handle_appended); } else { handle_appended(); } if (record_output) { this.outputs.push(json); } }; OutputArea.prototype.create_output_area = function () { var oa = $("
").addClass("output_area"); if (this.prompt_area) { oa.append($('
').addClass('prompt')); } return oa; }; 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) { var subarea = $('
').addClass('output_subarea').addClass(classes); if (_get_metadata_key(md, 'isolated', mime)) { // Create an iframe to isolate the subarea from the rest of the // document var iframe = $('