ox-reveal update
This commit is contained in:
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user