##// END OF EJS Templates
DRY: factor out common handle_keyevent method...
Paul Ivanov -
Show More
@@ -1,523 +1,543 b''
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 // Cell
9 // Cell
10 //============================================================================
10 //============================================================================
11 /**
11 /**
12 * An extendable module that provide base functionnality to create cell for notebook.
12 * An extendable module that provide base functionnality to create cell for notebook.
13 * @module IPython
13 * @module IPython
14 * @namespace IPython
14 * @namespace IPython
15 * @submodule Cell
15 * @submodule Cell
16 */
16 */
17
17
18 var IPython = (function (IPython) {
18 var IPython = (function (IPython) {
19 "use strict";
19 "use strict";
20
20
21 var utils = IPython.utils;
21 var utils = IPython.utils;
22
22
23 /**
23 /**
24 * The Base `Cell` class from which to inherit
24 * The Base `Cell` class from which to inherit
25 * @class Cell
25 * @class Cell
26 **/
26 **/
27
27
28 /*
28 /*
29 * @constructor
29 * @constructor
30 *
30 *
31 * @param {object|undefined} [options]
31 * @param {object|undefined} [options]
32 * @param [options.cm_config] {object} config to pass to CodeMirror, will extend default parameters
32 * @param [options.cm_config] {object} config to pass to CodeMirror, will extend default parameters
33 */
33 */
34 var Cell = function (options) {
34 var Cell = function (options) {
35
35
36 options = this.mergeopt(Cell, options);
36 options = this.mergeopt(Cell, options);
37 // superclass default overwrite our default
37 // superclass default overwrite our default
38
38
39 this.placeholder = options.placeholder || '';
39 this.placeholder = options.placeholder || '';
40 this.read_only = options.cm_config.readOnly;
40 this.read_only = options.cm_config.readOnly;
41 this.selected = false;
41 this.selected = false;
42 this.rendered = false;
42 this.rendered = false;
43 this.mode = 'command';
43 this.mode = 'command';
44 this.metadata = {};
44 this.metadata = {};
45 // load this from metadata later ?
45 // load this from metadata later ?
46 this.user_highlight = 'auto';
46 this.user_highlight = 'auto';
47 this.cm_config = options.cm_config;
47 this.cm_config = options.cm_config;
48 this.cell_id = utils.uuid();
48 this.cell_id = utils.uuid();
49 this._options = options;
49 this._options = options;
50
50
51 // For JS VM engines optimization, attributes should be all set (even
51 // For JS VM engines optimization, attributes should be all set (even
52 // to null) in the constructor, and if possible, if different subclass
52 // to null) in the constructor, and if possible, if different subclass
53 // have new attributes with same name, they should be created in the
53 // have new attributes with same name, they should be created in the
54 // same order. Easiest is to create and set to null in parent class.
54 // same order. Easiest is to create and set to null in parent class.
55
55
56 this.element = null;
56 this.element = null;
57 this.cell_type = this.cell_type || null;
57 this.cell_type = this.cell_type || null;
58 this.code_mirror = null;
58 this.code_mirror = null;
59
59
60 this.create_element();
60 this.create_element();
61 if (this.element !== null) {
61 if (this.element !== null) {
62 this.element.data("cell", this);
62 this.element.data("cell", this);
63 this.bind_events();
63 this.bind_events();
64 this.init_classes();
64 this.init_classes();
65 }
65 }
66 };
66 };
67
67
68 Cell.options_default = {
68 Cell.options_default = {
69 cm_config : {
69 cm_config : {
70 indentUnit : 4,
70 indentUnit : 4,
71 readOnly: false,
71 readOnly: false,
72 theme: "default"
72 theme: "default"
73 }
73 }
74 };
74 };
75
75
76 // FIXME: Workaround CM Bug #332 (Safari segfault on drag)
76 // FIXME: Workaround CM Bug #332 (Safari segfault on drag)
77 // by disabling drag/drop altogether on Safari
77 // by disabling drag/drop altogether on Safari
78 // https://github.com/marijnh/CodeMirror/issues/332
78 // https://github.com/marijnh/CodeMirror/issues/332
79 if (utils.browser[0] == "Safari") {
79 if (utils.browser[0] == "Safari") {
80 Cell.options_default.cm_config.dragDrop = false;
80 Cell.options_default.cm_config.dragDrop = false;
81 }
81 }
82
82
83 Cell.prototype.mergeopt = function(_class, options, overwrite){
83 Cell.prototype.mergeopt = function(_class, options, overwrite){
84 options = options || {};
84 options = options || {};
85 overwrite = overwrite || {};
85 overwrite = overwrite || {};
86 return $.extend(true, {}, _class.options_default, options, overwrite);
86 return $.extend(true, {}, _class.options_default, options, overwrite);
87 };
87 };
88
88
89 /**
89 /**
90 * Empty. Subclasses must implement create_element.
90 * Empty. Subclasses must implement create_element.
91 * This should contain all the code to create the DOM element in notebook
91 * This should contain all the code to create the DOM element in notebook
92 * and will be called by Base Class constructor.
92 * and will be called by Base Class constructor.
93 * @method create_element
93 * @method create_element
94 */
94 */
95 Cell.prototype.create_element = function () {
95 Cell.prototype.create_element = function () {
96 };
96 };
97
97
98 Cell.prototype.init_classes = function () {
98 Cell.prototype.init_classes = function () {
99 // Call after this.element exists to initialize the css classes
99 // Call after this.element exists to initialize the css classes
100 // related to selected, rendered and mode.
100 // related to selected, rendered and mode.
101 if (this.selected) {
101 if (this.selected) {
102 this.element.addClass('selected');
102 this.element.addClass('selected');
103 } else {
103 } else {
104 this.element.addClass('unselected');
104 this.element.addClass('unselected');
105 }
105 }
106 if (this.rendered) {
106 if (this.rendered) {
107 this.element.addClass('rendered');
107 this.element.addClass('rendered');
108 } else {
108 } else {
109 this.element.addClass('unrendered');
109 this.element.addClass('unrendered');
110 }
110 }
111 if (this.mode === 'edit') {
111 if (this.mode === 'edit') {
112 this.element.addClass('edit_mode');
112 this.element.addClass('edit_mode');
113 } else {
113 } else {
114 this.element.addClass('command_mode');
114 this.element.addClass('command_mode');
115 }
115 }
116 };
116 };
117
117
118 /**
118 /**
119 * Subclasses can implement override bind_events.
119 * Subclasses can implement override bind_events.
120 * Be carefull to call the parent method when overwriting as it fires event.
120 * Be carefull to call the parent method when overwriting as it fires event.
121 * this will be triggerd after create_element in constructor.
121 * this will be triggerd after create_element in constructor.
122 * @method bind_events
122 * @method bind_events
123 */
123 */
124 Cell.prototype.bind_events = function () {
124 Cell.prototype.bind_events = function () {
125 var that = this;
125 var that = this;
126 // We trigger events so that Cell doesn't have to depend on Notebook.
126 // We trigger events so that Cell doesn't have to depend on Notebook.
127 that.element.click(function (event) {
127 that.element.click(function (event) {
128 if (!that.selected) {
128 if (!that.selected) {
129 $([IPython.events]).trigger('select.Cell', {'cell':that});
129 $([IPython.events]).trigger('select.Cell', {'cell':that});
130 }
130 }
131 });
131 });
132 that.element.focusin(function (event) {
132 that.element.focusin(function (event) {
133 if (!that.selected) {
133 if (!that.selected) {
134 $([IPython.events]).trigger('select.Cell', {'cell':that});
134 $([IPython.events]).trigger('select.Cell', {'cell':that});
135 }
135 }
136 });
136 });
137 if (this.code_mirror) {
137 if (this.code_mirror) {
138 this.code_mirror.on("change", function(cm, change) {
138 this.code_mirror.on("change", function(cm, change) {
139 $([IPython.events]).trigger("set_dirty.Notebook", {value: true});
139 $([IPython.events]).trigger("set_dirty.Notebook", {value: true});
140 });
140 });
141 }
141 }
142 if (this.code_mirror) {
142 if (this.code_mirror) {
143 this.code_mirror.on('focus', function(cm, change) {
143 this.code_mirror.on('focus', function(cm, change) {
144 $([IPython.events]).trigger('edit_mode.Cell', {cell: that});
144 $([IPython.events]).trigger('edit_mode.Cell', {cell: that});
145 });
145 });
146 }
146 }
147 if (this.code_mirror) {
147 if (this.code_mirror) {
148 this.code_mirror.on('blur', function(cm, change) {
148 this.code_mirror.on('blur', function(cm, change) {
149 // Check if this unfocus event is legit.
149 // Check if this unfocus event is legit.
150 if (!that.should_cancel_blur()) {
150 if (!that.should_cancel_blur()) {
151 $([IPython.events]).trigger('command_mode.Cell', {cell: that});
151 $([IPython.events]).trigger('command_mode.Cell', {cell: that});
152 }
152 }
153 });
153 });
154 }
154 }
155 };
155 };
156
156
157 /**
157 /**
158 * Triger typsetting of math by mathjax on current cell element
158 * Triger typsetting of math by mathjax on current cell element
159 * @method typeset
159 * @method typeset
160 */
160 */
161 Cell.prototype.typeset = function () {
161 Cell.prototype.typeset = function () {
162 if (window.MathJax) {
162 if (window.MathJax) {
163 var cell_math = this.element.get(0);
163 var cell_math = this.element.get(0);
164 MathJax.Hub.Queue(["Typeset", MathJax.Hub, cell_math]);
164 MathJax.Hub.Queue(["Typeset", MathJax.Hub, cell_math]);
165 }
165 }
166 };
166 };
167
167
168 /**
168 /**
169 * handle cell level logic when a cell is selected
169 * handle cell level logic when a cell is selected
170 * @method select
170 * @method select
171 * @return is the action being taken
171 * @return is the action being taken
172 */
172 */
173 Cell.prototype.select = function () {
173 Cell.prototype.select = function () {
174 if (!this.selected) {
174 if (!this.selected) {
175 this.element.addClass('selected');
175 this.element.addClass('selected');
176 this.element.removeClass('unselected');
176 this.element.removeClass('unselected');
177 this.selected = true;
177 this.selected = true;
178 return true;
178 return true;
179 } else {
179 } else {
180 return false;
180 return false;
181 }
181 }
182 };
182 };
183
183
184 /**
184 /**
185 * handle cell level logic when a cell is unselected
185 * handle cell level logic when a cell is unselected
186 * @method unselect
186 * @method unselect
187 * @return is the action being taken
187 * @return is the action being taken
188 */
188 */
189 Cell.prototype.unselect = function () {
189 Cell.prototype.unselect = function () {
190 if (this.selected) {
190 if (this.selected) {
191 this.element.addClass('unselected');
191 this.element.addClass('unselected');
192 this.element.removeClass('selected');
192 this.element.removeClass('selected');
193 this.selected = false;
193 this.selected = false;
194 return true;
194 return true;
195 } else {
195 } else {
196 return false;
196 return false;
197 }
197 }
198 };
198 };
199
199
200 /**
200 /**
201 * handle cell level logic when a cell is rendered
201 * handle cell level logic when a cell is rendered
202 * @method render
202 * @method render
203 * @return is the action being taken
203 * @return is the action being taken
204 */
204 */
205 Cell.prototype.render = function () {
205 Cell.prototype.render = function () {
206 if (!this.rendered) {
206 if (!this.rendered) {
207 this.element.addClass('rendered');
207 this.element.addClass('rendered');
208 this.element.removeClass('unrendered');
208 this.element.removeClass('unrendered');
209 this.rendered = true;
209 this.rendered = true;
210 return true;
210 return true;
211 } else {
211 } else {
212 return false;
212 return false;
213 }
213 }
214 };
214 };
215
215
216 /**
216 /**
217 * handle cell level logic when a cell is unrendered
217 * handle cell level logic when a cell is unrendered
218 * @method unrender
218 * @method unrender
219 * @return is the action being taken
219 * @return is the action being taken
220 */
220 */
221 Cell.prototype.unrender = function () {
221 Cell.prototype.unrender = function () {
222 if (this.rendered) {
222 if (this.rendered) {
223 this.element.addClass('unrendered');
223 this.element.addClass('unrendered');
224 this.element.removeClass('rendered');
224 this.element.removeClass('rendered');
225 this.rendered = false;
225 this.rendered = false;
226 return true;
226 return true;
227 } else {
227 } else {
228 return false;
228 return false;
229 }
229 }
230 };
230 };
231
231
232 /**
232 /**
233 * Either delegates keyboard shortcut handling to either IPython keyboard
234 * manager when in command mode, or CodeMirror when in edit mode
235 *
236 * @method handle_keyevent
237 * @param {CodeMirror} editor - The codemirror instance bound to the cell
238 * @param {event} event -
239 * @return {Boolean} `true` if CodeMirror should ignore the event, `false` Otherwise
240 */
241 CodeCell.prototype.handle_keyevent = function (editor, event) {
242
243 // console.log('CM', this.mode, event.which, event.type)
244
245 if (this.mode === 'command') {
246 return true;
247 } else if (this.mode === 'edit') {
248 return this.handle_codemirror_keyevent(editor, event);
249 }
250 };
251
252 /**
233 * @method at_top
253 * @method at_top
234 * @return {Boolean}
254 * @return {Boolean}
235 */
255 */
236 Cell.prototype.at_top = function () {
256 Cell.prototype.at_top = function () {
237 var cm = this.code_mirror
257 var cm = this.code_mirror
238 var cursor = cm.getCursor();
258 var cursor = cm.getCursor();
239 if (cursor.line === 0 && cm.findPosV(cursor, -1, 'line').hitSide) {
259 if (cursor.line === 0 && cm.findPosV(cursor, -1, 'line').hitSide) {
240 console.log('at top');
260 console.log('at top');
241 return true;
261 return true;
242 } else {
262 } else {
243 return false;
263 return false;
244 }
264 }
245 };
265 };
246
266
247 /**
267 /**
248 * @method at_bottom
268 * @method at_bottom
249 * @return {Boolean}
269 * @return {Boolean}
250 * */
270 * */
251 Cell.prototype.at_bottom = function () {
271 Cell.prototype.at_bottom = function () {
252 var cm = this.code_mirror
272 var cm = this.code_mirror
253 var cursor = cm.getCursor();
273 var cursor = cm.getCursor();
254 if (cursor.line === (cm.lineCount()-1) && cm.findPosV(cursor, 1, 'line').hitSide) {
274 if (cursor.line === (cm.lineCount()-1) && cm.findPosV(cursor, 1, 'line').hitSide) {
255 return true;
275 return true;
256 } else {
276 } else {
257 return false;
277 return false;
258 }
278 }
259 };
279 };
260 /**
280 /**
261 * enter the command mode for the cell
281 * enter the command mode for the cell
262 * @method command_mode
282 * @method command_mode
263 * @return is the action being taken
283 * @return is the action being taken
264 */
284 */
265 Cell.prototype.command_mode = function () {
285 Cell.prototype.command_mode = function () {
266 if (this.mode !== 'command') {
286 if (this.mode !== 'command') {
267 this.element.addClass('command_mode');
287 this.element.addClass('command_mode');
268 this.element.removeClass('edit_mode');
288 this.element.removeClass('edit_mode');
269 this.mode = 'command';
289 this.mode = 'command';
270 return true;
290 return true;
271 } else {
291 } else {
272 return false;
292 return false;
273 }
293 }
274 };
294 };
275
295
276 /**
296 /**
277 * enter the edit mode for the cell
297 * enter the edit mode for the cell
278 * @method command_mode
298 * @method command_mode
279 * @return is the action being taken
299 * @return is the action being taken
280 */
300 */
281 Cell.prototype.edit_mode = function () {
301 Cell.prototype.edit_mode = function () {
282 if (this.mode !== 'edit') {
302 if (this.mode !== 'edit') {
283 this.element.addClass('edit_mode');
303 this.element.addClass('edit_mode');
284 this.element.removeClass('command_mode');
304 this.element.removeClass('command_mode');
285 this.mode = 'edit';
305 this.mode = 'edit';
286 return true;
306 return true;
287 } else {
307 } else {
288 return false;
308 return false;
289 }
309 }
290 };
310 };
291
311
292 /**
312 /**
293 * Determine whether or not the unfocus event should be aknowledged.
313 * Determine whether or not the unfocus event should be aknowledged.
294 *
314 *
295 * @method should_cancel_blur
315 * @method should_cancel_blur
296 *
316 *
297 * @return results {bool} Whether or not to ignore the cell's blur event.
317 * @return results {bool} Whether or not to ignore the cell's blur event.
298 **/
318 **/
299 Cell.prototype.should_cancel_blur = function () {
319 Cell.prototype.should_cancel_blur = function () {
300 return false;
320 return false;
301 };
321 };
302
322
303 /**
323 /**
304 * Focus the cell in the DOM sense
324 * Focus the cell in the DOM sense
305 * @method focus_cell
325 * @method focus_cell
306 */
326 */
307 Cell.prototype.focus_cell = function () {
327 Cell.prototype.focus_cell = function () {
308 this.element.focus();
328 this.element.focus();
309 };
329 };
310
330
311 /**
331 /**
312 * Focus the editor area so a user can type
332 * Focus the editor area so a user can type
313 *
333 *
314 * NOTE: If codemirror is focused via a mouse click event, you don't want to
334 * NOTE: If codemirror is focused via a mouse click event, you don't want to
315 * call this because it will cause a page jump.
335 * call this because it will cause a page jump.
316 * @method focus_editor
336 * @method focus_editor
317 */
337 */
318 Cell.prototype.focus_editor = function () {
338 Cell.prototype.focus_editor = function () {
319 this.refresh();
339 this.refresh();
320 this.code_mirror.focus();
340 this.code_mirror.focus();
321 };
341 };
322
342
323 /**
343 /**
324 * Refresh codemirror instance
344 * Refresh codemirror instance
325 * @method refresh
345 * @method refresh
326 */
346 */
327 Cell.prototype.refresh = function () {
347 Cell.prototype.refresh = function () {
328 this.code_mirror.refresh();
348 this.code_mirror.refresh();
329 };
349 };
330
350
331 /**
351 /**
332 * should be overritten by subclass
352 * should be overritten by subclass
333 * @method get_text
353 * @method get_text
334 */
354 */
335 Cell.prototype.get_text = function () {
355 Cell.prototype.get_text = function () {
336 };
356 };
337
357
338 /**
358 /**
339 * should be overritten by subclass
359 * should be overritten by subclass
340 * @method set_text
360 * @method set_text
341 * @param {string} text
361 * @param {string} text
342 */
362 */
343 Cell.prototype.set_text = function (text) {
363 Cell.prototype.set_text = function (text) {
344 };
364 };
345
365
346 /**
366 /**
347 * should be overritten by subclass
367 * should be overritten by subclass
348 * serialise cell to json.
368 * serialise cell to json.
349 * @method toJSON
369 * @method toJSON
350 **/
370 **/
351 Cell.prototype.toJSON = function () {
371 Cell.prototype.toJSON = function () {
352 var data = {};
372 var data = {};
353 data.metadata = this.metadata;
373 data.metadata = this.metadata;
354 data.cell_type = this.cell_type;
374 data.cell_type = this.cell_type;
355 return data;
375 return data;
356 };
376 };
357
377
358
378
359 /**
379 /**
360 * should be overritten by subclass
380 * should be overritten by subclass
361 * @method fromJSON
381 * @method fromJSON
362 **/
382 **/
363 Cell.prototype.fromJSON = function (data) {
383 Cell.prototype.fromJSON = function (data) {
364 if (data.metadata !== undefined) {
384 if (data.metadata !== undefined) {
365 this.metadata = data.metadata;
385 this.metadata = data.metadata;
366 }
386 }
367 this.celltoolbar.rebuild();
387 this.celltoolbar.rebuild();
368 };
388 };
369
389
370
390
371 /**
391 /**
372 * can the cell be split into two cells
392 * can the cell be split into two cells
373 * @method is_splittable
393 * @method is_splittable
374 **/
394 **/
375 Cell.prototype.is_splittable = function () {
395 Cell.prototype.is_splittable = function () {
376 return true;
396 return true;
377 };
397 };
378
398
379
399
380 /**
400 /**
381 * can the cell be merged with other cells
401 * can the cell be merged with other cells
382 * @method is_mergeable
402 * @method is_mergeable
383 **/
403 **/
384 Cell.prototype.is_mergeable = function () {
404 Cell.prototype.is_mergeable = function () {
385 return true;
405 return true;
386 };
406 };
387
407
388
408
389 /**
409 /**
390 * @return {String} - the text before the cursor
410 * @return {String} - the text before the cursor
391 * @method get_pre_cursor
411 * @method get_pre_cursor
392 **/
412 **/
393 Cell.prototype.get_pre_cursor = function () {
413 Cell.prototype.get_pre_cursor = function () {
394 var cursor = this.code_mirror.getCursor();
414 var cursor = this.code_mirror.getCursor();
395 var text = this.code_mirror.getRange({line:0, ch:0}, cursor);
415 var text = this.code_mirror.getRange({line:0, ch:0}, cursor);
396 text = text.replace(/^\n+/, '').replace(/\n+$/, '');
416 text = text.replace(/^\n+/, '').replace(/\n+$/, '');
397 return text;
417 return text;
398 };
418 };
399
419
400
420
401 /**
421 /**
402 * @return {String} - the text after the cursor
422 * @return {String} - the text after the cursor
403 * @method get_post_cursor
423 * @method get_post_cursor
404 **/
424 **/
405 Cell.prototype.get_post_cursor = function () {
425 Cell.prototype.get_post_cursor = function () {
406 var cursor = this.code_mirror.getCursor();
426 var cursor = this.code_mirror.getCursor();
407 var last_line_num = this.code_mirror.lineCount()-1;
427 var last_line_num = this.code_mirror.lineCount()-1;
408 var last_line_len = this.code_mirror.getLine(last_line_num).length;
428 var last_line_len = this.code_mirror.getLine(last_line_num).length;
409 var end = {line:last_line_num, ch:last_line_len};
429 var end = {line:last_line_num, ch:last_line_len};
410 var text = this.code_mirror.getRange(cursor, end);
430 var text = this.code_mirror.getRange(cursor, end);
411 text = text.replace(/^\n+/, '').replace(/\n+$/, '');
431 text = text.replace(/^\n+/, '').replace(/\n+$/, '');
412 return text;
432 return text;
413 };
433 };
414
434
415 /**
435 /**
416 * Show/Hide CodeMirror LineNumber
436 * Show/Hide CodeMirror LineNumber
417 * @method show_line_numbers
437 * @method show_line_numbers
418 *
438 *
419 * @param value {Bool} show (true), or hide (false) the line number in CodeMirror
439 * @param value {Bool} show (true), or hide (false) the line number in CodeMirror
420 **/
440 **/
421 Cell.prototype.show_line_numbers = function (value) {
441 Cell.prototype.show_line_numbers = function (value) {
422 this.code_mirror.setOption('lineNumbers', value);
442 this.code_mirror.setOption('lineNumbers', value);
423 this.code_mirror.refresh();
443 this.code_mirror.refresh();
424 };
444 };
425
445
426 /**
446 /**
427 * Toggle CodeMirror LineNumber
447 * Toggle CodeMirror LineNumber
428 * @method toggle_line_numbers
448 * @method toggle_line_numbers
429 **/
449 **/
430 Cell.prototype.toggle_line_numbers = function () {
450 Cell.prototype.toggle_line_numbers = function () {
431 var val = this.code_mirror.getOption('lineNumbers');
451 var val = this.code_mirror.getOption('lineNumbers');
432 this.show_line_numbers(!val);
452 this.show_line_numbers(!val);
433 };
453 };
434
454
435 /**
455 /**
436 * Force codemirror highlight mode
456 * Force codemirror highlight mode
437 * @method force_highlight
457 * @method force_highlight
438 * @param {object} - CodeMirror mode
458 * @param {object} - CodeMirror mode
439 **/
459 **/
440 Cell.prototype.force_highlight = function(mode) {
460 Cell.prototype.force_highlight = function(mode) {
441 this.user_highlight = mode;
461 this.user_highlight = mode;
442 this.auto_highlight();
462 this.auto_highlight();
443 };
463 };
444
464
445 /**
465 /**
446 * Try to autodetect cell highlight mode, or use selected mode
466 * Try to autodetect cell highlight mode, or use selected mode
447 * @methods _auto_highlight
467 * @methods _auto_highlight
448 * @private
468 * @private
449 * @param {String|object|undefined} - CodeMirror mode | 'auto'
469 * @param {String|object|undefined} - CodeMirror mode | 'auto'
450 **/
470 **/
451 Cell.prototype._auto_highlight = function (modes) {
471 Cell.prototype._auto_highlight = function (modes) {
452 //Here we handle manually selected modes
472 //Here we handle manually selected modes
453 var mode;
473 var mode;
454 if( this.user_highlight !== undefined && this.user_highlight != 'auto' )
474 if( this.user_highlight !== undefined && this.user_highlight != 'auto' )
455 {
475 {
456 mode = this.user_highlight;
476 mode = this.user_highlight;
457 CodeMirror.autoLoadMode(this.code_mirror, mode);
477 CodeMirror.autoLoadMode(this.code_mirror, mode);
458 this.code_mirror.setOption('mode', mode);
478 this.code_mirror.setOption('mode', mode);
459 return;
479 return;
460 }
480 }
461 var current_mode = this.code_mirror.getOption('mode', mode);
481 var current_mode = this.code_mirror.getOption('mode', mode);
462 var first_line = this.code_mirror.getLine(0);
482 var first_line = this.code_mirror.getLine(0);
463 // loop on every pairs
483 // loop on every pairs
464 for(mode in modes) {
484 for(mode in modes) {
465 var regs = modes[mode].reg;
485 var regs = modes[mode].reg;
466 // only one key every time but regexp can't be keys...
486 // only one key every time but regexp can't be keys...
467 for(var i=0; i<regs.length; i++) {
487 for(var i=0; i<regs.length; i++) {
468 // here we handle non magic_modes
488 // here we handle non magic_modes
469 if(first_line.match(regs[i]) !== null) {
489 if(first_line.match(regs[i]) !== null) {
470 if(current_mode == mode){
490 if(current_mode == mode){
471 return;
491 return;
472 }
492 }
473 if (mode.search('magic_') !== 0) {
493 if (mode.search('magic_') !== 0) {
474 this.code_mirror.setOption('mode', mode);
494 this.code_mirror.setOption('mode', mode);
475 CodeMirror.autoLoadMode(this.code_mirror, mode);
495 CodeMirror.autoLoadMode(this.code_mirror, mode);
476 return;
496 return;
477 }
497 }
478 var open = modes[mode].open || "%%";
498 var open = modes[mode].open || "%%";
479 var close = modes[mode].close || "%%end";
499 var close = modes[mode].close || "%%end";
480 var mmode = mode;
500 var mmode = mode;
481 mode = mmode.substr(6);
501 mode = mmode.substr(6);
482 if(current_mode == mode){
502 if(current_mode == mode){
483 return;
503 return;
484 }
504 }
485 CodeMirror.autoLoadMode(this.code_mirror, mode);
505 CodeMirror.autoLoadMode(this.code_mirror, mode);
486 // create on the fly a mode that swhitch between
506 // create on the fly a mode that swhitch between
487 // plain/text and smth else otherwise `%%` is
507 // plain/text and smth else otherwise `%%` is
488 // source of some highlight issues.
508 // source of some highlight issues.
489 // we use patchedGetMode to circumvent a bug in CM
509 // we use patchedGetMode to circumvent a bug in CM
490 CodeMirror.defineMode(mmode , function(config) {
510 CodeMirror.defineMode(mmode , function(config) {
491 return CodeMirror.multiplexingMode(
511 return CodeMirror.multiplexingMode(
492 CodeMirror.patchedGetMode(config, 'text/plain'),
512 CodeMirror.patchedGetMode(config, 'text/plain'),
493 // always set someting on close
513 // always set someting on close
494 {open: open, close: close,
514 {open: open, close: close,
495 mode: CodeMirror.patchedGetMode(config, mode),
515 mode: CodeMirror.patchedGetMode(config, mode),
496 delimStyle: "delimit"
516 delimStyle: "delimit"
497 }
517 }
498 );
518 );
499 });
519 });
500 this.code_mirror.setOption('mode', mmode);
520 this.code_mirror.setOption('mode', mmode);
501 return;
521 return;
502 }
522 }
503 }
523 }
504 }
524 }
505 // fallback on default
525 // fallback on default
506 var default_mode;
526 var default_mode;
507 try {
527 try {
508 default_mode = this._options.cm_config.mode;
528 default_mode = this._options.cm_config.mode;
509 } catch(e) {
529 } catch(e) {
510 default_mode = 'text/plain';
530 default_mode = 'text/plain';
511 }
531 }
512 if( current_mode === default_mode){
532 if( current_mode === default_mode){
513 return;
533 return;
514 }
534 }
515 this.code_mirror.setOption('mode', default_mode);
535 this.code_mirror.setOption('mode', default_mode);
516 };
536 };
517
537
518 IPython.Cell = Cell;
538 IPython.Cell = Cell;
519
539
520 return IPython;
540 return IPython;
521
541
522 }(IPython));
542 }(IPython));
523
543
@@ -1,559 +1,549 b''
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 // CodeCell
9 // CodeCell
10 //============================================================================
10 //============================================================================
11 /**
11 /**
12 * An extendable module that provide base functionnality to create cell for notebook.
12 * An extendable module that provide base functionnality to create cell for notebook.
13 * @module IPython
13 * @module IPython
14 * @namespace IPython
14 * @namespace IPython
15 * @submodule CodeCell
15 * @submodule CodeCell
16 */
16 */
17
17
18
18
19 /* local util for codemirror */
19 /* local util for codemirror */
20 var posEq = function(a, b) {return a.line == b.line && a.ch == b.ch;};
20 var posEq = function(a, b) {return a.line == b.line && a.ch == b.ch;};
21
21
22 /**
22 /**
23 *
23 *
24 * function to delete until previous non blanking space character
24 * function to delete until previous non blanking space character
25 * or first multiple of 4 tabstop.
25 * or first multiple of 4 tabstop.
26 * @private
26 * @private
27 */
27 */
28 CodeMirror.commands.delSpaceToPrevTabStop = function(cm){
28 CodeMirror.commands.delSpaceToPrevTabStop = function(cm){
29 var from = cm.getCursor(true), to = cm.getCursor(false), sel = !posEq(from, to);
29 var from = cm.getCursor(true), to = cm.getCursor(false), sel = !posEq(from, to);
30 if (!posEq(from, to)) { cm.replaceRange("", from, to); return; }
30 if (!posEq(from, to)) { cm.replaceRange("", from, to); return; }
31 var cur = cm.getCursor(), line = cm.getLine(cur.line);
31 var cur = cm.getCursor(), line = cm.getLine(cur.line);
32 var tabsize = cm.getOption('tabSize');
32 var tabsize = cm.getOption('tabSize');
33 var chToPrevTabStop = cur.ch-(Math.ceil(cur.ch/tabsize)-1)*tabsize;
33 var chToPrevTabStop = cur.ch-(Math.ceil(cur.ch/tabsize)-1)*tabsize;
34 from = {ch:cur.ch-chToPrevTabStop,line:cur.line};
34 from = {ch:cur.ch-chToPrevTabStop,line:cur.line};
35 var select = cm.getRange(from,cur);
35 var select = cm.getRange(from,cur);
36 if( select.match(/^\ +$/) !== null){
36 if( select.match(/^\ +$/) !== null){
37 cm.replaceRange("",from,cur);
37 cm.replaceRange("",from,cur);
38 } else {
38 } else {
39 cm.deleteH(-1,"char");
39 cm.deleteH(-1,"char");
40 }
40 }
41 };
41 };
42
42
43
43
44 var IPython = (function (IPython) {
44 var IPython = (function (IPython) {
45 "use strict";
45 "use strict";
46
46
47 var utils = IPython.utils;
47 var utils = IPython.utils;
48 var keycodes = IPython.keyboard.keycodes;
48 var keycodes = IPython.keyboard.keycodes;
49
49
50 /**
50 /**
51 * A Cell conceived to write code.
51 * A Cell conceived to write code.
52 *
52 *
53 * The kernel doesn't have to be set at creation time, in that case
53 * The kernel doesn't have to be set at creation time, in that case
54 * it will be null and set_kernel has to be called later.
54 * it will be null and set_kernel has to be called later.
55 * @class CodeCell
55 * @class CodeCell
56 * @extends IPython.Cell
56 * @extends IPython.Cell
57 *
57 *
58 * @constructor
58 * @constructor
59 * @param {Object|null} kernel
59 * @param {Object|null} kernel
60 * @param {object|undefined} [options]
60 * @param {object|undefined} [options]
61 * @param [options.cm_config] {object} config to pass to CodeMirror
61 * @param [options.cm_config] {object} config to pass to CodeMirror
62 */
62 */
63 var CodeCell = function (kernel, options) {
63 var CodeCell = function (kernel, options) {
64 this.kernel = kernel || null;
64 this.kernel = kernel || null;
65 this.collapsed = false;
65 this.collapsed = false;
66
66
67 // create all attributed in constructor function
67 // create all attributed in constructor function
68 // even if null for V8 VM optimisation
68 // even if null for V8 VM optimisation
69 this.input_prompt_number = null;
69 this.input_prompt_number = null;
70 this.celltoolbar = null;
70 this.celltoolbar = null;
71 this.output_area = null;
71 this.output_area = null;
72 this.last_msg_id = null;
72 this.last_msg_id = null;
73 this.completer = null;
73 this.completer = null;
74
74
75
75
76 var cm_overwrite_options = {
76 var cm_overwrite_options = {
77 onKeyEvent: $.proxy(this.handle_keyevent,this)
77 onKeyEvent: $.proxy(this.handle_keyevent,this)
78 };
78 };
79
79
80 options = this.mergeopt(CodeCell, options, {cm_config:cm_overwrite_options});
80 options = this.mergeopt(CodeCell, options, {cm_config:cm_overwrite_options});
81
81
82 IPython.Cell.apply(this,[options]);
82 IPython.Cell.apply(this,[options]);
83
83
84 // Attributes we want to override in this subclass.
84 // Attributes we want to override in this subclass.
85 this.cell_type = "code";
85 this.cell_type = "code";
86
86
87 var that = this;
87 var that = this;
88 this.element.focusout(
88 this.element.focusout(
89 function() { that.auto_highlight(); }
89 function() { that.auto_highlight(); }
90 );
90 );
91 };
91 };
92
92
93 CodeCell.options_default = {
93 CodeCell.options_default = {
94 cm_config : {
94 cm_config : {
95 extraKeys: {
95 extraKeys: {
96 "Tab" : "indentMore",
96 "Tab" : "indentMore",
97 "Shift-Tab" : "indentLess",
97 "Shift-Tab" : "indentLess",
98 "Backspace" : "delSpaceToPrevTabStop",
98 "Backspace" : "delSpaceToPrevTabStop",
99 "Cmd-/" : "toggleComment",
99 "Cmd-/" : "toggleComment",
100 "Ctrl-/" : "toggleComment"
100 "Ctrl-/" : "toggleComment"
101 },
101 },
102 mode: 'ipython',
102 mode: 'ipython',
103 theme: 'ipython',
103 theme: 'ipython',
104 matchBrackets: true,
104 matchBrackets: true,
105 autoCloseBrackets: true
105 autoCloseBrackets: true
106 }
106 }
107 };
107 };
108
108
109 CodeCell.msg_cells = {};
109 CodeCell.msg_cells = {};
110
110
111 CodeCell.prototype = new IPython.Cell();
111 CodeCell.prototype = new IPython.Cell();
112
112
113 /**
113 /**
114 * @method auto_highlight
114 * @method auto_highlight
115 */
115 */
116 CodeCell.prototype.auto_highlight = function () {
116 CodeCell.prototype.auto_highlight = function () {
117 this._auto_highlight(IPython.config.cell_magic_highlight);
117 this._auto_highlight(IPython.config.cell_magic_highlight);
118 };
118 };
119
119
120 /** @method create_element */
120 /** @method create_element */
121 CodeCell.prototype.create_element = function () {
121 CodeCell.prototype.create_element = function () {
122 IPython.Cell.prototype.create_element.apply(this, arguments);
122 IPython.Cell.prototype.create_element.apply(this, arguments);
123
123
124 var cell = $('<div></div>').addClass('cell border-box-sizing code_cell');
124 var cell = $('<div></div>').addClass('cell border-box-sizing code_cell');
125 cell.attr('tabindex','2');
125 cell.attr('tabindex','2');
126
126
127 var input = $('<div></div>').addClass('input');
127 var input = $('<div></div>').addClass('input');
128 var prompt = $('<div/>').addClass('prompt input_prompt');
128 var prompt = $('<div/>').addClass('prompt input_prompt');
129 var inner_cell = $('<div/>').addClass('inner_cell');
129 var inner_cell = $('<div/>').addClass('inner_cell');
130 this.celltoolbar = new IPython.CellToolbar(this);
130 this.celltoolbar = new IPython.CellToolbar(this);
131 inner_cell.append(this.celltoolbar.element);
131 inner_cell.append(this.celltoolbar.element);
132 var input_area = $('<div/>').addClass('input_area');
132 var input_area = $('<div/>').addClass('input_area');
133 this.code_mirror = CodeMirror(input_area.get(0), this.cm_config);
133 this.code_mirror = CodeMirror(input_area.get(0), this.cm_config);
134 $(this.code_mirror.getInputField()).attr("spellcheck", "false");
134 $(this.code_mirror.getInputField()).attr("spellcheck", "false");
135 inner_cell.append(input_area);
135 inner_cell.append(input_area);
136 input.append(prompt).append(inner_cell);
136 input.append(prompt).append(inner_cell);
137
137
138 var widget_area = $('<div/>')
138 var widget_area = $('<div/>')
139 .addClass('widget-area')
139 .addClass('widget-area')
140 .hide();
140 .hide();
141 this.widget_area = widget_area;
141 this.widget_area = widget_area;
142 var widget_prompt = $('<div/>')
142 var widget_prompt = $('<div/>')
143 .addClass('prompt')
143 .addClass('prompt')
144 .appendTo(widget_area);
144 .appendTo(widget_area);
145 var widget_subarea = $('<div/>')
145 var widget_subarea = $('<div/>')
146 .addClass('widget-subarea')
146 .addClass('widget-subarea')
147 .appendTo(widget_area);
147 .appendTo(widget_area);
148 this.widget_subarea = widget_subarea;
148 this.widget_subarea = widget_subarea;
149 var widget_clear_buton = $('<button />')
149 var widget_clear_buton = $('<button />')
150 .addClass('close')
150 .addClass('close')
151 .html('&times;')
151 .html('&times;')
152 .click(function() {
152 .click(function() {
153 widget_area.slideUp('', function(){ widget_subarea.html(''); });
153 widget_area.slideUp('', function(){ widget_subarea.html(''); });
154 })
154 })
155 .appendTo(widget_prompt);
155 .appendTo(widget_prompt);
156
156
157 var output = $('<div></div>');
157 var output = $('<div></div>');
158 cell.append(input).append(widget_area).append(output);
158 cell.append(input).append(widget_area).append(output);
159 this.element = cell;
159 this.element = cell;
160 this.output_area = new IPython.OutputArea(output, true);
160 this.output_area = new IPython.OutputArea(output, true);
161 this.completer = new IPython.Completer(this);
161 this.completer = new IPython.Completer(this);
162 };
162 };
163
163
164 /** @method bind_events */
164 /** @method bind_events */
165 CodeCell.prototype.bind_events = function () {
165 CodeCell.prototype.bind_events = function () {
166 IPython.Cell.prototype.bind_events.apply(this);
166 IPython.Cell.prototype.bind_events.apply(this);
167 var that = this;
167 var that = this;
168
168
169 this.element.focusout(
169 this.element.focusout(
170 function() { that.auto_highlight(); }
170 function() { that.auto_highlight(); }
171 );
171 );
172 };
172 };
173
173
174 CodeCell.prototype.handle_keyevent = function (editor, event) {
175
176 // console.log('CM', this.mode, event.which, event.type)
177
178 if (this.mode === 'command') {
179 return true;
180 } else if (this.mode === 'edit') {
181 return this.handle_codemirror_keyevent(editor, event);
182 }
183 };
184
174
185 /**
175 /**
186 * This method gets called in CodeMirror's onKeyDown/onKeyPress
176 * This method gets called in CodeMirror's onKeyDown/onKeyPress
187 * handlers and is used to provide custom key handling. Its return
177 * handlers and is used to provide custom key handling. Its return
188 * value is used to determine if CodeMirror should ignore the event:
178 * value is used to determine if CodeMirror should ignore the event:
189 * true = ignore, false = don't ignore.
179 * true = ignore, false = don't ignore.
190 * @method handle_codemirror_keyevent
180 * @method handle_codemirror_keyevent
191 */
181 */
192 CodeCell.prototype.handle_codemirror_keyevent = function (editor, event) {
182 CodeCell.prototype.handle_codemirror_keyevent = function (editor, event) {
193
183
194 var that = this;
184 var that = this;
195 // whatever key is pressed, first, cancel the tooltip request before
185 // whatever key is pressed, first, cancel the tooltip request before
196 // they are sent, and remove tooltip if any, except for tab again
186 // they are sent, and remove tooltip if any, except for tab again
197 var tooltip_closed = null;
187 var tooltip_closed = null;
198 if (event.type === 'keydown' && event.which != keycodes.tab ) {
188 if (event.type === 'keydown' && event.which != keycodes.tab ) {
199 tooltip_closed = IPython.tooltip.remove_and_cancel_tooltip();
189 tooltip_closed = IPython.tooltip.remove_and_cancel_tooltip();
200 }
190 }
201
191
202 var cur = editor.getCursor();
192 var cur = editor.getCursor();
203 if (event.keyCode === keycodes.enter){
193 if (event.keyCode === keycodes.enter){
204 this.auto_highlight();
194 this.auto_highlight();
205 }
195 }
206
196
207 if (event.keyCode === keycodes.enter && (event.shiftKey || event.ctrlKey || event.altKey)) {
197 if (event.keyCode === keycodes.enter && (event.shiftKey || event.ctrlKey || event.altKey)) {
208 // Always ignore shift-enter in CodeMirror as we handle it.
198 // Always ignore shift-enter in CodeMirror as we handle it.
209 return true;
199 return true;
210 } else if (event.which === 40 && event.type === 'keypress' && IPython.tooltip.time_before_tooltip >= 0) {
200 } else if (event.which === 40 && event.type === 'keypress' && IPython.tooltip.time_before_tooltip >= 0) {
211 // triger on keypress (!) otherwise inconsistent event.which depending on plateform
201 // triger on keypress (!) otherwise inconsistent event.which depending on plateform
212 // browser and keyboard layout !
202 // browser and keyboard layout !
213 // Pressing '(' , request tooltip, don't forget to reappend it
203 // Pressing '(' , request tooltip, don't forget to reappend it
214 // The second argument says to hide the tooltip if the docstring
204 // The second argument says to hide the tooltip if the docstring
215 // is actually empty
205 // is actually empty
216 IPython.tooltip.pending(that, true);
206 IPython.tooltip.pending(that, true);
217 } else if (event.which === keycodes.up && event.type === 'keydown') {
207 } else if (event.which === keycodes.up && event.type === 'keydown') {
218 // If we are not at the top, let CM handle the up arrow and
208 // If we are not at the top, let CM handle the up arrow and
219 // prevent the global keydown handler from handling it.
209 // prevent the global keydown handler from handling it.
220 if (!that.at_top()) {
210 if (!that.at_top()) {
221 event.stop();
211 event.stop();
222 return false;
212 return false;
223 } else {
213 } else {
224 return true;
214 return true;
225 }
215 }
226 } else if (event.which === keycodes.esc && event.type === 'keydown') {
216 } else if (event.which === keycodes.esc && event.type === 'keydown') {
227 // First see if the tooltip is active and if so cancel it.
217 // First see if the tooltip is active and if so cancel it.
228 if (tooltip_closed) {
218 if (tooltip_closed) {
229 // The call to remove_and_cancel_tooltip above in L177 doesn't pass
219 // The call to remove_and_cancel_tooltip above in L177 doesn't pass
230 // force=true. Because of this it won't actually close the tooltip
220 // force=true. Because of this it won't actually close the tooltip
231 // if it is in sticky mode. Thus, we have to check again if it is open
221 // if it is in sticky mode. Thus, we have to check again if it is open
232 // and close it with force=true.
222 // and close it with force=true.
233 if (!IPython.tooltip._hidden) {
223 if (!IPython.tooltip._hidden) {
234 IPython.tooltip.remove_and_cancel_tooltip(true);
224 IPython.tooltip.remove_and_cancel_tooltip(true);
235 }
225 }
236 // If we closed the tooltip, don't let CM or the global handlers
226 // If we closed the tooltip, don't let CM or the global handlers
237 // handle this event.
227 // handle this event.
238 event.stop();
228 event.stop();
239 return true;
229 return true;
240 }
230 }
241 if (that.code_mirror.options.keyMap === "vim-insert") {
231 if (that.code_mirror.options.keyMap === "vim-insert") {
242 // vim keyMap is active and in insert mode. In this case we leave vim
232 // vim keyMap is active and in insert mode. In this case we leave vim
243 // insert mode, but remain in notebook edit mode.
233 // insert mode, but remain in notebook edit mode.
244 // Let' CM handle this event and prevent global handling.
234 // Let' CM handle this event and prevent global handling.
245 event.stop();
235 event.stop();
246 return false;
236 return false;
247 } else {
237 } else {
248 // vim keyMap is not active. Leave notebook edit mode.
238 // vim keyMap is not active. Leave notebook edit mode.
249 // Don't let CM handle the event, defer to global handling.
239 // Don't let CM handle the event, defer to global handling.
250 return true;
240 return true;
251 }
241 }
252 } else if (event.which === keycodes.down && event.type === 'keydown') {
242 } else if (event.which === keycodes.down && event.type === 'keydown') {
253 // If we are not at the bottom, let CM handle the down arrow and
243 // If we are not at the bottom, let CM handle the down arrow and
254 // prevent the global keydown handler from handling it.
244 // prevent the global keydown handler from handling it.
255 if (!that.at_bottom()) {
245 if (!that.at_bottom()) {
256 event.stop();
246 event.stop();
257 return false;
247 return false;
258 } else {
248 } else {
259 return true;
249 return true;
260 }
250 }
261 } else if (event.keyCode === keycodes.tab && event.type === 'keydown' && event.shiftKey) {
251 } else if (event.keyCode === keycodes.tab && event.type === 'keydown' && event.shiftKey) {
262 if (editor.somethingSelected()){
252 if (editor.somethingSelected()){
263 var anchor = editor.getCursor("anchor");
253 var anchor = editor.getCursor("anchor");
264 var head = editor.getCursor("head");
254 var head = editor.getCursor("head");
265 if( anchor.line != head.line){
255 if( anchor.line != head.line){
266 return false;
256 return false;
267 }
257 }
268 }
258 }
269 IPython.tooltip.request(that);
259 IPython.tooltip.request(that);
270 event.stop();
260 event.stop();
271 return true;
261 return true;
272 } else if (event.keyCode === keycodes.tab && event.type == 'keydown') {
262 } else if (event.keyCode === keycodes.tab && event.type == 'keydown') {
273 // Tab completion.
263 // Tab completion.
274 IPython.tooltip.remove_and_cancel_tooltip();
264 IPython.tooltip.remove_and_cancel_tooltip();
275 if (editor.somethingSelected()) {
265 if (editor.somethingSelected()) {
276 return false;
266 return false;
277 }
267 }
278 var pre_cursor = editor.getRange({line:cur.line,ch:0},cur);
268 var pre_cursor = editor.getRange({line:cur.line,ch:0},cur);
279 if (pre_cursor.trim() === "") {
269 if (pre_cursor.trim() === "") {
280 // Don't autocomplete if the part of the line before the cursor
270 // Don't autocomplete if the part of the line before the cursor
281 // is empty. In this case, let CodeMirror handle indentation.
271 // is empty. In this case, let CodeMirror handle indentation.
282 return false;
272 return false;
283 } else {
273 } else {
284 event.stop();
274 event.stop();
285 this.completer.startCompletion();
275 this.completer.startCompletion();
286 return true;
276 return true;
287 }
277 }
288 } else {
278 } else {
289 // keypress/keyup also trigger on TAB press, and we don't want to
279 // keypress/keyup also trigger on TAB press, and we don't want to
290 // use those to disable tab completion.
280 // use those to disable tab completion.
291 return false;
281 return false;
292 }
282 }
293 return false;
283 return false;
294 };
284 };
295
285
296 // Kernel related calls.
286 // Kernel related calls.
297
287
298 CodeCell.prototype.set_kernel = function (kernel) {
288 CodeCell.prototype.set_kernel = function (kernel) {
299 this.kernel = kernel;
289 this.kernel = kernel;
300 };
290 };
301
291
302 /**
292 /**
303 * Execute current code cell to the kernel
293 * Execute current code cell to the kernel
304 * @method execute
294 * @method execute
305 */
295 */
306 CodeCell.prototype.execute = function () {
296 CodeCell.prototype.execute = function () {
307 this.output_area.clear_output();
297 this.output_area.clear_output();
308
298
309 // Clear widget area
299 // Clear widget area
310 this.widget_subarea.html('');
300 this.widget_subarea.html('');
311 this.widget_subarea.height('');
301 this.widget_subarea.height('');
312 this.widget_area.height('');
302 this.widget_area.height('');
313 this.widget_area.hide();
303 this.widget_area.hide();
314
304
315 this.set_input_prompt('*');
305 this.set_input_prompt('*');
316 this.element.addClass("running");
306 this.element.addClass("running");
317 if (this.last_msg_id) {
307 if (this.last_msg_id) {
318 this.kernel.clear_callbacks_for_msg(this.last_msg_id);
308 this.kernel.clear_callbacks_for_msg(this.last_msg_id);
319 }
309 }
320 var callbacks = this.get_callbacks();
310 var callbacks = this.get_callbacks();
321
311
322 var old_msg_id = this.last_msg_id;
312 var old_msg_id = this.last_msg_id;
323 this.last_msg_id = this.kernel.execute(this.get_text(), callbacks, {silent: false, store_history: true});
313 this.last_msg_id = this.kernel.execute(this.get_text(), callbacks, {silent: false, store_history: true});
324 if (old_msg_id) {
314 if (old_msg_id) {
325 delete CodeCell.msg_cells[old_msg_id];
315 delete CodeCell.msg_cells[old_msg_id];
326 }
316 }
327 CodeCell.msg_cells[this.last_msg_id] = this;
317 CodeCell.msg_cells[this.last_msg_id] = this;
328 };
318 };
329
319
330 /**
320 /**
331 * Construct the default callbacks for
321 * Construct the default callbacks for
332 * @method get_callbacks
322 * @method get_callbacks
333 */
323 */
334 CodeCell.prototype.get_callbacks = function () {
324 CodeCell.prototype.get_callbacks = function () {
335 return {
325 return {
336 shell : {
326 shell : {
337 reply : $.proxy(this._handle_execute_reply, this),
327 reply : $.proxy(this._handle_execute_reply, this),
338 payload : {
328 payload : {
339 set_next_input : $.proxy(this._handle_set_next_input, this),
329 set_next_input : $.proxy(this._handle_set_next_input, this),
340 page : $.proxy(this._open_with_pager, this)
330 page : $.proxy(this._open_with_pager, this)
341 }
331 }
342 },
332 },
343 iopub : {
333 iopub : {
344 output : $.proxy(this.output_area.handle_output, this.output_area),
334 output : $.proxy(this.output_area.handle_output, this.output_area),
345 clear_output : $.proxy(this.output_area.handle_clear_output, this.output_area),
335 clear_output : $.proxy(this.output_area.handle_clear_output, this.output_area),
346 },
336 },
347 input : $.proxy(this._handle_input_request, this)
337 input : $.proxy(this._handle_input_request, this)
348 };
338 };
349 };
339 };
350
340
351 CodeCell.prototype._open_with_pager = function (payload) {
341 CodeCell.prototype._open_with_pager = function (payload) {
352 $([IPython.events]).trigger('open_with_text.Pager', payload);
342 $([IPython.events]).trigger('open_with_text.Pager', payload);
353 };
343 };
354
344
355 /**
345 /**
356 * @method _handle_execute_reply
346 * @method _handle_execute_reply
357 * @private
347 * @private
358 */
348 */
359 CodeCell.prototype._handle_execute_reply = function (msg) {
349 CodeCell.prototype._handle_execute_reply = function (msg) {
360 this.set_input_prompt(msg.content.execution_count);
350 this.set_input_prompt(msg.content.execution_count);
361 this.element.removeClass("running");
351 this.element.removeClass("running");
362 $([IPython.events]).trigger('set_dirty.Notebook', {value: true});
352 $([IPython.events]).trigger('set_dirty.Notebook', {value: true});
363 };
353 };
364
354
365 /**
355 /**
366 * @method _handle_set_next_input
356 * @method _handle_set_next_input
367 * @private
357 * @private
368 */
358 */
369 CodeCell.prototype._handle_set_next_input = function (payload) {
359 CodeCell.prototype._handle_set_next_input = function (payload) {
370 var data = {'cell': this, 'text': payload.text};
360 var data = {'cell': this, 'text': payload.text};
371 $([IPython.events]).trigger('set_next_input.Notebook', data);
361 $([IPython.events]).trigger('set_next_input.Notebook', data);
372 };
362 };
373
363
374 /**
364 /**
375 * @method _handle_input_request
365 * @method _handle_input_request
376 * @private
366 * @private
377 */
367 */
378 CodeCell.prototype._handle_input_request = function (msg) {
368 CodeCell.prototype._handle_input_request = function (msg) {
379 this.output_area.append_raw_input(msg);
369 this.output_area.append_raw_input(msg);
380 };
370 };
381
371
382
372
383 // Basic cell manipulation.
373 // Basic cell manipulation.
384
374
385 CodeCell.prototype.select = function () {
375 CodeCell.prototype.select = function () {
386 var cont = IPython.Cell.prototype.select.apply(this);
376 var cont = IPython.Cell.prototype.select.apply(this);
387 if (cont) {
377 if (cont) {
388 this.code_mirror.refresh();
378 this.code_mirror.refresh();
389 this.auto_highlight();
379 this.auto_highlight();
390 }
380 }
391 return cont;
381 return cont;
392 };
382 };
393
383
394 CodeCell.prototype.render = function () {
384 CodeCell.prototype.render = function () {
395 var cont = IPython.Cell.prototype.render.apply(this);
385 var cont = IPython.Cell.prototype.render.apply(this);
396 // Always execute, even if we are already in the rendered state
386 // Always execute, even if we are already in the rendered state
397 return cont;
387 return cont;
398 };
388 };
399
389
400 CodeCell.prototype.unrender = function () {
390 CodeCell.prototype.unrender = function () {
401 // CodeCell is always rendered
391 // CodeCell is always rendered
402 return false;
392 return false;
403 };
393 };
404
394
405 /**
395 /**
406 * Determine whether or not the unfocus event should be aknowledged.
396 * Determine whether or not the unfocus event should be aknowledged.
407 *
397 *
408 * @method should_cancel_blur
398 * @method should_cancel_blur
409 *
399 *
410 * @return results {bool} Whether or not to ignore the cell's blur event.
400 * @return results {bool} Whether or not to ignore the cell's blur event.
411 **/
401 **/
412 CodeCell.prototype.should_cancel_blur = function () {
402 CodeCell.prototype.should_cancel_blur = function () {
413 // Cancel this unfocus event if the base wants to cancel or the cell
403 // Cancel this unfocus event if the base wants to cancel or the cell
414 // completer is open or the tooltip is open.
404 // completer is open or the tooltip is open.
415 return IPython.Cell.prototype.should_cancel_blur.apply(this) ||
405 return IPython.Cell.prototype.should_cancel_blur.apply(this) ||
416 (this.completer && this.completer.is_visible()) ||
406 (this.completer && this.completer.is_visible()) ||
417 (IPython.tooltip && IPython.tooltip.is_visible());
407 (IPython.tooltip && IPython.tooltip.is_visible());
418 };
408 };
419
409
420 CodeCell.prototype.select_all = function () {
410 CodeCell.prototype.select_all = function () {
421 var start = {line: 0, ch: 0};
411 var start = {line: 0, ch: 0};
422 var nlines = this.code_mirror.lineCount();
412 var nlines = this.code_mirror.lineCount();
423 var last_line = this.code_mirror.getLine(nlines-1);
413 var last_line = this.code_mirror.getLine(nlines-1);
424 var end = {line: nlines-1, ch: last_line.length};
414 var end = {line: nlines-1, ch: last_line.length};
425 this.code_mirror.setSelection(start, end);
415 this.code_mirror.setSelection(start, end);
426 };
416 };
427
417
428
418
429 CodeCell.prototype.collapse_output = function () {
419 CodeCell.prototype.collapse_output = function () {
430 this.collapsed = true;
420 this.collapsed = true;
431 this.output_area.collapse();
421 this.output_area.collapse();
432 };
422 };
433
423
434
424
435 CodeCell.prototype.expand_output = function () {
425 CodeCell.prototype.expand_output = function () {
436 this.collapsed = false;
426 this.collapsed = false;
437 this.output_area.expand();
427 this.output_area.expand();
438 this.output_area.unscroll_area();
428 this.output_area.unscroll_area();
439 };
429 };
440
430
441 CodeCell.prototype.scroll_output = function () {
431 CodeCell.prototype.scroll_output = function () {
442 this.output_area.expand();
432 this.output_area.expand();
443 this.output_area.scroll_if_long();
433 this.output_area.scroll_if_long();
444 };
434 };
445
435
446 CodeCell.prototype.toggle_output = function () {
436 CodeCell.prototype.toggle_output = function () {
447 this.collapsed = Boolean(1 - this.collapsed);
437 this.collapsed = Boolean(1 - this.collapsed);
448 this.output_area.toggle_output();
438 this.output_area.toggle_output();
449 };
439 };
450
440
451 CodeCell.prototype.toggle_output_scroll = function () {
441 CodeCell.prototype.toggle_output_scroll = function () {
452 this.output_area.toggle_scroll();
442 this.output_area.toggle_scroll();
453 };
443 };
454
444
455
445
456 CodeCell.input_prompt_classical = function (prompt_value, lines_number) {
446 CodeCell.input_prompt_classical = function (prompt_value, lines_number) {
457 var ns;
447 var ns;
458 if (prompt_value == undefined) {
448 if (prompt_value == undefined) {
459 ns = "&nbsp;";
449 ns = "&nbsp;";
460 } else {
450 } else {
461 ns = encodeURIComponent(prompt_value);
451 ns = encodeURIComponent(prompt_value);
462 }
452 }
463 return 'In&nbsp;[' + ns + ']:';
453 return 'In&nbsp;[' + ns + ']:';
464 };
454 };
465
455
466 CodeCell.input_prompt_continuation = function (prompt_value, lines_number) {
456 CodeCell.input_prompt_continuation = function (prompt_value, lines_number) {
467 var html = [CodeCell.input_prompt_classical(prompt_value, lines_number)];
457 var html = [CodeCell.input_prompt_classical(prompt_value, lines_number)];
468 for(var i=1; i < lines_number; i++) {
458 for(var i=1; i < lines_number; i++) {
469 html.push(['...:']);
459 html.push(['...:']);
470 }
460 }
471 return html.join('<br/>');
461 return html.join('<br/>');
472 };
462 };
473
463
474 CodeCell.input_prompt_function = CodeCell.input_prompt_classical;
464 CodeCell.input_prompt_function = CodeCell.input_prompt_classical;
475
465
476
466
477 CodeCell.prototype.set_input_prompt = function (number) {
467 CodeCell.prototype.set_input_prompt = function (number) {
478 var nline = 1;
468 var nline = 1;
479 if (this.code_mirror !== undefined) {
469 if (this.code_mirror !== undefined) {
480 nline = this.code_mirror.lineCount();
470 nline = this.code_mirror.lineCount();
481 }
471 }
482 this.input_prompt_number = number;
472 this.input_prompt_number = number;
483 var prompt_html = CodeCell.input_prompt_function(this.input_prompt_number, nline);
473 var prompt_html = CodeCell.input_prompt_function(this.input_prompt_number, nline);
484 // This HTML call is okay because the user contents are escaped.
474 // This HTML call is okay because the user contents are escaped.
485 this.element.find('div.input_prompt').html(prompt_html);
475 this.element.find('div.input_prompt').html(prompt_html);
486 };
476 };
487
477
488
478
489 CodeCell.prototype.clear_input = function () {
479 CodeCell.prototype.clear_input = function () {
490 this.code_mirror.setValue('');
480 this.code_mirror.setValue('');
491 };
481 };
492
482
493
483
494 CodeCell.prototype.get_text = function () {
484 CodeCell.prototype.get_text = function () {
495 return this.code_mirror.getValue();
485 return this.code_mirror.getValue();
496 };
486 };
497
487
498
488
499 CodeCell.prototype.set_text = function (code) {
489 CodeCell.prototype.set_text = function (code) {
500 return this.code_mirror.setValue(code);
490 return this.code_mirror.setValue(code);
501 };
491 };
502
492
503
493
504 CodeCell.prototype.clear_output = function (wait) {
494 CodeCell.prototype.clear_output = function (wait) {
505 this.output_area.clear_output(wait);
495 this.output_area.clear_output(wait);
506 this.set_input_prompt();
496 this.set_input_prompt();
507 };
497 };
508
498
509
499
510 // JSON serialization
500 // JSON serialization
511
501
512 CodeCell.prototype.fromJSON = function (data) {
502 CodeCell.prototype.fromJSON = function (data) {
513 IPython.Cell.prototype.fromJSON.apply(this, arguments);
503 IPython.Cell.prototype.fromJSON.apply(this, arguments);
514 if (data.cell_type === 'code') {
504 if (data.cell_type === 'code') {
515 if (data.input !== undefined) {
505 if (data.input !== undefined) {
516 this.set_text(data.input);
506 this.set_text(data.input);
517 // make this value the starting point, so that we can only undo
507 // make this value the starting point, so that we can only undo
518 // to this state, instead of a blank cell
508 // to this state, instead of a blank cell
519 this.code_mirror.clearHistory();
509 this.code_mirror.clearHistory();
520 this.auto_highlight();
510 this.auto_highlight();
521 }
511 }
522 if (data.prompt_number !== undefined) {
512 if (data.prompt_number !== undefined) {
523 this.set_input_prompt(data.prompt_number);
513 this.set_input_prompt(data.prompt_number);
524 } else {
514 } else {
525 this.set_input_prompt();
515 this.set_input_prompt();
526 }
516 }
527 this.output_area.trusted = data.trusted || false;
517 this.output_area.trusted = data.trusted || false;
528 this.output_area.fromJSON(data.outputs);
518 this.output_area.fromJSON(data.outputs);
529 if (data.collapsed !== undefined) {
519 if (data.collapsed !== undefined) {
530 if (data.collapsed) {
520 if (data.collapsed) {
531 this.collapse_output();
521 this.collapse_output();
532 } else {
522 } else {
533 this.expand_output();
523 this.expand_output();
534 }
524 }
535 }
525 }
536 }
526 }
537 };
527 };
538
528
539
529
540 CodeCell.prototype.toJSON = function () {
530 CodeCell.prototype.toJSON = function () {
541 var data = IPython.Cell.prototype.toJSON.apply(this);
531 var data = IPython.Cell.prototype.toJSON.apply(this);
542 data.input = this.get_text();
532 data.input = this.get_text();
543 // is finite protect against undefined and '*' value
533 // is finite protect against undefined and '*' value
544 if (isFinite(this.input_prompt_number)) {
534 if (isFinite(this.input_prompt_number)) {
545 data.prompt_number = this.input_prompt_number;
535 data.prompt_number = this.input_prompt_number;
546 }
536 }
547 var outputs = this.output_area.toJSON();
537 var outputs = this.output_area.toJSON();
548 data.outputs = outputs;
538 data.outputs = outputs;
549 data.language = 'python';
539 data.language = 'python';
550 data.trusted = this.output_area.trusted;
540 data.trusted = this.output_area.trusted;
551 data.collapsed = this.collapsed;
541 data.collapsed = this.collapsed;
552 return data;
542 return data;
553 };
543 };
554
544
555
545
556 IPython.CodeCell = CodeCell;
546 IPython.CodeCell = CodeCell;
557
547
558 return IPython;
548 return IPython;
559 }(IPython));
549 }(IPython));
@@ -1,517 +1,506 b''
1 //----------------------------------------------------------------------------
1 //----------------------------------------------------------------------------
2 // Copyright (C) 2008-2012 The IPython Development Team
2 // Copyright (C) 2008-2012 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 // TextCell
9 // TextCell
10 //============================================================================
10 //============================================================================
11
11
12
12
13
13
14 /**
14 /**
15 A module that allow to create different type of Text Cell
15 A module that allow to create different type of Text Cell
16 @module IPython
16 @module IPython
17 @namespace IPython
17 @namespace IPython
18 */
18 */
19 var IPython = (function (IPython) {
19 var IPython = (function (IPython) {
20 "use strict";
20 "use strict";
21
21
22 // TextCell base class
22 // TextCell base class
23 var keycodes = IPython.keyboard.keycodes;
23 var keycodes = IPython.keyboard.keycodes;
24 var security = IPython.security;
24 var security = IPython.security;
25
25
26 /**
26 /**
27 * Construct a new TextCell, codemirror mode is by default 'htmlmixed', and cell type is 'text'
27 * Construct a new TextCell, codemirror mode is by default 'htmlmixed', and cell type is 'text'
28 * cell start as not redered.
28 * cell start as not redered.
29 *
29 *
30 * @class TextCell
30 * @class TextCell
31 * @constructor TextCell
31 * @constructor TextCell
32 * @extend IPython.Cell
32 * @extend IPython.Cell
33 * @param {object|undefined} [options]
33 * @param {object|undefined} [options]
34 * @param [options.cm_config] {object} config to pass to CodeMirror, will extend/overwrite default config
34 * @param [options.cm_config] {object} config to pass to CodeMirror, will extend/overwrite default config
35 * @param [options.placeholder] {string} default string to use when souce in empty for rendering (only use in some TextCell subclass)
35 * @param [options.placeholder] {string} default string to use when souce in empty for rendering (only use in some TextCell subclass)
36 */
36 */
37 var TextCell = function (options) {
37 var TextCell = function (options) {
38 // in all TextCell/Cell subclasses
38 // in all TextCell/Cell subclasses
39 // do not assign most of members here, just pass it down
39 // do not assign most of members here, just pass it down
40 // in the options dict potentially overwriting what you wish.
40 // in the options dict potentially overwriting what you wish.
41 // they will be assigned in the base class.
41 // they will be assigned in the base class.
42
42
43 // we cannot put this as a class key as it has handle to "this".
43 // we cannot put this as a class key as it has handle to "this".
44 var cm_overwrite_options = {
44 var cm_overwrite_options = {
45 onKeyEvent: $.proxy(this.handle_keyevent,this)
45 onKeyEvent: $.proxy(this.handle_keyevent,this)
46 };
46 };
47
47
48 options = this.mergeopt(TextCell,options,{cm_config:cm_overwrite_options});
48 options = this.mergeopt(TextCell,options,{cm_config:cm_overwrite_options});
49
49
50 this.cell_type = this.cell_type || 'text';
50 this.cell_type = this.cell_type || 'text';
51
51
52 IPython.Cell.apply(this, [options]);
52 IPython.Cell.apply(this, [options]);
53
53
54 this.rendered = false;
54 this.rendered = false;
55 };
55 };
56
56
57 TextCell.prototype = new IPython.Cell();
57 TextCell.prototype = new IPython.Cell();
58
58
59 TextCell.options_default = {
59 TextCell.options_default = {
60 cm_config : {
60 cm_config : {
61 extraKeys: {"Tab": "indentMore","Shift-Tab" : "indentLess"},
61 extraKeys: {"Tab": "indentMore","Shift-Tab" : "indentLess"},
62 mode: 'htmlmixed',
62 mode: 'htmlmixed',
63 lineWrapping : true,
63 lineWrapping : true,
64 }
64 }
65 };
65 };
66
66
67
67
68 /**
68 /**
69 * Create the DOM element of the TextCell
69 * Create the DOM element of the TextCell
70 * @method create_element
70 * @method create_element
71 * @private
71 * @private
72 */
72 */
73 TextCell.prototype.create_element = function () {
73 TextCell.prototype.create_element = function () {
74 IPython.Cell.prototype.create_element.apply(this, arguments);
74 IPython.Cell.prototype.create_element.apply(this, arguments);
75
75
76 var cell = $("<div>").addClass('cell text_cell border-box-sizing');
76 var cell = $("<div>").addClass('cell text_cell border-box-sizing');
77 cell.attr('tabindex','2');
77 cell.attr('tabindex','2');
78
78
79 var prompt = $('<div/>').addClass('prompt input_prompt');
79 var prompt = $('<div/>').addClass('prompt input_prompt');
80 cell.append(prompt);
80 cell.append(prompt);
81 var inner_cell = $('<div/>').addClass('inner_cell');
81 var inner_cell = $('<div/>').addClass('inner_cell');
82 this.celltoolbar = new IPython.CellToolbar(this);
82 this.celltoolbar = new IPython.CellToolbar(this);
83 inner_cell.append(this.celltoolbar.element);
83 inner_cell.append(this.celltoolbar.element);
84 var input_area = $('<div/>').addClass('input_area');
84 var input_area = $('<div/>').addClass('input_area');
85 this.code_mirror = new CodeMirror(input_area.get(0), this.cm_config);
85 this.code_mirror = new CodeMirror(input_area.get(0), this.cm_config);
86 // The tabindex=-1 makes this div focusable.
86 // The tabindex=-1 makes this div focusable.
87 var render_area = $('<div/>').addClass('text_cell_render border-box-sizing').
87 var render_area = $('<div/>').addClass('text_cell_render border-box-sizing').
88 addClass('rendered_html').attr('tabindex','-1');
88 addClass('rendered_html').attr('tabindex','-1');
89 inner_cell.append(input_area).append(render_area);
89 inner_cell.append(input_area).append(render_area);
90 cell.append(inner_cell);
90 cell.append(inner_cell);
91 this.element = cell;
91 this.element = cell;
92 };
92 };
93
93
94
94
95 /**
95 /**
96 * Bind the DOM evet to cell actions
96 * Bind the DOM evet to cell actions
97 * Need to be called after TextCell.create_element
97 * Need to be called after TextCell.create_element
98 * @private
98 * @private
99 * @method bind_event
99 * @method bind_event
100 */
100 */
101 TextCell.prototype.bind_events = function () {
101 TextCell.prototype.bind_events = function () {
102 IPython.Cell.prototype.bind_events.apply(this);
102 IPython.Cell.prototype.bind_events.apply(this);
103 var that = this;
103 var that = this;
104
104
105 this.element.dblclick(function () {
105 this.element.dblclick(function () {
106 if (that.selected === false) {
106 if (that.selected === false) {
107 $([IPython.events]).trigger('select.Cell', {'cell':that});
107 $([IPython.events]).trigger('select.Cell', {'cell':that});
108 }
108 }
109 var cont = that.unrender();
109 var cont = that.unrender();
110 if (cont) {
110 if (cont) {
111 that.focus_editor();
111 that.focus_editor();
112 }
112 }
113 });
113 });
114 };
114 };
115
115
116 TextCell.prototype.handle_keyevent = function (editor, event) {
117
118 // console.log('CM', this.mode, event.which, event.type)
119
120 if (this.mode === 'command') {
121 return true;
122 } else if (this.mode === 'edit') {
123 return this.handle_codemirror_keyevent(editor, event);
124 }
125 };
126
127 /**
116 /**
128 * This method gets called in CodeMirror's onKeyDown/onKeyPress
117 * This method gets called in CodeMirror's onKeyDown/onKeyPress
129 * handlers and is used to provide custom key handling.
118 * handlers and is used to provide custom key handling.
130 *
119 *
131 * Subclass should override this method to have custom handeling
120 * Subclass should override this method to have custom handling
132 *
121 *
133 * @method handle_codemirror_keyevent
122 * @method handle_codemirror_keyevent
134 * @param {CodeMirror} editor - The codemirror instance bound to the cell
123 * @param {CodeMirror} editor - The codemirror instance bound to the cell
135 * @param {event} event -
124 * @param {event} event -
136 * @return {Boolean} `true` if CodeMirror should ignore the event, `false` Otherwise
125 * @return {Boolean} `true` if CodeMirror should ignore the event, `false` Otherwise
137 */
126 */
138 TextCell.prototype.handle_codemirror_keyevent = function (editor, event) {
127 TextCell.prototype.handle_codemirror_keyevent = function (editor, event) {
139 var that = this;
128 var that = this;
140
129
141 if (event.keyCode === 13 && (event.shiftKey || event.ctrlKey || event.altKey)) {
130 if (event.keyCode === 13 && (event.shiftKey || event.ctrlKey || event.altKey)) {
142 // Always ignore shift-enter in CodeMirror as we handle it.
131 // Always ignore shift-enter in CodeMirror as we handle it.
143 return true;
132 return true;
144 } else if (event.which === keycodes.up && event.type === 'keydown') {
133 } else if (event.which === keycodes.up && event.type === 'keydown') {
145 // If we are not at the top, let CM handle the up arrow and
134 // If we are not at the top, let CM handle the up arrow and
146 // prevent the global keydown handler from handling it.
135 // prevent the global keydown handler from handling it.
147 if (!that.at_top()) {
136 if (!that.at_top()) {
148 event.stop();
137 event.stop();
149 return false;
138 return false;
150 } else {
139 } else {
151 return true;
140 return true;
152 };
141 };
153 } else if (event.which === keycodes.down && event.type === 'keydown') {
142 } else if (event.which === keycodes.down && event.type === 'keydown') {
154 // If we are not at the bottom, let CM handle the down arrow and
143 // If we are not at the bottom, let CM handle the down arrow and
155 // prevent the global keydown handler from handling it.
144 // prevent the global keydown handler from handling it.
156 if (!that.at_bottom()) {
145 if (!that.at_bottom()) {
157 event.stop();
146 event.stop();
158 return false;
147 return false;
159 } else {
148 } else {
160 return true;
149 return true;
161 };
150 };
162 } else if (event.which === keycodes.esc && event.type === 'keydown') {
151 } else if (event.which === keycodes.esc && event.type === 'keydown') {
163 if (that.code_mirror.options.keyMap === "vim-insert") {
152 if (that.code_mirror.options.keyMap === "vim-insert") {
164 // vim keyMap is active and in insert mode. In this case we leave vim
153 // vim keyMap is active and in insert mode. In this case we leave vim
165 // insert mode, but remain in notebook edit mode.
154 // insert mode, but remain in notebook edit mode.
166 // Let' CM handle this event and prevent global handling.
155 // Let' CM handle this event and prevent global handling.
167 event.stop();
156 event.stop();
168 return false;
157 return false;
169 } else {
158 } else {
170 // vim keyMap is not active. Leave notebook edit mode.
159 // vim keyMap is not active. Leave notebook edit mode.
171 // Don't let CM handle the event, defer to global handling.
160 // Don't let CM handle the event, defer to global handling.
172 return true;
161 return true;
173 }
162 }
174 }
163 }
175 return false;
164 return false;
176 };
165 };
177
166
178 // Cell level actions
167 // Cell level actions
179
168
180 TextCell.prototype.select = function () {
169 TextCell.prototype.select = function () {
181 var cont = IPython.Cell.prototype.select.apply(this);
170 var cont = IPython.Cell.prototype.select.apply(this);
182 if (cont) {
171 if (cont) {
183 if (this.mode === 'edit') {
172 if (this.mode === 'edit') {
184 this.code_mirror.refresh();
173 this.code_mirror.refresh();
185 }
174 }
186 }
175 }
187 return cont;
176 return cont;
188 };
177 };
189
178
190 TextCell.prototype.unrender = function () {
179 TextCell.prototype.unrender = function () {
191 if (this.read_only) return;
180 if (this.read_only) return;
192 var cont = IPython.Cell.prototype.unrender.apply(this);
181 var cont = IPython.Cell.prototype.unrender.apply(this);
193 if (cont) {
182 if (cont) {
194 var text_cell = this.element;
183 var text_cell = this.element;
195 var output = text_cell.find("div.text_cell_render");
184 var output = text_cell.find("div.text_cell_render");
196 output.hide();
185 output.hide();
197 text_cell.find('div.input_area').show();
186 text_cell.find('div.input_area').show();
198 if (this.get_text() === this.placeholder) {
187 if (this.get_text() === this.placeholder) {
199 this.set_text('');
188 this.set_text('');
200 }
189 }
201 this.refresh();
190 this.refresh();
202 }
191 }
203 return cont;
192 return cont;
204 };
193 };
205
194
206 TextCell.prototype.execute = function () {
195 TextCell.prototype.execute = function () {
207 this.render();
196 this.render();
208 };
197 };
209
198
210 /**
199 /**
211 * setter: {{#crossLink "TextCell/set_text"}}{{/crossLink}}
200 * setter: {{#crossLink "TextCell/set_text"}}{{/crossLink}}
212 * @method get_text
201 * @method get_text
213 * @retrun {string} CodeMirror current text value
202 * @retrun {string} CodeMirror current text value
214 */
203 */
215 TextCell.prototype.get_text = function() {
204 TextCell.prototype.get_text = function() {
216 return this.code_mirror.getValue();
205 return this.code_mirror.getValue();
217 };
206 };
218
207
219 /**
208 /**
220 * @param {string} text - Codemiror text value
209 * @param {string} text - Codemiror text value
221 * @see TextCell#get_text
210 * @see TextCell#get_text
222 * @method set_text
211 * @method set_text
223 * */
212 * */
224 TextCell.prototype.set_text = function(text) {
213 TextCell.prototype.set_text = function(text) {
225 this.code_mirror.setValue(text);
214 this.code_mirror.setValue(text);
226 this.code_mirror.refresh();
215 this.code_mirror.refresh();
227 };
216 };
228
217
229 /**
218 /**
230 * setter :{{#crossLink "TextCell/set_rendered"}}{{/crossLink}}
219 * setter :{{#crossLink "TextCell/set_rendered"}}{{/crossLink}}
231 * @method get_rendered
220 * @method get_rendered
232 * @return {html} html of rendered element
221 * @return {html} html of rendered element
233 * */
222 * */
234 TextCell.prototype.get_rendered = function() {
223 TextCell.prototype.get_rendered = function() {
235 return this.element.find('div.text_cell_render').html();
224 return this.element.find('div.text_cell_render').html();
236 };
225 };
237
226
238 /**
227 /**
239 * @method set_rendered
228 * @method set_rendered
240 */
229 */
241 TextCell.prototype.set_rendered = function(text) {
230 TextCell.prototype.set_rendered = function(text) {
242 this.element.find('div.text_cell_render').html(text);
231 this.element.find('div.text_cell_render').html(text);
243 };
232 };
244
233
245
234
246 /**
235 /**
247 * Create Text cell from JSON
236 * Create Text cell from JSON
248 * @param {json} data - JSON serialized text-cell
237 * @param {json} data - JSON serialized text-cell
249 * @method fromJSON
238 * @method fromJSON
250 */
239 */
251 TextCell.prototype.fromJSON = function (data) {
240 TextCell.prototype.fromJSON = function (data) {
252 IPython.Cell.prototype.fromJSON.apply(this, arguments);
241 IPython.Cell.prototype.fromJSON.apply(this, arguments);
253 if (data.cell_type === this.cell_type) {
242 if (data.cell_type === this.cell_type) {
254 if (data.source !== undefined) {
243 if (data.source !== undefined) {
255 this.set_text(data.source);
244 this.set_text(data.source);
256 // make this value the starting point, so that we can only undo
245 // make this value the starting point, so that we can only undo
257 // to this state, instead of a blank cell
246 // to this state, instead of a blank cell
258 this.code_mirror.clearHistory();
247 this.code_mirror.clearHistory();
259 // TODO: This HTML needs to be treated as potentially dangerous
248 // TODO: This HTML needs to be treated as potentially dangerous
260 // user input and should be handled before set_rendered.
249 // user input and should be handled before set_rendered.
261 this.set_rendered(data.rendered || '');
250 this.set_rendered(data.rendered || '');
262 this.rendered = false;
251 this.rendered = false;
263 this.render();
252 this.render();
264 }
253 }
265 }
254 }
266 };
255 };
267
256
268 /** Generate JSON from cell
257 /** Generate JSON from cell
269 * @return {object} cell data serialised to json
258 * @return {object} cell data serialised to json
270 */
259 */
271 TextCell.prototype.toJSON = function () {
260 TextCell.prototype.toJSON = function () {
272 var data = IPython.Cell.prototype.toJSON.apply(this);
261 var data = IPython.Cell.prototype.toJSON.apply(this);
273 data.source = this.get_text();
262 data.source = this.get_text();
274 if (data.source == this.placeholder) {
263 if (data.source == this.placeholder) {
275 data.source = "";
264 data.source = "";
276 }
265 }
277 return data;
266 return data;
278 };
267 };
279
268
280
269
281 /**
270 /**
282 * @class MarkdownCell
271 * @class MarkdownCell
283 * @constructor MarkdownCell
272 * @constructor MarkdownCell
284 * @extends IPython.HTMLCell
273 * @extends IPython.HTMLCell
285 */
274 */
286 var MarkdownCell = function (options) {
275 var MarkdownCell = function (options) {
287 options = this.mergeopt(MarkdownCell, options);
276 options = this.mergeopt(MarkdownCell, options);
288
277
289 this.cell_type = 'markdown';
278 this.cell_type = 'markdown';
290 TextCell.apply(this, [options]);
279 TextCell.apply(this, [options]);
291 };
280 };
292
281
293 MarkdownCell.options_default = {
282 MarkdownCell.options_default = {
294 cm_config: {
283 cm_config: {
295 mode: 'gfm'
284 mode: 'gfm'
296 },
285 },
297 placeholder: "Type *Markdown* and LaTeX: $\\alpha^2$"
286 placeholder: "Type *Markdown* and LaTeX: $\\alpha^2$"
298 };
287 };
299
288
300 MarkdownCell.prototype = new TextCell();
289 MarkdownCell.prototype = new TextCell();
301
290
302 /**
291 /**
303 * @method render
292 * @method render
304 */
293 */
305 MarkdownCell.prototype.render = function () {
294 MarkdownCell.prototype.render = function () {
306 var cont = IPython.TextCell.prototype.render.apply(this);
295 var cont = IPython.TextCell.prototype.render.apply(this);
307 if (cont) {
296 if (cont) {
308 var text = this.get_text();
297 var text = this.get_text();
309 var math = null;
298 var math = null;
310 if (text === "") { text = this.placeholder; }
299 if (text === "") { text = this.placeholder; }
311 var text_and_math = IPython.mathjaxutils.remove_math(text);
300 var text_and_math = IPython.mathjaxutils.remove_math(text);
312 text = text_and_math[0];
301 text = text_and_math[0];
313 math = text_and_math[1];
302 math = text_and_math[1];
314 var html = marked.parser(marked.lexer(text));
303 var html = marked.parser(marked.lexer(text));
315 html = IPython.mathjaxutils.replace_math(html, math);
304 html = IPython.mathjaxutils.replace_math(html, math);
316 html = security.sanitize_html(html);
305 html = security.sanitize_html(html);
317 html = $(html);
306 html = $(html);
318 // links in markdown cells should open in new tabs
307 // links in markdown cells should open in new tabs
319 html.find("a[href]").not('[href^="#"]').attr("target", "_blank");
308 html.find("a[href]").not('[href^="#"]').attr("target", "_blank");
320 this.set_rendered(html);
309 this.set_rendered(html);
321 this.element.find('div.input_area').hide();
310 this.element.find('div.input_area').hide();
322 this.element.find("div.text_cell_render").show();
311 this.element.find("div.text_cell_render").show();
323 this.typeset();
312 this.typeset();
324 }
313 }
325 return cont;
314 return cont;
326 };
315 };
327
316
328
317
329 // RawCell
318 // RawCell
330
319
331 /**
320 /**
332 * @class RawCell
321 * @class RawCell
333 * @constructor RawCell
322 * @constructor RawCell
334 * @extends IPython.TextCell
323 * @extends IPython.TextCell
335 */
324 */
336 var RawCell = function (options) {
325 var RawCell = function (options) {
337
326
338 options = this.mergeopt(RawCell,options);
327 options = this.mergeopt(RawCell,options);
339 TextCell.apply(this, [options]);
328 TextCell.apply(this, [options]);
340 this.cell_type = 'raw';
329 this.cell_type = 'raw';
341 // RawCell should always hide its rendered div
330 // RawCell should always hide its rendered div
342 this.element.find('div.text_cell_render').hide();
331 this.element.find('div.text_cell_render').hide();
343 };
332 };
344
333
345 RawCell.options_default = {
334 RawCell.options_default = {
346 placeholder : "Write raw LaTeX or other formats here, for use with nbconvert.\n" +
335 placeholder : "Write raw LaTeX or other formats here, for use with nbconvert.\n" +
347 "It will not be rendered in the notebook.\n" +
336 "It will not be rendered in the notebook.\n" +
348 "When passing through nbconvert, a Raw Cell's content is added to the output unmodified."
337 "When passing through nbconvert, a Raw Cell's content is added to the output unmodified."
349 };
338 };
350
339
351 RawCell.prototype = new TextCell();
340 RawCell.prototype = new TextCell();
352
341
353 /** @method bind_events **/
342 /** @method bind_events **/
354 RawCell.prototype.bind_events = function () {
343 RawCell.prototype.bind_events = function () {
355 TextCell.prototype.bind_events.apply(this);
344 TextCell.prototype.bind_events.apply(this);
356 var that = this;
345 var that = this;
357 this.element.focusout(function() {
346 this.element.focusout(function() {
358 that.auto_highlight();
347 that.auto_highlight();
359 });
348 });
360 };
349 };
361
350
362 /**
351 /**
363 * Trigger autodetection of highlight scheme for current cell
352 * Trigger autodetection of highlight scheme for current cell
364 * @method auto_highlight
353 * @method auto_highlight
365 */
354 */
366 RawCell.prototype.auto_highlight = function () {
355 RawCell.prototype.auto_highlight = function () {
367 this._auto_highlight(IPython.config.raw_cell_highlight);
356 this._auto_highlight(IPython.config.raw_cell_highlight);
368 };
357 };
369
358
370 /** @method render **/
359 /** @method render **/
371 RawCell.prototype.render = function () {
360 RawCell.prototype.render = function () {
372 // Make sure that this cell type can never be rendered
361 // Make sure that this cell type can never be rendered
373 if (this.rendered) {
362 if (this.rendered) {
374 this.unrender();
363 this.unrender();
375 }
364 }
376 var text = this.get_text();
365 var text = this.get_text();
377 if (text === "") { text = this.placeholder; }
366 if (text === "") { text = this.placeholder; }
378 this.set_text(text);
367 this.set_text(text);
379 };
368 };
380
369
381
370
382 /**
371 /**
383 * @class HeadingCell
372 * @class HeadingCell
384 * @extends IPython.TextCell
373 * @extends IPython.TextCell
385 */
374 */
386
375
387 /**
376 /**
388 * @constructor HeadingCell
377 * @constructor HeadingCell
389 * @extends IPython.TextCell
378 * @extends IPython.TextCell
390 */
379 */
391 var HeadingCell = function (options) {
380 var HeadingCell = function (options) {
392 options = this.mergeopt(HeadingCell, options);
381 options = this.mergeopt(HeadingCell, options);
393
382
394 this.level = 1;
383 this.level = 1;
395 this.cell_type = 'heading';
384 this.cell_type = 'heading';
396 TextCell.apply(this, [options]);
385 TextCell.apply(this, [options]);
397
386
398 /**
387 /**
399 * heading level of the cell, use getter and setter to access
388 * heading level of the cell, use getter and setter to access
400 * @property level
389 * @property level
401 */
390 */
402 };
391 };
403
392
404 HeadingCell.options_default = {
393 HeadingCell.options_default = {
405 placeholder: "Type Heading Here"
394 placeholder: "Type Heading Here"
406 };
395 };
407
396
408 HeadingCell.prototype = new TextCell();
397 HeadingCell.prototype = new TextCell();
409
398
410 /** @method fromJSON */
399 /** @method fromJSON */
411 HeadingCell.prototype.fromJSON = function (data) {
400 HeadingCell.prototype.fromJSON = function (data) {
412 if (data.level !== undefined){
401 if (data.level !== undefined){
413 this.level = data.level;
402 this.level = data.level;
414 }
403 }
415 TextCell.prototype.fromJSON.apply(this, arguments);
404 TextCell.prototype.fromJSON.apply(this, arguments);
416 };
405 };
417
406
418
407
419 /** @method toJSON */
408 /** @method toJSON */
420 HeadingCell.prototype.toJSON = function () {
409 HeadingCell.prototype.toJSON = function () {
421 var data = TextCell.prototype.toJSON.apply(this);
410 var data = TextCell.prototype.toJSON.apply(this);
422 data.level = this.get_level();
411 data.level = this.get_level();
423 return data;
412 return data;
424 };
413 };
425
414
426 /**
415 /**
427 * can the cell be split into two cells
416 * can the cell be split into two cells
428 * @method is_splittable
417 * @method is_splittable
429 **/
418 **/
430 HeadingCell.prototype.is_splittable = function () {
419 HeadingCell.prototype.is_splittable = function () {
431 return false;
420 return false;
432 };
421 };
433
422
434
423
435 /**
424 /**
436 * can the cell be merged with other cells
425 * can the cell be merged with other cells
437 * @method is_mergeable
426 * @method is_mergeable
438 **/
427 **/
439 HeadingCell.prototype.is_mergeable = function () {
428 HeadingCell.prototype.is_mergeable = function () {
440 return false;
429 return false;
441 };
430 };
442
431
443 /**
432 /**
444 * Change heading level of cell, and re-render
433 * Change heading level of cell, and re-render
445 * @method set_level
434 * @method set_level
446 */
435 */
447 HeadingCell.prototype.set_level = function (level) {
436 HeadingCell.prototype.set_level = function (level) {
448 this.level = level;
437 this.level = level;
449 if (this.rendered) {
438 if (this.rendered) {
450 this.rendered = false;
439 this.rendered = false;
451 this.render();
440 this.render();
452 }
441 }
453 };
442 };
454
443
455 /** The depth of header cell, based on html (h1 to h6)
444 /** The depth of header cell, based on html (h1 to h6)
456 * @method get_level
445 * @method get_level
457 * @return {integer} level - for 1 to 6
446 * @return {integer} level - for 1 to 6
458 */
447 */
459 HeadingCell.prototype.get_level = function () {
448 HeadingCell.prototype.get_level = function () {
460 return this.level;
449 return this.level;
461 };
450 };
462
451
463
452
464 HeadingCell.prototype.set_rendered = function (html) {
453 HeadingCell.prototype.set_rendered = function (html) {
465 this.element.find("div.text_cell_render").html(html);
454 this.element.find("div.text_cell_render").html(html);
466 };
455 };
467
456
468
457
469 HeadingCell.prototype.get_rendered = function () {
458 HeadingCell.prototype.get_rendered = function () {
470 var r = this.element.find("div.text_cell_render");
459 var r = this.element.find("div.text_cell_render");
471 return r.children().first().html();
460 return r.children().first().html();
472 };
461 };
473
462
474
463
475 HeadingCell.prototype.render = function () {
464 HeadingCell.prototype.render = function () {
476 var cont = IPython.TextCell.prototype.render.apply(this);
465 var cont = IPython.TextCell.prototype.render.apply(this);
477 if (cont) {
466 if (cont) {
478 var text = this.get_text();
467 var text = this.get_text();
479 var math = null;
468 var math = null;
480 // Markdown headings must be a single line
469 // Markdown headings must be a single line
481 text = text.replace(/\n/g, ' ');
470 text = text.replace(/\n/g, ' ');
482 if (text === "") { text = this.placeholder; }
471 if (text === "") { text = this.placeholder; }
483 text = Array(this.level + 1).join("#") + " " + text;
472 text = Array(this.level + 1).join("#") + " " + text;
484 var text_and_math = IPython.mathjaxutils.remove_math(text);
473 var text_and_math = IPython.mathjaxutils.remove_math(text);
485 text = text_and_math[0];
474 text = text_and_math[0];
486 math = text_and_math[1];
475 math = text_and_math[1];
487 var html = marked.parser(marked.lexer(text));
476 var html = marked.parser(marked.lexer(text));
488 html = IPython.mathjaxutils.replace_math(html, math);
477 html = IPython.mathjaxutils.replace_math(html, math);
489 html = security.sanitize_html(html);
478 html = security.sanitize_html(html);
490 var h = $(html);
479 var h = $(html);
491 // add id and linkback anchor
480 // add id and linkback anchor
492 var hash = h.text().replace(/ /g, '-');
481 var hash = h.text().replace(/ /g, '-');
493 h.attr('id', hash);
482 h.attr('id', hash);
494 h.append(
483 h.append(
495 $('<a/>')
484 $('<a/>')
496 .addClass('anchor-link')
485 .addClass('anchor-link')
497 .attr('href', '#' + hash)
486 .attr('href', '#' + hash)
498 .text('¶')
487 .text('¶')
499 );
488 );
500 this.set_rendered(h);
489 this.set_rendered(h);
501 this.element.find('div.input_area').hide();
490 this.element.find('div.input_area').hide();
502 this.element.find("div.text_cell_render").show();
491 this.element.find("div.text_cell_render").show();
503 this.typeset();
492 this.typeset();
504 }
493 }
505 return cont;
494 return cont;
506 };
495 };
507
496
508 IPython.TextCell = TextCell;
497 IPython.TextCell = TextCell;
509 IPython.MarkdownCell = MarkdownCell;
498 IPython.MarkdownCell = MarkdownCell;
510 IPython.RawCell = RawCell;
499 IPython.RawCell = RawCell;
511 IPython.HeadingCell = HeadingCell;
500 IPython.HeadingCell = HeadingCell;
512
501
513
502
514 return IPython;
503 return IPython;
515
504
516 }(IPython));
505 }(IPython));
517
506
General Comments 0
You need to be logged in to leave comments. Login now