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