feat: trigger a special event for slide gif

Author: peterpeterparker

studio/src/app/helpers/editor/editor.helper.tsx

@@ -37,7 +37,8 @@ export class EditorHelper {
     init(el: HTMLElement) {
         this.el = el;
 
-        this.el.addEventListener('input', this.onSlideInputChange, false);
+        this.el.addEventListener('input', this.onInputChange, false);
+        this.el.addEventListener('slideInputChange', this.onSlideInputChange, false);
         this.el.addEventListener('slideDidChange', this.onSlideChange, false);
         this.el.addEventListener('slideDidLoad', this.onSlideDidLoad, false);
         this.el.addEventListener('slideDelete', this.onSlideDelete, false);
@@ -48,7 +49,8 @@ export class EditorHelper {
     }
 
     destroy() {
-        this.el.removeEventListener('input', this.onSlideInputChange, true);
+        this.el.removeEventListener('input', this.onInputChange, true);
+        this.el.removeEventListener('slideInputChange', this.onSlideInputChange, true);
         this.el.removeEventListener('slideDidChange', this.onSlideChange, true);
         this.el.removeEventListener('slideDidLoad', this.onSlideDidLoad, true);
         this.el.removeEventListener('slideDelete', this.onSlideDelete, true);
@@ -72,7 +74,7 @@ export class EditorHelper {
         this.updateSlideSubject.next($event.detail);
     };
 
-    private onSlideInputChange = async ($event: Event) => {
+    private onInputChange = async ($event: Event) => {
         if (!$event || !$event.target || !($event.target instanceof HTMLElement)) {
             return;
         }
@@ -86,6 +88,20 @@ export class EditorHelper {
         this.updateSlideSubject.next(parent);
     };
 
+    private onSlideInputChange = async ($event: Event) => {
+        if (!$event || !$event.target || !($event.target instanceof HTMLElement)) {
+            return;
+        }
+
+        const parent: HTMLElement = ($event.target as HTMLElement);
+
+        if (!parent || !parent.nodeName || parent.nodeName.toLowerCase().indexOf('deckgo-slide') <= -1) {
+            return;
+        }
+
+        this.updateSlideSubject.next(parent);
+    };
+
     private onSlideDelete = async ($event: CustomEvent) => {
         if (!$event || !$event.detail) {
             return;

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

@@ -8,6 +8,9 @@
 import '@stencil/core';
 
 
+import {
+  EventEmitter,
+} from '@stencil/core';
 
 
 export namespace Components {
@@ -205,6 +208,7 @@ export namespace Components {
     'alt'?: string;
     'fullscreen'?: boolean;
     'onSlideDidLoad'?: (event: CustomEvent<void>) => void;
+    'onSlideInputChange'?: (event: CustomEvent<EventTarget>) => void;
     'src'?: string;
   }
 

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} from '@stencil/core';
 
 import {DeckdeckgoSlide, DeckdeckgoSlideUtils} from '../deckdeckgo-slide';
 import {DeckdeckgoUtils} from '../../utils/deckdeckgo-utils';
@@ -19,6 +19,8 @@ export class DeckdeckgoSlideGif implements DeckdeckgoSlide {
 
   @Prop() fullscreen: boolean = false;
 
+  @Event() private slideInputChange: EventEmitter<EventTarget>;
+
   async componentDidLoad() {
     await DeckdeckgoUtils.hideLazyLoadImages(this.el);
 
@@ -27,6 +29,15 @@ export class DeckdeckgoSlideGif implements DeckdeckgoSlide {
     await this.moveSlots();
   }
 
+  @Listen('input')
+  onInput($event: UIEvent) {
+    if ($event) {
+      $event.stopPropagation();
+
+      this.slideInputChange.emit($event.target);
+    }
+  }
+
   @Method()
   beforeSwipe(_enter: boolean): Promise<boolean> {
     return new Promise<boolean>((resolve) => {