|
|
@@ -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;
|
Hakim El Hattab