feat: apply deck style on load

Author: peterpeterparker

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

@@ -8,6 +8,9 @@ import {CreateSlidesUtils} from '../../../utils/editor/create-slides.utils';
 
 import {AuthUser} from '../../../models/auth-user';
 import {Slide, SlideTemplate} from '../../../models/slide';
+import {Deck} from '../../../models/deck';
+
+import {ParseStyleUtils} from '../../../utils/editor/parse-style.utils';
 
 import {DeckEventsHandler} from '../../../handlers/editor/deck-events/deck-events.handler';
 
@@ -17,6 +20,7 @@ import {NavDirection, NavService} from '../../../services/nav/nav.service';
 
 import {EditorHelper} from '../../../helpers/editor/editor.helper';
 import {DeckAction} from '../../../popovers/editor/app-deck-actions/deck-action';
+import {DeckEditorService} from '../../../services/deck/deck-editor.service';
 
 interface FirstSlideContent {
     title: string;
@@ -51,10 +55,14 @@ export class AppEditor {
     private guestService: GuestService;
     private navService: NavService;
 
+    private deckEditorService: DeckEditorService;
+    private deckStyle: any;
+
     constructor() {
         this.authService = AuthService.getInstance();
         this.guestService = GuestService.getInstance();
         this.navService = NavService.getInstance();
+        this.deckEditorService = DeckEditorService.getInstance();
     }
 
     async componentWillLoad() {
@@ -153,10 +161,26 @@ export class AppEditor {
                 this.slides = [...slides];
             }
 
+            await this.initDeckStyle();
+
             resolve();
         });
     }
 
+    private initDeckStyle(): Promise<void> {
+        return new Promise<void>((resolve) => {
+            this.deckEditorService.watch().pipe(take(1)).subscribe(async (deck: Deck) => {
+                if (deck && deck.attributes && deck.attributes.style) {
+                    this.deckStyle = await ParseStyleUtils.convertStyle(deck.attributes.style);
+                } else {
+                    this.deckStyle = undefined;
+                }
+
+                resolve();
+            });
+        });
+    }
+
     private concatSlide(extraSlide: any): Promise<void> {
         return new Promise<void>((resolve) => {
             this.slides = [...this.slides, extraSlide];
@@ -562,7 +586,7 @@ export class AppEditor {
             <app-navigation publish={true}></app-navigation>,
             <ion-content padding>
                 <main class={this.displaying ? 'idle' : undefined}>
-                    <deckgo-deck embedded={true}
+                    <deckgo-deck embedded={true} style={this.deckStyle}
                                  onMouseDown={(e: MouseEvent) => this.deckTouched(e)}
                                  onTouchStart={(e: TouchEvent) => this.deckTouched(e)}
                                  onSlideNextDidChange={() => this.hideToolbar()}

studio/src/app/utils/editor/parse-slides.utils.tsx

@@ -1,4 +1,5 @@
 import {Slide, SlideTemplate} from '../../models/slide';
+import {ParseStyleUtils} from './parse-style.utils';
 
 export class ParseSlidesUtils {
 
@@ -36,7 +37,7 @@ export class ParseSlidesUtils {
 
             const content = await this.parseElements(div, true);
 
-            const style = slide.attributes ? await this.convertStyle(slide.attributes.style) : undefined;
+            const style = slide.attributes ? await ParseStyleUtils.convertStyle(slide.attributes.style) : undefined;
 
             const src = slide.attributes && slide.attributes.src ? slide.attributes.src : undefined;
 
@@ -86,7 +87,7 @@ export class ParseSlidesUtils {
 
             const attributes: any = this.getAttributes(element);
             if (attributes.style) {
-                attributes.style = await this.convertStyle(attributes.style);
+                attributes.style = await ParseStyleUtils.convertStyle(attributes.style);
             }
 
             if (attributes.slot) {
@@ -97,34 +98,6 @@ export class ParseSlidesUtils {
         });
     }
 
-    private static convertStyle(originalStyle: string): Promise<any> {
-        return new Promise<any>((resolve) => {
-            if (!originalStyle || originalStyle.length <= 0) {
-                resolve(undefined);
-                return;
-            }
-
-            const result: any = {};
-
-            const styles: string[] = originalStyle.split(';');
-
-            if (styles && styles.length > 0) {
-                styles.forEach((style: string) => {
-                    if (style && style.length > 0) {
-                        const split: string[] = style.split(':');
-                        if (split && split.length > 1) {
-                            result[split[0].trim()] = split[1].trim();
-                        } else if (split && split.length > 0) {
-                            result[split[0].trim()] = undefined;
-                        }
-                    }
-                });
-            }
-
-            resolve(result);
-        });
-    }
-
     private static getAttributes(el): any {
         if (!el || !el.attributes) {
             return {};

studio/src/app/utils/editor/parse-style.utils.tsx

@@ -0,0 +1,31 @@
+export class ParseStyleUtils {
+
+    static convertStyle(originalStyle: string): Promise<any> {
+        return new Promise<any>((resolve) => {
+            if (!originalStyle || originalStyle.length <= 0) {
+                resolve(undefined);
+                return;
+            }
+
+            const result: any = {};
+
+            const styles: string[] = originalStyle.split(';');
+
+            if (styles && styles.length > 0) {
+                styles.forEach((style: string) => {
+                    if (style && style.length > 0) {
+                        const split: string[] = style.split(':');
+                        if (split && split.length > 1) {
+                            result[split[0].trim()] = split[1].trim();
+                        } else if (split && split.length > 0) {
+                            result[split[0].trim()] = undefined;
+                        }
+                    }
+                });
+            }
+
+            resolve(result);
+        });
+    }
+
+}

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';