From abee356e42bd27a06db3f1308fd7b751de646102 Mon Sep 17 00:00:00 2001 From: Mario Wolff Date: Tue, 15 Jan 2019 13:13:19 +0100 Subject: [PATCH 1/2] emmit resize event if scale changed --- README.md | 8 ++++++++ js/reveal.js | 8 ++++++++ 2 files changed, 16 insertions(+) diff --git a/README.md b/README.md index a301d5fe..4804c294 100644 --- a/README.md +++ b/README.md @@ -958,6 +958,14 @@ Limitations: - Only direct descendants of a 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( 'overviewshown', function( event ) { /* console.log(event.scale,event.oldscale,event.size); */ } ); +``` + ### 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: diff --git a/js/reveal.js b/js/reveal.js index 3c31b973..b291bc7f 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -1971,6 +1971,7 @@ dom.slides.style.height = size.height + 'px'; // Determine scale of content to fit within available space + var oldscale =scale; scale = Math.min( size.presentationWidth / size.width, size.presentationHeight / size.height ); // Respect max/min scale settings @@ -2036,6 +2037,13 @@ } + if( oldscale!==scale ){ + dispatchEvent( 'resize', { + 'oldscale': oldscale, + 'scale': scale, + 'size': size + } ); + } } updateProgress(); From 126365627b30e66b4dc3e1407d1b457094f6cbc2 Mon Sep 17 00:00:00 2001 From: Mario Wolff Date: Tue, 15 Jan 2019 13:18:55 +0100 Subject: [PATCH 2/2] fixed documentation on resize event --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 4804c294..9bf6b223 100644 --- a/README.md +++ b/README.md @@ -41,6 +41,7 @@ reveal.js comes with a broad range of features including [nested slides](https:/ - [Fullscreen mode](#fullscreen-mode) - [Embedded media](#embedded-media) - [Stretching elements](#stretching-elements) + - [Resize Event](#resize-event) - [postMessage API](#postmessage-api) - [PDF Export](#pdf-export) - [Theming](#theming) @@ -963,7 +964,7 @@ Limitations: 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( 'overviewshown', function( event ) { /* console.log(event.scale,event.oldscale,event.size); */ } ); +Reveal.addEventListener( 'resize', function( event ) { /* console.log(event.scale,event.oldscale,event.size); */ } ); ``` ### postMessage API