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

.overlay -> .r-overlay to reduce risk of conflict, move overlay up to viewport level

Browse Source
This commit is contained in:
Hakim El Hattab
2025-02-17 19:59:40 +01:00
parent 9af726b606
commit fe67bad092
7 changed files with 74 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
css/reveal.scss
View File

@@ -1448,7 +1448,7 @@ $controlsArrowAngleActive: 36deg;
cursor: zoom-in; cursor: zoom-in;
} }
.reveal > .overlay { .r-overlay {
position: absolute; position: absolute;
top: var(--r-overlay-margin); top: var(--r-overlay-margin);
right: var(--r-overlay-margin); right: var(--r-overlay-margin);
@@ -1461,9 +1461,10 @@ $controlsArrowAngleActive: 36deg;
transition: all 0.3s ease; transition: all 0.3s ease;
color: #fff; color: #fff;
animation: fade-in 0.3s ease; animation: fade-in 0.3s ease;
font-family: ui-sans-serif, system-ui, -apple-system, Helvetica, sans-serif;
} }
.reveal .overlay-viewport { .r-overlay-viewport {
position: absolute; position: absolute;
top: var(--r-overlay-padding); top: var(--r-overlay-padding);
right: var(--r-overlay-padding); right: var(--r-overlay-padding);
@@ -1474,7 +1475,7 @@ $controlsArrowAngleActive: 36deg;
flex-direction: column; flex-direction: column;
} }
.reveal .overlay-header { .r-overlay-header {
display: flex; display: flex;
z-index: 2; z-index: 2;
box-sizing: border-box; box-sizing: border-box;
@@ -1483,7 +1484,7 @@ $controlsArrowAngleActive: 36deg;
height: var(--r-overlay-header-height); height: var(--r-overlay-header-height);
gap: 6px; gap: 6px;
} }
.reveal .overlay-header .overlay-button { .r-overlay-header .r-overlay-button {
all: unset; all: unset;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -1499,11 +1500,11 @@ $controlsArrowAngleActive: 36deg;
box-sizing: border-box; box-sizing: border-box;
} }
.reveal .overlay-header .overlay-button:hover { .r-overlay-header .r-overlay-button:hover {
opacity: 1; opacity: 1;
background-color: rgba( 255, 255, 255, 0.15 ); background-color: rgba( 255, 255, 255, 0.15 );
} }
.reveal .overlay-header .icon { .r-overlay-header .icon {
display: inline-block; display: inline-block;
width: 20px; width: 20px;
height: 20px; height: 20px;
@@ -1512,14 +1513,14 @@ $controlsArrowAngleActive: 36deg;
background-size: 100%; background-size: 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.reveal .overlay-close .icon { .r-overlay-close .icon {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTIuODU0IDIuODU0YS41LjUgMCAwIDAtLjcwOC0uNzA4TDcuNSA2Ljc5MyAyLjg1NCAyLjE0NmEuNS41IDAgMSAwLS43MDguNzA4TDYuNzkzIDcuNWwtNC42NDcgNC42NDZhLjUuNSAwIDAgMCAuNzA4LjcwOEw3LjUgOC4yMDdsNC42NDYgNC42NDdhLjUuNSAwIDAgMCAuNzA4LS43MDhMOC4yMDcgNy41bDQuNjQ3LTQuNjQ2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+); background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTIuODU0IDIuODU0YS41LjUgMCAwIDAtLjcwOC0uNzA4TDcuNSA2Ljc5MyAyLjg1NCAyLjE0NmEuNS41IDAgMSAwLS43MDguNzA4TDYuNzkzIDcuNWwtNC42NDcgNC42NDZhLjUuNSAwIDAgMCAuNzA4LjcwOEw3LjUgOC4yMDdsNC42NDYgNC42NDdhLjUuNSAwIDAgMCAuNzA4LS43MDhMOC4yMDcgNy41bDQuNjQ3LTQuNjQ2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+);
} }
.reveal .overlay-external .icon { .r-overlay-external .icon {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMyAyYTEgMSAwIDAgMC0xIDF2OWExIDEgMCAwIDAgMSAxaDlhMSAxIDAgMCAwIDEtMVY4LjVhLjUuNSAwIDAgMC0xIDBWMTJIM1YzaDMuNWEuNS41IDAgMCAwIDAtMUgzWm05Ljg1NC4xNDZhLjUuNSAwIDAgMSAuMTQ2LjM1MVY1LjVhLjUuNSAwIDAgMS0xIDBWMy43MDdMNi44NTQgOC44NTRhLjUuNSAwIDEgMS0uNzA4LS43MDhMMTEuMjkzIDNIOS41YS41LjUgMCAwIDEgMC0xaDNhLjQ5OS40OTkgMCAwIDEgLjM1NC4xNDZaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=); background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMyAyYTEgMSAwIDAgMC0xIDF2OWExIDEgMCAwIDAgMSAxaDlhMSAxIDAgMCAwIDEtMVY4LjVhLjUuNSAwIDAgMC0xIDBWMTJIM1YzaDMuNWEuNS41IDAgMCAwIDAtMUgzWm05Ljg1NC4xNDZhLjUuNSAwIDAgMSAuMTQ2LjM1MVY1LjVhLjUuNSAwIDAgMS0xIDBWMy43MDdMNi44NTQgOC44NTRhLjUuNSAwIDEgMS0uNzA4LS43MDhMMTEuMjkzIDNIOS41YS41LjUgMCAwIDEgMC0xaDNhLjQ5OS40OTkgMCAwIDEgLjM1NC4xNDZaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=);
} }
.reveal .overlay-content { .r-overlay-content {
position: relative; position: relative;
display: grid; display: grid;
place-items: center; place-items: center;
@@ -1530,7 +1531,7 @@ $controlsArrowAngleActive: 36deg;
animation: scale-up 0.5s cubic-bezier(0.260, 0.860, 0.440, 0.985); animation: scale-up 0.5s cubic-bezier(0.260, 0.860, 0.440, 0.985);
} }
.reveal .overlay-spinner { .r-overlay-spinner {
position: absolute; position: absolute;
display: block; display: block;
top: 50%; top: 50%;
@@ -1546,7 +1547,7 @@ $controlsArrowAngleActive: 36deg;
} }
// Preview overlay // Preview overlay
.reveal .overlay-preview iframe { .r-overlay-preview iframe {
width: 100%; width: 100%;
height: 100%; height: 100%;
max-width: 100%; max-width: 100%;
@@ -1558,13 +1559,13 @@ $controlsArrowAngleActive: 36deg;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.reveal .overlay-preview[data-state="loaded"] iframe { .r-overlay-preview[data-state="loaded"] iframe {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
} }
.reveal .overlay-preview img, .r-overlay-preview img,
.reveal .overlay-preview video { .r-overlay-preview video {
position: absolute; position: absolute;
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
@@ -1574,27 +1575,27 @@ $controlsArrowAngleActive: 36deg;
object-fit: scale-down; object-fit: scale-down;
} }
.reveal .overlay-preview[data-preview-fit="none"] img, .r-overlay-preview[data-preview-fit="none"] img,
.reveal .overlay-preview[data-preview-fit="none"] video { .r-overlay-preview[data-preview-fit="none"] video {
object-fit: none; object-fit: none;
} }
.reveal .overlay-preview[data-preview-fit="scale-down"] img, .r-overlay-preview[data-preview-fit="scale-down"] img,
.reveal .overlay-preview[data-preview-fit="scale-down"] video { .r-overlay-preview[data-preview-fit="scale-down"] video {
object-fit: scale-down; object-fit: scale-down;
} }
.reveal .overlay-preview[data-preview-fit="contain"] img, .r-overlay-preview[data-preview-fit="contain"] img,
.reveal .overlay-preview[data-preview-fit="contain"] video { .r-overlay-preview[data-preview-fit="contain"] video {
object-fit: contain; object-fit: contain;
} }
.reveal .overlay-preview[data-preview-fit="cover"] img, .r-overlay-preview[data-preview-fit="cover"] img,
.reveal .overlay-preview[data-preview-fit="cover"] video { .r-overlay-preview[data-preview-fit="cover"] video {
object-fit: cover; object-fit: cover;
} }
.reveal .overlay-preview[data-state="loaded"] .overlay-content-inner { .r-overlay-preview[data-state="loaded"] .r-overlay-content-inner {
position: absolute; position: absolute;
z-index: -1; z-index: -1;
left: 0; left: 0;
@@ -1603,57 +1604,58 @@ $controlsArrowAngleActive: 36deg;
text-align: center; text-align: center;
letter-spacing: normal; letter-spacing: normal;
} }
.reveal .overlay-preview .overlay-error { .r-overlay-preview .r-overlay-error {
font-size: 18px; font-size: 18px;
color: orange; color: orange;
} }
.reveal .overlay-preview .x-frame-error { .r-overlay-preview .x-frame-error {
opacity: 0; opacity: 0;
transition: opacity 0.3s ease 0.3s; transition: opacity 0.3s ease 0.3s;
} }
.reveal .overlay-preview[data-state="loaded"] .x-frame-error { .r-overlay-preview[data-state="loaded"] .x-frame-error {
opacity: 1; opacity: 1;
} }
.reveal .overlay-preview[data-state="loading"] .overlay-spinner { .r-overlay-preview[data-state="loading"] .r-overlay-spinner {
opacity: 0.6; opacity: 0.6;
visibility: visible; visibility: visible;
} }
// Help overlay // Help overlay
.reveal .overlay-help .overlay-content { .r-overlay-help .r-overlay-content {
overflow: auto; overflow: auto;
} }
.reveal .overlay-help-content { .r-overlay-help-content {
width: 100%; max-width: 560px;
max-width: 600px; padding: 20px 0;
margin: auto; margin: auto;
text-align: center; text-align: center;
letter-spacing: normal; letter-spacing: normal;
} }
.reveal .overlay-help-content .title { .r-overlay-help-content .title {
font-size: 20px; font-size: 20px;
margin-top: 0; margin-top: 0;
} }
.reveal .overlay-help-content table { .r-overlay-help-content table {
border: 1px solid #fff; border: 1px solid #fff;
border-collapse: collapse; border-collapse: collapse;
font-size: 16px; font-size: 16px;
text-align: left;
} }
.reveal .overlay-help-content table th, .r-overlay-help-content table th,
.reveal .overlay-help-content table td { .r-overlay-help-content table td {
width: 200px; width: 240px;
padding: 14px; padding: 14px;
border: 1px solid #fff; border: 1px solid #fff;
vertical-align: middle; vertical-align: middle;
} }
.reveal .overlay-help-content table th { .r-overlay-help-content table th {
padding-top: 20px; padding-top: 20px;
padding-bottom: 20px; padding-bottom: 20px;
} }
@@ -1969,7 +1971,7 @@ $notesWidthPercent: 25%;
display: none !important; display: none !important;
} }
.overlay, .r-overlay,
.pause-overlay { .pause-overlay {
position: fixed; position: fixed;
} }

2
dist/reveal.css vendored
View File

File diff suppressed because one or more lines are too long

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

57
js/controllers/overlay.js
View File

@@ -42,14 +42,14 @@ export default class Overlay {
createOverlay( className ) { createOverlay( className ) {
this.dom = document.createElement( 'div' ); this.dom = document.createElement( 'div' );
this.dom.classList.add( 'overlay' ); this.dom.classList.add( 'r-overlay' );
this.dom.classList.add( className ); this.dom.classList.add( className );
this.viewport = document.createElement( 'div' ); this.viewport = document.createElement( 'div' );
this.viewport.classList.add( 'overlay-viewport' ); this.viewport.classList.add( 'r-overlay-viewport' );
this.dom.appendChild( this.viewport ); this.dom.appendChild( this.viewport );
this.Reveal.getRevealElement().appendChild( this.dom ); this.Reveal.getViewportElement().appendChild( this.dom );
} }
@@ -62,19 +62,19 @@ export default class Overlay {
this.close(); this.close();
this.createOverlay( 'overlay-preview' ); this.createOverlay( 'r-overlay-preview' );
this.dom.dataset.state = 'loading'; this.dom.dataset.state = 'loading';
this.viewport.innerHTML = this.viewport.innerHTML =
`<header class="overlay-header"> `<header class="r-overlay-header">
<a class="overlay-button overlay-external" href="${url}" target="_blank"><span class="icon"></span></a> <a class="r-overlay-button r-overlay-external" href="${url}" target="_blank"><span class="icon"></span></a>
<button class="overlay-button overlay-close"><span class="icon"></span></button> <button class="r-overlay-button r-overlay-close"><span class="icon"></span></button>
</header> </header>
<div class="overlay-spinner"></div> <div class="r-overlay-spinner"></div>
<div class="overlay-content"> <div class="r-overlay-content">
<iframe src="${url}"></iframe> <iframe src="${url}"></iframe>
<small class="overlay-content-inner"> <small class="r-overlay-content-inner">
<span class="overlay-error x-frame-error">Unable to load iframe. This is likely due to the site's policy (x-frame-options).</span> <span class="r-overlay-error x-frame-error">Unable to load iframe. This is likely due to the site's policy (x-frame-options).</span>
</small> </small>
</div>`; </div>`;
@@ -82,12 +82,12 @@ export default class Overlay {
this.dom.dataset.state = 'loaded'; this.dom.dataset.state = 'loaded';
}, false ); }, false );
this.dom.querySelector( '.overlay-close' ).addEventListener( 'click', event => { this.dom.querySelector( '.r-overlay-close' ).addEventListener( 'click', event => {
this.close(); this.close();
event.preventDefault(); event.preventDefault();
}, false ); }, false );
this.dom.querySelector( '.overlay-external' ).addEventListener( 'click', event => { this.dom.querySelector( '.r-overlay-external' ).addEventListener( 'click', event => {
this.close(); this.close();
}, false ); }, false );
@@ -111,18 +111,18 @@ export default class Overlay {
this.close(); this.close();
this.createOverlay( '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 = trigger ? trigger.dataset.previewFit || 'scale-down' : 'scale-down';
this.viewport.innerHTML = this.viewport.innerHTML =
`<header class="overlay-header"> `<header class="r-overlay-header">
<button class="overlay-button overlay-close">Esc <span class="icon"></span></button> <button class="r-overlay-button r-overlay-close">Esc <span class="icon"></span></button>
</header> </header>
<div class="overlay-spinner"></div> <div class="r-overlay-spinner"></div>
<div class="overlay-content"></div>`; <div class="r-overlay-content"></div>`;
const contentElement = this.dom.querySelector( '.overlay-content' ); const contentElement = this.dom.querySelector( '.r-overlay-content' );
if( mediaType === 'image' ) { if( mediaType === 'image' ) {
@@ -137,7 +137,7 @@ export default class Overlay {
img.addEventListener( 'error', () => { img.addEventListener( 'error', () => {
this.dom.dataset.state = 'error'; this.dom.dataset.state = 'error';
contentElement.innerHTML = contentElement.innerHTML =
`<span class="overlay-error">Unable to load image.</span>` `<span class="r-overlay-error">Unable to load image.</span>`
}, false ); }, false );
// Hide image overlays when clicking outside the overlay // Hide image overlays when clicking outside the overlay
@@ -154,6 +154,7 @@ export default class Overlay {
video.controls = this.dom.dataset.previewControls === 'false' ? false : true; video.controls = this.dom.dataset.previewControls === 'false' ? false : true;
video.loop = this.dom.dataset.previewLoop === 'true' ? true : false; video.loop = this.dom.dataset.previewLoop === 'true' ? true : false;
video.muted = this.dom.dataset.previewMuted === 'true' ? true : false; video.muted = this.dom.dataset.previewMuted === 'true' ? true : false;
video.playsInline = true;
video.src = url; video.src = url;
contentElement.appendChild( video ); contentElement.appendChild( video );
@@ -164,7 +165,7 @@ export default class Overlay {
video.addEventListener( 'error', () => { video.addEventListener( 'error', () => {
this.dom.dataset.state = 'error'; this.dom.dataset.state = 'error';
contentElement.innerHTML = contentElement.innerHTML =
`<span class="overlay-error">Unable to load video.</span>`; `<span class="r-overlay-error">Unable to load video.</span>`;
}, false ); }, false );
} }
@@ -172,7 +173,7 @@ export default class Overlay {
throw new Error( 'Please specify a valid media type to preview' ); throw new Error( 'Please specify a valid media type to preview' );
} }
this.dom.querySelector( '.overlay-close' ).addEventListener( 'click', ( event ) => { this.dom.querySelector( '.r-overlay-close' ).addEventListener( 'click', ( event ) => {
this.close(); this.close();
event.preventDefault(); event.preventDefault();
}, false ); }, false );
@@ -210,7 +211,7 @@ export default class Overlay {
this.close(); this.close();
this.createOverlay( 'overlay-help' ); this.createOverlay( 'r-overlay-help' );
let html = '<p class="title">Keyboard Shortcuts</p>'; let html = '<p class="title">Keyboard Shortcuts</p>';
@@ -232,15 +233,15 @@ export default class Overlay {
html += '</table>'; html += '</table>';
this.viewport.innerHTML = ` this.viewport.innerHTML = `
<header class="overlay-header"> <header class="r-overlay-header">
<button class="overlay-button overlay-close">Esc <span class="icon"></span></button> <button class="r-overlay-button r-overlay-close">Esc <span class="icon"></span></button>
</header> </header>
<div class="overlay-content"> <div class="r-overlay-content">
<div class="overlay-help-content">${html}</div> <div class="r-overlay-help-content">${html}</div>
</div> </div>
`; `;
this.dom.querySelector( '.overlay-close' ).addEventListener( 'click', event => { this.dom.querySelector( '.r-overlay-close' ).addEventListener( 'click', event => {
this.close(); this.close();
event.preventDefault(); event.preventDefault();
}, false ); }, false );