From 04b71f577ca6c7a6960145cb89bd5d41feeba1fd Mon Sep 17 00:00:00 2001
From: Hakim El Hattab <hakim.elhattab@gmail.com>
Date: Mon, 12 Jan 2015 12:33:39 +0100
Subject: [PATCH] documentation for postMessage API

---
 README.md | 52 +++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 49 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 75329089..cd15e06e 100644
--- a/README.md
+++ b/README.md
@@ -306,7 +306,7 @@ To enable lazy loading all you need to do is change your "src" attributes to "da
 ```html
 <section>
   <img data-src="image.png">
-  <iframe data-src="http://slides.com">
+  <iframe data-src="http://slides.com"></iframe>
   <video>
     <source data-src="video.webm" type="video/webm" />
     <source data-src="video.mp4" type="video/mp4" />
@@ -317,7 +317,7 @@ To enable lazy loading all you need to do is change your "src" attributes to "da
 
 ### API
 
-The ``Reveal`` class provides a JavaScript API for controlling navigation and reading state:
+The ``Reveal`` object exposes a JavaScript API for controlling navigation and reading state:
 
 ```javascript
 // Navigation
@@ -330,15 +330,27 @@ Reveal.prev();
 Reveal.next();
 Reveal.prevFragment();
 Reveal.nextFragment();
+
+// Toggle presentation states, optionally pass true/false to force on/off
 Reveal.toggleOverview();
 Reveal.togglePause();
 Reveal.toggleAutoSlide();
 
+// Change a config value at runtime
+Reveal.configure({ controls: true });
+
+// Returns the currently active configuration options
+Reveal.getConfig();
+
+// Fetch the current scale of the presentation
+Reveal.getScale();
+
 // Retrieves the previous and current slide elements
 Reveal.getPreviousSlide();
 Reveal.getCurrentSlide();
 
 Reveal.getIndices(); // { h: 0, v: 0 } }
+Reveal.getTotalSlides();
 
 // State checks
 Reveal.isFirstSlide();
@@ -358,6 +370,8 @@ Reveal.addEventListener( 'ready', function( event ) {
 } );
 ```
 
+To check if reveal.js is already 'ready' you can use call `Reveal.isReady()`.
+
 ### Slide Changed Event
 
 An 'slidechanged' event is fired each time the slide is changed (regardless of state). The event object holds the index values of the current slide as well as a reference to the previous and current slide HTML nodes.
@@ -370,7 +384,6 @@ Reveal.addEventListener( 'slidechanged', function( event ) {
 } );
 ```
 
-
 ### States
 
 If you set ``data-state="somestate"`` on a slide ``<section>``, "somestate" will be applied as a class on the document element when that slide is opened. This allows you to apply broad style changes to the page based on the active slide.
@@ -590,6 +603,39 @@ Limitations:
 - Only one descendant per slide section can be stretched
 
 
+### postMessage API
+The framework has a built-in postMessage API that can be used when communicating with a presentation inside of another window. Here's an example showing how you'd make a reveal.js instance in the given window proceed to slide 2:
+
+```javascript
+<window>.postMessage( JSON.stringify({ method: 'slide', args: [ 2 ] }), '*' );
+```
+
+When reveal.js runs inside of an iframe it can optionally bubble all of its events to the parent. Bubbled events are stringified JSON with three fields: namespace, eventName and state. Here's how you subscribe to them from the parent window:
+
+```javascript
+window.addEventListener( 'message', function( event ) {
+	var data = JSON.parse( event.data );
+	if( data.namespace === 'reveal' && data.eventName ='slidechanged' ) {
+		// Slide changed, see data.state for slide number
+	}
+} );
+```
+
+This cross-window messaging can be toggled on or off using configuration flags.
+
+```javascript
+Reveal.initialize({
+	...,
+
+	// Exposes the reveal.js API through window.postMessage
+	postMessage: true,
+
+	// Dispatches all reveal.js events to the parent window through postMessage
+	postMessageEvents: false
+});
+```
+
+
 ## PDF Export
 
 Presentations can be exported to PDF via a special print stylesheet. This feature requires that you use [Google Chrome](http://google.com/chrome).