App-revealup
view release on metacpan or search on metacpan
share/revealjs/js/reveal.js view on Meta::CPAN
*
* Copyright (C) 2011-2022 Hakim El Hattab, https://hakim.se
*/
export default function( revealElement, options ) {
// Support initialization with no args, one arg
// [options] or two args [revealElement, options]
if( arguments.length < 2 ) {
options = arguments[0];
revealElement = document.querySelector( '.reveal' );
}
const Reveal = {};
// Configuration defaults, can be overridden at initialization time
let config = {},
// Flags if reveal.js is loaded (has dispatched the 'ready' event)
ready = false,
// The horizontal and vertical index of the currently active slide
indexh,
indexv,
// The previous and current slide HTML elements
previousSlide,
currentSlide,
// Remember which directions that the user has navigated towards
navigationHistory = {
hasNavigatedHorizontally: false,
hasNavigatedVertically: false
},
// Slides may have a data-state attribute which we pick up and apply
// as a class to the body. This list contains the combined state of
// all current slides.
state = [],
// The current scale of the presentation (see width/height config)
scale = 1,
// CSS transform that is currently applied to the slides container,
// split into two groups
slidesTransform = { layout: '', overview: '' },
// Cached references to DOM elements
dom = {},
// Flags if the interaction event listeners are bound
eventsAreBound = false,
// The current slide transition state; idle or running
transition = 'idle',
// The current auto-slide duration
autoSlide = 0,
// Auto slide properties
autoSlidePlayer,
autoSlideTimeout = 0,
autoSlideStartTime = -1,
autoSlidePaused = false,
// Controllers for different aspects of our presentation. They're
// all given direct references to this Reveal instance since there
// may be multiple presentations running in parallel.
slideContent = new SlideContent( Reveal ),
slideNumber = new SlideNumber( Reveal ),
autoAnimate = new AutoAnimate( Reveal ),
backgrounds = new Backgrounds( Reveal ),
fragments = new Fragments( Reveal ),
overview = new Overview( Reveal ),
keyboard = new Keyboard( Reveal ),
location = new Location( Reveal ),
controls = new Controls( Reveal ),
progress = new Progress( Reveal ),
pointer = new Pointer( Reveal ),
plugins = new Plugins( Reveal ),
print = new Print( Reveal ),
focus = new Focus( Reveal ),
touch = new Touch( Reveal ),
notes = new Notes( Reveal );
/**
* Starts up the presentation.
*/
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
// initialization
// 3. Options passed to the Reveal constructor
// 4. Options passed to Reveal.initialize
// 5. Query params
config = { ...defaultConfig, ...config, ...options, ...initOptions, ...Util.getQueryHash() };
setViewport();
// Force a layout when the whole page, incl fonts, has loaded
window.addEventListener( 'load', layout, false );
// Register plugins and load dependencies, then move on to #start()
plugins.load( config.plugins, config.dependencies ).then( start );
return new Promise( resolve => Reveal.on( 'ready', resolve ) );
}
/**
* Encase the presentation in a reveal.js viewport. The
* extent of the viewport differs based on configuration.
*/
function setViewport() {
// Embedded decks use the reveal element as their viewport
if( config.embedded === true ) {
dom.viewport = Util.closest( revealElement, '.reveal-viewport' ) || revealElement;
}
// Full-page decks use the body as their viewport
else {
dom.viewport = document.body;
document.documentElement.classList.add( 'reveal-full-page' );
}
dom.viewport.classList.add( 'reveal-viewport' );
}
/**
* Starts up reveal.js by binding input events and navigating
* to the current URL deeplink if there is one.
*/
function start() {
ready = true;
// Remove slides hidden with data-visibility
removeHiddenSlides();
// Make sure we've got all the DOM elements we need
setupDOM();
// Listen to messages posted to this window
setupPostMessage();
// 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();
// Updates the presentation to match the current configuration values
configure();
// Read the initial hash
location.readURL();
// Create slide backgrounds
backgrounds.update( true );
// Notify listeners that the presentation is ready but use a 1ms
// timeout to ensure it's not fired synchronously after #initialize()
setTimeout( () => {
// Enable transitions now that we're loaded
dom.slides.classList.remove( 'no-transition' );
dom.wrapper.classList.add( 'ready' );
dispatchEvent({
type: 'ready',
data: {
indexh,
indexv,
currentSlide
}
});
}, 1 );
// Special setup and config is required when printing to PDF
if( print.isPrintingPDF() ) {
removeEventListeners();
// The document needs to have loaded for the PDF layout
// measurements to be accurate
if( document.readyState === 'complete' ) {
print.setupPDF();
}
else {
window.addEventListener( 'load', () => {
print.setupPDF();
} );
}
}
}
/**
* Removes all slides with data-visibility="hidden". This
* is done right before the rest of the presentation is
* initialized.
*
* If you want to show all hidden slides, initialize
* reveal.js with showHiddenSlides set to true.
*/
function removeHiddenSlides() {
if( !config.showHiddenSlides ) {
Util.queryAll( dom.wrapper, 'section[data-visibility="hidden"]' ).forEach( slide => {
slide.parentNode.removeChild( slide );
} );
}
}
/**
* Finds and stores references to DOM elements which are
* required by the presentation. If a required element is
* not found, it is created.
*/
function setupDOM() {
// Prevent transitions while we're loading
dom.slides.classList.add( 'no-transition' );
share/revealjs/js/reveal.js view on Meta::CPAN
// Ensure that the previous slide is never the same as the current
if( !slideChanged ) previousSlide = null;
// Find the current horizontal slide and any possible vertical slides
// within it
let currentHorizontalSlide = horizontalSlides[ indexh ],
currentVerticalSlides = currentHorizontalSlide.querySelectorAll( 'section' );
// Store references to the previous and current slides
currentSlide = currentVerticalSlides[ indexv ] || currentHorizontalSlide;
let autoAnimateTransition = false;
// Detect if we're moving between two auto-animated slides
if( slideChanged && previousSlide && currentSlide && !overview.isActive() ) {
// If this is an auto-animated transition, we disable the
// regular slide transition
//
// 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' )
&& 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' );
}
transition = 'running';
}
// Update the visibility of slides now that the indices have changed
updateSlidesVisibility();
layout();
// Update the overview if it's currently active
if( overview.isActive() ) {
overview.update();
}
// Show fragment, if specified
if( typeof f !== 'undefined' ) {
fragments.goto( f );
}
// Solves an edge case where the previous slide maintains the
// 'present' class when navigating between adjacent vertical
// stacks
if( previousSlide && previousSlide !== currentSlide ) {
previousSlide.classList.remove( 'present' );
previousSlide.setAttribute( 'aria-hidden', 'true' );
// Reset all slides upon navigate to home
if( isFirstSlide() ) {
// Launch async task
setTimeout( () => {
getVerticalStacks().forEach( slide => {
setPreviousVerticalIndex( slide, 0 );
} );
}, 0 );
}
}
// Apply the new state
stateLoop: for( let i = 0, len = state.length; i < len; i++ ) {
// Check if this state existed on the previous slide. If it
// did, we will avoid adding it repeatedly
for( let j = 0; j < stateBefore.length; j++ ) {
if( stateBefore[j] === state[i] ) {
stateBefore.splice( j, 1 );
continue stateLoop;
}
}
dom.viewport.classList.add( state[i] );
// Dispatch custom event matching the state's name
dispatchEvent({ type: state[i] });
}
// Clean up the remains of the previous state
while( stateBefore.length ) {
dom.viewport.classList.remove( stateBefore.pop() );
}
if( slideChanged ) {
dispatchEvent({
type: 'slidechanged',
data: {
indexh,
indexv,
previousSlide,
currentSlide,
origin
}
});
}
// Handle embedded content
if( slideChanged || !previousSlide ) {
slideContent.stopEmbeddedContent( previousSlide );
slideContent.startEmbeddedContent( currentSlide );
}
// Announce the current slide contents to screen readers
// Use animation frame to prevent getComputedStyle in getStatusText
// from triggering layout mid-frame
requestAnimationFrame( () => {
announceStatus( getStatusText( currentSlide ) );
});
progress.update();
controls.update();
notes.update();
backgrounds.update();
backgrounds.updateParallax();
slideNumber.update();
fragments.update();
// Update the URL hash
location.writeURL();
cueAutoSlide();
// Auto-animation
if( autoAnimateTransition ) {
setTimeout( () => {
dom.slides.classList.remove( 'disable-slide-transitions' );
}, 0 );
if( config.autoAnimate ) {
// Run the auto-animation between our slides
autoAnimate.run( previousSlide, currentSlide );
}
}
}
/**
* Syncs the presentation with the current DOM. Useful
* when new slides or control elements are added or when
* the configuration has changed.
*/
function sync() {
// Subscribe to input
removeEventListeners();
addEventListeners();
// Force a layout to make sure the current config is accounted for
layout();
// Reflect the current autoSlide value
autoSlide = config.autoSlide;
// Start auto-sliding if it's enabled
cueAutoSlide();
// Re-create all slide backgrounds
backgrounds.create();
// Write the current hash to the URL
location.writeURL();
fragments.sortAll();
controls.update();
progress.update();
updateSlidesVisibility();
notes.update();
notes.updateVisibility();
backgrounds.update( true );
slideNumber.update();
slideContent.formatEmbeddedContent();
// Start or stop embedded content depending on global config
if( config.autoPlayMedia === false ) {
slideContent.stopEmbeddedContent( currentSlide, { unloadIframes: false } );
}
else {
slideContent.startEmbeddedContent( currentSlide );
}
if( overview.isActive() ) {
share/revealjs/js/reveal.js view on Meta::CPAN
/**
* Cues a new automated slide if enabled in the config.
*/
function cueAutoSlide() {
cancelAutoSlide();
if( currentSlide && config.autoSlide !== false ) {
let fragment = currentSlide.querySelector( '.current-fragment' );
// When the slide first appears there is no "current" fragment so
// we look for a data-autoslide timing on the first fragment
if( !fragment ) fragment = currentSlide.querySelector( '.fragment' );
let fragmentAutoSlide = fragment ? fragment.getAttribute( 'data-autoslide' ) : null;
let parentAutoSlide = currentSlide.parentNode ? currentSlide.parentNode.getAttribute( 'data-autoslide' ) : null;
let slideAutoSlide = currentSlide.getAttribute( 'data-autoslide' );
// Pick value in the following priority order:
// 1. Current fragment's data-autoslide
// 2. Current slide's data-autoslide
// 3. Parent slide's data-autoslide
// 4. Global autoSlide setting
if( fragmentAutoSlide ) {
autoSlide = parseInt( fragmentAutoSlide, 10 );
}
else if( slideAutoSlide ) {
autoSlide = parseInt( slideAutoSlide, 10 );
}
else if( parentAutoSlide ) {
autoSlide = parseInt( parentAutoSlide, 10 );
}
else {
autoSlide = config.autoSlide;
// If there are media elements with data-autoplay,
// automatically set the autoSlide duration to the
// length of that media. Not applicable if the slide
// is divided up into fragments.
// playbackRate is accounted for in the duration.
if( currentSlide.querySelectorAll( '.fragment' ).length === 0 ) {
Util.queryAll( currentSlide, 'video, audio' ).forEach( el => {
if( el.hasAttribute( 'data-autoplay' ) ) {
if( autoSlide && (el.duration * 1000 / el.playbackRate ) > autoSlide ) {
autoSlide = ( el.duration * 1000 / el.playbackRate ) + 1000;
}
}
} );
}
}
// Cue the next auto-slide if:
// - There is an autoSlide value
// - Auto-sliding isn't paused by the user
// - The presentation isn't paused
// - The overview isn't active
// - The presentation isn't over
if( autoSlide && !autoSlidePaused && !isPaused() && !overview.isActive() && ( !isLastSlide() || fragments.availableRoutes().next || config.loop === true ) ) {
autoSlideTimeout = setTimeout( () => {
if( typeof config.autoSlideMethod === 'function' ) {
config.autoSlideMethod()
}
else {
navigateNext();
}
cueAutoSlide();
}, autoSlide );
autoSlideStartTime = Date.now();
}
if( autoSlidePlayer ) {
autoSlidePlayer.setPlaying( autoSlideTimeout !== -1 );
}
}
}
/**
* Cancels any ongoing request to auto-slide.
*/
function cancelAutoSlide() {
clearTimeout( autoSlideTimeout );
autoSlideTimeout = -1;
}
function pauseAutoSlide() {
if( autoSlide && !autoSlidePaused ) {
autoSlidePaused = true;
dispatchEvent({ type: 'autoslidepaused' });
clearTimeout( autoSlideTimeout );
if( autoSlidePlayer ) {
autoSlidePlayer.setPlaying( false );
}
}
}
function resumeAutoSlide() {
if( autoSlide && autoSlidePaused ) {
autoSlidePaused = false;
dispatchEvent({ type: 'autoslideresumed' });
cueAutoSlide();
}
}
function navigateLeft({skipFragments=false}={}) {
navigationHistory.hasNavigatedHorizontally = true;
// Reverse for RTL
if( config.rtl ) {
if( ( overview.isActive() || skipFragments || fragments.next() === false ) && availableRoutes().left ) {
slide( indexh + 1, config.navigationMode === 'grid' ? indexv : undefined );
}
}
// Normal navigation
else if( ( overview.isActive() || skipFragments || fragments.prev() === false ) && availableRoutes().left ) {
slide( indexh - 1, config.navigationMode === 'grid' ? indexv : undefined );
}
}
function navigateRight({skipFragments=false}={}) {
navigationHistory.hasNavigatedHorizontally = true;
// Reverse for RTL
if( config.rtl ) {
if( ( overview.isActive() || skipFragments || fragments.prev() === false ) && availableRoutes().right ) {
slide( indexh - 1, config.navigationMode === 'grid' ? indexv : undefined );
}
}
// Normal navigation
else if( ( overview.isActive() || skipFragments || fragments.next() === false ) && availableRoutes().right ) {
slide( indexh + 1, config.navigationMode === 'grid' ? indexv : undefined );
}
}
function navigateUp({skipFragments=false}={}) {
// Prioritize hiding fragments
if( ( overview.isActive() || skipFragments || fragments.prev() === false ) && availableRoutes().up ) {
slide( indexh, indexv - 1 );
}
}
share/revealjs/js/reveal.js view on Meta::CPAN
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.
*
* @param {object} [event]
*/
function onWindowResize( event ) {
layout();
}
/**
* Handle for the window level 'visibilitychange' event.
*
* @param {object} [event]
*/
function onPageVisibilityChange( event ) {
// If, after clicking a link or similar and we're coming back,
// focus the document.body to ensure we can use keyboard shortcuts
if( document.hidden === false && document.activeElement !== document.body ) {
// Not all elements support .blur() - SVGs among them.
if( typeof document.activeElement.blur === 'function' ) {
document.activeElement.blur();
}
document.body.focus();
}
}
/**
* 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.
*
* @param {object} event
*/
function onPreviewLinkClicked( event ) {
if( event.currentTarget && event.currentTarget.hasAttribute( 'href' ) ) {
let url = event.currentTarget.getAttribute( 'href' );
if( url ) {
showPreview( url );
event.preventDefault();
}
}
}
/**
* Handles click on the auto-sliding controls element.
*
* @param {object} [event]
*/
function onAutoSlidePlayerClick( event ) {
// Replay
if( isLastSlide() && config.loop === false ) {
slide( 0, 0 );
resumeAutoSlide();
}
// Resume
else if( autoSlidePaused ) {
resumeAutoSlide();
}
// Pause
else {
pauseAutoSlide();
}
}
// --------------------------------------------------------------------//
// ------------------------------- API --------------------------------//
// --------------------------------------------------------------------//
// The public reveal.js API
const API = {
VERSION,
initialize,
configure,
destroy,
( run in 1.189 second using v1.01-cache-2.11-cpan-c966e8aa7e8 )