mirror of
https://github.com/hakimel/reveal.js.git
synced 2025-08-06 14:47:04 +02:00
more flexible styling system for overlays
This commit is contained in:
Hakim El Hattab
@@ -33,6 +33,10 @@ html.reveal-full-page {
|
||||
color: #000;
|
||||
|
||||
--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
|
||||
@@ -1429,9 +1433,6 @@ $controlsArrowAngleActive: 36deg;
|
||||
* OVERLAY FOR LINK PREVIEWS AND HELP
|
||||
*********************************************/
|
||||
|
||||
$overlayHeaderHeight: 40px;
|
||||
$overlayHeaderPadding: 5px;
|
||||
|
||||
.reveal [data-preview-image],
|
||||
.reveal [data-preview-video] {
|
||||
cursor: zoom-in;
|
||||
@@ -1439,42 +1440,36 @@ $overlayHeaderPadding: 5px;
|
||||
|
||||
.reveal > .overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: var(--r-overlay-margin);
|
||||
right: var(--r-overlay-margin);
|
||||
bottom: var(--r-overlay-margin);
|
||||
left: var(--r-overlay-margin);
|
||||
border-radius: min( var(--r-overlay-margin), 6px );
|
||||
z-index: 1000;
|
||||
background: rgba( 0, 0, 0, 0.95 );
|
||||
backdrop-filter: blur( 10px );
|
||||
transition: all 0.3s ease;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.reveal .overlay-spinner {
|
||||
.reveal .overlay-viewport {
|
||||
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;
|
||||
top: var(--r-overlay-padding);
|
||||
right: var(--r-overlay-padding);
|
||||
bottom: var(--r-overlay-padding);
|
||||
left: var(--r-overlay-padding);
|
||||
gap: var(--r-overlay-gap);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.reveal .overlay-header {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
padding: $overlayHeaderPadding;
|
||||
z-index: 2;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
height: var(--r-overlay-header-height);
|
||||
gap: 6px;
|
||||
}
|
||||
.reveal .overlay-header .overlay-button {
|
||||
@@ -1482,8 +1477,8 @@ $overlayHeaderPadding: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: $overlayHeaderHeight;
|
||||
min-height: $overlayHeaderHeight;
|
||||
min-width: var(--r-overlay-header-height);
|
||||
min-height: var(--r-overlay-header-height);
|
||||
padding: 0 10px;
|
||||
opacity: 1;
|
||||
border-radius: 6px;
|
||||
@@ -1513,18 +1508,29 @@ $overlayHeaderPadding: 5px;
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMyAyYTEgMSAwIDAgMC0xIDF2OWExIDEgMCAwIDAgMSAxaDlhMSAxIDAgMCAwIDEtMVY4LjVhLjUuNSAwIDAgMC0xIDBWMTJIM1YzaDMuNWEuNS41IDAgMCAwIDAtMUgzWm05Ljg1NC4xNDZhLjUuNSAwIDAgMSAuMTQ2LjM1MVY1LjVhLjUuNSAwIDAgMS0xIDBWMy43MDdMNi44NTQgOC44NTRhLjUuNSAwIDEgMS0uNzA4LS43MDhMMTEuMjkzIDNIOS41YS41LjUgMCAwIDEgMC0xaDNhLjQ5OS40OTkgMCAwIDEgLjM1NC4xNDZaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=);
|
||||
}
|
||||
|
||||
.reveal .overlay-viewport {
|
||||
position: absolute;
|
||||
.reveal .overlay-content {
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
top: $overlayHeaderHeight + $overlayHeaderPadding*2;
|
||||
right: 6px;
|
||||
bottom: 6px;
|
||||
left: 6px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
flex-grow: 1;
|
||||
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
|
||||
@@ -1576,7 +1582,7 @@ $overlayHeaderPadding: 5px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.reveal .overlay-preview[data-state="loaded"] .overlay-viewport-inner {
|
||||
.reveal .overlay-preview[data-state="loaded"] .overlay-content-inner {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 0;
|
||||
@@ -1604,7 +1610,7 @@ $overlayHeaderPadding: 5px;
|
||||
}
|
||||
|
||||
// Help overlay
|
||||
.reveal .overlay-help .overlay-viewport {
|
||||
.reveal .overlay-help .overlay-content {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
||||
2
dist/reveal.css
vendored
2
dist/reveal.css
vendored
File diff suppressed because one or more lines are too long
2
dist/reveal.esm.js
vendored
2
dist/reveal.esm.js
vendored
File diff suppressed because one or more lines are too long
2
dist/reveal.esm.js.map
vendored
2
dist/reveal.esm.js.map
vendored
File diff suppressed because one or more lines are too long
2
dist/reveal.js
vendored
2
dist/reveal.js
vendored
File diff suppressed because one or more lines are too long
2
dist/reveal.js.map
vendored
2
dist/reveal.js.map
vendored
File diff suppressed because one or more lines are too long
@@ -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.
|
||||
*
|
||||
@@ -48,35 +62,32 @@ export default class Overlay {
|
||||
|
||||
this.close();
|
||||
|
||||
this.element = document.createElement( 'div' );
|
||||
this.element.classList.add( 'overlay' );
|
||||
this.element.classList.add( 'overlay-preview' );
|
||||
this.element.dataset.state = 'loading';
|
||||
this.Reveal.getRevealElement().appendChild( this.element );
|
||||
this.createOverlay( 'overlay-preview' );
|
||||
this.dom.dataset.state = 'loading';
|
||||
|
||||
this.element.innerHTML =
|
||||
this.viewport.innerHTML =
|
||||
`<header class="overlay-header">
|
||||
<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>
|
||||
</header>
|
||||
<div class="overlay-spinner"></div>
|
||||
<div class="overlay-viewport">
|
||||
<div class="overlay-content">
|
||||
<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>
|
||||
</small>
|
||||
</div>`;
|
||||
|
||||
this.element.querySelector( 'iframe' ).addEventListener( 'load', event => {
|
||||
this.element.dataset.state = 'loaded';
|
||||
this.dom.querySelector( 'iframe' ).addEventListener( 'load', event => {
|
||||
this.dom.dataset.state = 'loaded';
|
||||
}, false );
|
||||
|
||||
this.element.querySelector( '.overlay-close' ).addEventListener( 'click', event => {
|
||||
this.dom.querySelector( '.overlay-close' ).addEventListener( 'click', event => {
|
||||
this.close();
|
||||
event.preventDefault();
|
||||
}, false );
|
||||
|
||||
this.element.querySelector( '.overlay-external' ).addEventListener( 'click', event => {
|
||||
this.dom.querySelector( '.overlay-external' ).addEventListener( 'click', event => {
|
||||
this.close();
|
||||
}, false );
|
||||
|
||||
@@ -88,49 +99,50 @@ export default class Overlay {
|
||||
*
|
||||
* @param {string} url - url to the image/video to preview
|
||||
* @param {image|video} mediaType
|
||||
* @param {HTMLElement} trigger - the element that triggered
|
||||
* @param {HTMLElement} [trigger] - the element that triggered
|
||||
* the preview
|
||||
*/
|
||||
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.element = document.createElement( 'div' );
|
||||
this.element.classList.add( 'overlay' );
|
||||
this.element.classList.add( 'overlay-preview' );
|
||||
this.element.dataset.state = 'loading';
|
||||
this.Reveal.getRevealElement().appendChild( this.element );
|
||||
this.createOverlay( 'overlay-preview' );
|
||||
this.dom.dataset.state = 'loading';
|
||||
this.dom.dataset.previewFit = trigger ? trigger.dataset.previewFit || 'scale-down' : 'scale-down';
|
||||
|
||||
this.element.dataset.previewFit = trigger.dataset.previewFit || 'scale-down';
|
||||
|
||||
this.element.innerHTML =
|
||||
this.viewport.innerHTML =
|
||||
`<header class="overlay-header">
|
||||
<button class="overlay-button overlay-close">Esc <span class="icon"></span></button>
|
||||
</header>
|
||||
<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' ) {
|
||||
|
||||
const img = document.createElement( 'img', {} );
|
||||
img.src = url;
|
||||
viewport.appendChild( img );
|
||||
contentElement.appendChild( img );
|
||||
|
||||
img.addEventListener( 'load', () => {
|
||||
this.element.dataset.state = 'loaded';
|
||||
this.dom.dataset.state = 'loaded';
|
||||
}, false );
|
||||
|
||||
img.addEventListener( 'error', () => {
|
||||
this.element.dataset.state = 'error';
|
||||
viewport.innerHTML =
|
||||
this.dom.dataset.state = 'error';
|
||||
contentElement.innerHTML =
|
||||
`<span class="overlay-error">Unable to load image.</span>`
|
||||
}, false );
|
||||
|
||||
// Hide image overlays when clicking outside the overlay
|
||||
this.element.style.cursor = 'zoom-out';
|
||||
this.element.addEventListener( 'click', ( event ) => {
|
||||
this.dom.style.cursor = 'zoom-out';
|
||||
this.dom.addEventListener( 'click', ( event ) => {
|
||||
this.close();
|
||||
}, false );
|
||||
|
||||
@@ -138,20 +150,20 @@ export default class Overlay {
|
||||
else if( mediaType === 'video' ) {
|
||||
|
||||
const video = document.createElement( 'video' );
|
||||
video.autoplay = this.element.dataset.previewAutoplay === 'false' ? false : 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.autoplay = this.dom.dataset.previewAutoplay === 'false' ? false : true;
|
||||
video.controls = this.dom.dataset.previewControls === 'false' ? false : true;
|
||||
video.loop = this.dom.dataset.previewLoop === 'true' ? true : false;
|
||||
video.muted = this.dom.dataset.previewMuted === 'true' ? true : false;
|
||||
video.src = url;
|
||||
viewport.appendChild( video );
|
||||
contentElement.appendChild( video );
|
||||
|
||||
video.addEventListener( 'loadeddata', () => {
|
||||
this.element.dataset.state = 'loaded';
|
||||
this.dom.dataset.state = 'loaded';
|
||||
}, false );
|
||||
|
||||
video.addEventListener( 'error', () => {
|
||||
this.element.dataset.state = 'error';
|
||||
viewport.innerHTML =
|
||||
this.dom.dataset.state = 'error';
|
||||
contentElement.innerHTML =
|
||||
`<span class="overlay-error">Unable to load video.</span>`;
|
||||
}, false );
|
||||
|
||||
@@ -160,7 +172,7 @@ export default class Overlay {
|
||||
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();
|
||||
event.preventDefault();
|
||||
}, false );
|
||||
@@ -180,7 +192,7 @@ export default class Overlay {
|
||||
override ? this.showHelp() : this.close();
|
||||
}
|
||||
else {
|
||||
if( this.element ) {
|
||||
if( this.dom ) {
|
||||
this.close();
|
||||
}
|
||||
else {
|
||||
@@ -198,10 +210,7 @@ export default class Overlay {
|
||||
|
||||
this.close();
|
||||
|
||||
this.element = document.createElement( 'div' );
|
||||
this.element.classList.add( 'overlay' );
|
||||
this.element.classList.add( 'overlay-help' );
|
||||
this.Reveal.getRevealElement().appendChild( this.element );
|
||||
this.createOverlay( 'overlay-help' );
|
||||
|
||||
let html = '<p class="title">Keyboard Shortcuts</p>';
|
||||
|
||||
@@ -222,16 +231,16 @@ export default class Overlay {
|
||||
|
||||
html += '</table>';
|
||||
|
||||
this.element.innerHTML = `
|
||||
this.viewport.innerHTML = `
|
||||
<header class="overlay-header">
|
||||
<button class="overlay-button overlay-close">Esc <span class="icon"></span></button>
|
||||
</header>
|
||||
<div class="overlay-viewport">
|
||||
<div class="overlay-content">
|
||||
<div class="overlay-help-content">${html}</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
this.element.querySelector( '.overlay-close' ).addEventListener( 'click', event => {
|
||||
this.dom.querySelector( '.overlay-close' ).addEventListener( 'click', event => {
|
||||
this.close();
|
||||
event.preventDefault();
|
||||
}, false );
|
||||
@@ -240,14 +249,18 @@ export default class Overlay {
|
||||
|
||||
}
|
||||
|
||||
isOpen() {
|
||||
return this.dom !== null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Closes any currently open overlay.
|
||||
*/
|
||||
close() {
|
||||
|
||||
if( this.element ) {
|
||||
this.element.remove();
|
||||
this.element = null;
|
||||
if( this.dom ) {
|
||||
this.dom.remove();
|
||||
this.dom = null;
|
||||
return true;
|
||||
}
|
||||
|
||||
|
||||
@@ -2748,7 +2748,7 @@ export default function( revealElement, options ) {
|
||||
isSpeakerNotes: notes.isSpeakerNotesWindow.bind( notes ),
|
||||
isOverview: overview.isActive.bind( overview ),
|
||||
isFocused: focus.isFocused.bind( focus ),
|
||||
|
||||
isOverlayOpen: overlay.isOpen.bind( overlay ),
|
||||
isScrollView: scrollView.isActive.bind( scrollView ),
|
||||
isPrintView: printView.isActive.bind( printView ),
|
||||
|
||||
@@ -2766,7 +2766,7 @@ export default function( revealElement, options ) {
|
||||
// Preview management
|
||||
showIframePreview: overlay.showIframePreview.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 ),
|
||||
|
||||
// Adds or removes all internal event listeners
|
||||
|
||||
Reference in New Issue
Block a user