fix: slide to last slide when new slide added

Author: peterpeterparker

studio/src/app/handlers/editor/events/deck/deck-events.handler.tsx

@@ -55,6 +55,7 @@ export class DeckEventsHandler {
             this.el.addEventListener('deckDidChange', this.onDeckChange, false);
             this.el.addEventListener('slideDidChange', this.onSlideChange, false);
             this.el.addEventListener('slideDidLoad', this.onSlideDidLoad, false);
+            this.el.addEventListener('slidesDidLoad', this.onSlidesDidLoad, false);
             this.el.addEventListener('slideDelete', this.onSlideDelete, false);
             this.el.addEventListener('codeDidChange', this.onCodeChange, false);
 
@@ -75,6 +76,7 @@ export class DeckEventsHandler {
         this.el.removeEventListener('deckDidChange', this.onDeckChange, true);
         this.el.removeEventListener('slideDidChange', this.onSlideChange, true);
         this.el.removeEventListener('slideDidLoad', this.onSlideDidLoad, true);
+        this.el.removeEventListener('slidesDidLoad', this.onSlidesDidLoad, true);
         this.el.removeEventListener('slideDelete', this.onSlideDelete, true);
         this.el.removeEventListener('codeDidChange', this.onCodeChange, true);
 
@@ -91,11 +93,16 @@ export class DeckEventsHandler {
 
     private onSlideDidLoad = async ($event: CustomEvent) => {
         if ($event && $event.target && $event.target instanceof HTMLElement) {
-            await this.slideToLastSlide($event.target);
             await this.createSlide($event.target);
         }
     };
 
+    private onSlidesDidLoad = async ($event: CustomEvent) => {
+        if ($event) {
+            await this.slideToLastSlide();
+        }
+    };
+
     private onDeckChange = async ($event: CustomEvent) => {
         if (!$event || !$event.detail) {
             return;
@@ -518,19 +525,33 @@ export class DeckEventsHandler {
         return SlideTemplate[templateKey];
     }
 
-    private slideToLastSlide(newSlide: HTMLElement): Promise<void> {
+    private slideToLastSlide(): Promise<void> {
         return new Promise<void>(async (resolve) => {
             const deck: HTMLElement = this.el.querySelector('deckgo-deck');
 
-            if (!deck) {
+            if (!deck || !deck.children || deck.children.length <= 0) {
+                resolve();
+                return;
+            }
+
+            const slides: Element[] = Array.from(deck.children).filter((slide: Element) => {
+                return slide.tagName.toLocaleLowerCase().indexOf('deckgo-slide-') > -1
+            });
+
+            if (!slides || slides.length <= 0) {
                 resolve();
                 return;
             }
 
-            if (!newSlide.getAttribute('slide_id') && deck.hasChildNodes()) {
-                await (deck as any).slideTo(deck.children && deck.children.length > 0 ? deck.children.length - 1 : 0);
+            const lastSlide: Element = slides[slides.length - 1];
+
+            if (!lastSlide || lastSlide.getAttribute('slide_id')) {
+                resolve();
+                return;
             }
 
+            await (deck as any).slideTo(slides.length - 1);
+
             resolve();
         });
     }