feat(#41): add a slot "info" to the code template

Author: peterpeterparker

src/components/slides/deckdeckgo-slide-code/deckdeckgo-slide-code.scss

@@ -4,6 +4,8 @@ div.deckgo-slide {
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
+
+  position: relative;
 }
 
 div.deckgo-slide-code-container {
@@ -21,6 +23,31 @@ div.deckgo-slide-code-container {
   transition: opacity 0.5s ease-in;
 }
 
+
+::slotted([slot="info"]) {
+  display: none;
+
+  pointer-events: none;
+}
+
+::slotted([slot="info"].deckgo-show-info) {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+
+  background: var(--deckgo-show-info-background);
+
+  pointer-events: initial;
+}
+
 @media print {
   div.deckgo-slide {
     height: 100%;

src/components/slides/deckdeckgo-slide-code/deckdeckgo-slide-code.tsx

@@ -44,6 +44,8 @@ export class DeckdeckgoSlideCode implements DeckdeckgoSlide {
     this.slideDidLoad.emit();
 
     await this.moveSlots();
+
+    await this.showInfo();
   }
 
   private moveSlots(): Promise<void> {
@@ -60,6 +62,40 @@ export class DeckdeckgoSlideCode implements DeckdeckgoSlide {
     });
   }
 
+  private showInfo(): Promise<void> {
+    return new Promise<void>((resolve) => {
+      // Only on mobile devices
+      if (DeckdeckgoUtils.isMobile()) {
+        const info: HTMLElement = this.el.querySelector('[slot=\'info\']');
+
+        if (info) {
+          info.classList.add('deckgo-show-info');
+        }
+      }
+
+      resolve();
+    });
+  }
+
+  private hideInfo(): Promise<boolean> {
+    return new Promise<boolean>((resolve) => {
+      // Only on mobile devices
+      if (DeckdeckgoUtils.isMobile()) {
+        const info: HTMLElement = this.el.querySelector('[slot=\'info\']');
+
+        if (info && info.classList.contains('deckgo-show-info')) {
+          info.classList.remove('deckgo-show-info');
+          info.style.setProperty('pointer-events', 'none');
+
+          resolve(true);
+          return;
+        }
+      }
+
+      resolve(false);
+    });
+  }
+
   @Method()
   beforeSwipe(_enter: boolean): Promise<boolean> {
     return new Promise<boolean>(async (resolve) => {
@@ -130,13 +166,20 @@ export class DeckdeckgoSlideCode implements DeckdeckgoSlide {
   }
 
   private switchAction(): Promise<void> {
-    return new Promise<void>((resolve) => {
+    return new Promise<void>(async (resolve) => {
       if (!this.mobile) {
         // Scrolling is allowed on not mobile devices
         resolve();
         return;
       }
 
+      const infoRemoved: boolean = await this.hideInfo();
+      if (infoRemoved) {
+        // On the first click, we just want to hide the info
+        resolve();
+        return;
+      }
+
       this.action = this.action === DeckdeckgoSlideCodeAction.SWIPE ? DeckdeckgoSlideCodeAction.SCROLL : DeckdeckgoSlideCodeAction.SWIPE;
 
       this.scrolling.emit(this.action === DeckdeckgoSlideCodeAction.SCROLL);
@@ -176,6 +219,7 @@ export class DeckdeckgoSlideCode implements DeckdeckgoSlide {
         <deckgo-highlight-code src={this.src} anchor={this.anchor} anchorZoom={this.anchorZoom} hideAnchor={this.hideAnchor} language={this.language}></deckgo-highlight-code>
       </div>
       <slot name="code"></slot>
+      <slot name="info"></slot>
       <slot name="notes"></slot>
     </div>;
   }