fix fullscreen issues; correct size in Safari, auto-focus presentation when entering fullscreen #3080
parent
c804611343
commit
b7d65be051
|
@ -33,6 +33,15 @@ html.reveal-full-page {
|
|||
color: #000;
|
||||
}
|
||||
|
||||
// Fixes an issue where Safari would take embedded presentations
|
||||
// fullscreen but keep them at their original width/height style
|
||||
.reveal-viewport:fullscreen {
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* VIEW FRAGMENTS
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
36
js/reveal.js
36
js/reveal.js
|
@ -190,6 +190,9 @@ export default function( revealElement, options ) {
|
|||
// Prevent the slides from being scrolled out of view
|
||||
setupScrollPrevention();
|
||||
|
||||
// Adds bindings for fullscreen mode
|
||||
setupFullscreen();
|
||||
|
||||
// Resets all vertical slides so that only the first is visible
|
||||
resetVerticalSlides();
|
||||
|
||||
|
@ -376,6 +379,19 @@ export default function( revealElement, options ) {
|
|||
|
||||
}
|
||||
|
||||
/**
|
||||
* After entering fullscreen we need to force a layout to
|
||||
* get our presentations to scale correctly. This behavior
|
||||
* is inconsistent across browsers but a force layout seems
|
||||
* to normalize it.
|
||||
*/
|
||||
function setupFullscreen() {
|
||||
|
||||
document.addEventListener( 'fullscreenchange', onFullscreenChange );
|
||||
document.addEventListener( 'webkitfullscreenchange', onFullscreenChange );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers a listener to postMessage events, this makes it
|
||||
* possible to call all reveal.js API methods from another
|
||||
|
@ -2433,6 +2449,26 @@ export default function( revealElement, options ) {
|
|||
|
||||
}
|
||||
|
||||
/**
|
||||
* Handler for the document level 'fullscreenchange' event.
|
||||
*
|
||||
* @param {object} [event]
|
||||
*/
|
||||
function onFullscreenChange( event ) {
|
||||
|
||||
let element = document.fullscreenElement || document.webkitFullscreenElement;
|
||||
if( element === dom.wrapper ) {
|
||||
event.stopImmediatePropagation();
|
||||
|
||||
// Timeout to avoid layout shift in Safari
|
||||
setTimeout( () => {
|
||||
Reveal.layout();
|
||||
Reveal.focus.focus(); // focus.focus :'(
|
||||
}, 1 );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles clicks on links that are set to preview in the
|
||||
* iframe overlay.
|
||||
|
|
Loading…
Reference in New Issue