Add a per cell toolbar.

This add a per-cell globally toggleable toolbar
the main purpouse is to easily edit metadata.

this come with a few example like adding checkbox,
dropdown list, simple button, button with icon...

please see the js-doc of
IPython/frontend/html/notebook/static/js/MetaUI.js
for more info

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

@@ -0,0 +1,54 b''
+/*Css for the metadata edit area*/
+
+.metaedit{
+    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 .metaedit{
+    margin-left:81px;
+}
+
+.text_cell .metaedit{
+    margin-left:0px;
+}
+
+.editmetaon div.input_area , .editmetaon div.text_cell_input{
+    border-top-right-radius: 0px;
+    border-top-left-radius: 0px;
+}
+
+.editmetaon .metaedit {
+    display:block;
+}
+
+.metaedit ui-button {
+    border :none;
+}
+
+.button_container {
+ float:right;
+ /*width:60px;*/
+}
+
+.button_container .ui-state-default, .button_container .ui-state-hover, .button_container .ui-state-hover span{
+    border-radius : 0 0 0 0;
+    border : none;
+}
+
+.metaedit select {
+    margin:10px;
+    margin-top:0px;
+    margin-bottom:0px;
+}
+
+.metaedit input[type=checkbox] {
+    margin-bottom:1px;
+
+}
+

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

@@ -0,0 +1,359 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.
+//----------------------------------------------------------------------------
+
+//============================================================================
+// MetaUI
+//============================================================================
+
+
+/**
+ * A Module to control the per-cell toolbar.
+ * @module IPython
+ * @namespace IPython
+ * @submodule MetaUI
+ */
+var IPython = (function (IPython) {
+    "use strict";
+
+
+    /**
+     * @constructor
+     * @class MetaUI
+     * @param {The cell to attach the metadata UI to} cell
+     */
+    var MetaUI = function (cell) {
+        MetaUI._instances.push(this);
+        this.metainner = $('<div/>');
+        this.cell = cell;
+        this.element = $('<div/>').addClass('metaedit')
+                .append(this.metainner)
+        this.rebuild();
+        return this;
+    };
+
+    /**
+     * 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
+     */
+    MetaUI._callback_dict = {};
+
+    /**
+     * Class variable that should contain the reverse order list of the button
+     * to add to the toolbar of each cell
+     * @property _button_list
+     * @private
+     */
+    MetaUI._button_list = [];
+
+    /**
+     * keep a list of all instances to
+     * be able to llop over them...
+     * but how to 'destroy' them ?
+     * have to think about it...
+     * or loop over the cells, and find their MetaUI instances.
+     * @private
+     * @property _instances
+     */
+    MetaUI._instances =[]
+
+    /**
+     * keep a list of all the availlabel presets for the toolbar
+     * @private
+     * @property _presets
+     */
+    MetaUI._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 responsable 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
+     *      MetaUI.register_callback('foo',toggle);
+     */
+    MetaUI.register_callback = function(name, callback){
+        // what do we do if name already exist ?
+        MetaUI._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
+     *
+     *      MetaUI.register_callback('foo.c1',function(div,cell){...});
+     *      MetaUI.register_callback('foo.c2',function(div,cell){...});
+     *      MetaUI.register_callback('foo.c3',function(div,cell){...});
+     *      MetaUI.register_callback('foo.c4',function(div,cell){...});
+     *      MetaUI.register_callback('foo.c5',function(div,cell){...});
+     *
+     *      MetaUI.register_preset('foo.foo_preset1',['foo.c1','foo.c2','foo.c5'])
+     *      MetaUI.register_preset('foo.foo_preset2',['foo.c4','foo.c5'])
+     */
+    MetaUI.register_preset = function(name, preset_list){
+        MetaUI._presets[name] = preset_list
+    }
+    /**
+     * set an UI preset from `register_preset`
+     * @method set_preset
+     * @param preset_name {String} string corresponding to the preset name
+     *
+     * @static
+     * @private
+     * @example
+     *
+     *      MetaUI.set_preset('foo.foo_preset1');
+     */
+    MetaUI.set_preset= function(preset_name){
+        var preset = MetaUI._presets[preset_name];
+
+        if(preset != undefined){
+            MetaUI._button_list = preset;
+            MetaUI.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
+     *
+     */
+    MetaUI.rebuild_all = function(){
+        for(var i in MetaUI._instances){
+            MetaUI._instances[i].rebuild();
+        }
+    }
+
+    /**
+     * Rebuild all the button on the toolbar to update it's state.
+     * @method rebuild
+     */
+    MetaUI.prototype.rebuild = function(){
+        // strip evrything from the div
+        // which is probabli metainner.
+        // or this.element.
+        this.metainner.empty();
+        //this.add_raw_edit_button()
+
+
+        var cdict = MetaUI._callback_dict;
+        var preset = MetaUI._button_list;
+        // Yes we iterate on the class varaible, not the instance one.
+        for ( var index in MetaUI._button_list){
+            var local_div = $('<div/>').addClass('button_container');
+            this.metainner.append(local_div)
+            cdict[preset[index]](local_div,this.cell)
+        }
+
+    }
+
+    var raw_edit = function(cell){
+
+        var md = cell.metadata
+
+        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("Metadata (I know what I'm dooing and I won't complain if it breaks my notebook)")
+                        )
+                        .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)
+                        {
+                           alert('invalid json');
+                        }
+                    },
+                    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);
+    }
+
+    MetaUI.register_callback('example.rawedit',add_raw_edit_button);
+    var example_preset = []
+    example_preset.push('example.rawedit');
+
+
+    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);
+    }
+
+    MetaUI.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)});
+        button.click(function(){
+                    var v = cell.metadata.foo;
+                    cell.metadata.foo = !v;
+                    button.button("option","label",String(!v));
+                })
+       button_container.append(button);
+    }
+
+    MetaUI.register_callback('example.toggle',toggle_test);
+    example_preset.push('example.toggle');
+
+    var checkbox_test =  function(div, cell) {
+        var button_container = $(div)
+
+        var chkb = $('<input/>').attr('type','checkbox');
+        var lbl = $('<label/>').append($('<span/>').text('bar :').css('font-size','77%'));
+        lbl.append(chkb);
+        chkb.attr("checked",cell.metadata.bar);
+        chkb.click(function(){
+                    var v = cell.metadata.bar;
+                    cell.metadata.bar = !v;
+                    chkb.attr("checked",!v);
+                })
+       button_container.append($('<div/>').append(lbl));
+
+    }
+
+    MetaUI.register_callback('example.checkbox',checkbox_test);
+    example_preset.push('example.checkbox');
+
+    var select_test =  function(div, cell) {
+        var button_container = $(div)
+
+        var select = $('<select/>');
+
+        select.append($('<option/>').attr('value','foo').text('foo'));
+        select.append($('<option/>').attr('value','bar').text('bar'));
+        select.append($('<option/>').attr('value','qux').text('qux'));
+        select.append($('<option/>').attr('value','zip').text('zip'));
+        select.val(cell.metadata.option);
+        select.change(function(){
+                cell.metadata.option = select.val();
+                });
+       button_container.append($('<div/>').append(select));
+
+    }
+
+    MetaUI.register_callback('example.select',select_test);
+    example_preset.push('example.select');
+
+    MetaUI.register_preset('example',example_preset);
+    MetaUI.register_preset('foo',['example.select','example.select']);
+    MetaUI.set_preset('example');
+
+    IPython.MetaUI = MetaUI;
+
+    return IPython;
+}(IPython));

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

@@ -29,6 +29,7 b' span#notebook_name {'
     font-size: 146.5%;
 }
 
+
 .ui-menubar-item .ui-button .ui-button-text {
     padding: 0.4em 1.0em;
     font-size: 100%;
@@ -145,6 +146,7 b' div.ui-widget-content {'
 
 .cell {
     border: 1px solid transparent;
+    position: relative;
 }
 
 div.cell {

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

@@ -163,6 +163,7 b' var IPython = (function (IPython) {'
         if (data.metadata !== undefined) {
             this.metadata = data.metadata;
         }
+        this.metaui.rebuild();
     };
 
 

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

@@ -58,7 +58,10 b' var IPython = (function (IPython) {'
 
     /** @method create_element */
     CodeCell.prototype.create_element = function () {
+        this.metaui = new IPython.MetaUI(this);
+
         var cell =  $('<div></div>').addClass('cell border-box-sizing code_cell vbox');
+        cell.append(this.metaui.element);
         cell.attr('tabindex','2');
         var input = $('<div></div>').addClass('input hbox');
         input.append($('<div/>').addClass('prompt input_prompt'));

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

@@ -116,6 +116,16 b' var IPython = (function (IPython) {'
                 }
             ],'run_int');
 
+        this.add_buttons_group([
+                {
+                    id : 'show_meta',
+                    label : 'Show Per Cell Toolbar',
+                    icon : 'ui-icon-image',
+                    callback : function () {
+                    $('body').toggleClass('editmetaon');
+                        }
+                }
+            ],'meta_on');
 
     };
 

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

@@ -42,7 +42,9 b' var IPython = (function (IPython) {'
      * @private
      */
     TextCell.prototype.create_element = function () {
-        var cell = $("<div>").addClass('cell text_cell border-box-sizing');
+        var cell = $("<div>").addClass('cell text_cell border-box-sizing vbox');
+        this.metaui = new IPython.MetaUI(this);
+        cell.append(this.metaui.element);
         cell.attr('tabindex','2');
         var input_area = $('<div/>').addClass('text_cell_input border-box-sizing');
         this.code_mirror = CodeMirror(input_area.get(0), {

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

@@ -36,7 +36,7 b' var IPython = (function (IPython) {'
      *
      *  @example
      *
-     *      IPython.toolbar.add_button_group([
+     *      IPython.toolbar.add_buttons_group([
      *          {
      *            label:'my button',
      *            icon:'ui-icon-disk',

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

@@ -17,6 +17,7 b' window.mathjax_url = "{{mathjax_url}}";'
 <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/metaui.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" />
 
@@ -203,6 +204,7 b' data-notebook-id={{notebook_id}}'
 <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/metaui.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>