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