Left panel is now working.

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

@@ -0,0 +1,56 b''
+
+//============================================================================
+// Layout
+//============================================================================
+
+var IPython = (function (IPython) {
+
+    var LayoutManager = function () {
+        this.bind_events();
+    };
+
+
+    LayoutManager.prototype.bind_events = function () {
+        $(window).resize($.proxy(this.do_resize,this));
+    };
+
+
+    LayoutManager.prototype.do_resize = function () {
+        var win = $(window);
+        var w = win.width();
+        var h = win.height();
+        var header_height = $('div#header').outerHeight(true);
+        var app_height = h - header_height - 2;  // content height
+
+        $('div#notebook_app').height(app_height + 2);  // content+padding+border height
+
+        $('div#left_panel').height(app_height);
+
+        $('div#left_panel_splitter').height(app_height);
+
+        var left_panel_width = $('div#left_panel').outerWidth();
+        var left_panel_splitter_width = $('div#left_panel_splitter').outerWidth();
+        $('div#notebook_panel').height(app_height);
+        if (IPython.left_panel.expanded) {
+            $('div#notebook_panel').css({marginLeft : left_panel_width+left_panel_splitter_width});
+        } else {
+        $('div#notebook_panel').css({marginLeft : left_panel_splitter_width});
+        }
+
+
+        var pager_height = IPython.pager.percentage_height*app_height;
+        var pager_splitter_height = $('div#pager_splitter').outerHeight(true);
+        $('div#pager').height(pager_height);
+        if (IPython.pager.expanded) {
+            $('div#notebook').height(app_height-pager_height-pager_splitter_height);
+        } else {
+            $('div#notebook').height(app_height-pager_splitter_height);
+        }
+        console.log('resize: ', app_height);
+    };
+
+    IPython.LayoutManager = LayoutManager
+
+    return IPython;
+
+}(IPython));

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

@@ -0,0 +1,87 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();
+    };
+
+
+    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.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/css/notebook.css

@@ -111,8 +111,6 b' div#notebook_app {'
 }
 
 div#left_panel {
-    width: 200px;
-    min-height: 300px;
     overflow-y: auto;
     top: 0px;
     left: 0px;
@@ -131,7 +129,8 b' div#left_panel_splitter {'
 }
 
 div#notebook_panel {
-    margin: 0px 0px 0px 209px;
+/*    The L margin will be set in the Javascript code*/
+    margin: 0px 0px 0px 0px;
     padding: 0px;
 }
 
@@ -150,7 +149,6 b' div#pager_splitter {'
 }
 
 div#pager {
-    height: 200px;
     overflow: auto;
 }
 

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

@@ -25,6 +25,7 b' var IPython = (function (IPython) {'
 
 
     Notebook.prototype.style = function () {
+        $('div#notebook').addClass('border-box-sizing');
     };
 
 
@@ -96,6 +97,20 b' var IPython = (function (IPython) {'
             var new_height = app_height - pager_height - splitter_height; 
             that.element.animate({height : new_height + 'px'}, 'fast');
         });
+
+        this.element.bind('collapse_left_panel', function () {
+            var splitter_width = $('div#left_panel_splitter').outerWidth(true);
+            var new_margin = splitter_width;
+            $('div#notebook_panel').animate({marginLeft : new_margin + 'px'}, 'fast');
+        });
+
+        this.element.bind('expand_left_panel', function () {
+            var splitter_width = $('div#left_panel_splitter').outerWidth(true);
+            var left_panel_width = IPython.left_panel.width;
+            var new_margin = splitter_width + left_panel_width;
+            console.log('expand', splitter_width, left_panel_width, new_margin);
+            $('div#notebook_panel').animate({marginLeft : new_margin + 'px'}, 'fast');
+        });
     };
 
 

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

@@ -6,26 +6,6 b''
 
 $(document).ready(function () {
 
-
-    $('div#notebook_app').addClass('border-box-sizing ui-widget ui-widget-content');
-    $('div#left_panel').addClass('border-box-sizing ui-widget');
-    $('div#left_panel_splitter').addClass('border-box-sizing ui-widget ui-state-default');
-    $('div#notebook_panel').addClass('border-box-sizing ui-widget');
-    $('div#notebook').addClass('border-box-sizing');
-
-    $('div#left_panel_splitter').click(function () {
-        $('div#left_panel').toggle('fast');
-    });
-
-    $('div#left_panel_splitter').hover(
-        function () {
-            $('div#left_panel_splitter').addClass('ui-state-hover');
-        },
-        function () {
-            $('div#left_panel_splitter').removeClass('ui-state-hover');
-        }
-    );
-
     MathJax.Hub.Config({
         tex2jax: {
             inlineMath: [ ['$','$'], ["\\(","\\)"] ],
@@ -37,34 +17,17 b' $(document).ready(function () {'
         }
     });
 
-    var do_resize = function () {
-        var win = $(window);
-        var w = win.width();
-        var h = win.height();
-        var header_height = $('div#header').outerHeight(true);
-        var app_height = h - header_height - 2;  // content height
-        var pager_height = $('div#pager').outerHeight(true);
-        var pager_splitter_height = $('div#pager_splitter').outerHeight(true);
-        $('div#notebook_app').height(app_height + 2);  // content+padding+border height
-        $('div#left_panel').height(app_height);
-        $('div#left_panel_splitter').height(app_height);
-        $('div#notebook_panel').height(app_height);
-        if (IPython.pager.expanded) {
-            $('div#notebook').height(app_height-pager_height-pager_splitter_height);
-        } else {
-            $('div#notebook').height(app_height-pager_splitter_height);
-        }
-        console.log('resize: ', app_height);
-    };
-
-    $(window).resize(do_resize);
-
-    IPython.notebook = new IPython.Notebook('div#notebook');
-    IPython.notebook.insert_code_cell_after();
+    $('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');
 
-    do_resize();
+    IPython.notebook.insert_code_cell_after();
+    IPython.layout_manager.do_resize();
+    IPython.pager.collapse();
 
 //    $("#menu_tabs").tabs();
 

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

@@ -7,17 +7,18 b' var IPython = (function (IPython) {'
 
     var utils = IPython.utils;
 
-    var Pager = function (pager_selector, pager_toggle_selector) {
+    var Pager = function (pager_selector, pager_splitter_selector) {
         this.pager_element = $(pager_selector);
-        this.pager_toggle_element = $(pager_toggle_selector);
+        this.pager_splitter_element = $(pager_splitter_selector);
         this.expanded = true;
+        this.percentage_height = 0.30;
         this.style();
         this.bind_events();
     };
 
 
     Pager.prototype.style = function () {
-        this.pager_toggle_element.addClass('border-box-sizing ui-widget ui-state-default');
+        this.pager_splitter_element.addClass('border-box-sizing ui-widget ui-state-default');
         this.pager_element.addClass('border-box-sizing ui-widget');
     };
 
@@ -33,18 +34,19 b' var IPython = (function (IPython) {'
             that.pager_element.show('fast');
         });
 
-        this.pager_toggle_element.hover(
+        this.pager_splitter_element.hover(
             function () {
-                that.pager_toggle_element.addClass('ui-state-hover');
+                that.pager_splitter_element.addClass('ui-state-hover');
             },
             function () {
-                that.pager_toggle_element.removeClass('ui-state-hover');
+                that.pager_splitter_element.removeClass('ui-state-hover');
             }
         );
 
-        this.pager_toggle_element.click(function () {
+        this.pager_splitter_element.click(function () {
             that.toggle();
         });
+
     };
 
 

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

@@ -54,7 +54,9 b''
 <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/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>