fix: slide gif header and footer not moved anymore for editor compatibility

Author: peterpeterparker

studio/src/components.d.ts

@@ -8,9 +8,9 @@
 import '@stencil/core';
 
 import '@ionic/core';
-import 'ionicons';
 import 'deckdeckgo';
 import 'deckdeckgo-inline-editor';
+import 'ionicons';
 import {
   EventEmitter,
 } from '@stencil/core';

webcomponents/core/src/components.d.ts

@@ -57,6 +57,7 @@ export namespace Components {
   interface DeckgoGifAttributes extends StencilHTMLAttributes {
     'alt'?: string;
     'fullscreen'?: boolean;
+    'onGifLoaded'?: (event: CustomEvent<boolean>) => void;
     'src'?: string;
   }
 

webcomponents/core/src/components/extra/deckdeckgo-gif/deckdeckgo-gif.tsx

@@ -1,4 +1,4 @@
-import {Component, Element, Prop, Method, State} from '@stencil/core';
+import {Component, Element, Prop, Method, State, Event, EventEmitter} from '@stencil/core';
 
 import {DeckdeckgoUtils} from '../../utils/deckdeckgo-utils';
 import {DeckdeckgoExtra} from '../deckdeckgo-extra';
@@ -19,6 +19,8 @@ export class DeckdeckgoGif implements DeckdeckgoExtra {
 
   @State() loaded: boolean = false;
 
+  @Event() gifLoaded: EventEmitter<boolean>;
+
   async componentDidLoad() {
     await DeckdeckgoUtils.hideLazyLoadImages(this.el);
 
@@ -27,6 +29,7 @@ export class DeckdeckgoGif implements DeckdeckgoExtra {
     if (img) {
       img.addEventListener('load', () => {
         this.loaded = true;
+        this.gifLoaded.emit(true);
       }, false);
     }
   }

webcomponents/core/src/components/slides/deckdeckgo-slide-gif/deckdeckgo-slide-gif.scss

@@ -16,7 +16,38 @@ div.deckgo-gif-container {
   width: 100%;
   height: 100%;
 
+  position: relative;
+
   display: flex;
   align-items: center;
   justify-content: center;
+
+  ::slotted([slot="header"]), ::slotted([slot="footer"]) {
+    position: absolute;
+
+    left: 50%;
+    transform: translate(-50%, 0);
+
+    text-align: center;
+
+    background: var(--background);
+    color: var(--color);
+    padding: var(--padding, 8px);
+
+    z-index: var(--zIndex, 2);
+  }
+
+  ::slotted([slot="header"]) {
+    top: 0;
+  }
+
+  ::slotted([slot="footer"]) {
+    bottom: 0;
+  }
+}
+
+:host(.deckgo-slide-gif-hidden) {
+  ::slotted([slot="header"]), ::slotted([slot="footer"]) {
+    display: none;
+  }
 }

webcomponents/core/src/components/slides/deckdeckgo-slide-gif/deckdeckgo-slide-gif.tsx

@@ -1,4 +1,4 @@
-import {Component, Element, Event, EventEmitter, Method, Prop} from '@stencil/core';
+import {Component, Element, Event, EventEmitter, Method, Prop, Listen, State} from '@stencil/core';
 
 import {DeckdeckgoSlide, DeckdeckgoSlideUtils} from '../deckdeckgo-slide';
 import {DeckdeckgoUtils} from '../../utils/deckdeckgo-utils';
@@ -19,12 +19,12 @@ export class DeckdeckgoSlideGif implements DeckdeckgoSlide {
 
   @Prop() fullscreen: boolean = false;
 
+  @State() loaded: boolean = false;
+
   async componentDidLoad() {
     await DeckdeckgoUtils.hideLazyLoadImages(this.el);
 
     this.slideDidLoad.emit();
-
-    await this.moveSlots();
   }
 
   @Method()
@@ -44,25 +44,9 @@ export class DeckdeckgoSlideGif implements DeckdeckgoSlide {
     return DeckdeckgoSlideUtils.lazyLoadContent(this.el);
   }
 
-  private moveSlots(): Promise<void> {
-    return new Promise<void>((resolve) => {
-      const header: HTMLElement = this.el.querySelector('[slot=\'header\']');
-      const footer: HTMLElement = this.el.querySelector('[slot=\'footer\']');
-
-      const gif: HTMLDeckgoGifElement = this.el.shadowRoot.querySelector('deckgo-gif');
-
-      if (gif) {
-        if (header) {
-          gif.appendChild(header);
-        }
-
-        if (footer) {
-          gif.appendChild(footer);
-        }
-      }
-
-      resolve();
-    });
+  @Listen('gifLoaded')
+  onGifLoaded($event: CustomEvent) {
+    this.loaded = $event && $event.detail;
   }
 
   render() {
@@ -83,7 +67,8 @@ export class DeckdeckgoSlideGif implements DeckdeckgoSlide {
     return {
       class: {
         'deckgo-slide-container': true,
-        'deckgo-slide-container-fullscreen': this.fullscreen
+        'deckgo-slide-container-fullscreen': this.fullscreen,
+        'deckgo-slide-gif-hidden': !this.loaded
       }
     }
   }