mirror/reveal.js
1
0
Fork 0
mirror of https://github.com/hakimel/reveal.js.git synced 2025-08-08 07:36:39 +02:00
Code Issues Releases Wiki Activity

more flexible styling system for overlays

Browse Source
This commit is contained in:
Hakim El Hattab
2025-02-05 15:57:14 +01:00
parent 087eed8dc3
commit 0950590300
8 changed files with 110 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
css/reveal.scss
View File

@@ -33,6 +33,10 @@ html.reveal-full-page {
color: #000; color: #000;
--r-controls-spacing: 12px; --r-controls-spacing: 12px;
--r-overlay-header-height: 40px;
--r-overlay-margin: 0px;
--r-overlay-padding: 6px;
--r-overlay-gap: 5px;
} }
// Force the presentation to cover the full viewport when we // Force the presentation to cover the full viewport when we
@@ -1429,9 +1433,6 @@ $controlsArrowAngleActive: 36deg;
* OVERLAY FOR LINK PREVIEWS AND HELP * OVERLAY FOR LINK PREVIEWS AND HELP
*********************************************/ *********************************************/
$overlayHeaderHeight: 40px;
$overlayHeaderPadding: 5px;
.reveal [data-preview-image], .reveal [data-preview-image],
.reveal [data-preview-video] { .reveal [data-preview-video] {
cursor: zoom-in; cursor: zoom-in;
@@ -1439,42 +1440,36 @@ $overlayHeaderPadding: 5px;
.reveal > .overlay { .reveal > .overlay {
position: absolute; position: absolute;
top: 0; top: var(--r-overlay-margin);
left: 0; right: var(--r-overlay-margin);
width: 100%; bottom: var(--r-overlay-margin);
height: 100%; left: var(--r-overlay-margin);
border-radius: min( var(--r-overlay-margin), 6px );
z-index: 1000; z-index: 1000;
background: rgba( 0, 0, 0, 0.95 ); background: rgba( 0, 0, 0, 0.95 );
backdrop-filter: blur( 10px ); backdrop-filter: blur( 10px );
transition: all 0.3s ease; transition: all 0.3s ease;
color: #fff;
} }
.reveal .overlay-spinner { .reveal .overlay-viewport {
position: absolute; position: absolute;
display: block; top: var(--r-overlay-padding);
top: 50%; right: var(--r-overlay-padding);
left: 50%; bottom: var(--r-overlay-padding);
width: 32px; left: var(--r-overlay-padding);
height: 32px; gap: var(--r-overlay-gap);
margin: -16px 0 0 -16px; display: flex;
z-index: 10; flex-direction: column;
background-image: url(data:image/gif;base64,R0lGODlhIAAgAPMAAJmZmf%2F%2F%2F6%2Bvr8nJybW1tcDAwOjo6Nvb26ioqKOjo7Ozs%2FLy8vz8%2FAAAAAAAAAAAACH%2FC05FVFNDQVBFMi4wAwEAAAAh%2FhpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh%2BQQJCgAAACwAAAAAIAAgAAAE5xDISWlhperN52JLhSSdRgwVo1ICQZRUsiwHpTJT4iowNS8vyW2icCF6k8HMMBkCEDskxTBDAZwuAkkqIfxIQyhBQBFvAQSDITM5VDW6XNE4KagNh6Bgwe60smQUB3d4Rz1ZBApnFASDd0hihh12BkE9kjAJVlycXIg7CQIFA6SlnJ87paqbSKiKoqusnbMdmDC2tXQlkUhziYtyWTxIfy6BE8WJt5YJvpJivxNaGmLHT0VnOgSYf0dZXS7APdpB309RnHOG5gDqXGLDaC457D1zZ%2FV%2FnmOM82XiHRLYKhKP1oZmADdEAAAh%2BQQJCgAAACwAAAAAIAAgAAAE6hDISWlZpOrNp1lGNRSdRpDUolIGw5RUYhhHukqFu8DsrEyqnWThGvAmhVlteBvojpTDDBUEIFwMFBRAmBkSgOrBFZogCASwBDEY%2FCZSg7GSE0gSCjQBMVG023xWBhklAnoEdhQEfyNqMIcKjhRsjEdnezB%2BA4k8gTwJhFuiW4dokXiloUepBAp5qaKpp6%2BHo7aWW54wl7obvEe0kRuoplCGepwSx2jJvqHEmGt6whJpGpfJCHmOoNHKaHx61WiSR92E4lbFoq%2BB6QDtuetcaBPnW6%2BO7wDHpIiK9SaVK5GgV543tzjgGcghAgAh%2BQQJCgAAACwAAAAAIAAgAAAE7hDISSkxpOrN5zFHNWRdhSiVoVLHspRUMoyUakyEe8PTPCATW9A14E0UvuAKMNAZKYUZCiBMuBakSQKG8G2FzUWox2AUtAQFcBKlVQoLgQReZhQlCIJesQXI5B0CBnUMOxMCenoCfTCEWBsJColTMANldx15BGs8B5wlCZ9Po6OJkwmRpnqkqnuSrayqfKmqpLajoiW5HJq7FL1Gr2mMMcKUMIiJgIemy7xZtJsTmsM4xHiKv5KMCXqfyUCJEonXPN2rAOIAmsfB3uPoAK%2B%2BG%2Bw48edZPK%2BM6hLJpQg484enXIdQFSS1u6UhksENEQAAIfkECQoAAAAsAAAAACAAIAAABOcQyEmpGKLqzWcZRVUQnZYg1aBSh2GUVEIQ2aQOE%2BG%2BcD4ntpWkZQj1JIiZIogDFFyHI0UxQwFugMSOFIPJftfVAEoZLBbcLEFhlQiqGp1Vd140AUklUN3eCA51C1EWMzMCezCBBmkxVIVHBWd3HHl9JQOIJSdSnJ0TDKChCwUJjoWMPaGqDKannasMo6WnM562R5YluZRwur0wpgqZE7NKUm%2BFNRPIhjBJxKZteWuIBMN4zRMIVIhffcgojwCF117i4nlLnY5ztRLsnOk%2BaV%2BoJY7V7m76PdkS4trKcdg0Zc0tTcKkRAAAIfkECQoAAAAsAAAAACAAIAAABO4QyEkpKqjqzScpRaVkXZWQEximw1BSCUEIlDohrft6cpKCk5xid5MNJTaAIkekKGQkWyKHkvhKsR7ARmitkAYDYRIbUQRQjWBwJRzChi9CRlBcY1UN4g0%2FVNB0AlcvcAYHRyZPdEQFYV8ccwR5HWxEJ02YmRMLnJ1xCYp0Y5idpQuhopmmC2KgojKasUQDk5BNAwwMOh2RtRq5uQuPZKGIJQIGwAwGf6I0JXMpC8C7kXWDBINFMxS4DKMAWVWAGYsAdNqW5uaRxkSKJOZKaU3tPOBZ4DuK2LATgJhkPJMgTwKCdFjyPHEnKxFCDhEAACH5BAkKAAAALAAAAAAgACAAAATzEMhJaVKp6s2nIkolIJ2WkBShpkVRWqqQrhLSEu9MZJKK9y1ZrqYK9WiClmvoUaF8gIQSNeF1Er4MNFn4SRSDARWroAIETg1iVwuHjYB1kYc1mwruwXKC9gmsJXliGxc%2BXiUCby9ydh1sOSdMkpMTBpaXBzsfhoc5l58Gm5yToAaZhaOUqjkDgCWNHAULCwOLaTmzswadEqggQwgHuQsHIoZCHQMMQgQGubVEcxOPFAcMDAYUA85eWARmfSRQCdcMe0zeP1AAygwLlJtPNAAL19DARdPzBOWSm1brJBi45soRAWQAAkrQIykShQ9wVhHCwCQCACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiRMDjI0Fd30%2FiI2UA5GSS5UDj2l6NoqgOgN4gksEBgYFf0FDqKgHnyZ9OX8HrgYHdHpcHQULXAS2qKpENRg7eAMLC7kTBaixUYFkKAzWAAnLC7FLVxLWDBLKCwaKTULgEwbLA4hJtOkSBNqITT3xEgfLpBtzE%2FjiuL04RGEBgwWhShRgQExHBAAh%2BQQJCgAAACwAAAAAIAAgAAAE7xDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfZiCqGk5dTESJeaOAlClzsJsqwiJwiqnFrb2nS9kmIcgEsjQydLiIlHehhpejaIjzh9eomSjZR%2BipslWIRLAgMDOR2DOqKogTB9pCUJBagDBXR6XB0EBkIIsaRsGGMMAxoDBgYHTKJiUYEGDAzHC9EACcUGkIgFzgwZ0QsSBcXHiQvOwgDdEwfFs0sDzt4S6BK4xYjkDOzn0unFeBzOBijIm1Dgmg5YFQwsCMjp1oJ8LyIAACH5BAkKAAAALAAAAAAgACAAAATwEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GGl6NoiPOH16iZKNlH6KmyWFOggHhEEvAwwMA0N9GBsEC6amhnVcEwavDAazGwIDaH1ipaYLBUTCGgQDA8NdHz0FpqgTBwsLqAbWAAnIA4FWKdMLGdYGEgraigbT0OITBcg5QwPT4xLrROZL6AuQAPUS7bxLpoWidY0JtxLHKhwwMJBTHgPKdEQAACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GAULDJCRiXo1CpGXDJOUjY%2BYip9DhToJA4RBLwMLCwVDfRgbBAaqqoZ1XBMHswsHtxtFaH1iqaoGNgAIxRpbFAgfPQSqpbgGBqUD1wBXeCYp1AYZ19JJOYgH1KwA4UBvQwXUBxPqVD9L3sbp2BNk2xvvFPJd%2BMFCN6HAAIKgNggY0KtEBAAh%2BQQJCgAAACwAAAAAIAAgAAAE6BDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfYIDMaAFdTESJeaEDAIMxYFqrOUaNW4E4ObYcCXaiBVEgULe0NJaxxtYksjh2NLkZISgDgJhHthkpU4mW6blRiYmZOlh4JWkDqILwUGBnE6TYEbCgevr0N1gH4At7gHiRpFaLNrrq8HNgAJA70AWxQIH1%2BvsYMDAzZQPC9VCNkDWUhGkuE5PxJNwiUK4UfLzOlD4WvzAHaoG9nxPi5d%2BjYUqfAhhykOFwJWiAAAIfkECQoAAAAsAAAAACAAIAAABPAQyElpUqnqzaciSoVkXVUMFaFSwlpOCcMYlErAavhOMnNLNo8KsZsMZItJEIDIFSkLGQoQTNhIsFehRww2CQLKF0tYGKYSg%2BygsZIuNqJksKgbfgIGepNo2cIUB3V1B3IvNiBYNQaDSTtfhhx0CwVPI0UJe0%2Bbm4g5VgcGoqOcnjmjqDSdnhgEoamcsZuXO1aWQy8KAwOAuTYYGwi7w5h%2BKr0SJ8MFihpNbx%2B4Erq7BYBuzsdiH1jCAzoSfl0rVirNbRXlBBlLX%2BBP0XJLAPGzTkAuAOqb0WT5AH7OcdCm5B8TgRwSRKIHQtaLCwg1RAAAOwAAAAAAAAAAAA%3D%3D);
visibility: hidden;
opacity: 0;
} }
.reveal .overlay-header { .reveal .overlay-header {
display: flex; display: flex;
position: absolute;
left: 0;
top: 0;
width: 100%;
padding: $overlayHeaderPadding;
z-index: 2; z-index: 2;
box-sizing: border-box; box-sizing: border-box;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
height: var(--r-overlay-header-height);
gap: 6px; gap: 6px;
} }
.reveal .overlay-header .overlay-button { .reveal .overlay-header .overlay-button {
@@ -1482,8 +1477,8 @@ $overlayHeaderPadding: 5px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-width: $overlayHeaderHeight; min-width: var(--r-overlay-header-height);
min-height: $overlayHeaderHeight; min-height: var(--r-overlay-header-height);
padding: 0 10px; padding: 0 10px;
opacity: 1; opacity: 1;
border-radius: 6px; border-radius: 6px;
@@ -1513,18 +1508,29 @@ $overlayHeaderPadding: 5px;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMyAyYTEgMSAwIDAgMC0xIDF2OWExIDEgMCAwIDAgMSAxaDlhMSAxIDAgMCAwIDEtMVY4LjVhLjUuNSAwIDAgMC0xIDBWMTJIM1YzaDMuNWEuNS41IDAgMCAwIDAtMUgzWm05Ljg1NC4xNDZhLjUuNSAwIDAgMSAuMTQ2LjM1MVY1LjVhLjUuNSAwIDAgMS0xIDBWMy43MDdMNi44NTQgOC44NTRhLjUuNSAwIDEgMS0uNzA4LS43MDhMMTEuMjkzIDNIOS41YS41LjUgMCAwIDEgMC0xaDNhLjQ5OS40OTkgMCAwIDEgLjM1NC4xNDZaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=); background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMyAyYTEgMSAwIDAgMC0xIDF2OWExIDEgMCAwIDAgMSAxaDlhMSAxIDAgMCAwIDEtMVY4LjVhLjUuNSAwIDAgMC0xIDBWMTJIM1YzaDMuNWEuNS41IDAgMCAwIDAtMUgzWm05Ljg1NC4xNDZhLjUuNSAwIDAgMSAuMTQ2LjM1MVY1LjVhLjUuNSAwIDAgMS0xIDBWMy43MDdMNi44NTQgOC44NTRhLjUuNSAwIDEgMS0uNzA4LS43MDhMMTEuMjkzIDNIOS41YS41LjUgMCAwIDEgMC0xaDNhLjQ5OS40OTkgMCAwIDEgLjM1NC4xNDZaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=);
} }
.reveal .overlay-viewport { .reveal .overlay-content {
position: absolute; position: relative;
display: grid; display: grid;
place-items: center; place-items: center;
top: $overlayHeaderHeight + $overlayHeaderPadding*2;
right: 6px;
bottom: 6px;
left: 6px;
border-radius: 6px; border-radius: 6px;
overflow: hidden; overflow: hidden;
flex-grow: 1;
background-color: rgba(20, 20, 20, 0.8); background-color: rgba(20, 20, 20, 0.8);
color: #fff; }
.reveal .overlay-spinner {
position: absolute;
display: block;
top: 50%;
left: 50%;
width: 32px;
height: 32px;
margin: -16px 0 0 -16px;
z-index: 10;
background-image: url(data:image/gif;base64,R0lGODlhIAAgAPMAAJmZmf%2F%2F%2F6%2Bvr8nJybW1tcDAwOjo6Nvb26ioqKOjo7Ozs%2FLy8vz8%2FAAAAAAAAAAAACH%2FC05FVFNDQVBFMi4wAwEAAAAh%2FhpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh%2BQQJCgAAACwAAAAAIAAgAAAE5xDISWlhperN52JLhSSdRgwVo1ICQZRUsiwHpTJT4iowNS8vyW2icCF6k8HMMBkCEDskxTBDAZwuAkkqIfxIQyhBQBFvAQSDITM5VDW6XNE4KagNh6Bgwe60smQUB3d4Rz1ZBApnFASDd0hihh12BkE9kjAJVlycXIg7CQIFA6SlnJ87paqbSKiKoqusnbMdmDC2tXQlkUhziYtyWTxIfy6BE8WJt5YJvpJivxNaGmLHT0VnOgSYf0dZXS7APdpB309RnHOG5gDqXGLDaC457D1zZ%2FV%2FnmOM82XiHRLYKhKP1oZmADdEAAAh%2BQQJCgAAACwAAAAAIAAgAAAE6hDISWlZpOrNp1lGNRSdRpDUolIGw5RUYhhHukqFu8DsrEyqnWThGvAmhVlteBvojpTDDBUEIFwMFBRAmBkSgOrBFZogCASwBDEY%2FCZSg7GSE0gSCjQBMVG023xWBhklAnoEdhQEfyNqMIcKjhRsjEdnezB%2BA4k8gTwJhFuiW4dokXiloUepBAp5qaKpp6%2BHo7aWW54wl7obvEe0kRuoplCGepwSx2jJvqHEmGt6whJpGpfJCHmOoNHKaHx61WiSR92E4lbFoq%2BB6QDtuetcaBPnW6%2BO7wDHpIiK9SaVK5GgV543tzjgGcghAgAh%2BQQJCgAAACwAAAAAIAAgAAAE7hDISSkxpOrN5zFHNWRdhSiVoVLHspRUMoyUakyEe8PTPCATW9A14E0UvuAKMNAZKYUZCiBMuBakSQKG8G2FzUWox2AUtAQFcBKlVQoLgQReZhQlCIJesQXI5B0CBnUMOxMCenoCfTCEWBsJColTMANldx15BGs8B5wlCZ9Po6OJkwmRpnqkqnuSrayqfKmqpLajoiW5HJq7FL1Gr2mMMcKUMIiJgIemy7xZtJsTmsM4xHiKv5KMCXqfyUCJEonXPN2rAOIAmsfB3uPoAK%2B%2BG%2Bw48edZPK%2BM6hLJpQg484enXIdQFSS1u6UhksENEQAAIfkECQoAAAAsAAAAACAAIAAABOcQyEmpGKLqzWcZRVUQnZYg1aBSh2GUVEIQ2aQOE%2BG%2BcD4ntpWkZQj1JIiZIogDFFyHI0UxQwFugMSOFIPJftfVAEoZLBbcLEFhlQiqGp1Vd140AUklUN3eCA51C1EWMzMCezCBBmkxVIVHBWd3HHl9JQOIJSdSnJ0TDKChCwUJjoWMPaGqDKannasMo6WnM562R5YluZRwur0wpgqZE7NKUm%2BFNRPIhjBJxKZteWuIBMN4zRMIVIhffcgojwCF117i4nlLnY5ztRLsnOk%2BaV%2BoJY7V7m76PdkS4trKcdg0Zc0tTcKkRAAAIfkECQoAAAAsAAAAACAAIAAABO4QyEkpKqjqzScpRaVkXZWQEximw1BSCUEIlDohrft6cpKCk5xid5MNJTaAIkekKGQkWyKHkvhKsR7ARmitkAYDYRIbUQRQjWBwJRzChi9CRlBcY1UN4g0%2FVNB0AlcvcAYHRyZPdEQFYV8ccwR5HWxEJ02YmRMLnJ1xCYp0Y5idpQuhopmmC2KgojKasUQDk5BNAwwMOh2RtRq5uQuPZKGIJQIGwAwGf6I0JXMpC8C7kXWDBINFMxS4DKMAWVWAGYsAdNqW5uaRxkSKJOZKaU3tPOBZ4DuK2LATgJhkPJMgTwKCdFjyPHEnKxFCDhEAACH5BAkKAAAALAAAAAAgACAAAATzEMhJaVKp6s2nIkolIJ2WkBShpkVRWqqQrhLSEu9MZJKK9y1ZrqYK9WiClmvoUaF8gIQSNeF1Er4MNFn4SRSDARWroAIETg1iVwuHjYB1kYc1mwruwXKC9gmsJXliGxc%2BXiUCby9ydh1sOSdMkpMTBpaXBzsfhoc5l58Gm5yToAaZhaOUqjkDgCWNHAULCwOLaTmzswadEqggQwgHuQsHIoZCHQMMQgQGubVEcxOPFAcMDAYUA85eWARmfSRQCdcMe0zeP1AAygwLlJtPNAAL19DARdPzBOWSm1brJBi45soRAWQAAkrQIykShQ9wVhHCwCQCACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiRMDjI0Fd30%2FiI2UA5GSS5UDj2l6NoqgOgN4gksEBgYFf0FDqKgHnyZ9OX8HrgYHdHpcHQULXAS2qKpENRg7eAMLC7kTBaixUYFkKAzWAAnLC7FLVxLWDBLKCwaKTULgEwbLA4hJtOkSBNqITT3xEgfLpBtzE%2FjiuL04RGEBgwWhShRgQExHBAAh%2BQQJCgAAACwAAAAAIAAgAAAE7xDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfZiCqGk5dTESJeaOAlClzsJsqwiJwiqnFrb2nS9kmIcgEsjQydLiIlHehhpejaIjzh9eomSjZR%2BipslWIRLAgMDOR2DOqKogTB9pCUJBagDBXR6XB0EBkIIsaRsGGMMAxoDBgYHTKJiUYEGDAzHC9EACcUGkIgFzgwZ0QsSBcXHiQvOwgDdEwfFs0sDzt4S6BK4xYjkDOzn0unFeBzOBijIm1Dgmg5YFQwsCMjp1oJ8LyIAACH5BAkKAAAALAAAAAAgACAAAATwEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GGl6NoiPOH16iZKNlH6KmyWFOggHhEEvAwwMA0N9GBsEC6amhnVcEwavDAazGwIDaH1ipaYLBUTCGgQDA8NdHz0FpqgTBwsLqAbWAAnIA4FWKdMLGdYGEgraigbT0OITBcg5QwPT4xLrROZL6AuQAPUS7bxLpoWidY0JtxLHKhwwMJBTHgPKdEQAACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GAULDJCRiXo1CpGXDJOUjY%2BYip9DhToJA4RBLwMLCwVDfRgbBAaqqoZ1XBMHswsHtxtFaH1iqaoGNgAIxRpbFAgfPQSqpbgGBqUD1wBXeCYp1AYZ19JJOYgH1KwA4UBvQwXUBxPqVD9L3sbp2BNk2xvvFPJd%2BMFCN6HAAIKgNggY0KtEBAAh%2BQQJCgAAACwAAAAAIAAgAAAE6BDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfYIDMaAFdTESJeaEDAIMxYFqrOUaNW4E4ObYcCXaiBVEgULe0NJaxxtYksjh2NLkZISgDgJhHthkpU4mW6blRiYmZOlh4JWkDqILwUGBnE6TYEbCgevr0N1gH4At7gHiRpFaLNrrq8HNgAJA70AWxQIH1%2BvsYMDAzZQPC9VCNkDWUhGkuE5PxJNwiUK4UfLzOlD4WvzAHaoG9nxPi5d%2BjYUqfAhhykOFwJWiAAAIfkECQoAAAAsAAAAACAAIAAABPAQyElpUqnqzaciSoVkXVUMFaFSwlpOCcMYlErAavhOMnNLNo8KsZsMZItJEIDIFSkLGQoQTNhIsFehRww2CQLKF0tYGKYSg%2BygsZIuNqJksKgbfgIGepNo2cIUB3V1B3IvNiBYNQaDSTtfhhx0CwVPI0UJe0%2Bbm4g5VgcGoqOcnjmjqDSdnhgEoamcsZuXO1aWQy8KAwOAuTYYGwi7w5h%2BKr0SJ8MFihpNbx%2B4Erq7BYBuzsdiH1jCAzoSfl0rVirNbRXlBBlLX%2BBP0XJLAPGzTkAuAOqb0WT5AH7OcdCm5B8TgRwSRKIHQtaLCwg1RAAAOwAAAAAAAAAAAA%3D%3D);
visibility: hidden;
opacity: 0;
} }
// Preview overlay // Preview overlay
@@ -1576,7 +1582,7 @@ $overlayHeaderPadding: 5px;
object-fit: cover; object-fit: cover;
} }
.reveal .overlay-preview[data-state="loaded"] .overlay-viewport-inner { .reveal .overlay-preview[data-state="loaded"] .overlay-content-inner {
position: absolute; position: absolute;
z-index: -1; z-index: -1;
left: 0; left: 0;
@@ -1604,7 +1610,7 @@ $overlayHeaderPadding: 5px;
} }
// Help overlay // Help overlay
.reveal .overlay-help .overlay-viewport { .reveal .overlay-help .overlay-content {
overflow: auto; overflow: auto;
} }

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

111
js/controllers/overlay.js
View File

@@ -39,6 +39,20 @@ export default class Overlay {
} }
createOverlay( className ) {
this.dom = document.createElement( 'div' );
this.dom.classList.add( 'overlay' );
this.dom.classList.add( className );
this.viewport = document.createElement( 'div' );
this.viewport.classList.add( 'overlay-viewport' );
this.dom.appendChild( this.viewport );
this.Reveal.getRevealElement().appendChild( this.dom );
}
/** /**
* Opens a preview window for the target URL. * Opens a preview window for the target URL.
* *
@@ -48,35 +62,32 @@ export default class Overlay {
this.close(); this.close();
this.element = document.createElement( 'div' ); this.createOverlay( 'overlay-preview' );
this.element.classList.add( 'overlay' ); this.dom.dataset.state = 'loading';
this.element.classList.add( 'overlay-preview' );
this.element.dataset.state = 'loading';
this.Reveal.getRevealElement().appendChild( this.element );
this.element.innerHTML = this.viewport.innerHTML =
`<header class="overlay-header"> `<header class="overlay-header">
<a class="overlay-button overlay-external" href="${url}" target="_blank"><span class="icon"></span></a> <a class="overlay-button overlay-external" href="${url}" target="_blank"><span class="icon"></span></a>
<button class="overlay-button overlay-close"><span class="icon"></span></button> <button class="overlay-button overlay-close"><span class="icon"></span></button>
</header> </header>
<div class="overlay-spinner"></div> <div class="overlay-spinner"></div>
<div class="overlay-viewport"> <div class="overlay-content">
<iframe src="${url}"></iframe> <iframe src="${url}"></iframe>
<small class="overlay-viewport-inner"> <small class="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="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>`;
this.element.querySelector( 'iframe' ).addEventListener( 'load', event => { this.dom.querySelector( 'iframe' ).addEventListener( 'load', event => {
this.element.dataset.state = 'loaded'; this.dom.dataset.state = 'loaded';
}, false ); }, false );
this.element.querySelector( '.overlay-close' ).addEventListener( 'click', event => { this.dom.querySelector( '.overlay-close' ).addEventListener( 'click', event => {
this.close(); this.close();
event.preventDefault(); event.preventDefault();
}, false ); }, false );
this.element.querySelector( '.overlay-external' ).addEventListener( 'click', event => { this.dom.querySelector( '.overlay-external' ).addEventListener( 'click', event => {
this.close(); this.close();
}, false ); }, false );
@@ -88,49 +99,50 @@ 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 {HTMLElement} [trigger] - the element that triggered
* the preview * the preview
*/ */
showMediaPreview( url, mediaType, trigger ) { showMediaPreview( url, mediaType, trigger ) {
if( mediaType !== 'image' && mediaType !== 'video' ) {
console.warn( 'Please specify a valid media type to preview (image|video)' );
return;
}
this.close(); this.close();
this.element = document.createElement( 'div' ); this.createOverlay( 'overlay-preview' );
this.element.classList.add( 'overlay' ); this.dom.dataset.state = 'loading';
this.element.classList.add( 'overlay-preview' ); this.dom.dataset.previewFit = trigger ? trigger.dataset.previewFit || 'scale-down' : 'scale-down';
this.element.dataset.state = 'loading';
this.Reveal.getRevealElement().appendChild( this.element );
this.element.dataset.previewFit = trigger.dataset.previewFit || 'scale-down'; this.viewport.innerHTML =
this.element.innerHTML =
`<header class="overlay-header"> `<header class="overlay-header">
<button class="overlay-button overlay-close">Esc <span class="icon"></span></button> <button class="overlay-button overlay-close">Esc <span class="icon"></span></button>
</header> </header>
<div class="overlay-spinner"></div> <div class="overlay-spinner"></div>
<div class="overlay-viewport"></div>`; <div class="overlay-content"></div>`;
const viewport = this.element.querySelector( '.overlay-viewport' ); const contentElement = this.dom.querySelector( '.overlay-content' );
if( mediaType === 'image' ) { if( mediaType === 'image' ) {
const img = document.createElement( 'img', {} ); const img = document.createElement( 'img', {} );
img.src = url; img.src = url;
viewport.appendChild( img ); contentElement.appendChild( img );
img.addEventListener( 'load', () => { img.addEventListener( 'load', () => {
this.element.dataset.state = 'loaded'; this.dom.dataset.state = 'loaded';
}, false ); }, false );
img.addEventListener( 'error', () => { img.addEventListener( 'error', () => {
this.element.dataset.state = 'error'; this.dom.dataset.state = 'error';
viewport.innerHTML = contentElement.innerHTML =
`<span class="overlay-error">Unable to load image.</span>` `<span class="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
this.element.style.cursor = 'zoom-out'; this.dom.style.cursor = 'zoom-out';
this.element.addEventListener( 'click', ( event ) => { this.dom.addEventListener( 'click', ( event ) => {
this.close(); this.close();
}, false ); }, false );
@@ -138,20 +150,20 @@ export default class Overlay {
else if( mediaType === 'video' ) { else if( mediaType === 'video' ) {
const video = document.createElement( 'video' ); const video = document.createElement( 'video' );
video.autoplay = this.element.dataset.previewAutoplay === 'false' ? false : true; video.autoplay = this.dom.dataset.previewAutoplay === 'false' ? false : true;
video.controls = this.element.dataset.previewControls === 'false' ? false : true; video.controls = this.dom.dataset.previewControls === 'false' ? false : true;
video.loop = this.element.dataset.previewLoop === 'true' ? true : false; video.loop = this.dom.dataset.previewLoop === 'true' ? true : false;
video.muted = this.element.dataset.previewMuted === 'true' ? true : false; video.muted = this.dom.dataset.previewMuted === 'true' ? true : false;
video.src = url; video.src = url;
viewport.appendChild( video ); contentElement.appendChild( video );
video.addEventListener( 'loadeddata', () => { video.addEventListener( 'loadeddata', () => {
this.element.dataset.state = 'loaded'; this.dom.dataset.state = 'loaded';
}, false ); }, false );
video.addEventListener( 'error', () => { video.addEventListener( 'error', () => {
this.element.dataset.state = 'error'; this.dom.dataset.state = 'error';
viewport.innerHTML = contentElement.innerHTML =
`<span class="overlay-error">Unable to load video.</span>`; `<span class="overlay-error">Unable to load video.</span>`;
}, false ); }, false );
@@ -160,7 +172,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.element.querySelector( '.overlay-close' ).addEventListener( 'click', ( event ) => { this.dom.querySelector( '.overlay-close' ).addEventListener( 'click', ( event ) => {
this.close(); this.close();
event.preventDefault(); event.preventDefault();
}, false ); }, false );
@@ -180,7 +192,7 @@ export default class Overlay {
override ? this.showHelp() : this.close(); override ? this.showHelp() : this.close();
} }
else { else {
if( this.element ) { if( this.dom ) {
this.close(); this.close();
} }
else { else {
@@ -198,10 +210,7 @@ export default class Overlay {
this.close(); this.close();
this.element = document.createElement( 'div' ); this.createOverlay( 'overlay-help' );
this.element.classList.add( 'overlay' );
this.element.classList.add( 'overlay-help' );
this.Reveal.getRevealElement().appendChild( this.element );
let html = '<p class="title">Keyboard Shortcuts</p>'; let html = '<p class="title">Keyboard Shortcuts</p>';
@@ -222,16 +231,16 @@ export default class Overlay {
html += '</table>'; html += '</table>';
this.element.innerHTML = ` this.viewport.innerHTML = `
<header class="overlay-header"> <header class="overlay-header">
<button class="overlay-button overlay-close">Esc <span class="icon"></span></button> <button class="overlay-button overlay-close">Esc <span class="icon"></span></button>
</header> </header>
<div class="overlay-viewport"> <div class="overlay-content">
<div class="overlay-help-content">${html}</div> <div class="overlay-help-content">${html}</div>
</div> </div>
`; `;
this.element.querySelector( '.overlay-close' ).addEventListener( 'click', event => { this.dom.querySelector( '.overlay-close' ).addEventListener( 'click', event => {
this.close(); this.close();
event.preventDefault(); event.preventDefault();
}, false ); }, false );
@@ -240,14 +249,18 @@ export default class Overlay {
} }
isOpen() {
return this.dom !== null;
}
/** /**
* Closes any currently open overlay. * Closes any currently open overlay.
*/ */
close() { close() {
if( this.element ) { if( this.dom ) {
this.element.remove(); this.dom.remove();
this.element = null; this.dom = null;
return true; return true;
} }

4
js/reveal.js
View File

@@ -2748,7 +2748,7 @@ export default function( revealElement, options ) {
isSpeakerNotes: notes.isSpeakerNotesWindow.bind( notes ), isSpeakerNotes: notes.isSpeakerNotesWindow.bind( notes ),
isOverview: overview.isActive.bind( overview ), isOverview: overview.isActive.bind( overview ),
isFocused: focus.isFocused.bind( focus ), isFocused: focus.isFocused.bind( focus ),
isOverlayOpen: overlay.isOpen.bind( overlay ),
isScrollView: scrollView.isActive.bind( scrollView ), isScrollView: scrollView.isActive.bind( scrollView ),
isPrintView: printView.isActive.bind( printView ), isPrintView: printView.isActive.bind( printView ),
@@ -2766,7 +2766,7 @@ export default function( revealElement, options ) {
// Preview management // Preview management
showIframePreview: overlay.showIframePreview.bind( overlay ), showIframePreview: overlay.showIframePreview.bind( overlay ),
showMediaPreview: overlay.showMediaPreview.bind( overlay ), showMediaPreview: overlay.showMediaPreview.bind( overlay ),
showPreview: overlay.showIframePreview.bind( overlay ), showPreview: overlay.showIframePreview.bind( overlay ), // deprecated in favor of showIframePreview
hidePreview: overlay.close.bind( overlay ), hidePreview: overlay.close.bind( overlay ),
// Adds or removes all internal event listeners // Adds or removes all internal event listeners