feat(#50): new feature and option to embed DeckDeckGo in any container too

Author: peterpeterparker

src/components.d.ts

@@ -14,6 +14,7 @@ export namespace Components {
 
   interface DeckgoDeck {
     'doPrint': () => Promise<void>;
+    'embedded': boolean;
     'getActiveIndex': () => Promise<number>;
     'getLength': () => Promise<number>;
     'isBeginning': () => Promise<boolean>;
@@ -28,6 +29,7 @@ export namespace Components {
     'toggleFullScreen': () => Promise<void>;
   }
   interface DeckgoDeckAttributes extends StencilHTMLAttributes {
+    'embedded'?: boolean;
     'keyboard'?: boolean;
     'onSlideDrag'?: (event: CustomEvent<number>) => void;
     'onSlideNextDidChange'?: (event: CustomEvent<number>) => void;

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

@@ -16,6 +16,9 @@ div.deckgo-deck {
   ::-webkit-scrollbar {
     display: none;
   }
+
+  --slide-width: 100vw;
+  --slide-height: 100vh;
 }
 
 div.deckgo-pager {

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

@@ -24,6 +24,8 @@ export class DeckdeckgoDeck {
   @Prop() pager: boolean = true;
   @Prop() pagerPercentage: boolean = true;
 
+  @Prop() embedded: boolean = false;
+
   @State()
   private rtl: boolean = false;
 
@@ -55,6 +57,8 @@ export class DeckdeckgoDeck {
   }
 
   async componentDidLoad() {
+    await this.initEmbeddedSlideWidth();
+
     this.initWindowResize();
     this.initKeyboardAssist();
 
@@ -75,11 +79,38 @@ export class DeckdeckgoDeck {
   private initWindowResize() {
     if (window) {
       window.addEventListener('resize', DeckdeckgoUtils.debounce(async () => {
+        await this.initEmbeddedSlideWidth();
         await this.slideTo(this.activeIndex);
       }, 100));
     }
   }
 
+  private initEmbeddedSlideWidth(): Promise<void> {
+    return new Promise<void>((resolve) => {
+      if (!this.embedded) {
+        resolve();
+        return;
+      }
+
+      const slider: HTMLElement = this.el.shadowRoot.querySelector('div.deckgo-deck');
+
+      if (!slider || !slider.offsetParent) {
+        resolve();
+        return;
+      }
+
+      if (slider.offsetParent.clientWidth > 0) {
+        slider.style.setProperty('--slide-width', '' + slider.offsetParent.clientWidth + 'px');
+      }
+
+      if (slider.offsetParent.clientHeight) {
+        slider.style.setProperty('--slide-height', '' + slider.offsetParent.clientHeight + 'px');
+      }
+
+      resolve();
+    });
+  }
+
   private initKeyboardAssist() {
     if (this.keyboard) {
       document.addEventListener('keydown', async (e) => {
@@ -193,9 +224,10 @@ export class DeckdeckgoDeck {
       }
 
       if (couldSwipeLeft || couldSwipeRight) {
-        const windowWidth: number = window.innerWidth;
-        if (deltaX.deltaX > (windowWidth / this.autoSwipeRatio)) {
-          this.deckTranslateX = deltaX.swipeLeft ? this.deckTranslateX - windowWidth : this.deckTranslateX + windowWidth;
+        const sliderWidth: number = await this.getSliderWidth();
+
+        if (deltaX.deltaX > (sliderWidth / this.autoSwipeRatio)) {
+          this.deckTranslateX = deltaX.swipeLeft ? this.deckTranslateX - sliderWidth : this.deckTranslateX + sliderWidth;
 
           if (this.isNextChange(deltaX.swipeLeft)) {
             this.activeIndex++;
@@ -222,6 +254,24 @@ export class DeckdeckgoDeck {
     });
   }
 
+  private getSliderWidth(): Promise<number> {
+    return new Promise<number>((resolve) => {
+      if (!this.embedded) {
+        resolve(window.innerWidth);
+        return;
+      }
+
+      const slider: HTMLElement = this.el.shadowRoot.querySelector('div.deckgo-deck');
+
+      if (!slider || !slider.offsetParent || slider.offsetParent.clientWidth <= 0) {
+        resolve(window.innerWidth);
+        return;
+      }
+
+      resolve(slider.offsetParent.clientWidth);
+    });
+  }
+
   private isNextChange(swipeLeft: boolean): boolean {
     return (swipeLeft && !this.rtl) || (!swipeLeft && this.rtl);
   }

src/components/extra/deckdeckgo-gif/deckdeckgo-gif.scss

@@ -31,8 +31,8 @@ div.deckgo-gif {
 :host(.deckgo-gif-fullscreen) {
 
   div.deckgo-gif {
-    width: 100vw;
-    height: 100vh;
+    width: var(--slide-width);
+    height: var(--slide-height);
 
     --width: 100vw;
     overflow: hidden;

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

@@ -4,7 +4,7 @@ div.deckgo-slide {
   flex-flow: row;
 
   padding: 0;
-  width: 100vw;
+  width: var(--slide-width);
 }
 
 div.deckgo-slide-author {

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

@@ -9,8 +9,8 @@ div.deckgo-slide {
 div.deckgo-chart-container {
   margin: var(--slide-chart-margin-top, 32px) var(--slide-chart-margin-end, 32px) var(--slide-chart-margin-bottom, 32px) var(--slide-chart-margin-start, 32px);
 
-  width: calc(100vw - var(--slide-chart-margin-end, 64px) - var(--slide-chart-margin-start, 64px));
-  height: calc(100vw - var(--slide-chart-margin-top, 64px) - var(--slide-chart-margin-bottom, 64px));
+  width: calc(var(--slide-width) - var(--slide-chart-margin-end, 64px) - var(--slide-chart-margin-start, 64px));
+  height: calc(var(--slide-height) - var(--slide-chart-margin-top, 64px) - var(--slide-chart-margin-bottom, 64px));
 
   display: flex;
   align-items: center;
@@ -19,7 +19,7 @@ div.deckgo-chart-container {
   align-self: center;
 
   @media screen and (max-width: 1024px) {
-    width: calc(100vw - var(--slide-chart-margin-end, 32px) - var(--slide-chart-margin-start, 32px));
-    height: calc(100vw - var(--slide-chart-margin-top, 32px) - var(--slide-chart-margin-bottom, 32px));
+    width: calc(var(--slide-width) - var(--slide-chart-margin-end, 32px) - var(--slide-chart-margin-start, 32px));
+    height: calc(var(--slide-height) - var(--slide-chart-margin-top, 32px) - var(--slide-chart-margin-bottom, 32px));
   }
 }

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

@@ -4,7 +4,7 @@ div.deckgo-slide {
   flex-flow: row wrap;
 
   padding: 0;
-  width: 100vw;
+  width: var(--slide-width);
 }
 
 div.deckgo-slide-split {

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

@@ -7,15 +7,15 @@ div.deckgo-slide {
 }
 
 div.deckgo-youtube-container {
-  width: calc(100vw - var(--slide-padding-end, 64px) - var(--slide-padding-start, 64px));
-  height: calc(((100vw - var(--slide-padding-end, 64px) - var(--slide-padding-start, 64px)) * 9) / 16);
+  width: calc(var(--slide-width) - var(--slide-padding-end, 64px) - var(--slide-padding-start, 64px));
+  height: calc(((var(--slide-height) - var(--slide-padding-end, 64px) - var(--slide-padding-start, 64px)) * 9) / 16);
 
   display: flex;
   align-items: center;
   justify-content: center;
 
   @media screen and (max-width: 1024px) {
-    width: calc(100vw - var(--slide-padding-end, 32px) - var(--slide-padding-start, 32px));
-    height: calc(((100vw - var(--slide-padding-end, 32px) - var(--slide-padding-start, 32px)) * 9) / 16);
+    width: calc(var(--slide-width) - var(--slide-padding-end, 32px) - var(--slide-padding-start, 32px));
+    height: calc(((var(--slide-height) - var(--slide-padding-end, 32px) - var(--slide-padding-start, 32px)) * 9) / 16);
   }
 }

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

@@ -56,6 +56,7 @@ export class DeckdeckgoSlideYoutube implements DeckdeckgoSlide {
     return new Promise<void>(async (resolve) => {
       await DeckdeckgoSlideUtils.lazyLoadContent(this.el);
 
+      await this.initSize();
       await this.resizeContent();
 
       resolve();

src/components/slides/deckdeckgo-slide.scss

@@ -2,6 +2,7 @@
   background: var(--background);
   color: var(--color);
   height: 100%;
+
   z-index: var(--zIndex, 1);
 
   --slide-padding-top-default: 64px;
@@ -23,8 +24,8 @@ div.deckgo-slide {
 
   padding: var(--slide-padding-top, var(--slide-padding-top-default)) var(--slide-padding-end, var(--slide-padding-end-default)) var(--slide-padding-bottom, var(--slide-padding-bottom-default)) var(--slide-padding-start,var(--slide-padding-start-default));
 
-  width: calc(100vw - var(--slide-padding-start, var(--slide-padding-start-default)) - var(--slide-padding-end, var(--slide-padding-end-default)));
-  height: calc(100% - var(--slide-padding-top, var(--slide-padding-top-default)) - var(--slide-padding-bottom, var(--slide-padding-bottom-default)));
+  width: calc(var(--slide-width) - var(--slide-padding-start, var(--slide-padding-start-default)) - var(--slide-padding-end, var(--slide-padding-end-default)));
+  height: calc(var(--slide-height) - var(--slide-padding-top, var(--slide-padding-top-default)) - var(--slide-padding-bottom, var(--slide-padding-bottom-default)));
 
   // Don't allow text selection
   -webkit-touch-callout: none; /* iOS Safari */