feat(#25): clone background

Author: peterpeterparker

src/components.d.ts

@@ -13,6 +13,7 @@ import '@stencil/core';
 export namespace Components {
 
   interface DeckgoDeck {
+    'cloneBackground': boolean;
     'doPrint': () => Promise<void>;
     'embedded': boolean;
     'getActiveIndex': () => Promise<number>;
@@ -29,6 +30,7 @@ export namespace Components {
     'toggleFullScreen': () => Promise<void>;
   }
   interface DeckgoDeckAttributes extends StencilHTMLAttributes {
+    'cloneBackground'?: boolean;
     'embedded'?: boolean;
     'keyboard'?: boolean;
     'onSlideDrag'?: (event: CustomEvent<number>) => void;

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

@@ -29,6 +29,7 @@ div.deckgo-pager {
 }
 
 ::slotted([slot="background"]) {
+  display: var(--background-display);
   pointer-events: none;
 }
 

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

@@ -26,6 +26,8 @@ export class DeckdeckgoDeck {
 
   @Prop() embedded: boolean = false;
 
+  @Prop() cloneBackground: boolean = true;
+
   @State()
   private rtl: boolean = false;
 
@@ -61,8 +63,6 @@ export class DeckdeckgoDeck {
 
     this.initWindowResize();
     this.initKeyboardAssist();
-
-    await this.lazyBackgroungImages();
   }
 
   private initRtl(): Promise<void> {
@@ -358,9 +358,12 @@ export class DeckdeckgoDeck {
 
         this.slidesDidLoad.emit(orderedSlidesTagNames);
 
-        await this.lazyLoadFirstSlides();
+        const promises: Promise<void>[] = [];
+        promises.push(this.lazyLoadFirstSlides());
+        promises.push(this.cloneSlots(filteredSlides, 'actions'));
+        promises.push(this.loadBackground(filteredSlides));
 
-        await this.cloneActionsSlot(filteredSlides);
+        await Promise.all(promises);
       }
 
       resolve();
@@ -378,18 +381,59 @@ export class DeckdeckgoDeck {
     });
   }
 
-  private cloneActionsSlot(slides: Element[]): Promise<void> {
+  private loadBackground(slides: Element[]): Promise<void> {
+    return new Promise<void>(async (resolve) => {
+
+      const background: HTMLElement = this.el.querySelector('[slot=\'background\']');
+
+      if (!background) {
+        resolve();
+        return;
+      }
+
+      await this.lazyBackgroungImages();
+
+      if (this.cloneBackground) {
+        await this.cloneSlots(slides, 'background');
+      }
+
+      await this.showHideBackgroundSlot();
+
+      resolve();
+    });
+  }
+
+  private showHideBackgroundSlot(): Promise<void> {
+    return new Promise<void>(async (resolve) => {
+      const slider: HTMLElement = this.el.shadowRoot.querySelector('div.deckgo-deck');
+
+      if (!slider) {
+        resolve();
+        return;
+      }
+
+      if (this.cloneBackground) {
+        slider.style.setProperty('--background-display', 'none');
+      } else {
+        slider.style.removeProperty('--background-display');
+      }
+
+      resolve();
+    });
+  }
+
+  private cloneSlots(slides: Element[], slotName: string): Promise<void> {
     return new Promise<void>((resolve) => {
       if (!slides || slides.length <= 0) {
         resolve();
         return;
       }
 
-      const actions: HTMLElement = this.el.querySelector('[slot=\'actions\']');
+      const slotElement: HTMLElement = this.el.querySelector('[slot=\'' + slotName + '\']');
 
-      if (actions) {
+      if (slotElement) {
         slides.forEach((slide: Element) => {
-          slide.appendChild(actions.cloneNode(true));
+          slide.appendChild(slotElement.cloneNode(true));
         });
       }
 

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

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

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

@@ -120,6 +120,7 @@ export class DeckdeckgoSlideChart implements DeckdeckgoSlide {
       </div>
       <slot name="notes"></slot>
       <slot name="actions"></slot>
+      <slot name="background"></slot>
     </div>
   }
 

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

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

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

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

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

@@ -74,6 +74,7 @@ export class DeckdeckgoSlideGif implements DeckdeckgoSlide {
         <slot name="footer"></slot>
         <slot name="notes"></slot>
         <slot name="actions"></slot>
+        <slot name="background"></slot>
       </div>
     </div>
   }

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

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

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

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