From 5134212a4c9bde0e939a40a0cab0f8a6b5fe57d6 Mon Sep 17 00:00:00 2001
From: Matthias BUSSONNIER <bussonniermatthias@gmail.com>
Date: Wed, 22 Aug 2012 10:24:21 +0200
Subject: [PATCH 1/3] This create the ability to detach the pager

When detached, the pager is collapsed and it's content is send into it's
own window/tab depending of the browser configuration.
---
 .../html/notebook/static/css/notebook.css     |  6 +++-
 .../frontend/html/notebook/static/js/pager.js | 32 +++++++++++++++++++
 .../html/notebook/templates/notebook.html     |  6 +++-
 3 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/IPython/frontend/html/notebook/static/css/notebook.css b/IPython/frontend/html/notebook/static/css/notebook.css
index 4fa319656..ad961bdb7 100644
--- a/IPython/frontend/html/notebook/static/css/notebook.css
+++ b/IPython/frontend/html/notebook/static/css/notebook.css
@@ -112,6 +112,10 @@ div#pager_splitter {
     height: 8px;
 }
 
+#pager_container {
+    position : relative;
+}
+
 div#pager {
     padding: 15px;
     overflow: auto;
@@ -391,4 +395,4 @@ pre, code, kbd, samp { white-space: pre-wrap; }
 
 .js-error {
     color: darkred;
-}
\ No newline at end of file
+}
diff --git a/IPython/frontend/html/notebook/static/js/pager.js b/IPython/frontend/html/notebook/static/js/pager.js
index 4853a97c8..9788a291a 100644
--- a/IPython/frontend/html/notebook/static/js/pager.js
+++ b/IPython/frontend/html/notebook/static/js/pager.js
@@ -15,6 +15,7 @@ var IPython = (function (IPython) {
 
     var Pager = function (pager_selector, pager_splitter_selector) {
         this.pager_element = $(pager_selector);
+        this.pager_button_area = $('#pager_button_area');
         var that = this;
         this.percentage_height = 0.40;
         this.pager_splitter_element = $(pager_splitter_selector)
@@ -39,9 +40,23 @@ var IPython = (function (IPython) {
             });
         this.expanded = false;
         this.style();
+        this.create_button_area();
         this.bind_events();
     };
 
+    Pager.prototype.create_button_area = function(){
+        var that = this;
+        this.pager_button_area.append(
+            $('<a>').attr('role', "button")
+                    .addClass('ui-button')
+                    .click(function(){that.detach()})
+                    .attr('style','position: absolute; right: 10px;')
+                    .append(
+                        $('<span>').addClass("ui-icon ui-icon-arrowstop-l-n")
+                    )
+        )
+    };
+
     Pager.prototype.style = function () {
         this.pager_splitter_element.addClass('border-box-sizing ui-widget ui-state-default');
         this.pager_element.addClass('border-box-sizing ui-widget');
@@ -114,6 +129,23 @@ var IPython = (function (IPython) {
         this.pager_element.empty();
     };
 
+    Pager.prototype.detach = function(){
+        var w = window.open("","_blank")
+        $(w.document.head)
+        .append(
+                $('<link>')
+                .attr('rel',"stylesheet")
+                .attr('href',"/static/css/notebook.css")
+                .attr('type',"text/css")
+        );
+        var pager_body = $(w.document.body)
+            pager_body.attr('style','overflow:scroll');
+
+        pager_body.append(this.pager_element.children())
+        w.document.close();
+        this.collapse();
+
+    }
 
     Pager.prototype.append_text = function (text) {
         var toinsert = $("<div/>").addClass("output_area output_stream");
diff --git a/IPython/frontend/html/notebook/templates/notebook.html b/IPython/frontend/html/notebook/templates/notebook.html
index 44fd726ef..10f86e2e4 100644
--- a/IPython/frontend/html/notebook/templates/notebook.html
+++ b/IPython/frontend/html/notebook/templates/notebook.html
@@ -199,7 +199,11 @@ data-notebook-id={{notebook_id}}
     <div id="notebook_panel">
         <div id="notebook"></div>
         <div id="pager_splitter"></div>
-        <div id="pager"></div>
+        <div id="pager_container">
+            <div id='pager_button_area'>
+            </div>
+            <div id="pager"></div>
+        </div>
     </div>
 
 </div>

From 645ac8df8eff455d51ce3c21421605ea2631ac89 Mon Sep 17 00:00:00 2001
From: Matthias BUSSONNIER <bussonniermatthias@gmail.com>
Date: Wed, 22 Aug 2012 11:21:50 +0200
Subject: [PATCH 2/3] add tooltip to pager button

---
 IPython/frontend/html/notebook/static/js/pager.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/IPython/frontend/html/notebook/static/js/pager.js b/IPython/frontend/html/notebook/static/js/pager.js
index 9788a291a..2053f7e11 100644
--- a/IPython/frontend/html/notebook/static/js/pager.js
+++ b/IPython/frontend/html/notebook/static/js/pager.js
@@ -48,6 +48,7 @@ var IPython = (function (IPython) {
         var that = this;
         this.pager_button_area.append(
             $('<a>').attr('role', "button")
+                    .attr('title',"open the pager in an external window")
                     .addClass('ui-button')
                     .click(function(){that.detach()})
                     .attr('style','position: absolute; right: 10px;')

From 3119f11ba6ecbb8e0ffaeff3cc759d5edb1b8dd1 Mon Sep 17 00:00:00 2001
From: Bussonnier Matthias <bussonniermatthias@gmail.com>
Date: Sat, 15 Sep 2012 13:37:41 +0200
Subject: [PATCH 3/3] change detach icon and tab title

---
 IPython/frontend/html/notebook/static/js/pager.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/IPython/frontend/html/notebook/static/js/pager.js b/IPython/frontend/html/notebook/static/js/pager.js
index 2053f7e11..f7ae40193 100644
--- a/IPython/frontend/html/notebook/static/js/pager.js
+++ b/IPython/frontend/html/notebook/static/js/pager.js
@@ -53,7 +53,7 @@ var IPython = (function (IPython) {
                     .click(function(){that.detach()})
                     .attr('style','position: absolute; right: 10px;')
                     .append(
-                        $('<span>').addClass("ui-icon ui-icon-arrowstop-l-n")
+                        $('<span>').addClass("ui-icon ui-icon-extlink")
                     )
         )
     };
@@ -138,6 +138,9 @@ var IPython = (function (IPython) {
                 .attr('rel',"stylesheet")
                 .attr('href',"/static/css/notebook.css")
                 .attr('type',"text/css")
+        )
+        .append(
+                $('<title>').text("IPython Pager")
         );
         var pager_body = $(w.document.body)
             pager_body.attr('style','overflow:scroll');