add support image/video lightbox via data-preview-image/video, move overlay into standalone controller
This commit is contained in:
Hakim El Hattab
202
js/reveal.js
202
js/reveal.js
@@ -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'
|
||||
@@ -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 );
|
||||
@@ -510,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();
|
||||
|
||||
@@ -622,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();
|
||||
@@ -776,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 class="overlay-header">
|
||||
<a class="overlay-external" href="${url}" target="_blank"><span class="icon"></span></a>
|
||||
<a class="overlay-close" href="#"><span class="icon"></span></a>
|
||||
</header>
|
||||
<div class="overlay-spinner"></div>
|
||||
<div class="overlay-viewport">
|
||||
<iframe src="${url}"></iframe>
|
||||
<small class="overlay-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( '.overlay-close' ).addEventListener( 'click', event => {
|
||||
closeOverlay();
|
||||
event.preventDefault();
|
||||
}, false );
|
||||
|
||||
dom.overlay.querySelector( '.overlay-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>';
|
||||
|
||||
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 class="overlay-header">
|
||||
<a class="overlay-close" href="#"><span class="icon"></span></a>
|
||||
</header>
|
||||
<div class="overlay-viewport">
|
||||
<div class="overlay-viewport-inner">${html}</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
dom.overlay.querySelector( '.overlay-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.
|
||||
@@ -1690,6 +1524,7 @@ export default function( revealElement, options ) {
|
||||
|
||||
notes.update();
|
||||
notes.updateVisibility();
|
||||
overlay.update();
|
||||
backgrounds.update( true );
|
||||
slideNumber.update();
|
||||
slideContent.formatEmbeddedContent();
|
||||
@@ -2805,24 +2640,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.
|
||||
*
|
||||
@@ -2901,7 +2718,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 ),
|
||||
@@ -2947,8 +2764,10 @@ export default function( revealElement, options ) {
|
||||
stopEmbeddedContent: () => slideContent.stopEmbeddedContent( currentSlide, { unloadIframes: false } ),
|
||||
|
||||
// Preview management
|
||||
showPreview,
|
||||
hidePreview: closeOverlay,
|
||||
showIframePreview: overlay.showIframePreview.bind( overlay ),
|
||||
showMediaPreview: overlay.showMediaPreview.bind( overlay ),
|
||||
showPreview: overlay.showIframePreview.bind( overlay ),
|
||||
hidePreview: overlay.close.bind( overlay ),
|
||||
|
||||
// Adds or removes all internal event listeners
|
||||
addEventListeners,
|
||||
@@ -3062,13 +2881,14 @@ export default function( revealElement, options ) {
|
||||
controls,
|
||||
location,
|
||||
overview,
|
||||
keyboard,
|
||||
fragments,
|
||||
backgrounds,
|
||||
slideContent,
|
||||
slideNumber,
|
||||
|
||||
onUserInput,
|
||||
closeOverlay,
|
||||
closeOverlay: overlay.close.bind( overlay ),
|
||||
updateSlidesVisibility,
|
||||
layoutSlideContents,
|
||||
transformSlides,
|
||||
|
||||
Reference in New Issue
Block a user