##// END OF EJS Templates
add marked to require dependencies
Ben Duffield -
Show More
@@ -1,1001 +1,1002
1 // Copyright (c) IPython Development Team.
1 // Copyright (c) IPython Development Team.
2 // Distributed under the terms of the Modified BSD License.
2 // Distributed under the terms of the Modified BSD License.
3
3
4 define([
4 define([
5 'base/js/namespace',
5 'base/js/namespace',
6 'jqueryui',
6 'jqueryui',
7 'base/js/utils',
7 'base/js/utils',
8 'base/js/security',
8 'base/js/security',
9 'base/js/keyboard',
9 'base/js/keyboard',
10 'notebook/js/mathjaxutils',
10 'notebook/js/mathjaxutils',
11 ], function(IPython, $, utils, security, keyboard, mathjaxutils) {
11 'components/marked/lib/marked',
12 ], function(IPython, $, utils, security, keyboard, mathjaxutils, marked) {
12 "use strict";
13 "use strict";
13
14
14 /**
15 /**
15 * @class OutputArea
16 * @class OutputArea
16 *
17 *
17 * @constructor
18 * @constructor
18 */
19 */
19
20
20 var OutputArea = function (options) {
21 var OutputArea = function (options) {
21 this.selector = options.selector;
22 this.selector = options.selector;
22 this.events = options.events;
23 this.events = options.events;
23 this.keyboard_manager = options.keyboard_manager;
24 this.keyboard_manager = options.keyboard_manager;
24 this.wrapper = $(options.selector);
25 this.wrapper = $(options.selector);
25 this.outputs = [];
26 this.outputs = [];
26 this.collapsed = false;
27 this.collapsed = false;
27 this.scrolled = false;
28 this.scrolled = false;
28 this.trusted = true;
29 this.trusted = true;
29 this.clear_queued = null;
30 this.clear_queued = null;
30 if (options.prompt_area === undefined) {
31 if (options.prompt_area === undefined) {
31 this.prompt_area = true;
32 this.prompt_area = true;
32 } else {
33 } else {
33 this.prompt_area = options.prompt_area;
34 this.prompt_area = options.prompt_area;
34 }
35 }
35 this.create_elements();
36 this.create_elements();
36 this.style();
37 this.style();
37 this.bind_events();
38 this.bind_events();
38 };
39 };
39
40
40
41
41 /**
42 /**
42 * Class prototypes
43 * Class prototypes
43 **/
44 **/
44
45
45 OutputArea.prototype.create_elements = function () {
46 OutputArea.prototype.create_elements = function () {
46 this.element = $("<div/>");
47 this.element = $("<div/>");
47 this.collapse_button = $("<div/>");
48 this.collapse_button = $("<div/>");
48 this.prompt_overlay = $("<div/>");
49 this.prompt_overlay = $("<div/>");
49 this.wrapper.append(this.prompt_overlay);
50 this.wrapper.append(this.prompt_overlay);
50 this.wrapper.append(this.element);
51 this.wrapper.append(this.element);
51 this.wrapper.append(this.collapse_button);
52 this.wrapper.append(this.collapse_button);
52 };
53 };
53
54
54
55
55 OutputArea.prototype.style = function () {
56 OutputArea.prototype.style = function () {
56 this.collapse_button.hide();
57 this.collapse_button.hide();
57 this.prompt_overlay.hide();
58 this.prompt_overlay.hide();
58
59
59 this.wrapper.addClass('output_wrapper');
60 this.wrapper.addClass('output_wrapper');
60 this.element.addClass('output');
61 this.element.addClass('output');
61
62
62 this.collapse_button.addClass("btn btn-default output_collapsed");
63 this.collapse_button.addClass("btn btn-default output_collapsed");
63 this.collapse_button.attr('title', 'click to expand output');
64 this.collapse_button.attr('title', 'click to expand output');
64 this.collapse_button.text('. . .');
65 this.collapse_button.text('. . .');
65
66
66 this.prompt_overlay.addClass('out_prompt_overlay prompt');
67 this.prompt_overlay.addClass('out_prompt_overlay prompt');
67 this.prompt_overlay.attr('title', 'click to expand output; double click to hide output');
68 this.prompt_overlay.attr('title', 'click to expand output; double click to hide output');
68
69
69 this.collapse();
70 this.collapse();
70 };
71 };
71
72
72 /**
73 /**
73 * Should the OutputArea scroll?
74 * Should the OutputArea scroll?
74 * Returns whether the height (in lines) exceeds a threshold.
75 * Returns whether the height (in lines) exceeds a threshold.
75 *
76 *
76 * @private
77 * @private
77 * @method _should_scroll
78 * @method _should_scroll
78 * @param [lines=100]{Integer}
79 * @param [lines=100]{Integer}
79 * @return {Bool}
80 * @return {Bool}
80 *
81 *
81 */
82 */
82 OutputArea.prototype._should_scroll = function (lines) {
83 OutputArea.prototype._should_scroll = function (lines) {
83 if (lines <=0 ){ return }
84 if (lines <=0 ){ return }
84 if (!lines) {
85 if (!lines) {
85 lines = 100;
86 lines = 100;
86 }
87 }
87 // line-height from http://stackoverflow.com/questions/1185151
88 // line-height from http://stackoverflow.com/questions/1185151
88 var fontSize = this.element.css('font-size');
89 var fontSize = this.element.css('font-size');
89 var lineHeight = Math.floor(parseInt(fontSize.replace('px','')) * 1.5);
90 var lineHeight = Math.floor(parseInt(fontSize.replace('px','')) * 1.5);
90
91
91 return (this.element.height() > lines * lineHeight);
92 return (this.element.height() > lines * lineHeight);
92 };
93 };
93
94
94
95
95 OutputArea.prototype.bind_events = function () {
96 OutputArea.prototype.bind_events = function () {
96 var that = this;
97 var that = this;
97 this.prompt_overlay.dblclick(function () { that.toggle_output(); });
98 this.prompt_overlay.dblclick(function () { that.toggle_output(); });
98 this.prompt_overlay.click(function () { that.toggle_scroll(); });
99 this.prompt_overlay.click(function () { that.toggle_scroll(); });
99
100
100 this.element.resize(function () {
101 this.element.resize(function () {
101 // FIXME: Firefox on Linux misbehaves, so automatic scrolling is disabled
102 // FIXME: Firefox on Linux misbehaves, so automatic scrolling is disabled
102 if ( utils.browser[0] === "Firefox" ) {
103 if ( utils.browser[0] === "Firefox" ) {
103 return;
104 return;
104 }
105 }
105 // maybe scroll output,
106 // maybe scroll output,
106 // if it's grown large enough and hasn't already been scrolled.
107 // if it's grown large enough and hasn't already been scrolled.
107 if ( !that.scrolled && that._should_scroll(OutputArea.auto_scroll_threshold)) {
108 if ( !that.scrolled && that._should_scroll(OutputArea.auto_scroll_threshold)) {
108 that.scroll_area();
109 that.scroll_area();
109 }
110 }
110 });
111 });
111 this.collapse_button.click(function () {
112 this.collapse_button.click(function () {
112 that.expand();
113 that.expand();
113 });
114 });
114 };
115 };
115
116
116
117
117 OutputArea.prototype.collapse = function () {
118 OutputArea.prototype.collapse = function () {
118 if (!this.collapsed) {
119 if (!this.collapsed) {
119 this.element.hide();
120 this.element.hide();
120 this.prompt_overlay.hide();
121 this.prompt_overlay.hide();
121 if (this.element.html()){
122 if (this.element.html()){
122 this.collapse_button.show();
123 this.collapse_button.show();
123 }
124 }
124 this.collapsed = true;
125 this.collapsed = true;
125 }
126 }
126 };
127 };
127
128
128
129
129 OutputArea.prototype.expand = function () {
130 OutputArea.prototype.expand = function () {
130 if (this.collapsed) {
131 if (this.collapsed) {
131 this.collapse_button.hide();
132 this.collapse_button.hide();
132 this.element.show();
133 this.element.show();
133 this.prompt_overlay.show();
134 this.prompt_overlay.show();
134 this.collapsed = false;
135 this.collapsed = false;
135 }
136 }
136 };
137 };
137
138
138
139
139 OutputArea.prototype.toggle_output = function () {
140 OutputArea.prototype.toggle_output = function () {
140 if (this.collapsed) {
141 if (this.collapsed) {
141 this.expand();
142 this.expand();
142 } else {
143 } else {
143 this.collapse();
144 this.collapse();
144 }
145 }
145 };
146 };
146
147
147
148
148 OutputArea.prototype.scroll_area = function () {
149 OutputArea.prototype.scroll_area = function () {
149 this.element.addClass('output_scroll');
150 this.element.addClass('output_scroll');
150 this.prompt_overlay.attr('title', 'click to unscroll output; double click to hide');
151 this.prompt_overlay.attr('title', 'click to unscroll output; double click to hide');
151 this.scrolled = true;
152 this.scrolled = true;
152 };
153 };
153
154
154
155
155 OutputArea.prototype.unscroll_area = function () {
156 OutputArea.prototype.unscroll_area = function () {
156 this.element.removeClass('output_scroll');
157 this.element.removeClass('output_scroll');
157 this.prompt_overlay.attr('title', 'click to scroll output; double click to hide');
158 this.prompt_overlay.attr('title', 'click to scroll output; double click to hide');
158 this.scrolled = false;
159 this.scrolled = false;
159 };
160 };
160
161
161 /**
162 /**
162 *
163 *
163 * Scroll OutputArea if height supperior than a threshold (in lines).
164 * Scroll OutputArea if height supperior than a threshold (in lines).
164 *
165 *
165 * Threshold is a maximum number of lines. If unspecified, defaults to
166 * Threshold is a maximum number of lines. If unspecified, defaults to
166 * OutputArea.minimum_scroll_threshold.
167 * OutputArea.minimum_scroll_threshold.
167 *
168 *
168 * Negative threshold will prevent the OutputArea from ever scrolling.
169 * Negative threshold will prevent the OutputArea from ever scrolling.
169 *
170 *
170 * @method scroll_if_long
171 * @method scroll_if_long
171 *
172 *
172 * @param [lines=20]{Number} Default to 20 if not set,
173 * @param [lines=20]{Number} Default to 20 if not set,
173 * behavior undefined for value of `0`.
174 * behavior undefined for value of `0`.
174 *
175 *
175 **/
176 **/
176 OutputArea.prototype.scroll_if_long = function (lines) {
177 OutputArea.prototype.scroll_if_long = function (lines) {
177 var n = lines | OutputArea.minimum_scroll_threshold;
178 var n = lines | OutputArea.minimum_scroll_threshold;
178 if(n <= 0){
179 if(n <= 0){
179 return
180 return
180 }
181 }
181
182
182 if (this._should_scroll(n)) {
183 if (this._should_scroll(n)) {
183 // only allow scrolling long-enough output
184 // only allow scrolling long-enough output
184 this.scroll_area();
185 this.scroll_area();
185 }
186 }
186 };
187 };
187
188
188
189
189 OutputArea.prototype.toggle_scroll = function () {
190 OutputArea.prototype.toggle_scroll = function () {
190 if (this.scrolled) {
191 if (this.scrolled) {
191 this.unscroll_area();
192 this.unscroll_area();
192 } else {
193 } else {
193 // only allow scrolling long-enough output
194 // only allow scrolling long-enough output
194 this.scroll_if_long();
195 this.scroll_if_long();
195 }
196 }
196 };
197 };
197
198
198
199
199 // typeset with MathJax if MathJax is available
200 // typeset with MathJax if MathJax is available
200 OutputArea.prototype.typeset = function () {
201 OutputArea.prototype.typeset = function () {
201 if (window.MathJax){
202 if (window.MathJax){
202 MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
203 MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
203 }
204 }
204 };
205 };
205
206
206
207
207 OutputArea.prototype.handle_output = function (msg) {
208 OutputArea.prototype.handle_output = function (msg) {
208 var json = {};
209 var json = {};
209 var msg_type = json.output_type = msg.header.msg_type;
210 var msg_type = json.output_type = msg.header.msg_type;
210 var content = msg.content;
211 var content = msg.content;
211 if (msg_type === "stream") {
212 if (msg_type === "stream") {
212 json.text = content.data;
213 json.text = content.data;
213 json.stream = content.name;
214 json.stream = content.name;
214 } else if (msg_type === "display_data") {
215 } else if (msg_type === "display_data") {
215 json = content.data;
216 json = content.data;
216 json.output_type = msg_type;
217 json.output_type = msg_type;
217 json.metadata = content.metadata;
218 json.metadata = content.metadata;
218 } else if (msg_type === "execute_result") {
219 } else if (msg_type === "execute_result") {
219 json = content.data;
220 json = content.data;
220 json.output_type = msg_type;
221 json.output_type = msg_type;
221 json.metadata = content.metadata;
222 json.metadata = content.metadata;
222 json.prompt_number = content.execution_count;
223 json.prompt_number = content.execution_count;
223 } else if (msg_type === "error") {
224 } else if (msg_type === "error") {
224 json.ename = content.ename;
225 json.ename = content.ename;
225 json.evalue = content.evalue;
226 json.evalue = content.evalue;
226 json.traceback = content.traceback;
227 json.traceback = content.traceback;
227 } else {
228 } else {
228 console.log("unhandled output message", msg);
229 console.log("unhandled output message", msg);
229 return;
230 return;
230 }
231 }
231 this.append_output(json);
232 this.append_output(json);
232 };
233 };
233
234
234
235
235 OutputArea.prototype.rename_keys = function (data, key_map) {
236 OutputArea.prototype.rename_keys = function (data, key_map) {
236 var remapped = {};
237 var remapped = {};
237 for (var key in data) {
238 for (var key in data) {
238 var new_key = key_map[key] || key;
239 var new_key = key_map[key] || key;
239 remapped[new_key] = data[key];
240 remapped[new_key] = data[key];
240 }
241 }
241 return remapped;
242 return remapped;
242 };
243 };
243
244
244
245
245 OutputArea.output_types = [
246 OutputArea.output_types = [
246 'application/javascript',
247 'application/javascript',
247 'text/html',
248 'text/html',
248 'text/markdown',
249 'text/markdown',
249 'text/latex',
250 'text/latex',
250 'image/svg+xml',
251 'image/svg+xml',
251 'image/png',
252 'image/png',
252 'image/jpeg',
253 'image/jpeg',
253 'application/pdf',
254 'application/pdf',
254 'text/plain'
255 'text/plain'
255 ];
256 ];
256
257
257 OutputArea.prototype.validate_output = function (json) {
258 OutputArea.prototype.validate_output = function (json) {
258 // scrub invalid outputs
259 // scrub invalid outputs
259 // TODO: right now everything is a string, but JSON really shouldn't be.
260 // TODO: right now everything is a string, but JSON really shouldn't be.
260 // nbformat 4 will fix that.
261 // nbformat 4 will fix that.
261 $.map(OutputArea.output_types, function(key){
262 $.map(OutputArea.output_types, function(key){
262 if (json[key] !== undefined && typeof json[key] !== 'string') {
263 if (json[key] !== undefined && typeof json[key] !== 'string') {
263 console.log("Invalid type for " + key, json[key]);
264 console.log("Invalid type for " + key, json[key]);
264 delete json[key];
265 delete json[key];
265 }
266 }
266 });
267 });
267 return json;
268 return json;
268 };
269 };
269
270
270 OutputArea.prototype.append_output = function (json) {
271 OutputArea.prototype.append_output = function (json) {
271 this.expand();
272 this.expand();
272
273
273 // validate output data types
274 // validate output data types
274 json = this.validate_output(json);
275 json = this.validate_output(json);
275
276
276 // Clear the output if clear is queued.
277 // Clear the output if clear is queued.
277 var needs_height_reset = false;
278 var needs_height_reset = false;
278 if (this.clear_queued) {
279 if (this.clear_queued) {
279 this.clear_output(false);
280 this.clear_output(false);
280 needs_height_reset = true;
281 needs_height_reset = true;
281 }
282 }
282
283
283 var record_output = true;
284 var record_output = true;
284
285
285 if (json.output_type === 'execute_result') {
286 if (json.output_type === 'execute_result') {
286 this.append_execute_result(json);
287 this.append_execute_result(json);
287 } else if (json.output_type === 'error') {
288 } else if (json.output_type === 'error') {
288 this.append_error(json);
289 this.append_error(json);
289 } else if (json.output_type === 'stream') {
290 } else if (json.output_type === 'stream') {
290 // append_stream might have merged the output with earlier stream output
291 // append_stream might have merged the output with earlier stream output
291 record_output = this.append_stream(json);
292 record_output = this.append_stream(json);
292 }
293 }
293
294
294 // We must release the animation fixed height in a callback since Gecko
295 // We must release the animation fixed height in a callback since Gecko
295 // (FireFox) doesn't render the image immediately as the data is
296 // (FireFox) doesn't render the image immediately as the data is
296 // available.
297 // available.
297 var that = this;
298 var that = this;
298 var handle_appended = function ($el) {
299 var handle_appended = function ($el) {
299 // Only reset the height to automatic if the height is currently
300 // Only reset the height to automatic if the height is currently
300 // fixed (done by wait=True flag on clear_output).
301 // fixed (done by wait=True flag on clear_output).
301 if (needs_height_reset) {
302 if (needs_height_reset) {
302 that.element.height('');
303 that.element.height('');
303 }
304 }
304 that.element.trigger('resize');
305 that.element.trigger('resize');
305 };
306 };
306 if (json.output_type === 'display_data') {
307 if (json.output_type === 'display_data') {
307 this.append_display_data(json, handle_appended);
308 this.append_display_data(json, handle_appended);
308 } else {
309 } else {
309 handle_appended();
310 handle_appended();
310 }
311 }
311
312
312 if (record_output) {
313 if (record_output) {
313 this.outputs.push(json);
314 this.outputs.push(json);
314 }
315 }
315 };
316 };
316
317
317
318
318 OutputArea.prototype.create_output_area = function () {
319 OutputArea.prototype.create_output_area = function () {
319 var oa = $("<div/>").addClass("output_area");
320 var oa = $("<div/>").addClass("output_area");
320 if (this.prompt_area) {
321 if (this.prompt_area) {
321 oa.append($('<div/>').addClass('prompt'));
322 oa.append($('<div/>').addClass('prompt'));
322 }
323 }
323 return oa;
324 return oa;
324 };
325 };
325
326
326
327
327 function _get_metadata_key(metadata, key, mime) {
328 function _get_metadata_key(metadata, key, mime) {
328 var mime_md = metadata[mime];
329 var mime_md = metadata[mime];
329 // mime-specific higher priority
330 // mime-specific higher priority
330 if (mime_md && mime_md[key] !== undefined) {
331 if (mime_md && mime_md[key] !== undefined) {
331 return mime_md[key];
332 return mime_md[key];
332 }
333 }
333 // fallback on global
334 // fallback on global
334 return metadata[key];
335 return metadata[key];
335 }
336 }
336
337
337 OutputArea.prototype.create_output_subarea = function(md, classes, mime) {
338 OutputArea.prototype.create_output_subarea = function(md, classes, mime) {
338 var subarea = $('<div/>').addClass('output_subarea').addClass(classes);
339 var subarea = $('<div/>').addClass('output_subarea').addClass(classes);
339 if (_get_metadata_key(md, 'isolated', mime)) {
340 if (_get_metadata_key(md, 'isolated', mime)) {
340 // Create an iframe to isolate the subarea from the rest of the
341 // Create an iframe to isolate the subarea from the rest of the
341 // document
342 // document
342 var iframe = $('<iframe/>').addClass('box-flex1');
343 var iframe = $('<iframe/>').addClass('box-flex1');
343 iframe.css({'height':1, 'width':'100%', 'display':'block'});
344 iframe.css({'height':1, 'width':'100%', 'display':'block'});
344 iframe.attr('frameborder', 0);
345 iframe.attr('frameborder', 0);
345 iframe.attr('scrolling', 'auto');
346 iframe.attr('scrolling', 'auto');
346
347
347 // Once the iframe is loaded, the subarea is dynamically inserted
348 // Once the iframe is loaded, the subarea is dynamically inserted
348 iframe.on('load', function() {
349 iframe.on('load', function() {
349 // Workaround needed by Firefox, to properly render svg inside
350 // Workaround needed by Firefox, to properly render svg inside
350 // iframes, see http://stackoverflow.com/questions/10177190/
351 // iframes, see http://stackoverflow.com/questions/10177190/
351 // svg-dynamically-added-to-iframe-does-not-render-correctly
352 // svg-dynamically-added-to-iframe-does-not-render-correctly
352 this.contentDocument.open();
353 this.contentDocument.open();
353
354
354 // Insert the subarea into the iframe
355 // Insert the subarea into the iframe
355 // We must directly write the html. When using Jquery's append
356 // We must directly write the html. When using Jquery's append
356 // method, javascript is evaluated in the parent document and
357 // method, javascript is evaluated in the parent document and
357 // not in the iframe document. At this point, subarea doesn't
358 // not in the iframe document. At this point, subarea doesn't
358 // contain any user content.
359 // contain any user content.
359 this.contentDocument.write(subarea.html());
360 this.contentDocument.write(subarea.html());
360
361
361 this.contentDocument.close();
362 this.contentDocument.close();
362
363
363 var body = this.contentDocument.body;
364 var body = this.contentDocument.body;
364 // Adjust the iframe height automatically
365 // Adjust the iframe height automatically
365 iframe.height(body.scrollHeight + 'px');
366 iframe.height(body.scrollHeight + 'px');
366 });
367 });
367
368
368 // Elements should be appended to the inner subarea and not to the
369 // Elements should be appended to the inner subarea and not to the
369 // iframe
370 // iframe
370 iframe.append = function(that) {
371 iframe.append = function(that) {
371 subarea.append(that);
372 subarea.append(that);
372 };
373 };
373
374
374 return iframe;
375 return iframe;
375 } else {
376 } else {
376 return subarea;
377 return subarea;
377 }
378 }
378 }
379 }
379
380
380
381
381 OutputArea.prototype._append_javascript_error = function (err, element) {
382 OutputArea.prototype._append_javascript_error = function (err, element) {
382 // display a message when a javascript error occurs in display output
383 // display a message when a javascript error occurs in display output
383 var msg = "Javascript error adding output!"
384 var msg = "Javascript error adding output!"
384 if ( element === undefined ) return;
385 if ( element === undefined ) return;
385 element
386 element
386 .append($('<div/>').text(msg).addClass('js-error'))
387 .append($('<div/>').text(msg).addClass('js-error'))
387 .append($('<div/>').text(err.toString()).addClass('js-error'))
388 .append($('<div/>').text(err.toString()).addClass('js-error'))
388 .append($('<div/>').text('See your browser Javascript console for more details.').addClass('js-error'));
389 .append($('<div/>').text('See your browser Javascript console for more details.').addClass('js-error'));
389 };
390 };
390
391
391 OutputArea.prototype._safe_append = function (toinsert) {
392 OutputArea.prototype._safe_append = function (toinsert) {
392 // safely append an item to the document
393 // safely append an item to the document
393 // this is an object created by user code,
394 // this is an object created by user code,
394 // and may have errors, which should not be raised
395 // and may have errors, which should not be raised
395 // under any circumstances.
396 // under any circumstances.
396 try {
397 try {
397 this.element.append(toinsert);
398 this.element.append(toinsert);
398 } catch(err) {
399 } catch(err) {
399 console.log(err);
400 console.log(err);
400 // Create an actual output_area and output_subarea, which creates
401 // Create an actual output_area and output_subarea, which creates
401 // the prompt area and the proper indentation.
402 // the prompt area and the proper indentation.
402 var toinsert = this.create_output_area();
403 var toinsert = this.create_output_area();
403 var subarea = $('<div/>').addClass('output_subarea');
404 var subarea = $('<div/>').addClass('output_subarea');
404 toinsert.append(subarea);
405 toinsert.append(subarea);
405 this._append_javascript_error(err, subarea);
406 this._append_javascript_error(err, subarea);
406 this.element.append(toinsert);
407 this.element.append(toinsert);
407 }
408 }
408 };
409 };
409
410
410
411
411 OutputArea.prototype.append_execute_result = function (json) {
412 OutputArea.prototype.append_execute_result = function (json) {
412 var n = json.prompt_number || ' ';
413 var n = json.prompt_number || ' ';
413 var toinsert = this.create_output_area();
414 var toinsert = this.create_output_area();
414 if (this.prompt_area) {
415 if (this.prompt_area) {
415 toinsert.find('div.prompt').addClass('output_prompt').text('Out[' + n + ']:');
416 toinsert.find('div.prompt').addClass('output_prompt').text('Out[' + n + ']:');
416 }
417 }
417 var inserted = this.append_mime_type(json, toinsert);
418 var inserted = this.append_mime_type(json, toinsert);
418 if (inserted) {
419 if (inserted) {
419 inserted.addClass('output_result');
420 inserted.addClass('output_result');
420 }
421 }
421 this._safe_append(toinsert);
422 this._safe_append(toinsert);
422 // If we just output latex, typeset it.
423 // If we just output latex, typeset it.
423 if ((json['text/latex'] !== undefined) ||
424 if ((json['text/latex'] !== undefined) ||
424 (json['text/html'] !== undefined) ||
425 (json['text/html'] !== undefined) ||
425 (json['text/markdown'] !== undefined)) {
426 (json['text/markdown'] !== undefined)) {
426 this.typeset();
427 this.typeset();
427 }
428 }
428 };
429 };
429
430
430
431
431 OutputArea.prototype.append_error = function (json) {
432 OutputArea.prototype.append_error = function (json) {
432 var tb = json.traceback;
433 var tb = json.traceback;
433 if (tb !== undefined && tb.length > 0) {
434 if (tb !== undefined && tb.length > 0) {
434 var s = '';
435 var s = '';
435 var len = tb.length;
436 var len = tb.length;
436 for (var i=0; i<len; i++) {
437 for (var i=0; i<len; i++) {
437 s = s + tb[i] + '\n';
438 s = s + tb[i] + '\n';
438 }
439 }
439 s = s + '\n';
440 s = s + '\n';
440 var toinsert = this.create_output_area();
441 var toinsert = this.create_output_area();
441 var append_text = OutputArea.append_map['text/plain'];
442 var append_text = OutputArea.append_map['text/plain'];
442 if (append_text) {
443 if (append_text) {
443 append_text.apply(this, [s, {}, toinsert]).addClass('output_error');
444 append_text.apply(this, [s, {}, toinsert]).addClass('output_error');
444 }
445 }
445 this._safe_append(toinsert);
446 this._safe_append(toinsert);
446 }
447 }
447 };
448 };
448
449
449
450
450 OutputArea.prototype.append_stream = function (json) {
451 OutputArea.prototype.append_stream = function (json) {
451 // temporary fix: if stream undefined (json file written prior to this patch),
452 // temporary fix: if stream undefined (json file written prior to this patch),
452 // default to most likely stdout:
453 // default to most likely stdout:
453 if (json.stream === undefined){
454 if (json.stream === undefined){
454 json.stream = 'stdout';
455 json.stream = 'stdout';
455 }
456 }
456 var text = json.text;
457 var text = json.text;
457 var subclass = "output_"+json.stream;
458 var subclass = "output_"+json.stream;
458 if (this.outputs.length > 0){
459 if (this.outputs.length > 0){
459 // have at least one output to consider
460 // have at least one output to consider
460 var last = this.outputs[this.outputs.length-1];
461 var last = this.outputs[this.outputs.length-1];
461 if (last.output_type == 'stream' && json.stream == last.stream){
462 if (last.output_type == 'stream' && json.stream == last.stream){
462 // latest output was in the same stream,
463 // latest output was in the same stream,
463 // so append directly into its pre tag
464 // so append directly into its pre tag
464 // escape ANSI & HTML specials:
465 // escape ANSI & HTML specials:
465 last.text = utils.fixCarriageReturn(last.text + json.text);
466 last.text = utils.fixCarriageReturn(last.text + json.text);
466 var pre = this.element.find('div.'+subclass).last().find('pre');
467 var pre = this.element.find('div.'+subclass).last().find('pre');
467 var html = utils.fixConsole(last.text);
468 var html = utils.fixConsole(last.text);
468 // The only user content injected with this HTML call is
469 // The only user content injected with this HTML call is
469 // escaped by the fixConsole() method.
470 // escaped by the fixConsole() method.
470 pre.html(html);
471 pre.html(html);
471 // return false signals that we merged this output with the previous one,
472 // return false signals that we merged this output with the previous one,
472 // and the new output shouldn't be recorded.
473 // and the new output shouldn't be recorded.
473 return false;
474 return false;
474 }
475 }
475 }
476 }
476
477
477 if (!text.replace("\r", "")) {
478 if (!text.replace("\r", "")) {
478 // text is nothing (empty string, \r, etc.)
479 // text is nothing (empty string, \r, etc.)
479 // so don't append any elements, which might add undesirable space
480 // so don't append any elements, which might add undesirable space
480 // return true to indicate the output should be recorded.
481 // return true to indicate the output should be recorded.
481 return true;
482 return true;
482 }
483 }
483
484
484 // If we got here, attach a new div
485 // If we got here, attach a new div
485 var toinsert = this.create_output_area();
486 var toinsert = this.create_output_area();
486 var append_text = OutputArea.append_map['text/plain'];
487 var append_text = OutputArea.append_map['text/plain'];
487 if (append_text) {
488 if (append_text) {
488 append_text.apply(this, [text, {}, toinsert]).addClass("output_stream " + subclass);
489 append_text.apply(this, [text, {}, toinsert]).addClass("output_stream " + subclass);
489 }
490 }
490 this._safe_append(toinsert);
491 this._safe_append(toinsert);
491 return true;
492 return true;
492 };
493 };
493
494
494
495
495 OutputArea.prototype.append_display_data = function (json, handle_inserted) {
496 OutputArea.prototype.append_display_data = function (json, handle_inserted) {
496 var toinsert = this.create_output_area();
497 var toinsert = this.create_output_area();
497 if (this.append_mime_type(json, toinsert, handle_inserted)) {
498 if (this.append_mime_type(json, toinsert, handle_inserted)) {
498 this._safe_append(toinsert);
499 this._safe_append(toinsert);
499 // If we just output latex, typeset it.
500 // If we just output latex, typeset it.
500 if ((json['text/latex'] !== undefined) ||
501 if ((json['text/latex'] !== undefined) ||
501 (json['text/html'] !== undefined) ||
502 (json['text/html'] !== undefined) ||
502 (json['text/markdown'] !== undefined)) {
503 (json['text/markdown'] !== undefined)) {
503 this.typeset();
504 this.typeset();
504 }
505 }
505 }
506 }
506 };
507 };
507
508
508
509
509 OutputArea.safe_outputs = {
510 OutputArea.safe_outputs = {
510 'text/plain' : true,
511 'text/plain' : true,
511 'text/latex' : true,
512 'text/latex' : true,
512 'image/png' : true,
513 'image/png' : true,
513 'image/jpeg' : true
514 'image/jpeg' : true
514 };
515 };
515
516
516 OutputArea.prototype.append_mime_type = function (json, element, handle_inserted) {
517 OutputArea.prototype.append_mime_type = function (json, element, handle_inserted) {
517 for (var i=0; i < OutputArea.display_order.length; i++) {
518 for (var i=0; i < OutputArea.display_order.length; i++) {
518 var type = OutputArea.display_order[i];
519 var type = OutputArea.display_order[i];
519 var append = OutputArea.append_map[type];
520 var append = OutputArea.append_map[type];
520 if ((json[type] !== undefined) && append) {
521 if ((json[type] !== undefined) && append) {
521 var value = json[type];
522 var value = json[type];
522 if (!this.trusted && !OutputArea.safe_outputs[type]) {
523 if (!this.trusted && !OutputArea.safe_outputs[type]) {
523 // not trusted, sanitize HTML
524 // not trusted, sanitize HTML
524 if (type==='text/html' || type==='text/svg') {
525 if (type==='text/html' || type==='text/svg') {
525 value = security.sanitize_html(value);
526 value = security.sanitize_html(value);
526 } else {
527 } else {
527 // don't display if we don't know how to sanitize it
528 // don't display if we don't know how to sanitize it
528 console.log("Ignoring untrusted " + type + " output.");
529 console.log("Ignoring untrusted " + type + " output.");
529 continue;
530 continue;
530 }
531 }
531 }
532 }
532 var md = json.metadata || {};
533 var md = json.metadata || {};
533 var toinsert = append.apply(this, [value, md, element, handle_inserted]);
534 var toinsert = append.apply(this, [value, md, element, handle_inserted]);
534 // Since only the png and jpeg mime types call the inserted
535 // Since only the png and jpeg mime types call the inserted
535 // callback, if the mime type is something other we must call the
536 // callback, if the mime type is something other we must call the
536 // inserted callback only when the element is actually inserted
537 // inserted callback only when the element is actually inserted
537 // into the DOM. Use a timeout of 0 to do this.
538 // into the DOM. Use a timeout of 0 to do this.
538 if (['image/png', 'image/jpeg'].indexOf(type) < 0 && handle_inserted !== undefined) {
539 if (['image/png', 'image/jpeg'].indexOf(type) < 0 && handle_inserted !== undefined) {
539 setTimeout(handle_inserted, 0);
540 setTimeout(handle_inserted, 0);
540 }
541 }
541 this.events.trigger('output_appended.OutputArea', [type, value, md, toinsert]);
542 this.events.trigger('output_appended.OutputArea', [type, value, md, toinsert]);
542 return toinsert;
543 return toinsert;
543 }
544 }
544 }
545 }
545 return null;
546 return null;
546 };
547 };
547
548
548
549
549 var append_html = function (html, md, element) {
550 var append_html = function (html, md, element) {
550 var type = 'text/html';
551 var type = 'text/html';
551 var toinsert = this.create_output_subarea(md, "output_html rendered_html", type);
552 var toinsert = this.create_output_subarea(md, "output_html rendered_html", type);
552 this.keyboard_manager.register_events(toinsert);
553 this.keyboard_manager.register_events(toinsert);
553 toinsert.append(html);
554 toinsert.append(html);
554 element.append(toinsert);
555 element.append(toinsert);
555 return toinsert;
556 return toinsert;
556 };
557 };
557
558
558
559
559 var append_markdown = function(markdown, md, element) {
560 var append_markdown = function(markdown, md, element) {
560 var type = 'text/markdown';
561 var type = 'text/markdown';
561 var toinsert = this.create_output_subarea(md, "output_markdown", type);
562 var toinsert = this.create_output_subarea(md, "output_markdown", type);
562 var text_and_math = mathjaxutils.remove_math(markdown);
563 var text_and_math = mathjaxutils.remove_math(markdown);
563 var text = text_and_math[0];
564 var text = text_and_math[0];
564 var math = text_and_math[1];
565 var math = text_and_math[1];
565 var html = marked.parser(marked.lexer(text));
566 var html = marked.parser(marked.lexer(text));
566 html = mathjaxutils.replace_math(html, math);
567 html = mathjaxutils.replace_math(html, math);
567 toinsert.append(html);
568 toinsert.append(html);
568 element.append(toinsert);
569 element.append(toinsert);
569 return toinsert;
570 return toinsert;
570 };
571 };
571
572
572
573
573 var append_javascript = function (js, md, element) {
574 var append_javascript = function (js, md, element) {
574 // We just eval the JS code, element appears in the local scope.
575 // We just eval the JS code, element appears in the local scope.
575 var type = 'application/javascript';
576 var type = 'application/javascript';
576 var toinsert = this.create_output_subarea(md, "output_javascript", type);
577 var toinsert = this.create_output_subarea(md, "output_javascript", type);
577 this.keyboard_manager.register_events(toinsert);
578 this.keyboard_manager.register_events(toinsert);
578 element.append(toinsert);
579 element.append(toinsert);
579
580
580 // Fix for ipython/issues/5293, make sure `element` is the area which
581 // Fix for ipython/issues/5293, make sure `element` is the area which
581 // output can be inserted into at the time of JS execution.
582 // output can be inserted into at the time of JS execution.
582 element = toinsert;
583 element = toinsert;
583 try {
584 try {
584 eval(js);
585 eval(js);
585 } catch(err) {
586 } catch(err) {
586 console.log(err);
587 console.log(err);
587 this._append_javascript_error(err, toinsert);
588 this._append_javascript_error(err, toinsert);
588 }
589 }
589 return toinsert;
590 return toinsert;
590 };
591 };
591
592
592
593
593 var append_text = function (data, md, element) {
594 var append_text = function (data, md, element) {
594 var type = 'text/plain';
595 var type = 'text/plain';
595 var toinsert = this.create_output_subarea(md, "output_text", type);
596 var toinsert = this.create_output_subarea(md, "output_text", type);
596 // escape ANSI & HTML specials in plaintext:
597 // escape ANSI & HTML specials in plaintext:
597 data = utils.fixConsole(data);
598 data = utils.fixConsole(data);
598 data = utils.fixCarriageReturn(data);
599 data = utils.fixCarriageReturn(data);
599 data = utils.autoLinkUrls(data);
600 data = utils.autoLinkUrls(data);
600 // The only user content injected with this HTML call is
601 // The only user content injected with this HTML call is
601 // escaped by the fixConsole() method.
602 // escaped by the fixConsole() method.
602 toinsert.append($("<pre/>").html(data));
603 toinsert.append($("<pre/>").html(data));
603 element.append(toinsert);
604 element.append(toinsert);
604 return toinsert;
605 return toinsert;
605 };
606 };
606
607
607
608
608 var append_svg = function (svg_html, md, element) {
609 var append_svg = function (svg_html, md, element) {
609 var type = 'image/svg+xml';
610 var type = 'image/svg+xml';
610 var toinsert = this.create_output_subarea(md, "output_svg", type);
611 var toinsert = this.create_output_subarea(md, "output_svg", type);
611
612
612 // Get the svg element from within the HTML.
613 // Get the svg element from within the HTML.
613 var svg = $('<div />').html(svg_html).find('svg');
614 var svg = $('<div />').html(svg_html).find('svg');
614 var svg_area = $('<div />');
615 var svg_area = $('<div />');
615 var width = svg.attr('width');
616 var width = svg.attr('width');
616 var height = svg.attr('height');
617 var height = svg.attr('height');
617 svg
618 svg
618 .width('100%')
619 .width('100%')
619 .height('100%');
620 .height('100%');
620 svg_area
621 svg_area
621 .width(width)
622 .width(width)
622 .height(height);
623 .height(height);
623
624
624 // The jQuery resize handlers don't seem to work on the svg element.
625 // The jQuery resize handlers don't seem to work on the svg element.
625 // When the svg renders completely, measure it's size and set the parent
626 // When the svg renders completely, measure it's size and set the parent
626 // div to that size. Then set the svg to 100% the size of the parent
627 // div to that size. Then set the svg to 100% the size of the parent
627 // div and make the parent div resizable.
628 // div and make the parent div resizable.
628 this._dblclick_to_reset_size(svg_area, true, false);
629 this._dblclick_to_reset_size(svg_area, true, false);
629
630
630 svg_area.append(svg);
631 svg_area.append(svg);
631 toinsert.append(svg_area);
632 toinsert.append(svg_area);
632 element.append(toinsert);
633 element.append(toinsert);
633
634
634 return toinsert;
635 return toinsert;
635 };
636 };
636
637
637 OutputArea.prototype._dblclick_to_reset_size = function (img, immediately, resize_parent) {
638 OutputArea.prototype._dblclick_to_reset_size = function (img, immediately, resize_parent) {
638 // Add a resize handler to an element
639 // Add a resize handler to an element
639 //
640 //
640 // img: jQuery element
641 // img: jQuery element
641 // immediately: bool=False
642 // immediately: bool=False
642 // Wait for the element to load before creating the handle.
643 // Wait for the element to load before creating the handle.
643 // resize_parent: bool=True
644 // resize_parent: bool=True
644 // Should the parent of the element be resized when the element is
645 // Should the parent of the element be resized when the element is
645 // reset (by double click).
646 // reset (by double click).
646 var callback = function (){
647 var callback = function (){
647 var h0 = img.height();
648 var h0 = img.height();
648 var w0 = img.width();
649 var w0 = img.width();
649 if (!(h0 && w0)) {
650 if (!(h0 && w0)) {
650 // zero size, don't make it resizable
651 // zero size, don't make it resizable
651 return;
652 return;
652 }
653 }
653 img.resizable({
654 img.resizable({
654 aspectRatio: true,
655 aspectRatio: true,
655 autoHide: true
656 autoHide: true
656 });
657 });
657 img.dblclick(function () {
658 img.dblclick(function () {
658 // resize wrapper & image together for some reason:
659 // resize wrapper & image together for some reason:
659 img.height(h0);
660 img.height(h0);
660 img.width(w0);
661 img.width(w0);
661 if (resize_parent === undefined || resize_parent) {
662 if (resize_parent === undefined || resize_parent) {
662 img.parent().height(h0);
663 img.parent().height(h0);
663 img.parent().width(w0);
664 img.parent().width(w0);
664 }
665 }
665 });
666 });
666 };
667 };
667
668
668 if (immediately) {
669 if (immediately) {
669 callback();
670 callback();
670 } else {
671 } else {
671 img.on("load", callback);
672 img.on("load", callback);
672 }
673 }
673 };
674 };
674
675
675 var set_width_height = function (img, md, mime) {
676 var set_width_height = function (img, md, mime) {
676 // set width and height of an img element from metadata
677 // set width and height of an img element from metadata
677 var height = _get_metadata_key(md, 'height', mime);
678 var height = _get_metadata_key(md, 'height', mime);
678 if (height !== undefined) img.attr('height', height);
679 if (height !== undefined) img.attr('height', height);
679 var width = _get_metadata_key(md, 'width', mime);
680 var width = _get_metadata_key(md, 'width', mime);
680 if (width !== undefined) img.attr('width', width);
681 if (width !== undefined) img.attr('width', width);
681 };
682 };
682
683
683 var append_png = function (png, md, element, handle_inserted) {
684 var append_png = function (png, md, element, handle_inserted) {
684 var type = 'image/png';
685 var type = 'image/png';
685 var toinsert = this.create_output_subarea(md, "output_png", type);
686 var toinsert = this.create_output_subarea(md, "output_png", type);
686 var img = $("<img/>");
687 var img = $("<img/>");
687 if (handle_inserted !== undefined) {
688 if (handle_inserted !== undefined) {
688 img.on('load', function(){
689 img.on('load', function(){
689 handle_inserted(img);
690 handle_inserted(img);
690 });
691 });
691 }
692 }
692 img[0].src = 'data:image/png;base64,'+ png;
693 img[0].src = 'data:image/png;base64,'+ png;
693 set_width_height(img, md, 'image/png');
694 set_width_height(img, md, 'image/png');
694 this._dblclick_to_reset_size(img);
695 this._dblclick_to_reset_size(img);
695 toinsert.append(img);
696 toinsert.append(img);
696 element.append(toinsert);
697 element.append(toinsert);
697 return toinsert;
698 return toinsert;
698 };
699 };
699
700
700
701
701 var append_jpeg = function (jpeg, md, element, handle_inserted) {
702 var append_jpeg = function (jpeg, md, element, handle_inserted) {
702 var type = 'image/jpeg';
703 var type = 'image/jpeg';
703 var toinsert = this.create_output_subarea(md, "output_jpeg", type);
704 var toinsert = this.create_output_subarea(md, "output_jpeg", type);
704 var img = $("<img/>");
705 var img = $("<img/>");
705 if (handle_inserted !== undefined) {
706 if (handle_inserted !== undefined) {
706 img.on('load', function(){
707 img.on('load', function(){
707 handle_inserted(img);
708 handle_inserted(img);
708 });
709 });
709 }
710 }
710 img[0].src = 'data:image/jpeg;base64,'+ jpeg;
711 img[0].src = 'data:image/jpeg;base64,'+ jpeg;
711 set_width_height(img, md, 'image/jpeg');
712 set_width_height(img, md, 'image/jpeg');
712 this._dblclick_to_reset_size(img);
713 this._dblclick_to_reset_size(img);
713 toinsert.append(img);
714 toinsert.append(img);
714 element.append(toinsert);
715 element.append(toinsert);
715 return toinsert;
716 return toinsert;
716 };
717 };
717
718
718
719
719 var append_pdf = function (pdf, md, element) {
720 var append_pdf = function (pdf, md, element) {
720 var type = 'application/pdf';
721 var type = 'application/pdf';
721 var toinsert = this.create_output_subarea(md, "output_pdf", type);
722 var toinsert = this.create_output_subarea(md, "output_pdf", type);
722 var a = $('<a/>').attr('href', 'data:application/pdf;base64,'+pdf);
723 var a = $('<a/>').attr('href', 'data:application/pdf;base64,'+pdf);
723 a.attr('target', '_blank');
724 a.attr('target', '_blank');
724 a.text('View PDF')
725 a.text('View PDF')
725 toinsert.append(a);
726 toinsert.append(a);
726 element.append(toinsert);
727 element.append(toinsert);
727 return toinsert;
728 return toinsert;
728 }
729 }
729
730
730 var append_latex = function (latex, md, element) {
731 var append_latex = function (latex, md, element) {
731 // This method cannot do the typesetting because the latex first has to
732 // This method cannot do the typesetting because the latex first has to
732 // be on the page.
733 // be on the page.
733 var type = 'text/latex';
734 var type = 'text/latex';
734 var toinsert = this.create_output_subarea(md, "output_latex", type);
735 var toinsert = this.create_output_subarea(md, "output_latex", type);
735 toinsert.append(latex);
736 toinsert.append(latex);
736 element.append(toinsert);
737 element.append(toinsert);
737 return toinsert;
738 return toinsert;
738 };
739 };
739
740
740
741
741 OutputArea.prototype.append_raw_input = function (msg) {
742 OutputArea.prototype.append_raw_input = function (msg) {
742 var that = this;
743 var that = this;
743 this.expand();
744 this.expand();
744 var content = msg.content;
745 var content = msg.content;
745 var area = this.create_output_area();
746 var area = this.create_output_area();
746
747
747 // disable any other raw_inputs, if they are left around
748 // disable any other raw_inputs, if they are left around
748 $("div.output_subarea.raw_input_container").remove();
749 $("div.output_subarea.raw_input_container").remove();
749
750
750 var input_type = content.password ? 'password' : 'text';
751 var input_type = content.password ? 'password' : 'text';
751
752
752 area.append(
753 area.append(
753 $("<div/>")
754 $("<div/>")
754 .addClass("box-flex1 output_subarea raw_input_container")
755 .addClass("box-flex1 output_subarea raw_input_container")
755 .append(
756 .append(
756 $("<span/>")
757 $("<span/>")
757 .addClass("raw_input_prompt")
758 .addClass("raw_input_prompt")
758 .text(content.prompt)
759 .text(content.prompt)
759 )
760 )
760 .append(
761 .append(
761 $("<input/>")
762 $("<input/>")
762 .addClass("raw_input")
763 .addClass("raw_input")
763 .attr('type', input_type)
764 .attr('type', input_type)
764 .attr("size", 47)
765 .attr("size", 47)
765 .keydown(function (event, ui) {
766 .keydown(function (event, ui) {
766 // make sure we submit on enter,
767 // make sure we submit on enter,
767 // and don't re-execute the *cell* on shift-enter
768 // and don't re-execute the *cell* on shift-enter
768 if (event.which === keyboard.keycodes.enter) {
769 if (event.which === keyboard.keycodes.enter) {
769 that._submit_raw_input();
770 that._submit_raw_input();
770 return false;
771 return false;
771 }
772 }
772 })
773 })
773 )
774 )
774 );
775 );
775
776
776 this.element.append(area);
777 this.element.append(area);
777 var raw_input = area.find('input.raw_input');
778 var raw_input = area.find('input.raw_input');
778 // Register events that enable/disable the keyboard manager while raw
779 // Register events that enable/disable the keyboard manager while raw
779 // input is focused.
780 // input is focused.
780 this.keyboard_manager.register_events(raw_input);
781 this.keyboard_manager.register_events(raw_input);
781 // Note, the following line used to read raw_input.focus().focus().
782 // Note, the following line used to read raw_input.focus().focus().
782 // This seemed to be needed otherwise only the cell would be focused.
783 // This seemed to be needed otherwise only the cell would be focused.
783 // But with the modal UI, this seems to work fine with one call to focus().
784 // But with the modal UI, this seems to work fine with one call to focus().
784 raw_input.focus();
785 raw_input.focus();
785 }
786 }
786
787
787 OutputArea.prototype._submit_raw_input = function (evt) {
788 OutputArea.prototype._submit_raw_input = function (evt) {
788 var container = this.element.find("div.raw_input_container");
789 var container = this.element.find("div.raw_input_container");
789 var theprompt = container.find("span.raw_input_prompt");
790 var theprompt = container.find("span.raw_input_prompt");
790 var theinput = container.find("input.raw_input");
791 var theinput = container.find("input.raw_input");
791 var value = theinput.val();
792 var value = theinput.val();
792 var echo = value;
793 var echo = value;
793 // don't echo if it's a password
794 // don't echo if it's a password
794 if (theinput.attr('type') == 'password') {
795 if (theinput.attr('type') == 'password') {
795 echo = 'Β·Β·Β·Β·Β·Β·Β·Β·';
796 echo = 'Β·Β·Β·Β·Β·Β·Β·Β·';
796 }
797 }
797 var content = {
798 var content = {
798 output_type : 'stream',
799 output_type : 'stream',
799 stream : 'stdout',
800 stream : 'stdout',
800 text : theprompt.text() + echo + '\n'
801 text : theprompt.text() + echo + '\n'
801 }
802 }
802 // remove form container
803 // remove form container
803 container.parent().remove();
804 container.parent().remove();
804 // replace with plaintext version in stdout
805 // replace with plaintext version in stdout
805 this.append_output(content, false);
806 this.append_output(content, false);
806 this.events.trigger('send_input_reply.Kernel', value);
807 this.events.trigger('send_input_reply.Kernel', value);
807 }
808 }
808
809
809
810
810 OutputArea.prototype.handle_clear_output = function (msg) {
811 OutputArea.prototype.handle_clear_output = function (msg) {
811 // msg spec v4 had stdout, stderr, display keys
812 // msg spec v4 had stdout, stderr, display keys
812 // v4.1 replaced these with just wait
813 // v4.1 replaced these with just wait
813 // The default behavior is the same (stdout=stderr=display=True, wait=False),
814 // The default behavior is the same (stdout=stderr=display=True, wait=False),
814 // so v4 messages will still be properly handled,
815 // so v4 messages will still be properly handled,
815 // except for the rarely used clearing less than all output.
816 // except for the rarely used clearing less than all output.
816 this.clear_output(msg.content.wait || false);
817 this.clear_output(msg.content.wait || false);
817 };
818 };
818
819
819
820
820 OutputArea.prototype.clear_output = function(wait) {
821 OutputArea.prototype.clear_output = function(wait) {
821 if (wait) {
822 if (wait) {
822
823
823 // If a clear is queued, clear before adding another to the queue.
824 // If a clear is queued, clear before adding another to the queue.
824 if (this.clear_queued) {
825 if (this.clear_queued) {
825 this.clear_output(false);
826 this.clear_output(false);
826 };
827 };
827
828
828 this.clear_queued = true;
829 this.clear_queued = true;
829 } else {
830 } else {
830
831
831 // Fix the output div's height if the clear_output is waiting for
832 // Fix the output div's height if the clear_output is waiting for
832 // new output (it is being used in an animation).
833 // new output (it is being used in an animation).
833 if (this.clear_queued) {
834 if (this.clear_queued) {
834 var height = this.element.height();
835 var height = this.element.height();
835 this.element.height(height);
836 this.element.height(height);
836 this.clear_queued = false;
837 this.clear_queued = false;
837 }
838 }
838
839
839 // Clear all
840 // Clear all
840 // Remove load event handlers from img tags because we don't want
841 // Remove load event handlers from img tags because we don't want
841 // them to fire if the image is never added to the page.
842 // them to fire if the image is never added to the page.
842 this.element.find('img').off('load');
843 this.element.find('img').off('load');
843 this.element.html("");
844 this.element.html("");
844 this.outputs = [];
845 this.outputs = [];
845 this.trusted = true;
846 this.trusted = true;
846 this.unscroll_area();
847 this.unscroll_area();
847 return;
848 return;
848 };
849 };
849 };
850 };
850
851
851
852
852 // JSON serialization
853 // JSON serialization
853
854
854 OutputArea.prototype.fromJSON = function (outputs) {
855 OutputArea.prototype.fromJSON = function (outputs) {
855 var len = outputs.length;
856 var len = outputs.length;
856 var data;
857 var data;
857
858
858 for (var i=0; i<len; i++) {
859 for (var i=0; i<len; i++) {
859 data = outputs[i];
860 data = outputs[i];
860 var msg_type = data.output_type;
861 var msg_type = data.output_type;
861 if (msg_type == "pyout") {
862 if (msg_type == "pyout") {
862 // pyout message has been renamed to execute_result,
863 // pyout message has been renamed to execute_result,
863 // but the nbformat has not been updated,
864 // but the nbformat has not been updated,
864 // so transform back to pyout for json.
865 // so transform back to pyout for json.
865 msg_type = data.output_type = "execute_result";
866 msg_type = data.output_type = "execute_result";
866 } else if (msg_type == "pyerr") {
867 } else if (msg_type == "pyerr") {
867 // pyerr message has been renamed to error,
868 // pyerr message has been renamed to error,
868 // but the nbformat has not been updated,
869 // but the nbformat has not been updated,
869 // so transform back to pyerr for json.
870 // so transform back to pyerr for json.
870 msg_type = data.output_type = "error";
871 msg_type = data.output_type = "error";
871 }
872 }
872 if (msg_type === "display_data" || msg_type === "execute_result") {
873 if (msg_type === "display_data" || msg_type === "execute_result") {
873 // convert short keys to mime keys
874 // convert short keys to mime keys
874 // TODO: remove mapping of short keys when we update to nbformat 4
875 // TODO: remove mapping of short keys when we update to nbformat 4
875 data = this.rename_keys(data, OutputArea.mime_map_r);
876 data = this.rename_keys(data, OutputArea.mime_map_r);
876 data.metadata = this.rename_keys(data.metadata, OutputArea.mime_map_r);
877 data.metadata = this.rename_keys(data.metadata, OutputArea.mime_map_r);
877 // msg spec JSON is an object, nbformat v3 JSON is a JSON string
878 // msg spec JSON is an object, nbformat v3 JSON is a JSON string
878 if (data["application/json"] !== undefined && typeof data["application/json"] === 'string') {
879 if (data["application/json"] !== undefined && typeof data["application/json"] === 'string') {
879 data["application/json"] = JSON.parse(data["application/json"]);
880 data["application/json"] = JSON.parse(data["application/json"]);
880 }
881 }
881 }
882 }
882
883
883 this.append_output(data);
884 this.append_output(data);
884 }
885 }
885 };
886 };
886
887
887
888
888 OutputArea.prototype.toJSON = function () {
889 OutputArea.prototype.toJSON = function () {
889 var outputs = [];
890 var outputs = [];
890 var len = this.outputs.length;
891 var len = this.outputs.length;
891 var data;
892 var data;
892 for (var i=0; i<len; i++) {
893 for (var i=0; i<len; i++) {
893 data = this.outputs[i];
894 data = this.outputs[i];
894 var msg_type = data.output_type;
895 var msg_type = data.output_type;
895 if (msg_type === "display_data" || msg_type === "execute_result") {
896 if (msg_type === "display_data" || msg_type === "execute_result") {
896 // convert mime keys to short keys
897 // convert mime keys to short keys
897 data = this.rename_keys(data, OutputArea.mime_map);
898 data = this.rename_keys(data, OutputArea.mime_map);
898 data.metadata = this.rename_keys(data.metadata, OutputArea.mime_map);
899 data.metadata = this.rename_keys(data.metadata, OutputArea.mime_map);
899 // msg spec JSON is an object, nbformat v3 JSON is a JSON string
900 // msg spec JSON is an object, nbformat v3 JSON is a JSON string
900 if (data.json !== undefined && typeof data.json !== 'string') {
901 if (data.json !== undefined && typeof data.json !== 'string') {
901 data.json = JSON.stringify(data.json);
902 data.json = JSON.stringify(data.json);
902 }
903 }
903 }
904 }
904 if (msg_type == "execute_result") {
905 if (msg_type == "execute_result") {
905 // pyout message has been renamed to execute_result,
906 // pyout message has been renamed to execute_result,
906 // but the nbformat has not been updated,
907 // but the nbformat has not been updated,
907 // so transform back to pyout for json.
908 // so transform back to pyout for json.
908 data.output_type = "pyout";
909 data.output_type = "pyout";
909 } else if (msg_type == "error") {
910 } else if (msg_type == "error") {
910 // pyerr message has been renamed to error,
911 // pyerr message has been renamed to error,
911 // but the nbformat has not been updated,
912 // but the nbformat has not been updated,
912 // so transform back to pyerr for json.
913 // so transform back to pyerr for json.
913 data.output_type = "pyerr";
914 data.output_type = "pyerr";
914 }
915 }
915 outputs[i] = data;
916 outputs[i] = data;
916 }
917 }
917 return outputs;
918 return outputs;
918 };
919 };
919
920
920 /**
921 /**
921 * Class properties
922 * Class properties
922 **/
923 **/
923
924
924 /**
925 /**
925 * Threshold to trigger autoscroll when the OutputArea is resized,
926 * Threshold to trigger autoscroll when the OutputArea is resized,
926 * typically when new outputs are added.
927 * typically when new outputs are added.
927 *
928 *
928 * Behavior is undefined if autoscroll is lower than minimum_scroll_threshold,
929 * Behavior is undefined if autoscroll is lower than minimum_scroll_threshold,
929 * unless it is < 0, in which case autoscroll will never be triggered
930 * unless it is < 0, in which case autoscroll will never be triggered
930 *
931 *
931 * @property auto_scroll_threshold
932 * @property auto_scroll_threshold
932 * @type Number
933 * @type Number
933 * @default 100
934 * @default 100
934 *
935 *
935 **/
936 **/
936 OutputArea.auto_scroll_threshold = 100;
937 OutputArea.auto_scroll_threshold = 100;
937
938
938 /**
939 /**
939 * Lower limit (in lines) for OutputArea to be made scrollable. OutputAreas
940 * Lower limit (in lines) for OutputArea to be made scrollable. OutputAreas
940 * shorter than this are never scrolled.
941 * shorter than this are never scrolled.
941 *
942 *
942 * @property minimum_scroll_threshold
943 * @property minimum_scroll_threshold
943 * @type Number
944 * @type Number
944 * @default 20
945 * @default 20
945 *
946 *
946 **/
947 **/
947 OutputArea.minimum_scroll_threshold = 20;
948 OutputArea.minimum_scroll_threshold = 20;
948
949
949
950
950
951
951 OutputArea.mime_map = {
952 OutputArea.mime_map = {
952 "text/plain" : "text",
953 "text/plain" : "text",
953 "text/html" : "html",
954 "text/html" : "html",
954 "image/svg+xml" : "svg",
955 "image/svg+xml" : "svg",
955 "image/png" : "png",
956 "image/png" : "png",
956 "image/jpeg" : "jpeg",
957 "image/jpeg" : "jpeg",
957 "text/latex" : "latex",
958 "text/latex" : "latex",
958 "application/json" : "json",
959 "application/json" : "json",
959 "application/javascript" : "javascript",
960 "application/javascript" : "javascript",
960 };
961 };
961
962
962 OutputArea.mime_map_r = {
963 OutputArea.mime_map_r = {
963 "text" : "text/plain",
964 "text" : "text/plain",
964 "html" : "text/html",
965 "html" : "text/html",
965 "svg" : "image/svg+xml",
966 "svg" : "image/svg+xml",
966 "png" : "image/png",
967 "png" : "image/png",
967 "jpeg" : "image/jpeg",
968 "jpeg" : "image/jpeg",
968 "latex" : "text/latex",
969 "latex" : "text/latex",
969 "json" : "application/json",
970 "json" : "application/json",
970 "javascript" : "application/javascript",
971 "javascript" : "application/javascript",
971 };
972 };
972
973
973 OutputArea.display_order = [
974 OutputArea.display_order = [
974 'application/javascript',
975 'application/javascript',
975 'text/html',
976 'text/html',
976 'text/markdown',
977 'text/markdown',
977 'text/latex',
978 'text/latex',
978 'image/svg+xml',
979 'image/svg+xml',
979 'image/png',
980 'image/png',
980 'image/jpeg',
981 'image/jpeg',
981 'application/pdf',
982 'application/pdf',
982 'text/plain'
983 'text/plain'
983 ];
984 ];
984
985
985 OutputArea.append_map = {
986 OutputArea.append_map = {
986 "text/plain" : append_text,
987 "text/plain" : append_text,
987 "text/html" : append_html,
988 "text/html" : append_html,
988 "text/markdown": append_markdown,
989 "text/markdown": append_markdown,
989 "image/svg+xml" : append_svg,
990 "image/svg+xml" : append_svg,
990 "image/png" : append_png,
991 "image/png" : append_png,
991 "image/jpeg" : append_jpeg,
992 "image/jpeg" : append_jpeg,
992 "text/latex" : append_latex,
993 "text/latex" : append_latex,
993 "application/javascript" : append_javascript,
994 "application/javascript" : append_javascript,
994 "application/pdf" : append_pdf
995 "application/pdf" : append_pdf
995 };
996 };
996
997
997 // For backwards compatability.
998 // For backwards compatability.
998 IPython.OutputArea = OutputArea;
999 IPython.OutputArea = OutputArea;
999
1000
1000 return {'OutputArea': OutputArea};
1001 return {'OutputArea': OutputArea};
1001 });
1002 });
General Comments 0
You need to be logged in to leave comments. Login now