add lightbox to reveal.js state, enables syncing with speaker view #3771

build assets
add support for data-preview-link on any element type (prev only a)
2025-09-20 03:21:29 +02:00 · 2025-03-24 15:34:51 +01:00 · 2025-03-20 13:58:22 +01:00 · 2025-03-20 13:52:28 +01:00 · 2025-03-20 11:38:20 +01:00
13 changed files with 118 additions and 16 deletions
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -1444,7 +1444,8 @@ $controlsArrowAngleActive: 36deg;
 }
 .reveal [data-preview-image],
-.reveal [data-preview-video] {
+.reveal [data-preview-video],
 .reveal [data-preview-link]:not(a):not([data-preview-link=false]) {
 	cursor: zoom-in;
 }
--- a/dist/reveal.css
+++ b/dist/reveal.css
--- a/dist/reveal.esm.js
+++ b/dist/reveal.esm.js
--- a/dist/reveal.esm.js.map
+++ b/dist/reveal.esm.js.map
--- a/dist/reveal.js
+++ b/dist/reveal.js
--- a/dist/reveal.js.map
+++ b/dist/reveal.js.map
--- a/examples/preview-overlays.html
+++ b/examples/preview-overlays.html
@@ -4,7 +4,7 @@
 	<head>
 		<meta charset="utf-8">
-		<title>reveal.js - Slide Transitions</title>
+		<title>reveal.js - Ligthbox</title>
 		<link rel="stylesheet" href="../dist/reveal.css">
 		<link rel="stylesheet" href="../dist/theme/black.css" id="theme">
@@ -82,8 +82,46 @@
 						<div class="r-vstack items-start">
 							<h5>Iframes</h5>
 							<a href="https://hakim.se">https://hakim.se | data-preview-link</a>
 							<a data-preview-link href="https://hakim.se">https://hakim.se | data-preview-link</a>
 							<br />
 							<a data-preview-link="false" href="https://hakim.se">https://hakim.se | data-preview-link=false</a>
 							<br />
 							<figure>
 								<figcaption>Preview link from an image</figcaption>
 								<img height="50" src="https://static.slid.es/images/alphabet/v1/a.png" data-preview-link="https://hakim.se">
 							</figure>
 						</div>
 					</div>
 				</section>
 				<section style="text-align: left;">
 					<h2>Lightbox</h2>
 					<div class="r-hstack items-start justify-start">
 						<div class="r-vstack items-start">
 							<h5>Images</h5>
 							<figure>
 								<img height="100" src="https://static.slid.es/images/alphabet/v1/a.png" data-preview-image data-preview-fit="contain">
 							</figure>
 						</div>
 						<div style="width: 1px; height: 20vh; margin: 0 3rem;background-color: #222;"></div>
 						<div class="r-vstack items-start">
 							<h5>Videos</h5>
 							<figure>
 								<video height="100" src="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4" data-preview-video></video>
 							</figure>
 						</div>
 						<div style="width: 1px; height: 20vh; margin: 0 3rem;background-color: #222;"></div>
 						<div class="r-vstack items-start">
 							<h5>Iframes</h5>
 							<a style="font-size: 28px;" data-preview-link href="https://hakim.se">https://hakim.se</a>
 						</div>
 					</div>
--- a/js/controllers/keyboard.js
+++ b/js/controllers/keyboard.js
@@ -190,6 +190,10 @@ export default class Keyboard {
 			}
 		}
 		if( this.Reveal.isOverlayOpen() && !['Escape', 'f', 'c'].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();
--- a/js/controllers/overlay.js
+++ b/js/controllers/overlay.js
@@ -2,6 +2,7 @@
 * Handles the display of reveal.js' overlay elements used
 * to preview iframes, images & videos.
 */
 export default class Overlay {
 	constructor( Reveal ) {
@@ -13,13 +14,15 @@ export default class Overlay {
 		this.linkPreviewSelector = null;
 		this.mediaPreviewSelector = '[data-preview-image], [data-preview-video]';
 		this.state = {};
 	}
 	update() {
 		// Enable link previews globally
 		if( this.Reveal.getConfig().previewLinks ) {
-			this.linkPreviewSelector = 'a[href]:not([data-preview-link=false])';
+			this.linkPreviewSelector = 'a[href]:not([data-preview-link=false]), [data-preview-link]:not(a):not([data-preview-link=false])';
 		}
 		// Enable link previews for individual elements
 		else {
@@ -62,6 +65,8 @@ export default class Overlay {
 		this.close();
 		this.state.previewIframe = url;
 		this.createOverlay( 'r-overlay-preview' );
 		this.dom.dataset.state = 'loading';
@@ -113,9 +118,11 @@ export default class Overlay {
 		this.close();
 		const fitMode = trigger ? trigger.dataset.previewFit || 'scale-down' : 'scale-down';
 		this.createOverlay( 'r-overlay-preview' );
 		this.dom.dataset.state = 'loading';
-		this.dom.dataset.previewFit = trigger ? trigger.dataset.previewFit || 'scale-down' : 'scale-down';
+		this.dom.dataset.previewFit = fitMode;
 		this.viewport.innerHTML =
 			`<header class="r-overlay-header">
@@ -128,6 +135,8 @@ export default class Overlay {
 		if( mediaType === 'image' ) {
 			this.state = { previewImage: url, previewFit: fitMode }
 			const img = document.createElement( 'img', {} );
 			img.src = url;
 			contentElement.appendChild( img );
@@ -151,6 +160,8 @@ export default class Overlay {
 		}
 		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;
@@ -257,7 +268,9 @@ export default class Overlay {
 	}
 	isOpen() {
 		return !!this.dom;
 	}
 	/**
@@ -268,6 +281,11 @@ export default class Overlay {
 		if( this.dom ) {
 			this.dom.remove();
 			this.dom = null;
 			this.state = {};
 			this.Reveal.dispatchEvent({ type: 'closeoverlay' });
 			return true;
 		}
@@ -275,6 +293,29 @@ export default class Overlay {
 	}
 	getState() {
 		return this.state;
 	}
 	setState( state ) {
 		if( state.previewIframe ) {
 			this.showIframePreview( state.previewIframe );
 		}
 		else if( state.previewImage ) {
 			this.showMediaPreview( state.previewImage, 'image' );
 		}
 		else if( state.previewVideo ) {
 			this.showMediaPreview( state.previewVideo, 'video' );
 		}
 		else {
 			this.close();
 		}
 	}
 	onSlidesClicked( event ) {
 		const target = event.target;
@@ -284,7 +325,7 @@ export default class Overlay {
 		// Was a link preview clicked?
 		if( linkTarget ) {
-			let url = linkTarget.getAttribute( 'href' );
+			let url = linkTarget.getAttribute( 'href' ) || linkTarget.getAttribute( 'data-preview-link' );
 			if( url ) {
 				this.showIframePreview( url );
 				event.preventDefault();
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -2210,7 +2210,8 @@ export default function( revealElement, options ) {
 			indexv: indices.v,
 			indexf: indices.f,
 			paused: isPaused(),
-			overview: overview.isActive()
+			overview: overview.isActive(),
 			...overlay.getState()
 		};
 	}
@@ -2236,6 +2237,8 @@ export default function( revealElement, options ) {
 			if( typeof overviewFlag === 'boolean' && overviewFlag !== overview.isActive() ) {
 				overview.toggle( overviewFlag );
 			}
 			overlay.setState( state );
 		}
 	}
--- a/plugin/notes/notes.esm.js
+++ b/plugin/notes/notes.esm.js
--- a/plugin/notes/notes.js
+++ b/plugin/notes/notes.js
--- a/plugin/notes/speaker-view.html
+++ b/plugin/notes/speaker-view.html
@@ -414,14 +414,25 @@
 					}
 					// Messages sent by the reveal.js inside of the current slide preview
 					else if( data && data.namespace === 'reveal' ) {
 						const supportedEvents = [
 							'slidechanged',
 							'fragmentshown',
 							'fragmenthidden',
 							'paused',
 							'resumed',
 							'showiframepreview',
 							'showmediapreview'
 						];
 						if( /ready/.test( data.eventName ) ) {
 							// Send a message back to notify that the handshake is complete
 							window.opener.postMessage( JSON.stringify({ namespace: 'reveal-notes', type: 'connected'} ), '*' );
 						}
-						else if( /slidechanged|fragmentshown|fragmenthidden|paused|resumed/.test( data.eventName ) && currentState !== JSON.stringify( data.state ) ) {
+						else if( /closeoverlay/.test( data.eventName ) ) {
-
+							dispatchStateToMainWindow( data.state );
 						}
 						else if( supportedEvents.includes( data.eventName ) && currentState !== JSON.stringify( data.state ) ) {
 							dispatchStateToMainWindow( data.state );
 						}
 					}
Author	SHA1	Message	Date
Hakim El Hattab	c69adfb022	add lightbox to reveal.js state, enables syncing with speaker view #3771	2025-03-24 15:34:51 +01:00
Hakim El Hattab	47ee25dd19	build assets	2025-03-20 13:58:22 +01:00
Hakim El Hattab	94716f9e51	add support for data-preview-link on any element type (prev only a)	2025-03-20 13:52:28 +01:00
Hakim El Hattab	b3fd27d071	prevent default keyboard shortcuts while overlay is open #3766 #3767	2025-03-20 11:38:20 +01:00