fix fullscreen issues; correct size in Safari, auto-focus presentation when entering fullscreen #3080

This commit is contained in:
hakimel 2021-12-08 10:45:36 +01:00
parent c804611343
commit b7d65be051
5 changed files with 48 additions and 3 deletions

View File

@ -33,6 +33,15 @@ html.reveal-full-page {
color: #000; 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 * VIEW FRAGMENTS

2
dist/reveal.css vendored

File diff suppressed because one or more lines are too long

2
dist/reveal.esm.js vendored

File diff suppressed because one or more lines are too long

2
dist/reveal.js vendored

File diff suppressed because one or more lines are too long

View File

@ -190,6 +190,9 @@ export default function( revealElement, options ) {
// Prevent the slides from being scrolled out of view // Prevent the slides from being scrolled out of view
setupScrollPrevention(); setupScrollPrevention();
// Adds bindings for fullscreen mode
setupFullscreen();
// Resets all vertical slides so that only the first is visible // Resets all vertical slides so that only the first is visible
resetVerticalSlides(); 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 * Registers a listener to postMessage events, this makes it
* possible to call all reveal.js API methods from another * 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 * Handles clicks on links that are set to preview in the
* iframe overlay. * iframe overlay.