Refactoring pager into its own class.

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

@@ -0,0 +1,70
+
+//============================================================================
+// Pager
+//============================================================================
+
+var IPython = (function (IPython) {
+
+    var utils = IPython.utils;
+
+    var Pager = function (pager_selector, pager_toggle_selector) {
+        this.pager_element = $(pager_selector);
+        this.pager_toggle_element = $(pager_toggle_selector);
+        this.style();
+        this.bind_events();
+        this.collapse();
+    };
+
+
+    Pager.prototype.style = function () {
+        this.pager_toggle_element.addClass('border-box-sizing ui-widget ui-widget-header')
+        this.pager_element.addClass('border-box-sizing')
+    };
+
+
+    Pager.prototype.bind_events = function () {
+        var that = this;
+        this.pager_toggle_element.click(function () {
+            that.pager_element.toggle('fast');
+        });
+
+        this.pager_toggle_element.hover(
+            function () {
+                that.pager_toggle_element.addClass('ui-state-hover');
+            },
+            function () {
+                that.pager_toggle_element.removeClass('ui-state-hover');
+            }
+        );
+    };
+
+
+    Pager.prototype.collapse = function () {
+        this.pager_element.hide('fast');
+    };
+
+
+    Pager.prototype.expand = function () {
+        this.pager_element.show('fast');
+    };
+
+
+    Pager.prototype.clear = function (text) {
+        this.pager_element.empty();
+    };
+
+
+    Pager.prototype.append_text = function (text) {
+        var toinsert = $("<div/>").addClass("output_area output_stream monospace-font");
+        toinsert.append($("<pre/>").addClass("monospace-font").
+            html(utils.fixConsole(text)));
+        this.pager_element.append(toinsert);
+    };   
+
+
+    IPython.Pager = Pager;
+
+    return IPython;
+
+}(IPython));
+

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

@@ -18,11 +18,17 var IPython = (function (IPython) {
         this.notebook_load_re = /%notebook load/
         this.notebook_save_re = /%notebook save/
         this.notebook_filename_re = /(\w)+.ipynb/
+        this.style();
         this.bind_events();
         this.start_kernel();
     };
 
 
+    Notebook.prototype.style = function () {
+        this.element.addClass('vbox box-flex1 border-box-sizing');
+    };
+
+
     Notebook.prototype.bind_events = function () {
         var that = this;
         $(document).keydown(function (event) {
@@ -390,18 +396,16 var IPython = (function (IPython) {
 
     Notebook.prototype.handle_payload = function (payload) {
         var l = payload.length;
-        var element = $('div#pager');
         if (l > 0) {
-            element.show();
+            IPython.pager.clear();
+            IPython.pager.expand();
         };
         for (var i=0; i<l; i++) {
-            var toinsert = $("<div/>").addClass("output_area output_stream monospace-font");
-            toinsert.append($("<pre/>").addClass("monospace-font").
-                html(utils.fixConsole(payload[i].text)));
-            element.append(toinsert);
+            IPython.pager.append_text(payload[i].text);
         };
     };
 
+
     Notebook.prototype.handle_iopub_reply = function (e) {
         reply = $.parseJSON(e.data);
         var content = reply.content;

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

@@ -9,26 +9,8 $(document).ready(function () {
     $('div#wrapper').addClass('vbox border-box-sizing')
     $('div#notebook_app').addClass('hbox box-flex1 border-box-sizing')
     $('div#left_panel').addClass('vbox border-box-sizing ui-widget ui-widget-content')
-    $('div#pager_splitter').addClass('border-box-sizing ui-widget ui-widget-header')
-    $('div#notebook_panel').addClass('vbox box-flex1 border-box-sizing ui-widget ui-widget-content')
-    $('div#notebook').addClass('vbox box-flex1 border-box-sizing')
     $('div#left_panel_splitter').addClass('border-box-sizing ui-widget ui-widget-header')
-    $('div#pager').addClass('border-box-sizing')
-
-    $('div#pager_splitter').click(function () {
-        $('div#pager').toggle('fast');
-    });
-
-    $('div#pager_splitter').hover(
-        function () {
-            $('div#pager_splitter').addClass('ui-state-hover');
-        },
-        function () {
-            $('div#pager_splitter').removeClass('ui-state-hover');
-        }
-    );
-
-    $('div#pager').hide();
+    $('div#notebook_panel').addClass('vbox box-flex1 border-box-sizing ui-widget ui-widget-content')
 
     $('div#left_panel_splitter').click(function () {
         $('div#left_panel').toggle('fast');
@@ -54,43 +36,50 $(document).ready(function () {
         }
     });
 
+//    $('div#notebook').scroll(function (e) {
+//        console.log(e);
+//        e.preventDefault();
+//    });
+
     IPython.notebook = new IPython.Notebook('div#notebook');
     IPython.notebook.insert_code_cell_after();
 
-    $("#menu_tabs").tabs();
+    IPython.pager = new IPython.Pager('div#pager', 'div#pager_splitter');
+
+//    $("#menu_tabs").tabs();
 
-    $("#help_toolbar").buttonset();
+//    $("#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");
+//    $("#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();});
+//    $("#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();});
+//    $("#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();});
 
-    $("#cell_type").buttonset();
-    $("#to_code").click(function () {IPython.notebook.text_to_code();});
-    $("#to_text").click(function () {IPython.notebook.code_to_text();});
+//    $("#cell_type").buttonset();
+//    $("#to_code").click(function () {IPython.notebook.text_to_code();});
+//    $("#to_text").click(function () {IPython.notebook.code_to_text();});
 
-    $("#sort").buttonset();
-    $("#sort_cells").click(function () {IPython.notebook.sort_cells();});
+//    $("#sort").buttonset();
+//    $("#sort_cells").click(function () {IPython.notebook.sort_cells();});
 
-    $("#toggle").buttonset();
-    $("#collapse").click(function () {IPython.notebook.collapse();});
-    $("#expand").click(function () {IPython.notebook.expand();});
+//    $("#toggle").buttonset();
+//    $("#collapse").click(function () {IPython.notebook.collapse();});
+//    $("#expand").click(function () {IPython.notebook.expand();});
 
 });
 

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

@@ -58,6 +58,7
 <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/pager.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>