Merge pull request #2127 from Carreau/jsToolbar

Ability to build toolbar in JS

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

@@ -0,0 +1,179 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();
+    };
+
+    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',
+                    icon : 'ui-icon-clipboard',
+                    callback : function () {
+                        IPython.notebook.paste_cell();
+                        }
+                }
+            ],'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'))
+                    .append($('<option/>').attr('value','heading7').text('Heading 7'))
+                    .append($('<option/>').attr('value','heading8').text('Heading 8'))
+                );
+    };
+
+    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/css/notebook.css

@@ -70,7 +70,7 b' span#notebook_name {'
     z-index: 10;
 }
 
-#toolbar {
+.toolbar {
     padding: 3px 15px;
 }
 

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

@@ -32,10 +32,10 b' var IPython = (function (IPython) {'
         }
         var menubar_height = $('div#menubar').outerHeight(true);
         var toolbar_height;
-        if ($('div#toolbar').css('display') === 'none') {
+        if ($('div#maintoolbar').css('display') === 'none') {
             toolbar_height = 0;
         } else {
-            toolbar_height = $('div#toolbar').outerHeight(true);
+            toolbar_height = $('div#maintoolbar').outerHeight(true);
         }
         return h-header_height-menubar_height-toolbar_height;  // content height
     }

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

@@ -48,7 +48,7 b' $(document).ready(function () {'
     IPython.notebook = new IPython.Notebook('div#notebook');
     IPython.save_widget = new IPython.SaveWidget('span#save_widget');
     IPython.menubar = new IPython.MenuBar('#menubar')
-    IPython.toolbar = new IPython.ToolBar('#toolbar')
+    IPython.toolbar = new IPython.MainToolBar('#maintoolbar')
     IPython.tooltip = new IPython.Tooltip()
     IPython.notification_area = new IPython.NotificationArea('#notification_area')
     IPython.notification_area.init_notification_widgets();

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

@@ -1,5 +1,5 b''
 //----------------------------------------------------------------------------
-//  Copyright (C) 2008-2011  The IPython Development Team
+//  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.
@@ -16,132 +16,76 b' var IPython = (function (IPython) {'
         if (this.selector !== undefined) {
             this.element = $(selector);
             this.style();
-            this.bind_events();
         }
     };
 
+    // add a group of button into the current toolbar.
+    //
+    // First argument : Mandatory
+    //      list of dict as argument, each dict should contain
+    //      3 mandatory keys and values :
+    //      label : string -- the text to show on hover
+    //      icon  : string -- the jQuery-ui icon to add on this button
+    //      callback : function -- the callback to execute on a click
+    //
+    //      and optionally an 'id' key that is assigned to the button element
+    //
+    // Second Argument, optional,
+    //      string reprensenting the id to give to the button group.
+    //
+    // Example
+    //
+    // IPython.toolbar.add_button_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"
+    //  )
+    //
+    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').
+            addClass('ui-widget ui-widget-content toolbar').
             css('border-top-style','none').
             css('border-left-style','none').
             css('border-right-style','none');
-        this.element.find('#cell_type').addClass('ui-widget ui-widget-content');
-        this.element.find('#save_b').button({
-            icons : {primary: 'ui-icon-disk'},
-            text : false
-        });
-        this.element.find('#cut_b').button({
-            icons: {primary: 'ui-icon-scissors'},
-            text : false
-        });
-        this.element.find('#copy_b').button({
-            icons: {primary: 'ui-icon-copy'},
-            text : false
-        });
-        this.element.find('#paste_b').button({
-            icons: {primary: 'ui-icon-clipboard'},
-            text : false
-        });
-        this.element.find('#cut_copy_paste').buttonset();
-        this.element.find('#move_up_b').button({
-            icons: {primary: 'ui-icon-arrowthick-1-n'},
-            text : false
-        });
-        this.element.find('#move_down_b').button({
-            icons: {primary: 'ui-icon-arrowthick-1-s'},
-            text : false
-        });
-        this.element.find('#move_up_down').buttonset();
-        this.element.find('#insert_above_b').button({
-            icons: {primary: 'ui-icon-arrowthickstop-1-n'},
-            text : false
-        });
-        this.element.find('#insert_below_b').button({
-            icons: {primary: 'ui-icon-arrowthickstop-1-s'},
-            text : false
-        });
-        this.element.find('#insert_above_below').buttonset();
-        this.element.find('#run_b').button({
-            icons: {primary: 'ui-icon-play'},
-            text : false
-        });
-        this.element.find('#interrupt_b').button({
-            icons: {primary: 'ui-icon-stop'},
-            text : false
-        });
-        this.element.find('#run_int').buttonset();
-    };
-
-
-    ToolBar.prototype.bind_events = function () {
-        var that = this;
-        this.element.find('#save_b').click(function () {
-            IPython.notebook.save_notebook();
-        });
-        this.element.find('#cut_b').click(function () {
-            IPython.notebook.cut_cell();
-        });
-        this.element.find('#copy_b').click(function () {
-            IPython.notebook.copy_cell();
-        });
-        this.element.find('#paste_b').click(function () {
-            IPython.notebook.paste_cell();
-        });
-        this.element.find('#move_up_b').click(function () {
-            IPython.notebook.move_cell_up();
-        });
-        this.element.find('#move_down_b').click(function () {
-            IPython.notebook.move_cell_down();
-        });
-        this.element.find('#insert_above_b').click(function () {
-            IPython.notebook.insert_cell_above('code');
-        });
-        this.element.find('#insert_below_b').click(function () {
-            IPython.notebook.insert_cell_below('code');
-        });
-        this.element.find('#run_b').click(function () {
-            IPython.notebook.execute_selected_cell();
-        });
-        this.element.find('#interrupt_b').click(function () {
-            IPython.notebook.kernel.interrupt();
-        });
-        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);
-            }
-        });
     };
 
 
     ToolBar.prototype.toggle = function () {
         this.element.toggle();
+        if (IPython.layout_manager != undefined) {
         IPython.layout_manager.do_resize();
+        }
     };
 
 

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

@@ -157,43 +157,7 b' data-notebook-id={{notebook_id}}'
 </div>
 
 
-<div id="toolbar">
-
-    <span>
-        <button id="save_b">Save</button>
-    </span>
-    <span id="cut_copy_paste">
-        <button id="cut_b" title="Cut Cell">Cut Cell</button>
-        <button id="copy_b" title="Copy Cell">Copy Cell</button>
-        <button id="paste_b" title="Paste Cell">Paste Cell</button>
-    </span>
-    <span id="move_up_down">
-        <button id="move_up_b" title="Move Cell Up">Move Cell Up</button>
-        <button id="move_down_b" title="Move Cell Down">Move Down</button>
-    </span>
-    <span id="insert_above_below">
-        <button id="insert_above_b" title="Insert Cell Above">Insert Cell Above</button>
-        <button id="insert_below_b" title="Insert Cell Below">Insert Cell Below</button>
-    </span>
-    <span id="run_int">
-        <button id="run_b" title="Run Cell">Run Cell</button>
-        <button id="interrupt_b" title="Interrupt">Interrupt</button>
-    </span>
-    <span>
-        <select id="cell_type">
-             <option value="code">Code</option>
-             <option value="markdown">Markdown</option>
-             <option value="raw">Raw Text</option>
-             <option value="heading1">Heading 1</option>
-             <option value="heading2">Heading 2</option>
-             <option value="heading3">Heading 3</option>
-             <option value="heading4">Heading 4</option>
-             <option value="heading5">Heading 5</option>
-             <option value="heading6">Heading 6</option>
-        </select>
-    </span>
-
-</div>
+<div id="maintoolbar"></div>
 
 <div id="main_app">
 
@@ -247,6 +211,7 b' data-notebook-id={{notebook_id}}'
 <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>