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-19 11:01:30 +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