Skip to content
This repository

Implement static publishing of HTML notebook #706

Merged
merged 3 commits into from over 2 years ago

4 participants

Stefan van der Walt Fernando Perez Brian E. Granger Min RK
Stefan van der Walt

Add a publish button that takes the current "notebook" div and embeds it inside a clean page, ready for printing or saving.

Fernando Perez
Owner

I won't do the merge because I think @ellisonbg should have a look at it (as well as @minrk) in case you disagree with any of the JS decisions. But I think the functionality is perfect and we should merge this in now before we merge the whole #705, so that when the NB lands it's pretty much fully operational.

Stefan van der Walt

One slight tweak I'll make later this evening: not to display the current cell highlight.

Brian E. Granger
Owner

The save widget should only contain logic and HTML tags related to saving the notebook. There are two options:

  1. We put the button in the "Notebook" section of the left panel (see panelsection for that code).
  2. We put the button in a span right after the save widget span and keep it up top.

I have been trying to keep the header area clear of most things so my initial though is to do 1, but I am open to 2. What do others think?

Also, this capability should be called "Print" as we plan on having "Publish" be something that is richer (with a static URL) and includes a notion of sharing. This is more of a lightweight on the fly printing capability.

Fernando Perez
Owner

:) Actually Stefan had called it print, and I suggested 'publish' after our conversation the other night. But he's actually also started to play with gist upload functionality, so you're right that we should keep the 'publish' name for something else.

However, I don't think that 'print' is the right name, because what this gives is a static html version, that can both be saved to disk or printed. So I wonder if 'View HTML' wouldn't be a better name... Thoughts?

Min RK
Owner

This is exactly what the GMail 'print' button does - it loads a separate HTML view, that is printer-friendly. That page also triggers the browser's print via javascript, but I'm not sure that it always has, since that didn't used to be a reliable API in browsers.

Fernando Perez
Owner

Yes, but just because gmail does it doesn't mean it's right :) Further, in that case they do pop up the print dialog directly, which makes more sense. But I don't want ours to pop up a print dialog automatically, as in many cases you may want this for reasons other than actual printing. So I think we should state what the button does: it gives a static view of the notebook...

Obviously the downside is that people looking to print may do the wrong thing and try to print the active version...

How about calling it 'Print/HTML'? And not popping the print dialog automatically. Then it's clear that's the way to print, but also to get a static html view...

Min RK
Owner

One slight issue I found when testing with the quantum_computing example:

Some math output gets center-aligned. I think I recall there being a tweak to force left alignment somewhere in the notebook.

Brian E. Granger
Owner

What about "Print Preview"?

Brian E. Granger
Owner

@minrk: Hmm, I don't see any center justified math. Can you give more information or sent me a screen shot?

Min RK
Owner

Note that it's fine in the notebook itself, but multiline equations are centered in the print output:

Fernando Perez
Owner
Stefan van der Walt

I pulled out the printing functionality into printwidget.js, and moved the button to the panel.

The centering of maths is due to MathJax inserting a "text-align: center;" around the maths. Not sure how to override that easily.

Brian E. Granger ellisonbg merged commit 968e3fe into from August 18, 2011
Brian E. Granger ellisonbg closed this August 18, 2011
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
1  IPython/frontend/html/notebook/static/js/notebook_main.js
@@ -26,6 +26,7 @@ $(document).ready(function () {
26 26
     IPython.pager = new IPython.Pager('div#pager', 'div#pager_splitter');
27 27
     IPython.left_panel = new IPython.LeftPanel('div#left_panel', 'div#left_panel_splitter');
28 28
     IPython.save_widget = new IPython.SaveWidget('span#save_widget');
  29
+    IPython.print_widget = new IPython.PrintWidget('span#print_widget');
29 30
     IPython.notebook = new IPython.Notebook('div#notebook');
30 31
     IPython.kernel_status_widget = new IPython.KernelStatusWidget('#kernel_status');
31 32
     IPython.kernel_status_widget.status_idle();
54  IPython/frontend/html/notebook/static/js/printwidget.js
... ...
@@ -0,0 +1,54 @@
  1
+var IPython = (function (IPython) {
  2
+
  3
+    var PrintWidget = function (selector) {
  4
+        this.selector = selector;
  5
+        if (this.selector !== undefined) {
  6
+            this.element = $(selector);
  7
+            this.style();
  8
+            this.bind_events();
  9
+        }
  10
+    };
  11
+
  12
+    PrintWidget.prototype.style = function () {
  13
+        this.element.find('button#print_notebook').button();
  14
+    };
  15
+
  16
+    PrintWidget.prototype.bind_events = function () {
  17
+        var that = this;
  18
+        this.element.find('button#print_notebook').click(function () {
  19
+            that.print_notebook();
  20
+        });
  21
+    };
  22
+
  23
+    PrintWidget.prototype.enable = function () {
  24
+        this.element.find('button#print_notebook').button('enable');
  25
+    };
  26
+
  27
+    PrintWidget.prototype.disable = function () {
  28
+        this.element.find('button#print_notebook').button('disable');
  29
+    };
  30
+
  31
+    PrintWidget.prototype.print_notebook = function () {
  32
+        var w = window.open('', '_blank', 'scrollbars=1,menubar=1');
  33
+        var html = '<html><head>' +
  34
+                   $('head').clone().html() +
  35
+                   '<style type="text/css">' +
  36
+                   '@media print { body { overflow: visible !important; } }' +
  37
+                   '.ui-widget-content { border: 0px; }' +
  38
+                   '</style>' +
  39
+                   '</head><body style="overflow: auto;">' +
  40
+                   $('#notebook').clone().html() +
  41
+                   '</body></html>';
  42
+
  43
+        w.document.open();
  44
+        w.document.write(html);
  45
+        w.document.close();
  46
+
  47
+        return false;
  48
+    };
  49
+
  50
+    IPython.PrintWidget = PrintWidget;
  51
+    
  52
+    return IPython;
  53
+
  54
+}(IPython));
13  IPython/frontend/html/notebook/static/js/savewidget.js
@@ -84,20 +84,23 @@ var IPython = (function (IPython) {
84 84
 
85 85
 
86 86
     SaveWidget.prototype.status_save = function () {
87  
-        this.element.find('span.ui-button-text').text('Save');
  87
+        this.element.find('button#save_notebook').button('option', 'label', 'Save');
88 88
         this.element.find('button#save_notebook').button('enable');
89  
-    };    
  89
+        IPython.print_widget.enable();
  90
+    };
90 91
 
91 92
 
92 93
     SaveWidget.prototype.status_saving = function () {
93  
-        this.element.find('span.ui-button-text').text('Saving');
  94
+        this.element.find('button#save_notebook').button('option', 'label', 'Saving');
94 95
         this.element.find('button#save_notebook').button('disable');
95  
-    };    
  96
+        IPython.print_widget.disable();
  97
+    };
96 98
 
97 99
 
98 100
     SaveWidget.prototype.status_loading = function () {
99  
-        this.element.find('span.ui-button-text').text('Loading');
  101
+        this.element.find('button#save_notebook').button('option', 'label', 'Loading');
100 102
         this.element.find('button#save_notebook').button('disable');
  103
+        IPython.print_widget.disable();
101 104
     };    
102 105
 
103 106
 
5  IPython/frontend/html/notebook/templates/notebook.html
@@ -68,6 +68,10 @@ <h3 class="section_header">Notebook</h3>
68 68
                         </select>
69 69
                     </span>
70 70
                     <span class="section_row_buttons">
  71
+                        <span id="print_widget">
  72
+                            <button id="print_notebook">Print/HTML</button>
  73
+                        </span>
  74
+
71 75
                         <button id="download_notebook">Export</button>
72 76
                     </span>
73 77
                 </div>
@@ -212,6 +216,7 @@ <h3 class="section_header">Help</h3>
212 216
 <script src="static/js/savewidget.js" type="text/javascript" charset="utf-8"></script>
213 217
 <script src="static/js/pager.js" type="text/javascript" charset="utf-8"></script>
214 218
 <script src="static/js/panelsection.js" type="text/javascript" charset="utf-8"></script>
  219
+<script src="static/js/printwidget.js" type="text/javascript" charset="utf-8"></script>
215 220
 <script src="static/js/leftpanel.js" type="text/javascript" charset="utf-8"></script>
216 221
 <script src="static/js/notebook.js" type="text/javascript" charset="utf-8"></script>
217 222
 <script src="static/js/notebook_main.js" type="text/javascript" charset="utf-8"></script>
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.