Merge remote-tracking branch 'hakimel-gh/master'

* hakimel-gh/master:
  new phantom pdf export script that works with 3.4.0 hakimel#1815
  updated pdf docs
  update readme re: pdf exports hakimel#1823
  Update README.md to include block for pdf printing
  Update README.md
  3.4.1
  adjust pdf margins instead of heights to fix hakimel#1804
  additional fix for empty pages in pdf exports hakimel#1804
  fix empty pages in pdf exports (closes hakimel#1804)
  correct grunt option usage
  For a fragment: allow to show a separate note defined in it

README.md

@@ -847,9 +847,24 @@ Reveal.initialize({
 Presentations can be exported to PDF via a special print stylesheet. This feature requires that you use [Google Chrome](http://google.com/chrome) or [Chromium](https://www.chromium.org/Home) and to be serving the presention from a webserver.
 Here's an example of an exported presentation that's been uploaded to SlideShare: http://www.slideshare.net/hakimel/revealjs-300.
 
+### Page size
 Export dimensions are inferred from the configured [presentation size](#presentation-size). Slides that are too tall to fit within a single page will expand onto multiple pages. You can limit how many pages a slide may expand onto using the `pdfMaxPagesPerSlide` config option, for example `Reveal.configure({ pdfMaxPagesPerSlide: 1 })` ensures that no slide ever grows to more than one printed page.
 
-1. Open your presentation with `print-pdf` included in the query string i.e. http://localhost:8000/?print-pdf#/. This triggers the default index HTML to load the PDF print stylesheet ([css/print/pdf.css](https://github.com/hakimel/reveal.js/blob/master/css/print/pdf.css)). You can test this with [lab.hakim.se/reveal-js?print-pdf](http://lab.hakim.se/reveal-js?print-pdf).
+### Print stylesheet
+To enable the PDF print capability in your presentation, the special print stylesheet at [/css/print/pdf.css](https://github.com/hakimel/reveal.js/blob/master/css/print/pdf.css) must be loaded. The default index.html file handles this for you when `print-pdf` is included in the query string. If you're using a different HTML template, you can add this to your HEAD:
+
+```html
+<script>
+	var link = document.createElement( 'link' );
+	link.rel = 'stylesheet';
+	link.type = 'text/css';
+	link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
+	document.getElementsByTagName( 'head' )[0].appendChild( link );
+</script>
+```
+
+### Instructions
+1. Open your presentation with `print-pdf` included in the query string i.e. http://localhost:8000/?print-pdf. You can test this with [lab.hakim.se/reveal-js?print-pdf](http://lab.hakim.se/reveal-js?print-pdf).
 2. Open the in-browser print dialog (CTRL/CMD+P).
 3. Change the **Destination** setting to **Save as PDF**.
 4. Change the **Layout** to **Landscape**.
@@ -1153,7 +1168,7 @@ Some reveal.js features, like external Markdown and speaker notes, require that
 
 1. Open <http://localhost:8000> to view your presentation
 
-   You can change the port by using `npm start -- --port 8001`.
+   You can change the port by using `npm start -- --port=8001`.
 
 
 ### Folder Structure

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "reveal.js",
-  "version": "3.4.0",
+  "version": "3.4.1",
   "main": [
     "js/reveal.js",
     "css/reveal.css"

css/print/pdf.css

@@ -132,13 +132,14 @@ ul, ol, div, p {
 }
 
 /* Slide backgrounds are placed inside of their slide when exporting to PDF */
-.reveal section .slide-background {
+.reveal .slide-background {
 	display: block !important;
 	position: absolute;
 	top: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
+	z-index: auto !important;
 }
 
 /* Display slide speaker notes when 'showNotes' is enabled */

js/reveal.js

@@ -26,7 +26,7 @@
 	var Reveal;
 
 	// The reveal.js version
-	var VERSION = '3.4.0';
+	var VERSION = '3.4.1';
 
 	var SLIDES_SELECTOR = '.slides section',
 		HORIZONTAL_SLIDES_SELECTOR = '.slides>section',
@@ -598,14 +598,14 @@
 
 		// Dimensions of the PDF pages
 		var pageWidth = Math.floor( slideSize.width * ( 1 + config.margin ) ),
-			pageHeight = Math.floor( slideSize.height * ( 1 + config.margin  ) );
+			pageHeight = Math.floor( slideSize.height * ( 1 + config.margin ) );
 
 		// Dimensions of slides within the pages
 		var slideWidth = slideSize.width,
 			slideHeight = slideSize.height;
 
 		// Let the browser know what page size we want to print
-		injectStyleSheet( '@page{size:'+ pageWidth +'px '+ pageHeight +'px; margin: 0;}' );
+		injectStyleSheet( '@page{size:'+ pageWidth +'px '+ pageHeight +'px; margin: 0 0 -1px 0;}' );
 
 		// Limit the size of certain elements to the dimensions of the slide
 		injectStyleSheet( '.reveal section>img, .reveal section>video, .reveal section>iframe{max-width: '+ slideWidth +'px; max-height:'+ slideHeight +'px}' );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reveal.js",
-  "version": "3.4.0",
+  "version": "3.4.1",
   "description": "The HTML Presentation Framework",
   "homepage": "http://lab.hakim.se/reveal-js",
   "subdomain": "revealjs",

plugin/notes/notes.js

@@ -50,7 +50,7 @@ var RevealNotes = (function() {
 		/**
 		 * Posts the current slide data to the notes window
 		 */
-		function post() {
+		function post(event) {
 
 			var slideElement = Reveal.getCurrentSlide(),
 				notesElement = slideElement.querySelector( 'aside.notes' );
@@ -64,6 +64,15 @@ var RevealNotes = (function() {
 				state: Reveal.getState()
 			};
 
+			// Look for notes defined in a fragment, if it is a fragmentshown event
+			if (event && event.hasOwnProperty('fragment')) {
+				var innerNotes = event.fragment.querySelector( 'aside.notes' );
+
+				if ( innerNotes) {
+					notesElement = innerNotes;
+				}
+			}
+
 			// Look for notes defined in a slide attribute
 			if( slideElement.hasAttribute( 'data-notes' ) ) {
 				messageData.notes = slideElement.getAttribute( 'data-notes' );

plugin/print-pdf/print-pdf.js

@@ -4,30 +4,15 @@
  * Example:
  * phantomjs print-pdf.js "http://lab.hakim.se/reveal-js?print-pdf" reveal-demo.pdf
  *
- * By Manuel Bieh (https://github.com/manuelbieh)
+ * @author Manuel Bieh (https://github.com/manuelbieh)
+ * @author Hakim El Hattab (https://github.com/hakimel)
  */
 
 // html2pdf.js
-var page = new WebPage();
 var system = require( 'system' );
 
-var slideWidth = system.args[3] ? system.args[3].split( 'x' )[0] : 960;
-var slideHeight = system.args[3] ? system.args[3].split( 'x' )[1] : 700;
-
-page.viewportSize = {
-	width: slideWidth,
-	height: slideHeight
-};
-
-// TODO
-// Something is wrong with these config values. An input
-// paper width of 1920px actually results in a 756px wide
-// PDF.
-page.paperSize = {
-	width: Math.round( slideWidth * 2 ),
-	height: Math.round( slideHeight * 2 ),
-	border: 0
-};
+var probePage = new WebPage();
+var printPage = new WebPage();
 
 var inputFile = system.args[1] || 'index.html?print-pdf';
 var outputFile = system.args[2] || 'slides.pdf';
@@ -36,13 +21,31 @@ if( outputFile.match( /\.pdf$/gi ) === null ) {
 	outputFile += '.pdf';
 }
 
-console.log( 'Printing PDF (Paper size: '+ page.paperSize.width + 'x' + page.paperSize.height +')' );
+console.log( 'Export PDF: Reading reveal.js config [1/3]' );
+
+probePage.open( inputFile, function( status ) {
+
+	console.log( 'Export PDF: Preparing print layout [2/3]' );
+
+	var config = probePage.evaluate( function() {
+		return Reveal.getConfig();
+	} );
+
+	printPage.paperSize = {
+		width: config.width * ( 1 + config.margin ),
+		height: config.height * ( 1 + config.margin ),
+		border: 0
+	};
+
+	printPage.open( inputFile, function( status ) {
+		window.setTimeout( function() {
+			console.log( 'Export PDF: Writing file [3/3]' );
+			printPage.render( outputFile );
+			console.log( 'Export PDF: Finished successfully!' );
+			phantom.exit();
+		}, 1000 );
+	} );
 
-page.open( inputFile, function( status ) {
-	window.setTimeout( function() {
-		console.log( 'Printed successfully' );
-		page.render( outputFile );
-		phantom.exit();
-	}, 1000 );
 } );
 
+