documentation for getState/setState

This commit is contained in:
Hakim El Hattab 2015-01-12 17:50:12 +01:00
parent 04b71f577c
commit 5359da0b06
1 changed files with 32 additions and 15 deletions

View File

@ -230,6 +230,17 @@ You can add your own extensions using the same syntax. The following properties
- **condition**: [optional] Function which must return true for the script to be loaded - **condition**: [optional] Function which must return true for the script to be loaded
### Ready Event
A 'ready' event is fired when reveal.js has loaded all non-async dependencies and is ready to start navigating. To check if reveal.js is already 'ready' you can call `Reveal.isReady()`.
```javascript
Reveal.addEventListener( 'ready', function( event ) {
// event.currentSlide, event.indexh, event.indexv
} );
```
### Presentation Size ### Presentation Size
All presentations have a normal size, that is the resolution at which they are authored. The framework will automatically scale presentations uniformly based on this size to ensure that everything fits on any given display or viewport. All presentations have a normal size, that is the resolution at which they are authored. The framework will automatically scale presentations uniformly based on this size to ensure that everything fits on any given display or viewport.
@ -252,7 +263,7 @@ Reveal.initialize({
// Bounds for smallest/largest possible scale to apply to content // Bounds for smallest/largest possible scale to apply to content
minScale: 0.2, minScale: 0.2,
maxScale: 1.0 maxScale: 1.5
}); });
``` ```
@ -339,7 +350,7 @@ Reveal.toggleAutoSlide();
// Change a config value at runtime // Change a config value at runtime
Reveal.configure({ controls: true }); Reveal.configure({ controls: true });
// Returns the currently active configuration options // Returns the present configuration options
Reveal.getConfig(); Reveal.getConfig();
// Fetch the current scale of the presentation // Fetch the current scale of the presentation
@ -350,6 +361,7 @@ Reveal.getPreviousSlide();
Reveal.getCurrentSlide(); Reveal.getCurrentSlide();
Reveal.getIndices(); // { h: 0, v: 0 } } Reveal.getIndices(); // { h: 0, v: 0 } }
Reveal.getProgress(); // 0-1
Reveal.getTotalSlides(); Reveal.getTotalSlides();
// State checks // State checks
@ -360,18 +372,6 @@ Reveal.isPaused();
Reveal.isAutoSliding(); Reveal.isAutoSliding();
``` ```
### Ready Event
The 'ready' event is fired when reveal.js has loaded all (synchronous) dependencies and is ready to start navigating.
```javascript
Reveal.addEventListener( 'ready', function( event ) {
// event.currentSlide, event.indexh, event.indexv
} );
```
To check if reveal.js is already 'ready' you can use call `Reveal.isReady()`.
### Slide Changed Event ### 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. 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.
@ -384,7 +384,24 @@ Reveal.addEventListener( 'slidechanged', function( event ) {
} ); } );
``` ```
### States ### Presentation State
The presentation's current state can be fetched by using the `getState` method. A state object contains all of the information required to put the presentation back as it was when `getState` was first called. Sort of like a snapshot. It's a simple object that can easily be stringified and persisted or sent over the wire.
```javascript
Reveal.slide( 1 );
// we're on slide 1
var state = Reveal.getState();
Reveal.slide( 3 );
// we're on slide 3
Reveal.setState( state );
// we're back on slide 1
```
### Slide 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. 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.