From 198168962e480b326393a7bd5e67e8a7f4596ba9 2012-09-18 20:28:00
From: Bradley M. Froehle <brad.froehle@gmail.com>
Date: 2012-09-18 20:28:00
Subject: [PATCH] Merge pull request #2326 from Carreau/detachable-pager

Detachable pager in notebook.
---

diff --git a/IPython/frontend/html/notebook/static/css/notebook.css b/IPython/frontend/html/notebook/static/css/notebook.css
index d5ddb6d..27f72ce 100644
--- a/IPython/frontend/html/notebook/static/css/notebook.css
+++ b/IPython/frontend/html/notebook/static/css/notebook.css
@@ -122,6 +122,10 @@ div#pager_splitter {
     height: 8px;
 }
 
+#pager_container {
+    position : relative;
+}
+
 div#pager {
     padding: 15px;
     overflow: auto;
diff --git a/IPython/frontend/html/notebook/static/js/pager.js b/IPython/frontend/html/notebook/static/js/pager.js
index 4853a97..f7ae401 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,24 @@ 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")
+                    .attr('title',"open the pager in an external window")
+                    .addClass('ui-button')
+                    .click(function(){that.detach()})
+                    .attr('style','position: absolute; right: 10px;')
+                    .append(
+                        $('<span>').addClass("ui-icon ui-icon-extlink")
+                    )
+        )
+    };
+
     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 +130,26 @@ 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")
+        )
+        .append(
+                $('<title>').text("IPython Pager")
+        );
+        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 69d99b7..b2bbbbf 100644
--- a/IPython/frontend/html/notebook/templates/notebook.html
+++ b/IPython/frontend/html/notebook/templates/notebook.html
@@ -200,7 +200,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>