xobs/lca2019-talk
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

documentation for postMessage API

Browse Source
This commit is contained in:
Hakim El Hattab 2015-01-12 12:33:39 +01:00
parent 20d858deb8
commit 04b71f577c
1 changed files with 49 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
README.md
View File

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