feat(#20): when deck and slides are loaded, emit an event

Author: peterpeterparker

doc/features/extra.md

@@ -37,6 +37,7 @@ await deck.print();
 
 | Event                     | Emitted value | Description |
 | -------------------------- |:-----------------:|:-----------------:|
+| slidesDidLoad | string[] | Emitted when the deck and all slides have loaded. Emit the an ordered list of all the tag names of the slides. |
 | slideNextDidChange | number | Emitted when the next slide has started. Emit the index of the new active slide. |
 | slidePrevDidChange | number | Emitted when the previous slide has ended. Emit the index of the new active slide. |
 | slideToChange | number | Emitted when a specific slide as selected. Emit the index of the new selected slide. |

src/components.d.ts

@@ -33,6 +33,7 @@ export namespace Components {
     'onSlidePrevDidChange'?: (event: CustomEvent<number>) => void;
     'onSlideToChange'?: (event: CustomEvent<number>) => void;
     'onSlideWillChange'?: (event: CustomEvent<number>) => void;
+    'onSlidesDidLoad'?: (event: CustomEvent<string[]>) => void;
     'pager'?: boolean;
     'pagerPercentage'?: boolean;
   }

src/components/deck/deckdeckgo-deck/deckdeckgo-deck.tsx

@@ -34,6 +34,7 @@ export class DeckdeckgoDeck {
   @State()
   private length: number = 0;
 
+  @Event() slidesDidLoad: EventEmitter<string[]>;
   @Event() slideNextDidChange: EventEmitter<number>;
   @Event() slidePrevDidChange: EventEmitter<number>;
   @Event() slideToChange: EventEmitter<number>;
@@ -245,8 +246,24 @@ export class DeckdeckgoDeck {
   /* BEGIN: Slide length and active index */
 
   @Listen('slideDidLoad')
-  slideDidLoad() {
+  async slideDidLoad() {
     this.length++;
+
+    await this.emitSlidesDidLoad();
+  }
+
+  private emitSlidesDidLoad(): Promise<void> {
+    return new Promise<void>((resolve) => {
+      const definedSlides: HTMLCollection = this.el.children;
+      const loadedSlides: NodeListOf<HTMLElement> = this.el.querySelectorAll('.deckgo-slide-container');
+
+      if (definedSlides && loadedSlides && loadedSlides.length === definedSlides.length && definedSlides.length === this.length) {
+        const orderedSlidesTagNames: string[] = Array.from(loadedSlides).map((slide: HTMLElement) => { return slide.tagName});
+        this.slidesDidLoad.emit(orderedSlidesTagNames);
+      }
+
+      resolve();
+    });
   }
 
   @Method()