Show More
@@ -1,558 +1,558 | |||||
1 | //---------------------------------------------------------------------------- |
|
1 | //---------------------------------------------------------------------------- | |
2 | // Copyright (C) 2008-2011 The IPython Development Team |
|
2 | // Copyright (C) 2008-2011 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 | var IPython = (function (IPython) { |
|
12 | var IPython = (function (IPython) { | |
13 | "use strict"; |
|
13 | "use strict"; | |
14 |
|
14 | |||
15 | var utils = IPython.utils; |
|
15 | var utils = IPython.utils; | |
16 |
|
16 | |||
17 | var OutputArea = function (selector, prompt_area) { |
|
17 | var OutputArea = function (selector, prompt_area) { | |
18 | this.selector = selector; |
|
18 | this.selector = selector; | |
19 | this.wrapper = $(selector); |
|
19 | this.wrapper = $(selector); | |
20 | this.outputs = []; |
|
20 | this.outputs = []; | |
21 | this.collapsed = false; |
|
21 | this.collapsed = false; | |
22 | this.scrolled = false; |
|
22 | this.scrolled = false; | |
23 | this.clear_out_timeout = null; |
|
23 | this.clear_out_timeout = null; | |
24 | if (prompt_area === undefined) { |
|
24 | if (prompt_area === undefined) { | |
25 | this.prompt_area = true; |
|
25 | this.prompt_area = true; | |
26 | } else { |
|
26 | } else { | |
27 | this.prompt_area = prompt_area; |
|
27 | this.prompt_area = prompt_area; | |
28 | } |
|
28 | } | |
29 | this.create_elements(); |
|
29 | this.create_elements(); | |
30 | this.style(); |
|
30 | this.style(); | |
31 | this.bind_events(); |
|
31 | this.bind_events(); | |
32 | }; |
|
32 | }; | |
33 |
|
33 | |||
34 | OutputArea.prototype.create_elements = function () { |
|
34 | OutputArea.prototype.create_elements = function () { | |
35 | this.element = $("<div/>"); |
|
35 | this.element = $("<div/>"); | |
36 | this.collapse_button = $("<div/>"); |
|
36 | this.collapse_button = $("<div/>"); | |
37 | this.prompt_overlay = $("<div/>"); |
|
37 | this.prompt_overlay = $("<div/>"); | |
38 | this.wrapper.append(this.prompt_overlay); |
|
38 | this.wrapper.append(this.prompt_overlay); | |
39 | this.wrapper.append(this.element); |
|
39 | this.wrapper.append(this.element); | |
40 | this.wrapper.append(this.collapse_button); |
|
40 | this.wrapper.append(this.collapse_button); | |
41 | }; |
|
41 | }; | |
42 |
|
42 | |||
43 |
|
43 | |||
44 | OutputArea.prototype.style = function () { |
|
44 | OutputArea.prototype.style = function () { | |
45 | this.collapse_button.hide(); |
|
45 | this.collapse_button.hide(); | |
46 | this.prompt_overlay.hide(); |
|
46 | this.prompt_overlay.hide(); | |
47 |
|
47 | |||
48 | this.wrapper.addClass('output_wrapper'); |
|
48 | this.wrapper.addClass('output_wrapper'); | |
49 | this.element.addClass('output vbox'); |
|
49 | this.element.addClass('output vbox'); | |
50 |
|
50 | |||
51 | this.collapse_button.button(); |
|
51 | this.collapse_button.button(); | |
52 | this.collapse_button.addClass('output_collapsed vbox'); |
|
52 | this.collapse_button.addClass('output_collapsed vbox'); | |
53 |
this.collapse_button.attr('title', 'click to expand out |
|
53 | this.collapse_button.attr('title', 'click to expand output'); | |
54 | this.collapse_button.html('. . .'); |
|
54 | this.collapse_button.html('. . .'); | |
55 |
|
55 | |||
56 | this.prompt_overlay.addClass('out_prompt_overlay prompt'); |
|
56 | this.prompt_overlay.addClass('out_prompt_overlay prompt'); | |
57 |
this.prompt_overlay.attr('title', 'click to expand out |
|
57 | this.prompt_overlay.attr('title', 'click to expand output; double click to hide output'); | |
58 |
|
58 | |||
59 | this.collapse(); |
|
59 | this.collapse(); | |
60 | }; |
|
60 | }; | |
61 |
|
61 | |||
62 |
|
62 | |||
63 | OutputArea.prototype._should_scroll = function (lines) { |
|
63 | OutputArea.prototype._should_scroll = function (lines) { | |
64 | if (!lines) { |
|
64 | if (!lines) { | |
65 | lines = 100; |
|
65 | lines = 100; | |
66 | } |
|
66 | } | |
67 | // line-height from http://stackoverflow.com/questions/1185151 |
|
67 | // line-height from http://stackoverflow.com/questions/1185151 | |
68 | var fontSize = this.element.css('font-size'); |
|
68 | var fontSize = this.element.css('font-size'); | |
69 | var lineHeight = Math.floor(parseInt(fontSize.replace('px','')) * 1.5); |
|
69 | var lineHeight = Math.floor(parseInt(fontSize.replace('px','')) * 1.5); | |
70 |
|
70 | |||
71 | return (this.element.height() > lines * lineHeight); |
|
71 | return (this.element.height() > lines * lineHeight); | |
72 | }; |
|
72 | }; | |
73 |
|
73 | |||
74 |
|
74 | |||
75 | OutputArea.prototype.bind_events = function () { |
|
75 | OutputArea.prototype.bind_events = function () { | |
76 | var that = this; |
|
76 | var that = this; | |
77 | this.prompt_overlay.dblclick(function () { that.toggle_output(); }); |
|
77 | this.prompt_overlay.dblclick(function () { that.toggle_output(); }); | |
78 | this.prompt_overlay.click(function () { that.toggle_scroll(); }); |
|
78 | this.prompt_overlay.click(function () { that.toggle_scroll(); }); | |
79 |
|
79 | |||
80 | this.element.resize(function () { |
|
80 | this.element.resize(function () { | |
81 | // FIXME: Firefox on Linux misbehaves, so automatic scrolling is disabled |
|
81 | // FIXME: Firefox on Linux misbehaves, so automatic scrolling is disabled | |
82 | if ( IPython.utils.browser[0] === "Firefox" ) { |
|
82 | if ( IPython.utils.browser[0] === "Firefox" ) { | |
83 | return; |
|
83 | return; | |
84 | } |
|
84 | } | |
85 | // maybe scroll output, |
|
85 | // maybe scroll output, | |
86 | // if it's grown large enough and hasn't already been scrolled. |
|
86 | // if it's grown large enough and hasn't already been scrolled. | |
87 | if ( !that.scrolled && that._should_scroll()) { |
|
87 | if ( !that.scrolled && that._should_scroll()) { | |
88 | that.scroll_area(); |
|
88 | that.scroll_area(); | |
89 | } |
|
89 | } | |
90 | }); |
|
90 | }); | |
91 | this.collapse_button.click(function () { |
|
91 | this.collapse_button.click(function () { | |
92 | that.expand(); |
|
92 | that.expand(); | |
93 | }); |
|
93 | }); | |
94 | this.collapse_button.hover(function () { |
|
94 | this.collapse_button.hover(function () { | |
95 | $(this).addClass("ui-state-hover"); |
|
95 | $(this).addClass("ui-state-hover"); | |
96 | }, function () { |
|
96 | }, function () { | |
97 | $(this).removeClass("ui-state-hover"); |
|
97 | $(this).removeClass("ui-state-hover"); | |
98 | }); |
|
98 | }); | |
99 | }; |
|
99 | }; | |
100 |
|
100 | |||
101 |
|
101 | |||
102 | OutputArea.prototype.collapse = function () { |
|
102 | OutputArea.prototype.collapse = function () { | |
103 | if (!this.collapsed) { |
|
103 | if (!this.collapsed) { | |
104 | this.element.hide(); |
|
104 | this.element.hide(); | |
105 | this.prompt_overlay.hide(); |
|
105 | this.prompt_overlay.hide(); | |
106 | if (this.element.html()){ |
|
106 | if (this.element.html()){ | |
107 | this.collapse_button.show(); |
|
107 | this.collapse_button.show(); | |
108 | } |
|
108 | } | |
109 | this.collapsed = true; |
|
109 | this.collapsed = true; | |
110 | } |
|
110 | } | |
111 | }; |
|
111 | }; | |
112 |
|
112 | |||
113 |
|
113 | |||
114 | OutputArea.prototype.expand = function () { |
|
114 | OutputArea.prototype.expand = function () { | |
115 | if (this.collapsed) { |
|
115 | if (this.collapsed) { | |
116 | this.collapse_button.hide(); |
|
116 | this.collapse_button.hide(); | |
117 | this.element.show(); |
|
117 | this.element.show(); | |
118 | this.prompt_overlay.show(); |
|
118 | this.prompt_overlay.show(); | |
119 | this.collapsed = false; |
|
119 | this.collapsed = false; | |
120 | } |
|
120 | } | |
121 | }; |
|
121 | }; | |
122 |
|
122 | |||
123 |
|
123 | |||
124 | OutputArea.prototype.toggle_output = function () { |
|
124 | OutputArea.prototype.toggle_output = function () { | |
125 | if (this.collapsed) { |
|
125 | if (this.collapsed) { | |
126 | this.expand(); |
|
126 | this.expand(); | |
127 | } else { |
|
127 | } else { | |
128 | this.collapse(); |
|
128 | this.collapse(); | |
129 | } |
|
129 | } | |
130 | }; |
|
130 | }; | |
131 |
|
131 | |||
132 |
|
132 | |||
133 | OutputArea.prototype.scroll_area = function () { |
|
133 | OutputArea.prototype.scroll_area = function () { | |
134 | this.element.addClass('output_scroll'); |
|
134 | this.element.addClass('output_scroll'); | |
135 | this.prompt_overlay.attr('title', 'click to unscroll output; double click to hide'); |
|
135 | this.prompt_overlay.attr('title', 'click to unscroll output; double click to hide'); | |
136 | this.scrolled = true; |
|
136 | this.scrolled = true; | |
137 | }; |
|
137 | }; | |
138 |
|
138 | |||
139 |
|
139 | |||
140 | OutputArea.prototype.unscroll_area = function () { |
|
140 | OutputArea.prototype.unscroll_area = function () { | |
141 | this.element.removeClass('output_scroll'); |
|
141 | this.element.removeClass('output_scroll'); | |
142 | this.prompt_overlay.attr('title', 'click to scroll output; double click to hide'); |
|
142 | this.prompt_overlay.attr('title', 'click to scroll output; double click to hide'); | |
143 | this.scrolled = false; |
|
143 | this.scrolled = false; | |
144 | }; |
|
144 | }; | |
145 |
|
145 | |||
146 |
|
146 | |||
147 | OutputArea.prototype.scroll_if_long = function (lines) { |
|
147 | OutputArea.prototype.scroll_if_long = function (lines) { | |
148 | if (this._should_scroll(lines)) { |
|
148 | if (this._should_scroll(lines)) { | |
149 | // only allow scrolling long-enough output |
|
149 | // only allow scrolling long-enough output | |
150 | this.scroll_area(); |
|
150 | this.scroll_area(); | |
151 | } |
|
151 | } | |
152 | }; |
|
152 | }; | |
153 |
|
153 | |||
154 |
|
154 | |||
155 | OutputArea.prototype.toggle_scroll = function () { |
|
155 | OutputArea.prototype.toggle_scroll = function () { | |
156 | if (this.scrolled) { |
|
156 | if (this.scrolled) { | |
157 | this.unscroll_area(); |
|
157 | this.unscroll_area(); | |
158 | } else { |
|
158 | } else { | |
159 | // only allow scrolling long-enough output |
|
159 | // only allow scrolling long-enough output | |
160 | this.scroll_if_long(20); |
|
160 | this.scroll_if_long(20); | |
161 | } |
|
161 | } | |
162 | }; |
|
162 | }; | |
163 |
|
163 | |||
164 |
|
164 | |||
165 | // typeset with MathJax if MathJax is available |
|
165 | // typeset with MathJax if MathJax is available | |
166 | OutputArea.prototype.typeset = function () { |
|
166 | OutputArea.prototype.typeset = function () { | |
167 | if (window.MathJax){ |
|
167 | if (window.MathJax){ | |
168 | MathJax.Hub.Queue(["Typeset",MathJax.Hub]); |
|
168 | MathJax.Hub.Queue(["Typeset",MathJax.Hub]); | |
169 | } |
|
169 | } | |
170 | }; |
|
170 | }; | |
171 |
|
171 | |||
172 |
|
172 | |||
173 | OutputArea.prototype.handle_output = function (msg_type, content) { |
|
173 | OutputArea.prototype.handle_output = function (msg_type, content) { | |
174 | var json = {}; |
|
174 | var json = {}; | |
175 | json.output_type = msg_type; |
|
175 | json.output_type = msg_type; | |
176 | if (msg_type === "stream") { |
|
176 | if (msg_type === "stream") { | |
177 | json.text = content.data; |
|
177 | json.text = content.data; | |
178 | json.stream = content.name; |
|
178 | json.stream = content.name; | |
179 | } else if (msg_type === "display_data") { |
|
179 | } else if (msg_type === "display_data") { | |
180 | json = this.convert_mime_types(json, content.data); |
|
180 | json = this.convert_mime_types(json, content.data); | |
181 | } else if (msg_type === "pyout") { |
|
181 | } else if (msg_type === "pyout") { | |
182 | json.prompt_number = content.execution_count; |
|
182 | json.prompt_number = content.execution_count; | |
183 | json = this.convert_mime_types(json, content.data); |
|
183 | json = this.convert_mime_types(json, content.data); | |
184 | } else if (msg_type === "pyerr") { |
|
184 | } else if (msg_type === "pyerr") { | |
185 | json.ename = content.ename; |
|
185 | json.ename = content.ename; | |
186 | json.evalue = content.evalue; |
|
186 | json.evalue = content.evalue; | |
187 | json.traceback = content.traceback; |
|
187 | json.traceback = content.traceback; | |
188 | } |
|
188 | } | |
189 | // append with dynamic=true |
|
189 | // append with dynamic=true | |
190 | this.append_output(json, true); |
|
190 | this.append_output(json, true); | |
191 | }; |
|
191 | }; | |
192 |
|
192 | |||
193 |
|
193 | |||
194 | OutputArea.prototype.convert_mime_types = function (json, data) { |
|
194 | OutputArea.prototype.convert_mime_types = function (json, data) { | |
195 | if (data['text/plain'] !== undefined) { |
|
195 | if (data['text/plain'] !== undefined) { | |
196 | json.text = data['text/plain']; |
|
196 | json.text = data['text/plain']; | |
197 | } |
|
197 | } | |
198 | if (data['text/html'] !== undefined) { |
|
198 | if (data['text/html'] !== undefined) { | |
199 | json.html = data['text/html']; |
|
199 | json.html = data['text/html']; | |
200 | } |
|
200 | } | |
201 | if (data['image/svg+xml'] !== undefined) { |
|
201 | if (data['image/svg+xml'] !== undefined) { | |
202 | json.svg = data['image/svg+xml']; |
|
202 | json.svg = data['image/svg+xml']; | |
203 | } |
|
203 | } | |
204 | if (data['image/png'] !== undefined) { |
|
204 | if (data['image/png'] !== undefined) { | |
205 | json.png = data['image/png']; |
|
205 | json.png = data['image/png']; | |
206 | } |
|
206 | } | |
207 | if (data['image/jpeg'] !== undefined) { |
|
207 | if (data['image/jpeg'] !== undefined) { | |
208 | json.jpeg = data['image/jpeg']; |
|
208 | json.jpeg = data['image/jpeg']; | |
209 | } |
|
209 | } | |
210 | if (data['text/latex'] !== undefined) { |
|
210 | if (data['text/latex'] !== undefined) { | |
211 | json.latex = data['text/latex']; |
|
211 | json.latex = data['text/latex']; | |
212 | } |
|
212 | } | |
213 | if (data['application/json'] !== undefined) { |
|
213 | if (data['application/json'] !== undefined) { | |
214 | json.json = data['application/json']; |
|
214 | json.json = data['application/json']; | |
215 | } |
|
215 | } | |
216 | if (data['application/javascript'] !== undefined) { |
|
216 | if (data['application/javascript'] !== undefined) { | |
217 | json.javascript = data['application/javascript']; |
|
217 | json.javascript = data['application/javascript']; | |
218 | } |
|
218 | } | |
219 | return json; |
|
219 | return json; | |
220 | }; |
|
220 | }; | |
221 |
|
221 | |||
222 |
|
222 | |||
223 | OutputArea.prototype.append_output = function (json, dynamic) { |
|
223 | OutputArea.prototype.append_output = function (json, dynamic) { | |
224 | // If dynamic is true, javascript output will be eval'd. |
|
224 | // If dynamic is true, javascript output will be eval'd. | |
225 | this.expand(); |
|
225 | this.expand(); | |
226 | this.flush_clear_timeout(); |
|
226 | this.flush_clear_timeout(); | |
227 | if (json.output_type === 'pyout') { |
|
227 | if (json.output_type === 'pyout') { | |
228 | this.append_pyout(json, dynamic); |
|
228 | this.append_pyout(json, dynamic); | |
229 | } else if (json.output_type === 'pyerr') { |
|
229 | } else if (json.output_type === 'pyerr') { | |
230 | this.append_pyerr(json); |
|
230 | this.append_pyerr(json); | |
231 | } else if (json.output_type === 'display_data') { |
|
231 | } else if (json.output_type === 'display_data') { | |
232 | this.append_display_data(json, dynamic); |
|
232 | this.append_display_data(json, dynamic); | |
233 | } else if (json.output_type === 'stream') { |
|
233 | } else if (json.output_type === 'stream') { | |
234 | this.append_stream(json); |
|
234 | this.append_stream(json); | |
235 | } |
|
235 | } | |
236 | this.outputs.push(json); |
|
236 | this.outputs.push(json); | |
237 | var that = this; |
|
237 | var that = this; | |
238 | setTimeout(function(){that.element.trigger('resize');}, 100); |
|
238 | setTimeout(function(){that.element.trigger('resize');}, 100); | |
239 | }; |
|
239 | }; | |
240 |
|
240 | |||
241 |
|
241 | |||
242 | OutputArea.prototype.create_output_area = function () { |
|
242 | OutputArea.prototype.create_output_area = function () { | |
243 | var oa = $("<div/>").addClass("hbox output_area"); |
|
243 | var oa = $("<div/>").addClass("hbox output_area"); | |
244 | if (this.prompt_area) { |
|
244 | if (this.prompt_area) { | |
245 | oa.append($('<div/>').addClass('prompt')); |
|
245 | oa.append($('<div/>').addClass('prompt')); | |
246 | } |
|
246 | } | |
247 | return oa; |
|
247 | return oa; | |
248 | }; |
|
248 | }; | |
249 |
|
249 | |||
250 |
|
250 | |||
251 | OutputArea.prototype.append_pyout = function (json, dynamic) { |
|
251 | OutputArea.prototype.append_pyout = function (json, dynamic) { | |
252 | var n = json.prompt_number || ' '; |
|
252 | var n = json.prompt_number || ' '; | |
253 | var toinsert = this.create_output_area(); |
|
253 | var toinsert = this.create_output_area(); | |
254 | if (this.prompt_area) { |
|
254 | if (this.prompt_area) { | |
255 | toinsert.find('div.prompt').addClass('output_prompt').html('Out[' + n + ']:'); |
|
255 | toinsert.find('div.prompt').addClass('output_prompt').html('Out[' + n + ']:'); | |
256 | } |
|
256 | } | |
257 | this.append_mime_type(json, toinsert, dynamic); |
|
257 | this.append_mime_type(json, toinsert, dynamic); | |
258 | this.element.append(toinsert); |
|
258 | this.element.append(toinsert); | |
259 | // If we just output latex, typeset it. |
|
259 | // If we just output latex, typeset it. | |
260 | if ((json.latex !== undefined) || (json.html !== undefined)) { |
|
260 | if ((json.latex !== undefined) || (json.html !== undefined)) { | |
261 | this.typeset(); |
|
261 | this.typeset(); | |
262 | } |
|
262 | } | |
263 | }; |
|
263 | }; | |
264 |
|
264 | |||
265 |
|
265 | |||
266 | OutputArea.prototype.append_pyerr = function (json) { |
|
266 | OutputArea.prototype.append_pyerr = function (json) { | |
267 | var tb = json.traceback; |
|
267 | var tb = json.traceback; | |
268 | if (tb !== undefined && tb.length > 0) { |
|
268 | if (tb !== undefined && tb.length > 0) { | |
269 | var s = ''; |
|
269 | var s = ''; | |
270 | var len = tb.length; |
|
270 | var len = tb.length; | |
271 | for (var i=0; i<len; i++) { |
|
271 | for (var i=0; i<len; i++) { | |
272 | s = s + tb[i] + '\n'; |
|
272 | s = s + tb[i] + '\n'; | |
273 | } |
|
273 | } | |
274 | s = s + '\n'; |
|
274 | s = s + '\n'; | |
275 | var toinsert = this.create_output_area(); |
|
275 | var toinsert = this.create_output_area(); | |
276 | this.append_text(s, toinsert); |
|
276 | this.append_text(s, toinsert); | |
277 | this.element.append(toinsert); |
|
277 | this.element.append(toinsert); | |
278 | } |
|
278 | } | |
279 | }; |
|
279 | }; | |
280 |
|
280 | |||
281 |
|
281 | |||
282 | OutputArea.prototype.append_stream = function (json) { |
|
282 | OutputArea.prototype.append_stream = function (json) { | |
283 | // temporary fix: if stream undefined (json file written prior to this patch), |
|
283 | // temporary fix: if stream undefined (json file written prior to this patch), | |
284 | // default to most likely stdout: |
|
284 | // default to most likely stdout: | |
285 | if (json.stream == undefined){ |
|
285 | if (json.stream == undefined){ | |
286 | json.stream = 'stdout'; |
|
286 | json.stream = 'stdout'; | |
287 | } |
|
287 | } | |
288 | var text = json.text; |
|
288 | var text = json.text; | |
289 | var subclass = "output_"+json.stream; |
|
289 | var subclass = "output_"+json.stream; | |
290 | if (this.outputs.length > 0){ |
|
290 | if (this.outputs.length > 0){ | |
291 | // have at least one output to consider |
|
291 | // have at least one output to consider | |
292 | var last = this.outputs[this.outputs.length-1]; |
|
292 | var last = this.outputs[this.outputs.length-1]; | |
293 | if (last.output_type == 'stream' && json.stream == last.stream){ |
|
293 | if (last.output_type == 'stream' && json.stream == last.stream){ | |
294 | // latest output was in the same stream, |
|
294 | // latest output was in the same stream, | |
295 | // so append directly into its pre tag |
|
295 | // so append directly into its pre tag | |
296 | // escape ANSI & HTML specials: |
|
296 | // escape ANSI & HTML specials: | |
297 | var pre = this.element.find('div.'+subclass).last().find('pre'); |
|
297 | var pre = this.element.find('div.'+subclass).last().find('pre'); | |
298 | var html = utils.fixCarriageReturn( |
|
298 | var html = utils.fixCarriageReturn( | |
299 | pre.html() + utils.fixConsole(text)); |
|
299 | pre.html() + utils.fixConsole(text)); | |
300 | pre.html(html); |
|
300 | pre.html(html); | |
301 | return; |
|
301 | return; | |
302 | } |
|
302 | } | |
303 | } |
|
303 | } | |
304 |
|
304 | |||
305 | if (!text.replace("\r", "")) { |
|
305 | if (!text.replace("\r", "")) { | |
306 | // text is nothing (empty string, \r, etc.) |
|
306 | // text is nothing (empty string, \r, etc.) | |
307 | // so don't append any elements, which might add undesirable space |
|
307 | // so don't append any elements, which might add undesirable space | |
308 | return; |
|
308 | return; | |
309 | } |
|
309 | } | |
310 |
|
310 | |||
311 | // If we got here, attach a new div |
|
311 | // If we got here, attach a new div | |
312 | var toinsert = this.create_output_area(); |
|
312 | var toinsert = this.create_output_area(); | |
313 | this.append_text(text, toinsert, "output_stream "+subclass); |
|
313 | this.append_text(text, toinsert, "output_stream "+subclass); | |
314 | this.element.append(toinsert); |
|
314 | this.element.append(toinsert); | |
315 | }; |
|
315 | }; | |
316 |
|
316 | |||
317 |
|
317 | |||
318 | OutputArea.prototype.append_display_data = function (json, dynamic) { |
|
318 | OutputArea.prototype.append_display_data = function (json, dynamic) { | |
319 | var toinsert = this.create_output_area(); |
|
319 | var toinsert = this.create_output_area(); | |
320 | this.append_mime_type(json, toinsert, dynamic); |
|
320 | this.append_mime_type(json, toinsert, dynamic); | |
321 | this.element.append(toinsert); |
|
321 | this.element.append(toinsert); | |
322 | // If we just output latex, typeset it. |
|
322 | // If we just output latex, typeset it. | |
323 | if ( (json.latex !== undefined) || (json.html !== undefined) ) { |
|
323 | if ( (json.latex !== undefined) || (json.html !== undefined) ) { | |
324 | this.typeset(); |
|
324 | this.typeset(); | |
325 | } |
|
325 | } | |
326 | }; |
|
326 | }; | |
327 |
|
327 | |||
328 | OutputArea.display_order = ['javascript','html','latex','svg','png','jpeg','text']; |
|
328 | OutputArea.display_order = ['javascript','html','latex','svg','png','jpeg','text']; | |
329 |
|
329 | |||
330 | OutputArea.prototype.append_mime_type = function (json, element, dynamic) { |
|
330 | OutputArea.prototype.append_mime_type = function (json, element, dynamic) { | |
331 | for(var type_i in OutputArea.display_order){ |
|
331 | for(var type_i in OutputArea.display_order){ | |
332 | var type = OutputArea.display_order[type_i]; |
|
332 | var type = OutputArea.display_order[type_i]; | |
333 | if(json[type] != undefined ){ |
|
333 | if(json[type] != undefined ){ | |
334 | if(type == 'javascript'){ |
|
334 | if(type == 'javascript'){ | |
335 | if (dynamic) { |
|
335 | if (dynamic) { | |
336 | this.append_javascript(json.javascript, element, dynamic); |
|
336 | this.append_javascript(json.javascript, element, dynamic); | |
337 | } |
|
337 | } | |
338 | } else { |
|
338 | } else { | |
339 | this['append_'+type](json[type], element); |
|
339 | this['append_'+type](json[type], element); | |
340 | } |
|
340 | } | |
341 | return; |
|
341 | return; | |
342 | } |
|
342 | } | |
343 | } |
|
343 | } | |
344 | }; |
|
344 | }; | |
345 |
|
345 | |||
346 |
|
346 | |||
347 | OutputArea.prototype.append_html = function (html, element) { |
|
347 | OutputArea.prototype.append_html = function (html, element) { | |
348 | var toinsert = $("<div/>").addClass("box-flex1 output_subarea output_html rendered_html"); |
|
348 | var toinsert = $("<div/>").addClass("box-flex1 output_subarea output_html rendered_html"); | |
349 | toinsert.append(html); |
|
349 | toinsert.append(html); | |
350 | element.append(toinsert); |
|
350 | element.append(toinsert); | |
351 | }; |
|
351 | }; | |
352 |
|
352 | |||
353 |
|
353 | |||
354 | OutputArea.prototype.append_javascript = function (js, container) { |
|
354 | OutputArea.prototype.append_javascript = function (js, container) { | |
355 | // We just eval the JS code, element appears in the local scope. |
|
355 | // We just eval the JS code, element appears in the local scope. | |
356 | var element = $("<div/>").addClass("box-flex1 output_subarea"); |
|
356 | var element = $("<div/>").addClass("box-flex1 output_subarea"); | |
357 | container.append(element); |
|
357 | container.append(element); | |
358 | // Div for js shouldn't be drawn, as it will add empty height to the area. |
|
358 | // Div for js shouldn't be drawn, as it will add empty height to the area. | |
359 | container.hide(); |
|
359 | container.hide(); | |
360 | // If the Javascript appends content to `element` that should be drawn, then |
|
360 | // If the Javascript appends content to `element` that should be drawn, then | |
361 | // it must also call `container.show()`. |
|
361 | // it must also call `container.show()`. | |
362 | try { |
|
362 | try { | |
363 | eval(js); |
|
363 | eval(js); | |
364 | } catch(err) { |
|
364 | } catch(err) { | |
365 | console.log('Error in Javascript!'); |
|
365 | console.log('Error in Javascript!'); | |
366 | console.log(err); |
|
366 | console.log(err); | |
367 | container.show(); |
|
367 | container.show(); | |
368 | element.append($('<div/>') |
|
368 | element.append($('<div/>') | |
369 | .html("Error in Javascript !<br/>"+ |
|
369 | .html("Error in Javascript !<br/>"+ | |
370 | err.toString()+ |
|
370 | err.toString()+ | |
371 | '<br/>See your browser Javascript console for more details.') |
|
371 | '<br/>See your browser Javascript console for more details.') | |
372 | .addClass('js-error') |
|
372 | .addClass('js-error') | |
373 | ); |
|
373 | ); | |
374 | } |
|
374 | } | |
375 | }; |
|
375 | }; | |
376 |
|
376 | |||
377 |
|
377 | |||
378 | OutputArea.prototype.append_text = function (data, element, extra_class) { |
|
378 | OutputArea.prototype.append_text = function (data, element, extra_class) { | |
379 | var toinsert = $("<div/>").addClass("box-flex1 output_subarea output_text"); |
|
379 | var toinsert = $("<div/>").addClass("box-flex1 output_subarea output_text"); | |
380 | // escape ANSI & HTML specials in plaintext: |
|
380 | // escape ANSI & HTML specials in plaintext: | |
381 | data = utils.wrapUrls(data); |
|
381 | data = utils.wrapUrls(data); | |
382 | data = utils.fixConsole(data); |
|
382 | data = utils.fixConsole(data); | |
383 | data = utils.fixCarriageReturn(data); |
|
383 | data = utils.fixCarriageReturn(data); | |
384 | data = utils.autoLinkUrls(data); |
|
384 | data = utils.autoLinkUrls(data); | |
385 | if (extra_class){ |
|
385 | if (extra_class){ | |
386 | toinsert.addClass(extra_class); |
|
386 | toinsert.addClass(extra_class); | |
387 | } |
|
387 | } | |
388 | toinsert.append($("<pre/>").html(data)); |
|
388 | toinsert.append($("<pre/>").html(data)); | |
389 | element.append(toinsert); |
|
389 | element.append(toinsert); | |
390 | }; |
|
390 | }; | |
391 |
|
391 | |||
392 |
|
392 | |||
393 | OutputArea.prototype.append_svg = function (svg, element) { |
|
393 | OutputArea.prototype.append_svg = function (svg, element) { | |
394 | var toinsert = $("<div/>").addClass("box-flex1 output_subarea output_svg"); |
|
394 | var toinsert = $("<div/>").addClass("box-flex1 output_subarea output_svg"); | |
395 | toinsert.append(svg); |
|
395 | toinsert.append(svg); | |
396 | element.append(toinsert); |
|
396 | element.append(toinsert); | |
397 | }; |
|
397 | }; | |
398 |
|
398 | |||
399 |
|
399 | |||
400 | OutputArea.prototype._dblclick_to_reset_size = function (img) { |
|
400 | OutputArea.prototype._dblclick_to_reset_size = function (img) { | |
401 | // schedule wrapping image in resizable after a delay, |
|
401 | // schedule wrapping image in resizable after a delay, | |
402 | // so we don't end up calling resize on a zero-size object |
|
402 | // so we don't end up calling resize on a zero-size object | |
403 | var that = this; |
|
403 | var that = this; | |
404 | setTimeout(function () { |
|
404 | setTimeout(function () { | |
405 | var h0 = img.height(); |
|
405 | var h0 = img.height(); | |
406 | var w0 = img.width(); |
|
406 | var w0 = img.width(); | |
407 | if (!(h0 && w0)) { |
|
407 | if (!(h0 && w0)) { | |
408 | // zero size, schedule another timeout |
|
408 | // zero size, schedule another timeout | |
409 | that._dblclick_to_reset_size(img); |
|
409 | that._dblclick_to_reset_size(img); | |
410 | return; |
|
410 | return; | |
411 | } |
|
411 | } | |
412 | img.resizable({ |
|
412 | img.resizable({ | |
413 | aspectRatio: true, |
|
413 | aspectRatio: true, | |
414 | autoHide: true |
|
414 | autoHide: true | |
415 | }); |
|
415 | }); | |
416 | img.dblclick(function () { |
|
416 | img.dblclick(function () { | |
417 | // resize wrapper & image together for some reason: |
|
417 | // resize wrapper & image together for some reason: | |
418 | img.parent().height(h0); |
|
418 | img.parent().height(h0); | |
419 | img.height(h0); |
|
419 | img.height(h0); | |
420 | img.parent().width(w0); |
|
420 | img.parent().width(w0); | |
421 | img.width(w0); |
|
421 | img.width(w0); | |
422 | }); |
|
422 | }); | |
423 | }, 250); |
|
423 | }, 250); | |
424 | }; |
|
424 | }; | |
425 |
|
425 | |||
426 |
|
426 | |||
427 | OutputArea.prototype.append_png = function (png, element) { |
|
427 | OutputArea.prototype.append_png = function (png, element) { | |
428 | var toinsert = $("<div/>").addClass("box-flex1 output_subarea output_png"); |
|
428 | var toinsert = $("<div/>").addClass("box-flex1 output_subarea output_png"); | |
429 | var img = $("<img/>").attr('src','data:image/png;base64,'+png); |
|
429 | var img = $("<img/>").attr('src','data:image/png;base64,'+png); | |
430 | this._dblclick_to_reset_size(img); |
|
430 | this._dblclick_to_reset_size(img); | |
431 | toinsert.append(img); |
|
431 | toinsert.append(img); | |
432 | element.append(toinsert); |
|
432 | element.append(toinsert); | |
433 | }; |
|
433 | }; | |
434 |
|
434 | |||
435 |
|
435 | |||
436 | OutputArea.prototype.append_jpeg = function (jpeg, element) { |
|
436 | OutputArea.prototype.append_jpeg = function (jpeg, element) { | |
437 | var toinsert = $("<div/>").addClass("box-flex1 output_subarea output_jpeg"); |
|
437 | var toinsert = $("<div/>").addClass("box-flex1 output_subarea output_jpeg"); | |
438 | var img = $("<img/>").attr('src','data:image/jpeg;base64,'+jpeg); |
|
438 | var img = $("<img/>").attr('src','data:image/jpeg;base64,'+jpeg); | |
439 | this._dblclick_to_reset_size(img); |
|
439 | this._dblclick_to_reset_size(img); | |
440 | toinsert.append(img); |
|
440 | toinsert.append(img); | |
441 | element.append(toinsert); |
|
441 | element.append(toinsert); | |
442 | }; |
|
442 | }; | |
443 |
|
443 | |||
444 |
|
444 | |||
445 | OutputArea.prototype.append_latex = function (latex, element) { |
|
445 | OutputArea.prototype.append_latex = function (latex, element) { | |
446 | // This method cannot do the typesetting because the latex first has to |
|
446 | // This method cannot do the typesetting because the latex first has to | |
447 | // be on the page. |
|
447 | // be on the page. | |
448 | var toinsert = $("<div/>").addClass("box-flex1 output_subarea output_latex"); |
|
448 | var toinsert = $("<div/>").addClass("box-flex1 output_subarea output_latex"); | |
449 | toinsert.append(latex); |
|
449 | toinsert.append(latex); | |
450 | element.append(toinsert); |
|
450 | element.append(toinsert); | |
451 | }; |
|
451 | }; | |
452 |
|
452 | |||
453 |
|
453 | |||
454 | OutputArea.prototype.handle_clear_output = function (content) { |
|
454 | OutputArea.prototype.handle_clear_output = function (content) { | |
455 | this.clear_output(content.stdout, content.stderr, content.other); |
|
455 | this.clear_output(content.stdout, content.stderr, content.other); | |
456 | }; |
|
456 | }; | |
457 |
|
457 | |||
458 |
|
458 | |||
459 | OutputArea.prototype.clear_output = function (stdout, stderr, other) { |
|
459 | OutputArea.prototype.clear_output = function (stdout, stderr, other) { | |
460 | var that = this; |
|
460 | var that = this; | |
461 | if (this.clear_out_timeout != null){ |
|
461 | if (this.clear_out_timeout != null){ | |
462 | // fire previous pending clear *immediately* |
|
462 | // fire previous pending clear *immediately* | |
463 | clearTimeout(this.clear_out_timeout); |
|
463 | clearTimeout(this.clear_out_timeout); | |
464 | this.clear_out_timeout = null; |
|
464 | this.clear_out_timeout = null; | |
465 | this.clear_output_callback(this._clear_stdout, this._clear_stderr, this._clear_other); |
|
465 | this.clear_output_callback(this._clear_stdout, this._clear_stderr, this._clear_other); | |
466 | } |
|
466 | } | |
467 | // store flags for flushing the timeout |
|
467 | // store flags for flushing the timeout | |
468 | this._clear_stdout = stdout; |
|
468 | this._clear_stdout = stdout; | |
469 | this._clear_stderr = stderr; |
|
469 | this._clear_stderr = stderr; | |
470 | this._clear_other = other; |
|
470 | this._clear_other = other; | |
471 | this.clear_out_timeout = setTimeout(function() { |
|
471 | this.clear_out_timeout = setTimeout(function() { | |
472 | // really clear timeout only after a short delay |
|
472 | // really clear timeout only after a short delay | |
473 | // this reduces flicker in 'clear_output; print' cases |
|
473 | // this reduces flicker in 'clear_output; print' cases | |
474 | that.clear_out_timeout = null; |
|
474 | that.clear_out_timeout = null; | |
475 | that._clear_stdout = that._clear_stderr = that._clear_other = null; |
|
475 | that._clear_stdout = that._clear_stderr = that._clear_other = null; | |
476 | that.clear_output_callback(stdout, stderr, other); |
|
476 | that.clear_output_callback(stdout, stderr, other); | |
477 | }, 500 |
|
477 | }, 500 | |
478 | ); |
|
478 | ); | |
479 | }; |
|
479 | }; | |
480 |
|
480 | |||
481 |
|
481 | |||
482 | OutputArea.prototype.clear_output_callback = function (stdout, stderr, other) { |
|
482 | OutputArea.prototype.clear_output_callback = function (stdout, stderr, other) { | |
483 | var output_div = this.element; |
|
483 | var output_div = this.element; | |
484 |
|
484 | |||
485 | if (stdout && stderr && other){ |
|
485 | if (stdout && stderr && other){ | |
486 | // clear all, no need for logic |
|
486 | // clear all, no need for logic | |
487 | output_div.html(""); |
|
487 | output_div.html(""); | |
488 | this.outputs = []; |
|
488 | this.outputs = []; | |
489 | this.unscroll_area(); |
|
489 | this.unscroll_area(); | |
490 | return; |
|
490 | return; | |
491 | } |
|
491 | } | |
492 | // remove html output |
|
492 | // remove html output | |
493 | // each output_subarea that has an identifying class is in an output_area |
|
493 | // each output_subarea that has an identifying class is in an output_area | |
494 | // which is the element to be removed. |
|
494 | // which is the element to be removed. | |
495 | if (stdout) { |
|
495 | if (stdout) { | |
496 | output_div.find("div.output_stdout").parent().remove(); |
|
496 | output_div.find("div.output_stdout").parent().remove(); | |
497 | } |
|
497 | } | |
498 | if (stderr) { |
|
498 | if (stderr) { | |
499 | output_div.find("div.output_stderr").parent().remove(); |
|
499 | output_div.find("div.output_stderr").parent().remove(); | |
500 | } |
|
500 | } | |
501 | if (other) { |
|
501 | if (other) { | |
502 | output_div.find("div.output_subarea").not("div.output_stderr").not("div.output_stdout").parent().remove(); |
|
502 | output_div.find("div.output_subarea").not("div.output_stderr").not("div.output_stdout").parent().remove(); | |
503 | } |
|
503 | } | |
504 | this.unscroll_area(); |
|
504 | this.unscroll_area(); | |
505 |
|
505 | |||
506 | // remove cleared outputs from JSON list: |
|
506 | // remove cleared outputs from JSON list: | |
507 | for (var i = this.outputs.length - 1; i >= 0; i--) { |
|
507 | for (var i = this.outputs.length - 1; i >= 0; i--) { | |
508 | var out = this.outputs[i]; |
|
508 | var out = this.outputs[i]; | |
509 | var output_type = out.output_type; |
|
509 | var output_type = out.output_type; | |
510 | if (output_type == "display_data" && other) { |
|
510 | if (output_type == "display_data" && other) { | |
511 | this.outputs.splice(i,1); |
|
511 | this.outputs.splice(i,1); | |
512 | } else if (output_type == "stream") { |
|
512 | } else if (output_type == "stream") { | |
513 | if (stdout && out.stream == "stdout") { |
|
513 | if (stdout && out.stream == "stdout") { | |
514 | this.outputs.splice(i,1); |
|
514 | this.outputs.splice(i,1); | |
515 | } else if (stderr && out.stream == "stderr") { |
|
515 | } else if (stderr && out.stream == "stderr") { | |
516 | this.outputs.splice(i,1); |
|
516 | this.outputs.splice(i,1); | |
517 | } |
|
517 | } | |
518 | } |
|
518 | } | |
519 | } |
|
519 | } | |
520 | }; |
|
520 | }; | |
521 |
|
521 | |||
522 |
|
522 | |||
523 | OutputArea.prototype.flush_clear_timeout = function() { |
|
523 | OutputArea.prototype.flush_clear_timeout = function() { | |
524 | var output_div = this.element; |
|
524 | var output_div = this.element; | |
525 | if (this.clear_out_timeout){ |
|
525 | if (this.clear_out_timeout){ | |
526 | clearTimeout(this.clear_out_timeout); |
|
526 | clearTimeout(this.clear_out_timeout); | |
527 | this.clear_out_timeout = null; |
|
527 | this.clear_out_timeout = null; | |
528 | this.clear_output_callback(this._clear_stdout, this._clear_stderr, this._clear_other); |
|
528 | this.clear_output_callback(this._clear_stdout, this._clear_stderr, this._clear_other); | |
529 | } |
|
529 | } | |
530 | }; |
|
530 | }; | |
531 |
|
531 | |||
532 |
|
532 | |||
533 | // JSON serialization |
|
533 | // JSON serialization | |
534 |
|
534 | |||
535 | OutputArea.prototype.fromJSON = function (outputs) { |
|
535 | OutputArea.prototype.fromJSON = function (outputs) { | |
536 | var len = outputs.length; |
|
536 | var len = outputs.length; | |
537 | for (var i=0; i<len; i++) { |
|
537 | for (var i=0; i<len; i++) { | |
538 | // append with dynamic=false. |
|
538 | // append with dynamic=false. | |
539 | this.append_output(outputs[i], false); |
|
539 | this.append_output(outputs[i], false); | |
540 | } |
|
540 | } | |
541 | }; |
|
541 | }; | |
542 |
|
542 | |||
543 |
|
543 | |||
544 | OutputArea.prototype.toJSON = function () { |
|
544 | OutputArea.prototype.toJSON = function () { | |
545 | var outputs = []; |
|
545 | var outputs = []; | |
546 | var len = this.outputs.length; |
|
546 | var len = this.outputs.length; | |
547 | for (var i=0; i<len; i++) { |
|
547 | for (var i=0; i<len; i++) { | |
548 | outputs[i] = this.outputs[i]; |
|
548 | outputs[i] = this.outputs[i]; | |
549 | } |
|
549 | } | |
550 | return outputs; |
|
550 | return outputs; | |
551 | }; |
|
551 | }; | |
552 |
|
552 | |||
553 |
|
553 | |||
554 | IPython.OutputArea = OutputArea; |
|
554 | IPython.OutputArea = OutputArea; | |
555 |
|
555 | |||
556 | return IPython; |
|
556 | return IPython; | |
557 |
|
557 | |||
558 | }(IPython)); |
|
558 | }(IPython)); |
General Comments 0
You need to be logged in to leave comments.
Login now