xobs/fa23-si
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add transitionend event and docs

Browse Source
This commit is contained in:
Hakim El Hattab 2020-04-21 10:54:00 +02:00
parent 91953207a5
commit 8c52b32a18
7 changed files with 83 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
README.md
View File

@ -28,7 +28,7 @@ This project was started and is maintained by [@hakimel](https://github.com/haki
- [Lazy Loading](#lazy-loading)
- [API](#api)
- [Custom Key Bindings](#custom-key-bindings)
- [Slide Changed Event](#slide-changed-event)
- [Slide Change Events](#slide-change-events)
- [Presentation State](#presentation-state)
- [Slide States](#slide-states)
- [Slide Backgrounds](#slide-backgrounds)
@ -458,8 +458,8 @@ Reveal.js doesn't _rely_ on any third party scripts to work but a few optional l
Reveal.initialize({
dependencies: [
// Interpret Markdown in <section> elements
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/marked.js', condition: () => { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: () => { return !!document.querySelector( '[data-markdown]' ); } },
// Syntax highlight for <code> elements
{ src: 'plugin/highlight/highlight.js', async: true },
@ -490,7 +490,7 @@ You can also include dependencies which are bundled/already present on the page.
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.on( 'ready', function( event ) {
Reveal.on( 'ready', event => {
// event.currentSlide, event.indexh, event.indexv
} );
```
@ -532,7 +532,7 @@ If you're unhappy with any of the default keyboard bindings you can override the
Reveal.configure({
keyboard: {
13: 'next', // go to the next slide when the ENTER key is pressed
27: function() {}, // do something custom when ESC is pressed
27: () => { console.log('esc') }, // do something custom when ESC is pressed
32: null // don't do anything when SPACE is pressed (i.e. disable a reveal.js default binding)
}
});
@ -598,7 +598,7 @@ Each individual element is decorated with a `data-auto-animate-target` attribute
Each time a presentation navigates between two auto-animated slides it dispatches the `autoanimate` event.
```javascript
Reveal.on( 'autoanimate', function( event ) {
Reveal.on( 'autoanimate', event => {
// event.fromSlide, event.toSlide
} );
```
@ -749,12 +749,12 @@ For example
// keyCode: the keycode for binding to the callback
// key: the key label to show in the help overlay
// description: the description of the action to show in the help overlay
Reveal.addKeyBinding( { keyCode: 84, key: 'T', description: 'Start timer' }, function() {
Reveal.addKeyBinding( { keyCode: 84, key: 'T', description: 'Start timer' }, () => {
// start timer
} )
// The binding parameter can also be a direct keycode without providing the help description
Reveal.addKeyBinding( 82, function() {
Reveal.addKeyBinding( 82, () => {
// reset timer
} )
```
@ -764,18 +764,24 @@ This allows plugins to add key bindings directly to Reveal so they can
* make use of Reveal's pre-processing logic for key handling (for example, ignoring key presses when paused); and
* be included in the help overlay (optional)
### Slide Changed Event
### Slide Change Events
A `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.
A `slidechanged` event is fired each time the slide is changed. The event object holds the index values of the current slide as well as a reference to the previous and current slide DOM nodes.
Some libraries, like MathJax (see [#226](https://github.com/hakimel/reveal.js/issues/226#issuecomment-10261609)), get confused by the transforms and display states of slides. Often times, this can be fixed by calling their update or render function from this callback.
```javascript
Reveal.on( 'slidechanged', function( event ) {
Reveal.on( 'slidechanged', event => {
// event.previousSlide, event.currentSlide, event.indexh, event.indexv
} );
```
The `slidechanged` event fires instantly when the slide changes. If you'd rather invoke your event listener when the slide has finished transitioning and is fully visible, you can use the `slidetransitionend` event. The `slidetransitionend` event includes the same event data as described above.
```javascript
Reveal.on( 'slidetransitionend', event => console.log( event.currentSlide ) );
```
### 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.
@ -800,7 +806,7 @@ If you set `data-state="somestate"` on a slide `<section>`, "somestate" will be
Furthermore you can also listen to these changes in state via JavaScript:
```javascript
Reveal.on( 'somestate', function() {
Reveal.on( 'somestate', () => {
// TODO: Sprinkle magic
}, false );
```
@ -1007,10 +1013,10 @@ When a slide fragment is either shown or hidden reveal.js will dispatch an event
Some libraries, like MathJax (see #505), get confused by the initially hidden fragment elements. Often times this can be fixed by calling their update or render function from this callback.
```javascript
Reveal.on( 'fragmentshown', function( event ) {
Reveal.on( 'fragmentshown', event => {
// event.fragment = the fragment DOM element
} );
Reveal.on( 'fragmenthidden', function( event ) {
Reveal.on( 'fragmenthidden', event => {
// event.fragment = the fragment DOM element
} );
```
@ -1089,7 +1095,7 @@ Reveal.configure({ slideNumber: true });
Reveal.configure({ slideNumber: 'c/t' });
// You can provide a function to fully customize the number:
Reveal.configure({ slideNumber: function( slide ) {
Reveal.configure({ slideNumber: slide => {
// Ignore numbering of vertical slides
return [ Reveal.getIndices( slide ).h ];
}});
@ -1107,8 +1113,8 @@ Press »ESC« or »O« keys to toggle the overview mode on and off. While you're
as if you were at 1,000 feet above your presentation. The overview mode comes with a few API hooks:
```javascript
Reveal.on( 'overviewshown', function( event ) { /* ... */ } );
Reveal.on( 'overviewhidden', function( event ) { /* ... */ } );
Reveal.on( 'overviewshown', event => { /* ... */ } );
Reveal.on( 'overviewhidden', event => { /* ... */ } );
// Toggle the overview mode programmatically
Reveal.toggleOverview();
@ -1154,7 +1160,7 @@ Limitations:
When reveal.js changes the scale of the slides it fires a resize event. You can subscribe to the event to resize your elements accordingly.
```javascript
Reveal.on( 'resize', function( event ) {
Reveal.on( 'resize', event => {
// event.scale, event.oldScale, event.size
} );
```
@ -1172,7 +1178,7 @@ The framework has a built-in postMessage API that can be used when communicating
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 ) {
window.addEventListener( 'message', event => {
var data = JSON.parse( event.data );
if( data.namespace === 'reveal' && data.eventName === 'slidechanged' ) {
// Slide changed, see data.state for slide number
@ -1187,7 +1193,7 @@ When you call any method via the postMessage API, reveal.js will dispatch a mess
```javascript
<revealWindow>.postMessage( JSON.stringify({ method: 'getTotalSlides' }), '*' );
window.addEventListener( 'message', function( event ) {
window.addEventListener( 'message', event => {
var data = JSON.parse( event.data );
// `data.method`` is the method that we invoked
if( data.namespace === 'reveal' && data.eventName === 'callback' && data.method === 'getTotalSlides' ) {

2
dist/reveal.es5.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/reveal.es5.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/reveal.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/reveal.js.map vendored
View File

File diff suppressed because one or more lines are too long

26
js/reveal.js
View File

@ -83,6 +83,9 @@ export default function( revealElement, options ) {
// Flags if the interaction event listeners are bound
eventsAreBound = false,
// The current slide transition state; idle or running
transition = 'idle',
// The current auto-slide duration
autoSlide = 0,
@ -484,6 +487,7 @@ export default function( revealElement, options ) {
if( config.progress ) progress.bind();
controls.bind();
dom.slides.addEventListener( 'transitionend', onTransitionEnd, false );
dom.pauseOverlay.addEventListener( 'click', resume, false );
if( config.focusBodyOnPageVisibilityChange ) {
@ -507,6 +511,7 @@ export default function( revealElement, options ) {
window.removeEventListener( 'hashchange', onWindowHashChange, false );
window.removeEventListener( 'resize', onWindowResize, false );
dom.slides.removeEventListener( 'transitionend', onTransitionEnd, false );
dom.pauseOverlay.removeEventListener( 'click', resume, false );
}
@ -1197,6 +1202,7 @@ export default function( revealElement, options ) {
// Detect if we're moving between two auto-animated slides
if( slideChanged && previousSlide && currentSlide && !overview.isActive() ) {
// If this is an auto-animated transition, we disable the
// regular slide transition
//
@ -1207,6 +1213,9 @@ export default function( revealElement, options ) {
autoAnimateTransition = true;
dom.slides.classList.add( 'disable-slide-transitions' );
}
transition = 'running';
}
// Update the visibility of slides now that the indices have changed
@ -2251,6 +2260,23 @@ export default function( revealElement, options ) {
}
/**
* Event listener for transition end on the current slide.
*
* @param {object} [event]
*/
function onTransitionEnd( event ) {
if( transition === 'running' && /section/gi.test( event.target.nodeName ) ) {
transition = 'idle';
dispatchEvent({
type: 'slidetransitionend',
data: { indexh, indexv, previousSlide, currentSlide }
});
}
}
/**
* Handler for the window level 'hashchange' event.
*

28
test/test.html
View File

@ -16,7 +16,7 @@
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<div class="reveal" style="display: none;">
<div class="reveal" style="visibility: hidden;">
<div class="slides">
@ -655,6 +655,32 @@
});
QUnit.test( 'slidetransitionend', function( assert ) {
assert.expect( 2 );
let done = assert.async( 2 );
let time = Date.now();
let horizontalCallback = event => {
assert.ok( Date.now() - time > 200, 'horizontal event fired' );
done();
let verticalCallback = event => {
assert.ok( true, 'vertical event fired' );
done();
Reveal.off( 'slidetransitionend', verticalCallback );
}
Reveal.off( 'slidetransitionend', horizontalCallback );
Reveal.on( 'slidetransitionend', verticalCallback );
Reveal.slide( 1, 1 );
}
Reveal.slide( 0, 0 );
Reveal.on( 'slidetransitionend', horizontalCallback );
Reveal.slide( 1, 0 );
});
QUnit.test( 'paused', function( assert ) {
assert.expect( 1 );
var done = assert.async();