Fixed cell toolbars

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

@@ -4,8 +4,7
 define([
     'base/js/namespace',
     'jquery',
-    'notebook/js/textcell',
-], function(IPython, $, textcell) {
+], function(IPython, $) {
     "use strict";
 
     var CellToolbar = function (options) {
@@ -176,13 +175,13 define([
      *      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, notebook, events) {
         CellToolbar._presets[name] = preset_list;
-        this.events.trigger('preset_added.CellToolbar', {name: name});
+        events.trigger('preset_added.CellToolbar', {name: name});
         // When "register_callback" is called by a custom extension, it may be executed after notebook is loaded.
         // In that case, activate the preset if needed.
-        if (this.notebook && this.notebook.metadata && this.notebook.metadata.celltoolbar === name)
-            this.activate_preset(name);
+        if (notebook && notebook.metadata && notebook.metadata.celltoolbar === name)
+            CellToolbar.activate_preset(name, events);
     };
 
 
@@ -215,7 +214,7 define([
      *
      *      CellToolbar.activate_preset('foo.foo_preset1');
      */
-    CellToolbar.activate_preset = function(preset_name){
+    CellToolbar.activate_preset = function(preset_name, events){
         var preset = CellToolbar._presets[preset_name];
 
         if(preset !== undefined){
@@ -223,8 +222,8 define([
             CellToolbar.rebuild_all();
         }
 
-        if (this.events) {
-            this.events.trigger('preset_activated.CellToolbar', {name: preset_name});
+        if (events) {
+            events.trigger('preset_activated.CellToolbar', {name: preset_name});
         }
     };
 
@@ -279,7 +278,7 define([
         }
 
         // If there are no controls or the cell is a rendered TextCell hide the toolbar.
-        if (!this.ui_controls_list.length || (this.cell instanceof textcell.TextCell && this.cell.rendered)) {
+        if (!this.ui_controls_list.length || (this.cell_type != 'code' && this.cell.rendered)) {
             this.hide();
         } else {
             this.show();

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

@@ -1,31 +1,23
-//----------------------------------------------------------------------------
-//  Copyright (C) 2012  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.
-//----------------------------------------------------------------------------
-
-//============================================================================
-// CellToolbar Default
-//============================================================================
-
-/**
- * Example Use for the CellToolbar library
- */
- // IIFE without asignement, we don't modifiy the IPython namespace
-(function (IPython) {
+// Copyright (c) IPython Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+define([
+    'jquery',
+    'notebook/js/celltoolbar',
+    'base/js/dialog',
+], function($, celltoolbar, dialog) {
     "use strict";
 
-    var CellToolbar = IPython.CellToolbar;
+    var CellToolbar = celltoolbar.CellToolbar;
 
     var raw_edit = function(cell){
-        IPython.dialog.edit_metadata(cell.metadata, function (md) {
+        dialog.edit_metadata(cell.metadata, function (md) {
             cell.metadata = md;
         });
     };
 
     var add_raw_edit_button = function(div, cell) {
-        var button_container = div;
+        var button_container = $(div);
         var button = $('<button/>')
             .addClass("btn btn-default btn-xs")
             .text("Edit Metadata")
@@ -36,11 +28,13
         button_container.append(button);
     };
 
-    CellToolbar.register_callback('default.rawedit', add_raw_edit_button);
-    var example_preset = [];
-    example_preset.push('default.rawedit');
+    var register = function (notebook, events) {
+        CellToolbar.register_callback('default.rawedit', add_raw_edit_button);
+        var example_preset = [];
+        example_preset.push('default.rawedit');
 
-    CellToolbar.register_preset('Edit Metadata', example_preset);
-    console.log('Default extension for cell metadata editing loaded.');
-
-}(IPython));
+        CellToolbar.register_preset('Edit Metadata', example_preset, notebook, events);
+        console.log('Default extension for cell metadata editing loaded.');
+    };
+    return {'register': register};
+});

IPython/html/static/notebook/js/celltoolbarpresets/example.js

@@ -1,28 +1,20
-//----------------------------------------------------------------------------
-//  Copyright (C) 2012  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.
-//----------------------------------------------------------------------------
-
-//============================================================================
-// CellToolbar Example
-//============================================================================
-
-/**
- * Example Use for the CellToolbar library
- * add the following to your custom.js to load
- * Celltoolbar UI for slideshow
- *
- * ```
- * $.getScript('/static/js/celltoolbarpresets/example.js');
- * ```
- */
- // IIFE without asignement, we don't modifiy the IPython namespace
-(function (IPython) {
+// Copyright (c) IPython Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+// Example Use for the CellToolbar library
+// add the following to your custom.js to load
+// Celltoolbar UI for slideshow
+
+// ```
+// $.getScript('/static/js/celltoolbarpresets/example.js');
+// ```
+define([
+    'jquery',
+    'notebook/js/celltoolbar',
+], function($, celltoolbar) {
     "use strict";
 
-    var CellToolbar = IPython.CellToolbar;
+    var CellToolbar = celltoolbar.CellToolbar;
 
     var example_preset = [];
 
@@ -32,32 +24,32
         var fun = function(value){
                 try{
                     if(value){
-                        cell.code_mirror.setOption('readOnly','nocursor')
-                        button.button('option','icons',{primary:'ui-icon-locked'})
+                        cell.code_mirror.setOption('readOnly','nocursor');
+                        button.button('option','icons',{primary:'ui-icon-locked'});
                     } else {
-                        cell.code_mirror.setOption('readOnly',false)
-                        button.button('option','icons',{primary:'ui-icon-unlocked'})
+                        cell.code_mirror.setOption('readOnly',false);
+                        button.button('option','icons',{primary:'ui-icon-unlocked'});
                     }
                 } catch(e){}
 
-        }
-            fun(cell.metadata.ro)
+        };
+            fun(cell.metadata.ro);
             button.click(function(){
                     var v = cell.metadata.ro;
                     var locked = !v;
                     cell.metadata.ro = locked;
-                    fun(locked)
+                    fun(locked);
                     })
                 .css('height','16px')
                 .css('width','35px');
         button_container.append(button);
-    }
+    };
 
     CellToolbar.register_callback('example.lock',simple_button);
     example_preset.push('example.lock');
 
     var toggle_test =  function(div, cell) {
-        var button_container = $(div)
+        var button_container = $(div);
         var button = $('<div/>')
             .button({label:String(cell.metadata.foo)}).
             css('width','65px');
@@ -65,9 +57,9
                     var v = cell.metadata.foo;
                     cell.metadata.foo = !v;
                     button.button("option","label",String(!v));
-                })
+                });
        button_container.append(button);
-    }
+    };
 
     CellToolbar.register_callback('example.toggle',toggle_test);
     example_preset.push('example.toggle');
@@ -76,16 +68,16
          // setter
          function(cell, value){
              // we check that the slideshow namespace exist and create it if needed
-             if (cell.metadata.yn_test == undefined){cell.metadata.yn_test = {}}
+             if (cell.metadata.yn_test === undefined){cell.metadata.yn_test = {};}
              // set the value
-             cell.metadata.yn_test.value = value
+             cell.metadata.yn_test.value = value;
              },
          //geter
          function(cell){ var ns = cell.metadata.yn_test;
              // if the slideshow namespace does not exist return `undefined`
              // (will be interpreted as `false` by checkbox) otherwise
              // return the value
-             return (ns == undefined)? undefined: ns.value
+             return (ns === undefined)? undefined: ns.value;
              }
     );
 
@@ -103,16 +95,16
             // setter
             function(cell,value){
                 // we check that the slideshow namespace exist and create it if needed
-                if (cell.metadata.test == undefined){cell.metadata.test = {}}
+                if (cell.metadata.test === undefined){cell.metadata.test = {};}
                 // set the value
-                cell.metadata.test.slide_type = value
+                cell.metadata.test.slide_type = value;
                 },
             //geter
             function(cell){ var ns = cell.metadata.test;
                 // if the slideshow namespace does not exist return `undefined`
                 // (will be interpreted as `false` by checkbox) otherwise
                 // return the value
-                return (ns == undefined)? undefined: ns.slide_type
+                return (ns === undefined)? undefined: ns.slide_type;
                 });
 
     CellToolbar.register_callback('example.select',select_test);
@@ -120,7 +112,7
 
     var simple_dialog = function(title,text){
         var dlg = $('<div/>').attr('title',title)
-            .append($('<p/>').text(text))
+            .append($('<p/>').text(text));
         $(dlg).dialog({
                 autoOpen: true,
                 height: 300,
@@ -131,24 +123,26
                     $(this).remove();
                 }
         });
-    }
+    };
 
     var add_simple_dialog_button = function(div, cell) {
         var help_text = ["This is the Metadata editting UI.",
                          "It heavily rely on plugin to work ",
                          "and is still under developpement. You shouldn't wait too long before",
                          " seeing some customisable buttons in those toolbar."
-                        ].join('\n')
-        var button_container = $(div)
+                        ].join('\n');
+        var button_container = $(div);
         var button = $('<div/>').button({label:'?'})
-                .click(function(){simple_dialog('help',help_text); return false;})
+                .click(function(){simple_dialog('help',help_text); return false;});
         button_container.append(button);
-    }
-
-    CellToolbar.register_callback('example.help',add_simple_dialog_button)
-    example_preset.push('example.help')
+    };
 
-    CellToolbar.register_preset('Example',example_preset);
-    console.log('Example extension for metadata editing loaded.');
+    var register = function (notebook, events) {
+        CellToolbar.register_callback('example.help',add_simple_dialog_button);
+        example_preset.push('example.help');
 
-}(IPython));
+        CellToolbar.register_preset('Example',example_preset, notebook, events);
+        console.log('Example extension for metadata editing loaded.');
+    };
+    return {'register': register};
+});

IPython/html/static/notebook/js/celltoolbarpresets/rawcell.js

@@ -1,18 +1,15
-//----------------------------------------------------------------------------
-//  Copyright (C) 2012  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.
-//----------------------------------------------------------------------------
+// Copyright (c) IPython Development Team.
+// Distributed under the terms of the Modified BSD License.
 
-//============================================================================
-// CellToolbar Example
-//============================================================================
+define([
+    'jquery',
+    'notebook/js/celltoolbar',
+    'base/js/dialog',
+    'base/js/keyboard',
+], function($, celltoolbar, dialog, keyboard) {
+    "use strict";
 
-(function(IPython) {
-  "use strict";
-
-  var CellToolbar = IPython.CellToolbar;
+  var CellToolbar = celltoolbar.CellToolbar;
   var raw_cell_preset = [];
 
   var select_type = CellToolbar.utils.select_ui_generator([
@@ -39,7 +36,7
                 $('<input/>').attr('type','text').attr('size','25')
                 .val(cell.metadata.raw_mimetype || "-")
             );
-            IPython.dialog.modal({
+            dialog.modal({
                 title: "Raw Cell MIME Type",
                 body: dialog,
                 buttons : {
@@ -57,7 +54,7
                     var that = $(this);
                     // Upon ENTER, click the OK button.
                     that.find('input[type="text"]').keydown(function (event, ui) {
-                        if (event.which === IPython.keyboard.keycodes.enter) {
+                        if (event.which === keyboard.keycodes.enter) {
                             that.find('.btn-primary').first().click();
                             return false;
                         }
@@ -77,11 +74,13
       "Raw NBConvert Format"
   );
 
-  CellToolbar.register_callback('raw_cell.select', select_type, ['raw']);
-
-  raw_cell_preset.push('raw_cell.select');
+  var register = function (notebook, events) {
+    CellToolbar.register_callback('raw_cell.select', select_type, ['raw']);
+    raw_cell_preset.push('raw_cell.select');
 
-  CellToolbar.register_preset('Raw Cell Format', raw_cell_preset);
-  console.log('Raw Cell Format toolbar preset loaded.');
+    CellToolbar.register_preset('Raw Cell Format', raw_cell_preset, notebook, events);
+    console.log('Raw Cell Format toolbar preset loaded.');
+  };
+  return {'register': register};
 
-}(IPython));
+});

IPython/html/static/notebook/js/celltoolbarpresets/slideshow.js

@@ -1,19 +1,14
-//----------------------------------------------------------------------------
-//  Copyright (C) 2012  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.
-//----------------------------------------------------------------------------
+// Copyright (c) IPython Development Team.
+// Distributed under the terms of the Modified BSD License.
 
-//============================================================================
-//CellToolbar Example
-//============================================================================
-
- // IIFE without asignement, we don't modifiy the IPython namespace
-(function (IPython) {
+define([
+    'jquery',
+    'notebook/js/celltoolbar',
+], function($, celltoolbar) {
     "use strict";
 
-    var CellToolbar = IPython.CellToolbar;
+
+    var CellToolbar = celltoolbar.CellToolbar;
     var slideshow_preset = [];
 
     var select_type = CellToolbar.utils.select_ui_generator([
@@ -27,24 +22,25
             // setter
             function(cell, value){
                 // we check that the slideshow namespace exist and create it if needed
-                if (cell.metadata.slideshow == undefined){cell.metadata.slideshow = {}}
+                if (cell.metadata.slideshow === undefined){cell.metadata.slideshow = {};}
                 // set the value
-                cell.metadata.slideshow.slide_type = value
+                cell.metadata.slideshow.slide_type = value;
                 },
             //geter
             function(cell){ var ns = cell.metadata.slideshow;
                 // if the slideshow namespace does not exist return `undefined`
                 // (will be interpreted as `false` by checkbox) otherwise
                 // return the value
-                return (ns == undefined)? undefined: ns.slide_type
+                return (ns === undefined)? undefined: ns.slide_type;
                 },
             "Slide Type");
 
-    CellToolbar.register_callback('slideshow.select',select_type);
-
-    slideshow_preset.push('slideshow.select');
-
-    CellToolbar.register_preset('Slideshow',slideshow_preset);
-    console.log('Slideshow extension for metadata editing loaded.');
+    var register = function (notebook, events) {
+        CellToolbar.register_callback('slideshow.select',select_type);
+        slideshow_preset.push('slideshow.select');
 
-}(IPython));
+        CellToolbar.register_preset('Slideshow',slideshow_preset, notebook, events);
+        console.log('Slideshow extension for metadata editing loaded.');
+    };
+    return {'register': register};
+});

IPython/html/static/notebook/js/codecell.js

@@ -135,7 +135,7 define([
             notebook: this.notebook});
         inner_cell.append(this.celltoolbar.element);
         var input_area = $('<div/>').addClass('input_area');
-        this.code_mirror = CodeMirror(input_area.get(0), this.cm_config);
+        this.code_mirror = new CodeMirror(input_area.get(0), this.cm_config);
         $(this.code_mirror.getInputField()).attr("spellcheck", "false");
         inner_cell.append(input_area);
         input.append(prompt).append(inner_cell);

IPython/html/static/notebook/js/codemirror-ipythongfm.js

@@ -8,7 +8,6
 
 CodeMirror.requireMode('gfm', function(){ 
     CodeMirror.requireMode('stex', function(){ 
-        console.log('defining custom mode...');
         CodeMirror.defineMode("ipythongfm", function(config, parserConfig) {
             
             var gfm_mode = CodeMirror.getMode(config, "gfm");

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

@@ -158,6 +158,7 define([
             .addClass('form-control select-xs')
             .append($('<option/>').attr('value', '').text('None'));
         this.element.append(label).append(select);
+        var that = this;
         select.change(function() {
                 var val = $(this).val();
                 if (val ==='') {
@@ -165,7 +166,7 define([
                     delete that.notebook.metadata.celltoolbar;
                 } else {
                     celltoolbar.CellToolbar.global_show();
-                    celltoolbar.CellToolbar.activate_preset(val);
+                    celltoolbar.CellToolbar.activate_preset(val, that.events);
                     that.notebook.metadata.celltoolbar = val;
                 }
             });

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

@@ -14,6 +14,9 define([
     'notebook/js/mathjaxutils',
     'base/js/keyboard',
     'notebook/js/tooltip',
+    'notebook/js/celltoolbarpresets/default',
+    'notebook/js/celltoolbarpresets/rawcell',
+    'notebook/js/celltoolbarpresets/slideshow',
 ], function (
     IPython, 
     $, 
@@ -26,7 +29,10 define([
     marked,
     mathjaxutils,
     keyboard,
-    tooltip
+    tooltip,
+    default_celltoolbar,
+    rawcell_celltoolbar,
+    slideshow_celltoolbar
     ) {
 
     var Notebook = function (selector, options) {
@@ -115,6 +121,11 define([
         this.save_notebook = function() { // don't allow save until notebook_loaded
             this.save_notebook_error(null, null, "Load failed, save is disabled");
         };
+
+        // Trigger cell toolbar registration.
+        default_celltoolbar.register(this, options.events);
+        rawcell_celltoolbar.register(this, options.events);
+        slideshow_celltoolbar.register(this, options.events);
     };
 
     /**
@@ -2201,7 +2212,7 define([
         // load toolbar state
         if (this.metadata.celltoolbar) {
             celltoolbar.CellToolbar.global_show();
-            celltoolbar.CellToolbar.activate_preset(this.metadata.celltoolbar);
+            celltoolbar.CellToolbar.activate_preset(this.metadata.celltoolbar, this.events);
         } else {
             celltoolbar.CellToolbar.global_hide();
         }