Decoupling the celltoolbar select UI from CellToolbar.

The select menu for celltoolbar presets should live entirely in
the maintoolbar code - it was 1/2 in CellToolbar itself. This
fixes this issue using events and an additional method on
CellToolbar (list_presets).

IPython/frontend/html/notebook/static/js/celltoolbar.js

@@ -46,22 +46,6 var IPython = (function (IPython) {
     };
 
 
-    CellToolbar.dropdown_preset_element = $('<select/>')
-        .addClass('ui-widget ui-widget-content')
-        .attr('id', 'celltoolbar_selector')
-        .append($('<option/>').attr('value', '').text('None'))
-
-
-    CellToolbar.dropdown_preset_element.change(function() {
-        var val = CellToolbar.dropdown_preset_element.val()
-        if(val ==''){
-            CellToolbar.global_hide();
-        } else {
-            CellToolbar.global_show();
-            CellToolbar.activate_preset(val);
-        }
-    })
-
     // The default css style for the outer celltoolbar div
     // (ctb_hideshow) is display: none. We add the ctb_show
     // class to either 1) the body to show all cell's toolbars
@@ -98,6 +82,7 var IPython = (function (IPython) {
      */
     CellToolbar._callback_dict = {};
 
+
     /**
      * Class variable that should contain the reverse order list of the button
      * to add to the toolbar of each cell
@@ -108,6 +93,7 var IPython = (function (IPython) {
      */
     CellToolbar._ui_controls_list = [];
 
+
     /**
      * Class variable that should contains the CellToolbar instances for each
      * cell of the notebook
@@ -119,6 +105,7 var IPython = (function (IPython) {
      */
     CellToolbar._instances =[]
 
+
     /**
      * keep a list of all the availlabel presets for the toolbar
      * @private
@@ -128,6 +115,7 var IPython = (function (IPython) {
      */
     CellToolbar._presets ={}
 
+
     // this is by design not a prototype.
     /**
      * Register a callback to create an UI element in a cell toolbar.
@@ -175,6 +163,7 var IPython = (function (IPython) {
         CellToolbar._callback_dict[name] = callback;
     };
 
+
     /**
      * Register a preset of UI element in a cell toolbar.
      * Not supported Yet.
@@ -196,12 +185,28 var IPython = (function (IPython) {
      *      CellToolbar.register_preset('foo.foo_preset1', ['foo.c1', 'foo.c2', 'foo.c5'])
      *      CellToolbar.register_preset('foo.foo_preset2', ['foo.c4', 'foo.c5'])
      */
-    CellToolbar.register_preset = function(name, preset_list){
+    CellToolbar.register_preset = function(name, preset_list) {
         CellToolbar._presets[name] = preset_list
-        CellToolbar.dropdown_preset_element.append(
-           $('<option/>').attr('value', name).text(name)
-        )
-    }
+        $([IPython.events]).trigger('preset_added.CellToolbar', {name: name});
+    };
+
+
+    /**
+     * List the names of the presets that are currently registered.
+     *
+     * @method list_presets
+     * @static
+     */
+    CellToolbar.list_presets = function() {
+        var keys = [];
+        for (var k in CellToolbar._presets) {
+            keys.push(k);
+        }
+        console.log(keys);
+        return keys;
+    };
+
+
     /**
      * Activate an UI preset from `register_preset`
      *
@@ -226,7 +231,6 var IPython = (function (IPython) {
     }
 
 
-    // this is by design not a prototype.
     /**
      * This should be called on the class and not on a instance as it will trigger
      * rebuild of all the instances.
@@ -260,7 +264,6 var IPython = (function (IPython) {
             this.inner_element.append(local_div)
             cdict[preset[index]](local_div, this.cell)
         }
-
     }
 
 
@@ -268,6 +271,7 var IPython = (function (IPython) {
      */
     CellToolbar.utils = {};
 
+
     /**
      * A utility function to generate bindings between a checkbox and cell/metadata
      * @method utils.checkbox_ui_generator
@@ -324,6 +328,7 var IPython = (function (IPython) {
         }
     }
 
+
     /**
      * A utility function to generate bindings between a dropdown list cell
      * @method utils.select_ui_generator

IPython/frontend/html/notebook/static/js/celltoolbarpresets/default.js

@@ -89,6 +89,6
     example_preset.push('default.rawedit');
 
     CellToolbar.register_preset('Default',example_preset);
-    console.log('Default extension for metadata editting loaded.');
+    console.log('Default extension for metadata editing loaded.');
 
 }(IPython));

IPython/frontend/html/notebook/static/js/maintoolbar.js

@@ -12,14 +12,11
 var IPython = (function (IPython) {
 
     var MainToolBar = function (selector) {
-        this.selector = selector;
         IPython.ToolBar.apply(this, arguments);
         this.construct();
-        this.add_drop_down_list();
+        this.add_celltype_list();
+        this.add_celltoolbar_list();
         this.bind_events();
-        $(this.selector)
-        .append($('<label/>').text('Cell Toolbar:'))
-        .append(IPython.CellToolbar.dropdown_preset_element)
     };
 
     MainToolBar.prototype = new IPython.ToolBar(); 
@@ -120,23 +117,54 var IPython = (function (IPython) {
             ],'run_int');
     };
 
-    MainToolBar.prototype.add_drop_down_list = function () {
-        var select = $(this.selector)
+    MainToolBar.prototype.add_celltype_list = function () {
+        this.element
             .append($('<select/>')
                 .attr('id','cell_type')
                 .addClass('ui-widget ui-widget-content')
-                    .append($('<option/>').attr('value','code').text('Code'))
-                    .append($('<option/>').attr('value','markdown').text('Markdown'))
-                    .append($('<option/>').attr('value','raw').text('Raw Text'))
-                    .append($('<option/>').attr('value','heading1').text('Heading 1'))
-                    .append($('<option/>').attr('value','heading2').text('Heading 2'))
-                    .append($('<option/>').attr('value','heading3').text('Heading 3'))
-                    .append($('<option/>').attr('value','heading4').text('Heading 4'))
-                    .append($('<option/>').attr('value','heading5').text('Heading 5'))
-                    .append($('<option/>').attr('value','heading6').text('Heading 6'))
-                );
+                .append($('<option/>').attr('value','code').text('Code'))
+                .append($('<option/>').attr('value','markdown').text('Markdown'))
+                .append($('<option/>').attr('value','raw').text('Raw Text'))
+                .append($('<option/>').attr('value','heading1').text('Heading 1'))
+                .append($('<option/>').attr('value','heading2').text('Heading 2'))
+                .append($('<option/>').attr('value','heading3').text('Heading 3'))
+                .append($('<option/>').attr('value','heading4').text('Heading 4'))
+                .append($('<option/>').attr('value','heading5').text('Heading 5'))
+                .append($('<option/>').attr('value','heading6').text('Heading 6'))
+            );
     };
 
+
+    MainToolBar.prototype.add_celltoolbar_list = function () {
+        var label = $('<label/>').text('Cell Toolbar:');
+        var select = $('<select/>')
+            .addClass('ui-widget ui-widget-content')
+            .attr('id', 'ctb_select')
+            .append($('<option/>').attr('value', '').text('None'));
+        this.element.append(label).append(select);
+        select.change(function() {
+                var val = $(this).val()
+                if (val =='') {
+                    IPython.CellToolbar.global_hide();
+                } else {
+                    IPython.CellToolbar.global_show();
+                    IPython.CellToolbar.activate_preset(val);
+                }
+            });
+        // Setup the currently registered presets.
+        var presets = IPython.CellToolbar.list_presets();
+        for (var i=0; i<presets.length; i++) {
+            var name = presets[i];
+            select.append($('<option/>').attr('value', name).text(name));
+        }
+        // Setup future preset registrations.
+        $([IPython.events]).on('preset_added.CellToolbar', function (event, data) {
+            var name = data.name;
+            select.append($('<option/>').attr('value', name).text(name));
+        });
+    };
+
+
     MainToolBar.prototype.bind_events = function () {
         var that = this;