##// END OF EJS Templates
add semi colon
Matthias Bussonnier -
Show More
@@ -1,729 +1,729 b''
1 //----------------------------------------------------------------------------
1 //----------------------------------------------------------------------------
2 // Copyright (C) 2008 The IPython Development Team
2 // Copyright (C) 2008 The IPython Development Team
3 //
3 //
4 // Distributed under the terms of the BSD License. The full license is in
4 // Distributed under the terms of the BSD License. The full license is in
5 // the file COPYING, distributed as part of this software.
5 // the file COPYING, distributed as part of this software.
6 //----------------------------------------------------------------------------
6 //----------------------------------------------------------------------------
7
7
8 //============================================================================
8 //============================================================================
9 // OutputArea
9 // OutputArea
10 //============================================================================
10 //============================================================================
11
11
12 /**
12 /**
13 * @module IPython
13 * @module IPython
14 * @namespace IPython
14 * @namespace IPython
15 * @submodule OutputArea
15 * @submodule OutputArea
16 */
16 */
17 var IPython = (function (IPython) {
17 var IPython = (function (IPython) {
18 "use strict";
18 "use strict";
19
19
20 var utils = IPython.utils;
20 var utils = IPython.utils;
21
21
22 /**
22 /**
23 * @class OutputArea
23 * @class OutputArea
24 *
24 *
25 * @constructor
25 * @constructor
26 */
26 */
27
27
28 var OutputArea = function (selector, prompt_area) {
28 var OutputArea = function (selector, prompt_area) {
29 this.selector = selector;
29 this.selector = selector;
30 this.wrapper = $(selector);
30 this.wrapper = $(selector);
31 this.outputs = [];
31 this.outputs = [];
32 this.collapsed = false;
32 this.collapsed = false;
33 this.scrolled = false;
33 this.scrolled = false;
34 this.clear_queued = null;
34 this.clear_queued = null;
35 if (prompt_area === undefined) {
35 if (prompt_area === undefined) {
36 this.prompt_area = true;
36 this.prompt_area = true;
37 } else {
37 } else {
38 this.prompt_area = prompt_area;
38 this.prompt_area = prompt_area;
39 }
39 }
40 this.create_elements();
40 this.create_elements();
41 this.style();
41 this.style();
42 this.bind_events();
42 this.bind_events();
43 };
43 };
44
44
45 OutputArea.prototype.create_elements = function () {
45 OutputArea.prototype.create_elements = function () {
46 this.element = $("<div/>");
46 this.element = $("<div/>");
47 this.collapse_button = $("<div/>");
47 this.collapse_button = $("<div/>");
48 this.prompt_overlay = $("<div/>");
48 this.prompt_overlay = $("<div/>");
49 this.wrapper.append(this.prompt_overlay);
49 this.wrapper.append(this.prompt_overlay);
50 this.wrapper.append(this.element);
50 this.wrapper.append(this.element);
51 this.wrapper.append(this.collapse_button);
51 this.wrapper.append(this.collapse_button);
52 };
52 };
53
53
54
54
55 OutputArea.prototype.style = function () {
55 OutputArea.prototype.style = function () {
56 this.collapse_button.hide();
56 this.collapse_button.hide();
57 this.prompt_overlay.hide();
57 this.prompt_overlay.hide();
58
58
59 this.wrapper.addClass('output_wrapper');
59 this.wrapper.addClass('output_wrapper');
60 this.element.addClass('output');
60 this.element.addClass('output');
61
61
62 this.collapse_button.addClass("btn output_collapsed");
62 this.collapse_button.addClass("btn output_collapsed");
63 this.collapse_button.attr('title', 'click to expand output');
63 this.collapse_button.attr('title', 'click to expand output');
64 this.collapse_button.html('. . .');
64 this.collapse_button.html('. . .');
65
65
66 this.prompt_overlay.addClass('out_prompt_overlay prompt');
66 this.prompt_overlay.addClass('out_prompt_overlay prompt');
67 this.prompt_overlay.attr('title', 'click to expand output; double click to hide output');
67 this.prompt_overlay.attr('title', 'click to expand output; double click to hide output');
68
68
69 this.collapse();
69 this.collapse();
70 };
70 };
71
71
72 /**
72 /**
73 * Should the OutputArea scroll?
73 * Should the OutputArea scroll?
74 * Returns whether the height (in lines) exceeds a threshold.
74 * Returns whether the height (in lines) exceeds a threshold.
75 *
75 *
76 * @private
76 * @private
77 * @method _should_scroll
77 * @method _should_scroll
78 * @param [lines=100]{Integer}
78 * @param [lines=100]{Integer}
79 * @return {Bool}
79 * @return {Bool}
80 *
80 *
81 */
81 */
82 OutputArea.prototype._should_scroll = function (lines) {
82 OutputArea.prototype._should_scroll = function (lines) {
83 if (lines <=0 ){ return }
83 if (lines <=0 ){ return }
84 if (!lines) {
84 if (!lines) {
85 lines = 100;
85 lines = 100;
86 }
86 }
87 // line-height from http://stackoverflow.com/questions/1185151
87 // line-height from http://stackoverflow.com/questions/1185151
88 var fontSize = this.element.css('font-size');
88 var fontSize = this.element.css('font-size');
89 var lineHeight = Math.floor(parseInt(fontSize.replace('px','')) * 1.5);
89 var lineHeight = Math.floor(parseInt(fontSize.replace('px','')) * 1.5);
90
90
91 return (this.element.height() > lines * lineHeight);
91 return (this.element.height() > lines * lineHeight);
92 };
92 };
93
93
94
94
95 OutputArea.prototype.bind_events = function () {
95 OutputArea.prototype.bind_events = function () {
96 var that = this;
96 var that = this;
97 this.prompt_overlay.dblclick(function () { that.toggle_output(); });
97 this.prompt_overlay.dblclick(function () { that.toggle_output(); });
98 this.prompt_overlay.click(function () { that.toggle_scroll(); });
98 this.prompt_overlay.click(function () { that.toggle_scroll(); });
99
99
100 this.element.resize(function () {
100 this.element.resize(function () {
101 // FIXME: Firefox on Linux misbehaves, so automatic scrolling is disabled
101 // FIXME: Firefox on Linux misbehaves, so automatic scrolling is disabled
102 if ( IPython.utils.browser[0] === "Firefox" ) {
102 if ( IPython.utils.browser[0] === "Firefox" ) {
103 return;
103 return;
104 }
104 }
105 // maybe scroll output,
105 // maybe scroll output,
106 // if it's grown large enough and hasn't already been scrolled.
106 // if it's grown large enough and hasn't already been scrolled.
107 if ( !that.scrolled && that._should_scroll(OutputArea.auto_scroll_threshold)) {
107 if ( !that.scrolled && that._should_scroll(OutputArea.auto_scroll_threshold)) {
108 that.scroll_area();
108 that.scroll_area();
109 }
109 }
110 });
110 });
111 this.collapse_button.click(function () {
111 this.collapse_button.click(function () {
112 that.expand();
112 that.expand();
113 });
113 });
114 };
114 };
115
115
116
116
117 OutputArea.prototype.collapse = function () {
117 OutputArea.prototype.collapse = function () {
118 if (!this.collapsed) {
118 if (!this.collapsed) {
119 this.element.hide();
119 this.element.hide();
120 this.prompt_overlay.hide();
120 this.prompt_overlay.hide();
121 if (this.element.html()){
121 if (this.element.html()){
122 this.collapse_button.show();
122 this.collapse_button.show();
123 }
123 }
124 this.collapsed = true;
124 this.collapsed = true;
125 }
125 }
126 };
126 };
127
127
128
128
129 OutputArea.prototype.expand = function () {
129 OutputArea.prototype.expand = function () {
130 if (this.collapsed) {
130 if (this.collapsed) {
131 this.collapse_button.hide();
131 this.collapse_button.hide();
132 this.element.show();
132 this.element.show();
133 this.prompt_overlay.show();
133 this.prompt_overlay.show();
134 this.collapsed = false;
134 this.collapsed = false;
135 }
135 }
136 };
136 };
137
137
138
138
139 OutputArea.prototype.toggle_output = function () {
139 OutputArea.prototype.toggle_output = function () {
140 if (this.collapsed) {
140 if (this.collapsed) {
141 this.expand();
141 this.expand();
142 } else {
142 } else {
143 this.collapse();
143 this.collapse();
144 }
144 }
145 };
145 };
146
146
147
147
148 OutputArea.prototype.scroll_area = function () {
148 OutputArea.prototype.scroll_area = function () {
149 this.element.addClass('output_scroll');
149 this.element.addClass('output_scroll');
150 this.prompt_overlay.attr('title', 'click to unscroll output; double click to hide');
150 this.prompt_overlay.attr('title', 'click to unscroll output; double click to hide');
151 this.scrolled = true;
151 this.scrolled = true;
152 };
152 };
153
153
154
154
155 OutputArea.prototype.unscroll_area = function () {
155 OutputArea.prototype.unscroll_area = function () {
156 this.element.removeClass('output_scroll');
156 this.element.removeClass('output_scroll');
157 this.prompt_overlay.attr('title', 'click to scroll output; double click to hide');
157 this.prompt_overlay.attr('title', 'click to scroll output; double click to hide');
158 this.scrolled = false;
158 this.scrolled = false;
159 };
159 };
160
160
161 /**
161 /**
162 * Threshold to trigger autoscroll when the OutputArea is resized,
162 * Threshold to trigger autoscroll when the OutputArea is resized,
163 * typically when new outputs are added.
163 * typically when new outputs are added.
164 *
164 *
165 * Behavior is undefined if autoscroll is lower than minimum_scroll_threshold,
165 * Behavior is undefined if autoscroll is lower than minimum_scroll_threshold,
166 * unless it is < 0, in which case autoscroll will never be triggered
166 * unless it is < 0, in which case autoscroll will never be triggered
167 *
167 *
168 * @property auto_scroll_threshold
168 * @property auto_scroll_threshold
169 * @type Number
169 * @type Number
170 * @default 100
170 * @default 100
171 *
171 *
172 **/
172 **/
173 OutputArea.auto_scroll_threshold = 100;
173 OutputArea.auto_scroll_threshold = 100;
174
174
175
175
176 /**
176 /**
177 * Lower limit (in lines) for OutputArea to be made scrollable. OutputAreas
177 * Lower limit (in lines) for OutputArea to be made scrollable. OutputAreas
178 * shorter than this are never scrolled.
178 * shorter than this are never scrolled.
179 *
179 *
180 * @property minimum_scroll_threshold
180 * @property minimum_scroll_threshold
181 * @type Number
181 * @type Number
182 * @default 20
182 * @default 20
183 *
183 *
184 **/
184 **/
185 OutputArea.minimum_scroll_threshold = 20;
185 OutputArea.minimum_scroll_threshold = 20;
186
186
187
187
188 /**
188 /**
189 *
189 *
190 * Scroll OutputArea if height supperior than a threshold (in lines).
190 * Scroll OutputArea if height supperior than a threshold (in lines).
191 *
191 *
192 * Threshold is a maximum number of lines. If unspecified, defaults to
192 * Threshold is a maximum number of lines. If unspecified, defaults to
193 * OutputArea.minimum_scroll_threshold.
193 * OutputArea.minimum_scroll_threshold.
194 *
194 *
195 * Negative threshold will prevent the OutputArea from ever scrolling.
195 * Negative threshold will prevent the OutputArea from ever scrolling.
196 *
196 *
197 * @method scroll_if_long
197 * @method scroll_if_long
198 *
198 *
199 * @param [lines=20]{Number} Default to 20 if not set,
199 * @param [lines=20]{Number} Default to 20 if not set,
200 * behavior undefined for value of `0`.
200 * behavior undefined for value of `0`.
201 *
201 *
202 **/
202 **/
203 OutputArea.prototype.scroll_if_long = function (lines) {
203 OutputArea.prototype.scroll_if_long = function (lines) {
204 var n = lines | OutputArea.minimum_scroll_threshold;
204 var n = lines | OutputArea.minimum_scroll_threshold;
205 if(n <= 0){
205 if(n <= 0){
206 return
206 return
207 }
207 }
208
208
209 if (this._should_scroll(n)) {
209 if (this._should_scroll(n)) {
210 // only allow scrolling long-enough output
210 // only allow scrolling long-enough output
211 this.scroll_area();
211 this.scroll_area();
212 }
212 }
213 };
213 };
214
214
215
215
216 OutputArea.prototype.toggle_scroll = function () {
216 OutputArea.prototype.toggle_scroll = function () {
217 if (this.scrolled) {
217 if (this.scrolled) {
218 this.unscroll_area();
218 this.unscroll_area();
219 } else {
219 } else {
220 // only allow scrolling long-enough output
220 // only allow scrolling long-enough output
221 this.scroll_if_long();
221 this.scroll_if_long();
222 }
222 }
223 };
223 };
224
224
225
225
226 // typeset with MathJax if MathJax is available
226 // typeset with MathJax if MathJax is available
227 OutputArea.prototype.typeset = function () {
227 OutputArea.prototype.typeset = function () {
228 if (window.MathJax){
228 if (window.MathJax){
229 MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
229 MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
230 }
230 }
231 };
231 };
232
232
233
233
234 OutputArea.prototype.handle_output = function (msg) {
234 OutputArea.prototype.handle_output = function (msg) {
235 var json = {};
235 var json = {};
236 var msg_type = json.output_type = msg.header.msg_type;
236 var msg_type = json.output_type = msg.header.msg_type;
237 var content = msg.content;
237 var content = msg.content;
238 if (msg_type === "stream") {
238 if (msg_type === "stream") {
239 json.text = content.data;
239 json.text = content.data;
240 json.stream = content.name;
240 json.stream = content.name;
241 } else if (msg_type === "display_data") {
241 } else if (msg_type === "display_data") {
242 json = this.convert_mime_types(json, content.data);
242 json = this.convert_mime_types(json, content.data);
243 json.metadata = this.convert_mime_types({}, content.metadata);
243 json.metadata = this.convert_mime_types({}, content.metadata);
244 } else if (msg_type === "pyout") {
244 } else if (msg_type === "pyout") {
245 json.prompt_number = content.execution_count;
245 json.prompt_number = content.execution_count;
246 json = this.convert_mime_types(json, content.data);
246 json = this.convert_mime_types(json, content.data);
247 json.metadata = this.convert_mime_types({}, content.metadata);
247 json.metadata = this.convert_mime_types({}, content.metadata);
248 } else if (msg_type === "pyerr") {
248 } else if (msg_type === "pyerr") {
249 json.ename = content.ename;
249 json.ename = content.ename;
250 json.evalue = content.evalue;
250 json.evalue = content.evalue;
251 json.traceback = content.traceback;
251 json.traceback = content.traceback;
252 }
252 }
253 // append with dynamic=true
253 // append with dynamic=true
254 this.append_output(json, true);
254 this.append_output(json, true);
255 };
255 };
256
256
257
257
258 OutputArea.prototype.convert_mime_types = function (json, data) {
258 OutputArea.prototype.convert_mime_types = function (json, data) {
259 if (data === undefined) {
259 if (data === undefined) {
260 return json;
260 return json;
261 }
261 }
262 if (data['text/plain'] !== undefined) {
262 if (data['text/plain'] !== undefined) {
263 json.text = data['text/plain'];
263 json.text = data['text/plain'];
264 }
264 }
265 if (data['text/html'] !== undefined) {
265 if (data['text/html'] !== undefined) {
266 json.html = data['text/html'];
266 json.html = data['text/html'];
267 }
267 }
268 if (data['image/svg+xml'] !== undefined) {
268 if (data['image/svg+xml'] !== undefined) {
269 json.svg = data['image/svg+xml'];
269 json.svg = data['image/svg+xml'];
270 }
270 }
271 if (data['image/png'] !== undefined) {
271 if (data['image/png'] !== undefined) {
272 json.png = data['image/png'];
272 json.png = data['image/png'];
273 }
273 }
274 if (data['image/jpeg'] !== undefined) {
274 if (data['image/jpeg'] !== undefined) {
275 json.jpeg = data['image/jpeg'];
275 json.jpeg = data['image/jpeg'];
276 }
276 }
277 if (data['text/latex'] !== undefined) {
277 if (data['text/latex'] !== undefined) {
278 json.latex = data['text/latex'];
278 json.latex = data['text/latex'];
279 }
279 }
280 if (data['application/json'] !== undefined) {
280 if (data['application/json'] !== undefined) {
281 json.json = data['application/json'];
281 json.json = data['application/json'];
282 }
282 }
283 if (data['application/javascript'] !== undefined) {
283 if (data['application/javascript'] !== undefined) {
284 json.javascript = data['application/javascript'];
284 json.javascript = data['application/javascript'];
285 }
285 }
286 return json;
286 return json;
287 };
287 };
288
288
289
289
290 OutputArea.prototype.append_output = function (json, dynamic) {
290 OutputArea.prototype.append_output = function (json, dynamic) {
291 // If dynamic is true, javascript output will be eval'd.
291 // If dynamic is true, javascript output will be eval'd.
292 this.expand();
292 this.expand();
293 // Clear the output if clear is queued.
293 // Clear the output if clear is queued.
294 var needs_height_reset = false;
294 var needs_height_reset = false;
295 if (this.clear_queued) {
295 if (this.clear_queued) {
296 this.clear_output(false);
296 this.clear_output(false);
297 needs_height_reset = true;
297 needs_height_reset = true;
298 }
298 }
299
299
300 if (json.output_type === 'pyout') {
300 if (json.output_type === 'pyout') {
301 this.append_pyout(json, dynamic);
301 this.append_pyout(json, dynamic);
302 } else if (json.output_type === 'pyerr') {
302 } else if (json.output_type === 'pyerr') {
303 this.append_pyerr(json);
303 this.append_pyerr(json);
304 } else if (json.output_type === 'display_data') {
304 } else if (json.output_type === 'display_data') {
305 this.append_display_data(json, dynamic);
305 this.append_display_data(json, dynamic);
306 } else if (json.output_type === 'stream') {
306 } else if (json.output_type === 'stream') {
307 this.append_stream(json);
307 this.append_stream(json);
308 }
308 }
309 this.outputs.push(json);
309 this.outputs.push(json);
310
310
311 // Only reset the height to automatic if the height is currently
311 // Only reset the height to automatic if the height is currently
312 // fixed (done by wait=True flag on clear_output).
312 // fixed (done by wait=True flag on clear_output).
313 if (needs_height_reset) {
313 if (needs_height_reset) {
314 this.element.height('');
314 this.element.height('');
315 }
315 }
316
316
317 var that = this;
317 var that = this;
318 setTimeout(function(){that.element.trigger('resize');}, 100);
318 setTimeout(function(){that.element.trigger('resize');}, 100);
319 };
319 };
320
320
321
321
322 OutputArea.prototype.create_output_area = function () {
322 OutputArea.prototype.create_output_area = function () {
323 var oa = $("<div/>").addClass("output_area");
323 var oa = $("<div/>").addClass("output_area");
324 if (this.prompt_area) {
324 if (this.prompt_area) {
325 oa.append($('<div/>').addClass('prompt'));
325 oa.append($('<div/>').addClass('prompt'));
326 }
326 }
327 return oa;
327 return oa;
328 };
328 };
329
329
330
330
331 OutputArea.prototype.create_output_subarea = function(md, classes) {
331 OutputArea.prototype.create_output_subarea = function(md, classes) {
332 var subarea = $('<div/>').addClass('output_subarea').addClass(classes);
332 var subarea = $('<div/>').addClass('output_subarea').addClass(classes);
333 if (md['isolated']) {
333 if (md['isolated']) {
334 // Create an iframe to isolate the subarea from the rest of the
334 // Create an iframe to isolate the subarea from the rest of the
335 // document
335 // document
336 var iframe = $('<iframe/>').addClass('box-flex1');
336 var iframe = $('<iframe/>').addClass('box-flex1');
337 iframe.css({'height':1, 'width':'100%', 'display':'block'});
337 iframe.css({'height':1, 'width':'100%', 'display':'block'});
338 iframe.attr('frameborder', 0);
338 iframe.attr('frameborder', 0);
339 iframe.attr('scrolling', 'auto');
339 iframe.attr('scrolling', 'auto');
340
340
341 // Once the iframe is loaded, the subarea is dynamically inserted
341 // Once the iframe is loaded, the subarea is dynamically inserted
342 iframe.on('load', function() {
342 iframe.on('load', function() {
343 // Workaround needed by Firefox, to properly render svg inside
343 // Workaround needed by Firefox, to properly render svg inside
344 // iframes, see http://stackoverflow.com/questions/10177190/
344 // iframes, see http://stackoverflow.com/questions/10177190/
345 // svg-dynamically-added-to-iframe-does-not-render-correctly
345 // svg-dynamically-added-to-iframe-does-not-render-correctly
346 this.contentDocument.open();
346 this.contentDocument.open();
347
347
348 // Insert the subarea into the iframe
348 // Insert the subarea into the iframe
349 // We must directly write the html. When using Jquery's append
349 // We must directly write the html. When using Jquery's append
350 // method, javascript is evaluated in the parent document and
350 // method, javascript is evaluated in the parent document and
351 // not in the iframe document.
351 // not in the iframe document.
352 this.contentDocument.write(subarea.html());
352 this.contentDocument.write(subarea.html());
353
353
354 this.contentDocument.close();
354 this.contentDocument.close();
355
355
356 var body = this.contentDocument.body;
356 var body = this.contentDocument.body;
357 // Adjust the iframe height automatically
357 // Adjust the iframe height automatically
358 iframe.height(body.scrollHeight + 'px');
358 iframe.height(body.scrollHeight + 'px');
359 });
359 });
360
360
361 // Elements should be appended to the inner subarea and not to the
361 // Elements should be appended to the inner subarea and not to the
362 // iframe
362 // iframe
363 iframe.append = function(that) {
363 iframe.append = function(that) {
364 subarea.append(that);
364 subarea.append(that);
365 };
365 };
366
366
367 return iframe;
367 return iframe;
368 } else {
368 } else {
369 return subarea;
369 return subarea;
370 }
370 }
371 }
371 }
372
372
373
373
374 OutputArea.prototype._append_javascript_error = function (err, container) {
374 OutputArea.prototype._append_javascript_error = function (err, container) {
375 // display a message when a javascript error occurs in display output
375 // display a message when a javascript error occurs in display output
376 var msg = "Javascript error adding output!"
376 var msg = "Javascript error adding output!"
377 console.log(msg, err);
377 console.log(msg, err);
378 if ( container === undefined ) return;
378 if ( container === undefined ) return;
379 container.append(
379 container.append(
380 $('<div/>').html(msg + "<br/>" +
380 $('<div/>').html(msg + "<br/>" +
381 err.toString() +
381 err.toString() +
382 '<br/>See your browser Javascript console for more details.'
382 '<br/>See your browser Javascript console for more details.'
383 ).addClass('js-error')
383 ).addClass('js-error')
384 );
384 );
385 container.show();
385 container.show();
386 };
386 };
387
387
388 OutputArea.prototype._safe_append = function (toinsert) {
388 OutputArea.prototype._safe_append = function (toinsert) {
389 // safely append an item to the document
389 // safely append an item to the document
390 // this is an object created by user code,
390 // this is an object created by user code,
391 // and may have errors, which should not be raised
391 // and may have errors, which should not be raised
392 // under any circumstances.
392 // under any circumstances.
393 try {
393 try {
394 this.element.append(toinsert);
394 this.element.append(toinsert);
395 } catch(err) {
395 } catch(err) {
396 console.log(err);
396 console.log(err);
397 this._append_javascript_error(err, this.element);
397 this._append_javascript_error(err, this.element);
398 }
398 }
399 };
399 };
400
400
401
401
402 OutputArea.prototype.append_pyout = function (json, dynamic) {
402 OutputArea.prototype.append_pyout = function (json, dynamic) {
403 var n = json.prompt_number || ' ';
403 var n = json.prompt_number || ' ';
404 var toinsert = this.create_output_area();
404 var toinsert = this.create_output_area();
405 if (this.prompt_area) {
405 if (this.prompt_area) {
406 toinsert.find('div.prompt').addClass('output_prompt').html('Out[' + n + ']:');
406 toinsert.find('div.prompt').addClass('output_prompt').html('Out[' + n + ']:');
407 }
407 }
408 this.append_mime_type(json, toinsert, dynamic);
408 this.append_mime_type(json, toinsert, dynamic);
409 this._safe_append(toinsert);
409 this._safe_append(toinsert);
410 // If we just output latex, typeset it.
410 // If we just output latex, typeset it.
411 if ((json.latex !== undefined) || (json.html !== undefined)) {
411 if ((json.latex !== undefined) || (json.html !== undefined)) {
412 this.typeset();
412 this.typeset();
413 }
413 }
414 };
414 };
415
415
416
416
417 OutputArea.prototype.append_pyerr = function (json) {
417 OutputArea.prototype.append_pyerr = function (json) {
418 var tb = json.traceback;
418 var tb = json.traceback;
419 if (tb !== undefined && tb.length > 0) {
419 if (tb !== undefined && tb.length > 0) {
420 var s = '';
420 var s = '';
421 var len = tb.length;
421 var len = tb.length;
422 for (var i=0; i<len; i++) {
422 for (var i=0; i<len; i++) {
423 s = s + tb[i] + '\n';
423 s = s + tb[i] + '\n';
424 }
424 }
425 s = s + '\n';
425 s = s + '\n';
426 var toinsert = this.create_output_area();
426 var toinsert = this.create_output_area();
427 this.append_text(s, {}, toinsert);
427 this.append_text(s, {}, toinsert);
428 this._safe_append(toinsert);
428 this._safe_append(toinsert);
429 }
429 }
430 };
430 };
431
431
432
432
433 OutputArea.prototype.append_stream = function (json) {
433 OutputArea.prototype.append_stream = function (json) {
434 // temporary fix: if stream undefined (json file written prior to this patch),
434 // temporary fix: if stream undefined (json file written prior to this patch),
435 // default to most likely stdout:
435 // default to most likely stdout:
436 if (json.stream == undefined){
436 if (json.stream == undefined){
437 json.stream = 'stdout';
437 json.stream = 'stdout';
438 }
438 }
439 var text = json.text;
439 var text = json.text;
440 var subclass = "output_"+json.stream;
440 var subclass = "output_"+json.stream;
441 if (this.outputs.length > 0){
441 if (this.outputs.length > 0){
442 // have at least one output to consider
442 // have at least one output to consider
443 var last = this.outputs[this.outputs.length-1];
443 var last = this.outputs[this.outputs.length-1];
444 if (last.output_type == 'stream' && json.stream == last.stream){
444 if (last.output_type == 'stream' && json.stream == last.stream){
445 // latest output was in the same stream,
445 // latest output was in the same stream,
446 // so append directly into its pre tag
446 // so append directly into its pre tag
447 // escape ANSI & HTML specials:
447 // escape ANSI & HTML specials:
448 var pre = this.element.find('div.'+subclass).last().find('pre');
448 var pre = this.element.find('div.'+subclass).last().find('pre');
449 var html = utils.fixCarriageReturn(
449 var html = utils.fixCarriageReturn(
450 pre.html() + utils.fixConsole(text));
450 pre.html() + utils.fixConsole(text));
451 pre.html(html);
451 pre.html(html);
452 return;
452 return;
453 }
453 }
454 }
454 }
455
455
456 if (!text.replace("\r", "")) {
456 if (!text.replace("\r", "")) {
457 // text is nothing (empty string, \r, etc.)
457 // text is nothing (empty string, \r, etc.)
458 // so don't append any elements, which might add undesirable space
458 // so don't append any elements, which might add undesirable space
459 return;
459 return;
460 }
460 }
461
461
462 // If we got here, attach a new div
462 // If we got here, attach a new div
463 var toinsert = this.create_output_area();
463 var toinsert = this.create_output_area();
464 this.append_text(text, {}, toinsert, "output_stream "+subclass);
464 this.append_text(text, {}, toinsert, "output_stream "+subclass);
465 this._safe_append(toinsert);
465 this._safe_append(toinsert);
466 };
466 };
467
467
468
468
469 OutputArea.prototype.append_display_data = function (json, dynamic) {
469 OutputArea.prototype.append_display_data = function (json, dynamic) {
470 var toinsert = this.create_output_area();
470 var toinsert = this.create_output_area();
471 if (this.append_mime_type(json, toinsert, dynamic)) {
471 if (this.append_mime_type(json, toinsert, dynamic)) {
472 this._safe_append(toinsert);
472 this._safe_append(toinsert);
473 // If we just output latex, typeset it.
473 // If we just output latex, typeset it.
474 if ( (json.latex !== undefined) || (json.html !== undefined) ) {
474 if ( (json.latex !== undefined) || (json.html !== undefined) ) {
475 this.typeset();
475 this.typeset();
476 }
476 }
477 }
477 }
478 };
478 };
479
479
480 OutputArea.display_order = ['javascript','html','latex','svg','png','jpeg','text'];
480 OutputArea.display_order = ['javascript','html','latex','svg','png','jpeg','text'];
481
481
482 OutputArea.prototype.append_mime_type = function (json, element, dynamic) {
482 OutputArea.prototype.append_mime_type = function (json, element, dynamic) {
483 for(var type_i in OutputArea.display_order){
483 for(var type_i in OutputArea.display_order){
484 var type = OutputArea.display_order[type_i];
484 var type = OutputArea.display_order[type_i];
485 if(json[type] != undefined ){
485 if(json[type] != undefined ){
486 var md = {};
486 var md = {};
487 if (json.metadata && json.metadata[type]) {
487 if (json.metadata && json.metadata[type]) {
488 md = json.metadata[type];
488 md = json.metadata[type];
489 };
489 };
490 if(type == 'javascript'){
490 if(type == 'javascript'){
491 if (dynamic) {
491 if (dynamic) {
492 this.append_javascript(json.javascript, md, element, dynamic);
492 this.append_javascript(json.javascript, md, element, dynamic);
493 return true;
493 return true;
494 }
494 }
495 } else {
495 } else {
496 this['append_'+type](json[type], md, element);
496 this['append_'+type](json[type], md, element);
497 return true;
497 return true;
498 }
498 }
499 return false;
499 return false;
500 }
500 }
501 }
501 }
502 return false;
502 return false;
503 };
503 };
504
504
505
505
506 OutputArea.prototype.append_html = function (html, md, element) {
506 OutputArea.prototype.append_html = function (html, md, element) {
507 var toinsert = this.create_output_subarea(md, "output_html rendered_html");
507 var toinsert = this.create_output_subarea(md, "output_html rendered_html");
508 toinsert.append(html);
508 toinsert.append(html);
509 element.append(toinsert);
509 element.append(toinsert);
510 };
510 };
511
511
512
512
513 OutputArea.prototype.append_javascript = function (js, md, container) {
513 OutputArea.prototype.append_javascript = function (js, md, container) {
514 // We just eval the JS code, element appears in the local scope.
514 // We just eval the JS code, element appears in the local scope.
515 var element = this.create_output_subarea(md, "");
515 var element = this.create_output_subarea(md, "");
516 container.append(element);
516 container.append(element);
517 // Div for js shouldn't be drawn, as it will add empty height to the area.
517 // Div for js shouldn't be drawn, as it will add empty height to the area.
518 container.hide();
518 container.hide();
519 // If the Javascript appends content to `element` that should be drawn, then
519 // If the Javascript appends content to `element` that should be drawn, then
520 // it must also call `container.show()`.
520 // it must also call `container.show()`.
521 try {
521 try {
522 eval(js);
522 eval(js);
523 } catch(err) {
523 } catch(err) {
524 this._append_javascript_error(err, container);
524 this._append_javascript_error(err, container);
525 }
525 }
526 };
526 };
527
527
528
528
529 OutputArea.prototype.append_text = function (data, md, element, extra_class) {
529 OutputArea.prototype.append_text = function (data, md, element, extra_class) {
530 var toinsert = this.create_output_subarea(md, "output_text");
530 var toinsert = this.create_output_subarea(md, "output_text");
531 // escape ANSI & HTML specials in plaintext:
531 // escape ANSI & HTML specials in plaintext:
532 data = utils.fixConsole(data);
532 data = utils.fixConsole(data);
533 data = utils.fixCarriageReturn(data);
533 data = utils.fixCarriageReturn(data);
534 data = utils.autoLinkUrls(data);
534 data = utils.autoLinkUrls(data);
535 if (extra_class){
535 if (extra_class){
536 toinsert.addClass(extra_class);
536 toinsert.addClass(extra_class);
537 }
537 }
538 toinsert.append($("<pre/>").html(data));
538 toinsert.append($("<pre/>").html(data));
539 element.append(toinsert);
539 element.append(toinsert);
540 };
540 };
541
541
542
542
543 OutputArea.prototype.append_svg = function (svg, md, element) {
543 OutputArea.prototype.append_svg = function (svg, md, element) {
544 var toinsert = this.create_output_subarea(md, "output_svg");
544 var toinsert = this.create_output_subarea(md, "output_svg");
545 toinsert.append(svg);
545 toinsert.append(svg);
546 element.append(toinsert);
546 element.append(toinsert);
547 };
547 };
548
548
549
549
550 OutputArea.prototype._dblclick_to_reset_size = function (img) {
550 OutputArea.prototype._dblclick_to_reset_size = function (img) {
551 // schedule wrapping image in resizable after a delay,
551 // schedule wrapping image in resizable after a delay,
552 // so we don't end up calling resize on a zero-size object
552 // so we don't end up calling resize on a zero-size object
553 var that = this;
553 var that = this;
554 setTimeout(function () {
554 setTimeout(function () {
555 var h0 = img.height();
555 var h0 = img.height();
556 var w0 = img.width();
556 var w0 = img.width();
557 if (!(h0 && w0)) {
557 if (!(h0 && w0)) {
558 // zero size, schedule another timeout
558 // zero size, schedule another timeout
559 that._dblclick_to_reset_size(img);
559 that._dblclick_to_reset_size(img);
560 return;
560 return;
561 }
561 }
562 img.resizable({
562 img.resizable({
563 aspectRatio: true,
563 aspectRatio: true,
564 autoHide: true
564 autoHide: true
565 });
565 });
566 img.dblclick(function () {
566 img.dblclick(function () {
567 // resize wrapper & image together for some reason:
567 // resize wrapper & image together for some reason:
568 img.parent().height(h0);
568 img.parent().height(h0);
569 img.height(h0);
569 img.height(h0);
570 img.parent().width(w0);
570 img.parent().width(w0);
571 img.width(w0);
571 img.width(w0);
572 });
572 });
573 }, 250);
573 }, 250);
574 };
574 };
575
575
576
576
577 OutputArea.prototype.append_png = function (png, md, element) {
577 OutputArea.prototype.append_png = function (png, md, element) {
578 var toinsert = this.create_output_subarea(md, "output_png");
578 var toinsert = this.create_output_subarea(md, "output_png");
579 var img = $("<img/>")
579 var img = $("<img/>");
580 img[0].setAttribute('src','data:image/png;base64,'+png);
580 img[0].setAttribute('src','data:image/png;base64,'+png);
581 if (md['height']) {
581 if (md['height']) {
582 img[0].setAttribute('height', md['height']);
582 img[0].setAttribute('height', md['height']);
583 }
583 }
584 if (md['width']) {
584 if (md['width']) {
585 img[0].setAttribute('width', md['width']);
585 img[0].setAttribute('width', md['width']);
586 }
586 }
587 this._dblclick_to_reset_size(img);
587 this._dblclick_to_reset_size(img);
588 toinsert.append(img);
588 toinsert.append(img);
589 element.append(toinsert);
589 element.append(toinsert);
590 };
590 };
591
591
592
592
593 OutputArea.prototype.append_jpeg = function (jpeg, md, element) {
593 OutputArea.prototype.append_jpeg = function (jpeg, md, element) {
594 var toinsert = this.create_output_subarea(md, "output_jpeg");
594 var toinsert = this.create_output_subarea(md, "output_jpeg");
595 var img = $("<img/>").attr('src','data:image/jpeg;base64,'+jpeg);
595 var img = $("<img/>").attr('src','data:image/jpeg;base64,'+jpeg);
596 if (md['height']) {
596 if (md['height']) {
597 img.attr('height', md['height']);
597 img.attr('height', md['height']);
598 }
598 }
599 if (md['width']) {
599 if (md['width']) {
600 img.attr('width', md['width']);
600 img.attr('width', md['width']);
601 }
601 }
602 this._dblclick_to_reset_size(img);
602 this._dblclick_to_reset_size(img);
603 toinsert.append(img);
603 toinsert.append(img);
604 element.append(toinsert);
604 element.append(toinsert);
605 };
605 };
606
606
607
607
608 OutputArea.prototype.append_latex = function (latex, md, element) {
608 OutputArea.prototype.append_latex = function (latex, md, element) {
609 // This method cannot do the typesetting because the latex first has to
609 // This method cannot do the typesetting because the latex first has to
610 // be on the page.
610 // be on the page.
611 var toinsert = this.create_output_subarea(md, "output_latex");
611 var toinsert = this.create_output_subarea(md, "output_latex");
612 toinsert.append(latex);
612 toinsert.append(latex);
613 element.append(toinsert);
613 element.append(toinsert);
614 };
614 };
615
615
616 OutputArea.prototype.append_raw_input = function (msg) {
616 OutputArea.prototype.append_raw_input = function (msg) {
617 var that = this;
617 var that = this;
618 this.expand();
618 this.expand();
619 var content = msg.content;
619 var content = msg.content;
620 var area = this.create_output_area();
620 var area = this.create_output_area();
621
621
622 // disable any other raw_inputs, if they are left around
622 // disable any other raw_inputs, if they are left around
623 $("div.output_subarea.raw_input").remove();
623 $("div.output_subarea.raw_input").remove();
624
624
625 area.append(
625 area.append(
626 $("<div/>")
626 $("<div/>")
627 .addClass("box-flex1 output_subarea raw_input")
627 .addClass("box-flex1 output_subarea raw_input")
628 .append(
628 .append(
629 $("<span/>")
629 $("<span/>")
630 .addClass("input_prompt")
630 .addClass("input_prompt")
631 .text(content.prompt)
631 .text(content.prompt)
632 )
632 )
633 .append(
633 .append(
634 $("<input/>")
634 $("<input/>")
635 .addClass("raw_input")
635 .addClass("raw_input")
636 .attr('type', 'text')
636 .attr('type', 'text')
637 .attr("size", 47)
637 .attr("size", 47)
638 .keydown(function (event, ui) {
638 .keydown(function (event, ui) {
639 // make sure we submit on enter,
639 // make sure we submit on enter,
640 // and don't re-execute the *cell* on shift-enter
640 // and don't re-execute the *cell* on shift-enter
641 if (event.which === utils.keycodes.ENTER) {
641 if (event.which === utils.keycodes.ENTER) {
642 that._submit_raw_input();
642 that._submit_raw_input();
643 return false;
643 return false;
644 }
644 }
645 })
645 })
646 )
646 )
647 );
647 );
648 this.element.append(area);
648 this.element.append(area);
649 // weirdly need double-focus now,
649 // weirdly need double-focus now,
650 // otherwise only the cell will be focused
650 // otherwise only the cell will be focused
651 area.find("input.raw_input").focus().focus();
651 area.find("input.raw_input").focus().focus();
652 }
652 }
653 OutputArea.prototype._submit_raw_input = function (evt) {
653 OutputArea.prototype._submit_raw_input = function (evt) {
654 var container = this.element.find("div.raw_input");
654 var container = this.element.find("div.raw_input");
655 var theprompt = container.find("span.input_prompt");
655 var theprompt = container.find("span.input_prompt");
656 var theinput = container.find("input.raw_input");
656 var theinput = container.find("input.raw_input");
657 var value = theinput.val();
657 var value = theinput.val();
658 var content = {
658 var content = {
659 output_type : 'stream',
659 output_type : 'stream',
660 name : 'stdout',
660 name : 'stdout',
661 text : theprompt.text() + value + '\n'
661 text : theprompt.text() + value + '\n'
662 }
662 }
663 // remove form container
663 // remove form container
664 container.parent().remove();
664 container.parent().remove();
665 // replace with plaintext version in stdout
665 // replace with plaintext version in stdout
666 this.append_output(content, false);
666 this.append_output(content, false);
667 $([IPython.events]).trigger('send_input_reply.Kernel', value);
667 $([IPython.events]).trigger('send_input_reply.Kernel', value);
668 }
668 }
669
669
670
670
671 OutputArea.prototype.handle_clear_output = function (msg) {
671 OutputArea.prototype.handle_clear_output = function (msg) {
672 this.clear_output(msg.content.wait);
672 this.clear_output(msg.content.wait);
673 };
673 };
674
674
675
675
676 OutputArea.prototype.clear_output = function(wait) {
676 OutputArea.prototype.clear_output = function(wait) {
677 if (wait) {
677 if (wait) {
678
678
679 // If a clear is queued, clear before adding another to the queue.
679 // If a clear is queued, clear before adding another to the queue.
680 if (this.clear_queued) {
680 if (this.clear_queued) {
681 this.clear_output(false);
681 this.clear_output(false);
682 };
682 };
683
683
684 this.clear_queued = true;
684 this.clear_queued = true;
685 } else {
685 } else {
686
686
687 // Fix the output div's height if the clear_output is waiting for
687 // Fix the output div's height if the clear_output is waiting for
688 // new output (it is being used in an animation).
688 // new output (it is being used in an animation).
689 if (this.clear_queued) {
689 if (this.clear_queued) {
690 var height = this.element.height();
690 var height = this.element.height();
691 this.element.height(height);
691 this.element.height(height);
692 this.clear_queued = false;
692 this.clear_queued = false;
693 }
693 }
694
694
695 // clear all, no need for logic
695 // clear all, no need for logic
696 this.element.html("");
696 this.element.html("");
697 this.outputs = [];
697 this.outputs = [];
698 this.unscroll_area();
698 this.unscroll_area();
699 return;
699 return;
700 };
700 };
701 };
701 };
702
702
703
703
704 // JSON serialization
704 // JSON serialization
705
705
706 OutputArea.prototype.fromJSON = function (outputs) {
706 OutputArea.prototype.fromJSON = function (outputs) {
707 var len = outputs.length;
707 var len = outputs.length;
708 for (var i=0; i<len; i++) {
708 for (var i=0; i<len; i++) {
709 // append with dynamic=false.
709 // append with dynamic=false.
710 this.append_output(outputs[i], false);
710 this.append_output(outputs[i], false);
711 }
711 }
712 };
712 };
713
713
714
714
715 OutputArea.prototype.toJSON = function () {
715 OutputArea.prototype.toJSON = function () {
716 var outputs = [];
716 var outputs = [];
717 var len = this.outputs.length;
717 var len = this.outputs.length;
718 for (var i=0; i<len; i++) {
718 for (var i=0; i<len; i++) {
719 outputs[i] = this.outputs[i];
719 outputs[i] = this.outputs[i];
720 }
720 }
721 return outputs;
721 return outputs;
722 };
722 };
723
723
724
724
725 IPython.OutputArea = OutputArea;
725 IPython.OutputArea = OutputArea;
726
726
727 return IPython;
727 return IPython;
728
728
729 }(IPython));
729 }(IPython));
General Comments 0
You need to be logged in to leave comments. Login now