Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Implement static publishing of HTML notebook #706

Merged
merged 3 commits into from

4 participants

@stefanv

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

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

@stefanv

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

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

@fperez
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?

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

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

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

@ellisonbg
Owner

What about "Print Preview"?

@ellisonbg
Owner

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

@minrk
Owner

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

@fperez
Owner
@stefanv

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.

@ellisonbg ellisonbg merged commit 968e3fe into from
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Aug 17, 2011
  1. @stefanv
  2. @stefanv
Commits on Aug 18, 2011
  1. @stefanv

    Refactor static printing.

    stefanv authored
This page is out of date. Refresh to see the latest.
View
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();
View
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 = '<html><head>' +
+ $('head').clone().html() +
+ '<style type="text/css">' +
+ '@media print { body { overflow: visible !important; } }' +
+ '.ui-widget-content { border: 0px; }' +
+ '</style>' +
+ '</head><body style="overflow: auto;">' +
+ $('#notebook').clone().html() +
+ '</body></html>';
+
+ w.document.open();
+ w.document.write(html);
+ w.document.close();
+
+ return false;
+ };
+
+ IPython.PrintWidget = PrintWidget;
+
+ return IPython;
+
+}(IPython));
View
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();
};
View
5 IPython/frontend/html/notebook/templates/notebook.html
@@ -68,6 +68,10 @@ <h3 class="section_header">Notebook</h3>
</select>
</span>
<span class="section_row_buttons">
+ <span id="print_widget">
+ <button id="print_notebook">Print/HTML</button>
+ </span>
+
<button id="download_notebook">Export</button>
</span>
</div>
@@ -212,6 +216,7 @@ <h3 class="section_header">Help</h3>
<script src="static/js/savewidget.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/panelsection.js" type="text/javascript" charset="utf-8"></script>
+<script src="static/js/printwidget.js" type="text/javascript" charset="utf-8"></script>
<script src="static/js/leftpanel.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>
Something went wrong with that request. Please try again.