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