kfitz/presentations.kfitz.info
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'upstream/master'

Browse Source 
# Conflicts:
#	README.md
This commit is contained in:
Kathleen Fitzpatrick
2025-04-05 09:07:05 -04:00
parent 72463f732c dfc5690c6d
commit c635dd6226
44 changed files with 1056 additions and 528 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
js/config.js
View File

@@ -15,7 +15,10 @@ export default {
minScale: 0.2,
maxScale: 2.0,
// Display presentation control arrows
// Display presentation control arrows.
// - true: Display controls on all screens
// - false: Hide controls on all screens
// - "speaker-only": Only display controls in the speaker view
controls: true,
// Help the user learn the controls by providing hints, for example by
@@ -74,7 +77,7 @@ export default {
// Enable keyboard shortcuts for navigation
keyboard: true,
// Optional function that blocks keyboard events when retuning false
// Optional function that blocks keyboard events when returning false
//
// If you set this to 'focused', we will only capture keyboard events
// for embedded decks when they are in focus

20
js/controllers/autoanimate.js
View File

@@ -178,28 +178,12 @@ export default class AutoAnimate {
let fromProps = this.getAutoAnimatableProperties( 'from', from, elementOptions ),
toProps = this.getAutoAnimatableProperties( 'to', to, elementOptions );
// Maintain fragment visibility for matching elements when
// we're navigating forwards, this way the viewer won't need
// to step through the same fragments twice
if( to.classList.contains( 'fragment' ) ) {
// Don't auto-animate the opacity of fragments to avoid
// conflicts with fragment animations
delete toProps.styles['opacity'];
if( from.classList.contains( 'fragment' ) ) {
let fromFragmentStyle = ( from.className.match( FRAGMENT_STYLE_REGEX ) || [''] )[0];
let toFragmentStyle = ( to.className.match( FRAGMENT_STYLE_REGEX ) || [''] )[0];
// Only skip the fragment if the fragment animation style
// remains unchanged
if( fromFragmentStyle === toFragmentStyle && animationOptions.slideDirection === 'forward' ) {
to.classList.add( 'visible', 'disabled' );
}
}
}
// If translation and/or scaling are enabled, css transform
@@ -471,7 +455,7 @@ export default class AutoAnimate {
// Text
this.findAutoAnimateMatches( pairs, fromSlide, toSlide, textNodes, node => {
return node.nodeName + ':::' + node.innerText;
return node.nodeName + ':::' + node.textContent.trim();
} );
// Media
@@ -481,7 +465,7 @@ export default class AutoAnimate {
// Code
this.findAutoAnimateMatches( pairs, fromSlide, toSlide, codeNodes, node => {
return node.nodeName + ':::' + node.innerText;
return node.nodeName + ':::' + node.textContent.trim();
} );
pairs.forEach( pair => {

6
js/controllers/backgrounds.js
View File

@@ -358,15 +358,17 @@ export default class Backgrounds {
}
const backgroundChanged = currentBackground !== this.previousBackground;
// Stop content inside of previous backgrounds
if( this.previousBackground ) {
if( backgroundChanged && this.previousBackground ) {
this.Reveal.slideContent.stopEmbeddedContent( this.previousBackground, { unloadIframes: !this.Reveal.slideContent.shouldPreload( this.previousBackground ) } );
}
// Start content in the current background
if( currentBackground ) {
if( backgroundChanged && currentBackground ) {
this.Reveal.slideContent.startEmbeddedContent( currentBackground );

12
js/controllers/controls.js vendored
View File

@@ -66,7 +66,10 @@ export default class Controls {
*/
configure( config, oldConfig ) {
this.element.style.display = config.controls ? 'block' : 'none';
this.element.style.display = (
config.controls &&
(config.controls !== 'speaker-only' || this.Reveal.isSpeakerNotes())
) ? 'block' : 'none';
this.element.setAttribute( 'data-controls-layout', config.controlsLayout );
this.element.setAttribute( 'data-controls-back-arrows', config.controlsBackArrows );
@@ -146,9 +149,14 @@ export default class Controls {
if( fragmentsRoutes.prev ) this.controlsPrev.forEach( el => { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );
if( fragmentsRoutes.next ) this.controlsNext.forEach( el => { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );
const isVerticalStack = this.Reveal.isVerticalSlide( currentSlide );
const hasVerticalSiblings = isVerticalStack &&
currentSlide.parentElement &&
currentSlide.parentElement.querySelectorAll( ':scope > section' ).length > 1;
// Apply fragment decorators to directional buttons based on
// what slide axis they are in
if( this.Reveal.isVerticalSlide( currentSlide ) ) {
if( isVerticalStack && hasVerticalSiblings ) {
if( fragmentsRoutes.prev ) this.controlsUp.forEach( el => { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );
if( fragmentsRoutes.next ) this.controlsDown.forEach( el => { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );
}

2
js/controllers/jumptoslide.js
View File

@@ -74,7 +74,7 @@ export default class JumpToSlide {
let query = this.jumpInput.value.trim( '' );
let indices;
// When slide numbers are formatted to be a single linear mumber
// When slide numbers are formatted to be a single linear number
// (instead of showing a separate horizontal/vertical index) we
// use the same format for slide jumps
if( /^\d+$/.test( query ) ) {

14
js/controllers/keyboard.js
View File

@@ -190,6 +190,10 @@ export default class Keyboard {
}
}
if( this.Reveal.isOverlayOpen() && !["Escape", "f", "c", "b", "."].includes(event.key) ) {
return false;
}
if( this.Reveal.isPaused() && resumeKeyCodes.indexOf( keyCode ) === -1 ) {
return false;
}
@@ -363,6 +367,10 @@ export default class Keyboard {
this.Reveal.toggleJumpToSlide();
}
}
// C
else if( keyCode === 67 && this.Reveal.isOverlayOpen() ) {
this.Reveal.closeOverlay();
}
// ?
else if( ( keyCode === 63 || keyCode === 191 ) && event.shiftKey ) {
this.Reveal.toggleHelp();
@@ -390,6 +398,12 @@ export default class Keyboard {
event.preventDefault && event.preventDefault();
}
// Enter to exit overview mode
else if (keyCode === 13 && this.Reveal.overview.isActive()) {
this.Reveal.overview.deactivate();
event.preventDefault && event.preventDefault();
}
// If auto-sliding is enabled we need to cue up
// another timeout

389
js/controllers/overlay.js Normal file
View File

@@ -0,0 +1,389 @@
/**
* Handles the display of reveal.js' overlay elements used
* to preview iframes, images & videos.
*/
export default class Overlay {
constructor( Reveal ) {
this.Reveal = Reveal;
this.onSlidesClicked = this.onSlidesClicked.bind( this );
this.iframeTriggerSelector = null;
this.mediaTriggerSelector = '[data-preview-image], [data-preview-video]';
this.stateProps = ['previewIframe', 'previewImage', 'previewVideo', 'previewFit'];
this.state = {};
}
update() {
// Enable link previews globally
if( this.Reveal.getConfig().previewLinks ) {
this.iframeTriggerSelector = 'a[href]:not([data-preview-link=false]), [data-preview-link]:not(a):not([data-preview-link=false])';
}
// Enable link previews for individual elements
else {
this.iframeTriggerSelector = '[data-preview-link]:not([data-preview-link=false])';
}
const hasLinkPreviews = this.Reveal.getSlidesElement().querySelectorAll( this.iframeTriggerSelector ).length > 0;
const hasMediaPreviews = this.Reveal.getSlidesElement().querySelectorAll( this.mediaTriggerSelector ).length > 0;
// Only add the listener when there are previewable elements in the slides
if( hasLinkPreviews || hasMediaPreviews ) {
this.Reveal.getSlidesElement().addEventListener( 'click', this.onSlidesClicked, false );
}
else {
this.Reveal.getSlidesElement().removeEventListener( 'click', this.onSlidesClicked, false );
}
}
createOverlay( className ) {
this.dom = document.createElement( 'div' );
this.dom.classList.add( 'r-overlay' );
this.dom.classList.add( className );
this.viewport = document.createElement( 'div' );
this.viewport.classList.add( 'r-overlay-viewport' );
this.dom.appendChild( this.viewport );
this.Reveal.getRevealElement().appendChild( this.dom );
}
/**
* Opens a lightbox that previews the target URL.
*
* @param {string} url - url for lightbox iframe src
*/
previewIframe( url ) {
this.close();
this.state = { previewIframe: url };
this.createOverlay( 'r-overlay-preview' );
this.dom.dataset.state = 'loading';
this.viewport.innerHTML =
`<header class="r-overlay-header">
<a class="r-overlay-button r-overlay-external" href="${url}" target="_blank"><span class="icon"></span></a>
<button class="r-overlay-button r-overlay-close"><span class="icon"></span></button>
</header>
<div class="r-overlay-spinner"></div>
<div class="r-overlay-content">
<iframe src="${url}"></iframe>
<small class="r-overlay-content-inner">
<span class="r-overlay-error x-frame-error">Unable to load iframe. This is likely due to the site's policy (x-frame-options).</span>
</small>
</div>`;
this.dom.querySelector( 'iframe' ).addEventListener( 'load', event => {
this.dom.dataset.state = 'loaded';
}, false );
this.dom.querySelector( '.r-overlay-close' ).addEventListener( 'click', event => {
this.close();
event.preventDefault();
}, false );
this.dom.querySelector( '.r-overlay-external' ).addEventListener( 'click', event => {
this.close();
}, false );
this.Reveal.dispatchEvent({ type: 'previewiframe', data: { url } });
}
/**
* Opens a lightbox window that provides a larger view of the
* given image/video.
*
* @param {string} url - url to the image/video to preview
* @param {image|video} mediaType
* @param {string} [fitMode] - the fit mode to use for the preview
*/
previewMedia( url, mediaType, fitMode ) {
if( mediaType !== 'image' && mediaType !== 'video' ) {
console.warn( 'Please specify a valid media type to preview (image|video)' );
return;
}
this.close();
fitMode = fitMode || 'scale-down';
this.createOverlay( 'r-overlay-preview' );
this.dom.dataset.state = 'loading';
this.dom.dataset.previewFit = fitMode;
this.viewport.innerHTML =
`<header class="r-overlay-header">
<button class="r-overlay-button r-overlay-close">Esc <span class="icon"></span></button>
</header>
<div class="r-overlay-spinner"></div>
<div class="r-overlay-content"></div>`;
const contentElement = this.dom.querySelector( '.r-overlay-content' );
if( mediaType === 'image' ) {
this.state = { previewImage: url, previewFit: fitMode }
const img = document.createElement( 'img', {} );
img.src = url;
contentElement.appendChild( img );
img.addEventListener( 'load', () => {
this.dom.dataset.state = 'loaded';
}, false );
img.addEventListener( 'error', () => {
this.dom.dataset.state = 'error';
contentElement.innerHTML =
`<span class="r-overlay-error">Unable to load image.</span>`
}, false );
// Hide image overlays when clicking outside the overlay
this.dom.style.cursor = 'zoom-out';
this.dom.addEventListener( 'click', ( event ) => {
this.close();
}, false );
this.Reveal.dispatchEvent({ type: 'previewimage', data: { url } });
}
else if( mediaType === 'video' ) {
this.state = { previewVideo: url, previewFit: fitMode }
const video = document.createElement( 'video' );
video.autoplay = this.dom.dataset.previewAutoplay === 'false' ? false : true;
video.controls = this.dom.dataset.previewControls === 'false' ? false : true;
video.loop = this.dom.dataset.previewLoop === 'true' ? true : false;
video.muted = this.dom.dataset.previewMuted === 'true' ? true : false;
video.playsInline = true;
video.src = url;
contentElement.appendChild( video );
video.addEventListener( 'loadeddata', () => {
this.dom.dataset.state = 'loaded';
}, false );
video.addEventListener( 'error', () => {
this.dom.dataset.state = 'error';
contentElement.innerHTML =
`<span class="r-overlay-error">Unable to load video.</span>`;
}, false );
this.Reveal.dispatchEvent({ type: 'previewvideo', data: { url } });
}
else {
throw new Error( 'Please specify a valid media type to preview' );
}
this.dom.querySelector( '.r-overlay-close' ).addEventListener( 'click', ( event ) => {
this.close();
event.preventDefault();
}, false );
}
previewImage( url, fitMode ) {
this.previewMedia( url, 'image', fitMode );
}
previewVideo( url, fitMode ) {
this.previewMedia( url, 'video', fitMode );
}
/**
* Open or close help overlay window.
*
* @param {Boolean} [override] Flag which overrides the
* toggle logic and forcibly sets the desired state. True means
* help is open, false means it's closed.
*/
toggleHelp( override ) {
if( typeof override === 'boolean' ) {
override ? this.showHelp() : this.close();
}
else {
if( this.dom ) {
this.close();
}
else {
this.showHelp();
}
}
}
/**
* Opens an overlay window with help material.
*/
showHelp() {
if( this.Reveal.getConfig().help ) {
this.close();
this.createOverlay( 'r-overlay-help' );
let html = '<p class="title">Keyboard Shortcuts</p>';
let shortcuts = this.Reveal.keyboard.getShortcuts(),
bindings = this.Reveal.keyboard.getBindings();
html += '<table><th>KEY</th><th>ACTION</th>';
for( let key in shortcuts ) {
html += `<tr><td>${key}</td><td>${shortcuts[ key ]}</td></tr>`;
}
// Add custom key bindings that have associated descriptions
for( let binding in bindings ) {
if( bindings[binding].key && bindings[binding].description ) {
html += `<tr><td>${bindings[binding].key}</td><td>${bindings[binding].description}</td></tr>`;
}
}
html += '</table>';
this.viewport.innerHTML = `
<header class="r-overlay-header">
<button class="r-overlay-button r-overlay-close">Esc <span class="icon"></span></button>
</header>
<div class="r-overlay-content">
<div class="r-overlay-help-content">${html}</div>
</div>
`;
this.dom.querySelector( '.r-overlay-close' ).addEventListener( 'click', event => {
this.close();
event.preventDefault();
}, false );
this.Reveal.dispatchEvent({ type: 'showhelp' });
}
}
isOpen() {
return !!this.dom;
}
/**
* Closes any currently open overlay.
*/
close() {
if( this.dom ) {
this.dom.remove();
this.dom = null;
this.state = {};
this.Reveal.dispatchEvent({ type: 'closeoverlay' });
return true;
}
return false;
}
getState() {
return this.state;
}
setState( state ) {
// Ignore the incoming state if none of the preview related
// props have changed
if( this.stateProps.every( key => this.state[ key ] === state[ key ] ) ) {
return;
}
if( state.previewIframe ) {
this.previewIframe( state.previewIframe );
}
else if( state.previewImage ) {
this.previewImage( state.previewImage, state.previewFit );
}
else if( state.previewVideo ) {
this.previewVideo( state.previewVideo, state.previewFit );
}
else {
this.close();
}
}
onSlidesClicked( event ) {
const target = event.target;
const linkTarget = target.closest( this.iframeTriggerSelector );
const mediaTarget = target.closest( this.mediaTriggerSelector );
// Was an iframe lightbox trigger clicked?
if( linkTarget ) {
if( event.metaKey || event.shiftKey || event.altKey ) {
// Let the browser handle meta keys naturally so users can cmd+click
return;
}
let url = linkTarget.getAttribute( 'href' ) || linkTarget.getAttribute( 'data-preview-link' );
if( url ) {
this.previewIframe( url );
event.preventDefault();
}
}
// Was a media lightbox trigger clicked?
else if( mediaTarget ) {
if( mediaTarget.hasAttribute( 'data-preview-image' ) ) {
let url = mediaTarget.dataset.previewImage || mediaTarget.getAttribute( 'src' );
if( url ) {
this.previewImage( url, mediaTarget.dataset.previewFit );
event.preventDefault();
}
}
else if( mediaTarget.hasAttribute( 'data-preview-video' ) ) {
let url = mediaTarget.dataset.previewVideo || mediaTarget.getAttribute( 'src' );
if( !url ) {
let source = mediaTarget.querySelector( 'source' );
if( source ) {
url = source.getAttribute( 'src' );
}
}
if( url ) {
this.previewVideo( url, mediaTarget.dataset.previewFit );
event.preventDefault();
}
}
}
}
destroy() {
this.close();
}
}

4
js/controllers/scrollview.js
View File

@@ -449,6 +449,10 @@ export default class ScrollView {
rangeStart = trigger.range[1];
} );
// Ensure the last trigger extends to the end of the page, otherwise
// rounding errors can cause the last trigger to end at 0.999999...
this.slideTriggers[this.slideTriggers.length - 1].range[1] = 1;
}
/**

53
js/controllers/slidecontent.js
View File

@@ -119,14 +119,14 @@ export default class SlideContent {
}
}
// Videos
else if ( backgroundVideo && !this.Reveal.isSpeakerNotes() ) {
else if ( backgroundVideo ) {
let video = document.createElement( 'video' );
if( backgroundVideoLoop ) {
video.setAttribute( 'loop', '' );
}
if( backgroundVideoMuted ) {
if( backgroundVideoMuted || this.Reveal.isSpeakerNotes() ) {
video.muted = true;
}
@@ -280,7 +280,9 @@ export default class SlideContent {
*/
startEmbeddedContent( element ) {
if( element && !this.Reveal.isSpeakerNotes() ) {
if( element ) {
const isSpeakerNotesWindow = this.Reveal.isSpeakerNotes();
// Restart GIFs
queryAll( element, 'img[src$=".gif"]' ).forEach( el => {
@@ -306,6 +308,9 @@ export default class SlideContent {
if( autoplay && typeof el.play === 'function' ) {
// In the speaker view we only auto-play muted media
if( isSpeakerNotesWindow && !el.muted ) return;
// If the media is ready, start playback
if( el.readyState > 1 ) {
this.startEmbeddedMedia( { target: el } );
@@ -337,27 +342,33 @@ export default class SlideContent {
}
} );
// Normal iframes
queryAll( element, 'iframe[src]' ).forEach( el => {
if( closest( el, '.fragment' ) && !closest( el, '.fragment.visible' ) ) {
return;
}
// Don't play iframe content in the speaker view since we can't
// guarantee that it's muted
if( !isSpeakerNotesWindow ) {
this.startEmbeddedIframe( { target: el } );
} );
// Normal iframes
queryAll( element, 'iframe[src]' ).forEach( el => {
if( closest( el, '.fragment' ) && !closest( el, '.fragment.visible' ) ) {
return;
}
// Lazy loading iframes
queryAll( element, 'iframe[data-src]' ).forEach( el => {
if( closest( el, '.fragment' ) && !closest( el, '.fragment.visible' ) ) {
return;
}
this.startEmbeddedIframe( { target: el } );
} );
if( el.getAttribute( 'src' ) !== el.getAttribute( 'data-src' ) ) {
el.removeEventListener( 'load', this.startEmbeddedIframe ); // remove first to avoid dupes
el.addEventListener( 'load', this.startEmbeddedIframe );
el.setAttribute( 'src', el.getAttribute( 'data-src' ) );
}
} );
// Lazy loading iframes
queryAll( element, 'iframe[data-src]' ).forEach( el => {
if( closest( el, '.fragment' ) && !closest( el, '.fragment.visible' ) ) {
return;
}
if( el.getAttribute( 'src' ) !== el.getAttribute( 'data-src' ) ) {
el.removeEventListener( 'load', this.startEmbeddedIframe ); // remove first to avoid dupes
el.addEventListener( 'load', this.startEmbeddedIframe );
el.setAttribute( 'src', el.getAttribute( 'data-src' ) );
}
} );
}
}

217
js/reveal.js
View File

@@ -13,6 +13,7 @@ import Controls from './controllers/controls.js'
import Progress from './controllers/progress.js'
import Pointer from './controllers/pointer.js'
import Plugins from './controllers/plugins.js'
import Overlay from './controllers/overlay.js'
import Touch from './controllers/touch.js'
import Focus from './controllers/focus.js'
import Notes from './controllers/notes.js'
@@ -28,7 +29,7 @@ import {
} from './utils/constants.js'
// The reveal.js version
export const VERSION = '5.1.0';
export const VERSION = '5.2.1';
/**
* reveal.js
@@ -119,6 +120,7 @@ export default function( revealElement, options ) {
progress = new Progress( Reveal ),
pointer = new Pointer( Reveal ),
plugins = new Plugins( Reveal ),
overlay = new Overlay( Reveal ),
focus = new Focus( Reveal ),
touch = new Touch( Reveal ),
notes = new Notes( Reveal );
@@ -130,6 +132,8 @@ export default function( revealElement, options ) {
if( !revealElement ) throw 'Unable to find presentation root (<div class="reveal">).';
if( initialized ) throw 'Reveal.js has already been initialized.';
initialized = true;
// Cache references to key DOM elements
@@ -508,16 +512,6 @@ export default function( revealElement, options ) {
resume();
}
// Iframe link previews
if( config.previewLinks ) {
enablePreviewLinks();
disablePreviewLinks( '[data-preview-link=false]' );
}
else {
disablePreviewLinks();
enablePreviewLinks( '[data-preview-link]:not([data-preview-link=false])' );
}
// Reset all changes made by auto-animations
autoAnimate.reset();
@@ -620,11 +614,11 @@ export default function( revealElement, options ) {
removeEventListeners();
cancelAutoSlide();
disablePreviewLinks();
// Destroy controllers
notes.destroy();
focus.destroy();
overlay.destroy();
plugins.destroy();
pointer.destroy();
controls.destroy();
@@ -774,164 +768,6 @@ export default function( revealElement, options ) {
}
/**
* Bind preview frame links.
*
* @param {string} [selector=a] - selector for anchors
*/
function enablePreviewLinks( selector = 'a' ) {
Array.from( dom.wrapper.querySelectorAll( selector ) ).forEach( element => {
if( /^(http|www)/gi.test( element.getAttribute( 'href' ) ) ) {
element.addEventListener( 'click', onPreviewLinkClicked, false );
}
} );
}
/**
* Unbind preview frame links.
*/
function disablePreviewLinks( selector = 'a' ) {
Array.from( dom.wrapper.querySelectorAll( selector ) ).forEach( element => {
if( /^(http|www)/gi.test( element.getAttribute( 'href' ) ) ) {
element.removeEventListener( 'click', onPreviewLinkClicked, false );
}
} );
}
/**
* Opens a preview window for the target URL.
*
* @param {string} url - url for preview iframe src
*/
function showPreview( url ) {
closeOverlay();
dom.overlay = document.createElement( 'div' );
dom.overlay.classList.add( 'overlay' );
dom.overlay.classList.add( 'overlay-preview' );
dom.wrapper.appendChild( dom.overlay );
dom.overlay.innerHTML =
`<header>
<a class="close" href="#"><span class="icon"></span></a>
<a class="external" href="${url}" target="_blank"><span class="icon"></span></a>
</header>
<div class="spinner"></div>
<div class="viewport">
<iframe src="${url}"></iframe>
<small class="viewport-inner">
<span class="x-frame-error">Unable to load iframe. This is likely due to the site's policy (x-frame-options).</span>
</small>
</div>`;
dom.overlay.querySelector( 'iframe' ).addEventListener( 'load', event => {
dom.overlay.classList.add( 'loaded' );
}, false );
dom.overlay.querySelector( '.close' ).addEventListener( 'click', event => {
closeOverlay();
event.preventDefault();
}, false );
dom.overlay.querySelector( '.external' ).addEventListener( 'click', event => {
closeOverlay();
}, false );
}
/**
* Open or close help overlay window.
*
* @param {Boolean} [override] Flag which overrides the
* toggle logic and forcibly sets the desired state. True means
* help is open, false means it's closed.
*/
function toggleHelp( override ){
if( typeof override === 'boolean' ) {
override ? showHelp() : closeOverlay();
}
else {
if( dom.overlay ) {
closeOverlay();
}
else {
showHelp();
}
}
}
/**
* Opens an overlay window with help material.
*/
function showHelp() {
if( config.help ) {
closeOverlay();
dom.overlay = document.createElement( 'div' );
dom.overlay.classList.add( 'overlay' );
dom.overlay.classList.add( 'overlay-help' );
dom.wrapper.appendChild( dom.overlay );
let html = '<p class="title">Keyboard Shortcuts</p><br/>';
let shortcuts = keyboard.getShortcuts(),
bindings = keyboard.getBindings();
html += '<table><th>KEY</th><th>ACTION</th>';
for( let key in shortcuts ) {
html += `<tr><td>${key}</td><td>${shortcuts[ key ]}</td></tr>`;
}
// Add custom key bindings that have associated descriptions
for( let binding in bindings ) {
if( bindings[binding].key && bindings[binding].description ) {
html += `<tr><td>${bindings[binding].key}</td><td>${bindings[binding].description}</td></tr>`;
}
}
html += '</table>';
dom.overlay.innerHTML = `
<header>
<a class="close" href="#"><span class="icon"></span></a>
</header>
<div class="viewport">
<div class="viewport-inner">${html}</div>
</div>
`;
dom.overlay.querySelector( '.close' ).addEventListener( 'click', event => {
closeOverlay();
event.preventDefault();
}, false );
}
}
/**
* Closes any currently open overlay.
*/
function closeOverlay() {
if( dom.overlay ) {
dom.overlay.parentNode.removeChild( dom.overlay );
dom.overlay = null;
return true;
}
return false;
}
/**
* Applies JavaScript-controlled layout rules to the
* presentation.
@@ -1688,6 +1524,7 @@ export default function( revealElement, options ) {
notes.update();
notes.updateVisibility();
overlay.update();
backgrounds.update( true );
slideNumber.update();
slideContent.formatEmbeddedContent();
@@ -2373,7 +2210,8 @@ export default function( revealElement, options ) {
indexv: indices.v,
indexf: indices.f,
paused: isPaused(),
overview: overview.isActive()
overview: overview.isActive(),
...overlay.getState()
};
}
@@ -2399,6 +2237,8 @@ export default function( revealElement, options ) {
if( typeof overviewFlag === 'boolean' && overviewFlag !== overview.isActive() ) {
overview.toggle( overviewFlag );
}
overlay.setState( state );
}
}
@@ -2803,24 +2643,6 @@ export default function( revealElement, options ) {
}
/**
* 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.
*
@@ -2899,7 +2721,7 @@ export default function( revealElement, options ) {
availableFragments: fragments.availableRoutes.bind( fragments ),
// Toggles a help overlay with keyboard shortcuts
toggleHelp,
toggleHelp: overlay.toggleHelp.bind( overlay ),
// Toggles the overview mode on/off
toggleOverview: overview.toggle.bind( overview ),
@@ -2929,7 +2751,7 @@ export default function( revealElement, options ) {
isSpeakerNotes: notes.isSpeakerNotesWindow.bind( notes ),
isOverview: overview.isActive.bind( overview ),
isFocused: focus.isFocused.bind( focus ),
isOverlayOpen: overlay.isOpen.bind( overlay ),
isScrollView: scrollView.isActive.bind( scrollView ),
isPrintView: printView.isActive.bind( printView ),
@@ -2944,9 +2766,13 @@ export default function( revealElement, options ) {
startEmbeddedContent: () => slideContent.startEmbeddedContent( currentSlide ),
stopEmbeddedContent: () => slideContent.stopEmbeddedContent( currentSlide, { unloadIframes: false } ),
// Preview management
showPreview,
hidePreview: closeOverlay,
// Lightbox previews
previewIframe: overlay.previewIframe.bind( overlay ),
previewImage: overlay.previewImage.bind( overlay ),
previewVideo: overlay.previewVideo.bind( overlay ),
showPreview: overlay.previewIframe.bind( overlay ), // deprecated in favor of showIframeLightbox
hidePreview: overlay.close.bind( overlay ),
// Adds or removes all internal event listeners
addEventListeners,
@@ -3060,13 +2886,14 @@ export default function( revealElement, options ) {
controls,
location,
overview,
keyboard,
fragments,
backgrounds,
slideContent,
slideNumber,
onUserInput,
closeOverlay,
closeOverlay: overlay.close.bind( overlay ),
updateSlidesVisibility,
layoutSlideContents,
transformSlides,