Merge pull request #2333 from Carreau/metaui

UI For Metadata

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

@@ -0,0 +1,53 b''
+/*Css for the metadata edit area*/
+
+.celltoolbar{
+    border:thin solid #DDD;
+    margin-left:81px;
+    border-bottom:none;
+    background : #EEE;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    display:none;
+}
+
+.code_cell .celltoolbar{
+    margin-left:81px;
+}
+
+.text_cell .celltoolbar{
+    margin-left:0px;
+}
+
+.celltoolbar-on div.input_area , .celltoolbar-on div.text_cell_input{
+    border-top-right-radius: 0px;
+    border-top-left-radius: 0px;
+}
+
+.celltoolbar-on .celltoolbar {
+    display:block;
+}
+
+.celltoolbar ui-button {
+    border :none;
+}
+
+.button_container {
+ float:right;
+}
+
+.button_container .ui-state-default, .button_container .ui-state-hover, .button_container .ui-state-hover span{
+    border-radius : 0 0 0 0;
+    border : none;
+}
+
+.celltoolbar select {
+    margin:10px;
+    margin-top:0px;
+    margin-bottom:0px;
+}
+
+.celltoolbar input[type=checkbox] {
+    margin-bottom:1px;
+
+}
+

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

@@ -0,0 +1,358 b''
+//----------------------------------------------------------------------------
+//  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
+//============================================================================
+
+
+/**
+ * A Module to control the per-cell toolbar.
+ * @module IPython
+ * @namespace IPython
+ * @submodule CellToolbar
+ */
+var IPython = (function (IPython) {
+    "use strict";
+
+
+    /**
+     * @constructor
+     * @class CellToolbar
+     * @param {The cell to attach the metadata UI to} cell
+     */
+    var CellToolbar = function (cell) {
+        CellToolbar._instances.push(this);
+        this.inner_element = $('<div/>');
+        this.cell = cell;
+        this.element = $('<div/>').addClass('celltoolbar')
+                .append(this.inner_element)
+        this.rebuild();
+        return this;
+    };
+
+    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 ==''){
+            $('body').removeClass('celltoolbar-on')
+        } else {
+            $('body').addClass('celltoolbar-on')
+            CellToolbar.activate_preset(val)
+        }
+    })
+
+
+
+    /**
+     * Class variable that should contain a dict of all availlable callback
+     * we need to think of wether or not we allow nested namespace
+     * @property _callback_dict
+     * @private
+     * @static
+     * @type Dict
+     */
+    CellToolbar._callback_dict = {};
+
+    /**
+     * Class variable that should contain the reverse order list of the button
+     * to add to the toolbar of each cell
+     * @property _ui_controls_list
+     * @private
+     * @static
+     * @type List
+     */
+    CellToolbar._ui_controls_list = [];
+
+    /**
+     * Class variable that should contains the CellToolbar instances for each
+     * cell of the notebook
+     *
+     * @private
+     * @property _instances
+     * @static
+     * @type List
+     */
+    CellToolbar._instances =[]
+
+    /**
+     * keep a list of all the availlabel presets for the toolbar
+     * @private
+     * @property _presets
+     * @static
+     * @type Dict
+     */
+    CellToolbar._presets ={}
+
+    // this is by design not a prototype.
+    /**
+     * Register a callback to create an UI element in a cell toolbar.
+     * @method register_callback
+     * @param name {String} name to use to refer to the callback. It is advised to use a prefix with the name
+     * for easier sorting and avoid collision
+     * @param  callback {function(div, cell)} callback that will be called to generate the ui element
+     *
+     *
+     * The callback will receive the following element :
+     *
+     *    * a div in which to add element.
+     *    * the cell it is responsible from
+     *
+     * @example
+     *
+     * Example that create callback for a button that toggle between `true` and `false` label,
+     * with the metadata under the key 'foo' to reflect the status of the button.
+     *
+     *      // first param reference to a DOM div
+     *      // second param reference to the cell.
+     *      var toggle =  function(div, cell) {
+     *          var button_container = $(div)
+     *
+     *          // let's create a button that show the  current value of the metadata
+     *          var button = $('<div/>').button({label:String(cell.metadata.foo)});
+     *
+     *          // On click, change the metadata value and update the button label
+     *          button.click(function(){
+     *                      var v = cell.metadata.foo;
+     *                      cell.metadata.foo = !v;
+     *                      button.button("option", "label", String(!v));
+     *                  })
+     *
+     *          // add the button to the DOM div.
+     *          button_container.append(button);
+     *      }
+     *
+     *      // now we register the callback under the name `foo` to give the
+     *      // user the ability to use it later
+     *      CellToolbar.register_callback('foo', toggle);
+     */
+    CellToolbar.register_callback = function(name, callback){
+        // Overwrite if it already exists.
+        CellToolbar._callback_dict[name] = callback;
+    };
+
+    /**
+     * Register a preset of UI element in a cell toolbar.
+     * Not supported Yet.
+     * @method register_preset
+     * @param name {String} name to use to refer to the preset. It is advised to use a prefix with the name
+     * for easier sorting and avoid collision
+     * @param  preset_list {List of String} reverse order of the button in the toolbar. Each String of the list
+     *          should correspond to a name of a registerd callback.
+     *
+     * @private
+     * @example
+     *
+     *      CellToolbar.register_callback('foo.c1', function(div, cell){...});
+     *      CellToolbar.register_callback('foo.c2', function(div, cell){...});
+     *      CellToolbar.register_callback('foo.c3', function(div, cell){...});
+     *      CellToolbar.register_callback('foo.c4', function(div, cell){...});
+     *      CellToolbar.register_callback('foo.c5', function(div, cell){...});
+     *
+     *      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._presets[name] = preset_list
+        CellToolbar.dropdown_preset_element.append(
+           $('<option/>').attr('value', name).text(name)
+        )
+    }
+    /**
+     * Activate an UI preset from `register_preset`
+     *
+     * This does not update the selection UI.
+     *
+     * @method activate_preset
+     * @param preset_name {String} string corresponding to the preset name
+     *
+     * @static
+     * @private
+     * @example
+     *
+     *      CellToolbar.activate_preset('foo.foo_preset1');
+     */
+    CellToolbar.activate_preset= function(preset_name){
+        var preset = CellToolbar._presets[preset_name];
+
+        if(preset != undefined){
+            CellToolbar._ui_controls_list = preset;
+            CellToolbar.rebuild_all();
+        }
+    }
+
+
+    // 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.
+     * @method rebuild_all
+     * @static
+     *
+     */
+    CellToolbar.rebuild_all = function(){
+        for(var i in CellToolbar._instances){
+            CellToolbar._instances[i].rebuild();
+        }
+    }
+
+    /**
+     * Rebuild all the button on the toolbar to update it's state.
+     * @method rebuild
+     */
+    CellToolbar.prototype.rebuild = function(){
+        // strip evrything from the div
+        // which is probabli metainner.
+        // or this.element.
+        this.inner_element.empty();
+
+        var cdict = CellToolbar._callback_dict;
+        var preset = CellToolbar._ui_controls_list;
+        // Yes we iterate on the class varaible, not the instance one.
+        for ( var index in CellToolbar._ui_controls_list){
+            var local_div = $('<div/>').addClass('button_container');
+            // Note,
+            // do this the other way, wrap in try/catch and don't append if any errors.
+            this.inner_element.append(local_div)
+            cdict[preset[index]](local_div, this.cell)
+        }
+
+    }
+
+
+    /**
+     */
+    CellToolbar.utils = {};
+
+    /**
+     * A utility function to generate bindings between a checkbox and cell/metadata
+     * @method utils.checkbox_ui_generator
+     * @static
+     *
+     * @param name {string} Label in front of the checkbox
+     * @param setter {function( cell, newValue )}
+     *        A setter method to set the newValue
+     * @param getter {function( cell )}
+     *        A getter methods which return the current value.
+     *
+     * @return callback {function( div, cell )} Callback to be passed to `register_callback`
+     *
+     * @example
+     *
+     * An exmple that bind the subkey `slideshow.isSectionStart` to a checkbox with a `New Slide` label
+     *
+     *     var newSlide = CellToolbar.utils.checkbox_ui_generator('New Slide',
+     *          // setter
+     *          function(cell, value){
+     *              // we check that the slideshow namespace exist and create it if needed
+     *              if (cell.metadata.slideshow == undefined){cell.metadata.slideshow = {}}
+     *              // set the value
+     *              cell.metadata.slideshow.isSectionStart = 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.isSectionStart
+     *              }
+     *      );
+     *
+     *      CellToolbar.register_callback('newSlide', newSlide);
+     *
+     */
+    CellToolbar.utils.checkbox_ui_generator = function(name, setter, getter){
+         return function(div, cell) {
+            var button_container = $(div)
+
+            var chkb = $('<input/>').attr('type', 'checkbox');
+            var lbl = $('<label/>').append($('<span/>').text(name).css('font-size', '77%'));
+            lbl.append(chkb);
+            chkb.attr("checked", getter(cell));
+
+            chkb.click(function(){
+                        var v = getter(cell);
+                        setter(cell, !v);
+                        chkb.attr("checked", !v);
+                    })
+           button_container.append($('<div/>').append(lbl));
+
+        }
+    }
+
+    /**
+     * A utility function to generate bindings between a dropdown list cell
+     * @method utils.select_ui_generator
+     * @static
+     *
+     * @param list_list {list of sublist} List of sublist of metadata value and name in the dropdown list.
+     *        subslit shoud contain 2 element each, first a string that woul be displayed in the dropdown list,
+     *        and second the corresponding value to  be passed to setter/return by getter.
+     * @param setter {function( cell, newValue )}
+     *        A setter method to set the newValue
+     * @param getter {function( cell )}
+     *        A getter methods which return the current value of the metadata.
+     * @param [label=""] {String} optionnal label for the dropdown menu
+     *
+     * @return callback {function( div, cell )} Callback to be passed to `register_callback`
+     *
+     * @example
+     *
+     *      var select_type = CellToolbar.utils.select_ui_generator([
+     *              ["<None>"            , undefined      ],
+     *              ["Header Slide" , "header_slide" ],
+     *              ["Slide"        , "slide"        ],
+     *              ["Fragment"     , "fragment"     ],
+     *              ["Skip"         , "skip"         ],
+     *              ],
+     *              // setter
+     *              function(cell, value){
+     *                  // we check that the slideshow namespace exist and create it if needed
+     *                  if (cell.metadata.slideshow == undefined){cell.metadata.slideshow = {}}
+     *                  // set the 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
+     *                  }
+     *      CellToolbar.register_callback('slideshow.select', select_type);
+     *
+     */
+    CellToolbar.utils.select_ui_generator = function(list_list, setter, getter, label){
+        label= label? label: "";
+        return function(div, cell) {
+            var button_container = $(div)
+            var lbl = $("<label/>").append($('<span/>').text(label).css('font-size', '77%'));
+            var select = $('<select/>');
+            for(var itemn in list_list){
+                var opt = $('<option/>');
+                        opt.attr('value', list_list[itemn][1])
+                        opt.text(list_list[itemn][0])
+                select.append(opt);
+            }
+            select.val(getter(cell));
+            select.change(function(){
+                        setter(cell, select.val());
+                    });
+            button_container.append($('<div/>').append(lbl).append(select));
+
+        }
+    };
+
+
+    IPython.CellToolbar = CellToolbar;
+
+    return IPython;
+}(IPython));

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

@@ -0,0 +1,94 b''
+//----------------------------------------------------------------------------
+//  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) {
+    "use strict";
+
+    var CellToolbar = IPython.CellToolbar;
+
+    var raw_edit = function(cell){
+
+        var md = cell.metadata
+        var error_div = $('<div/>').css('color','red')
+
+        var textarea = $('<textarea/>')
+            .attr('rows','13')
+            .attr('cols','75')
+            .attr('name','metadata')
+            .text(JSON.stringify(md, null,4)||'');
+        var dialogform = $('<div/>').attr('title','Edit the metadata')
+            .append(
+                $('<form/>').append(
+                    $('<fieldset/>').append(
+                        $('<label/>')
+                        .attr('for','metadata')
+                        .text("Manually edit the JSON below to manipulate the metadata for this cell. This assumes you know what you are doing and won't complain if it breaks your notebook. We also recommend putting your metadata attributes in an appropriately named sub-structure, so they don't conflict with those of others.")
+                        )
+                        .append(error_div)
+                        .append($('<br/>'))
+                        .append(
+                            textarea
+                        )
+                    )
+            );
+        var editor = CodeMirror.fromTextArea(textarea[0], {
+            lineNumbers: true,
+            matchBrackets: true,
+        });
+        $(dialogform).dialog({
+                autoOpen: true,
+                height: 300,
+                width: 650,
+                modal: true,
+                buttons: {
+                    "Ok": function() {
+                        //validate json and set it
+                        try {
+                           var json = JSON.parse(editor.getValue());
+                           cell.metadata = json;
+                           $( this ).dialog( "close" );
+                        }
+                        catch(e)
+                        {
+                           error_div.text('Warning, invalid json, not saved');
+                        }
+                    },
+                    Cancel: function() {
+                        $( this ).dialog( "close" );
+                    }
+                },
+                close: function() {
+                    //cleanup on close
+                    $(this).remove();
+                }
+        });
+        editor.refresh();
+    }
+
+    var add_raw_edit_button = function(div, cell) {
+        var button_container = div
+        var button = $('<div/>').button({label:'Raw Edit'})
+                .click(function(){raw_edit(cell); return false;})
+        button_container.append(button);
+    }
+
+    CellToolbar.register_callback('default.rawedit',add_raw_edit_button);
+    var example_preset = []
+    example_preset.push('default.rawedit');
+
+    CellToolbar.register_preset('Default',example_preset);
+    console.log('Default extension for metadata editting loaded.');
+
+}(IPython));

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

@@ -0,0 +1,154 b''
+//----------------------------------------------------------------------------
+//  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) {
+    "use strict";
+
+    var CellToolbar = IPython.CellToolbar;
+
+    var example_preset = [];
+
+    var simple_button = function(div, cell) {
+        var button_container = $(div);
+        var button = $('<div/>').button({icons:{primary:'ui-icon-locked'}});
+        var fun = function(value){
+                try{
+                    if(value){
+                        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'})
+                    }
+                } catch(e){}
+
+        }
+            fun(cell.metadata.ro)
+            button.click(function(){
+                    var v = cell.metadata.ro;
+                    var locked = !v;
+                    cell.metadata.ro = 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 = $('<div/>')
+            .button({label:String(cell.metadata.foo)}).
+            css('width','65px');
+        button.click(function(){
+                    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');
+
+    var checkbox_test = CellToolbar.utils.checkbox_ui_generator('Yes/No',
+         // 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 = {}}
+             // set the 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
+             }
+    );
+
+
+    CellToolbar.register_callback('example.checkbox',checkbox_test);
+    example_preset.push('example.checkbox');
+
+    var select_test = CellToolbar.utils.select_ui_generator([
+            ["-"            ,undefined      ],
+            ["Header Slide" ,"header_slide" ],
+            ["Slide"        ,"slide"        ],
+            ["Fragment"     ,"fragment"     ],
+            ["Skip"         ,"skip"         ],
+            ],
+            // setter
+            function(cell,value){
+                // we check that the slideshow namespace exist and create it if needed
+                if (cell.metadata.test == undefined){cell.metadata.test = {}}
+                // set the 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
+                });
+
+    CellToolbar.register_callback('example.select',select_test);
+    example_preset.push('example.select');
+
+    var simple_dialog = function(title,text){
+        var dlg = $('<div/>').attr('title',title)
+            .append($('<p/>').text(text))
+        $(dlg).dialog({
+                autoOpen: true,
+                height: 300,
+                width: 650,
+                modal: true,
+                close: function() {
+                    //cleanup on close
+                    $(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)
+        var button = $('<div/>').button({label:'?'})
+                .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 editting loaded.');
+
+}(IPython));

IPython/frontend/html/notebook/static/css/notebook.css

@@ -1,414 +1,418 b''
 /**
  * Primary styles
  *
  * Author: IPython Development Team
  */
 
 
 body {
     overflow: hidden;
 }
 
 blockquote {
     border-left: 4px solid #DDD;
     padding: 0 15px;
     color: #777;
 }
 
 span#save_widget {
     padding: 5px;
     margin: 0px 0px 0px 300px;
     display:inline-block;
 }
 
 span#notebook_name {
     height: 1em;
     line-height: 1em;
     padding: 3px;
     border: none;
     font-size: 146.5%;
 }
 
+
 .ui-menubar-item .ui-button .ui-button-text {
     padding: 0.4em 1.0em;
     font-size: 100%;
 }
 
 .ui-menu {
   -moz-box-shadow:    0px 6px 10px -1px #adadad;
   -webkit-box-shadow: 0px 6px 10px -1px #adadad;
   box-shadow:         0px 6px 10px -1px #adadad;
 }
 
 .ui-menu .ui-menu-item a {
     border: 1px solid transparent;
     padding: 2px 1.6em;
 }
 
 .ui-menu .ui-menu-item a.ui-state-focus {
     margin: 0;
 }
 
 .ui-menu hr {
     margin: 0.3em 0;
 }
 
 #menubar_container {
     position: relative;
 }
 
 #notification_area {
     position: absolute;
     right: 0px;
     top: 0px;
     height: 25px;
     padding: 3px 0px;
     padding-right: 3px;
     z-index: 10;
 }
 
 .notification_widget{
     float : right;
     right: 0px;
     top: 1px;
     height: 25px;
     padding: 3px 6px;
     z-index: 10;
 }
 
 .toolbar {
     padding: 3px 15px;
 }
 
-#cell_type {
+#maintoolbar > select, #maintoolbar label {
     font-size: 85%;
+    margin-left:0.3em;
+    margin-right:0.3em;
+
 }
 
 
 div#main_app {
     width: 100%;
     position: relative;
 }
 
 span#quick_help_area {
     position: static;
     padding: 5px 0px;
     margin: 0px 0px 0px 0px;
 }
 
 .help_string {
     float: right;
     width: 170px;
     padding: 0px 5px;
     text-align: left;
     font-size: 85%;
 }
 
 .help_string_label {
     float: right;
     font-size: 85%;
 }
 
 div#notebook_panel {
     margin: 0px 0px 0px 0px;
     padding: 0px;
 }
 
 div#notebook {
     overflow-y: scroll;
     overflow-x: auto;
     width: 100%;
     /* This spaces the cell away from the edge of the notebook area */
     padding: 5px 5px 15px 5px;
     margin: 0px;
     background-color: white;
 }
 
 div#pager_splitter {
     height: 8px;
 }
 
 #pager_container {
     position : relative;
 }
 
 div#pager {
     padding: 15px;
     overflow: auto;
     display: none;
 }
 
 div.ui-widget-content {
     border: 1px solid #aaa;
     outline: none;
 }
 
 .cell {
     border: 1px solid transparent;
 }
 
 div.cell {
     width: 100%;
     padding: 5px 5px 5px 0px;
     /* This acts as a spacer between cells, that is outside the border */
     margin: 2px 0px 2px 0px;
 }
 
 div.code_cell {
     background-color: white;
 }
 
 /* any special styling for code cells that are currently running goes here */
 div.code_cell.running {
 }
 
 div.prompt {
     /* This needs to be wide enough for 3 digit prompt numbers: In[100]: */
     width: 11ex;
     /* This 0.4em is tuned to match the padding on the CodeMirror editor. */
     padding: 0.4em;
     margin: 0px;
     font-family: monospace;
     text-align:right;
 }
 
 div.input {
     page-break-inside: avoid;
 }
 
 /* input_area and input_prompt must match in top border and margin for alignment */
 div.input_area {
     color: black;
     border: 1px solid #ddd;
     border-radius: 3px;
     background: #f7f7f7;
 }
 
 div.input_prompt {
     color: navy;
     border-top: 1px solid transparent;
 }
 
 div.output_wrapper {
     /* This is a spacer between the input and output of each cell */
     margin-top: 5px;
     margin-left: 5px;
     /* FF needs explicit width to stretch */
     width: 100%;
     /* this position must be relative to enable descendents to be absolute within it */
     position: relative;
 }
 
 /* class for the output area when it should be height-limited */
 div.output_scroll {
   /* ideally, this would be max-height, but FF barfs all over that */
   height: 24em;
   /* FF needs this *and the wrapper* to specify full width, or it will shrinkwrap */
   width: 100%;
   
   overflow: auto;
   border-radius: 3px;
   box-shadow: inset 0 2px 8px rgba(0, 0, 0, .8);
 }
 
 /* output div while it is collapsed */
 div.output_collapsed {
   margin-right: 5px;
 }
 
 div.out_prompt_overlay {
   height: 100%;
   padding: 0px;
   position: absolute;
   border-radius: 3px;
 }
 
 div.out_prompt_overlay:hover {
   /* use inner shadow to get border that is computed the same on WebKit/FF */
   box-shadow: inset 0 0 1px #000;
   background: rgba(240, 240, 240, 0.5);
 }
 
 div.output_prompt {
     color: darkred;
     /* 5px right shift to account for margin in parent container */
     margin: 0 5px 0 -5px;
 }
 
 /* This class is the outer container of all output sections. */
 div.output_area {
     padding: 0px;
     page-break-inside: avoid;
 }
 
 /* This class is for the output subarea inside the output_area and after
    the prompt div. */
 div.output_subarea {
     padding: 0.44em 0.4em 0.4em 1px;
 }
 
 /* The rest of the output_* classes are for special styling of the different
    output types */
 
 /* all text output has this class: */
 div.output_text {
     text-align: left;
     color: black;
     font-family: monospace;
 }
 
 /* stdout/stderr are 'text' as well as 'stream', but pyout/pyerr are *not* streams */
 div.output_stream {
     padding-top: 0.0em;
     padding-bottom: 0.0em;
 }
 div.output_stdout {
 }
 div.output_stderr {
     background: #fdd; /* very light red background for stderr */
 }
 
 div.output_latex {
     text-align: left;
     color: black;
 }
 
 div.output_html {
 }
 
 div.output_png {
 }
 
 div.output_jpeg {
 }
 
 div.text_cell {
     background-color: white;
     padding: 5px 5px 5px 5px;
 }
 
 div.text_cell_input {
     color: black;
     border: 1px solid #ddd;
     border-radius: 3px;
     background: #f7f7f7;
 }
 
 div.text_cell_render {
     font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
     outline: none;
     resize: none;
     width:  inherit;
     border-style: none;
     padding: 5px;
     color: black;
 }
 
 /* The following gets added to the <head> if it is detected that the user has a
  * monospace font with inconsistent normal/bold/italic height.  See
  * notebookmain.js.  Such fonts will have keywords vertically offset with
  * respect to the rest of the text.  The user should select a better font. 
  * See: https://github.com/ipython/ipython/issues/1503
  *
  * .CodeMirror span {
  *      vertical-align: bottom;
  * }
  */
 
 .CodeMirror {
     line-height: 1.231;  /* Changed from 1em to our global default */
 }
 
 .CodeMirror-scroll {
     height: auto;     /* Changed to auto to autogrow */
     /*  The CodeMirror docs are a bit fuzzy on if overflow-y should be hidden or visible.*/
     /*  We have found that if it is visible, vertical scrollbars appear with font size changes.*/
     overflow-y: hidden;
     overflow-x: auto; /* Changed from auto to remove scrollbar */
 }
 
 /* CSS font colors for translated ANSI colors. */
 
 
 .ansiblack {color: black;}
 .ansired {color: darkred;}
 .ansigreen {color: darkgreen;}
 .ansiyellow {color: brown;}
 .ansiblue {color: darkblue;}
 .ansipurple {color: darkviolet;}
 .ansicyan {color: steelblue;}
 .ansigrey {color: grey;}
 .ansibold {font-weight: bold;}
 
 .completions {
     position: absolute;
     z-index: 10;
     overflow: hidden;
     border: 1px solid grey;
 }
 
 .completions select {
     background: white;
     outline: none;
     border: none;
     padding: 0px;
     margin: 0px;
     overflow: auto;
     font-family: monospace;
 }
 
 option.context {
   background-color: #DEF7FF;
 }
 option.introspection {
   background-color: #EBF4EB;
 }
 
 /*fixed part of the completion*/
 .completions p b {
     font-weight:bold;
 }
 
 .completions p {
     background: #DDF;
     /*outline: none;
     padding: 0px;*/
     border-bottom: black solid 1px;
     padding: 1px;
     font-family: monospace;
 }
 
 pre.dialog {
     background-color: #f7f7f7;
     border: 1px solid #ddd;
     border-radius: 3px;
     padding: 0.4em;
     padding-left: 2em;
 }
 
 p.dialog {
     padding : 0.2em;
 }
 
 .shortcut_key {
     display: inline-block;
     width: 15ex;
     text-align: right;
     font-family: monospace;
 }
 
 .shortcut_descr {
 }
 
 /* Word-wrap output correctly.  This is the CSS3 spelling, though Firefox seems
    to not honor it correctly.  Webkit browsers (Chrome, rekonq, Safari) do.
  */
 pre, code, kbd, samp { white-space: pre-wrap; }
 
 #fonttest {
     font-family: monospace;
 }
 
 .js-error {
     color: darkred;
 }

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

@@ -1,312 +1,315 b''
 //----------------------------------------------------------------------------
 //  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) {
 
     var utils = IPython.utils;
 
     /**
      * The Base `Cell` class from which to inherit
      * @class Cell
      */
 
     /*
      * @constructor
      */
     var Cell = function () {
         this.placeholder = this.placeholder || '';
         this.read_only = false;
         this.selected = false;
         this.element = null;
         this.metadata = {};
         // load this from metadata later ?
         this.user_highlight = 'auto';
         this.create_element();
         if (this.element !== null) {
             this.element.data("cell", this);
             this.bind_events();
         }
         this.cell_id = utils.uuid();
     };
 
 
     /**
      * 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.create_element = function () {
+        this.celltoolbar = new IPython.CellToolbar(this);
+    };
 
 
     /**
      * 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 === false) {
                 $([IPython.events]).trigger('select.Cell', {'cell':that});
             }
         });
         that.element.focusin(function (event) {
             if (that.selected === false) {
                 $([IPython.events]).trigger('select.Cell', {'cell':that});
             }
         });
     };
 
     /**
      * 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]);
         }
     };
 
     /**
      * should be triggerd when cell is selected
      * @method select
      */
     Cell.prototype.select = function () {
         this.element.addClass('ui-widget-content ui-corner-all');
         this.selected = true;
     };
 
 
     /**
      * should be triggerd when cell is unselected
      * @method unselect
      */
     Cell.prototype.unselect = function () {
         this.element.removeClass('ui-widget-content ui-corner-all');
         this.selected = false;
     };
 
     /**
      * 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) {
     };
 
     /**
      * Refresh codemirror instance
      * @method refresh
      */
     Cell.prototype.refresh = function () {
         this.code_mirror.refresh();
     };
 
 
     /**
      * should be overritten by subclass
      * @method  edit
      **/
     Cell.prototype.edit = function () {
     };
 
 
     /**
      * should be overritten by subclass
      * @method render
      **/
     Cell.prototype.render = function () {
     };
 
     /**
      * should be overritten by subclass
      * serialise cell to json.
      * @method toJSON
      **/
     Cell.prototype.toJSON = function () {
         var data = {};
         data.metadata = this.metadata;
         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 splitted in 2 cells.
      * @method is_splittable
      **/
     Cell.prototype.is_splittable = 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;
     };
 
 
     /** Grow the cell by hand. This is used upon reloading from JSON, when the
      *  autogrow handler is not called.
      *
      *  could be made static
      *
      *  @param {Dom element} - element
      *  @method grow
      **/
     Cell.prototype.grow = function(element) {
         var dom = element.get(0);
         var lines_count = 0;
         // modified split rule from
         // http://stackoverflow.com/questions/2035910/how-to-get-the-number-of-lines-in-a-textarea/2036424#2036424
         var lines = dom.value.split(/\r|\r\n|\n/);
         lines_count = lines.length;
         if (lines_count >= 1) {
             dom.rows = lines_count;
         } else {
             dom.rows = 1;
         }
     };
 
     /**
      * Toggle  CodeMirror LineNumber
      * @method toggle_line_numbers
      **/
     Cell.prototype.toggle_line_numbers = function () {
         if (this.code_mirror.getOption('lineNumbers') == false) {
             this.code_mirror.setOption('lineNumbers', true);
         } else {
             this.code_mirror.setOption('lineNumbers', false);
         }
         this.code_mirror.refresh();
     };
 
     /**
      * 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 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 reg in regs ) {
                 // here we handle non magic_modes
                 if(first_line.match(regs[reg]) != null) {
                     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);
                     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 (python)
         var default_mode = this.default_mode || 'text/plain';
         this.code_mirror.setOption('mode', default_mode);
     };
 
     IPython.Cell = Cell;
 
     return IPython;
 
 }(IPython));
 

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

@@ -1,378 +1,381 b''
 //----------------------------------------------------------------------------
 //  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.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // CodeCell
 //============================================================================
 /**
  * An extendable module that provide base functionnality to create cell for notebook.
  * @module IPython
  * @namespace IPython
  * @submodule CodeCell
  */
 
 var IPython = (function (IPython) {
     "use strict";
 
     var utils = IPython.utils;
     var key   = IPython.utils.keycodes;
     CodeMirror.modeURL = "/static/codemirror/mode/%N/%N.js";
 
     /**
      * A Cell conceived to write code.
      *
      * The kernel doesn't have to be set at creation time, in that case
      * it will be null and set_kernel has to be called later.
      * @class CodeCell
      * @extends IPython.Cell
      *
      * @constructor
      * @param {Object|null} kernel
      */
     var CodeCell = function (kernel) {
         this.kernel = kernel || null;
         this.code_mirror = null;
         this.input_prompt_number = null;
         this.collapsed = false;
         this.default_mode = 'python';
         IPython.Cell.apply(this, arguments);
 
         var that = this;
         this.element.focusout(
             function() { that.auto_highlight(); }
         );
     };
 
     CodeCell.prototype = new IPython.Cell();
 
     /**
      * @method auto_highlight
      */
     CodeCell.prototype.auto_highlight = function () {
         this._auto_highlight(IPython.config.cell_magic_highlight)
     };
 
     /** @method create_element */
     CodeCell.prototype.create_element = function () {
+        IPython.Cell.prototype.create_element.apply(this, arguments);
+
         var cell =  $('<div></div>').addClass('cell border-box-sizing code_cell vbox');
+        cell.append(this.celltoolbar.element);
         cell.attr('tabindex','2');
         var input = $('<div></div>').addClass('input hbox');
         input.append($('<div/>').addClass('prompt input_prompt'));
         var input_area = $('<div/>').addClass('input_area box-flex1');
         this.code_mirror = CodeMirror(input_area.get(0), {
             indentUnit : 4,
             mode: 'python',
             theme: 'ipython',
             readOnly: this.read_only,
             extraKeys: {"Tab": "indentMore","Shift-Tab" : "indentLess",'Backspace':"delSpaceToPrevTabStop"},
             onKeyEvent: $.proxy(this.handle_codemirror_keyevent,this),
             matchBrackets: true
         });
         input.append(input_area);
         var output = $('<div></div>');
         cell.append(input).append(output);
         this.element = cell;
         this.output_area = new IPython.OutputArea(output, true);
 
         // construct a completer only if class exist
         // otherwise no print view
         if (IPython.Completer !== undefined)
         {
             this.completer = new IPython.Completer(this);
         }
     };
 
     /**
      *  This method gets called in CodeMirror's onKeyDown/onKeyPress
      *  handlers and is used to provide custom key handling. Its return
      *  value is used to determine if CodeMirror should ignore the event:
      *  true = ignore, false = don't ignore.
      *  @method handle_codemirror_keyevent
      */
     CodeCell.prototype.handle_codemirror_keyevent = function (editor, event) {
 
         if (this.read_only){
             return false;
         }
 
         var that = this;
         // whatever key is pressed, first, cancel the tooltip request before
         // they are sent, and remove tooltip if any, except for tab again
         if (event.type === 'keydown' && event.which != key.TAB ) {
             IPython.tooltip.remove_and_cancel_tooltip();
         };
 
         var cur = editor.getCursor();
         if (event.keyCode === key.ENTER){
             this.auto_highlight();
         }
 
         if (event.keyCode === key.ENTER && (event.shiftKey || event.ctrlKey)) {
             // Always ignore shift-enter in CodeMirror as we handle it.
             return true;
         } else if (event.which === 40 && event.type === 'keypress' && IPython.tooltip.time_before_tooltip >= 0) {
             // triger on keypress (!) otherwise inconsistent event.which depending on plateform
             // browser and keyboard layout !
             // Pressing '(' , request tooltip, don't forget to reappend it
             IPython.tooltip.pending(that);
         } else if (event.which === key.UPARROW && event.type === 'keydown') {
             // If we are not at the top, let CM handle the up arrow and
             // prevent the global keydown handler from handling it.
             if (!that.at_top()) {
                 event.stop();
                 return false;
             } else {
                 return true;
             };
         } else if (event.which === key.ESC) {
             IPython.tooltip.remove_and_cancel_tooltip(true);
             return true;
         } else if (event.which === key.DOWNARROW && event.type === 'keydown') {
             // If we are not at the bottom, let CM handle the down arrow and
             // prevent the global keydown handler from handling it.
             if (!that.at_bottom()) {
                 event.stop();
                 return false;
             } else {
                 return true;
             };
         } else if (event.keyCode === key.TAB && event.type == 'keydown' && event.shiftKey) {
                 if (editor.somethingSelected()){
                     var anchor = editor.getCursor("anchor");
                     var head = editor.getCursor("head");
                     if( anchor.line != head.line){
                         return false;
                     }
                 }
                 IPython.tooltip.request(that);
                 event.stop();
                 return true;
         } else if (event.keyCode === key.TAB && event.type == 'keydown') {
             // Tab completion.
             //Do not trim here because of tooltip
             if (editor.somethingSelected()){return false}
             var pre_cursor = editor.getRange({line:cur.line,ch:0},cur);
             if (pre_cursor.trim() === "") {
                 // Don't autocomplete if the part of the line before the cursor
                 // is empty.  In this case, let CodeMirror handle indentation.
                 return false;
             } else if ((pre_cursor.substr(-1) === "("|| pre_cursor.substr(-1) === " ") && IPython.config.tooltip_on_tab ) {
                 IPython.tooltip.request(that);
                 // Prevent the event from bubbling up.
                 event.stop();
                 // Prevent CodeMirror from handling the tab.
                 return true;
             } else {
                 event.stop();
                 this.completer.startCompletion();
                 return true;
             };
         } else {
             // keypress/keyup also trigger on TAB press, and we don't want to
             // use those to disable tab completion.
             return false;
         };
         return false;
     };
 
 
     // Kernel related calls.
 
     CodeCell.prototype.set_kernel = function (kernel) {
         this.kernel = kernel;
     }
 
     /**
      * Execute current code cell to the kernel
      * @method execute
      */
     CodeCell.prototype.execute = function () {
         this.output_area.clear_output(true, true, true);
         this.set_input_prompt('*');
         this.element.addClass("running");
         var callbacks = {
             'execute_reply': $.proxy(this._handle_execute_reply, this),
             'output': $.proxy(this.output_area.handle_output, this.output_area),
             'clear_output': $.proxy(this.output_area.handle_clear_output, this.output_area),
             'set_next_input': $.proxy(this._handle_set_next_input, this)
         };
         var msg_id = this.kernel.execute(this.get_text(), callbacks, {silent: false});
     };
 
     /**
      * @method _handle_execute_reply
      * @private
      */
     CodeCell.prototype._handle_execute_reply = function (content) {
         this.set_input_prompt(content.execution_count);
         this.element.removeClass("running");
         $([IPython.events]).trigger('set_dirty.Notebook', {'value': true});
     }
 
     CodeCell.prototype._handle_set_next_input = function (text) {
         var data = {'cell': this, 'text': text}
         $([IPython.events]).trigger('set_next_input.Notebook', data);
     }
 
     // Basic cell manipulation.
 
     CodeCell.prototype.select = function () {
         IPython.Cell.prototype.select.apply(this);
         this.code_mirror.refresh();
         this.code_mirror.focus();
         this.auto_highlight();
         // We used to need an additional refresh() after the focus, but
         // it appears that this has been fixed in CM. This bug would show
         // up on FF when a newly loaded markdown cell was edited.
     };
 
 
     CodeCell.prototype.select_all = function () {
         var start = {line: 0, ch: 0};
         var nlines = this.code_mirror.lineCount();
         var last_line = this.code_mirror.getLine(nlines-1);
         var end = {line: nlines-1, ch: last_line.length};
         this.code_mirror.setSelection(start, end);
     };
 
 
     CodeCell.prototype.collapse = function () {
         this.collapsed = true;
         this.output_area.collapse();
     };
 
 
     CodeCell.prototype.expand = function () {
         this.collapsed = false;
         this.output_area.expand();
     };
 
 
     CodeCell.prototype.toggle_output = function () {
         this.collapsed = Boolean(1 - this.collapsed);
         this.output_area.toggle_output();
     };
 
 
     CodeCell.prototype.toggle_output_scroll = function () {
     this.output_area.toggle_scroll();
     };
 
 
     CodeCell.input_prompt_classical = function (prompt_value, lines_number) {
         var ns = prompt_value || "&nbsp;";
         return 'In&nbsp;[' + ns + ']:'
     };
 
     CodeCell.input_prompt_continuation = function (prompt_value, lines_number) {
         var html = [CodeCell.input_prompt_classical(prompt_value, lines_number)];
         for(var i=1; i < lines_number; i++){html.push(['...:'])};
         return html.join('</br>')
     };
 
     CodeCell.input_prompt_function = CodeCell.input_prompt_classical;
 
 
     CodeCell.prototype.set_input_prompt = function (number) {
         var nline = 1
         if( this.code_mirror != undefined) {
            nline = this.code_mirror.lineCount();
         }
         this.input_prompt_number = number;
         var prompt_html = CodeCell.input_prompt_function(this.input_prompt_number, nline);
         this.element.find('div.input_prompt').html(prompt_html);
     };
 
 
     CodeCell.prototype.clear_input = function () {
         this.code_mirror.setValue('');
     };
 
 
     CodeCell.prototype.get_text = function () {
         return this.code_mirror.getValue();
     };
 
 
     CodeCell.prototype.set_text = function (code) {
         return this.code_mirror.setValue(code);
     };
 
 
     CodeCell.prototype.at_top = function () {
         var cursor = this.code_mirror.getCursor();
         if (cursor.line === 0 && cursor.ch === 0) {
             return true;
         } else {
             return false;
         }
     };
 
 
     CodeCell.prototype.at_bottom = function () {
         var cursor = this.code_mirror.getCursor();
         if (cursor.line === (this.code_mirror.lineCount()-1) && cursor.ch === this.code_mirror.getLine(cursor.line).length) {
             return true;
         } else {
             return false;
         }
     };
 
 
     CodeCell.prototype.clear_output = function (stdout, stderr, other) {
         this.output_area.clear_output(stdout, stderr, other);
     };
 
 
     // JSON serialization
 
     CodeCell.prototype.fromJSON = function (data) {
         IPython.Cell.prototype.fromJSON.apply(this, arguments);
         if (data.cell_type === 'code') {
             if (data.input !== undefined) {
                 this.set_text(data.input);
                 // make this value the starting point, so that we can only undo
                 // to this state, instead of a blank cell
                 this.code_mirror.clearHistory();
                 this.auto_highlight();
             }
             if (data.prompt_number !== undefined) {
                 this.set_input_prompt(data.prompt_number);
             } else {
                 this.set_input_prompt();
             };
             this.output_area.fromJSON(data.outputs);
             if (data.collapsed !== undefined) {
                 if (data.collapsed) {
                     this.collapse();
                 } else {
                     this.expand();
                 };
             };
         };
     };
 
 
     CodeCell.prototype.toJSON = function () {
         var data = IPython.Cell.prototype.toJSON.apply(this);
         data.input = this.get_text();
         data.cell_type = 'code';
         if (this.input_prompt_number) {
             data.prompt_number = this.input_prompt_number;
         };
         var outputs = this.output_area.toJSON();
         data.outputs = outputs;
         data.language = 'python';
         data.collapsed = this.collapsed;
         return data;
     };
 
 
     IPython.CodeCell = CodeCell;
 
     return IPython;
 }(IPython));

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

@@ -1,35 +1,47 b''
 // leave at least 2 line with only a star on it below, or doc generation fails
 /**
  *
  *
  * Placeholder for custom user javascript
  * mainly to be overridden in profile/static/js/custom.js
  * This will always be an empty file in IPython
  *
  * User could add any javascript in the `profile/static/js/custom.js` file
  * (and should create it if it does not exist).
  * It will be executed by the ipython notebook at load time.
  *
  * Same thing with `profile/static/css/custom.css` to inject custom css into the notebook.
  *
  * Example :
  *
  * Create a custom button in toolbar that execute `%qtconsole` in kernel
  * and hence open a qtconsole attached to the same kernel as the current notebook
  *
  *    $([IPython.events]).on('notebook_loaded.Notebook', function(){
  *        IPython.toolbar.add_buttons_group([
  *            {
  *                 'label'   : 'run qtconsole',
  *                 'icon'    : 'ui-icon-calculator', // select your icon from http://jqueryui.com/themeroller/
  *                 'callback': function(){IPython.notebook.kernel.execute('%qtconsole')}
  *            }
  *            // add more button here if needed.
  *            ]);
  *    });
  *
+ * Example :
+ *
+ *  Use `jQuery.getScript(url [, success(script, textStatus, jqXHR)] );`
+ *  to load custom script into the notebook.
+ *
+ *    // to load the metadata ui extension example.
+ *    $.getScript('/static/js/celltoolbarpresets/example.js');
+ *    // or
+ *    // to load the metadata ui extension to control slideshow mode / reveal js for nbconvert
+ *    $.getScript('/static/js/celltoolbarpresets/slideshow.js');
+ *
+ *
  * @module IPython
  * @namespace IPython
  * @class customjs
  * @static
  */

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

@@ -1,177 +1,178 b''
 //----------------------------------------------------------------------------
 //  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.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // ToolBar
 //============================================================================
 
 var IPython = (function (IPython) {
 
     var MainToolBar = function (selector) {
         this.selector = selector;
         IPython.ToolBar.apply(this, arguments);
         this.construct();
         this.add_drop_down_list();
         this.bind_events();
+        $(this.selector)
+        .append($('<label/>').text('Cell Toolbar:'))
+        .append(IPython.CellToolbar.dropdown_preset_element)
     };
 
     MainToolBar.prototype = new IPython.ToolBar(); 
 
     MainToolBar.prototype.construct = function () {
         this.add_buttons_group([
                 {
                     id : 'save_b',
                     label : 'Save',
                     icon : 'ui-icon-disk',
                     callback : function () {
                         IPython.notebook.save_notebook();
                         }
                 }
             ]);
         this.add_buttons_group([
                 {
                     id : 'cut_b',
                     label : 'Cut Cell',
                     icon : 'ui-icon-scissors',
                     callback : function () {
                         IPython.notebook.cut_cell();
                         }
                 },
                 {
                     id : 'copy_b',
                     label : 'Copy Cell',
                     icon : 'ui-icon-copy',
                     callback : function () {
                         IPython.notebook.copy_cell();
                         }
                 },
                 {
                     id : 'paste_b',
                     label : 'Paste Cell Below',
                     icon : 'ui-icon-clipboard',
                     callback : function () {
                         IPython.notebook.paste_cell_below();
                         }
                 }
             ],'cut_copy_paste');
 
         this.add_buttons_group([
                 {
                     id : 'move_up_b',
                     label : 'Move Cell Up',
                     icon : 'ui-icon-arrowthick-1-n',
                     callback : function () {
                         IPython.notebook.move_cell_up();
                         }
                 },
                 {
                     id : 'move_down_b',
                     label : 'Move Cell Down',
                     icon : 'ui-icon-arrowthick-1-s',
                     callback : function () {
                         IPython.notebook.move_cell_down();
                         }
                 }
             ],'move_up_down');
         
         this.add_buttons_group([
                 {
                     id : 'insert_above_b',
                     label : 'Insert Cell Above',
                     icon : 'ui-icon-arrowthickstop-1-n',
                     callback : function () {
                         IPython.notebook.insert_cell_above('code');
                         }
                 },
                 {
                     id : 'insert_below_b',
                     label : 'Insert Cell Below',
                     icon : 'ui-icon-arrowthickstop-1-s',
                     callback : function () {
                         IPython.notebook.insert_cell_below('code');
                         }
                 }
             ],'insert_above_below');
 
         this.add_buttons_group([
                 {
                     id : 'run_b',
                     label : 'Run Cell',
                     icon : 'ui-icon-play',
                     callback : function () {
                     IPython.notebook.execute_selected_cell();
                         }
                 },
                 {
                     id : 'interrupt_b',
                     label : 'Interrupt',
                     icon : 'ui-icon-stop',
                     callback : function () {
                         IPython.notebook.kernel.interrupt();
                         }
                 }
             ],'run_int');
-
-
     };
 
     MainToolBar.prototype.add_drop_down_list = function () {
         var select = $(this.selector)
             .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'))
                 );
     };
 
     MainToolBar.prototype.bind_events = function () {
         var that = this;
         
         this.element.find('#cell_type').change(function () {
             var cell_type = $(this).val();
             if (cell_type === 'code') {
                 IPython.notebook.to_code();
             } else if (cell_type === 'markdown')  {
                 IPython.notebook.to_markdown();
             } else if (cell_type === 'raw')  {
                 IPython.notebook.to_raw();
             } else if (cell_type === 'heading1')  {
                 IPython.notebook.to_heading(undefined, 1);
             } else if (cell_type === 'heading2')  {
                 IPython.notebook.to_heading(undefined, 2);
             } else if (cell_type === 'heading3')  {
                 IPython.notebook.to_heading(undefined, 3);
             } else if (cell_type === 'heading4')  {
                 IPython.notebook.to_heading(undefined, 4);
             } else if (cell_type === 'heading5')  {
                 IPython.notebook.to_heading(undefined, 5);
             } else if (cell_type === 'heading6')  {
                 IPython.notebook.to_heading(undefined, 6);
             }
         });
         $([IPython.events]).on('selected_cell_type_changed.Notebook', function (event, data) {
             if (data.cell_type === 'heading') {
                 that.element.find('#cell_type').val(data.cell_type+data.level);
             } else {
                 that.element.find('#cell_type').val(data.cell_type);
             }
         });
     };
 
     IPython.MainToolBar = MainToolBar;
 
     return IPython;
 
 }(IPython));

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

@@ -1,531 +1,533 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 2008-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.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // TextCell
 //============================================================================
 
 /**
     A module that allow to create different type of Text Cell
     @module IPython
     @namespace IPython
  */
 var IPython = (function (IPython) {
 
     // TextCell base class
     var key = IPython.utils.keycodes;
 
     /**
      * Construct a new TextCell, codemirror mode is by default 'htmlmixed', and cell type is 'text'
      * cell start as not redered.
      *
      * @class TextCell
      * @constructor TextCell
      * @extend Ipython.Cell
      */
     var TextCell = function () {
         this.code_mirror_mode = this.code_mirror_mode || 'htmlmixed';
         IPython.Cell.apply(this, arguments);
         this.rendered = false;
         this.cell_type = this.cell_type || 'text';
     };
 
     TextCell.prototype = new IPython.Cell();
 
     /**
      * Create the DOM element of the TextCell
      * @method create_element
      * @private
      */
     TextCell.prototype.create_element = function () {
-        var cell = $("<div>").addClass('cell text_cell border-box-sizing');
+        IPython.Cell.prototype.create_element.apply(this, arguments);
+        var cell = $("<div>").addClass('cell text_cell border-box-sizing vbox');
+        cell.append(this.celltoolbar.element);
         cell.attr('tabindex','2');
         var input_area = $('<div/>').addClass('text_cell_input border-box-sizing');
         this.code_mirror = CodeMirror(input_area.get(0), {
             indentUnit : 4,
             mode: this.code_mirror_mode,
             theme: 'default',
             value: this.placeholder,
             readOnly: this.read_only,
             lineWrapping : true,
             extraKeys: {"Tab": "indentMore","Shift-Tab" : "indentLess"},
             onKeyEvent: $.proxy(this.handle_codemirror_keyevent,this)
         });
         // The tabindex=-1 makes this div focusable.
         var render_area = $('<div/>').addClass('text_cell_render border-box-sizing').
             addClass('rendered_html').attr('tabindex','-1');
         cell.append(input_area).append(render_area);
         this.element = cell;
     };
 
 
     /**
      * Bind the DOM evet to cell actions
      * Need to be called after TextCell.create_element
      * @private
      * @method bind_event
      */
     TextCell.prototype.bind_events = function () {
         IPython.Cell.prototype.bind_events.apply(this);
         var that = this;
         this.element.keydown(function (event) {
             if (event.which === 13 && !event.shiftKey) {
                 if (that.rendered) {
                     that.edit();
                     return false;
                 };
             };
         });
         this.element.dblclick(function () {
             that.edit();
         });
     };
 
     /**
      * This method gets called in CodeMirror's onKeyDown/onKeyPress
      * handlers and is used to provide custom key handling.
      *
      * Subclass should override this method to have custom handeling
      *
      * @method handle_codemirror_keyevent
      * @param {CodeMirror} editor - The codemirror instance bound to the cell
      * @param {event} event -
      * @return {Boolean} `true` if CodeMirror should ignore the event, `false` Otherwise
      */
     TextCell.prototype.handle_codemirror_keyevent = function (editor, event) {
 
         if (event.keyCode === 13 && (event.shiftKey || event.ctrlKey)) {
             // Always ignore shift-enter in CodeMirror as we handle it.
             return true;
         }
         return false;
     };
 
     /**
      * Select the current cell and trigger 'focus'
      * @method select
      */
     TextCell.prototype.select = function () {
         IPython.Cell.prototype.select.apply(this);
         var output = this.element.find("div.text_cell_render");
         output.trigger('focus');
     };
 
     /**
      * unselect the current cell and `render` it
      * @method unselect
      */
     TextCell.prototype.unselect = function() {
         // render on selection of another cell
         this.render();
         IPython.Cell.prototype.unselect.apply(this);
     };
 
     /**
      *
      * put the current cell in edition mode
      * @method edit
      */
     TextCell.prototype.edit = function () {
         if ( this.read_only ) return;
         if (this.rendered === true) {
             var text_cell = this.element;
             var output = text_cell.find("div.text_cell_render");
             output.hide();
             text_cell.find('div.text_cell_input').show();
             this.code_mirror.refresh();
             this.code_mirror.focus();
             // We used to need an additional refresh() after the focus, but
             // it appears that this has been fixed in CM. This bug would show
             // up on FF when a newly loaded markdown cell was edited.
             this.rendered = false;
             if (this.get_text() === this.placeholder) {
                 this.set_text('');
                 this.refresh();
             }
         }
     };
 
 
     /**
      * Empty, Subclasses must define render.
      * @method render
      */
     TextCell.prototype.render = function () {};
 
 
     /**
      * setter: {{#crossLink "TextCell/set_text"}}{{/crossLink}}
      * @method get_text
      * @retrun {string} CodeMirror current text value
      */
     TextCell.prototype.get_text = function() {
         return this.code_mirror.getValue();
     };
 
     /**
      * @param {string} text - Codemiror text value
      * @see TextCell#get_text
      * @method set_text
      * */
     TextCell.prototype.set_text = function(text) {
         this.code_mirror.setValue(text);
         this.code_mirror.refresh();
     };
 
     /**
      * setter :{{#crossLink "TextCell/set_rendered"}}{{/crossLink}}
      * @method get_rendered
      * @return {html} html of rendered element
      * */
     TextCell.prototype.get_rendered = function() {
         return this.element.find('div.text_cell_render').html();
     };
 
     /**
      * @method set_rendered
      */
     TextCell.prototype.set_rendered = function(text) {
         this.element.find('div.text_cell_render').html(text);
     };
 
     /**
      * not deprecated, but implementation wrong
      * @method at_top
      * @deprecated
      * @return {Boolean} true is cell rendered, false otherwise
      * I doubt this is what it is supposed to do
      * this implementation is completly false
      */
     TextCell.prototype.at_top = function () {
         if (this.rendered) {
             return true;
         } else {
             return false;
         }
     };
 
 
     /**
      * not deprecated, but implementation wrong
      * @method at_bottom
      * @deprecated
      * @return {Boolean} true is cell rendered, false otherwise
      * I doubt this is what it is supposed to do
      * this implementation is completly false
      * */
     TextCell.prototype.at_bottom = function () {
         if (this.rendered) {
             return true;
         } else {
             return false;
         }
     };
 
     /**
      * Create Text cell from JSON
      * @param {json} data - JSON serialized text-cell
      * @method fromJSON
      */
     TextCell.prototype.fromJSON = function (data) {
         IPython.Cell.prototype.fromJSON.apply(this, arguments);
         if (data.cell_type === this.cell_type) {
             if (data.source !== undefined) {
                 this.set_text(data.source);
                 // make this value the starting point, so that we can only undo
                 // to this state, instead of a blank cell
                 this.code_mirror.clearHistory();
                 this.set_rendered(data.rendered || '');
                 this.rendered = false;
                 this.render();
             }
         }
     };
 
     /** Generate JSON from cell
      * @return {object} cell data serialised to json
      */
     TextCell.prototype.toJSON = function () {
         var data = IPython.Cell.prototype.toJSON.apply(this);
         data.cell_type = this.cell_type;
         data.source = this.get_text();
         return data;
     };
 
 
     /**
      * @constructor HtmlCell
      * @class HtmlCell
      * @extends Ipython.TextCell
      */
     var HTMLCell = function () {
         this.placeholder = "Type <strong>HTML</strong> and LaTeX: $\\alpha^2$";
         IPython.TextCell.apply(this, arguments);
         this.cell_type = 'html';
     };
 
 
     HTMLCell.prototype = new TextCell();
 
     /**
      * @method render
      */
     HTMLCell.prototype.render = function () {
         if (this.rendered === false) {
             var text = this.get_text();
             if (text === "") { text = this.placeholder; }
             this.set_rendered(text);
             this.typeset();
             this.element.find('div.text_cell_input').hide();
             this.element.find("div.text_cell_render").show();
             this.rendered = true;
         }
     };
 
 
     /**
      * @class MarkdownCell
      * @constructor MarkdownCell
      * @extends Ipython.HtmlCell
      */
     var MarkdownCell = function () {
         this.placeholder = "Type *Markdown* and LaTeX: $\\alpha^2$";
         IPython.TextCell.apply(this, arguments);
         this.cell_type = 'markdown';
     };
 
 
     MarkdownCell.prototype = new TextCell();
 
     /**
      * @method render
      */
     MarkdownCell.prototype.render = function () {
         if (this.rendered === false) {
             var text = this.get_text();
             if (text === "") { text = this.placeholder; }
             text = IPython.mathjaxutils.remove_math(text)
             var html = IPython.markdown_converter.makeHtml(text);
             html = IPython.mathjaxutils.replace_math(html)
             try {
                 this.set_rendered(html);
             } catch (e) {
                 console.log("Error running Javascript in Markdown:");
                 console.log(e);
                 this.set_rendered($("<div/>").addClass("js-error").html(
                     "Error rendering Markdown!<br/>" + e.toString())
                 );
             }
             this.element.find('div.text_cell_input').hide();
             this.element.find("div.text_cell_render").show();
             var code_snippets = this.element.find("pre > code");
             code_snippets.replaceWith(function () {
                 var code = $(this).html();
                 /* Substitute br for newlines and &nbsp; for spaces
                    before highlighting, since prettify doesn't
                    preserve those on all browsers */
                 code = code.replace(/(\r\n|\n|\r)/gm, "<br/>");
                 code = code.replace(/ /gm, '&nbsp;');
                 code = prettyPrintOne(code);
 
                 return '<code class="prettyprint">' + code + '</code>';
             });
             this.typeset()
             this.rendered = true;
         }
     };
 
 
     // RawCell
 
     /**
      * @class RawCell
      * @constructor RawCell
      * @extends Ipython.TextCell
      */
     var RawCell = function () {
         this.placeholder = "Type plain text and LaTeX: $\\alpha^2$";
         this.code_mirror_mode = 'rst';
         IPython.TextCell.apply(this, arguments);
         this.cell_type = 'raw';
         var that = this
 
         this.element.focusout(
                 function() { that.auto_highlight(); }
             );
     };
 
 
     RawCell.prototype = new TextCell();
 
     /**
      * Trigger autodetection of highlight scheme for current cell
      * @method auto_highlight
      */
     RawCell.prototype.auto_highlight = function () {
         this._auto_highlight(IPython.config.raw_cell_highlight);
     };
 
     /** @method render **/
     RawCell.prototype.render = function () {
         this.rendered = true;
         this.edit();
     };
 
 
     /** @method handle_codemirror_keyevent **/
     RawCell.prototype.handle_codemirror_keyevent = function (editor, event) {
 
         var that = this;
         if (event.which === key.UPARROW && event.type === 'keydown') {
             // If we are not at the top, let CM handle the up arrow and
             // prevent the global keydown handler from handling it.
             if (!that.at_top()) {
                 event.stop();
                 return false;
             } else {
                 return true;
             };
         } else if (event.which === key.DOWNARROW && event.type === 'keydown') {
             // If we are not at the bottom, let CM handle the down arrow and
             // prevent the global keydown handler from handling it.
             if (!that.at_bottom()) {
                 event.stop();
                 return false;
             } else {
                 return true;
             };
         };
         return false;
     };
 
     /** @method select **/
     RawCell.prototype.select = function () {
         IPython.Cell.prototype.select.apply(this);
         this.code_mirror.refresh();
         this.code_mirror.focus();
     };
 
     /** @method at_top **/
     RawCell.prototype.at_top = function () {
         var cursor = this.code_mirror.getCursor();
         if (cursor.line === 0 && cursor.ch === 0) {
             return true;
         } else {
             return false;
         }
     };
 
 
     /** @method at_bottom **/
     RawCell.prototype.at_bottom = function () {
         var cursor = this.code_mirror.getCursor();
         if (cursor.line === (this.code_mirror.lineCount()-1) && cursor.ch === this.code_mirror.getLine(cursor.line).length) {
             return true;
         } else {
             return false;
         }
     };
 
 
     /**
      * @class HeadingCell
      * @extends Ipython.TextCell
      */
 
     /**
      * @constructor HeadingCell
      * @extends Ipython.TextCell
      */
     var HeadingCell = function () {
         this.placeholder = "Type Heading Here";
         IPython.TextCell.apply(this, arguments);
         /**
          * heading level of the cell, use getter and setter to access
          * @property level
          */
         this.level = 1;
         this.cell_type = 'heading';
     };
 
 
     HeadingCell.prototype = new TextCell();
 
     /** @method fromJSON */
     HeadingCell.prototype.fromJSON = function (data) {
         if (data.level != undefined){
             this.level = data.level;
         }
         IPython.TextCell.prototype.fromJSON.apply(this, arguments);
     };
 
 
     /** @method toJSON */
     HeadingCell.prototype.toJSON = function () {
         var data = IPython.TextCell.prototype.toJSON.apply(this);
         data.level = this.get_level();
         return data;
     };
 
 
     /**
      * Change heading level of cell, and re-render
      * @method set_level
      */
     HeadingCell.prototype.set_level = function (level) {
         this.level = level;
         if (this.rendered) {
             this.rendered = false;
             this.render();
         };
     };
 
     /** The depth of header cell, based on html (h1 to h6)
      * @method get_level
      * @return {integer} level - for 1 to 6
      */
     HeadingCell.prototype.get_level = function () {
         return this.level;
     };
 
 
     HeadingCell.prototype.set_rendered = function (text) {
         var r = this.element.find("div.text_cell_render");
         r.empty();
         r.append($('<h'+this.level+'/>').html(text));
     };
 
 
     HeadingCell.prototype.get_rendered = function () {
         var r = this.element.find("div.text_cell_render");
         return r.children().first().html();
     };
 
 
     HeadingCell.prototype.render = function () {
         if (this.rendered === false) {
             var text = this.get_text();
             if (text === "") { text = this.placeholder; }
             this.set_rendered(text);
             this.typeset();
             this.element.find('div.text_cell_input').hide();
             this.element.find("div.text_cell_render").show();
             this.rendered = true;
         };
     };
 
     IPython.TextCell = TextCell;
     IPython.HTMLCell = HTMLCell;
     IPython.MarkdownCell = MarkdownCell;
     IPython.RawCell = RawCell;
     IPython.HeadingCell = HeadingCell;
 
 
     return IPython;
 
 }(IPython));
 

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

@@ -1,111 +1,111 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 2008 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.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // ToolBar
 //============================================================================
 /**
  * @module IPython
  * @namespace IPython
  * @submodule ToolBar
  */
 
 var IPython = (function (IPython) {
 
     /**
      * A generic toolbar on which one can add button
      * @class ToolBar
      * @constructor
      * @param {Dom object} selector
      */
     var ToolBar = function (selector) {
         this.selector = selector;
         if (this.selector !== undefined) {
             this.element = $(selector);
             this.style();
         }
     };
 
     /**
      *  add a group of button into the current toolbar.
      *
      *
      *  @example
      *
-     *      IPython.toolbar.add_button_group([
+     *      IPython.toolbar.add_buttons_group([
      *          {
      *            label:'my button',
      *            icon:'ui-icon-disk',
      *            callback:function(){alert('hoho'),
      *            id : 'my_button_id',    // this is optional
      *          },
      *          {
      *            label:'my second button',
      *            icon:'ui-icon-scissors',
      *            callback:function(){alert('be carefull I cut')}
      *          }
      *        ],
      *        "my_button_group_id"
      *      )
      *
      *  @method add_buttons_group
      *  @param list {List}
      *      List of button of the group, with the following paramter for each :
      *      @param list.label {string} text to show on button hover
      *      @param list.icon {string} icon to choose from [jQuery ThemeRoller](http://jqueryui.com/themeroller/)
      *      @param list.callback {function} function to be called on button click
      *      @param [list.id] {String} id to give to the button
      *  @param [group_id] {String} optionnal id to give to the group
      *
      */
     ToolBar.prototype.add_buttons_group = function (list, group_id) {
         var span_group = $('<span/>');
         if( group_id != undefined ) {
             span_group.attr('id',group_id);
         }
         for(var el in list) {
             var button  = $('<button/>').button({
                 icons : {primary : list[el].icon},
                 text  : false,
                 label : list[el].label
                 });
             var id = list[el].id;
             if( id != undefined )
                 button.attr('id',id);
             var fun = list[el].callback;
             button.click(fun);
             span_group.append(button);
         }
         span_group.buttonset();
         $(this.selector).append(span_group);
     };
 
     ToolBar.prototype.style = function () {
         this.element.addClass('border-box-sizing').
             addClass('ui-widget ui-widget-content toolbar').
             css('border-top-style','none').
             css('border-left-style','none').
             css('border-right-style','none');
     };
 
     /**
      * Show and hide toolbar
      * @method toggle
      */
     ToolBar.prototype.toggle = function () {
         this.element.toggle();
         if (IPython.layout_manager != undefined) {
             IPython.layout_manager.do_resize();
         }
     };
 
 
     IPython.ToolBar = ToolBar;
 
     return IPython;
 
 }(IPython));

IPython/frontend/html/notebook/templates/notebook.html

@@ -1,227 +1,229 b''
 {% extends "page.html" %}
 
 {% block stylesheet %}
 
 {% if mathjax_url %}
 <script type="text/javascript" src="{{mathjax_url}}?config=TeX-AMS_HTML-full&delayStartupUntil=configured" charset="utf-8"></script>
 {% endif %}
 <script type="text/javascript">
 // MathJax disabled, set as null to distingish from *missing* MathJax,
 // where it will be undefined, and should prompt a dialog later.
 window.mathjax_url = "{{mathjax_url}}";
 </script>
 
 <link rel="stylesheet" href="{{ static_url("codemirror/lib/codemirror.css") }}">
 <link rel="stylesheet" href="{{ static_url("codemirror/theme/ipython.css") }}">
 
 <link rel="stylesheet" href="{{ static_url("prettify/prettify.css") }}"/>
 
 <link rel="stylesheet" href="{{ static_url("css/notebook.css") }}" type="text/css" />
+<link rel="stylesheet" href="{{ static_url("css/celltoolbar.css") }}" type="text/css" />
 <link rel="stylesheet" href="{{ static_url("css/tooltip.css") }}" type="text/css" />
 <link rel="stylesheet" href="{{ static_url("css/renderedhtml.css") }}" type="text/css" />
 
 <link rel="stylesheet" href="{{ static_url("css/printnotebook.css") }}" type="text/css" media="print"/>
 {% endblock %}
 
 {% block params %}
 
 data-project={{project}}
 data-base-project-url={{base_project_url}}
 data-base-kernel-url={{base_kernel_url}}
 data-read-only={{read_only and not logged_in}}
 data-notebook-id={{notebook_id}}
 
 {% endblock %}
 
 
 {% block header %}
 
 <span id="save_widget">
     <span id="notebook_name"></span>
     <span id="save_status"></span>
 </span>
 
 {% endblock %}
 
 
 {% block site %}
 
 <div id="menubar_container">
 <div id="menubar">
     <ul id="menus">
         <li><a href="#">File</a>
             <ul>
                 <li id="new_notebook"><a href="#">New</a></li>
                 <li id="open_notebook"><a href="#">Open...</a></li>
                 <hr/>
                 <li id="copy_notebook"><a href="#">Make a Copy...</a></li>
                 <li id="rename_notebook"><a href="#">Rename...</a></li>
                 <li id="save_notebook"><a href="#">Save</a></li>
                 <hr/>
                 <li><a href="#">Download as</a>
                     <ul>
                         <li id="download_ipynb"><a href="#">IPython (.ipynb)</a></li>
                         <li id="download_py"><a href="#">Python (.py)</a></li>
                     </ul>
                 </li>
                 <hr/>
                 <li id="print_notebook"><a href="/{{notebook_id}}/print" target="_blank">Print View</a></li>
                 <hr/>
                 <li id="kill_and_exit"><a href="#" >Close and halt</a></li>
             </ul>
         </li>
         <li><a href="#">Edit</a>
             <ul>
                 <li id="cut_cell"><a href="#">Cut Cell</a></li>
                 <li id="copy_cell"><a href="#">Copy Cell</a></li>
                 <li id="paste_cell_above" class="ui-state-disabled"><a href="#">Paste Cell Above</a></li>
                 <li id="paste_cell_below" class="ui-state-disabled"><a href="#">Paste Cell Below</a></li>
                 <li id="paste_cell_replace" class="ui-state-disabled"><a href="#">Paste Cell &amp; Replace</a></li>
                 <li id="delete_cell"><a href="#">Delete</a></li>
                 <hr/>
                 <li id="split_cell"><a href="#">Split Cell</a></li>
                 <li id="merge_cell_above"><a href="#">Merge Cell Above</a></li>
                 <li id="merge_cell_below"><a href="#">Merge Cell Below</a></li>
                 <hr/>
                 <li id="move_cell_up"><a href="#">Move Cell Up</a></li>
                 <li id="move_cell_down"><a href="#">Move Cell Down</a></li>
                 <hr/>
                 <li id="select_previous"><a href="#">Select Previous Cell</a></li>
                 <li id="select_next"><a href="#">Select Next Cell</a></li>
             </ul>
         </li>
         <li><a href="#">View</a>
             <ul>
                 <li id="toggle_header"><a href="#">Toggle Header</a></li>
                 <li id="toggle_toolbar"><a href="#">Toggle Toolbar</a></li>
             </ul>
         </li>
         <li><a href="#">Insert</a>
             <ul>
                 <li id="insert_cell_above"><a href="#">Insert Cell Above</a></li>
                 <li id="insert_cell_below"><a href="#">Insert Cell Below</a></li>
             </ul>
         </li>
         <li><a href="#">Cell</a>
             <ul>
                 <li id="run_cell"><a href="#">Run</a></li>
                 <li id="run_cell_in_place"><a href="#">Run in Place</a></li>
                 <li id="run_all_cells"><a href="#">Run All</a></li>
                 <li id="run_all_cells_above"><a href="#">Run All Above</a></li>
                 <li id="run_all_cells_below"><a href="#">Run All Below</a></li>
                 <hr/>
                 <li id="to_code"><a href="#">Code</a></li>
                 <li id="to_markdown"><a href="#">Markdown </a></li>
                 <li id="to_raw"><a href="#">Raw Text</a></li>
                 <li id="to_heading1"><a href="#">Heading 1</a></li>
                 <li id="to_heading2"><a href="#">Heading 2</a></li>
                 <li id="to_heading3"><a href="#">Heading 3</a></li>
                 <li id="to_heading4"><a href="#">Heading 4</a></li>
                 <li id="to_heading5"><a href="#">Heading 5</a></li>
                 <li id="to_heading6"><a href="#">Heading 6</a></li>
                 <hr/>
                 <li id="toggle_output"><a href="#">Toggle Current Output</a></li>
                 <li id="all_outputs"><a href="#">All Output</a>
                     <ul>
                         <li id="expand_all_output"><a href="#">Expand</a></li>
                         <li id="scroll_all_output"><a href="#">Scroll Long</a></li>
                         <li id="collapse_all_output"><a href="#">Collapse</a></li>
                         <li id="clear_all_output"><a href="#">Clear</a></li>
                     </ul>
                 </li>
             </ul>
         </li>
         <li><a href="#">Kernel</a>
             <ul>
                 <li id="int_kernel"><a href="#">Interrupt</a></li>
                 <li id="restart_kernel"><a href="#">Restart</a></li>
             </ul>
         </li>
         <li><a href="#">Help</a>
             <ul>
                 <li><a href="http://ipython.org/documentation.html" target="_blank">IPython Help</a></li>
                 <li><a href="http://ipython.org/ipython-doc/stable/interactive/htmlnotebook.html" target="_blank">Notebook Help</a></li>
                 <li id="keyboard_shortcuts"><a href="#">Keyboard Shortcuts</a></li>
                 <hr/>
                 <li><a href="http://docs.python.org" target="_blank">Python</a></li>
                 <li><a href="http://docs.scipy.org/doc/numpy/reference/" target="_blank">NumPy</a></li>
                 <li><a href="http://docs.scipy.org/doc/scipy/reference/" target="_blank">SciPy</a></li>
                 <li><a href="http://docs.sympy.org/dev/index.html" target="_blank">SymPy</a></li>
                 <li><a href="http://matplotlib.sourceforge.net/" target="_blank">Matplotlib</a></li>
             </ul>
         </li>
     </ul>
 
 </div>
     <div id="notification_area">
     </div>
 </div>
 
 
 <div id="maintoolbar"></div>
 
 <div id="main_app">
 
     <div id="notebook_panel">
         <div id="notebook"></div>
         <div id="pager_splitter"></div>
         <div id="pager_container">
             <div id='pager_button_area'>
             </div>
             <div id="pager"></div>
         </div>
     </div>
 
 </div>
 <div id='tooltip' class='ipython_tooltip ui-corner-all' style='display:none'></div>
 
 
 {% endblock %}
 
 
 {% block script %}
 
 <script src="{{ static_url("codemirror/lib/codemirror.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/lib/util/loadmode.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/lib/util/multiplex.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/python/python.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/htmlmixed/htmlmixed.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/xml/xml.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/javascript/javascript.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/css/css.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/rst/rst.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/markdown/markdown.js") }}" charset="utf-8"></script>
 
 <script src="{{ static_url("pagedown/Markdown.Converter.js") }}" charset="utf-8"></script>
 
 <script src="{{ static_url("prettify/prettify.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("dateformat/date.format.js") }}" charset="utf-8"></script>
 
 <script src="{{ static_url("js/events.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/utils.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/layoutmanager.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/mathjaxutils.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/outputarea.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/cell.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("js/celltoolbar.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/codecell.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/completer.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/textcell.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/kernel.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/savewidget.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/quickhelp.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/pager.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/menubar.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/toolbar.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/maintoolbar.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/notebook.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/notificationwidget.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/notificationarea.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/tooltip.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/config.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/notebookmain.js") }}" type="text/javascript" charset="utf-8"></script>
 
 <script src="{{ static_url("js/contexthint.js") }}" charset="utf-8"></script>
-{% endblock %}
-
 
+<script src="{{ static_url("js/celltoolbarpresets/default.js") }}" type="text/javascript" charset="utf-8"></script>
 
+{% endblock %}