overlay mode refactoring

css/reveal.scss

@@ -1553,21 +1553,26 @@ $overlayHeaderPadding: 5px;
 	width: 100%;
 	height: 100%;
 	margin: 0;
+	object-fit: scale-down;
+}
+
+.reveal .overlay-preview[data-preview-fit="none"] img,
+.reveal .overlay-preview[data-preview-fit="none"] video {
 	object-fit: none;
 }
 
-.reveal .overlay-preview[data-object-fit="none"] img,
+.reveal .overlay-preview[data-preview-fit="scale-down"] img,
-.reveal .overlay-preview[data-object-fit="none"] video {
+.reveal .overlay-preview[data-preview-fit="scale-down"] video {
-	object-fit: none;
+	object-fit: scale-down;
 }
 
-.reveal .overlay-preview[data-object-fit="contain"] img,
+.reveal .overlay-preview[data-preview-fit="contain"] img,
-.reveal .overlay-preview[data-object-fit="contain"] video {
+.reveal .overlay-preview[data-preview-fit="contain"] video {
 	object-fit: contain;
 }
 
-.reveal .overlay-preview[data-object-fit="cover"] img,
+.reveal .overlay-preview[data-preview-fit="cover"] img,
-.reveal .overlay-preview[data-object-fit="cover"] video {
+.reveal .overlay-preview[data-preview-fit="cover"] video {
 	object-fit: cover;
 }
 

examples/preview-overlays.html

@@ -45,8 +45,12 @@
 								<img height="50" src="https://static.slid.es/images/alphabet/v1/a.png" data-preview-image>
 							</figure>
 							<figure>
-								<figcaption>Preview with data-object-fit="contain"</figcaption>
+								<figcaption>Preview with data-preview-fit="contain"</figcaption>
-								<img height="50" src="https://static.slid.es/images/alphabet/v1/a.png" data-preview-image data-object-fit="contain">
+								<img height="50" src="https://static.slid.es/images/alphabet/v1/a.png" data-preview-image data-preview-fit="contain">
+							</figure>
+							<figure>
+								<figcaption>Preview with data-preview-fit="cover"</figcaption>
+								<img height="50" src="https://static.slid.es/images/alphabet/v1/a.png" data-preview-image data-preview-fit="cover">
 							</figure>
 							<figure>
 								<figcaption>Preview another image (c)</figcaption>

js/controllers/overlay.js

@@ -8,66 +8,35 @@ export default class Overlay {
 
 		this.Reveal = Reveal;
 
-		this.onPreviewLinkClicked = this.onPreviewLinkClicked.bind( this );
+		this.onSlidesClicked = this.onSlidesClicked.bind( this );
-		this.onPreviewMediaClicked = this.onPreviewMediaClicked.bind( this );
 
-		this.linkPreviews = [];
+		this.linkPreviewSelector = null;
-		this.mediaPreviews = [];
+		this.mediaPreviewSelector = '[data-preview-image], [data-preview-video]';
 
 	}
 
 	update() {
 
-		this.removePreviewListeneres();
+		// Enable link previews globally
-
 		if( this.Reveal.getConfig().previewLinks ) {
-			// Enable link previews globally
+			this.linkPreviewSelector = 'a[href]:not([data-preview-link=false])';
-			this.enableLinkPreviews( 'a[href]:not([data-preview-link=false])' );
+		}
+		// Enable link previews for individual elements
+		else {
+			this.linkPreviewSelector = '[data-preview-link]:not([data-preview-link=false])';
+		}
+
+		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( this.hasLinkPreviews || this.hasMediaPreviews ) {
+			this.Reveal.getSlidesElement().addEventListener( 'click', this.onSlidesClicked, false );
 		}
 		else {
-			// Enable link previews for individual elements
+			this.Reveal.getSlidesElement().removeEventListener( 'click', this.onSlidesClicked, false );
-			this.enableLinkPreviews( '[data-preview-link]:not([data-preview-link=false])' );
 		}
 
-		this.enableMediaPreviews( '[data-preview-image], [data-preview-video]' );
-
-	}
-
-	/**
-	 * Bind preview frame links.
-	 *
-	 * @param {string} [selector=a] - selector for anchors
-	 */
-	enableLinkPreviews( selector = 'a' ) {
-
-		Array.from( this.Reveal.getSlidesElement().querySelectorAll( selector ) ).forEach( element => {
-			if( /^(http|www)/gi.test( element.getAttribute( 'href' ) ) ) {
-				element.addEventListener( 'click', this.onPreviewLinkClicked, false );
-				this.linkPreviews.push( element );
-			}
-		} );
-
-	}
-
-	/**
-	 * Bind image/video preview links.
-	 *
-	 * @param {string} selector - css selector for images/videos
-	 */
-	enableMediaPreviews( selector ) {
-
-		Array.from( this.Reveal.getSlidesElement().querySelectorAll( selector ) ).forEach( element => {
-			element.addEventListener( 'click', this.onPreviewMediaClicked, false );
-			this.mediaPreviews.push( element );
-		} );
-
-	}
-
-	removePreviewListeneres() {
-
-		this.linkPreviews.forEach( element => element.removeEventListener( 'click', this.onPreviewLinkClicked, false ) );
-		this.mediaPreviews.forEach( element => element.removeEventListener( 'click', this.onPreviewMediaClicked, false ) );
-
 	}
 
 	/**
@@ -132,7 +101,7 @@ export default class Overlay {
 		this.element.dataset.state = 'loading';
 		this.Reveal.getRevealElement().appendChild( this.element );
 
-		this.element.dataset.objectFit = trigger.dataset.objectFit || 'none';
+		this.element.dataset.previewFit = trigger.dataset.previewFit || 'scale-down';
 
 		this.element.innerHTML =
 			`<header class="overlay-header">
@@ -169,8 +138,10 @@ export default class Overlay {
 		else if( mediaType === 'video' ) {
 
 			const video = document.createElement( 'video' );
-			video.autoplay = true;
+			video.autoplay = this.element.dataset.previewAutoplay === 'false' ? false : true;
-			video.controls = true;
+			video.controls = this.element.dataset.previewControls === 'false' ? false : true;
+			video.loop = this.element.dataset.previewLoop === 'true' ? true : false;
+			video.muted = this.element.dataset.previewMuted === 'true' ? true : false;
 			video.src = url;
 			viewport.appendChild( video );
 
@@ -284,52 +255,40 @@ export default class Overlay {
 
 	}
 
-	/**
+	onSlidesClicked( event ) {
-	 * Handles clicks on links that are set to preview in the
-	 * iframe overlay.
-	 *
-	 * @param {object} event
-	 */
-	onPreviewLinkClicked( event ) {
 
-		if( event.currentTarget && event.currentTarget.hasAttribute( 'href' ) ) {
+		const target = event.target;
-			let url = event.currentTarget.getAttribute( 'href' );
+
+		const linkTarget = target.closest( this.linkPreviewSelector );
+		const mediaTarget = target.closest( this.mediaPreviewSelector );
+
+		// Was a link preview clicked?
+		if( linkTarget ) {
+			let url = linkTarget.getAttribute( 'href' );
 			if( url ) {
 				this.showIframePreview( url );
 				event.preventDefault();
 			}
 		}
-
+		// Was a media preview clicked?
-	}
+		else if( mediaTarget ) {
-
+			if( mediaTarget.hasAttribute( 'data-preview-image' ) ) {
-	/**
+				let url = mediaTarget.dataset.previewImage || mediaTarget.getAttribute( 'src' );
-	 * Handles clicks on images/videos that are set to preview
-	 * in the iframe overlay.
-	 *
-	 * @param {object} event
-	 */
-	onPreviewMediaClicked( event ) {
-
-		const trigger = event.currentTarget;
-
-		if( trigger ) {
-			if( trigger.hasAttribute( 'data-preview-image' ) ) {
-				let url = trigger.dataset.previewImage || event.currentTarget.getAttribute( 'src' );
 				if( url ) {
-					this.showMediaPreview( url, 'image', trigger );
+					this.showMediaPreview( url, 'image', mediaTarget );
 					event.preventDefault();
 				}
 			}
-			else if( trigger.hasAttribute( 'data-preview-video' ) ) {
+			else if( mediaTarget.hasAttribute( 'data-preview-video' ) ) {
-				let url = trigger.dataset.previewVideo || event.currentTarget.getAttribute( 'src' );
+				let url = mediaTarget.dataset.previewVideo || mediaTarget.getAttribute( 'src' );
 				if( !url ) {
-					let source = event.currentTarget.querySelector( 'source' );
+					let source = mediaTarget.querySelector( 'source' );
 					if( source ) {
 						url = source.getAttribute( 'src' );
 					}
 				}
 				if( url ) {
-					this.showMediaPreview( url, 'video', trigger );
+					this.showMediaPreview( url, 'video', mediaTarget );
 					event.preventDefault();
 				}
 			}
@@ -341,9 +300,6 @@ export default class Overlay {
 
 		this.close();
 
-		this.linkPreviews = [];
-		this.mediaPreviews = [];
-
 	}
 
 }