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

README.md

@@ -4,7 +4,7 @@
   </a>
   <br><br>
   <a href="https://github.com/hakimel/reveal.js/actions"><img src="https://github.com/hakimel/reveal.js/workflows/tests/badge.svg"></a>
-  <a href="https://slides.com/"><img src="https://static.slid.es/images/slides-github-banner-320x40.png?1" alt="Slides" width="160" height="20"></a>
+  <a href="https://slides.com/"><img src="https://s3.amazonaws.com/static.slid.es/images/slides-github-banner-320x40.png?1" alt="Slides" width="160" height="20"></a>
 </p>
 
 reveal.js is an open source HTML presentation framework. It enables anyone with a web browser to create beautiful presentations for free. Check out the live demo at [revealjs.com](https://revealjs.com/).

css/reveal.scss

@@ -39,12 +39,6 @@ html.reveal-full-page {
 	--r-overlay-gap: 5px;
 }
 
-@media screen and (max-width: 1024px), (max-height: 768px) {
-	.reveal-viewport {
-		--r-overlay-header-height: 26px;
-	}
-}
-
 // Force the presentation to cover the full viewport when we
 // enter fullscreen mode. Fixes sizing issues in Safari.
 .reveal-viewport:fullscreen {
@@ -1462,7 +1456,7 @@ $controlsArrowAngleActive: 36deg;
 	bottom: var(--r-overlay-margin);
 	left: var(--r-overlay-margin);
 	border-radius: min( var(--r-overlay-margin), 6px );
-	z-index: 99;
+	z-index: 1000;
 	background: rgba( 0, 0, 0, 0.95 );
 	backdrop-filter: blur( 10px );
 	transition: all 0.3s ease;
@@ -1498,7 +1492,7 @@ $controlsArrowAngleActive: 36deg;
 	justify-content: center;
 	min-width: var(--r-overlay-header-height);
 	min-height: var(--r-overlay-header-height);
-	padding: 0 calc(var(--r-overlay-header-height) / 4);
+	padding: 0 10px;
 	opacity: 1;
 	border-radius: 6px;
 	font-size: 18px;

demo.html

@@ -197,25 +197,6 @@
 					</script>
 				</section>
 
-				<section>
-					<h2>Lightbox</h2>
-					Turn any element into a <a href="https://revealjs.com/lightbox/">lightbox</a> using <strong>data‑preview‑image</strong> & <strong>data‑preview‑video</strong>.
-					<div class="r-hstack" style="gap: 2rem;">
-						<div>
-							<pre style="font-size: 12px; width: 100%"><code class="html" data-trim>
-								&lt;img src="image.png" data-preview-image="image.png"&gt;
-							</code></pre>
-							<img src="https://static.slid.es/logo/v2/slides-symbol-1024x1024.png" height="100" data-preview-image>
-						</div>
-						<div>
-							<pre style="font-size: 12px; width: 100%"><code class="html" data-trim>
-								&lt;img src="video.png" data-preview-video="video.mp4"&gt;
-							</code></pre>
-							<img src="https://static.slid.es/site/homepage/v1/homepage-video-editor.png" height="100" data-preview-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4">
-						</div>
-					</div>
-				</section>
-
 				<section>
 					<p>Add the <code>r-fit-text</code> class to auto-size text</p>
 					<h2 class="r-fit-text">FIT TEXT</h2>

examples/backgrounds.html

@@ -89,7 +89,7 @@
 					<h2>Same background twice (2/2)</h2>
 				</section>
 
-				<section data-background-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://static.slid.es/site/homepage/v1/homepage-video-editor.webm">
+				<section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm">
 					<h2>Video background</h2>
 				</section>
 

examples/markdown.html

@@ -121,7 +121,7 @@
                 <!-- Images -->
                 <section data-markdown>
                     <script type="text/template">
-                        ![Sample image](https://static.slid.es/logo/v2/slides-symbol-512x512.png)
+                        ![Sample image](https://s3.amazonaws.com/static.slid.es/logo/v2/slides-symbol-512x512.png)
                     </script>
                 </section>
 

examples/markdown.md

@@ -33,7 +33,7 @@ Content 3.2
 
 ## External 3.3 (Image)
 
-![External Image](https://static.slid.es/logo/v2/slides-symbol-512x512.png)
+![External Image](https://s3.amazonaws.com/static.slid.es/logo/v2/slides-symbol-512x512.png)
 
 
 ## External 3.4 (Math)

examples/scroll.html

@@ -91,7 +91,7 @@
           <section data-background="https://static.slid.es/reveal/image-placeholder.png" id="image-bg">
             <h2>Image Backgrounds</h2>
           </section>
-          <section data-background-video-muted data-background-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://static.slid.es/site/homepage/v1/homepage-video-editor.webm">
+          <section data-background-video-muted data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm">
             <div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;">
               <h2>Video background</h2>
             </div>

js/controllers/keyboard.js

@@ -190,7 +190,7 @@ export default class Keyboard {
 			}
 		}
 
-		if( this.Reveal.isOverlayOpen() && !["Escape", "f", "c", "b", "."].includes(event.key) ) {
+		if( this.Reveal.isOverlayOpen() && !['Escape', 'f', 'c'].includes(event.key) ) {
 			return false;
 		}
 

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 ) {
@@ -10,10 +11,9 @@ export default class Overlay {
 
 		this.onSlidesClicked = this.onSlidesClicked.bind( this );
 
-		this.iframeTriggerSelector = null;
-		this.mediaTriggerSelector = '[data-preview-image], [data-preview-video]';
+		this.linkPreviewSelector = null;
+		this.mediaPreviewSelector = '[data-preview-image], [data-preview-video]';
 
-		this.stateProps = ['previewIframe', 'previewImage', 'previewVideo', 'previewFit'];
 		this.state = {};
 
 	}
@@ -22,18 +22,18 @@ export default class Overlay {
 
 		// 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])';
+			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 {
-			this.iframeTriggerSelector = '[data-preview-link]:not([data-preview-link=false])';
+			this.linkPreviewSelector = '[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;
+		this.hasLinkPreviews = this.Reveal.getSlidesElement().querySelectorAll( this.linkPreviewSelector ).length > 0;
+		this.hasMediaPreviews = this.Reveal.getSlidesElement().querySelectorAll( this.mediaPreviewSelector ).length > 0;
 
 		// Only add the listener when there are previewable elements in the slides
-		if( hasLinkPreviews || hasMediaPreviews ) {
+		if( this.hasLinkPreviews || this.hasMediaPreviews ) {
 			this.Reveal.getSlidesElement().addEventListener( 'click', this.onSlidesClicked, false );
 		}
 		else {
@@ -57,15 +57,15 @@ export default class Overlay {
 	}
 
 	/**
-	 * Opens a lightbox that previews the target URL.
+	 * Opens a preview window for the target URL.
 	 *
-	 * @param {string} url - url for lightbox iframe src
+	 * @param {string} url - url for preview iframe src
 	 */
-	previewIframe( url ) {
+	showIframePreview( url ) {
 
 		this.close();
 
-		this.state = { previewIframe: url };
+		this.state.previewIframe = url;
 
 		this.createOverlay( 'r-overlay-preview' );
 		this.dom.dataset.state = 'loading';
@@ -96,19 +96,20 @@ export default class Overlay {
 			this.close();
 		}, false );
 
-		this.Reveal.dispatchEvent({ type: 'previewiframe', data: { url } });
+		this.Reveal.dispatchEvent({ type: 'showiframepreview', data: { url } });
 
 	}
 
 	/**
-	 * Opens a lightbox window that provides a larger view of the
+	 * Opens a preview 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
+	 * @param {HTMLElement} [trigger] - the element that triggered
+	 * the preview
 	 */
-	previewMedia( url, mediaType, fitMode ) {
+	showMediaPreview( url, mediaType, trigger ) {
 
 		if( mediaType !== 'image' && mediaType !== 'video' ) {
 			console.warn( 'Please specify a valid media type to preview (image|video)' );
@@ -117,7 +118,7 @@ export default class Overlay {
 
 		this.close();
 
-		fitMode = fitMode || 'scale-down';
+		const fitMode = trigger ? trigger.dataset.previewFit || 'scale-down' : 'scale-down';
 
 		this.createOverlay( 'r-overlay-preview' );
 		this.dom.dataset.state = 'loading';
@@ -156,8 +157,6 @@ export default class Overlay {
 				this.close();
 			}, false );
 
-			this.Reveal.dispatchEvent({ type: 'previewimage', data: { url } });
-
 		}
 		else if( mediaType === 'video' ) {
 
@@ -182,8 +181,6 @@ export default class Overlay {
 					`<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' );
@@ -194,17 +191,7 @@ export default class Overlay {
 			event.preventDefault();
 		}, false );
 
-	}
-
-	previewImage( url, fitMode ) {
-
-		this.previewMedia( url, 'image', fitMode );
-
-	}
-
-	previewVideo( url, fitMode ) {
-
-		this.previewMedia( url, 'video', fitMode );
+		this.Reveal.dispatchEvent({ type: 'showmediapreview', data: { mediaType, url, trigger } });
 
 	}
 
@@ -314,20 +301,14 @@ export default class Overlay {
 
 	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 );
+			this.showIframePreview( state.previewIframe );
 		}
 		else if( state.previewImage ) {
-			this.previewImage( state.previewImage, state.previewFit );
+			this.showMediaPreview( state.previewImage, 'image' );
 		}
 		else if( state.previewVideo ) {
-			this.previewVideo( state.previewVideo, state.previewFit );
+			this.showMediaPreview( state.previewVideo, 'video' );
 		}
 		else {
 			this.close();
@@ -339,27 +320,23 @@ export default class Overlay {
 
 		const target = event.target;
 
-		const linkTarget = target.closest( this.iframeTriggerSelector );
-		const mediaTarget = target.closest( this.mediaTriggerSelector );
+		const linkTarget = target.closest( this.linkPreviewSelector );
+		const mediaTarget = target.closest( this.mediaPreviewSelector );
 
-		// Was an iframe lightbox trigger clicked?
+		// Was a link preview 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 );
+				this.showIframePreview( url );
 				event.preventDefault();
 			}
 		}
-		// Was a media lightbox trigger clicked?
+		// Was a media preview 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 );
+					this.showMediaPreview( url, 'image', mediaTarget );
 					event.preventDefault();
 				}
 			}
@@ -372,7 +349,7 @@ export default class Overlay {
 					}
 				}
 				if( url ) {
-					this.previewVideo( url, mediaTarget.dataset.previewFit );
+					this.showMediaPreview( url, 'video', mediaTarget );
 					event.preventDefault();
 				}
 			}

js/reveal.js

@@ -29,7 +29,7 @@ import {
 } from './utils/constants.js'
 
 // The reveal.js version
-export const VERSION = '5.2.1';
+export const VERSION = '5.2.0';
 
 /**
  * reveal.js
@@ -2766,12 +2766,10 @@ export default function( revealElement, options ) {
 		startEmbeddedContent: () => slideContent.startEmbeddedContent( currentSlide ),
 		stopEmbeddedContent: () => slideContent.stopEmbeddedContent( currentSlide, { unloadIframes: false } ),
 
-		// 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
+		// Preview management
+		showIframePreview: overlay.showIframePreview.bind( overlay ),
+		showMediaPreview: overlay.showMediaPreview.bind( overlay ),
+		showPreview: overlay.showIframePreview.bind( overlay ), // deprecated in favor of showIframePreview
 		hidePreview: overlay.close.bind( overlay ),
 
 		// Adds or removes all internal event listeners

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reveal.js",
-  "version": "5.2.1",
+  "version": "5.2.0",
   "description": "The HTML Presentation Framework",
   "homepage": "https://revealjs.com",
   "subdomain": "revealjs",

plugin/notes/plugin.js

@@ -209,10 +209,6 @@ const Plugin = () => {
 		deck.on( 'overviewshown', post );
 		deck.on( 'paused', post );
 		deck.on( 'resumed', post );
-		deck.on( 'previewiframe', post );
-		deck.on( 'previewimage', post );
-		deck.on( 'previewvideo', post );
-		deck.on( 'closeoverlay', post );
 
 		// Post the initial state
 		post();

plugin/notes/speaker-view.html

@@ -420,16 +420,17 @@
 							'fragmenthidden',
 							'paused',
 							'resumed',
-							'previewiframe',
-							'previewimage',
-							'previewvideo',
-							'closeoverlay'
+							'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( /closeoverlay/.test( data.eventName ) ) {
+							dispatchStateToMainWindow( data.state );
+						}
 						else if( supportedEvents.includes( data.eventName ) && currentState !== JSON.stringify( data.state ) ) {
 							dispatchStateToMainWindow( data.state );
 						}
@@ -504,12 +505,9 @@
 						notes.classList.add( 'hidden' );
 					}
 
-					// Don't show lightboxes in the upcoming slide
-					const { previewVideo, previewImage, previewIframe, ...upcomingState } = data.state;
-
 					// Update the note slides
 					currentSlide.contentWindow.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ] }), '*' );
-					upcomingSlide.contentWindow.postMessage( JSON.stringify({ method: 'setState', args: [ upcomingState ] }), '*' );
+					upcomingSlide.contentWindow.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ] }), '*' );
 					upcomingSlide.contentWindow.postMessage( JSON.stringify({ method: 'next' }), '*' );
 
 				}