mirror/reveal.js
1
0
Fork 0
mirror of https://github.com/hakimel/reveal.js.git synced 2025-04-20 04:21:58 +02:00
Code Issues Releases Wiki Activity

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

Browse Source
This commit is contained in:
Hakim El Hattab 2025-03-24 15:34:51 +01:00
parent 47ee25dd19
commit c69adfb022
6 changed files with 63 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/preview-overlays.html
View File

@ -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">

43
js/controllers/overlay.js
View File

@ -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,6 +14,8 @@ export default class Overlay {
this.linkPreviewSelector = null;
this.mediaPreviewSelector = '[data-preview-image], [data-preview-video]';
this.state = {};
}
update() {
@ -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;

5
js/reveal.js
View File

@ -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 );
}
}

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

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

@ -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 );
}
}