feat(#54): add a new actions slot

Author: peterpeterparker

src/components/deck/deckdeckgo-deck/deckdeckgo-deck.scss

@@ -32,6 +32,10 @@ div.deckgo-pager {
   pointer-events: none;
 }
 
+::slotted([slot="actions"]) {
+  display: none;
+}
+
 @media print {
   div.deckgo-deck {
     display: initial;

src/components/deck/deckdeckgo-deck/deckdeckgo-deck.tsx

@@ -84,6 +84,7 @@ export class DeckdeckgoDeck {
 
         const toggleFullscreen: boolean = DeckdeckgoUtils.isFullscreen();
         await this.hideOrClearMouseCursorTimer(toggleFullscreen);
+        await this.showHideActionsSlot(toggleFullscreen);
       }, 100));
     }
   }
@@ -339,7 +340,8 @@ export class DeckdeckgoDeck {
       const definedSlides: HTMLCollection = this.el.children;
       const loadedSlides: NodeListOf<HTMLElement> = this.el.querySelectorAll('.deckgo-slide-container');
 
-      const definedSlidesLength: number = await this.countDefinedSlides(definedSlides);
+      const filteredSlides: Element[] = await this.filterSlides(definedSlides);
+      const definedSlidesLength: number = filteredSlides ? filteredSlides.length : 0;
 
       // Are all slides loaded?
       if (definedSlides && loadedSlides && loadedSlides.length === definedSlidesLength && definedSlidesLength === this.length) {
@@ -357,6 +359,8 @@ export class DeckdeckgoDeck {
         this.slidesDidLoad.emit(orderedSlidesTagNames);
 
         await this.lazyLoadFirstSlides();
+
+        await this.cloneActionsSlot(filteredSlides);
       }
 
       resolve();
@@ -374,19 +378,38 @@ export class DeckdeckgoDeck {
     });
   }
 
-  // The last child might be a background and note a slides
-  private countDefinedSlides(definedSlides: HTMLCollection): Promise<number> {
-    return new Promise<number>((resolve) => {
+  private cloneActionsSlot(slides: Element[]): Promise<void> {
+    return new Promise<void>((resolve) => {
+      if (!slides || slides.length <= 0) {
+        resolve();
+        return;
+      }
+
+      const actions: HTMLElement = this.el.querySelector('[slot=\'actions\']');
+
+      if (actions) {
+        slides.forEach((slide: Element) => {
+          slide.appendChild(actions.cloneNode(true));
+        });
+      }
+
+      resolve();
+    });
+  }
+
+  // The last children might be slots (background, note or action)
+  private filterSlides(definedSlides: HTMLCollection): Promise<Element[]> {
+    return new Promise<Element[]>((resolve) => {
       if (!definedSlides || definedSlides.length <= 0) {
-        resolve(0);
+        resolve(null);
         return;
       }
 
       const slides: Element[] = Array.from(definedSlides).filter((slide: Element) => {
         return slide.tagName.toLocaleLowerCase().indexOf('deckgo-slide-') > -1
       });
 
-      resolve(slides ? slides.length : 0);
+      resolve(slides);
     });
   }
 
@@ -635,6 +658,23 @@ export class DeckdeckgoDeck {
     });
   }
 
+  private showHideActionsSlot(toggleFullscreen: boolean): Promise<void> {
+    return new Promise<void>((resolve) => {
+      const slider: HTMLElement = this.el.shadowRoot.querySelector('div.deckgo-deck');
+
+      if (!slider) {
+        resolve();
+        return;
+      }
+
+      if (toggleFullscreen) {
+        slider.style.setProperty('--slide-actions-display', 'none');
+      } else {
+        slider.style.removeProperty('--slide-actions-display');
+      }
+    });
+  }
+
   /* END: Full screen */
 
   /* BEGIN: Utils */
@@ -675,6 +715,7 @@ export class DeckdeckgoDeck {
     return [
       <div class="deckgo-deck">
         <slot/>
+        <slot name="actions"></slot>
         <slot name="background"></slot>
       </div>,
       <div class="deckgo-pager">{this.pager ? <deckgo-pager active-index={this.activeIndex} length={this.length}

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

@@ -58,6 +58,7 @@ export class DeckdeckgoSlideAuthor implements DeckdeckgoSlide {
         </div>
       </div>
       <slot name="notes"></slot>
+      <slot name="actions"></slot>
     </div>;
   }
 

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

@@ -119,6 +119,7 @@ export class DeckdeckgoSlideChart implements DeckdeckgoSlide {
         {this.renderChart()}
       </div>
       <slot name="notes"></slot>
+      <slot name="actions"></slot>
     </div>
   }
 

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

@@ -44,6 +44,7 @@ div.deckgo-slide-code-container {
   flex-direction: column;
 
   background: var(--deckgo-show-info-background);
+  z-index: var(--deckgo-show-info-zindex, 1);
 
   pointer-events: initial;
 }

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

@@ -221,6 +221,7 @@ export class DeckdeckgoSlideCode implements DeckdeckgoSlide {
       <slot name="code"></slot>
       <slot name="info"></slot>
       <slot name="notes"></slot>
+      <slot name="actions"></slot>
     </div>;
   }
 

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

@@ -47,6 +47,7 @@ export class DeckdeckgoSlideContent implements DeckdeckgoSlide {
       <slot name="title"></slot>
       <slot name="content"></slot>
       <slot name="notes"></slot>
+      <slot name="actions"></slot>
     </div>;
   }
 

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

@@ -73,6 +73,7 @@ export class DeckdeckgoSlideGif implements DeckdeckgoSlide {
         <deckgo-gif src={this.src} alt={this.alt} fullscreen={this.fullscreen}></deckgo-gif>
         <slot name="footer"></slot>
         <slot name="notes"></slot>
+        <slot name="actions"></slot>
       </div>
     </div>
   }

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

@@ -92,6 +92,7 @@ export class DeckdeckgoSlideQrcode implements DeckdeckgoSlide {
         <deckgo-qrcode content={this.content}></deckgo-qrcode>
       </div>
       <slot name="notes"></slot>
+      <slot name="actions"></slot>
     </div>;
   }
 

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

@@ -48,6 +48,7 @@ export class DeckdeckgoSlideSplit implements DeckdeckgoSlide {
       <div class="deckgo-slide-split deckgo-slide-split-start"><slot name="start"></slot></div>
       <div class="deckgo-slide-split deckgo-slide-split-end"><slot name="end"></slot></div>
       <slot name="notes"></slot>
+      <slot name="actions"></slot>
     </div>;
   }