##// END OF EJS Templates
set autoscroll default back to 100
Matthias Bussonnier -
Show More
@@ -1,691 +1,691 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_out_timeout = null;
34 this.clear_out_timeout = 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 vbox');
60 this.element.addClass('output vbox');
61
61
62 this.collapse_button.button();
62 this.collapse_button.button();
63 this.collapse_button.addClass('output_collapsed vbox');
63 this.collapse_button.addClass('output_collapsed vbox');
64 this.collapse_button.attr('title', 'click to expand output');
64 this.collapse_button.attr('title', 'click to expand output');
65 this.collapse_button.html('. . .');
65 this.collapse_button.html('. . .');
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 ( IPython.utils.browser[0] === "Firefox" ) {
103 if ( IPython.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 this.collapse_button.hover(function () {
115 this.collapse_button.hover(function () {
116 $(this).addClass("ui-state-hover");
116 $(this).addClass("ui-state-hover");
117 }, function () {
117 }, function () {
118 $(this).removeClass("ui-state-hover");
118 $(this).removeClass("ui-state-hover");
119 });
119 });
120 };
120 };
121
121
122
122
123 OutputArea.prototype.collapse = function () {
123 OutputArea.prototype.collapse = function () {
124 if (!this.collapsed) {
124 if (!this.collapsed) {
125 this.element.hide();
125 this.element.hide();
126 this.prompt_overlay.hide();
126 this.prompt_overlay.hide();
127 if (this.element.html()){
127 if (this.element.html()){
128 this.collapse_button.show();
128 this.collapse_button.show();
129 }
129 }
130 this.collapsed = true;
130 this.collapsed = true;
131 }
131 }
132 };
132 };
133
133
134
134
135 OutputArea.prototype.expand = function () {
135 OutputArea.prototype.expand = function () {
136 if (this.collapsed) {
136 if (this.collapsed) {
137 this.collapse_button.hide();
137 this.collapse_button.hide();
138 this.element.show();
138 this.element.show();
139 this.prompt_overlay.show();
139 this.prompt_overlay.show();
140 this.collapsed = false;
140 this.collapsed = false;
141 }
141 }
142 };
142 };
143
143
144
144
145 OutputArea.prototype.toggle_output = function () {
145 OutputArea.prototype.toggle_output = function () {
146 if (this.collapsed) {
146 if (this.collapsed) {
147 this.expand();
147 this.expand();
148 } else {
148 } else {
149 this.collapse();
149 this.collapse();
150 }
150 }
151 };
151 };
152
152
153
153
154 OutputArea.prototype.scroll_area = function () {
154 OutputArea.prototype.scroll_area = function () {
155 this.element.addClass('output_scroll');
155 this.element.addClass('output_scroll');
156 this.prompt_overlay.attr('title', 'click to unscroll output; double click to hide');
156 this.prompt_overlay.attr('title', 'click to unscroll output; double click to hide');
157 this.scrolled = true;
157 this.scrolled = true;
158 };
158 };
159
159
160
160
161 OutputArea.prototype.unscroll_area = function () {
161 OutputArea.prototype.unscroll_area = function () {
162 this.element.removeClass('output_scroll');
162 this.element.removeClass('output_scroll');
163 this.prompt_overlay.attr('title', 'click to scroll output; double click to hide');
163 this.prompt_overlay.attr('title', 'click to scroll output; double click to hide');
164 this.scrolled = false;
164 this.scrolled = false;
165 };
165 };
166
166
167 /**
167 /**
168 * Threshold to trigger autoscroll when the OutputArea is resized,
168 * Threshold to trigger autoscroll when the OutputArea is resized,
169 * typically when new outputs are added.
169 * typically when new outputs are added.
170 *
170 *
171 * Behavior is undefined if autoscroll is lower than minimum_scroll_threshold,
171 * Behavior is undefined if autoscroll is lower than minimum_scroll_threshold,
172 * unless it is < 0, in which case autoscroll will never be triggered
172 * unless it is < 0, in which case autoscroll will never be triggered
173 *
173 *
174 * @property auto_scroll_threshold
174 * @property auto_scroll_threshold
175 * @type Number
175 * @type Number
176 * @default 20
176 * @default 100
177 *
177 *
178 **/
178 **/
179 OutputArea.auto_scroll_threshold = 20;
179 OutputArea.auto_scroll_threshold = 100;
180
180
181
181
182 /**
182 /**
183 * Lower limit (in lines) for OutputArea to be made scrollable. OutputAreas
183 * Lower limit (in lines) for OutputArea to be made scrollable. OutputAreas
184 * shorter than this are never scrolled.
184 * shorter than this are never scrolled.
185 *
185 *
186 * @property minimum_scroll_threshold
186 * @property minimum_scroll_threshold
187 * @type Number
187 * @type Number
188 * @default 20
188 * @default 20
189 *
189 *
190 **/
190 **/
191 OutputArea.minimum_scroll_threshold = 20;
191 OutputArea.minimum_scroll_threshold = 20;
192
192
193
193
194 /**
194 /**
195 *
195 *
196 * Scroll OutputArea if height supperior than a threshold (in lines).
196 * Scroll OutputArea if height supperior than a threshold (in lines).
197 *
197 *
198 * Threshold is a maximum number of lines. If unspecified, defaults to
198 * Threshold is a maximum number of lines. If unspecified, defaults to
199 * OutputArea.minimum_scroll_threshold.
199 * OutputArea.minimum_scroll_threshold.
200 *
200 *
201 * Negative threshold will prevent the OutputArea from ever scrolling.
201 * Negative threshold will prevent the OutputArea from ever scrolling.
202 *
202 *
203 * @method scroll_if_long
203 * @method scroll_if_long
204 *
204 *
205 * @param [lines=20]{Number} Default to 20 if not set,
205 * @param [lines=20]{Number} Default to 20 if not set,
206 * behavior undefined for value of `0`.
206 * behavior undefined for value of `0`.
207 *
207 *
208 **/
208 **/
209 OutputArea.prototype.scroll_if_long = function (lines) {
209 OutputArea.prototype.scroll_if_long = function (lines) {
210 var n = lines | OutputArea.minimum_scroll_threshold;
210 var n = lines | OutputArea.minimum_scroll_threshold;
211 if(n <= 0){
211 if(n <= 0){
212 return
212 return
213 }
213 }
214
214
215 if (this._should_scroll(n)) {
215 if (this._should_scroll(n)) {
216 // only allow scrolling long-enough output
216 // only allow scrolling long-enough output
217 this.scroll_area();
217 this.scroll_area();
218 }
218 }
219 };
219 };
220
220
221
221
222 OutputArea.prototype.toggle_scroll = function () {
222 OutputArea.prototype.toggle_scroll = function () {
223 if (this.scrolled) {
223 if (this.scrolled) {
224 this.unscroll_area();
224 this.unscroll_area();
225 } else {
225 } else {
226 // only allow scrolling long-enough output
226 // only allow scrolling long-enough output
227 this.scroll_if_long();
227 this.scroll_if_long();
228 }
228 }
229 };
229 };
230
230
231
231
232 // typeset with MathJax if MathJax is available
232 // typeset with MathJax if MathJax is available
233 OutputArea.prototype.typeset = function () {
233 OutputArea.prototype.typeset = function () {
234 if (window.MathJax){
234 if (window.MathJax){
235 MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
235 MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
236 }
236 }
237 };
237 };
238
238
239
239
240 OutputArea.prototype.handle_output = function (msg_type, content) {
240 OutputArea.prototype.handle_output = function (msg_type, content) {
241 var json = {};
241 var json = {};
242 json.output_type = msg_type;
242 json.output_type = msg_type;
243 if (msg_type === "stream") {
243 if (msg_type === "stream") {
244 json.text = content.data;
244 json.text = content.data;
245 json.stream = content.name;
245 json.stream = content.name;
246 } else if (msg_type === "display_data") {
246 } else if (msg_type === "display_data") {
247 json = this.convert_mime_types(json, content.data);
247 json = this.convert_mime_types(json, content.data);
248 json.metadata = this.convert_mime_types({}, content.metadata);
248 json.metadata = this.convert_mime_types({}, content.metadata);
249 } else if (msg_type === "pyout") {
249 } else if (msg_type === "pyout") {
250 json.prompt_number = content.execution_count;
250 json.prompt_number = content.execution_count;
251 json = this.convert_mime_types(json, content.data);
251 json = this.convert_mime_types(json, content.data);
252 json.metadata = this.convert_mime_types({}, content.metadata);
252 json.metadata = this.convert_mime_types({}, content.metadata);
253 } else if (msg_type === "pyerr") {
253 } else if (msg_type === "pyerr") {
254 json.ename = content.ename;
254 json.ename = content.ename;
255 json.evalue = content.evalue;
255 json.evalue = content.evalue;
256 json.traceback = content.traceback;
256 json.traceback = content.traceback;
257 }
257 }
258 // append with dynamic=true
258 // append with dynamic=true
259 this.append_output(json, true);
259 this.append_output(json, true);
260 };
260 };
261
261
262
262
263 OutputArea.prototype.convert_mime_types = function (json, data) {
263 OutputArea.prototype.convert_mime_types = function (json, data) {
264 if (data['text/plain'] !== undefined) {
264 if (data['text/plain'] !== undefined) {
265 json.text = data['text/plain'];
265 json.text = data['text/plain'];
266 }
266 }
267 if (data['text/html'] !== undefined) {
267 if (data['text/html'] !== undefined) {
268 json.html = data['text/html'];
268 json.html = data['text/html'];
269 }
269 }
270 if (data['image/svg+xml'] !== undefined) {
270 if (data['image/svg+xml'] !== undefined) {
271 json.svg = data['image/svg+xml'];
271 json.svg = data['image/svg+xml'];
272 }
272 }
273 if (data['image/png'] !== undefined) {
273 if (data['image/png'] !== undefined) {
274 json.png = data['image/png'];
274 json.png = data['image/png'];
275 }
275 }
276 if (data['image/jpeg'] !== undefined) {
276 if (data['image/jpeg'] !== undefined) {
277 json.jpeg = data['image/jpeg'];
277 json.jpeg = data['image/jpeg'];
278 }
278 }
279 if (data['text/latex'] !== undefined) {
279 if (data['text/latex'] !== undefined) {
280 json.latex = data['text/latex'];
280 json.latex = data['text/latex'];
281 }
281 }
282 if (data['application/json'] !== undefined) {
282 if (data['application/json'] !== undefined) {
283 json.json = data['application/json'];
283 json.json = data['application/json'];
284 }
284 }
285 if (data['application/javascript'] !== undefined) {
285 if (data['application/javascript'] !== undefined) {
286 json.javascript = data['application/javascript'];
286 json.javascript = data['application/javascript'];
287 }
287 }
288 return json;
288 return json;
289 };
289 };
290
290
291
291
292 OutputArea.prototype.append_output = function (json, dynamic) {
292 OutputArea.prototype.append_output = function (json, dynamic) {
293 // If dynamic is true, javascript output will be eval'd.
293 // If dynamic is true, javascript output will be eval'd.
294 this.expand();
294 this.expand();
295 this.flush_clear_timeout();
295 this.flush_clear_timeout();
296 if (json.output_type === 'pyout') {
296 if (json.output_type === 'pyout') {
297 this.append_pyout(json, dynamic);
297 this.append_pyout(json, dynamic);
298 } else if (json.output_type === 'pyerr') {
298 } else if (json.output_type === 'pyerr') {
299 this.append_pyerr(json);
299 this.append_pyerr(json);
300 } else if (json.output_type === 'display_data') {
300 } else if (json.output_type === 'display_data') {
301 this.append_display_data(json, dynamic);
301 this.append_display_data(json, dynamic);
302 } else if (json.output_type === 'stream') {
302 } else if (json.output_type === 'stream') {
303 this.append_stream(json);
303 this.append_stream(json);
304 }
304 }
305 this.outputs.push(json);
305 this.outputs.push(json);
306 var that = this;
306 var that = this;
307 setTimeout(function(){that.element.trigger('resize');}, 100);
307 setTimeout(function(){that.element.trigger('resize');}, 100);
308 };
308 };
309
309
310
310
311 OutputArea.prototype.create_output_area = function () {
311 OutputArea.prototype.create_output_area = function () {
312 var oa = $("<div/>").addClass("output_area");
312 var oa = $("<div/>").addClass("output_area");
313 if (this.prompt_area) {
313 if (this.prompt_area) {
314 oa.append($('<div/>').addClass('prompt'));
314 oa.append($('<div/>').addClass('prompt'));
315 }
315 }
316 return oa;
316 return oa;
317 };
317 };
318
318
319
319
320 OutputArea.prototype.append_pyout = function (json, dynamic) {
320 OutputArea.prototype.append_pyout = function (json, dynamic) {
321 var n = json.prompt_number || ' ';
321 var n = json.prompt_number || ' ';
322 var toinsert = this.create_output_area();
322 var toinsert = this.create_output_area();
323 if (this.prompt_area) {
323 if (this.prompt_area) {
324 toinsert.find('div.prompt').addClass('output_prompt').html('Out[' + n + ']:');
324 toinsert.find('div.prompt').addClass('output_prompt').html('Out[' + n + ']:');
325 }
325 }
326 this.append_mime_type(json, toinsert, dynamic);
326 this.append_mime_type(json, toinsert, dynamic);
327 this.element.append(toinsert);
327 this.element.append(toinsert);
328 // If we just output latex, typeset it.
328 // If we just output latex, typeset it.
329 if ((json.latex !== undefined) || (json.html !== undefined)) {
329 if ((json.latex !== undefined) || (json.html !== undefined)) {
330 this.typeset();
330 this.typeset();
331 }
331 }
332 };
332 };
333
333
334
334
335 OutputArea.prototype.append_pyerr = function (json) {
335 OutputArea.prototype.append_pyerr = function (json) {
336 var tb = json.traceback;
336 var tb = json.traceback;
337 if (tb !== undefined && tb.length > 0) {
337 if (tb !== undefined && tb.length > 0) {
338 var s = '';
338 var s = '';
339 var len = tb.length;
339 var len = tb.length;
340 for (var i=0; i<len; i++) {
340 for (var i=0; i<len; i++) {
341 s = s + tb[i] + '\n';
341 s = s + tb[i] + '\n';
342 }
342 }
343 s = s + '\n';
343 s = s + '\n';
344 var toinsert = this.create_output_area();
344 var toinsert = this.create_output_area();
345 this.append_text(s, {}, toinsert);
345 this.append_text(s, {}, toinsert);
346 this.element.append(toinsert);
346 this.element.append(toinsert);
347 }
347 }
348 };
348 };
349
349
350
350
351 OutputArea.prototype.append_stream = function (json) {
351 OutputArea.prototype.append_stream = function (json) {
352 // temporary fix: if stream undefined (json file written prior to this patch),
352 // temporary fix: if stream undefined (json file written prior to this patch),
353 // default to most likely stdout:
353 // default to most likely stdout:
354 if (json.stream == undefined){
354 if (json.stream == undefined){
355 json.stream = 'stdout';
355 json.stream = 'stdout';
356 }
356 }
357 var text = json.text;
357 var text = json.text;
358 var subclass = "output_"+json.stream;
358 var subclass = "output_"+json.stream;
359 if (this.outputs.length > 0){
359 if (this.outputs.length > 0){
360 // have at least one output to consider
360 // have at least one output to consider
361 var last = this.outputs[this.outputs.length-1];
361 var last = this.outputs[this.outputs.length-1];
362 if (last.output_type == 'stream' && json.stream == last.stream){
362 if (last.output_type == 'stream' && json.stream == last.stream){
363 // latest output was in the same stream,
363 // latest output was in the same stream,
364 // so append directly into its pre tag
364 // so append directly into its pre tag
365 // escape ANSI & HTML specials:
365 // escape ANSI & HTML specials:
366 var pre = this.element.find('div.'+subclass).last().find('pre');
366 var pre = this.element.find('div.'+subclass).last().find('pre');
367 var html = utils.fixCarriageReturn(
367 var html = utils.fixCarriageReturn(
368 pre.html() + utils.fixConsole(text));
368 pre.html() + utils.fixConsole(text));
369 pre.html(html);
369 pre.html(html);
370 return;
370 return;
371 }
371 }
372 }
372 }
373
373
374 if (!text.replace("\r", "")) {
374 if (!text.replace("\r", "")) {
375 // text is nothing (empty string, \r, etc.)
375 // text is nothing (empty string, \r, etc.)
376 // so don't append any elements, which might add undesirable space
376 // so don't append any elements, which might add undesirable space
377 return;
377 return;
378 }
378 }
379
379
380 // If we got here, attach a new div
380 // If we got here, attach a new div
381 var toinsert = this.create_output_area();
381 var toinsert = this.create_output_area();
382 this.append_text(text, {}, toinsert, "output_stream "+subclass);
382 this.append_text(text, {}, toinsert, "output_stream "+subclass);
383 this.element.append(toinsert);
383 this.element.append(toinsert);
384 };
384 };
385
385
386
386
387 OutputArea.prototype.append_display_data = function (json, dynamic) {
387 OutputArea.prototype.append_display_data = function (json, dynamic) {
388 var toinsert = this.create_output_area();
388 var toinsert = this.create_output_area();
389 this.append_mime_type(json, toinsert, dynamic);
389 this.append_mime_type(json, toinsert, dynamic);
390 this.element.append(toinsert);
390 this.element.append(toinsert);
391 // If we just output latex, typeset it.
391 // If we just output latex, typeset it.
392 if ( (json.latex !== undefined) || (json.html !== undefined) ) {
392 if ( (json.latex !== undefined) || (json.html !== undefined) ) {
393 this.typeset();
393 this.typeset();
394 }
394 }
395 };
395 };
396
396
397 OutputArea.display_order = ['javascript','html','latex','svg','png','jpeg','text'];
397 OutputArea.display_order = ['javascript','html','latex','svg','png','jpeg','text'];
398
398
399 OutputArea.prototype.append_mime_type = function (json, element, dynamic) {
399 OutputArea.prototype.append_mime_type = function (json, element, dynamic) {
400 for(var type_i in OutputArea.display_order){
400 for(var type_i in OutputArea.display_order){
401 var type = OutputArea.display_order[type_i];
401 var type = OutputArea.display_order[type_i];
402 if(json[type] != undefined ){
402 if(json[type] != undefined ){
403 var md = {};
403 var md = {};
404 if (json.metadata && json.metadata[type]) {
404 if (json.metadata && json.metadata[type]) {
405 md = json.metadata[type];
405 md = json.metadata[type];
406 };
406 };
407 if(type == 'javascript'){
407 if(type == 'javascript'){
408 if (dynamic) {
408 if (dynamic) {
409 this.append_javascript(json.javascript, md, element, dynamic);
409 this.append_javascript(json.javascript, md, element, dynamic);
410 }
410 }
411 } else {
411 } else {
412 this['append_'+type](json[type], md, element);
412 this['append_'+type](json[type], md, element);
413 }
413 }
414 return;
414 return;
415 }
415 }
416 }
416 }
417 };
417 };
418
418
419
419
420 OutputArea.prototype.append_html = function (html, md, element) {
420 OutputArea.prototype.append_html = function (html, md, element) {
421 var toinsert = $("<div/>").addClass("output_subarea output_html rendered_html");
421 var toinsert = $("<div/>").addClass("output_subarea output_html rendered_html");
422 toinsert.append(html);
422 toinsert.append(html);
423 element.append(toinsert);
423 element.append(toinsert);
424 };
424 };
425
425
426
426
427 OutputArea.prototype.append_javascript = function (js, md, container) {
427 OutputArea.prototype.append_javascript = function (js, md, container) {
428 // We just eval the JS code, element appears in the local scope.
428 // We just eval the JS code, element appears in the local scope.
429 var element = $("<div/>").addClass("output_subarea");
429 var element = $("<div/>").addClass("output_subarea");
430 container.append(element);
430 container.append(element);
431 // Div for js shouldn't be drawn, as it will add empty height to the area.
431 // Div for js shouldn't be drawn, as it will add empty height to the area.
432 container.hide();
432 container.hide();
433 // If the Javascript appends content to `element` that should be drawn, then
433 // If the Javascript appends content to `element` that should be drawn, then
434 // it must also call `container.show()`.
434 // it must also call `container.show()`.
435 try {
435 try {
436 eval(js);
436 eval(js);
437 } catch(err) {
437 } catch(err) {
438 console.log('Error in Javascript!');
438 console.log('Error in Javascript!');
439 console.log(err);
439 console.log(err);
440 container.show();
440 container.show();
441 element.append($('<div/>')
441 element.append($('<div/>')
442 .html("Error in Javascript !<br/>"+
442 .html("Error in Javascript !<br/>"+
443 err.toString()+
443 err.toString()+
444 '<br/>See your browser Javascript console for more details.')
444 '<br/>See your browser Javascript console for more details.')
445 .addClass('js-error')
445 .addClass('js-error')
446 );
446 );
447 }
447 }
448 };
448 };
449
449
450
450
451 OutputArea.prototype.append_text = function (data, md, element, extra_class) {
451 OutputArea.prototype.append_text = function (data, md, element, extra_class) {
452 var toinsert = $("<div/>").addClass("output_subarea output_text");
452 var toinsert = $("<div/>").addClass("output_subarea output_text");
453 // escape ANSI & HTML specials in plaintext:
453 // escape ANSI & HTML specials in plaintext:
454 data = utils.fixConsole(data);
454 data = utils.fixConsole(data);
455 data = utils.fixCarriageReturn(data);
455 data = utils.fixCarriageReturn(data);
456 data = utils.autoLinkUrls(data);
456 data = utils.autoLinkUrls(data);
457 if (extra_class){
457 if (extra_class){
458 toinsert.addClass(extra_class);
458 toinsert.addClass(extra_class);
459 }
459 }
460 toinsert.append($("<pre/>").html(data));
460 toinsert.append($("<pre/>").html(data));
461 element.append(toinsert);
461 element.append(toinsert);
462 };
462 };
463
463
464
464
465 OutputArea.prototype.append_svg = function (svg, md, element) {
465 OutputArea.prototype.append_svg = function (svg, md, element) {
466 var toinsert = $("<div/>").addClass("output_subarea output_svg");
466 var toinsert = $("<div/>").addClass("output_subarea output_svg");
467 toinsert.append(svg);
467 toinsert.append(svg);
468 element.append(toinsert);
468 element.append(toinsert);
469 };
469 };
470
470
471
471
472 OutputArea.prototype._dblclick_to_reset_size = function (img) {
472 OutputArea.prototype._dblclick_to_reset_size = function (img) {
473 // schedule wrapping image in resizable after a delay,
473 // schedule wrapping image in resizable after a delay,
474 // so we don't end up calling resize on a zero-size object
474 // so we don't end up calling resize on a zero-size object
475 var that = this;
475 var that = this;
476 setTimeout(function () {
476 setTimeout(function () {
477 var h0 = img.height();
477 var h0 = img.height();
478 var w0 = img.width();
478 var w0 = img.width();
479 if (!(h0 && w0)) {
479 if (!(h0 && w0)) {
480 // zero size, schedule another timeout
480 // zero size, schedule another timeout
481 that._dblclick_to_reset_size(img);
481 that._dblclick_to_reset_size(img);
482 return;
482 return;
483 }
483 }
484 img.resizable({
484 img.resizable({
485 aspectRatio: true,
485 aspectRatio: true,
486 autoHide: true
486 autoHide: true
487 });
487 });
488 img.dblclick(function () {
488 img.dblclick(function () {
489 // resize wrapper & image together for some reason:
489 // resize wrapper & image together for some reason:
490 img.parent().height(h0);
490 img.parent().height(h0);
491 img.height(h0);
491 img.height(h0);
492 img.parent().width(w0);
492 img.parent().width(w0);
493 img.width(w0);
493 img.width(w0);
494 });
494 });
495 }, 250);
495 }, 250);
496 };
496 };
497
497
498
498
499 OutputArea.prototype.append_png = function (png, md, element) {
499 OutputArea.prototype.append_png = function (png, md, element) {
500 var toinsert = $("<div/>").addClass("output_subarea output_png");
500 var toinsert = $("<div/>").addClass("output_subarea output_png");
501 var img = $("<img/>").attr('src','data:image/png;base64,'+png);
501 var img = $("<img/>").attr('src','data:image/png;base64,'+png);
502 if (md['height']) {
502 if (md['height']) {
503 img.attr('height', md['height']);
503 img.attr('height', md['height']);
504 }
504 }
505 if (md['width']) {
505 if (md['width']) {
506 img.attr('width', md['width']);
506 img.attr('width', md['width']);
507 }
507 }
508 this._dblclick_to_reset_size(img);
508 this._dblclick_to_reset_size(img);
509 toinsert.append(img);
509 toinsert.append(img);
510 element.append(toinsert);
510 element.append(toinsert);
511 };
511 };
512
512
513
513
514 OutputArea.prototype.append_jpeg = function (jpeg, md, element) {
514 OutputArea.prototype.append_jpeg = function (jpeg, md, element) {
515 var toinsert = $("<div/>").addClass("output_subarea output_jpeg");
515 var toinsert = $("<div/>").addClass("output_subarea output_jpeg");
516 var img = $("<img/>").attr('src','data:image/jpeg;base64,'+jpeg);
516 var img = $("<img/>").attr('src','data:image/jpeg;base64,'+jpeg);
517 if (md['height']) {
517 if (md['height']) {
518 img.attr('height', md['height']);
518 img.attr('height', md['height']);
519 }
519 }
520 if (md['width']) {
520 if (md['width']) {
521 img.attr('width', md['width']);
521 img.attr('width', md['width']);
522 }
522 }
523 this._dblclick_to_reset_size(img);
523 this._dblclick_to_reset_size(img);
524 toinsert.append(img);
524 toinsert.append(img);
525 element.append(toinsert);
525 element.append(toinsert);
526 };
526 };
527
527
528
528
529 OutputArea.prototype.append_latex = function (latex, md, element) {
529 OutputArea.prototype.append_latex = function (latex, md, element) {
530 // This method cannot do the typesetting because the latex first has to
530 // This method cannot do the typesetting because the latex first has to
531 // be on the page.
531 // be on the page.
532 var toinsert = $("<div/>").addClass("output_subarea output_latex");
532 var toinsert = $("<div/>").addClass("output_subarea output_latex");
533 toinsert.append(latex);
533 toinsert.append(latex);
534 element.append(toinsert);
534 element.append(toinsert);
535 };
535 };
536
536
537 OutputArea.prototype.append_raw_input = function (content) {
537 OutputArea.prototype.append_raw_input = function (content) {
538 var that = this;
538 var that = this;
539 this.expand();
539 this.expand();
540 this.flush_clear_timeout();
540 this.flush_clear_timeout();
541 var area = this.create_output_area();
541 var area = this.create_output_area();
542
542
543 area.append(
543 area.append(
544 $("<div/>")
544 $("<div/>")
545 .addClass("box-flex1 output_subarea raw_input")
545 .addClass("box-flex1 output_subarea raw_input")
546 .append(
546 .append(
547 $("<span/>")
547 $("<span/>")
548 .addClass("input_prompt")
548 .addClass("input_prompt")
549 .text(content.prompt)
549 .text(content.prompt)
550 )
550 )
551 .append(
551 .append(
552 $("<input/>")
552 $("<input/>")
553 .addClass("raw_input")
553 .addClass("raw_input")
554 .attr('type', 'text')
554 .attr('type', 'text')
555 .attr("size", 80)
555 .attr("size", 80)
556 .keydown(function (event, ui) {
556 .keydown(function (event, ui) {
557 // make sure we submit on enter,
557 // make sure we submit on enter,
558 // and don't re-execute the *cell* on shift-enter
558 // and don't re-execute the *cell* on shift-enter
559 if (event.which === utils.keycodes.ENTER) {
559 if (event.which === utils.keycodes.ENTER) {
560 that._submit_raw_input();
560 that._submit_raw_input();
561 return false;
561 return false;
562 }
562 }
563 })
563 })
564 )
564 )
565 );
565 );
566 this.element.append(area);
566 this.element.append(area);
567 area.find("input.raw_input").focus();
567 area.find("input.raw_input").focus();
568 }
568 }
569 OutputArea.prototype._submit_raw_input = function (evt) {
569 OutputArea.prototype._submit_raw_input = function (evt) {
570 var container = this.element.find("div.raw_input");
570 var container = this.element.find("div.raw_input");
571 var theprompt = container.find("span.input_prompt");
571 var theprompt = container.find("span.input_prompt");
572 var theinput = container.find("input.raw_input");
572 var theinput = container.find("input.raw_input");
573 var value = theinput.attr("value");
573 var value = theinput.attr("value");
574 var content = {
574 var content = {
575 output_type : 'stream',
575 output_type : 'stream',
576 name : 'stdout',
576 name : 'stdout',
577 text : theprompt.text() + value + '\n'
577 text : theprompt.text() + value + '\n'
578 }
578 }
579 // remove form container
579 // remove form container
580 container.parent().remove();
580 container.parent().remove();
581 // replace with plaintext version in stdout
581 // replace with plaintext version in stdout
582 this.append_output(content, false);
582 this.append_output(content, false);
583 $([IPython.events]).trigger('send_input_reply.Kernel', value);
583 $([IPython.events]).trigger('send_input_reply.Kernel', value);
584 }
584 }
585
585
586
586
587 OutputArea.prototype.handle_clear_output = function (content) {
587 OutputArea.prototype.handle_clear_output = function (content) {
588 this.clear_output(content.stdout, content.stderr, content.other);
588 this.clear_output(content.stdout, content.stderr, content.other);
589 };
589 };
590
590
591
591
592 OutputArea.prototype.clear_output = function (stdout, stderr, other) {
592 OutputArea.prototype.clear_output = function (stdout, stderr, other) {
593 var that = this;
593 var that = this;
594 if (this.clear_out_timeout != null){
594 if (this.clear_out_timeout != null){
595 // fire previous pending clear *immediately*
595 // fire previous pending clear *immediately*
596 clearTimeout(this.clear_out_timeout);
596 clearTimeout(this.clear_out_timeout);
597 this.clear_out_timeout = null;
597 this.clear_out_timeout = null;
598 this.clear_output_callback(this._clear_stdout, this._clear_stderr, this._clear_other);
598 this.clear_output_callback(this._clear_stdout, this._clear_stderr, this._clear_other);
599 }
599 }
600 // store flags for flushing the timeout
600 // store flags for flushing the timeout
601 this._clear_stdout = stdout;
601 this._clear_stdout = stdout;
602 this._clear_stderr = stderr;
602 this._clear_stderr = stderr;
603 this._clear_other = other;
603 this._clear_other = other;
604 this.clear_out_timeout = setTimeout(function() {
604 this.clear_out_timeout = setTimeout(function() {
605 // really clear timeout only after a short delay
605 // really clear timeout only after a short delay
606 // this reduces flicker in 'clear_output; print' cases
606 // this reduces flicker in 'clear_output; print' cases
607 that.clear_out_timeout = null;
607 that.clear_out_timeout = null;
608 that._clear_stdout = that._clear_stderr = that._clear_other = null;
608 that._clear_stdout = that._clear_stderr = that._clear_other = null;
609 that.clear_output_callback(stdout, stderr, other);
609 that.clear_output_callback(stdout, stderr, other);
610 }, 500
610 }, 500
611 );
611 );
612 };
612 };
613
613
614
614
615 OutputArea.prototype.clear_output_callback = function (stdout, stderr, other) {
615 OutputArea.prototype.clear_output_callback = function (stdout, stderr, other) {
616 var output_div = this.element;
616 var output_div = this.element;
617
617
618 if (stdout && stderr && other){
618 if (stdout && stderr && other){
619 // clear all, no need for logic
619 // clear all, no need for logic
620 output_div.html("");
620 output_div.html("");
621 this.outputs = [];
621 this.outputs = [];
622 this.unscroll_area();
622 this.unscroll_area();
623 return;
623 return;
624 }
624 }
625 // remove html output
625 // remove html output
626 // each output_subarea that has an identifying class is in an output_area
626 // each output_subarea that has an identifying class is in an output_area
627 // which is the element to be removed.
627 // which is the element to be removed.
628 if (stdout) {
628 if (stdout) {
629 output_div.find("div.output_stdout").parent().remove();
629 output_div.find("div.output_stdout").parent().remove();
630 }
630 }
631 if (stderr) {
631 if (stderr) {
632 output_div.find("div.output_stderr").parent().remove();
632 output_div.find("div.output_stderr").parent().remove();
633 }
633 }
634 if (other) {
634 if (other) {
635 output_div.find("div.output_subarea").not("div.output_stderr").not("div.output_stdout").parent().remove();
635 output_div.find("div.output_subarea").not("div.output_stderr").not("div.output_stdout").parent().remove();
636 }
636 }
637 this.unscroll_area();
637 this.unscroll_area();
638
638
639 // remove cleared outputs from JSON list:
639 // remove cleared outputs from JSON list:
640 for (var i = this.outputs.length - 1; i >= 0; i--) {
640 for (var i = this.outputs.length - 1; i >= 0; i--) {
641 var out = this.outputs[i];
641 var out = this.outputs[i];
642 var output_type = out.output_type;
642 var output_type = out.output_type;
643 if (output_type == "display_data" && other) {
643 if (output_type == "display_data" && other) {
644 this.outputs.splice(i,1);
644 this.outputs.splice(i,1);
645 } else if (output_type == "stream") {
645 } else if (output_type == "stream") {
646 if (stdout && out.stream == "stdout") {
646 if (stdout && out.stream == "stdout") {
647 this.outputs.splice(i,1);
647 this.outputs.splice(i,1);
648 } else if (stderr && out.stream == "stderr") {
648 } else if (stderr && out.stream == "stderr") {
649 this.outputs.splice(i,1);
649 this.outputs.splice(i,1);
650 }
650 }
651 }
651 }
652 }
652 }
653 };
653 };
654
654
655
655
656 OutputArea.prototype.flush_clear_timeout = function() {
656 OutputArea.prototype.flush_clear_timeout = function() {
657 var output_div = this.element;
657 var output_div = this.element;
658 if (this.clear_out_timeout){
658 if (this.clear_out_timeout){
659 clearTimeout(this.clear_out_timeout);
659 clearTimeout(this.clear_out_timeout);
660 this.clear_out_timeout = null;
660 this.clear_out_timeout = null;
661 this.clear_output_callback(this._clear_stdout, this._clear_stderr, this._clear_other);
661 this.clear_output_callback(this._clear_stdout, this._clear_stderr, this._clear_other);
662 }
662 }
663 };
663 };
664
664
665
665
666 // JSON serialization
666 // JSON serialization
667
667
668 OutputArea.prototype.fromJSON = function (outputs) {
668 OutputArea.prototype.fromJSON = function (outputs) {
669 var len = outputs.length;
669 var len = outputs.length;
670 for (var i=0; i<len; i++) {
670 for (var i=0; i<len; i++) {
671 // append with dynamic=false.
671 // append with dynamic=false.
672 this.append_output(outputs[i], false);
672 this.append_output(outputs[i], false);
673 }
673 }
674 };
674 };
675
675
676
676
677 OutputArea.prototype.toJSON = function () {
677 OutputArea.prototype.toJSON = function () {
678 var outputs = [];
678 var outputs = [];
679 var len = this.outputs.length;
679 var len = this.outputs.length;
680 for (var i=0; i<len; i++) {
680 for (var i=0; i<len; i++) {
681 outputs[i] = this.outputs[i];
681 outputs[i] = this.outputs[i];
682 }
682 }
683 return outputs;
683 return outputs;
684 };
684 };
685
685
686
686
687 IPython.OutputArea = OutputArea;
687 IPython.OutputArea = OutputArea;
688
688
689 return IPython;
689 return IPython;
690
690
691 }(IPython));
691 }(IPython));
General Comments 0
You need to be logged in to leave comments. Login now