# ipython/ipython

### Subversion checkout URL

You can clone with
or
.

# Implement static publishing of HTML notebook#706

Merged
merged 3 commits into from
+68 −5

### 4 participants

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

 stefanv Implement static publishing of HTML notebook. 567f1c3
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.

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

 stefanv htmlnotebook: Suppress cell boundary when publishing. 1e86624
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.

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?

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.

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...

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.

Owner

Owner

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

Owner

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

Owner
 stefanv Refactor static printing. 968e3fe

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.

merged commit 968e3fe into ipython:htmlnotebook
Commits on Aug 17, 2011
1. stefanv authored
2. stefanv authored
Commits on Aug 18, 2011
1. stefanv authored
1  IPython/frontend/html/notebook/static/js/notebook_main.js
 @@ -26,6 +26,7 @@ $(document).ready(function () { IPython.pager = new IPython.Pager('div#pager', 'div#pager_splitter'); IPython.left_panel = new IPython.LeftPanel('div#left_panel', 'div#left_panel_splitter'); IPython.save_widget = new IPython.SaveWidget('span#save_widget'); + IPython.print_widget = new IPython.PrintWidget('span#print_widget'); IPython.notebook = new IPython.Notebook('div#notebook'); IPython.kernel_status_widget = new IPython.KernelStatusWidget('#kernel_status'); IPython.kernel_status_widget.status_idle(); 54 IPython/frontend/html/notebook/static/js/printwidget.js  @@ -0,0 +1,54 @@ +var IPython = (function (IPython) { + + var PrintWidget = function (selector) { + this.selector = selector; + if (this.selector !== undefined) { + this.element =$(selector); + this.style(); + this.bind_events(); + } + }; + + PrintWidget.prototype.style = function () { + this.element.find('button#print_notebook').button(); + }; + + PrintWidget.prototype.bind_events = function () { + var that = this; + this.element.find('button#print_notebook').click(function () { + that.print_notebook(); + }); + }; + + PrintWidget.prototype.enable = function () { + this.element.find('button#print_notebook').button('enable'); + }; + + PrintWidget.prototype.disable = function () { + this.element.find('button#print_notebook').button('disable'); + }; + + PrintWidget.prototype.print_notebook = function () { + var w = window.open('', '_blank', 'scrollbars=1,menubar=1'); + var html = '' + + $('head').clone().html() + + '' + + '' + +$('#notebook').clone().html() + + ''; + + w.document.open(); + w.document.write(html); + w.document.close(); + + return false; + }; + + IPython.PrintWidget = PrintWidget; + + return IPython; + +}(IPython));
13 IPython/frontend/html/notebook/static/js/savewidget.js
 @@ -84,20 +84,23 @@ var IPython = (function (IPython) { SaveWidget.prototype.status_save = function () { - this.element.find('span.ui-button-text').text('Save'); + this.element.find('button#save_notebook').button('option', 'label', 'Save'); this.element.find('button#save_notebook').button('enable'); - }; + IPython.print_widget.enable(); + }; SaveWidget.prototype.status_saving = function () { - this.element.find('span.ui-button-text').text('Saving'); + this.element.find('button#save_notebook').button('option', 'label', 'Saving'); this.element.find('button#save_notebook').button('disable'); - }; + IPython.print_widget.disable(); + }; SaveWidget.prototype.status_loading = function () { - this.element.find('span.ui-button-text').text('Loading'); + this.element.find('button#save_notebook').button('option', 'label', 'Loading'); this.element.find('button#save_notebook').button('disable'); + IPython.print_widget.disable(); };
5 IPython/frontend/html/notebook/templates/notebook.html
 @@ -68,6 +68,10 @@

Notebook

@@ -212,6 +216,7 @@

Help

+