feat: add slide gif

Author: peterpeterparker

studio/src/app/components/editor/app-editor-toolbar/app-editor-toolbar.tsx

@@ -3,7 +3,7 @@ import {OverlayEventDetail} from '@ionic/core';
 
 import {Subscription} from 'rxjs';
 
-import {EditorUtils, SlotType} from '../../../utils/editor-utils';
+import {SlotType} from '../../../utils/editor-utils';
 
 import {DeckBusyService} from '../../../services/deck/deck-busy.service';
 
@@ -46,6 +46,8 @@ export class AppEditorToolbar {
     @State()
     private deckBusy: boolean = false;
 
+    private originalPlaceHolder: Node;
+
     constructor() {
         this.deckBusyService = DeckBusyService.getInstance();
     }
@@ -135,7 +137,7 @@ export class AppEditorToolbar {
 
             if (selected.classList && selected.classList.contains('deckgo-untouched')) {
                 if (selected.firstChild) {
-                    selected.removeChild(selected.firstChild);
+                    this.originalPlaceHolder = selected.removeChild(selected.firstChild);
                 }
 
                 selected.classList.remove('deckgo-untouched');
@@ -155,8 +157,8 @@ export class AppEditorToolbar {
     unSelect(): Promise<void> {
         return new Promise<void>(async (resolve) => {
             if (this.selectedElement) {
-                if (this.selectedElement.classList && !this.selectedElement.classList.contains('deckgo-untouched') && !this.selectedElement.firstChild) {
-                    this.selectedElement.appendChild(document.createTextNode(this.selectedElement.nodeName && this.selectedElement.nodeName.toLowerCase() === 'h1' ? EditorUtils.DEFAULT_TITLE : EditorUtils.DEFAULT_CONTENT));
+                if (this.originalPlaceHolder && this.selectedElement.classList && !this.selectedElement.classList.contains('deckgo-untouched') && !this.selectedElement.firstChild) {
+                    this.selectedElement.appendChild(this.originalPlaceHolder);
                     this.selectedElement.classList.add('deckgo-untouched');
                 }
 

studio/src/app/modals/editor/app-gif/app-gif.scss

@@ -0,0 +1,42 @@
+import {Component, Element, Listen} from '@stencil/core';
+
+@Component({
+    tag: 'app-gif',
+    styleUrl: 'app-gif.scss'
+})
+export class AppGif {
+
+    @Element() el: HTMLElement;
+
+    async componentDidLoad() {
+        history.pushState({modal: true}, null);
+    }
+
+    @Listen('window:popstate')
+    async handleHardwareBackButton(_e: PopStateEvent) {
+        await this.closeModal();
+    }
+
+    async closeModal() {
+        await (this.el.closest('ion-modal') as HTMLIonModalElement).dismiss();
+    }
+
+    render() {
+        return [
+            <ion-header>
+                <ion-toolbar color="primary">
+                    <ion-buttons slot="start">
+                        <ion-button onClick={() => this.closeModal()}>
+                            <ion-icon name="close"></ion-icon>
+                        </ion-button>
+                    </ion-buttons>
+                    <ion-title class="ion-text-uppercase">Ready to publish?</ion-title>
+                </ion-toolbar>
+            </ion-header>,
+            <ion-content padding>
+                Find cool Gifs
+            </ion-content>
+        ];
+    }
+
+}

studio/src/app/modals/editor/app-gif/app-gif.tsx

@@ -9,8 +9,9 @@ export enum SlotType {
 
 export class EditorUtils {
 
-    static DEFAULT_TITLE: string = 'Click to add title';
-    static DEFAULT_CONTENT: string = 'Click to add content';
+    private static DEFAULT_TITLE: string = 'Click to add title';
+    private static DEFAULT_CONTENT: string = 'Click to add content';
+    private static DEFAULT_CAPTION: string = 'Click to add a caption';
 
     static createSlide(template: SlideTemplate): Promise<any> {
         return new Promise<any>(async (resolve) => {
@@ -25,6 +26,8 @@ export class EditorUtils {
                 resolve(await this.createSlideContent());
             } else if (template === SlideTemplate.SPLIT) {
                 resolve(await this.createSlideSplit());
+            } else if (template === SlideTemplate.GIF) {
+                resolve(await this.createSlideGif());
             } else {
                 resolve(null);
             }
@@ -103,4 +106,28 @@ export class EditorUtils {
         });
     }
 
+    private static createSlideGif(): Promise<any> {
+        return new Promise<any>((resolve) => {
+            if (!document) {
+                resolve();
+                return;
+            }
+
+            const title = <h1 slot="header" class="deckgo-untouched" contenteditable>
+                {this.DEFAULT_CAPTION}
+            </h1>;
+
+            const content = <h2 slot="footer" class="deckgo-untouched" contenteditable>
+                {this.DEFAULT_CAPTION}
+            </h2>;
+
+            const slide: any = <deckgo-slide-gif src="./assets/img/example.gif" fullscreen={true}>
+                {title}
+                {content}
+            </deckgo-slide-gif>;
+
+            resolve(slide);
+        });
+    }
+
 }

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

@@ -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';
@@ -119,6 +119,9 @@ export namespace Components {
     'publication'?: Date;
   }
 
+  interface AppGif {}
+  interface AppGifAttributes extends StencilHTMLAttributes {}
+
   interface AppPublish {
     'caption': string;
     'description': string;
@@ -195,6 +198,7 @@ declare global {
     'AppPopular': Components.AppPopular;
     'AppFeedCardContent': Components.AppFeedCardContent;
     'AppFeedCard': Components.AppFeedCard;
+    'AppGif': Components.AppGif;
     'AppPublish': Components.AppPublish;
     'AppSlideNavigate': Components.AppSlideNavigate;
     'AppAbout': Components.AppAbout;
@@ -225,6 +229,7 @@ declare global {
     'app-popular': Components.AppPopularAttributes;
     'app-feed-card-content': Components.AppFeedCardContentAttributes;
     'app-feed-card': Components.AppFeedCardAttributes;
+    'app-gif': Components.AppGifAttributes;
     'app-publish': Components.AppPublishAttributes;
     'app-slide-navigate': Components.AppSlideNavigateAttributes;
     'app-about': Components.AppAboutAttributes;
@@ -320,6 +325,12 @@ declare global {
     new (): HTMLAppFeedCardElement;
   };
 
+  interface HTMLAppGifElement extends Components.AppGif, HTMLStencilElement {}
+  var HTMLAppGifElement: {
+    prototype: HTMLAppGifElement;
+    new (): HTMLAppGifElement;
+  };
+
   interface HTMLAppPublishElement extends Components.AppPublish, HTMLStencilElement {}
   var HTMLAppPublishElement: {
     prototype: HTMLAppPublishElement;
@@ -418,6 +429,7 @@ declare global {
     'app-popular': HTMLAppPopularElement
     'app-feed-card-content': HTMLAppFeedCardContentElement
     'app-feed-card': HTMLAppFeedCardElement
+    'app-gif': HTMLAppGifElement
     'app-publish': HTMLAppPublishElement
     'app-slide-navigate': HTMLAppSlideNavigateElement
     'app-about': HTMLAppAboutElement
@@ -448,6 +460,7 @@ declare global {
     'app-popular': HTMLAppPopularElement;
     'app-feed-card-content': HTMLAppFeedCardContentElement;
     'app-feed-card': HTMLAppFeedCardElement;
+    'app-gif': HTMLAppGifElement;
     'app-publish': HTMLAppPublishElement;
     'app-slide-navigate': HTMLAppSlideNavigateElement;
     'app-about': HTMLAppAboutElement;