Help section implemented and working.

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

@@ -1,97 +1,100 b''
 
 //============================================================================
 // LeftPanel
 //============================================================================
 
 
 var IPython = (function (IPython) {
 
     var utils = IPython.utils;
 
     var LeftPanel = function (left_panel_selector, left_panel_splitter_selector) {
         this.left_panel_element = $(left_panel_selector);
         this.left_panel_splitter_element = $(left_panel_splitter_selector);
         this.expanded = true;
         this.width = 250;
         this.style();
         this.bind_events();
         this.create_children();
     };
 
 
     LeftPanel.prototype.style = function () {
         this.left_panel_splitter_element.addClass('border-box-sizing ui-widget ui-state-default');
         this.left_panel_element.addClass('border-box-sizing ui-widget');
         this.left_panel_element.width(this.width);
         this.left_panel_splitter_element.css({left : this.width});
     };
 
 
     LeftPanel.prototype.bind_events = function () {
         var that = this;
 
         this.left_panel_element.bind('collapse_left_panel', function () {
             that.left_panel_element.hide('fast');
             that.left_panel_splitter_element.animate({left : 0}, 'fast');
         });
 
         this.left_panel_element.bind('expand_left_panel', function () {
             that.left_panel_element.show('fast');
             that.left_panel_splitter_element.animate({left : that.width}, 'fast');
         });
 
         this.left_panel_splitter_element.hover(
             function () {
                 that.left_panel_splitter_element.addClass('ui-state-hover');
             },
             function () {
                 that.left_panel_splitter_element.removeClass('ui-state-hover');
             }
         );
 
         this.left_panel_splitter_element.click(function () {
             that.toggle();
         });
 
     };
 
 
     LeftPanel.prototype.create_children = function () {
         this.notebook_section = new IPython.NotebookSection();
         this.left_panel_element.append(this.notebook_section.element);
         this.cell_section = new IPython.CellSection();
         this.left_panel_element.append(this.cell_section.element);        
         this.kernel_section = new IPython.KernelSection();
         this.left_panel_element.append(this.kernel_section.element);   
+        this.help_section = new IPython.HelpSection();
+        this.left_panel_element.append(this.help_section.element);
+        this.help_section.collapse();
     }
 
     LeftPanel.prototype.collapse = function () {
         if (this.expanded === true) {
             this.left_panel_element.add($('div#notebook')).trigger('collapse_left_panel');
             this.expanded = false;
         };
     };
 
 
     LeftPanel.prototype.expand = function () {
         if (this.expanded !== true) {
             this.left_panel_element.add($('div#notebook')).trigger('expand_left_panel');
             this.expanded = true;
         };
     };
 
 
     LeftPanel.prototype.toggle = function () {
         if (this.expanded === true) {
             this.collapse();
         } else {
             this.expand();
         };
     };
 
     IPython.LeftPanel = LeftPanel;
 
     return IPython;
 
 }(IPython));
 

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

@@ -1,58 +1,32 b''
 
 //============================================================================
 // On document ready
 //============================================================================
 
 
 $(document).ready(function () {
 
     MathJax.Hub.Config({
         tex2jax: {
             inlineMath: [ ['$','$'], ["\\(","\\)"] ],
             displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
         },
         displayAlign: 'left', // Change this to 'center' to center equations.
         "HTML-CSS": {
             styles: {'.MathJax_Display': {"margin": 0}}
         }
     });
 
     $('div#notebook_app').addClass('border-box-sizing ui-widget ui-widget-content');
     $('div#notebook_panel').addClass('border-box-sizing ui-widget');
 
     IPython.layout_manager = new IPython.LayoutManager();
     IPython.pager = new IPython.Pager('div#pager', 'div#pager_splitter');
     IPython.left_panel = new IPython.LeftPanel('div#left_panel', 'div#left_panel_splitter');
     IPython.notebook = new IPython.Notebook('div#notebook');
 
     IPython.notebook.insert_code_cell_after();
     IPython.layout_manager.do_resize();
     IPython.pager.collapse();
-
-//    $("#menu_tabs").tabs();
-
-//    $("#help_toolbar").buttonset();
-
-//    $("#kernel_toolbar").buttonset();
-//    $("#interrupt_kernel").click(function () {IPython.notebook.kernel.interrupt();});
-//    $("#restart_kernel").click(function () {IPython.notebook.kernel.restart();});
-//    $("#kernel_status").addClass("status_idle");
-
-//    $("#move_cell").buttonset();
-//    $("#move_up").button("option", "icons", {primary:"ui-icon-arrowthick-1-n"});
-//    $("#move_up").button("option", "text", false);
-//    $("#move_up").click(function () {IPython.notebook.move_cell_up();});
-//    $("#move_down").button("option", "icons", {primary:"ui-icon-arrowthick-1-s"});
-//    $("#move_down").button("option", "text", false);
-//    $("#move_down").click(function () {IPython.notebook.move_cell_down();});
-
-//    $("#insert_delete").buttonset();
-//    $("#insert_cell_before").click(function () {IPython.notebook.insert_code_cell_before();});
-//    $("#insert_cell_after").click(function () {IPython.notebook.insert_code_cell_after();});
-//    $("#delete_cell").button("option", "icons", {primary:"ui-icon-closethick"});
-//    $("#delete_cell").button("option", "text", false);
-//    $("#delete_cell").click(function () {IPython.notebook.delete_cell();});
-
-
 });
 

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

@@ -1,215 +1,285 b''
 
 //============================================================================
 // Cell
 //============================================================================
 
 var IPython = (function (IPython) {
 
     var utils = IPython.utils;
 
     // Base PanelSection class
 
     var PanelSection = function () {
         if (this.section_name === undefined) {
             this.section_name = 'section';
         };
         this.create_element();
         if (this.element !== undefined) {
             this.bind_events();
         }
         this.expanded = true;
     };
 
 
     PanelSection.prototype.bind_events = function () {
         var that = this;
         this.header.click(function () {
             that.toggle();
         });
         this.header.hover(function () {
             that.header.toggleClass('ui-state-hover');
         });
     };
 
 
     PanelSection.prototype.create_element = function () {
         this.element = $('<div/>').attr('id',this.id());
         this.header = $('<h3>'+this.section_name+'</h3>').
             addClass('ui-widget ui-state-default section_header');
         this.content = $('<div/>').
             addClass('ui-widget section_content');
         this.element.append(this.header).append(this.content);
         this.create_children();
     };
 
 
     PanelSection.prototype.id = function () {
         return this.section_name.toLowerCase() + "_section";
     };
 
 
     PanelSection.prototype.expand = function () {
         if (!this.expanded) {
             this.content.slideDown('fast');
 //            this.header.addClass('ui-state-active');
 //            this.header.removeClass('ui-state-default');
             this.expanded = true;
         };
     };
 
 
     PanelSection.prototype.collapse = function () {
         if (this.expanded) {
             this.content.slideUp('fast');
 //            this.header.removeClass('ui-state-active');
 //            this.header.addClass('ui-state-default');
             this.expanded = false;
         };
     };
 
 
     PanelSection.prototype.toggle = function () {
         if (this.expanded === true) {
             this.collapse();
         } else {
             this.expand();
         };
     };
 
 
     PanelSection.prototype.create_children = function () {};
 
 
     // NotebookSection
 
     var NotebookSection = function () {
         this.section_name = "Notebook";
         PanelSection.apply(this, arguments);
     };
 
 
     NotebookSection.prototype = new PanelSection();
 
 
     // CellSection
 
     var CellSection = function () {
         this.section_name = "Cell";
         PanelSection.apply(this, arguments);
     };
 
 
     CellSection.prototype = new PanelSection();
 
 
     CellSection.prototype.bind_events = function () {
         PanelSection.prototype.bind_events.apply(this);
         this.content.find('#collapse_cell').click(function () {
             IPython.notebook.collapse();
         });
         this.content.find('#expand_cell').click(function () {
             IPython.notebook.expand();
         });
         this.content.find('#delete_cell').click(function () {
             IPython.notebook.delete_cell();
         });
         this.content.find('#insert_cell_above').click(function () {
             IPython.notebook.insert_code_cell_before();
         });
         this.content.find('#insert_cell_below').click(function () {
             IPython.notebook.insert_code_cell_after();
         });
         this.content.find('#move_cell_up').click(function () {
             IPython.notebook.move_cell_up();
         });
         this.content.find('#move_cell_down').click(function () {
             IPython.notebook.move_cell_down();
         });
         this.content.find('#to_code').click(function () {
             IPython.notebook.text_to_code();
         });
         this.content.find('#to_text').click(function () {
             IPython.notebook.code_to_text();
         });
         this.content.find('#run_selected_cell').click(function () {
             alert("Not Implemented");
         });
         this.content.find('#run_all_cells').click(function () {
             alert("Not Implemented");
         });
     };
 
 
     CellSection.prototype.create_children = function () {
 
         this.content.addClass('ui-helper-clearfix');
 
-        var row1 = $('<div>').addClass('cell_section_row ui-helper-clearfix').
+        var row0 = $('<div>').addClass('cell_section_row ui-helper-clearfix').
             append($('<span/>').addClass('cell_section_row_buttons').
                 append($('<button>X</button>').attr('id','delete_cell'))).
             append($('<span/>').html('Actions').addClass('cell_section_row_header'));
-        row1.find('#delete_cell').button();
-        this.content.append(row1);
+        row0.find('#delete_cell').button();
+        this.content.append(row0);
 
         var row1 = $('<div>').addClass('cell_section_row ui-helper-clearfix').
             append($('<span/>').attr('id','insert').addClass('cell_section_row_buttons').
                 append( $('<button>Above</button>').attr('id','insert_cell_above') ).
                 append( $('<button>Below</button>').attr('id','insert_cell_below') )).
             append($('<span/>').html('Insert').addClass('button_label'));
         row1.find('#insert').buttonset();
         this.content.append(row1);
 
         var row2 = $('<div>').addClass('cell_section_row ui-helper-clearfix').
             append($('<span/>').attr('id','move').addClass('cell_section_row_buttons').
                 append( $('<button>Up</button>').attr('id','move_cell_up') ).
                 append( $('<button>Down</button>').attr('id','move_cell_down') ) ).
             append($('<span/>').html('Move').addClass('button_label'));
         row2.find('#move').buttonset();
         this.content.append(row2);
 
         var row3 = $('<div>').addClass('cell_section_row ui-helper-clearfix').
             append($('<span/>').attr('id','cell_type').addClass('cell_section_row_buttons').
                 append( $('<button>Code</button>').attr('id','to_code') ).
                 append( $('<button>Text</button>').attr('id','to_text') ) ).
             append($('<span/>').html('Cell Type').addClass('button_label'));
         row3.find('#cell_type').buttonset();
         this.content.append(row3);
 
-        var row0 = $('<div>').addClass('cell_section_row ui-helper-clearfix').
+        var row1 = $('<div>').addClass('cell_section_row ui-helper-clearfix').
             append($('<span/>').attr('id','toggle_output').addClass('cell_section_row_buttons').
                 append( $('<button>Collapse</button>').attr('id','collapse_cell') ).
                 append( $('<button>Expand</button>').attr('id','expand_cell') ) ).
             append($('<span/>').html('Output').addClass('button_label'));
-        row0.find('#toggle_output').buttonset();
-        this.content.append(row0);
+        row1.find('#toggle_output').buttonset();
+        this.content.append(row1);
 
         var row0 = $('<div>').addClass('cell_section_row').
             append($('<span/>').attr('id','run_cells').addClass('cell_section_row_buttons').
                 append( $('<button>Selected</button>').attr('id','run_selected_cell') ).
                 append( $('<button>All</button>').attr('id','run_all_cells') ) ).
             append($('<span/>').html('Run').addClass('button_label'));
         row0.find('#run_cells').buttonset();
         this.content.append(row0);
     };
 
 
     // KernelSection
 
     var KernelSection = function () {
         this.section_name = "Kernel";
         PanelSection.apply(this, arguments);
     };
 
 
     KernelSection.prototype = new PanelSection();
 
 
+    KernelSection.prototype.bind_events = function () {
+        PanelSection.prototype.bind_events.apply(this);
+        this.content.find('#restart_kernel').click(function () {
+            IPython.notebook.kernel.restart();
+        });
+        this.content.find('#int_kernel').click(function () {
+            IPython.notebook.kernel.interrupt();
+        });
+    };
+
+
+    KernelSection.prototype.create_children = function () {
+
+        this.content.addClass('ui-helper-clearfix');
+
+        var row0 = $('<div>').addClass('cell_section_row ui-helper-clearfix').
+            append($('<span/>').attr('id','int_restart').addClass('cell_section_row_buttons').
+                append( $('<button>Interrupt</button>').attr('id','int_kernel') ).
+                append( $('<button>Restart</button>').attr('id','restart_kernel') )).
+            append($('<span/>').html('Actions').addClass('cell_section_row_header'));
+        row0.find('#int_restart').buttonset();
+        this.content.append(row0);
+    };
+
+
+    // HelpSection
+
+    var HelpSection = function () {
+        this.section_name = "Help";
+        PanelSection.apply(this, arguments);
+    };
+
+
+    HelpSection.prototype = new PanelSection();
+
+
+    HelpSection.prototype.bind_events = function () {
+        PanelSection.prototype.bind_events.apply(this);
+    };
+
+
+    HelpSection.prototype.create_children = function () {
+
+        this.content.addClass('ui-helper-clearfix');
+
+        var row0 = $('<div>').addClass('cell_section_row ui-helper-clearfix').
+            append($('<span/>').attr('id','help_buttons0').addClass('cell_section_row_buttons').
+                append( $('<button/>').attr('id','python_help').
+                    append( $('<a>Python</a>').attr('href','http://docs.python.org').attr('target','_blank') )).
+                append( $('<button/>').attr('id','ipython_help').
+                    append( $('<a>IPython</a>').attr('href','http://ipython.org/documentation.html').attr('target','_blank') )).
+                append( $('<button/>').attr('id','numpy_help').
+                    append( $('<a>NumPy</a>').attr('href','http://docs.scipy.org/doc/numpy/reference/').attr('target','_blank') ))).
+            append($('<span/>').html('Links').addClass('cell_section_row_header'));
+        row0.find('#help_buttons0').buttonset();
+        this.content.append(row0);
+
+        var row1 = $('<div>').addClass('cell_section_row ui-helper-clearfix').
+            append($('<span/>').attr('id','help_buttons1').addClass('cell_section_row_buttons').
+                append( $('<button/>').attr('id','matplotlib_help').
+                    append( $('<a>Matplotlib</a>').attr('href','http://matplotlib.sourceforge.net/').attr('target','_blank') )).
+                append( $('<button/>').attr('id','scipy_help').
+                    append( $('<a>SciPy</a>').attr('href','http://docs.scipy.org/doc/scipy/reference/').attr('target','_blank') )).
+                append( $('<button/>').attr('id','sympy_help').
+                    append( $('<a>SymPy</a>').attr('href','http://docs.sympy.org/dev/index.html').attr('target','_blank') )));
+        row1.find('#help_buttons1').buttonset();
+        this.content.append(row1);
+    };
+
     IPython.PanelSection = PanelSection;
     IPython.NotebookSection = NotebookSection;
     IPython.CellSection = CellSection;
     IPython.KernelSection = KernelSection;
+    IPython.HelpSection = HelpSection;
 
     return IPython;
 
 }(IPython));
 

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

@@ -1,123 +1,70 b''
 <!DOCTYPE HTML>
 <html>
 
 <head>
     <meta charset="utf-8">
 
     <title>IPython Notebook</title>
 
     <link rel="stylesheet" href="static/jquery/css/themes/aristo/jquery-wijmo.css" type="text/css" />
     <!-- <link rel="stylesheet" href="static/jquery/css/themes/rocket/jquery-wijmo.css" type="text/css" /> -->
 <!--    <link rel="stylesheet" href="static/jquery/css/themes/smoothness/jquery-ui-1.8.14.custom.css" type="text/css" />-->
 
     <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML" charset="utf-8"></script>
     <!-- <script type='text/javascript' src='static/mathjax/MathJax.js?config=TeX-AMS_HTML' charset='utf-8'></script> -->
     <script type="text/javascript">
     if (typeof MathJax == 'undefined') {
         console.log("Trying to load local copy of MathJax");
         document.write(unescape("%3Cscript type='text/javascript' src='static/mathjax/MathJax.js%3Fconfig=TeX-AMS_HTML' charset='utf-8'%3E%3C/script%3E"));
     }
     </script>
 
     <link rel="stylesheet" href="static/codemirror2/lib/codemirror.css">
     <link rel="stylesheet" href="static/codemirror2/mode/python/python.css">
 
     <link rel="stylesheet" href="static/css/layout.css" type="text/css" />
     <link rel="stylesheet" href="static/css/notebook.css" type="text/css" />
 
 </head>
 
 <body>
 
 <div id="header">
     <span id="ipython_notebook"><h1>IPython Notebook</h1></span>
 </div>
 
 <div id="notebook_app">
 
     <div id="left_panel"></div>
     <div id="left_panel_splitter"></div>
     <div id="notebook_panel">
         <div id="notebook"></div>
         <div id="pager_splitter"></div>
         <div id="pager"></div>
     </div>
 
 </div>
 
 <script src="static/jquery/js/jquery-1.6.2.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/jquery/js/jquery-ui-1.8.14.custom.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/jquery/js/jquery.autogrow.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/namespace.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/utils.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/cell.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/codecell.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/textcell.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/kernel.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/layout.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/pager.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/panelsection.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/leftpanel.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/notebook.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/notebook_main.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/codemirror2/lib/codemirror.js"></script>
 <script src="static/codemirror2/mode/python/python.js"></script>
 
 </body>
 
 </html>
 
 
-<!--<div id="tools">-->
-
-<!--<div id="menu_tabs">-->
-<!--    <span id="kernel_status">Idle</span>-->
-<!--    <ul>-->
-<!--        <li><a href="#cell_tab">Cell</a></li>-->
-<!--        <li><a href="#kernel_tab">Kernel</a></li>-->
-<!--        <li><a href="#help_tab">Help</a></li>-->
-<!--    </ul>-->
-<!--    <div id="cell_tab">-->
-<!--        <span id="cell_toolbar">-->
-<!--            <span id="move_cell">-->
-<!--                <button id="move_up">Move up</button>-->
-<!--                <button id="move_down">Move down</button>-->
-<!--            </span>-->
-<!--            <span id="insert_delete">-->
-<!--                <button id="insert_cell_before">Before</button>-->
-<!--                <button id="insert_cell_after">After</button>-->
-<!--                <button id="delete_cell">Delete</button>-->
-<!--            </span>-->
-<!--            <span id="cell_type">-->
-<!--                <button id="to_code">Code</button>-->
-<!--                <button id="to_text">Text</button>-->
-<!--            </span>-->
-<!--            <span id="sort">-->
-<!--                <button id="sort_cells">Sort</button>-->
-<!--            </span>-->
-<!--            <span id="toggle">-->
-<!--                <button id="collapse">Collapse</button>-->
-<!--                <button id="expand">Expand</button>-->
-<!--            </span>-->
-<!--        </span>-->
-<!--    </div>-->
-<!--    <div id="kernel_tab">-->
-<!--        <span id="kernel_toolbar">-->
-<!--            <button id="interrupt_kernel">Interrupt</button>-->
-<!--            <button id="restart_kernel">Restart</button>-->
-<!--        </span>-->
-<!--    </div>-->
-<!--    <div id="help_tab">-->
-<!--        <span id="help_toolbar">-->
-<!--            <button><a href="http://docs.python.org" target="_blank">Python</a></button>-->
-<!--            <button><a href="http://ipython.github.com/ipython-doc/dev/index.html" target="_blank">IPython</a></button>-->
-<!--            <button><a href="http://matplotlib.sourceforge.net/" target="_blank">Matplotlib</a></button>-->
-<!--            <button><a href="http://docs.scipy.org/doc/numpy/reference/" target="_blank">NumPy</a></button>-->
-<!--            <button><a href="http://docs.scipy.org/doc/scipy/reference/" target="_blank">SciPy</a></button>-->
-<!--            <button><a href="http://docs.sympy.org/dev/index.html" target="_blank">SymPy</a></button>-->
-<!--        </span>-->
-<!--    </div>-->
-<!--</div>-->
-
-<!--</div>-->
-