##// END OF EJS Templates
Fixing Ctrl-Enter on Firefox.
Brian E. Granger -
Show More
@@ -1,452 +1,452
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 onKeyEvent: $.proxy(this.handle_codemirror_keyevent,this)
41 41 });
42 42 input.append(input_area);
43 43 var output = $('<div></div>').addClass('output vbox');
44 44 cell.append(input).append(output);
45 45 this.element = cell;
46 46 this.collapse()
47 47 };
48 48
49 49
50 50 CodeCell.prototype.handle_codemirror_keyevent = function (editor, event) {
51 51 // This method gets called in CodeMirror's onKeyDown/onKeyPress handlers and
52 52 // is used to provide custom key handling. Its return value is used to determine
53 53 // if CodeMirror should ignore the event: true = ignore, false = don't ignore.
54 if (event.keyCode === 13 && event.shiftKey) {
54 if (event.keyCode === 13 && (event.shiftKey || event.ctrlKey)) {
55 55 // Always ignore shift-enter in CodeMirror as we handle it.
56 56 return true;
57 57 } else if (event.keyCode === 9 && event.type == 'keydown') {
58 58 // Tab completion.
59 59 var cur = editor.getCursor();
60 60 var pre_cursor = editor.getRange({line:cur.line,ch:0},cur).trim();
61 61 if (pre_cursor === "") {
62 62 // Don't autocomplete if the part of the line before the cursor is empty.
63 63 // In this case, let CodeMirror handle indentation.
64 64 return false;
65 65 } else {
66 66 // Autocomplete the current line.
67 67 event.stop();
68 68 var line = editor.getLine(cur.line);
69 69 this.is_completing = true;
70 70 this.completion_cursor = cur;
71 71 IPython.notebook.complete_cell(this, line, cur.ch);
72 72 return true;
73 73 }
74 74 } else if (event.keyCode === 8 && event.type == 'keydown') {
75 75 // If backspace and the line ends with 4 spaces, remove them.
76 76 var cur = editor.getCursor();
77 77 var line = editor.getLine(cur.line);
78 78 var ending = line.slice(-4);
79 79 if (ending === ' ') {
80 80 editor.replaceRange('',
81 81 {line: cur.line, ch: cur.ch-4},
82 82 {line: cur.line, ch: cur.ch}
83 83 );
84 84 event.stop();
85 85 return true;
86 86 } else {
87 87 return false;
88 88 };
89 89 } else {
90 90 // keypress/keyup also trigger on TAB press, and we don't want to use those
91 91 // to disable tab completion.
92 92 if (this.is_completing && event.keyCode !== 9) {
93 93 var ed_cur = editor.getCursor();
94 94 var cc_cur = this.completion_cursor;
95 95 if (ed_cur.line !== cc_cur.line || ed_cur.ch !== cc_cur.ch) {
96 96 this.is_completing = false;
97 97 this.completion_cursor = null;
98 98 };
99 99 };
100 100 return false;
101 101 };
102 102 };
103 103
104 104
105 105 CodeCell.prototype.finish_completing = function (matched_text, matches) {
106 106 // console.log("Got matches", matched_text, matches);
107 107 if (!this.is_completing || matches.length === 0) {return;}
108 108
109 109 var that = this;
110 110 var cur = this.completion_cursor;
111 111
112 112 var insert = function (selected_text) {
113 113 that.code_mirror.replaceRange(
114 114 selected_text,
115 115 {line: cur.line, ch: (cur.ch-matched_text.length)},
116 116 {line: cur.line, ch: cur.ch}
117 117 );
118 118 };
119 119
120 120 if (matches.length === 1) {
121 121 insert(matches[0]);
122 122 setTimeout(function(){that.code_mirror.focus();}, 50);
123 123 return;
124 124 };
125 125
126 126 var complete = $('<div/>').addClass('completions');
127 127 var select = $('<select/>').attr('multiple','true');
128 128 for (var i=0; i<matches.length; ++i) {
129 129 select.append($('<option/>').text(matches[i]));
130 130 }
131 131 select.children().first().attr('selected','true');
132 132 select.attr('size',Math.min(10,matches.length));
133 133 var pos = this.code_mirror.cursorCoords();
134 134 complete.css('left',pos.x+'px');
135 135 complete.css('top',pos.yBot+'px');
136 136 complete.append(select);
137 137
138 138 $('body').append(complete);
139 139 var done = false;
140 140
141 141 var close = function () {
142 142 if (done) return;
143 143 done = true;
144 144 complete.remove();
145 145 that.is_completing = false;
146 146 that.completion_cursor = null;
147 147 };
148 148
149 149 var pick = function () {
150 150 insert(select.val()[0]);
151 151 close();
152 152 setTimeout(function(){that.code_mirror.focus();}, 50);
153 153 };
154 154
155 155 select.blur(close);
156 156 select.keydown(function (event) {
157 157 var code = event.which;
158 158 if (code === 13 || code === 32) {
159 159 // Pressing SPACE or ENTER will cause a pick
160 160 event.stopPropagation();
161 161 event.preventDefault();
162 162 pick();
163 163 } else if (code === 38 || code === 40) {
164 164 // We don't want the document keydown handler to handle UP/DOWN,
165 165 // but we want the default action.
166 166 event.stopPropagation();
167 167 } else {
168 168 // All other key presses exit completion.
169 169 event.stopPropagation();
170 170 event.preventDefault();
171 171 close();
172 172 that.code_mirror.focus();
173 173 }
174 174 });
175 175 // Double click also causes a pick.
176 176 select.dblclick(pick);
177 177 select.focus();
178 178 };
179 179
180 180
181 181 CodeCell.prototype.select = function () {
182 182 IPython.Cell.prototype.select.apply(this);
183 183 // Todo: this dance is needed because as of CodeMirror 2.12, focus is
184 184 // not causing the cursor to blink if the editor is empty initially.
185 185 // While this seems to fix the issue, this should be fixed
186 186 // in CodeMirror proper.
187 187 var s = this.code_mirror.getValue();
188 188 this.code_mirror.focus();
189 189 if (s === '') this.code_mirror.setValue('');
190 190 };
191 191
192 192
193 193 CodeCell.prototype.select_all = function () {
194 194 var start = {line: 0, ch: 0};
195 195 var nlines = this.code_mirror.lineCount();
196 196 var last_line = this.code_mirror.getLine(nlines-1);
197 197 var end = {line: nlines-1, ch: last_line.length};
198 198 this.code_mirror.setSelection(start, end);
199 199 };
200 200
201 201
202 202 CodeCell.prototype.append_output = function (json) {
203 203 this.expand();
204 204 if (json.output_type === 'pyout') {
205 205 this.append_pyout(json);
206 206 } else if (json.output_type === 'pyerr') {
207 207 this.append_pyerr(json);
208 208 } else if (json.output_type === 'display_data') {
209 209 this.append_display_data(json);
210 210 } else if (json.output_type === 'stream') {
211 211 this.append_stream(json);
212 212 };
213 213 this.outputs.push(json);
214 214 };
215 215
216 216
217 217 CodeCell.prototype.create_output_area = function () {
218 218 var oa = $("<div/>").addClass("hbox output_area");
219 219 oa.append($('<div/>').addClass('prompt'));
220 220 return oa;
221 221 };
222 222
223 223
224 224 CodeCell.prototype.append_pyout = function (json) {
225 225 n = json.prompt_number || ' ';
226 226 var toinsert = this.create_output_area();
227 227 toinsert.find('div.prompt').addClass('output_prompt').html('Out[' + n + ']:');
228 228 this.append_mime_type(json, toinsert);
229 229 this.element.find('div.output').append(toinsert);
230 230 // If we just output latex, typeset it.
231 231 if (json.latex !== undefined) {
232 232 MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
233 233 };
234 234 };
235 235
236 236
237 237 CodeCell.prototype.append_pyerr = function (json) {
238 238 var tb = json.traceback;
239 239 if (tb !== undefined && tb.length > 0) {
240 240 var s = '';
241 241 var len = tb.length;
242 242 for (var i=0; i<len; i++) {
243 243 s = s + tb[i] + '\n';
244 244 }
245 245 s = s + '\n';
246 246 var toinsert = this.create_output_area();
247 247 this.append_text(s, toinsert);
248 248 this.element.find('div.output').append(toinsert);
249 249 };
250 250 };
251 251
252 252
253 253 CodeCell.prototype.append_stream = function (json) {
254 254 var toinsert = this.create_output_area();
255 255 this.append_text(json.text, toinsert);
256 256 this.element.find('div.output').append(toinsert);
257 257 };
258 258
259 259
260 260 CodeCell.prototype.append_display_data = function (json) {
261 261 var toinsert = this.create_output_area();
262 262 this.append_mime_type(json, toinsert)
263 263 this.element.find('div.output').append(toinsert);
264 264 // If we just output latex, typeset it.
265 265 if (json.latex !== undefined) {
266 266 MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
267 267 };
268 268 };
269 269
270 270
271 271 CodeCell.prototype.append_mime_type = function (json, element) {
272 272 if (json.html !== undefined) {
273 273 this.append_html(json.html, element);
274 274 } else if (json.latex !== undefined) {
275 275 this.append_latex(json.latex, element);
276 276 } else if (json.svg !== undefined) {
277 277 this.append_svg(json.svg, element);
278 278 } else if (json.png !== undefined) {
279 279 this.append_png(json.png, element);
280 280 } else if (json.jpeg !== undefined) {
281 281 this.append_jpeg(json.jpeg, element);
282 282 } else if (json.text !== undefined) {
283 283 this.append_text(json.text, element);
284 284 };
285 285 };
286 286
287 287
288 288 CodeCell.prototype.append_html = function (html, element) {
289 289 var toinsert = $("<div/>").addClass("box_flex1 output_subarea output_html rendered_html");
290 290 toinsert.append(html);
291 291 element.append(toinsert);
292 292 }
293 293
294 294
295 295 CodeCell.prototype.append_text = function (data, element) {
296 296 var toinsert = $("<div/>").addClass("box_flex1 output_subarea output_stream");
297 297 toinsert.append($("<pre/>").html(data));
298 298 element.append(toinsert);
299 299 };
300 300
301 301
302 302 CodeCell.prototype.append_svg = function (svg, element) {
303 303 var toinsert = $("<div/>").addClass("box_flex1 output_subarea output_svg");
304 304 toinsert.append(svg);
305 305 element.append(toinsert);
306 306 };
307 307
308 308
309 309 CodeCell.prototype.append_png = function (png, element) {
310 310 var toinsert = $("<div/>").addClass("box_flex1 output_subarea output_png");
311 311 toinsert.append($("<img/>").attr('src','data:image/png;base64,'+png));
312 312 element.append(toinsert);
313 313 };
314 314
315 315
316 316 CodeCell.prototype.append_jpeg = function (jpeg, element) {
317 317 var toinsert = $("<div/>").addClass("box_flex1 output_subarea output_jpeg");
318 318 toinsert.append($("<img/>").attr('src','data:image/jpeg;base64,'+jpeg));
319 319 element.append(toinsert);
320 320 };
321 321
322 322
323 323 CodeCell.prototype.append_latex = function (latex, element) {
324 324 // This method cannot do the typesetting because the latex first has to
325 325 // be on the page.
326 326 var toinsert = $("<div/>").addClass("box_flex1 output_subarea output_latex");
327 327 toinsert.append(latex);
328 328 element.append(toinsert);
329 329 }
330 330
331 331
332 332 CodeCell.prototype.clear_output = function () {
333 333 this.element.find("div.output").html("");
334 334 this.outputs = [];
335 335 };
336 336
337 337
338 338 CodeCell.prototype.clear_input = function () {
339 339 this.code_mirror.setValue('');
340 340 };
341 341
342 342
343 343 CodeCell.prototype.collapse = function () {
344 344 if (!this.collapsed) {
345 345 this.element.find('div.output').hide();
346 346 this.collapsed = true;
347 347 };
348 348 };
349 349
350 350
351 351 CodeCell.prototype.expand = function () {
352 352 if (this.collapsed) {
353 353 this.element.find('div.output').show();
354 354 this.collapsed = false;
355 355 };
356 356 };
357 357
358 358
359 359 CodeCell.prototype.toggle_output = function () {
360 360 if (this.collapsed) {
361 361 this.expand();
362 362 } else {
363 363 this.collapse();
364 364 };
365 365 };
366 366
367 367 CodeCell.prototype.set_input_prompt = function (number) {
368 368 var n = number || ' ';
369 369 this.input_prompt_number = n
370 370 this.element.find('div.input_prompt').html('In&nbsp;[' + n + ']:');
371 371 };
372 372
373 373
374 374 CodeCell.prototype.get_code = function () {
375 375 return this.code_mirror.getValue();
376 376 };
377 377
378 378
379 379 CodeCell.prototype.set_code = function (code) {
380 380 return this.code_mirror.setValue(code);
381 381 };
382 382
383 383
384 384 CodeCell.prototype.at_top = function () {
385 385 var cursor = this.code_mirror.getCursor();
386 386 if (cursor.line === 0) {
387 387 return true;
388 388 } else {
389 389 return false;
390 390 }
391 391 };
392 392
393 393
394 394 CodeCell.prototype.at_bottom = function () {
395 395 var cursor = this.code_mirror.getCursor();
396 396 if (cursor.line === (this.code_mirror.lineCount()-1)) {
397 397 return true;
398 398 } else {
399 399 return false;
400 400 }
401 401 };
402 402
403 403
404 404 CodeCell.prototype.fromJSON = function (data) {
405 405 // console.log('Import from JSON:', data);
406 406 if (data.cell_type === 'code') {
407 407 if (data.input !== undefined) {
408 408 this.set_code(data.input);
409 409 }
410 410 if (data.prompt_number !== undefined) {
411 411 this.set_input_prompt(data.prompt_number);
412 412 } else {
413 413 this.set_input_prompt();
414 414 };
415 415 var len = data.outputs.length;
416 416 for (var i=0; i<len; i++) {
417 417 this.append_output(data.outputs[i]);
418 418 };
419 419 if (data.collapsed !== undefined) {
420 420 if (data.collapsed) {
421 421 this.collapse();
422 422 };
423 423 };
424 424 };
425 425 };
426 426
427 427
428 428 CodeCell.prototype.toJSON = function () {
429 429 var data = {};
430 430 data.input = this.get_code();
431 431 data.cell_type = 'code';
432 432 if (this.input_prompt_number !== ' ') {
433 433 data.prompt_number = this.input_prompt_number
434 434 };
435 435 var outputs = [];
436 436 var len = this.outputs.length;
437 437 for (var i=0; i<len; i++) {
438 438 outputs[i] = this.outputs[i];
439 439 };
440 440 data.outputs = outputs;
441 441 data.language = 'python';
442 442 data.collapsed = this.collapsed;
443 443 // console.log('Export to JSON:',data);
444 444 return data;
445 445 };
446 446
447 447
448 448 IPython.CodeCell = CodeCell;
449 449
450 450 return IPython;
451 451 }(IPython));
452 452
General Comments 0
You need to be logged in to leave comments. Login now