Modal UI

IPython/html/static/base/js/dialog.js

@@ -65,13 +65,17 @@ IPython.dialog = (function (IPython) {
                 dialog.remove();
             });
         }
-        if (options.reselect_cell !== false) {
-            dialog.on("hidden", function () {
-                if (IPython.notebook) {
-                    var cell = IPython.notebook.get_selected_cell();
-                    if (cell) cell.select();
-                }
-            });
+        dialog.on("hidden", function () {
+            if (IPython.notebook) {
+                var cell = IPython.notebook.get_selected_cell();
+                if (cell) cell.select();
+                IPython.keyboard_manager.enable();
+                IPython.keyboard_manager.command_mode();
+            }
+        });
+
+        if (IPython.keyboard_manager) {
+            IPython.keyboard_manager.disable();
         }
 
         return dialog.modal(options);

IPython/html/static/base/js/utils.js

@@ -455,6 +455,26 @@ IPython.utils = (function (IPython) {
         return M;
     })();
 
+    var is_or_has = function (a, b) {
+        // Is b a child of a or a itself?
+        return a.has(b).length !==0 || a.is(b);
+    }
+
+    var is_focused = function (e) {
+        // Is element e, or one of its children focused?
+        e = $(e);
+        var target = $(document.activeElement);
+        if (target.length > 0) {
+            if (is_or_has(e, target)) {
+                return true;
+            } else {
+                return false;
+            }
+        } else {
+            return false;
+        }
+    }
+
 
     return {
         regex_split : regex_split,
@@ -475,7 +495,9 @@ IPython.utils = (function (IPython) {
         encode_uri_components : encode_uri_components,
         splitext : splitext,
         always_new : always_new,
-        browser : browser
+        browser : browser,
+        is_or_has : is_or_has,
+        is_focused : is_focused
     };
 
 }(IPython));

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

@@ -39,6 +39,8 @@ var IPython = (function (IPython) {
         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';
@@ -60,6 +62,7 @@ var IPython = (function (IPython) {
         if (this.element !== null) {
             this.element.data("cell", this);
             this.bind_events();
+            this.init_classes();
         }
     };
 
@@ -97,6 +100,26 @@ var IPython = (function (IPython) {
     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.
@@ -108,67 +131,167 @@ var IPython = (function (IPython) {
         var that = this;
         // We trigger events so that Cell doesn't have to depend on Notebook.
         that.element.click(function (event) {
-            if (that.selected === false) {
+            if (!that.selected) {
                 $([IPython.events]).trigger('select.Cell', {'cell':that});
-            }
+            };
         });
         that.element.focusin(function (event) {
-            if (that.selected === false) {
+            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){
+        if (window.MathJax) {
             var cell_math = this.element.get(0);
             MathJax.Hub.Queue(["Typeset", MathJax.Hub, cell_math]);
         }
     };
 
     /**
-     * should be triggerd when cell is selected
+     * handle cell level logic when a cell is selected
      * @method select
+     * @return is the action being taken
      */
     Cell.prototype.select = function () {
-        this.element.addClass('selected');
-        this.selected = true;
+        if (!this.selected) {
+            this.element.addClass('selected');
+            this.element.removeClass('unselected');
+            this.selected = true;
+            return true;
+        } else {
+            return false;
+        }
     };
 
-
     /**
-     * should be triggerd when cell is unselected
+     * handle cell level logic when a cell is unselected
      * @method unselect
+     * @return is the action being taken
      */
     Cell.prototype.unselect = function () {
-        this.element.removeClass('selected');
-        this.selected = false;
+        if (this.selected) {
+            this.element.addClass('unselected');
+            this.element.removeClass('selected');
+            this.selected = false;
+            return true;
+        } else {
+            return false;
+        }
     };
 
     /**
-     * should be overritten by subclass
-     * @method get_text
+     * handle cell level logic when a cell is rendered
+     * @method render
+     * @return is the action being taken
      */
-    Cell.prototype.get_text = function () {
+    Cell.prototype.render = function () {
+        if (!this.rendered) {
+            this.element.addClass('rendered');
+            this.element.removeClass('unrendered');
+            this.rendered = true;
+            return true;
+        } else {
+            return false;
+        }
     };
 
     /**
-     * should be overritten by subclass
-     * @method set_text
-     * @param {string} text
+     * handle cell level logic when a cell is unrendered
+     * @method unrender
+     * @return is the action being taken
      */
-    Cell.prototype.set_text = function (text) {
+    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 () {
+        this.refresh();
+        this.code_mirror.focus();
+    }
+
     /**
      * Refresh codemirror instance
      * @method refresh
@@ -177,20 +300,19 @@ var IPython = (function (IPython) {
         this.code_mirror.refresh();
     };
 
-
     /**
      * should be overritten by subclass
-     * @method  edit
-     **/
-    Cell.prototype.edit = function () {
+     * @method get_text
+     */
+    Cell.prototype.get_text = function () {
     };
 
-
     /**
      * should be overritten by subclass
-     * @method render
-     **/
-    Cell.prototype.render = function () {
+     * @method set_text
+     * @param {string} text
+     */
+    Cell.prototype.set_text = function (text) {
     };
 
     /**