##// END OF EJS Templates
as you type Completer, propagate event by hand...
Matthias BUSSONNIER -
Show More
@@ -1,785 +1,795 b''
1 1 //----------------------------------------------------------------------------
2 2 // Copyright (C) 2008-2011 The IPython Development Team
3 3 //
4 4 // Distributed under the terms of the BSD License. The full license is in
5 5 // the file COPYING, distributed as part of this software.
6 6 //----------------------------------------------------------------------------
7 7
8 8 //============================================================================
9 9 // CodeCell
10 10 //============================================================================
11 11
12 12 var IPython = (function (IPython) {
13 13
14 14 var utils = IPython.utils;
15 15
16 16 var CodeCell = function (notebook) {
17 17 this.code_mirror = null;
18 18 this.input_prompt_number = ' ';
19 19 this.is_completing = false;
20 20 this.completion_cursor = null;
21 21 this.outputs = [];
22 22 this.collapsed = false;
23 23 IPython.Cell.apply(this, arguments);
24 24 };
25 25
26 26
27 27 CodeCell.prototype = new IPython.Cell();
28 28
29 29
30 30 CodeCell.prototype.create_element = function () {
31 31 var cell = $('<div></div>').addClass('cell border-box-sizing code_cell vbox');
32 32 cell.attr('tabindex','2');
33 33 var input = $('<div></div>').addClass('input hbox');
34 34 input.append($('<div/>').addClass('prompt input_prompt'));
35 35 var input_area = $('<div/>').addClass('input_area box-flex1');
36 36 this.code_mirror = CodeMirror(input_area.get(0), {
37 37 indentUnit : 4,
38 38 mode: 'python',
39 39 theme: 'ipython',
40 40 readOnly: this.read_only,
41 41 onKeyEvent: $.proxy(this.handle_codemirror_keyevent,this)
42 42 });
43 43 input.append(input_area);
44 44 var output = $('<div></div>').addClass('output vbox');
45 45 cell.append(input).append(output);
46 46 this.element = cell;
47 47 this.collapse();
48 48 };
49 49
50 50 //TODO, try to diminish the number of parameters.
51 51 CodeCell.prototype.request_tooltip_after_time = function (pre_cursor,time,that){
52 52 if (pre_cursor === "" || pre_cursor === "(" ) {
53 53 // don't do anything if line beggin with '(' or is empty
54 54 } else {
55 55 // Will set a timer to request tooltip in `time`
56 56 that.tooltip_timeout = setTimeout(function(){
57 57 IPython.notebook.request_tool_tip(that, pre_cursor)
58 58 },time);
59 59 }
60 60 };
61 61
62 62 CodeCell.prototype.handle_codemirror_keyevent = function (editor, event) {
63 63 // This method gets called in CodeMirror's onKeyDown/onKeyPress
64 64 // handlers and is used to provide custom key handling. Its return
65 65 // value is used to determine if CodeMirror should ignore the event:
66 66 // true = ignore, false = don't ignore.
67 67
68 68 // note that we are comparing and setting the time to wait at each key press.
69 69 // a better wqy might be to generate a new function on each time change and
70 70 // assign it to CodeCell.prototype.request_tooltip_after_time
71 71 tooltip_wait_time = this.notebook.time_before_tooltip;
72 72 tooltip_on_tab = this.notebook.tooltip_on_tab;
73 73 var that = this;
74 74 // whatever key is pressed, first, cancel the tooltip request before
75 75 // they are sent, and remove tooltip if any
76 76 if(event.type === 'keydown' ){
77 77 CodeCell.prototype.remove_and_cancel_tooltip(that.tooltip_timeout);
78 78 that.tooltip_timeout=null;
79 79 }
80 80
81 81 if (event.keyCode === 13 && (event.shiftKey || event.ctrlKey)) {
82 82 // Always ignore shift-enter in CodeMirror as we handle it.
83 83 return true;
84 84 }else if (event.which === 40 && event.type === 'keypress' && tooltip_wait_time >= 0) {
85 85 // triger aon keypress (!) otherwise inconsistent event.which depending on plateform
86 86 // browser and keyboard layout !
87 87 // Pressing '(' , request tooltip, don't forget to reappend it
88 88 var cursor = editor.getCursor();
89 89 var pre_cursor = editor.getRange({line:cursor.line,ch:0},cursor).trim()+'(';
90 90 CodeCell.prototype.request_tooltip_after_time(pre_cursor,tooltip_wait_time,that);
91 91 } else if (event.keyCode === 9 && event.type == 'keydown') {
92 92 // Tab completion.
93 93 var cur = editor.getCursor();
94 94 //Do not trim here because of tooltip
95 95 var pre_cursor = editor.getRange({line:cur.line,ch:0},cur);
96 96 if (pre_cursor.trim() === "") {
97 97 // Don't autocomplete if the part of the line before the cursor
98 98 // is empty. In this case, let CodeMirror handle indentation.
99 99 return false;
100 100 } else if ((pre_cursor.substr(-1) === "("|| pre_cursor.substr(-1) === " ") && tooltip_on_tab ) {
101 101 CodeCell.prototype.request_tooltip_after_time(pre_cursor,0,that);
102 102 } else {
103 103 pre_cursor.trim();
104 104 // Autocomplete the current line.
105 105 event.stop();
106 106 var line = editor.getLine(cur.line);
107 107 this.is_completing = true;
108 108 this.completion_cursor = cur;
109 109 IPython.notebook.complete_cell(this, line, cur.ch);
110 110 return true;
111 111 }
112 112 } else if (event.keyCode === 8 && event.type == 'keydown') {
113 113 // If backspace and the line ends with 4 spaces, remove them.
114 114 var cur = editor.getCursor();
115 115 var line = editor.getLine(cur.line);
116 116 var ending = line.slice(-4);
117 117 if (ending === ' ') {
118 118 editor.replaceRange('',
119 119 {line: cur.line, ch: cur.ch-4},
120 120 {line: cur.line, ch: cur.ch}
121 121 );
122 122 event.stop();
123 123 return true;
124 124 } else {
125 125 return false;
126 126 }
127 127 } else if (event.keyCode === 76 && event.ctrlKey && event.shiftKey
128 128 && event.type == 'keydown') {
129 129 // toggle line numbers with Ctrl-Shift-L
130 130 this.toggle_line_numbers();
131 131 }
132 132 else {
133 133 // keypress/keyup also trigger on TAB press, and we don't want to
134 134 // use those to disable tab completion.
135 135 if (this.is_completing && event.keyCode !== 9) {
136 136 var ed_cur = editor.getCursor();
137 137 var cc_cur = this.completion_cursor;
138 138 if (ed_cur.line !== cc_cur.line || ed_cur.ch !== cc_cur.ch) {
139 139 this.is_completing = false;
140 140 this.completion_cursor = null;
141 141 }
142 142 }
143 143 return false;
144 144 };
145 145 return false;
146 146 };
147 147
148 148 CodeCell.prototype.remove_and_cancel_tooltip = function(timeout)
149 149 {
150 150 // note that we don't handle closing directly inside the calltip
151 151 // as in the completer, because it is not focusable, so won't
152 152 // get the event.
153 153 if(timeout != null)
154 154 { clearTimeout(timeout);}
155 155 $('#tooltip').remove();
156 156 }
157 157
158 158 CodeCell.prototype.finish_tooltip = function (reply) {
159 159 defstring=reply.definition;
160 160 docstring=reply.docstring;
161 161 if(docstring == null){docstring="<empty docstring>"};
162 162 name=reply.name;
163 163
164 164 var that = this;
165 165 var tooltip = $('<div/>').attr('id', 'tooltip').addClass('tooltip');
166 166 // remove to have the tooltip not Limited in X and Y
167 167 tooltip.addClass('smalltooltip');
168 168 var pre=$('<pre/>').html(utils.fixConsole(docstring));
169 169 var expandlink=$('<a/>').attr('href',"#");
170 170 expandlink.addClass("ui-corner-all"); //rounded corner
171 171 expandlink.attr('role',"button");
172 172 //expandlink.addClass('ui-button');
173 173 //expandlink.addClass('ui-state-default');
174 174 var expandspan=$('<span/>').text('Expand');
175 175 expandspan.addClass('ui-icon');
176 176 expandspan.addClass('ui-icon-plus');
177 177 expandlink.append(expandspan);
178 178 expandlink.attr('id','expanbutton');
179 179 expandlink.click(function(){
180 180 tooltip.removeClass('smalltooltip');
181 181 tooltip.addClass('bigtooltip');
182 182 $('#expanbutton').remove();
183 183 setTimeout(function(){that.code_mirror.focus();}, 50);
184 184 });
185 185 var morelink=$('<a/>').attr('href',"#");
186 186 morelink.attr('role',"button");
187 187 morelink.addClass('ui-button');
188 188 //morelink.addClass("ui-corner-all"); //rounded corner
189 189 //morelink.addClass('ui-state-default');
190 190 var morespan=$('<span/>').text('Open in Pager');
191 191 morespan.addClass('ui-icon');
192 192 morespan.addClass('ui-icon-arrowstop-l-n');
193 193 morelink.append(morespan);
194 194 morelink.click(function(){
195 195 var msg_id = IPython.notebook.kernel.execute(name+"?");
196 196 IPython.notebook.msg_cell_map[msg_id] = IPython.notebook.selected_cell().cell_id;
197 197 CodeCell.prototype.remove_and_cancell_tooltip(that.tooltip_timeout);
198 198 setTimeout(function(){that.code_mirror.focus();}, 50);
199 199 });
200 200
201 201 var closelink=$('<a/>').attr('href',"#");
202 202 closelink.attr('role',"button");
203 203 closelink.addClass('ui-button');
204 204 //closelink.addClass("ui-corner-all"); //rounded corner
205 205 //closelink.adClass('ui-state-default'); // grey background and blue cross
206 206 var closespan=$('<span/>').text('Close');
207 207 closespan.addClass('ui-icon');
208 208 closespan.addClass('ui-icon-close');
209 209 closelink.append(closespan);
210 210 closelink.click(function(){
211 211 CodeCell.prototype.remove_and_cancell_tooltip(that.tooltip_timeout);
212 212 setTimeout(function(){that.code_mirror.focus();}, 50);
213 213 });
214 214 //construct the tooltip
215 215 tooltip.append(closelink);
216 216 tooltip.append(expandlink);
217 217 tooltip.append(morelink);
218 218 if(defstring){
219 219 defstring_html= $('<pre/>').html(utils.fixConsole(defstring));
220 220 tooltip.append(defstring_html);
221 221 }
222 222 tooltip.append(pre);
223 223 var pos = this.code_mirror.cursorCoords();
224 224 tooltip.css('left',pos.x+'px');
225 225 tooltip.css('top',pos.yBot+'px');
226 226 $('body').append(tooltip);
227 227
228 228 // issues with cross-closing if multiple tooltip in less than 5sec
229 229 // keep it comented for now
230 230 // setTimeout(CodeCell.prototype.remove_and_cancell_tooltip, 5000);
231 231 };
232 232
233 233 // As you type completer
234 234 CodeCell.prototype.finish_completing = function (matched_text, matches) {
235 235 //return if not completing or nothing to complete
236 236 if (!this.is_completing || matches.length === 0) {return;}
237 237
238 238 // for later readability
239 239 var key = { tab:9,
240 240 esc:27,
241 241 backspace:8,
242 242 space:13,
243 243 shift:16,
244 244 enter:32,
245 245 // _ is 189
246 246 isCompSymbol : function (code)
247 247 {return ((code>64 && code <=122)|| code == 189)}
248 248 }
249 249
250 250 // smart completion, sort kwarg ending with '='
251 251 var newm = new Array();
252 252 if(this.notebook.smart_completer)
253 253 {
254 254 kwargs = new Array();
255 255 other = new Array();
256 256 for(var i=0;i<matches.length; ++i){
257 257 if(matches[i].substr(-1) === '='){
258 258 kwargs.push(matches[i]);
259 259 }else{other.push(matches[i]);}
260 260 }
261 261 newm = kwargs.concat(other);
262 262 matches=newm;
263 263 }
264 264 // end sort kwargs
265 265
266 266 // give common prefix of a array of string
267 267 function sharedStart(A){
268 268 if(A.length > 1 ){
269 269 var tem1, tem2, s, A= A.slice(0).sort();
270 270 tem1= A[0];
271 271 s= tem1.length;
272 272 tem2= A.pop();
273 273 while(s && tem2.indexOf(tem1)== -1){
274 274 tem1= tem1.substring(0, --s);
275 275 }
276 276 return tem1;
277 277 }
278 278 return "";
279 279 }
280 280
281 281
282 282 //try to check if the user is typing tab at least twice after a word
283 283 // and completion is "done"
284 284 fallback_on_tooltip_after=2
285 285 if(matches.length==1 && matched_text === matches[0])
286 286 {
287 287 if(this.npressed >fallback_on_tooltip_after && this.prevmatch==matched_text)
288 288 {
289 289 console.log('Ok, you really want to complete after pressing tab '+this.npressed+' times !');
290 290 console.log('You should understand that there is no (more) completion for that !');
291 291 console.log("I'll show you the tooltip, will you stop bothering me ?");
292 292 this.request_tooltip_after_time(matched_text+'(',0,this);
293 293 return;
294 294 }
295 295 this.prevmatch=matched_text
296 296 this.npressed=this.npressed+1;
297 297 }
298 298 else
299 299 {
300 300 this.prevmatch="";
301 301 this.npressed=0;
302 302 }
303 303 // end fallback on tooltip
304 304 //==================================
305 305 // Real completion logic start here
306 306 var that = this;
307 307 var cur = this.completion_cursor;
308 308 var done = false;
309 309
310 310 // call to dismmiss the completer
311 311 var close = function () {
312 312 if (done) return;
313 313 done = true;
314 314 if (complete!=undefined)
315 315 {complete.remove();}
316 316 that.is_completing = false;
317 317 that.completion_cursor = null;
318 318 };
319 319
320 320 // insert the given text and exit the completer
321 var insert = function (selected_text) {
321 var insert = function (selected_text, event) {
322 322 that.code_mirror.replaceRange(
323 323 selected_text,
324 324 {line: cur.line, ch: (cur.ch-matched_text.length)},
325 325 {line: cur.line, ch: cur.ch}
326 326 );
327 event.stopPropagation();
328 event.preventDefault();
327 if(event != null){
328 event.stopPropagation();
329 event.preventDefault();
330 }
329 331 close();
330 332 setTimeout(function(){that.code_mirror.focus();}, 50);
331 333 };
332 334
333 335 // insert the curent highlited selection and exit
334 336 var pick = function () {
335 insert(select.val()[0]);
337 insert(select.val()[0],null);
336 338 };
337 339
338 340
339 341 // Define function to clear the completer, refill it with the new
340 342 // matches, update the pseuso typing field. autopick insert match if
341 343 // only one left, in no matches (anymore) dismiss itself by pasting
342 344 // what the user have typed until then
343 var complete_with = function(matches,typed_text,autopick)
345 var complete_with = function(matches,typed_text,autopick,event)
344 346 {
345 347 // If autopick an only one match, past.
346 348 // Used to 'pick' when pressing tab
347 349 if (matches.length < 1) {
348 insert(typed_text);
350 insert(typed_text,event);
351 if(event !=null){
352 event.stopPropagation();
353 event.preventDefault();
354 }
349 355 } else if (autopick && matches.length==1) {
350 insert(matches[0]);
356 insert(matches[0],event);
357 if(event !=null){
358 event.stopPropagation();
359 event.preventDefault();
360 }
351 361 }
352 362 //clear the previous completion if any
353 363 complete.children().children().remove();
354 364 $('#asyoutype').text(typed_text);
355 365 select=$('#asyoutypeselect');
356 366 for (var i=0; i<matches.length; ++i) {
357 367 select.append($('<option/>').html(matches[i]));
358 368 }
359 369 select.children().first().attr('selected','true');
360 370 }
361 371
362 372 // create html for completer
363 373 var complete = $('<div/>').addClass('completions');
364 374 complete.attr('id','complete');
365 375 complete.append($('<p/>').attr('id', 'asyoutype').html(matched_text));//pseudo input field
366 376
367 377 var select = $('<select/>').attr('multiple','true');
368 378 select.attr('id', 'asyoutypeselect')
369 379 select.attr('size',Math.min(10,matches.length));
370 380 var pos = this.code_mirror.cursorCoords();
371 381
372 382 // TODO: I propose to remove enough horizontal pixel
373 383 // to align the text later
374 384 complete.css('left',pos.x+'px');
375 385 complete.css('top',pos.yBot+'px');
376 386 complete.append(select);
377 387
378 388 $('body').append(complete);
379 389
380 390 // So a first actual completion. see if all the completion start wit
381 391 // the same letter and complete if necessary
382 392 fastForward = sharedStart(matches)
383 393 typed_characters= fastForward.substr(matched_text.length);
384 complete_with(matches,matched_text+typed_characters,true);
394 complete_with(matches,matched_text+typed_characters,true,null);
385 395 filterd=matches;
386 396 // Give focus to select, and make it filter the match as the user type
387 397 // by filtering the previous matches. Called by .keypress and .keydown
388 398 var downandpress = function (event,press_or_down) {
389 399 var code = event.which;
390 400 var autopick = false; // auto 'pick' if only one match
391 401 if (press_or_down === 0){
392 402 press=true; down=false; //Are we called from keypress or keydown
393 403 } else if (press_or_down == 1){
394 404 press=false; down=true;
395 405 }
396 406 if (code === key.shift) {
397 407 // nothing on Shift
398 408 return;
399 409 }
400 410 if (code === key.space || code === key.enter) {
401 411 // Pressing SPACE or ENTER will cause a pick
402 412 event.stopPropagation();
403 413 event.preventDefault();
404 414 pick();
405 415 } else if (code === 38 || code === 40) {
406 416 // We don't want the document keydown handler to handle UP/DOWN,
407 417 // but we want the default action.
408 418 event.stopPropagation();
409 419 //} else if ( key.isCompSymbol(code)|| (code==key.backspace)||(code==key.tab && down)){
410 } else if ( (code==key.backspace)||(code==key.tab) || press || key.isCompSymbol(code)){
411 if((code != key.backspace) && (code != key.tab) && press)
420 } else if ( (code==key.backspace)||(code==key.tab && down) || press || key.isCompSymbol(code)){
421 if( key.isCompSymbol(code) && press)
412 422 {
413 423 var newchar = String.fromCharCode(code);
414 424 typed_characters=typed_characters+newchar;
415 425 } else if (code == key.tab) {
416 426 fastForward = sharedStart(filterd)
417 427 ffsub = fastForward.substr(matched_text.length+typed_characters.length);
418 428 typed_characters=typed_characters+ffsub;
419 429 autopick=true;
420 430 event.stopPropagation();
421 431 event.preventDefault();
422 } else if (code == key.backspace) {
432 } else if (code == key.backspace && down) {
423 433 // cancel if user have erase everything, otherwise decrease
424 434 // what we filter with
425 435 if (typed_characters.length <= 0)
426 436 {
427 insert(matched_text)
437 insert(matched_text,event)
428 438 }
429 439 typed_characters=typed_characters.substr(0,typed_characters.length-1);
430 }
440 }else{return}
431 441 re = new RegExp("^"+"\%?"+matched_text+typed_characters,"");
432 442 filterd = matches.filter(function(x){return re.test(x)});
433 complete_with(filterd,matched_text+typed_characters,autopick);
443 complete_with(filterd,matched_text+typed_characters,autopick,event);
434 444 } else if(down){ // abort only on .keydown
435 445 // abort with what the user have pressed until now
436 446 console.log('aborting with keycode : '+code+' is down :'+down);
437 insert(matched_text+typed_characters);
447 insert(matched_text+typed_characters,event);
438 448 }
439 449 }
440 450 select.keydown(function (event) {
441 451 downandpress(event,1)
442 452 });
443 453 select.keypress(function (event) {
444 454 downandpress(event,0)
445 455 });
446 456 // Double click also causes a pick.
447 457 // and bind the last actions.
448 458 select.dblclick(pick);
449 459 select.blur(close);
450 460 select.focus();
451 461 };
452 462
453 463 CodeCell.prototype.toggle_line_numbers = function () {
454 464 if (this.code_mirror.getOption('lineNumbers') == false) {
455 465 this.code_mirror.setOption('lineNumbers', true);
456 466 } else {
457 467 this.code_mirror.setOption('lineNumbers', false);
458 468 }
459 469 this.code_mirror.refresh();
460 470 };
461 471
462 472 CodeCell.prototype.select = function () {
463 473 IPython.Cell.prototype.select.apply(this);
464 474 // Todo: this dance is needed because as of CodeMirror 2.12, focus is
465 475 // not causing the cursor to blink if the editor is empty initially.
466 476 // While this seems to fix the issue, this should be fixed
467 477 // in CodeMirror proper.
468 478 var s = this.code_mirror.getValue();
469 479 this.code_mirror.focus();
470 480 if (s === '') this.code_mirror.setValue('');
471 481 };
472 482
473 483
474 484 CodeCell.prototype.select_all = function () {
475 485 var start = {line: 0, ch: 0};
476 486 var nlines = this.code_mirror.lineCount();
477 487 var last_line = this.code_mirror.getLine(nlines-1);
478 488 var end = {line: nlines-1, ch: last_line.length};
479 489 this.code_mirror.setSelection(start, end);
480 490 };
481 491
482 492
483 493 CodeCell.prototype.append_output = function (json) {
484 494 this.expand();
485 495 if (json.output_type === 'pyout') {
486 496 this.append_pyout(json);
487 497 } else if (json.output_type === 'pyerr') {
488 498 this.append_pyerr(json);
489 499 } else if (json.output_type === 'display_data') {
490 500 this.append_display_data(json);
491 501 } else if (json.output_type === 'stream') {
492 502 this.append_stream(json);
493 503 };
494 504 this.outputs.push(json);
495 505 };
496 506
497 507
498 508 CodeCell.prototype.create_output_area = function () {
499 509 var oa = $("<div/>").addClass("hbox output_area");
500 510 oa.append($('<div/>').addClass('prompt'));
501 511 return oa;
502 512 };
503 513
504 514
505 515 CodeCell.prototype.append_pyout = function (json) {
506 516 n = json.prompt_number || ' ';
507 517 var toinsert = this.create_output_area();
508 518 toinsert.find('div.prompt').addClass('output_prompt').html('Out[' + n + ']:');
509 519 this.append_mime_type(json, toinsert);
510 520 this.element.find('div.output').append(toinsert);
511 521 // If we just output latex, typeset it.
512 522 if ((json.latex !== undefined) || (json.html !== undefined)) {
513 523 MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
514 524 };
515 525 };
516 526
517 527
518 528 CodeCell.prototype.append_pyerr = function (json) {
519 529 var tb = json.traceback;
520 530 if (tb !== undefined && tb.length > 0) {
521 531 var s = '';
522 532 var len = tb.length;
523 533 for (var i=0; i<len; i++) {
524 534 s = s + tb[i] + '\n';
525 535 }
526 536 s = s + '\n';
527 537 var toinsert = this.create_output_area();
528 538 this.append_text(s, toinsert);
529 539 this.element.find('div.output').append(toinsert);
530 540 };
531 541 };
532 542
533 543
534 544 CodeCell.prototype.append_stream = function (json) {
535 545 // temporary fix: if stream undefined (json file written prior to this patch),
536 546 // default to most likely stdout:
537 547 if (json.stream == undefined){
538 548 json.stream = 'stdout';
539 549 }
540 550 var subclass = "output_"+json.stream;
541 551 if (this.outputs.length > 0){
542 552 // have at least one output to consider
543 553 var last = this.outputs[this.outputs.length-1];
544 554 if (last.output_type == 'stream' && json.stream == last.stream){
545 555 // latest output was in the same stream,
546 556 // so append directly into its pre tag
547 557 this.element.find('div.'+subclass).last().find('pre').append(json.text);
548 558 return;
549 559 }
550 560 }
551 561
552 562 // If we got here, attach a new div
553 563 var toinsert = this.create_output_area();
554 564 this.append_text(json.text, toinsert, "output_stream "+subclass);
555 565 this.element.find('div.output').append(toinsert);
556 566 };
557 567
558 568
559 569 CodeCell.prototype.append_display_data = function (json) {
560 570 var toinsert = this.create_output_area();
561 571 this.append_mime_type(json, toinsert);
562 572 this.element.find('div.output').append(toinsert);
563 573 // If we just output latex, typeset it.
564 574 if ( (json.latex !== undefined) || (json.html !== undefined) ) {
565 575 MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
566 576 };
567 577 };
568 578
569 579
570 580 CodeCell.prototype.append_mime_type = function (json, element) {
571 581 if (json.html !== undefined) {
572 582 this.append_html(json.html, element);
573 583 } else if (json.latex !== undefined) {
574 584 this.append_latex(json.latex, element);
575 585 } else if (json.svg !== undefined) {
576 586 this.append_svg(json.svg, element);
577 587 } else if (json.png !== undefined) {
578 588 this.append_png(json.png, element);
579 589 } else if (json.jpeg !== undefined) {
580 590 this.append_jpeg(json.jpeg, element);
581 591 } else if (json.text !== undefined) {
582 592 this.append_text(json.text, element);
583 593 };
584 594 };
585 595
586 596
587 597 CodeCell.prototype.append_html = function (html, element) {
588 598 var toinsert = $("<div/>").addClass("box_flex1 output_subarea output_html rendered_html");
589 599 toinsert.append(html);
590 600 element.append(toinsert);
591 601 };
592 602
593 603
594 604 CodeCell.prototype.append_text = function (data, element, extra_class) {
595 605 var toinsert = $("<div/>").addClass("box_flex1 output_subarea output_text");
596 606 if (extra_class){
597 607 toinsert.addClass(extra_class);
598 608 }
599 609 toinsert.append($("<pre/>").html(data));
600 610 element.append(toinsert);
601 611 };
602 612
603 613
604 614 CodeCell.prototype.append_svg = function (svg, element) {
605 615 var toinsert = $("<div/>").addClass("box_flex1 output_subarea output_svg");
606 616 toinsert.append(svg);
607 617 element.append(toinsert);
608 618 };
609 619
610 620
611 621 CodeCell.prototype.append_png = function (png, element) {
612 622 var toinsert = $("<div/>").addClass("box_flex1 output_subarea output_png");
613 623 toinsert.append($("<img/>").attr('src','data:image/png;base64,'+png));
614 624 element.append(toinsert);
615 625 };
616 626
617 627
618 628 CodeCell.prototype.append_jpeg = function (jpeg, element) {
619 629 var toinsert = $("<div/>").addClass("box_flex1 output_subarea output_jpeg");
620 630 toinsert.append($("<img/>").attr('src','data:image/jpeg;base64,'+jpeg));
621 631 element.append(toinsert);
622 632 };
623 633
624 634
625 635 CodeCell.prototype.append_latex = function (latex, element) {
626 636 // This method cannot do the typesetting because the latex first has to
627 637 // be on the page.
628 638 var toinsert = $("<div/>").addClass("box_flex1 output_subarea output_latex");
629 639 toinsert.append(latex);
630 640 element.append(toinsert);
631 641 };
632 642
633 643
634 644 CodeCell.prototype.clear_output = function (stdout, stderr, other) {
635 645 var output_div = this.element.find("div.output");
636 646 if (stdout && stderr && other){
637 647 // clear all, no need for logic
638 648 output_div.html("");
639 649 this.outputs = [];
640 650 return;
641 651 }
642 652 // remove html output
643 653 // each output_subarea that has an identifying class is in an output_area
644 654 // which is the element to be removed.
645 655 if (stdout){
646 656 output_div.find("div.output_stdout").parent().remove();
647 657 }
648 658 if (stderr){
649 659 output_div.find("div.output_stderr").parent().remove();
650 660 }
651 661 if (other){
652 662 output_div.find("div.output_subarea").not("div.output_stderr").not("div.output_stdout").parent().remove();
653 663 }
654 664
655 665 // remove cleared outputs from JSON list:
656 666 for (var i = this.outputs.length - 1; i >= 0; i--){
657 667 var out = this.outputs[i];
658 668 var output_type = out.output_type;
659 669 if (output_type == "display_data" && other){
660 670 this.outputs.splice(i,1);
661 671 }else if (output_type == "stream"){
662 672 if (stdout && out.stream == "stdout"){
663 673 this.outputs.splice(i,1);
664 674 }else if (stderr && out.stream == "stderr"){
665 675 this.outputs.splice(i,1);
666 676 }
667 677 }
668 678 }
669 679 };
670 680
671 681
672 682 CodeCell.prototype.clear_input = function () {
673 683 this.code_mirror.setValue('');
674 684 };
675 685
676 686
677 687 CodeCell.prototype.collapse = function () {
678 688 if (!this.collapsed) {
679 689 this.element.find('div.output').hide();
680 690 this.collapsed = true;
681 691 };
682 692 };
683 693
684 694
685 695 CodeCell.prototype.expand = function () {
686 696 if (this.collapsed) {
687 697 this.element.find('div.output').show();
688 698 this.collapsed = false;
689 699 };
690 700 };
691 701
692 702
693 703 CodeCell.prototype.toggle_output = function () {
694 704 if (this.collapsed) {
695 705 this.expand();
696 706 } else {
697 707 this.collapse();
698 708 };
699 709 };
700 710
701 711 CodeCell.prototype.set_input_prompt = function (number) {
702 712 var n = number || '&nbsp;';
703 713 this.input_prompt_number = n;
704 714 this.element.find('div.input_prompt').html('In&nbsp;[' + n + ']:');
705 715 };
706 716
707 717
708 718 CodeCell.prototype.get_code = function () {
709 719 return this.code_mirror.getValue();
710 720 };
711 721
712 722
713 723 CodeCell.prototype.set_code = function (code) {
714 724 return this.code_mirror.setValue(code);
715 725 };
716 726
717 727
718 728 CodeCell.prototype.at_top = function () {
719 729 var cursor = this.code_mirror.getCursor();
720 730 if (cursor.line === 0) {
721 731 return true;
722 732 } else {
723 733 return false;
724 734 }
725 735 };
726 736
727 737
728 738 CodeCell.prototype.at_bottom = function () {
729 739 var cursor = this.code_mirror.getCursor();
730 740 if (cursor.line === (this.code_mirror.lineCount()-1)) {
731 741 return true;
732 742 } else {
733 743 return false;
734 744 }
735 745 };
736 746
737 747
738 748 CodeCell.prototype.fromJSON = function (data) {
739 749 console.log('Import from JSON:', data);
740 750 if (data.cell_type === 'code') {
741 751 if (data.input !== undefined) {
742 752 this.set_code(data.input);
743 753 }
744 754 if (data.prompt_number !== undefined) {
745 755 this.set_input_prompt(data.prompt_number);
746 756 } else {
747 757 this.set_input_prompt();
748 758 };
749 759 var len = data.outputs.length;
750 760 for (var i=0; i<len; i++) {
751 761 this.append_output(data.outputs[i]);
752 762 };
753 763 if (data.collapsed !== undefined) {
754 764 if (data.collapsed) {
755 765 this.collapse();
756 766 };
757 767 };
758 768 };
759 769 };
760 770
761 771
762 772 CodeCell.prototype.toJSON = function () {
763 773 var data = {};
764 774 data.input = this.get_code();
765 775 data.cell_type = 'code';
766 776 if (this.input_prompt_number !== ' ') {
767 777 data.prompt_number = this.input_prompt_number;
768 778 };
769 779 var outputs = [];
770 780 var len = this.outputs.length;
771 781 for (var i=0; i<len; i++) {
772 782 outputs[i] = this.outputs[i];
773 783 };
774 784 data.outputs = outputs;
775 785 data.language = 'python';
776 786 data.collapsed = this.collapsed;
777 787 // console.log('Export to JSON:',data);
778 788 return data;
779 789 };
780 790
781 791
782 792 IPython.CodeCell = CodeCell;
783 793
784 794 return IPython;
785 795 }(IPython));
General Comments 0
You need to be logged in to leave comments. Login now