deckgo · peterpeterparker · May 10, 2020 · Apr 26, 2020 · May 3, 2020 · May 3, 2020
diff --git a/studio/package.json b/studio/package.json
@@ -25,6 +25,7 @@
     "@deckdeckgo/highlight-code": "^1.0.4",
     "@deckdeckgo/inline-editor": "^1.2.0",
     "@deckdeckgo/lazy-img": "^1.0.0",
+    "@deckdeckgo/math": "^1.0.0",
     "@deckdeckgo/qrcode": "^1.0.0",
     "@deckdeckgo/remote": "^1.1.0",
     "@deckdeckgo/slide-aspect-ratio": "^1.0.0",

diff --git a/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx b/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx
@@ -27,7 +27,7 @@ import {BusyService} from '../../../../../services/editor/busy/busy.service';
 @Component({
   tag: 'app-actions-element',
   styleUrl: 'app-actions-element.scss',
-  shadow: false,
+  shadow: false
 })
 export class AppActionsElement {
   @Element() el: HTMLElement;
@@ -52,6 +52,9 @@ export class AppActionsElement {
   @State()
   private code: boolean = false;
 
+  @State()
+  private math: boolean = false;
+
   @State()
   private image: boolean = false;
 
@@ -70,6 +73,7 @@ export class AppActionsElement {
 
   @Event() private slideDidChange: EventEmitter<HTMLElement>;
   @Event() private codeDidChange: EventEmitter<HTMLElement>;
+  @Event() private mathDidChange: EventEmitter<HTMLElement>;
   @Event() private imgDidChange: EventEmitter<HTMLElement>;
   @Event() private notesDidChange: EventEmitter<HTMLElement>;
 
@@ -227,7 +231,7 @@ export class AppActionsElement {
         return;
       }
 
-      if (element.hasAttribute('slot') && element.getAttribute('slot') !== 'code') {
+      if (element.hasAttribute('slot') && element.getAttribute('slot') !== 'code' && element.getAttribute('slot') !== 'math') {
         resolve(element);
         return;
       }
@@ -246,6 +250,10 @@ export class AppActionsElement {
     return element && element.nodeName && element.nodeName.toLowerCase() === SlotType.CODE;
   }
 
+  private isElementMath(element: HTMLElement): boolean {
+    return element && element.nodeName && element.nodeName.toLowerCase() === SlotType.MATH;
+  }
+
   private isElementShape(element: HTMLElement): boolean {
     return element && element.nodeName && element.nodeName.toLowerCase() === SlotType.DRAG_RESIZE_ROTATE;
   }
@@ -352,7 +360,7 @@ export class AppActionsElement {
     const popover: HTMLIonPopoverElement = await popoverController.create({
       component: 'app-element-delete',
       event: $event,
-      mode: isMobile() && !isIOS() ? 'md' : 'ios',
+      mode: isMobile() && !isIOS() ? 'md' : 'ios'
     });
 
     popover.onDidDismiss().then(async (detail: OverlayEventDetail) => {
@@ -450,11 +458,11 @@ export class AppActionsElement {
     const popover: HTMLIonPopoverElement = await popoverController.create({
       component: 'app-slot-type',
       componentProps: {
-        selectedElement: this.selectedElement,
+        selectedElement: this.selectedElement
       },
       mode: 'md',
       showBackdrop: false,
-      cssClass: 'popover-menu',
+      cssClass: 'popover-menu'
     });
 
     popover.onDidDismiss().then(async (detail: OverlayEventDetail) => {
@@ -481,11 +489,11 @@ export class AppActionsElement {
         qrCode: this.slideNodeName === 'deckgo-slide-qrcode',
         chart: this.slideNodeName === 'deckgo-slide-chart',
         author: this.slideNodeName === 'deckgo-slide-author',
-        slideDidChange: this.slideDidChange,
+        slideDidChange: this.slideDidChange
       },
       mode: 'md',
       showBackdrop: false,
-      cssClass: 'popover-menu',
+      cssClass: 'popover-menu'
     });
 
     popover.onWillDismiss().then(async (detail: OverlayEventDetail) => {
@@ -511,11 +519,11 @@ export class AppActionsElement {
     const popover: HTMLIonPopoverElement = await popoverController.create({
       component: 'app-shape',
       componentProps: {
-        selectedElement: this.selectedElement,
+        selectedElement: this.selectedElement
       },
       mode: 'md',
       showBackdrop: false,
-      cssClass: 'popover-menu',
+      cssClass: 'popover-menu'
     });
 
     popover.onWillDismiss().then(async (detail: OverlayEventDetail) => {
@@ -533,11 +541,11 @@ export class AppActionsElement {
       componentProps: {
         selectedElement: this.selectedElement,
         slide: this.slide,
-        imgDidChange: this.imgDidChange,
+        imgDidChange: this.imgDidChange
       },
       mode: 'md',
       showBackdrop: false,
-      cssClass: 'popover-menu',
+      cssClass: 'popover-menu'
     });
 
     return popover;
@@ -552,8 +560,8 @@ export class AppActionsElement {
       component: 'app-poll-options',
       componentProps: {
         selectedElement: this.selectedElement,
-        slideDidChange: this.slideDidChange,
-      },
+        slideDidChange: this.slideDidChange
+      }
     });
 
     modal.onDidDismiss().then(async (_detail: OverlayEventDetail) => {
@@ -573,11 +581,11 @@ export class AppActionsElement {
     const popover: HTMLIonPopoverElement = await popoverController.create({
       component: component,
       componentProps: {
-        selectedElement: this.selectedElement,
+        selectedElement: this.selectedElement
       },
       mode: 'ios',
       event: $event,
-      cssClass: 'info',
+      cssClass: 'info'
     });
 
     popover.onDidDismiss().then(async (detail: OverlayEventDetail) => {
@@ -602,11 +610,29 @@ export class AppActionsElement {
       component: 'app-code',
       componentProps: {
         selectedElement: this.selectedElement,
-        codeDidChange: this.codeDidChange,
+        codeDidChange: this.codeDidChange
+      },
+      mode: 'md',
+      showBackdrop: false,
+      cssClass: 'popover-menu'
+    });
+
+    await popover.present();
+  }
+  private async openMath() {
+    if (!this.math) {
+      return;
+    }
+
+    const popover: HTMLIonPopoverElement = await popoverController.create({
+      component: 'app-math',
+      componentProps: {
+        selectedElement: this.selectedElement,
+        mathDidChange: this.mathDidChange
       },
       mode: 'md',
       showBackdrop: false,
-      cssClass: 'popover-menu',
+      cssClass: 'popover-menu'
     });
 
     await popover.present();
@@ -620,8 +646,8 @@ export class AppActionsElement {
     const modal: HTMLIonModalElement = await modalController.create({
       component: 'app-youtube',
       componentProps: {
-        selectedElement: this.selectedElement,
-      },
+        selectedElement: this.selectedElement
+      }
     });
 
     modal.onDidDismiss().then(async (detail: OverlayEventDetail) => {
@@ -666,8 +692,8 @@ export class AppActionsElement {
     const modal: HTMLIonModalElement = await modalController.create({
       component: 'app-notes',
       componentProps: {
-        selectedElement: this.selectedElement,
-      },
+        selectedElement: this.selectedElement
+      }
     });
 
     modal.onDidDismiss().then(async (detail: OverlayEventDetail) => {
@@ -766,6 +792,7 @@ export class AppActionsElement {
       this.slideNodeName = this.slide ? element.nodeName.toLowerCase() : undefined;
       this.slideDemo = this.slide && this.slideNodeName === 'deckgo-slide-split' && element.getAttribute('type') === SlideSplitType.DEMO;
 
+      this.math = this.isElementMath(SlotUtils.isNodeReveal(element) ? (element.firstElementChild as HTMLElement) : element);
       this.code = this.isElementCode(SlotUtils.isNodeReveal(element) ? (element.firstElementChild as HTMLElement) : element);
       this.image = this.isElementImage(SlotUtils.isNodeReveal(element) ? (element.firstElementChild as HTMLElement) : element);
       this.shape = this.isElementShape(element);
@@ -857,11 +884,11 @@ export class AppActionsElement {
       component: 'app-color',
       componentProps: {
         slide: this.slide,
-        selectedElement: this.selectedElement,
+        selectedElement: this.selectedElement
       },
       mode: 'md',
       showBackdrop: false,
-      cssClass: `popover-menu ${this.slideNodeName === 'deckgo-slide-poll' ? 'popover-menu-wide' : ''}`,
+      cssClass: `popover-menu ${this.slideNodeName === 'deckgo-slide-poll' ? 'popover-menu-wide' : ''}`
     });
 
     await popover.present();
@@ -1013,10 +1040,10 @@ export class AppActionsElement {
         notes: this.slide,
         copy: this.slide || this.shape,
         reveal: !this.hideReveal(),
-        list: this.list !== undefined,
+        list: this.list !== undefined
       },
       event: $event,
-      mode: 'ios',
+      mode: 'ios'
     });
 
     popover.onDidDismiss().then(async (detail: OverlayEventDetail) => {
@@ -1039,7 +1066,7 @@ export class AppActionsElement {
   }
 
   private hideReveal(): boolean {
-    return this.slide || this.code || this.shape || this.slideNodeName === 'deckgo-slide-youtube';
+    return this.slide || this.code || this.math || this.shape || this.slideNodeName === 'deckgo-slide-youtube';
   }
 
   render() {
@@ -1054,6 +1081,7 @@ export class AppActionsElement {
           {this.renderList()}
           {this.renderImages()}
           {this.renderCodeOptions()}
+          {this.renderMathOptions()}
         </ion-buttons>
 
         <ion-buttons slot="end">
@@ -1137,7 +1165,7 @@ export class AppActionsElement {
       <ion-tab-button onClick={() => this.openSlotType()} aria-label="Toggle element type" color="primary" mode="md" class={classToggle}>
         <ion-icon src="/assets/icons/ionicons/add.svg"></ion-icon>
         <ion-label>Toggle</ion-label>
-      </ion-tab-button>,
+      </ion-tab-button>
     ];
   }
 
@@ -1148,7 +1176,7 @@ export class AppActionsElement {
       <ion-tab-button onClick={() => this.openShape()} color="primary" aria-label="Add a shape" mode="md" class={classSlide}>
         <ion-icon src="/assets/icons/ionicons/shapes.svg"></ion-icon>
         <ion-label>Add shape</ion-label>
-      </ion-tab-button>,
+      </ion-tab-button>
     ];
   }
 
@@ -1162,6 +1190,16 @@ export class AppActionsElement {
       </ion-tab-button>
     );
   }
+  private renderMathOptions() {
+    const classSlideMath: string | undefined = this.math ? undefined : 'hidden';
+
+    return (
+      <ion-tab-button onClick={() => this.openMath()} aria-label="Math options" color="primary" mode="md" class={classSlideMath}>
+        <ion-icon name="settings-outline"></ion-icon>
+        <ion-label>Options</ion-label>
+      </ion-tab-button>
+    );
+  }
 
   private renderImages() {
     const classImage: string | undefined = this.image || this.slide ? undefined : 'hidden';

diff --git a/studio/src/app/handlers/editor/events/deck/deck-events.handler.tsx b/studio/src/app/handlers/editor/events/deck/deck-events.handler.tsx
@@ -65,6 +65,7 @@ export class DeckEventsHandler {
       this.el.addEventListener('slidesDidLoad', this.onSlidesDidLoad, false);
       this.el.addEventListener('slideDelete', this.onSlideDelete, false);
       this.el.addEventListener('codeDidChange', this.onCustomEventChange, false);
+      this.el.addEventListener('mathDidChange', this.onCustomEventChange, false);
       this.el.addEventListener('imgDidChange', this.onCustomEventChange, false);
       this.el.addEventListener('linkCreated', this.onCustomEventChange, false);
       this.el.addEventListener('drrDidChange', this.onCustomEventChange, false);
@@ -95,6 +96,7 @@ export class DeckEventsHandler {
     this.el.removeEventListener('slidesDidLoad', this.onSlidesDidLoad, true);
     this.el.removeEventListener('slideDelete', this.onSlideDelete, true);
     this.el.removeEventListener('codeDidChange', this.onCustomEventChange, true);
+    this.el.removeEventListener('mathDidChange', this.onCustomEventChange, true);
     this.el.removeEventListener('imgDidChange', this.onCustomEventChange, true);
     this.el.removeEventListener('linkCreated', this.onCustomEventChange, true);
     this.el.removeEventListener('drrDidChange', this.onCustomEventChange, true);

diff --git a/studio/src/app/pages/editor/app-editor/app-editor.tsx b/studio/src/app/pages/editor/app-editor/app-editor.tsx
@@ -44,7 +44,7 @@ import {FontsService} from '../../../services/editor/fonts/fonts.service';
 
 @Component({
   tag: 'app-editor',
-  styleUrl: 'app-editor.scss',
+  styleUrl: 'app-editor.scss'
 })
 export class AppEditor {
   @Element() el: HTMLElement;
@@ -392,7 +392,7 @@ export class AppEditor {
 
     const modal: HTMLIonModalElement = await modalController.create({
       component: 'app-publish',
-      cssClass: 'fullscreen',
+      cssClass: 'fullscreen'
     });
 
     modal.onDidDismiss().then(async (_detail: OverlayEventDetail) => {
@@ -589,7 +589,7 @@ export class AppEditor {
   async signIn() {
     this.navService.navigate({
       url: '/signin' + (window && window.location ? window.location.pathname : ''),
-      direction: NavDirection.FORWARD,
+      direction: NavDirection.FORWARD
     });
   }
 
@@ -603,7 +603,7 @@ export class AppEditor {
       const elements: HTMLElement[] = Array.prototype.slice.call(slide.childNodes);
       elements.forEach((e: HTMLElement) => {
         if (e.nodeName && e.nodeType === 1 && e.hasAttribute('slot')) {
-          if (e.nodeName.toLowerCase() === SlotType.CODE) {
+          if (e.nodeName.toLowerCase() === SlotType.CODE || e.nodeName.toLowerCase() === SlotType.MATH) {
             e.setAttribute('editable', '');
           } else if (ParseElementsUtils.isElementContentEditable(e)) {
             e.setAttribute('contentEditable', '');
@@ -673,7 +673,6 @@ export class AppEditor {
       <ion-content>
         <main class={this.slidesEditable ? (this.presenting ? 'ready idle' : 'ready') : undefined}>
           {this.renderLoading()}
-
           <deckgo-deck
             embedded={true}
             style={this.style}
@@ -710,7 +709,7 @@ export class AppEditor {
         img-anchor="deckgo-lazy-img"
         list={false}
         align={false}></deckgo-inline-editor>,
-      <app-inactivity fullscreen={this.fullscreen} onMouseInactivity={($event: CustomEvent) => this.inactivity($event)}></app-inactivity>,
+      <app-inactivity fullscreen={this.fullscreen} onMouseInactivity={($event: CustomEvent) => this.inactivity($event)}></app-inactivity>
     ];
   }
 

diff --git a/studio/src/app/popovers/editor/app-math/app-math.scss b/studio/src/app/popovers/editor/app-math/app-math.scss
@@ -0,0 +1,4 @@
+app-math {
+  @import "../../../../global/theme/editor/editor-info";
+  @import "../../../../global/theme/editor/editor-popover";
+}