feat: move slides title method and fix case where user add something else than text in a title

Author: peterpeterparker

studio/src/app/modals/editor/app-slide-navigate/app-slide-navigate.tsx

@@ -1,4 +1,4 @@
-import {Component, Listen, Element, Prop, h} from '@stencil/core';
+import {Component, Listen, Element, State, h} from '@stencil/core';
 
 @Component({
     tag: 'app-slide-navigate',
@@ -8,11 +8,13 @@ export class AppSlideNavigate {
 
     @Element() el: HTMLElement;
 
-    @Prop()
+    @State()
     slides: string[];
 
     async componentDidLoad() {
         history.pushState({modal: true}, null);
+
+        this.slides = await this.getSlidesTitle();
     }
 
     @Listen('popstate', { target: 'window' })
@@ -28,6 +30,47 @@ export class AppSlideNavigate {
         await (this.el.closest('ion-modal') as HTMLIonModalElement).dismiss(index);
     }
 
+    private getSlidesTitle(): Promise<string[]> {
+        return new Promise<string[]>((resolve) => {
+            if (!document) {
+                resolve();
+                return;
+            }
+
+            const results: string[] = [];
+
+            const slides: NodeListOf<HTMLElement> = document.querySelectorAll('deckgo-deck > *');
+
+            if (slides) {
+                for (const slide of Array.from(slides)) {
+                    if (slide.tagName && slide.tagName.toLowerCase().indexOf('deckgo-slide') > -1) {
+                        const title: HTMLElement = slide.querySelector('[slot="title"]');
+
+                        if (title) {
+                            results.push(title.textContent);
+                        } else {
+                            const start: HTMLElement = slide.querySelector('[slot="start"]');
+
+                            if (start) {
+                                results.push(start.textContent);
+                            } else {
+                                const end: HTMLElement = slide.querySelector('[slot="end"]');
+
+                                if (end) {
+                                    results.push(end.textContent);
+                                } else {
+                                    results.push('');
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            resolve(results);
+        });
+    }
+
     render() {
         return [
             <ion-header>

studio/src/app/pages/editor/app-editor/app-editor.tsx

@@ -265,13 +265,8 @@ export class AppEditor {
     }
 
     private async openSlideNavigate() {
-        const slidesTitle: string[] = await this.getSlidesTitle();
-
         const modal: HTMLIonModalElement = await IonControllerUtils.createModal({
-            component: 'app-slide-navigate',
-            componentProps: {
-                slides: slidesTitle
-            }
+            component: 'app-slide-navigate'
         });
 
         modal.onDidDismiss().then(async (detail: OverlayEventDetail) => {
@@ -291,42 +286,6 @@ export class AppEditor {
         await modal.present();
     }
 
-    private getSlidesTitle(): Promise<string[]> {
-        return new Promise<string[]>((resolve) => {
-            const results: string[] = [];
-
-            const slides: NodeListOf<HTMLElement> = this.el.querySelectorAll('deckgo-deck > *');
-
-            if (slides) {
-                for (const slide of Array.from(slides)) {
-                    if (slide.tagName && slide.tagName.toLowerCase().indexOf('deckgo-slide') > -1) {
-                        const title: HTMLElement = slide.querySelector('[slot="title"]');
-
-                        if (title) {
-                            results.push(title.innerHTML);
-                        } else {
-                            const start: HTMLElement = slide.querySelector('[slot="start"]');
-
-                            if (start) {
-                                results.push(start.textContent);
-                            } else {
-                                const end: HTMLElement = slide.querySelector('[slot="end"]');
-
-                                if (end) {
-                                    results.push(end.textContent);
-                                } else {
-                                    results.push('');
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-
-            resolve(results);
-        });
-    }
-
     private getFirstSlideContent(): Promise<string> {
         return new Promise<string>(async (resolve) => {
             let content: string = '';

studio/src/components.d.ts

@@ -88,9 +88,7 @@ export namespace Components {
     'redirect': string;
     'redirectId': string;
   }
-  interface AppSlideNavigate {
-    'slides': string[];
-  }
+  interface AppSlideNavigate {}
   interface AppSlideType {}
   interface AppSlotType {
     'selectedElement': HTMLElement;
@@ -489,9 +487,7 @@ declare namespace LocalJSX {
     'redirect'?: string;
     'redirectId'?: string;
   }
-  interface AppSlideNavigate extends JSXBase.HTMLAttributes<HTMLAppSlideNavigateElement> {
-    'slides'?: string[];
-  }
+  interface AppSlideNavigate extends JSXBase.HTMLAttributes<HTMLAppSlideNavigateElement> {}
   interface AppSlideType extends JSXBase.HTMLAttributes<HTMLAppSlideTypeElement> {}
   interface AppSlotType extends JSXBase.HTMLAttributes<HTMLAppSlotTypeElement> {
     'selectedElement'?: HTMLElement;