mirror/reveal.js
1
0
Fork 0
mirror of https://github.com/hakimel/reveal.js.git synced 2025-08-04 13:47:37 +02:00
Code Issues Releases Wiki Activity

sync lightbox between speaker/main window (fixes #3771)

Browse Source
This commit is contained in:
Hakim El Hattab
2025-03-25 10:42:41 +01:00
parent ac4064b64d
commit aa9dfc7eb8
11 changed files with 74 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/reveal.esm.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/reveal.esm.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/reveal.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/reveal.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
examples/preview-overlays.html
View File

@@ -4,7 +4,7 @@
<head> <head>
<meta charset="utf-8"> <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/reveal.css">
<link rel="stylesheet" href="../dist/theme/black.css" id="theme"> <link rel="stylesheet" href="../dist/theme/black.css" id="theme">

55
js/controllers/overlay.js
View File

@@ -13,6 +13,8 @@ export default class Overlay {
this.linkPreviewSelector = null; this.linkPreviewSelector = null;
this.mediaPreviewSelector = '[data-preview-image], [data-preview-video]'; this.mediaPreviewSelector = '[data-preview-image], [data-preview-video]';
this.state = {};
} }
update() { update() {
@@ -62,6 +64,8 @@ export default class Overlay {
this.close(); this.close();
this.state.previewIframe = url;
this.createOverlay( 'r-overlay-preview' ); this.createOverlay( 'r-overlay-preview' );
this.dom.dataset.state = 'loading'; this.dom.dataset.state = 'loading';
@@ -101,10 +105,9 @@ export default class Overlay {
* *
* @param {string} url - url to the image/video to preview * @param {string} url - url to the image/video to preview
* @param {image|video} mediaType * @param {image|video} mediaType
* @param {HTMLElement} [trigger] - the element that triggered * @param {string} [fitMode] - the fit mode to use for the preview
* the preview
*/ */
showMediaPreview( url, mediaType, trigger ) { showMediaPreview( url, mediaType, fitMode ) {
if( mediaType !== 'image' && mediaType !== 'video' ) { if( mediaType !== 'image' && mediaType !== 'video' ) {
console.warn( 'Please specify a valid media type to preview (image|video)' ); console.warn( 'Please specify a valid media type to preview (image|video)' );
@@ -113,9 +116,11 @@ export default class Overlay {
this.close(); this.close();
fitMode = fitMode || 'scale-down';
this.createOverlay( 'r-overlay-preview' ); this.createOverlay( 'r-overlay-preview' );
this.dom.dataset.state = 'loading'; 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 = this.viewport.innerHTML =
`<header class="r-overlay-header"> `<header class="r-overlay-header">
@@ -128,6 +133,8 @@ export default class Overlay {
if( mediaType === 'image' ) { if( mediaType === 'image' ) {
this.state = { previewImage: url, previewFit: fitMode }
const img = document.createElement( 'img', {} ); const img = document.createElement( 'img', {} );
img.src = url; img.src = url;
contentElement.appendChild( img ); contentElement.appendChild( img );
@@ -151,6 +158,8 @@ export default class Overlay {
} }
else if( mediaType === 'video' ) { else if( mediaType === 'video' ) {
this.state = { previewVideo: url, previewFit: fitMode }
const video = document.createElement( 'video' ); const video = document.createElement( 'video' );
video.autoplay = this.dom.dataset.previewAutoplay === 'false' ? false : true; video.autoplay = this.dom.dataset.previewAutoplay === 'false' ? false : true;
video.controls = this.dom.dataset.previewControls === 'false' ? false : true; video.controls = this.dom.dataset.previewControls === 'false' ? false : true;
@@ -180,7 +189,7 @@ export default class Overlay {
event.preventDefault(); event.preventDefault();
}, false ); }, false );
this.Reveal.dispatchEvent({ type: 'showmediapreview', data: { mediaType, url, trigger } }); this.Reveal.dispatchEvent({ type: 'showmediapreview', data: { mediaType, url } });
} }
@@ -257,7 +266,9 @@ export default class Overlay {
} }
isOpen() { isOpen() {
return !!this.dom; return !!this.dom;
} }
/** /**
@@ -268,6 +279,11 @@ export default class Overlay {
if( this.dom ) { if( this.dom ) {
this.dom.remove(); this.dom.remove();
this.dom = null; this.dom = null;
this.state = {};
this.Reveal.dispatchEvent({ type: 'closeoverlay' });
return true; return true;
} }
@@ -275,6 +291,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', state.previewFit );
}
else if( state.previewVideo ) {
this.showMediaPreview( state.previewVideo, 'video', state.previewFit );
}
else {
this.close();
}
}
onSlidesClicked( event ) { onSlidesClicked( event ) {
const target = event.target; const target = event.target;
@@ -284,7 +323,7 @@ export default class Overlay {
// Was a link preview clicked? // Was a link preview clicked?
if( linkTarget ) { if( linkTarget ) {
if (event.metaKey || event.shiftKey || event.altKey) { if( event.metaKey || event.shiftKey || event.altKey ) {
// Let the browser handle meta keys naturally so users can cmd+click, cmd+shift+click, shift+click, alt+click, etc. // Let the browser handle meta keys naturally so users can cmd+click, cmd+shift+click, shift+click, alt+click, etc.
return; return;
} }
@@ -299,7 +338,7 @@ export default class Overlay {
if( mediaTarget.hasAttribute( 'data-preview-image' ) ) { if( mediaTarget.hasAttribute( 'data-preview-image' ) ) {
let url = mediaTarget.dataset.previewImage || mediaTarget.getAttribute( 'src' ); let url = mediaTarget.dataset.previewImage || mediaTarget.getAttribute( 'src' );
if( url ) { if( url ) {
this.showMediaPreview( url, 'image', mediaTarget ); this.showMediaPreview( url, 'image', mediaTarget.dataset.previewFit );
event.preventDefault(); event.preventDefault();
} }
} }
@@ -312,7 +351,7 @@ export default class Overlay {
} }
} }
if( url ) { if( url ) {
this.showMediaPreview( url, 'video', mediaTarget ); this.showMediaPreview( url, 'video', mediaTarget.dataset.previewFit );
event.preventDefault(); event.preventDefault();
} }
} }

5
js/reveal.js
View File

@@ -2210,7 +2210,8 @@ export default function( revealElement, options ) {
indexv: indices.v, indexv: indices.v,
indexf: indices.f, indexf: indices.f,
paused: isPaused(), 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() ) { if( typeof overviewFlag === 'boolean' && overviewFlag !== overview.isActive() ) {
overview.toggle( overviewFlag ); overview.toggle( overviewFlag );
} }
overlay.setState( state );
} }
} }

2
plugin/notes/notes.esm.js
View File

File diff suppressed because one or more lines are too long

2
plugin/notes/notes.js
View File

File diff suppressed because one or more lines are too long

3
plugin/notes/plugin.js
View File

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

15
plugin/notes/speaker-view.html
View File

@@ -414,14 +414,23 @@
} }
// Messages sent by the reveal.js inside of the current slide preview // Messages sent by the reveal.js inside of the current slide preview
else if( data && data.namespace === 'reveal' ) { else if( data && data.namespace === 'reveal' ) {
const supportedEvents = [
'slidechanged',
'fragmentshown',
'fragmenthidden',
'paused',
'resumed',
'showiframepreview',
'showmediapreview',
'closeoverlay'
];
if( /ready/.test( data.eventName ) ) { if( /ready/.test( data.eventName ) ) {
// Send a message back to notify that the handshake is complete // Send a message back to notify that the handshake is complete
window.opener.postMessage( JSON.stringify({ namespace: 'reveal-notes', type: 'connected'} ), '*' ); 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( supportedEvents.includes( data.eventName ) && currentState !== JSON.stringify( data.state ) ) {
dispatchStateToMainWindow( data.state ); dispatchStateToMainWindow( data.state );
} }
} }