Merge pull request #2300 from mw75/master

Resize Event
This commit is contained in:
Hakim El Hattab 2019-01-31 20:09:45 +01:00 committed by GitHub
commit 9c1615fff1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 0 deletions

View file

@ -42,6 +42,7 @@ reveal.js comes with a broad range of features including [nested slides](https:/
- [Fullscreen mode](#fullscreen-mode) - [Fullscreen mode](#fullscreen-mode)
- [Embedded media](#embedded-media) - [Embedded media](#embedded-media)
- [Stretching elements](#stretching-elements) - [Stretching elements](#stretching-elements)
- [Resize Event](#resize-event)
- [postMessage API](#postmessage-api) - [postMessage API](#postmessage-api)
- [PDF Export](#pdf-export) - [PDF Export](#pdf-export)
- [Theming](#theming) - [Theming](#theming)
@ -991,6 +992,14 @@ Limitations:
- Only direct descendants of a slide section can be stretched - Only direct descendants of a slide section can be stretched
- Only one descendant per slide section can be stretched - Only one descendant per slide section can be stretched
### Resize Event
When reveal.js changes the scale of the slides it fires an resize event. You can subscribe to the event to resize your elements accordingly.
```javascript
Reveal.addEventListener( 'resize', function( event ) { /* console.log(event.scale,event.oldscale,event.size); */ } );
```
### postMessage API ### 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: 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:

View file

@ -2104,6 +2104,7 @@
dom.slides.style.height = size.height + 'px'; dom.slides.style.height = size.height + 'px';
// Determine scale of content to fit within available space // Determine scale of content to fit within available space
var oldscale =scale;
scale = Math.min( size.presentationWidth / size.width, size.presentationHeight / size.height ); scale = Math.min( size.presentationWidth / size.width, size.presentationHeight / size.height );
// Respect max/min scale settings // Respect max/min scale settings
@ -2169,6 +2170,13 @@
} }
if( oldscale!==scale ){
dispatchEvent( 'resize', {
'oldscale': oldscale,
'scale': scale,
'size': size
} );
}
} }
updateProgress(); updateProgress();