Merge pull request #4929 from ellisonbg/modal-fixes

Fixing various modal/focus related bugs

closes  #4809
closes  #4951

IPython/html/static/notebook/js/cell.js

@@ -1,494 +1,502
 //----------------------------------------------------------------------------
 //  Copyright (C) 2008-2011  The IPython Development Team
 //
 //  Distributed under the terms of the BSD License.  The full license is in
 //  the file COPYING, distributed as part of this software.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // Cell
 //============================================================================
 /**
  * An extendable module that provide base functionnality to create cell for notebook.
  * @module IPython
  * @namespace IPython
  * @submodule Cell
  */
 
 var IPython = (function (IPython) {
     "use strict";
 
     var utils = IPython.utils;
 
     /**
      * The Base `Cell` class from which to inherit
      * @class Cell
      **/
 
     /*
      * @constructor
      *
      * @param {object|undefined} [options]
      *     @param [options.cm_config] {object} config to pass to CodeMirror, will extend default parameters
      */
     var Cell = function (options) {
 
         options = this.mergeopt(Cell, options);
         // superclass default overwrite our default
         
         this.placeholder = options.placeholder || '';
         this.read_only = options.cm_config.readOnly;
         this.selected = false;
         this.rendered = false;
         this.mode = 'command';
         this.metadata = {};
         // load this from metadata later ?
         this.user_highlight = 'auto';
         this.cm_config = options.cm_config;
         this.cell_id = utils.uuid();
         this._options = options;
 
         // For JS VM engines optimisation, attributes should be all set (even
         // to null) in the constructor, and if possible, if different subclass
         // have new attributes with same name, they should be created in the
         // same order. Easiest is to create and set to null in parent class.
 
         this.element = null;
         this.cell_type = this.cell_type || null;
         this.code_mirror = null;
 
 
         this.create_element();
         if (this.element !== null) {
             this.element.data("cell", this);
             this.bind_events();
             this.init_classes();
         }
     };
 
     Cell.options_default = {
         cm_config : {
             indentUnit : 4,
             readOnly: false,
             theme: "default"
         }
     };
     
     // FIXME: Workaround CM Bug #332 (Safari segfault on drag)
     // by disabling drag/drop altogether on Safari
     // https://github.com/marijnh/CodeMirror/issues/332
     
     if (utils.browser[0] == "Safari") {
         Cell.options_default.cm_config.dragDrop = false;
     }
 
     Cell.prototype.mergeopt = function(_class, options, overwrite){
         options = options || {};
         overwrite = overwrite || {};
         return $.extend(true, {}, _class.options_default, options, overwrite)
 
     }
 
 
 
     /**
      * Empty. Subclasses must implement create_element.
      * This should contain all the code to create the DOM element in notebook
      * and will be called by Base Class constructor.
      * @method create_element
      */
     Cell.prototype.create_element = function () {
     };
 
     Cell.prototype.init_classes = function () {
         // Call after this.element exists to initialize the css classes
         // related to selected, rendered and mode.
         if (this.selected) {
             this.element.addClass('selected');
         } else {
             this.element.addClass('unselected');
         }
         if (this.rendered) {
             this.element.addClass('rendered');
         } else {
             this.element.addClass('unrendered');
         }
         if (this.mode === 'edit') {
             this.element.addClass('edit_mode');
         } else {
             this.element.addClass('command_mode');
         }
     }
 
 
     /**
      * Subclasses can implement override bind_events.
      * Be carefull to call the parent method when overwriting as it fires event.
      * this will be triggerd after create_element in constructor.
      * @method bind_events
      */
     Cell.prototype.bind_events = function () {
         var that = this;
         // We trigger events so that Cell doesn't have to depend on Notebook.
         that.element.click(function (event) {
             if (!that.selected) {
                 $([IPython.events]).trigger('select.Cell', {'cell':that});
             };
         });
         that.element.focusin(function (event) {
             if (!that.selected) {
                 $([IPython.events]).trigger('select.Cell', {'cell':that});
             };
         });
         if (this.code_mirror) {
             this.code_mirror.on("change", function(cm, change) {
                 $([IPython.events]).trigger("set_dirty.Notebook", {value: true});
             });
         }
         if (this.code_mirror) {
             this.code_mirror.on('focus', function(cm, change) {
                 $([IPython.events]).trigger('edit_mode.Cell', {cell: that});
             });
         }
         if (this.code_mirror) {
             this.code_mirror.on('blur', function(cm, change) {
                 if (that.mode === 'edit') {
                     setTimeout(function () {
                         var isf = IPython.utils.is_focused;
                         var trigger = true;
                         if (isf('div#tooltip') || isf('div.completions')) {
                             trigger = false;
                         }
                         if (trigger) {
                             $([IPython.events]).trigger('command_mode.Cell', {cell: that});
                         }
                     }, 1);
                 }
             });
         }
     };
 
     /**
      * Triger typsetting of math by mathjax on current cell element
      * @method typeset
      */
     Cell.prototype.typeset = function () {
         if (window.MathJax) {
             var cell_math = this.element.get(0);
             MathJax.Hub.Queue(["Typeset", MathJax.Hub, cell_math]);
         }
     };
 
     /**
      * handle cell level logic when a cell is selected
      * @method select
      * @return is the action being taken
      */
     Cell.prototype.select = function () {
         if (!this.selected) {
             this.element.addClass('selected');
             this.element.removeClass('unselected');
             this.selected = true;
             return true;
         } else {
             return false;
         }
     };
 
     /**
      * handle cell level logic when a cell is unselected
      * @method unselect
      * @return is the action being taken
      */
     Cell.prototype.unselect = function () {
         if (this.selected) {
             this.element.addClass('unselected');
             this.element.removeClass('selected');
             this.selected = false;
             return true;
         } else {
             return false;
         }
     };
 
     /**
      * handle cell level logic when a cell is rendered
      * @method render
      * @return is the action being taken
      */
     Cell.prototype.render = function () {
         if (!this.rendered) {
             this.element.addClass('rendered');
             this.element.removeClass('unrendered');
             this.rendered = true;
             return true;
         } else {
             return false;
         }
     };
 
     /**
      * handle cell level logic when a cell is unrendered
      * @method unrender
      * @return is the action being taken
      */
     Cell.prototype.unrender = function () {
         if (this.rendered) {
             this.element.addClass('unrendered');
             this.element.removeClass('rendered');
             this.rendered = false;
             return true;
         } else {
             return false;
         }
     };
 
     /**
      * enter the command mode for the cell
      * @method command_mode
      * @return is the action being taken
      */
     Cell.prototype.command_mode = function () {
         if (this.mode !== 'command') {
             this.element.addClass('command_mode');
             this.element.removeClass('edit_mode');
             this.mode = 'command';
             return true;
         } else {
             return false;
         }
     };
 
     /**
      * enter the edit mode for the cell
      * @method command_mode
      * @return is the action being taken
      */
     Cell.prototype.edit_mode = function () {
         if (this.mode !== 'edit') {
             this.element.addClass('edit_mode');
             this.element.removeClass('command_mode');
             this.mode = 'edit';
             return true;
         } else {
             return false;
         }
     }
 
     /**
      * Focus the cell in the DOM sense
      * @method focus_cell
      */
     Cell.prototype.focus_cell = function () {
         this.element.focus();
     }
 
     /**
      * Focus the editor area so a user can type
      * @method focus_editor
      */
     Cell.prototype.focus_editor = function () {
+        var that = this;
         this.refresh();
-        this.code_mirror.focus();
+        // Only focus the CM editor if it is not focused already. This prevents jumps
+        // related to the previous prompt position.
+        setTimeout(function () {
+            var isf = IPython.utils.is_focused;
+            if (!isf(that.element.find('div.CodeMirror'))) {
+                that.code_mirror.focus();
+            }
+        }, 1);
     }
 
     /**
      * Refresh codemirror instance
      * @method refresh
      */
     Cell.prototype.refresh = function () {
         this.code_mirror.refresh();
     };
 
     /**
      * should be overritten by subclass
      * @method get_text
      */
     Cell.prototype.get_text = function () {
     };
 
     /**
      * should be overritten by subclass
      * @method set_text
      * @param {string} text
      */
     Cell.prototype.set_text = function (text) {
     };
 
     /**
      * should be overritten by subclass
      * serialise cell to json.
      * @method toJSON
      **/
     Cell.prototype.toJSON = function () {
         var data = {};
         data.metadata = this.metadata;
         data.cell_type = this.cell_type;
         return data;
     };
 
 
     /**
      * should be overritten by subclass
      * @method fromJSON
      **/
     Cell.prototype.fromJSON = function (data) {
         if (data.metadata !== undefined) {
             this.metadata = data.metadata;
         }
         this.celltoolbar.rebuild();
     };
 
 
     /**
      * can the cell be split into two cells
      * @method is_splittable
      **/
     Cell.prototype.is_splittable = function () {
         return true;
     };
 
 
     /**
      * can the cell be merged with other cells
      * @method is_mergeable
      **/
     Cell.prototype.is_mergeable = function () {
         return true;
     };
 
 
     /**
      * @return {String} - the text before the cursor
      * @method get_pre_cursor
      **/
     Cell.prototype.get_pre_cursor = function () {
         var cursor = this.code_mirror.getCursor();
         var text = this.code_mirror.getRange({line:0, ch:0}, cursor);
         text = text.replace(/^\n+/, '').replace(/\n+$/, '');
         return text;
     }
 
 
     /**
      * @return {String} - the text after the cursor
      * @method get_post_cursor
      **/
     Cell.prototype.get_post_cursor = function () {
         var cursor = this.code_mirror.getCursor();
         var last_line_num = this.code_mirror.lineCount()-1;
         var last_line_len = this.code_mirror.getLine(last_line_num).length;
         var end = {line:last_line_num, ch:last_line_len}
         var text = this.code_mirror.getRange(cursor, end);
         text = text.replace(/^\n+/, '').replace(/\n+$/, '');
         return text;
     };
 
     /**
      * Show/Hide CodeMirror LineNumber
      * @method show_line_numbers
      *
      * @param value {Bool}  show (true), or hide (false) the line number in CodeMirror
      **/
     Cell.prototype.show_line_numbers = function (value) {
         this.code_mirror.setOption('lineNumbers', value);
         this.code_mirror.refresh();
     };
 
     /**
      * Toggle  CodeMirror LineNumber
      * @method toggle_line_numbers
      **/
     Cell.prototype.toggle_line_numbers = function () {
         var val = this.code_mirror.getOption('lineNumbers');
         this.show_line_numbers(!val);
     };
 
     /**
      * Force codemirror highlight mode
      * @method force_highlight
      * @param {object} - CodeMirror mode
      **/
     Cell.prototype.force_highlight = function(mode) {
         this.user_highlight = mode;
         this.auto_highlight();
     };
 
     /**
      * Try to autodetect cell highlight mode, or use selected mode
      * @methods _auto_highlight
      * @private
      * @param {String|object|undefined} - CodeMirror mode | 'auto'
      **/
     Cell.prototype._auto_highlight = function (modes) {
         //Here we handle manually selected modes
         if( this.user_highlight != undefined &&  this.user_highlight != 'auto' )
         {
             var mode = this.user_highlight;
             CodeMirror.autoLoadMode(this.code_mirror, mode);
             this.code_mirror.setOption('mode', mode);
             return;
         }
         var current_mode = this.code_mirror.getOption('mode', mode);
         var first_line = this.code_mirror.getLine(0);
         // loop on every pairs
         for( var mode in modes) {
             var regs = modes[mode]['reg'];
             // only one key every time but regexp can't be keys...
             for(var i=0; i<regs.length; i++) {
                 // here we handle non magic_modes
                 if(first_line.match(regs[i]) != null) {
                     if(current_mode == mode){
                         return;
                     }
                     if (mode.search('magic_') != 0) {
                         this.code_mirror.setOption('mode', mode);
                         CodeMirror.autoLoadMode(this.code_mirror, mode);
                         return;
                     }
                     var open = modes[mode]['open']|| "%%";
                     var close = modes[mode]['close']|| "%%end";
                     var mmode = mode;
                     mode = mmode.substr(6);
                     if(current_mode == mode){
                         return;
                     }
                     CodeMirror.autoLoadMode(this.code_mirror, mode);
                     // create on the fly a mode that swhitch between
                     // plain/text and smth else otherwise `%%` is
                     // source of some highlight issues.
                     // we use patchedGetMode to circumvent a bug in CM
                     CodeMirror.defineMode(mmode , function(config) {
                         return CodeMirror.multiplexingMode(
                         CodeMirror.patchedGetMode(config, 'text/plain'),
                             // always set someting on close
                             {open: open, close: close,
                              mode: CodeMirror.patchedGetMode(config, mode),
                              delimStyle: "delimit"
                             }
                         );
                     });
                     this.code_mirror.setOption('mode', mmode);
                     return;
                 }
             }
         }
         // fallback on default
         var default_mode
         try {
             default_mode = this._options.cm_config.mode;
         } catch(e) {
             default_mode = 'text/plain';
         }
         if( current_mode === default_mode){
             return
         }
         this.code_mirror.setOption('mode', default_mode);
     };
 
     IPython.Cell = Cell;
 
     return IPython;
 
 }(IPython));
 

IPython/html/static/notebook/js/keyboardmanager.js

@@ -1,770 +1,767
 //----------------------------------------------------------------------------
 //  Copyright (C) 2011  The IPython Development Team
 //
 //  Distributed under the terms of the BSD License.  The full license is in
 //  the file COPYING, distributed as part of this software.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // Keyboard management
 //============================================================================
 
 var IPython = (function (IPython) {
     "use strict";
 
     // Setup global keycodes and inverse keycodes.
 
     // See http://unixpapa.com/js/key.html for a complete description. The short of
     // it is that there are different keycode sets. Firefox uses the "Mozilla keycodes"
     // and Webkit/IE use the "IE keycodes". These keycode sets are mostly the same
     // but have minor differences.
 
     // These apply to Firefox, (Webkit and IE)
     var _keycodes = {
         'a': 65, 'b': 66, 'c': 67, 'd': 68, 'e': 69, 'f': 70, 'g': 71, 'h': 72, 'i': 73,
         'j': 74, 'k': 75, 'l': 76, 'm': 77, 'n': 78, 'o': 79, 'p': 80, 'q': 81, 'r': 82,
         's': 83, 't': 84, 'u': 85, 'v': 86, 'w': 87, 'x': 88, 'y': 89, 'z': 90,
         '1 !': 49, '2 @': 50, '3 #': 51, '4 $': 52, '5 %': 53, '6 ^': 54,
         '7 &': 55, '8 *': 56, '9 (': 57, '0 )': 48, 
         '[ {': 219, '] }': 221, '` ~': 192,  ', <': 188, '. >': 190, '/ ?': 191,
         '\\ |': 220, '\' "': 222,
         'numpad0': 96, 'numpad1': 97, 'numpad2': 98, 'numpad3': 99, 'numpad4': 100,
         'numpad5': 101, 'numpad6': 102, 'numpad7': 103, 'numpad8': 104, 'numpad9': 105,
         'multiply': 106, 'add': 107, 'subtract': 109, 'decimal': 110, 'divide': 111,
         'f1': 112, 'f2': 113, 'f3': 114, 'f4': 115, 'f5': 116, 'f6': 117, 'f7': 118,
         'f8': 119, 'f9': 120, 'f11': 122, 'f12': 123, 'f13': 124, 'f14': 125, 'f15': 126,
         'backspace': 8, 'tab': 9, 'enter': 13, 'shift': 16, 'ctrl': 17, 'alt': 18,
         'meta': 91, 'capslock': 20, 'esc': 27, 'space': 32, 'pageup': 33, 'pagedown': 34,
         'end': 35, 'home': 36, 'left': 37, 'up': 38, 'right': 39, 'down': 40,
         'insert': 45, 'delete': 46, 'numlock': 144,
     };
     
     // These apply to Firefox and Opera
     var _mozilla_keycodes = {
         '; :': 59, '= +': 61, '- _': 173, 'meta': 224
     }
     
     // This apply to Webkit and IE
     var _ie_keycodes = {
         '; :': 186, '= +': 187, '- _': 189, 
     }
     
     var browser = IPython.utils.browser[0];
     var platform = IPython.utils.platform;
     
     if (browser === 'Firefox' || browser === 'Opera') {
         $.extend(_keycodes, _mozilla_keycodes);
     } else if (browser === 'Safari' || browser === 'Chrome' || browser === 'MSIE') {
         $.extend(_keycodes, _ie_keycodes);
     }
 
     var keycodes = {};
     var inv_keycodes = {};
     for (var name in _keycodes) {
         var names = name.split(' ');
         if (names.length === 1) {
             var n = names[0]
             keycodes[n] = _keycodes[n]
             inv_keycodes[_keycodes[n]] = n
         } else {
             var primary = names[0];
             var secondary = names[1];
             keycodes[primary] = _keycodes[name]
             keycodes[secondary] = _keycodes[name]
             inv_keycodes[_keycodes[name]] = primary
         }
     }
 
 
     // Default keyboard shortcuts
 
     var default_common_shortcuts = {
         'shift' : {
             help    : '',
             help_index : '',
             handler : function (event) {
                 // ignore shift keydown
                 return true;
             }
         },
         'shift+enter' : {
             help    : 'run cell, select below',
             help_index : 'ba',
             handler : function (event) {
                 IPython.notebook.execute_cell_and_select_below();
                 return false;
             }
         },
         'ctrl+enter' : {
             help    : 'run cell',
             help_index : 'bb',
             handler : function (event) {
                 IPython.notebook.execute_cell();
                 return false;
             }
         },
         'alt+enter' : {
             help    : 'run cell, insert below',
             help_index : 'bc',
             handler : function (event) {
                 IPython.notebook.execute_cell_and_insert_below();
                 return false;
             }
         }
     }
 
     if (platform === 'MacOS') {
         default_common_shortcuts['cmd+s'] =
             {
                 help    : 'save notebook',
                 help_index : 'fb',
                 handler : function (event) {
                     IPython.notebook.save_checkpoint();
                     event.preventDefault();
                     return false;
                 }
             };
     } else {
         default_common_shortcuts['ctrl+s'] =
             {
                 help    : 'save notebook',
                 help_index : 'fb',
                 handler : function (event) {
                     IPython.notebook.save_checkpoint();
                     event.preventDefault();
                     return false;
                 }
             };
     }
 
     // Edit mode defaults
 
     var default_edit_shortcuts = {
         'esc' : {
             help    : 'command mode',
             help_index : 'aa',
             handler : function (event) {
                 IPython.notebook.command_mode();
                 IPython.notebook.focus_cell();
                 return false;
             }
         },
         'ctrl+m' : {
             help    : 'command mode',
             help_index : 'ab',
             handler : function (event) {
                 IPython.notebook.command_mode();
                 IPython.notebook.focus_cell();
                 return false;
             }
         },
         'up' : {
             help    : '',
             help_index : '',
             handler : function (event) {
                 var cell = IPython.notebook.get_selected_cell();
                 if (cell && cell.at_top()) {
                     event.preventDefault();
                     IPython.notebook.command_mode()
                     IPython.notebook.select_prev();
                     IPython.notebook.edit_mode();
                     return false;
                 };
             }
         },
         'down' : {
             help    : '',
             help_index : '',
             handler : function (event) {
                 var cell = IPython.notebook.get_selected_cell();
                 if (cell && cell.at_bottom()) {
                     event.preventDefault();
                     IPython.notebook.command_mode()
                     IPython.notebook.select_next();
                     IPython.notebook.edit_mode();
                     return false;
                 };
             }
         },
         'alt+-' : {
             help    : 'split cell',
             help_index : 'ea',
             handler : function (event) {
                 IPython.notebook.split_cell();
                 return false;
             }
         },
         'alt+subtract' : {
             help    : '',
             help_index : 'eb',
             handler : function (event) {
                 IPython.notebook.split_cell();
                 return false;
             }
         },
         'tab' : {
             help    : 'indent or complete',
             help_index : 'ec',
         },
         'shift+tab' : {
             help    : 'tooltip',
             help_index : 'ed',
         },
     }
 
     if (platform === 'MacOS') {
         default_edit_shortcuts['cmd+/'] =
             {
                 help    : 'toggle comment',
                 help_index : 'ee'
             };
         default_edit_shortcuts['cmd+]'] =
             {
                 help    : 'indent',
                 help_index : 'ef'
             };
         default_edit_shortcuts['cmd+['] =
             {
                 help    : 'dedent',
                 help_index : 'eg'
             };
     } else {
         default_edit_shortcuts['ctrl+/'] =
             {
                 help    : 'toggle comment',
                 help_index : 'ee'
             };
         default_edit_shortcuts['ctrl+]'] =
             {
                 help    : 'indent',
                 help_index : 'ef'
             };
         default_edit_shortcuts['ctrl+['] =
             {
                 help    : 'dedent',
                 help_index : 'eg'
             };
     }
 
     // Command mode defaults
 
     var default_command_shortcuts = {
         'enter' : {
             help    : 'edit mode',
             help_index : 'aa',
             handler : function (event) {
                 IPython.notebook.edit_mode();
                 return false;
             }
         },
         'up' : {
             help    : 'select previous cell',
             help_index : 'da',
             handler : function (event) {
                 var index = IPython.notebook.get_selected_index();
                 if (index !== 0 && index !== null) {
                     IPython.notebook.select_prev();
                     var cell = IPython.notebook.get_selected_cell();
                     cell.focus_cell();
                 };
                 return false;
             }
         },
         'down' : {
             help    : 'select next cell',
             help_index : 'db',
             handler : function (event) {
                 var index = IPython.notebook.get_selected_index();
                 if (index !== (IPython.notebook.ncells()-1) && index !== null) {
                     IPython.notebook.select_next();
                     var cell = IPython.notebook.get_selected_cell();
                     cell.focus_cell();
                 };
                 return false;
             }
         },
         'k' : {
             help    : 'select previous cell',
             help_index : 'dc',
             handler : function (event) {
                 var index = IPython.notebook.get_selected_index();
                 if (index !== 0 && index !== null) {
                     IPython.notebook.select_prev();
                     var cell = IPython.notebook.get_selected_cell();
                     cell.focus_cell();
                 };
                 return false;
             }
         },
         'j' : {
             help    : 'select next cell',
             help_index : 'dd',
             handler : function (event) {
                 var index = IPython.notebook.get_selected_index();
                 if (index !== (IPython.notebook.ncells()-1) && index !== null) {
                     IPython.notebook.select_next();
                     var cell = IPython.notebook.get_selected_cell();
                     cell.focus_cell();
                 };
                 return false;
             }
         },
         'x' : {
             help    : 'cut cell',
             help_index : 'ee',
             handler : function (event) {
                 IPython.notebook.cut_cell();
                 return false;
             }
         },
         'c' : {
             help    : 'copy cell',
             help_index : 'ef',
             handler : function (event) {
                 IPython.notebook.copy_cell();
                 return false;
             }
         },
         'shift+v' : {
             help    : 'paste cell above',
             help_index : 'eg',
             handler : function (event) {
                 IPython.notebook.paste_cell_above();
                 return false;
             }
         },
         'v' : {
             help    : 'paste cell below',
             help_index : 'eh',
             handler : function (event) {
                 IPython.notebook.paste_cell_below();
                 return false;
             }
         },
         'd' : {
             help    : 'delete cell (press twice)',
             help_index : 'ej',
             count: 2,
             handler : function (event) {
                 IPython.notebook.delete_cell();
                 return false;
             }
         },
         'a' : {
             help    : 'insert cell above',
             help_index : 'ec',
             handler : function (event) {
                 IPython.notebook.insert_cell_above('code');
                 IPython.notebook.select_prev();
                 IPython.notebook.focus_cell();
                 return false;
             }
         },
         'b' : {
             help    : 'insert cell below',
             help_index : 'ed',
             handler : function (event) {
                 IPython.notebook.insert_cell_below('code');
                 IPython.notebook.select_next();
                 IPython.notebook.focus_cell();
                 return false;
             }
         },
         'y' : {
             help    : 'to code',
             help_index : 'ca',
             handler : function (event) {
                 IPython.notebook.to_code();
                 return false;
             }
         },
         'm' : {
             help    : 'to markdown',
             help_index : 'cb',
             handler : function (event) {
                 IPython.notebook.to_markdown();
                 return false;
             }
         },
         'r' : {
             help    : 'to raw',
             help_index : 'cc',
             handler : function (event) {
                 IPython.notebook.to_raw();
                 return false;
             }
         },
         '1' : {
             help    : 'to heading 1',
             help_index : 'cd',
             handler : function (event) {
                 IPython.notebook.to_heading(undefined, 1);
                 return false;
             }
         },
         '2' : {
             help    : 'to heading 2',
             help_index : 'ce',
             handler : function (event) {
                 IPython.notebook.to_heading(undefined, 2);
                 return false;
             }
         },
         '3' : {
             help    : 'to heading 3',
             help_index : 'cf',
             handler : function (event) {
                 IPython.notebook.to_heading(undefined, 3);
                 return false;
             }
         },
         '4' : {
             help    : 'to heading 4',
             help_index : 'cg',
             handler : function (event) {
                 IPython.notebook.to_heading(undefined, 4);
                 return false;
             }
         },
         '5' : {
             help    : 'to heading 5',
             help_index : 'ch',
             handler : function (event) {
                 IPython.notebook.to_heading(undefined, 5);
                 return false;
             }
         },
         '6' : {
             help    : 'to heading 6',
             help_index : 'ci',
             handler : function (event) {
                 IPython.notebook.to_heading(undefined, 6);
                 return false;
             }
         },
         'o' : {
             help    : 'toggle output',
             help_index : 'gb',
             handler : function (event) {
                 IPython.notebook.toggle_output();
                 return false;
             }
         },
         'shift+o' : {
             help    : 'toggle output scrolling',
             help_index : 'gc',
             handler : function (event) {
                 IPython.notebook.toggle_output_scroll();
                 return false;
             }
         },
         's' : {
             help    : 'save notebook',
             help_index : 'fa',
             handler : function (event) {
                 IPython.notebook.save_checkpoint();
                 return false;
             }
         },
         'ctrl+j' : {
             help    : 'move cell down',
             help_index : 'eb',
             handler : function (event) {
                 IPython.notebook.move_cell_down();
                 return false;
             }
         },
         'ctrl+k' : {
             help    : 'move cell up',
             help_index : 'ea',
             handler : function (event) {
                 IPython.notebook.move_cell_up();
                 return false;
             }
         },
         'l' : {
             help    : 'toggle line numbers',
             help_index : 'ga',
             handler : function (event) {
                 IPython.notebook.cell_toggle_line_numbers();
                 return false;
             }
         },
         'i' : {
             help    : 'interrupt kernel (press twice)',
             help_index : 'ha',
             count: 2,
             handler : function (event) {
                 IPython.notebook.kernel.interrupt();
                 return false;
             }
         },
         '0' : {
             help    : 'restart kernel (press twice)',
             help_index : 'hb',
             count: 2,
             handler : function (event) {
                 IPython.notebook.restart_kernel();
                 return false;
             }
         },
         'h' : {
             help    : 'keyboard shortcuts',
             help_index : 'gd',
             handler : function (event) {
                 IPython.quick_help.show_keyboard_shortcuts();
                 return false;
             }
         },
         'z' : {
             help    : 'undo last delete',
             help_index : 'ei',
             handler : function (event) {
                 IPython.notebook.undelete_cell();
                 return false;
             }
         },
         'shift+=' : {
             help    : 'merge cell below',
             help_index : 'ek',
             handler : function (event) {
                 IPython.notebook.merge_cell_below();
                 return false;
             }
         },
         'shift+m' : {
             help    : 'merge cell below',
             help_index : 'ek',
             handler : function (event) {
                 IPython.notebook.merge_cell_below();
                 return false;
             }
         },
     }
 
 
     // Shortcut manager class
 
     var ShortcutManager = function (delay) {
         this._shortcuts = {}
         this._counts = {}
         this.delay = delay || 800; // delay in milliseconds
     }
 
     ShortcutManager.prototype.help = function () {
         var help = [];
         for (var shortcut in this._shortcuts) {
             var help_string = this._shortcuts[shortcut]['help'];
             var help_index = this._shortcuts[shortcut]['help_index'];
             if (help_string) {
                 if (platform === 'MacOS') {
                     shortcut = shortcut.replace('meta', 'cmd');
                 }
                 help.push({
                     shortcut: shortcut,
                     help: help_string,
                     help_index: help_index}
                 );
             }
         }
         help.sort(function (a, b) {
             if (a.help_index > b.help_index)
                 return 1;
             if (a.help_index < b.help_index)
                 return -1;
             return 0;
         });
         return help;
     }
 
     ShortcutManager.prototype.normalize_key = function (key) {
         return inv_keycodes[keycodes[key]];
     }
 
     ShortcutManager.prototype.normalize_shortcut = function (shortcut) {
         // Sort a sequence of + separated modifiers into the order alt+ctrl+meta+shift
         shortcut = shortcut.replace('cmd', 'meta').toLowerCase();
         var values = shortcut.split("+");
         if (values.length === 1) {
             return this.normalize_key(values[0])
         } else {
             var modifiers = values.slice(0,-1);
             var key = this.normalize_key(values[values.length-1]);
             modifiers.sort();
             return modifiers.join('+') + '+' + key;
         }
     }
 
     ShortcutManager.prototype.event_to_shortcut = function (event) {
         // Convert a jQuery keyboard event to a strong based keyboard shortcut
         var shortcut = '';
         var key = inv_keycodes[event.which]
         if (event.altKey && key !== 'alt') {shortcut += 'alt+';}
         if (event.ctrlKey && key !== 'ctrl') {shortcut += 'ctrl+';}
         if (event.metaKey && key !== 'meta') {shortcut += 'meta+';}
         if (event.shiftKey && key !== 'shift') {shortcut += 'shift+';}
         shortcut += key;
         return shortcut
     }
 
     ShortcutManager.prototype.clear_shortcuts = function () {
         this._shortcuts = {};
     }
 
     ShortcutManager.prototype.add_shortcut = function (shortcut, data) {
         if (typeof(data) === 'function') {
             data = {help: '', help_index: '', handler: data}
         }
         data.help_index = data.help_index || '';
         data.help = data.help || '';
         data.count = data.count || 1;
         if (data.help_index === '') {
             data.help_index = 'zz';
         }
         shortcut = this.normalize_shortcut(shortcut);
         this._counts[shortcut] = 0;
         this._shortcuts[shortcut] = data;
     }
 
     ShortcutManager.prototype.add_shortcuts = function (data) {
         for (var shortcut in data) {
             this.add_shortcut(shortcut, data[shortcut]);
         }
     }
 
     ShortcutManager.prototype.remove_shortcut = function (shortcut) {
         shortcut = this.normalize_shortcut(shortcut);
         delete this._counts[shortcut];
         delete this._shortcuts[shortcut];
     }
 
     ShortcutManager.prototype.count_handler = function (shortcut, event, data) {
         var that = this;
         var c = this._counts;
         if (c[shortcut] === data.count-1) {
             c[shortcut] = 0;
             return data.handler(event);
         } else {
             c[shortcut] = c[shortcut] + 1;
             setTimeout(function () {
                 c[shortcut] = 0;
             }, that.delay);
         }
         return false;
 
     }
 
     ShortcutManager.prototype.call_handler = function (event) {
         var shortcut = this.event_to_shortcut(event);
         var data = this._shortcuts[shortcut];
         if (data) {
             var handler = data['handler'];
             if (handler) {
                 if (data.count === 1) {
                     return handler(event);
                 } else if (data.count > 1) {
                     return this.count_handler(shortcut, event, data);
                 }
             }
         }
         return true;
     }
 
 
 
     // Main keyboard manager for the notebook
 
     var KeyboardManager = function () {
         this.mode = 'command';
         this.enabled = true;
         this.bind_events();
         this.command_shortcuts = new ShortcutManager();
         this.command_shortcuts.add_shortcuts(default_common_shortcuts);
         this.command_shortcuts.add_shortcuts(default_command_shortcuts);
         this.edit_shortcuts = new ShortcutManager();
         this.edit_shortcuts.add_shortcuts(default_common_shortcuts);
         this.edit_shortcuts.add_shortcuts(default_edit_shortcuts);
     };
 
     KeyboardManager.prototype.bind_events = function () {
         var that = this;
         $(document).keydown(function (event) {
             return that.handle_keydown(event);
         });
     };
 
     KeyboardManager.prototype.handle_keydown = function (event) {
         var notebook = IPython.notebook;
 
         if (event.which === keycodes['esc']) {
             // Intercept escape at highest level to avoid closing
             // websocket connection with firefox
             event.preventDefault();
         }
         
         if (!this.enabled) {
             if (event.which === keycodes['esc']) {
                 // ESC
                 notebook.command_mode();
                 return false;
             }
             return true;
         }
         
         if (this.mode === 'edit') {
             return this.edit_shortcuts.call_handler(event);
         } else if (this.mode === 'command') {
             return this.command_shortcuts.call_handler(event);
         }
         return true;
     }
 
     KeyboardManager.prototype.edit_mode = function () {
         this.last_mode = this.mode;
         this.mode = 'edit';
     }
 
     KeyboardManager.prototype.command_mode = function () {
         this.last_mode = this.mode;
         this.mode = 'command';
     }
 
     KeyboardManager.prototype.enable = function () {
         this.enabled = true;
     }
 
     KeyboardManager.prototype.disable = function () {
         this.enabled = false;
     }
 
     KeyboardManager.prototype.register_events = function (e) {
         var that = this;
         e.on('focusin', function () {
-            that.command_mode();
             that.disable();
         });
         e.on('focusout', function () {
-            that.command_mode();
             that.enable();
         });
         // There are times (raw_input) where we remove the element from the DOM before
         // focusout is called. In this case we bind to the remove event of jQueryUI,
         // which gets triggered upon removal.
         e.on('remove', function () {
-            that.command_mode();
             that.enable();
         });
     }
 
 
     IPython.keycodes = keycodes;
     IPython.inv_keycodes = inv_keycodes;
     IPython.default_common_shortcuts = default_common_shortcuts;
     IPython.default_edit_shortcuts = default_edit_shortcuts;
     IPython.default_command_shortcuts = default_command_shortcuts;
     IPython.ShortcutManager = ShortcutManager;
     IPython.KeyboardManager = KeyboardManager;
 
     return IPython;
 
 }(IPython));

IPython/html/static/notebook/js/widgetmanager.js

@@ -1,210 +1,204
 //----------------------------------------------------------------------------
 //  Copyright (C) 2013  The IPython Development Team
 //
 //  Distributed under the terms of the BSD License.  The full license is in
 //  the file COPYING, distributed as part of this software.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // WidgetModel, WidgetView, and WidgetManager
 //============================================================================
 /**
  * Base Widget classes
  * @module IPython
  * @namespace IPython
  * @submodule widget
  */
 
 (function () {
     "use strict";
 
     // Use require.js 'define' method so that require.js is intelligent enough to
     // syncronously load everything within this file when it is being 'required' 
     // elsewhere.
     define(["underscore",
              "backbone",
             ], function (Underscore, Backbone) {
 
         //--------------------------------------------------------------------
         // WidgetManager class
         //--------------------------------------------------------------------
         var WidgetManager = function (comm_manager) {
             // Public constructor
             WidgetManager._managers.push(this);
 
             // Attach a comm manager to the 
             this.comm_manager = comm_manager;
             this._models = {}; /* Dictionary of model ids and model instances */
 
             // Register already-registered widget model types with the comm manager.
             var that = this;
             _.each(WidgetManager._model_types, function(model_type, model_name) {
                 that.comm_manager.register_target(model_name, $.proxy(that._handle_comm_open, that));
             });
         };
 
         //--------------------------------------------------------------------
         // Class level
         //--------------------------------------------------------------------
         WidgetManager._model_types = {}; /* Dictionary of model type names (target_name) and model types. */
         WidgetManager._view_types = {}; /* Dictionary of view names and view types. */
         WidgetManager._managers = []; /* List of widget managers */
 
         WidgetManager.register_widget_model = function (model_name, model_type) {
             // Registers a widget model by name.
             WidgetManager._model_types[model_name] = model_type;
 
             // Register the widget with the comm manager.  Make sure to pass this object's context
             // in so `this` works in the call back.
             _.each(WidgetManager._managers, function(instance, i) {
                 if (instance.comm_manager !== null) {
                     instance.comm_manager.register_target(model_name, $.proxy(instance._handle_comm_open, instance));
                 }
             });
         };
 
         WidgetManager.register_widget_view = function (view_name, view_type) {
             // Registers a widget view by name.
             WidgetManager._view_types[view_name] = view_type;
         };
 
         //--------------------------------------------------------------------
         // Instance level
         //--------------------------------------------------------------------
         WidgetManager.prototype.display_view = function(msg, model) {
             // Displays a view for a particular model.
             var cell = this.get_msg_cell(msg.parent_header.msg_id);
             if (cell === null) {
                 console.log("Could not determine where the display" + 
                     " message was from.  Widget will not be displayed");
             } else {
                 var view = this.create_view(model, {cell: cell});
                 if (view === null) {
                     console.error("View creation failed", model);
                 }
                 if (cell.widget_subarea) {
-                    
                     cell.widget_area.show();
+                    this._handle_display_view(view);
                     cell.widget_subarea.append(view.$el);
                 }
             }
         };
 
+        WidgetManager.prototype._handle_display_view = function (view) {
+            // Have the IPython keyboard manager disable its event
+            // handling so the widget can capture keyboard input.
+            // Note, this is only done on the outer most widget.
+            IPython.keyboard_manager.register_events(view.$el);
+        };
+
         WidgetManager.prototype.create_view = function(model, options, view) {
             // Creates a view for a particular model.
             var view_name = model.get('_view_name');
             var ViewType = WidgetManager._view_types[view_name];
             if (ViewType) {
 
                 // If a view is passed into the method, use that view's cell as
                 // the cell for the view that is created.
                 options = options || {};
                 if (view !== undefined) {
                     options.cell = view.options.cell;
                 }
 
                 // Create and render the view...
                 var parameters = {model: model, options: options};
                 view = new ViewType(parameters);
                 view.render();
                 model.views.push(view);
                 model.on('destroy', view.remove, view);
-
-                this._handle_new_view(view);
                 return view;
             }
             return null;
         };
 
-        WidgetManager.prototype._handle_new_view = function (view) {
-            // Called when a view has been created and rendered.
-
-            // If the view has a well defined element, inform the keyboard
-            // manager about the view's element, so as the element can
-            // escape the dreaded command mode.
-            if (view.$el) {
-                IPython.keyboard_manager.register_events(view.$el);
-            }
-        };
-
         WidgetManager.prototype.get_msg_cell = function (msg_id) {
             var cell = null;
             // First, check to see if the msg was triggered by cell execution.
             if (IPython.notebook) {
                 cell = IPython.notebook.get_msg_cell(msg_id);
             }
             if (cell !== null) {
                 return cell;
             }
             // Second, check to see if a get_cell callback was defined
             // for the message.  get_cell callbacks are registered for
             // widget messages, so this block is actually checking to see if the
             // message was triggered by a widget.
             var kernel = this.comm_manager.kernel;
             if (kernel) {
                 var callbacks = kernel.get_callbacks_for_msg(msg_id);
                 if (callbacks && callbacks.iopub &&
                     callbacks.iopub.get_cell !== undefined) {
                     return callbacks.iopub.get_cell();
                 }
             }
             
             // Not triggered by a cell or widget (no get_cell callback 
             // exists).
             return null;
         };
 
         WidgetManager.prototype.callbacks = function (view) {
             // callback handlers specific a view
             var callbacks = {};
             if (view && view.options.cell) {
 
                 // Try to get output handlers
                 var cell = view.options.cell;
                 var handle_output = null;
                 var handle_clear_output = null;
                 if (cell.output_area) {
                     handle_output = $.proxy(cell.output_area.handle_output, cell.output_area);
                     handle_clear_output = $.proxy(cell.output_area.handle_clear_output, cell.output_area);
                 }
 
                 // Create callback dict using what is known
                 var that = this;
                 callbacks = {
                     iopub : {
                         output : handle_output,
                         clear_output : handle_clear_output,
 
                         // Special function only registered by widget messages.
                         // Allows us to get the cell for a message so we know
                         // where to add widgets if the code requires it.
                         get_cell : function () {
                             return cell;
                         },
                     },
                 };
             }
             return callbacks;
         };
 
         WidgetManager.prototype.get_model = function (model_id) {
             // Look-up a model instance by its id.
             var model = this._models[model_id];
             if (model !== undefined && model.id == model_id) {
                 return model;
             }
             return null;
         };
 
         WidgetManager.prototype._handle_comm_open = function (comm, msg) {
             // Handle when a comm is opened.
             var model_id = comm.comm_id;
             var widget_type_name = msg.content.target_name;
             var widget_model = new WidgetManager._model_types[widget_type_name](this, model_id, comm);
             this._models[model_id] = widget_model;
         };
         
         IPython.WidgetManager = WidgetManager;
         return IPython.WidgetManager;
     });
 }());