ox-reveal update

This commit is contained in:
2022-04-25 18:47:51 +02:00
parent 2ff6f7e396
commit 2db1c0afe0
84 changed files with 15869 additions and 5383 deletions

View File

@@ -26,14 +26,14 @@ import {
} from './utils/constants.js'
// The reveal.js version
export const VERSION = '4.1.0';
export const VERSION = '4.3.1';
/**
* reveal.js
* https://revealjs.com
* MIT licensed
*
* Copyright (C) 2020 Hakim El Hattab, https://hakim.se
* Copyright (C) 2011-2022 Hakim El Hattab, https://hakim.se
*/
export default function( revealElement, options ) {
@@ -121,10 +121,14 @@ export default function( revealElement, options ) {
*/
function initialize( initOptions ) {
if( !revealElement ) throw 'Unable to find presentation root (<div class="reveal">).';
// Cache references to key DOM elements
dom.wrapper = revealElement;
dom.slides = revealElement.querySelector( '.slides' );
if( !dom.slides ) throw 'Unable to find slides container (<div class="slides">).';
// Compose our config object in order of increasing precedence:
// 1. Default reveal.js options
// 2. Options provided via Reveal.configure() prior to
@@ -186,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();
@@ -372,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
@@ -385,32 +405,7 @@ export default function( revealElement, options ) {
function setupPostMessage() {
if( config.postMessage ) {
window.addEventListener( 'message', event => {
let data = event.data;
// Make sure we're dealing with JSON
if( typeof data === 'string' && data.charAt( 0 ) === '{' && data.charAt( data.length - 1 ) === '}' ) {
data = JSON.parse( data );
// Check if the requested method can be found
if( data.method && typeof Reveal[data.method] === 'function' ) {
if( POST_MESSAGE_METHOD_BLACKLIST.test( data.method ) === false ) {
const result = Reveal[data.method].apply( Reveal, data.args );
// Dispatch a postMessage event with the returned value from
// our method invocation for getter functions
dispatchPostMessage( 'callback', { method: data.method, result: result } );
}
else {
console.warn( 'reveal.js: "'+ data.method +'" is is blacklisted from the postMessage API' );
}
}
}
}, false );
window.addEventListener( 'message', onPostMessage, false );
}
}
@@ -525,6 +520,7 @@ export default function( revealElement, options ) {
controls.bind();
focus.bind();
dom.slides.addEventListener( 'click', onSlidesClicked, false );
dom.slides.addEventListener( 'transitionend', onTransitionEnd, false );
dom.pauseOverlay.addEventListener( 'click', resume, false );
@@ -550,11 +546,71 @@ export default function( revealElement, options ) {
window.removeEventListener( 'resize', onWindowResize, false );
dom.slides.removeEventListener( 'click', onSlidesClicked, false );
dom.slides.removeEventListener( 'transitionend', onTransitionEnd, false );
dom.pauseOverlay.removeEventListener( 'click', resume, false );
}
/**
* Uninitializes reveal.js by undoing changes made to the
* DOM and removing all event listeners.
*/
function destroy() {
removeEventListeners();
cancelAutoSlide();
disablePreviewLinks();
// Destroy controllers
notes.destroy();
focus.destroy();
plugins.destroy();
pointer.destroy();
controls.destroy();
progress.destroy();
backgrounds.destroy();
slideNumber.destroy();
// Remove event listeners
document.removeEventListener( 'fullscreenchange', onFullscreenChange );
document.removeEventListener( 'webkitfullscreenchange', onFullscreenChange );
document.removeEventListener( 'visibilitychange', onPageVisibilityChange, false );
window.removeEventListener( 'message', onPostMessage, false );
window.removeEventListener( 'load', layout, false );
// Undo DOM changes
if( dom.pauseOverlay ) dom.pauseOverlay.remove();
if( dom.statusElement ) dom.statusElement.remove();
document.documentElement.classList.remove( 'reveal-full-page' );
dom.wrapper.classList.remove( 'ready', 'center', 'has-horizontal-slides', 'has-vertical-slides' );
dom.wrapper.removeAttribute( 'data-transition-speed' );
dom.wrapper.removeAttribute( 'data-background-transition' );
dom.viewport.classList.remove( 'reveal-viewport' );
dom.viewport.style.removeProperty( '--slide-width' );
dom.viewport.style.removeProperty( '--slide-height' );
dom.slides.style.removeProperty( 'width' );
dom.slides.style.removeProperty( 'height' );
dom.slides.style.removeProperty( 'zoom' );
dom.slides.style.removeProperty( 'left' );
dom.slides.style.removeProperty( 'top' );
dom.slides.style.removeProperty( 'bottom' );
dom.slides.style.removeProperty( 'right' );
dom.slides.style.removeProperty( 'transform' );
Array.from( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ).forEach( slide => {
slide.style.removeProperty( 'display' );
slide.style.removeProperty( 'top' );
slide.removeAttribute( 'hidden' );
slide.removeAttribute( 'aria-hidden' );
} );
}
/**
* Adds a listener to one of our custom reveal.js events,
* like slidechanged.
@@ -614,6 +670,8 @@ export default function( revealElement, options ) {
dispatchPostMessage( type );
}
return event;
}
/**
@@ -1188,9 +1246,22 @@ export default function( revealElement, options ) {
* @param {number} [v=indexv] Vertical index of the target slide
* @param {number} [f] Index of a fragment within the
* target slide to activate
* @param {number} [o] Origin for use in multimaster environments
* @param {number} [origin] Origin for use in multimaster environments
*/
function slide( h, v, f, o ) {
function slide( h, v, f, origin ) {
// Dispatch an event before hte slide
const slidechange = dispatchEvent({
type: 'beforeslidechange',
data: {
indexh: h === undefined ? indexh : h,
indexv: v === undefined ? indexv : v,
origin
}
});
// Abort if this slide change was prevented by an event listener
if( slidechange.defaultPrevented ) return;
// Remember where we were at before
previousSlide = currentSlide;
@@ -1251,7 +1322,10 @@ export default function( revealElement, options ) {
// Note 20-03-2020:
// This needs to happen before we update slide visibility,
// otherwise transitions will still run in Safari.
if( previousSlide.hasAttribute( 'data-auto-animate' ) && currentSlide.hasAttribute( 'data-auto-animate' ) ) {
if( previousSlide.hasAttribute( 'data-auto-animate' ) && currentSlide.hasAttribute( 'data-auto-animate' )
&& previousSlide.getAttribute( 'data-auto-animate-id' ) === currentSlide.getAttribute( 'data-auto-animate-id' )
&& !( ( indexh > indexhBefore || indexv > indexvBefore ) ? currentSlide : previousSlide ).hasAttribute( 'data-auto-animate-restart' ) ) {
autoAnimateTransition = true;
dom.slides.classList.add( 'disable-slide-transitions' );
}
@@ -1323,7 +1397,7 @@ export default function( revealElement, options ) {
indexv,
previousSlide,
currentSlide,
origin: o
origin
}
});
}
@@ -1335,7 +1409,11 @@ export default function( revealElement, options ) {
}
// Announce the current slide contents to screen readers
announceStatus( getStatusText( currentSlide ) );
// Use animation frame to prevent getComputedStyle in getStatusText
// from triggering layout mid-frame
requestAnimationFrame( () => {
announceStatus( getStatusText( currentSlide ) );
});
progress.update();
controls.update();
@@ -2186,55 +2264,55 @@ export default function( revealElement, options ) {
}
function navigateLeft() {
function navigateLeft({skipFragments=false}={}) {
navigationHistory.hasNavigatedHorizontally = true;
// Reverse for RTL
if( config.rtl ) {
if( ( overview.isActive() || fragments.next() === false ) && availableRoutes().left ) {
if( ( overview.isActive() || skipFragments || fragments.next() === false ) && availableRoutes().left ) {
slide( indexh + 1, config.navigationMode === 'grid' ? indexv : undefined );
}
}
// Normal navigation
else if( ( overview.isActive() || fragments.prev() === false ) && availableRoutes().left ) {
else if( ( overview.isActive() || skipFragments || fragments.prev() === false ) && availableRoutes().left ) {
slide( indexh - 1, config.navigationMode === 'grid' ? indexv : undefined );
}
}
function navigateRight() {
function navigateRight({skipFragments=false}={}) {
navigationHistory.hasNavigatedHorizontally = true;
// Reverse for RTL
if( config.rtl ) {
if( ( overview.isActive() || fragments.prev() === false ) && availableRoutes().right ) {
if( ( overview.isActive() || skipFragments || fragments.prev() === false ) && availableRoutes().right ) {
slide( indexh - 1, config.navigationMode === 'grid' ? indexv : undefined );
}
}
// Normal navigation
else if( ( overview.isActive() || fragments.next() === false ) && availableRoutes().right ) {
else if( ( overview.isActive() || skipFragments || fragments.next() === false ) && availableRoutes().right ) {
slide( indexh + 1, config.navigationMode === 'grid' ? indexv : undefined );
}
}
function navigateUp() {
function navigateUp({skipFragments=false}={}) {
// Prioritize hiding fragments
if( ( overview.isActive() || fragments.prev() === false ) && availableRoutes().up ) {
if( ( overview.isActive() || skipFragments || fragments.prev() === false ) && availableRoutes().up ) {
slide( indexh, indexv - 1 );
}
}
function navigateDown() {
function navigateDown({skipFragments=false}={}) {
navigationHistory.hasNavigatedVertically = true;
// Prioritize revealing fragments
if( ( overview.isActive() || fragments.next() === false ) && availableRoutes().down ) {
if( ( overview.isActive() || skipFragments || fragments.next() === false ) && availableRoutes().down ) {
slide( indexh, indexv + 1 );
}
@@ -2246,12 +2324,12 @@ export default function( revealElement, options ) {
* 2) Previous vertical slide
* 3) Previous horizontal slide
*/
function navigatePrev() {
function navigatePrev({skipFragments=false}={}) {
// Prioritize revealing fragments
if( fragments.prev() === false ) {
if( skipFragments || fragments.prev() === false ) {
if( availableRoutes().up ) {
navigateUp();
navigateUp({skipFragments});
}
else {
// Fetch the previous horizontal slide, if there is one
@@ -2264,11 +2342,16 @@ export default function( revealElement, options ) {
previousSlide = Util.queryAll( dom.wrapper, HORIZONTAL_SLIDES_SELECTOR + '.past' ).pop();
}
if( previousSlide ) {
// When going backwards and arriving on a stack we start
// at the bottom of the stack
if( previousSlide && previousSlide.classList.contains( 'stack' ) ) {
let v = ( previousSlide.querySelectorAll( 'section' ).length - 1 ) || undefined;
let h = indexh - 1;
slide( h, v );
}
else {
navigateLeft({skipFragments});
}
}
}
@@ -2277,31 +2360,31 @@ export default function( revealElement, options ) {
/**
* The reverse of #navigatePrev().
*/
function navigateNext() {
function navigateNext({skipFragments=false}={}) {
navigationHistory.hasNavigatedHorizontally = true;
navigationHistory.hasNavigatedVertically = true;
// Prioritize revealing fragments
if( fragments.next() === false ) {
if( skipFragments || fragments.next() === false ) {
let routes = availableRoutes();
// When looping is enabled `routes.down` is always available
// so we need a separate check for when we've reached the
// end of a stack and should move horizontally
if( routes.down && routes.right && config.loop && isLastVerticalSlide( currentSlide ) ) {
if( routes.down && routes.right && config.loop && isLastVerticalSlide() ) {
routes.down = false;
}
if( routes.down ) {
navigateDown();
navigateDown({skipFragments});
}
else if( config.rtl ) {
navigateLeft();
navigateLeft({skipFragments});
}
else {
navigateRight();
navigateRight({skipFragments});
}
}
@@ -2326,6 +2409,38 @@ export default function( revealElement, options ) {
}
/**
* Listener for post message events posted to this window.
*/
function onPostMessage( event ) {
let data = event.data;
// Make sure we're dealing with JSON
if( typeof data === 'string' && data.charAt( 0 ) === '{' && data.charAt( data.length - 1 ) === '}' ) {
data = JSON.parse( data );
// Check if the requested method can be found
if( data.method && typeof Reveal[data.method] === 'function' ) {
if( POST_MESSAGE_METHOD_BLACKLIST.test( data.method ) === false ) {
const result = Reveal[data.method].apply( Reveal, data.args );
// Dispatch a postMessage event with the returned value from
// our method invocation for getter functions
dispatchPostMessage( 'callback', { method: data.method, result: result } );
}
else {
console.warn( 'reveal.js: "'+ data.method +'" is is blacklisted from the postMessage API' );
}
}
}
}
/**
* Event listener for transition end on the current slide.
*
@@ -2343,6 +2458,33 @@ export default function( revealElement, options ) {
}
/**
* A global listener for all click events inside of the
* .slides container.
*
* @param {object} [event]
*/
function onSlidesClicked( event ) {
const anchor = Util.closest( event.target, 'a[href^="#"]' );
// If a hash link is clicked, we find the target slide
// and navigate to it. We previously relied on 'hashchange'
// for links like these but that prevented media with
// audio tracks from playing in mobile browsers since it
// wasn't considered a direct interaction with the document.
if( anchor ) {
const hash = anchor.getAttribute( 'href' );
const indices = location.getIndicesFromHash( hash );
if( indices ) {
Reveal.slide( indices.h, indices.v, indices.f );
event.preventDefault();
}
}
}
/**
* Handler for the window level 'resize' event.
*
@@ -2373,6 +2515,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.
@@ -2425,6 +2587,7 @@ export default function( revealElement, options ) {
initialize,
configure,
destroy,
sync,
syncSlide,
@@ -2500,6 +2663,10 @@ export default function( revealElement, options ) {
loadSlide: slideContent.load.bind( slideContent ),
unloadSlide: slideContent.unload.bind( slideContent ),
// Preview management
showPreview,
hidePreview: closeOverlay,
// Adds or removes all internal event listeners
addEventListeners,
removeEventListeners,
@@ -2577,6 +2744,9 @@ export default function( revealElement, options ) {
// Helper method, retrieves query string as a key:value map
getQueryHash: Util.getQueryHash,
// Returns the path to the current slide as represented in the URL
getSlidePath: location.getHash.bind( location ),
// Returns reveal.js DOM elements
getRevealElement: () => revealElement,
getSlidesElement: () => dom.slides,