doc(#36): add slide QR code

Author: peterpeterparker

src/components.d.ts

@@ -198,6 +198,17 @@ export namespace Components {
     'src'?: string;
   }
 
+  interface DeckgoSlideQrcode {
+    'afterSwipe': () => Promise<void>;
+    'beforeSwipe': (_swipeLeft: boolean) => Promise<boolean>;
+    'content': string;
+    'lazyLoadContent': () => Promise<void>;
+  }
+  interface DeckgoSlideQrcodeAttributes extends StencilHTMLAttributes {
+    'content'?: string;
+    'onSlideDidLoad'?: (event: CustomEvent<void>) => void;
+  }
+
   interface DeckgoSlideSplit {
     'afterSwipe': () => Promise<void>;
     'beforeSwipe': (_swipeLeft: boolean) => Promise<boolean>;
@@ -254,6 +265,7 @@ declare global {
     'DeckgoSlideCode': Components.DeckgoSlideCode;
     'DeckgoSlideContent': Components.DeckgoSlideContent;
     'DeckgoSlideGif': Components.DeckgoSlideGif;
+    'DeckgoSlideQrcode': Components.DeckgoSlideQrcode;
     'DeckgoSlideSplit': Components.DeckgoSlideSplit;
     'DeckgoSlideTitle': Components.DeckgoSlideTitle;
     'DeckgoSlideYoutube': Components.DeckgoSlideYoutube;
@@ -270,6 +282,7 @@ declare global {
     'deckgo-slide-code': Components.DeckgoSlideCodeAttributes;
     'deckgo-slide-content': Components.DeckgoSlideContentAttributes;
     'deckgo-slide-gif': Components.DeckgoSlideGifAttributes;
+    'deckgo-slide-qrcode': Components.DeckgoSlideQrcodeAttributes;
     'deckgo-slide-split': Components.DeckgoSlideSplitAttributes;
     'deckgo-slide-title': Components.DeckgoSlideTitleAttributes;
     'deckgo-slide-youtube': Components.DeckgoSlideYoutubeAttributes;
@@ -336,6 +349,12 @@ declare global {
     new (): HTMLDeckgoSlideGifElement;
   };
 
+  interface HTMLDeckgoSlideQrcodeElement extends Components.DeckgoSlideQrcode, HTMLStencilElement {}
+  var HTMLDeckgoSlideQrcodeElement: {
+    prototype: HTMLDeckgoSlideQrcodeElement;
+    new (): HTMLDeckgoSlideQrcodeElement;
+  };
+
   interface HTMLDeckgoSlideSplitElement extends Components.DeckgoSlideSplit, HTMLStencilElement {}
   var HTMLDeckgoSlideSplitElement: {
     prototype: HTMLDeckgoSlideSplitElement;
@@ -365,6 +384,7 @@ declare global {
     'deckgo-slide-code': HTMLDeckgoSlideCodeElement
     'deckgo-slide-content': HTMLDeckgoSlideContentElement
     'deckgo-slide-gif': HTMLDeckgoSlideGifElement
+    'deckgo-slide-qrcode': HTMLDeckgoSlideQrcodeElement
     'deckgo-slide-split': HTMLDeckgoSlideSplitElement
     'deckgo-slide-title': HTMLDeckgoSlideTitleElement
     'deckgo-slide-youtube': HTMLDeckgoSlideYoutubeElement
@@ -381,6 +401,7 @@ declare global {
     'deckgo-slide-code': HTMLDeckgoSlideCodeElement;
     'deckgo-slide-content': HTMLDeckgoSlideContentElement;
     'deckgo-slide-gif': HTMLDeckgoSlideGifElement;
+    'deckgo-slide-qrcode': HTMLDeckgoSlideQrcodeElement;
     'deckgo-slide-split': HTMLDeckgoSlideSplitElement;
     'deckgo-slide-title': HTMLDeckgoSlideTitleElement;
     'deckgo-slide-youtube': HTMLDeckgoSlideYoutubeElement;

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

@@ -0,0 +1,34 @@
+@import "../deckdeckgo-slide";
+
+div.deckgo-slide {
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+div.deckgo-slide-qrcode {
+  height: 100%;
+  width: 100%;
+
+  display: flex;
+  flex-flow: row wrap;
+
+  align-items: var(--slide-qrcode-align, center);
+  text-align: var(--slide-qrcode-text-align, center);
+
+  > * {
+    flex: 1 50%;
+  }
+
+  deckgo-qrcode {
+    background: var(--slide-qrcode-background);
+  }
+}
+
+::slotted([slot="title"]) {
+  display: var(--slide-qrcode-title-display, inherit);
+}
+
+::slotted([slot="content"]) {
+  flex: 1 50%;
+}

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

@@ -0,0 +1,99 @@
+import {Component, Element, Event, EventEmitter, Method, Prop} from '@stencil/core';
+
+import {DeckdeckgoSlide, DeckdeckgoSlideUtils} from '../deckdeckgo-slide';
+import {DeckdeckgoUtils} from '../../utils/deckdeckgo-utils';
+
+@Component({
+  tag: 'deckgo-slide-qrcode',
+  styleUrl: 'deckdeckgo-slide-qrcode.scss',
+  shadow: true
+})
+export class DeckdeckgoSlideQrcode implements DeckdeckgoSlide {
+
+  @Element() el: HTMLElement;
+
+  @Event() slideDidLoad: EventEmitter<void>;
+
+  @Prop() content: string;
+
+  async componentDidLoad() {
+    await DeckdeckgoUtils.hideLazyLoadImages(this.el);
+
+    this.initWindowResize();
+
+    await this.initQRCodeSize();
+
+    this.slideDidLoad.emit();
+  }
+
+  private initWindowResize() {
+    if (window) {
+      window.addEventListener('resize', DeckdeckgoUtils.debounce(this.onResizeContent));
+    }
+  }
+
+  private onResizeContent = async () => {
+    await this.initQRCodeSize();
+
+    const element: HTMLElement = this.el.shadowRoot.querySelector('deckgo-qrcode');
+
+    if (element) {
+      await (element as any).generate();
+    }
+  };
+
+  private initQRCodeSize(): Promise<void> {
+    return new Promise<void>((resolve) => {
+      const container: HTMLElement = this.el.shadowRoot.querySelector('div.deckgo-slide-qrcode');
+
+      if (container) {
+        const width: number = container.clientWidth;
+        const height: number = container.clientHeight;
+
+        const qrCode: HTMLElement = container.querySelector('deckgo-qrcode');
+
+        if (qrCode) {
+          qrCode.style.setProperty('--deckgo-qrcode-size', (width > height ? height : width) + 'px');
+        }
+      }
+
+      resolve();
+    });
+  }
+
+  @Method()
+  beforeSwipe(_swipeLeft: boolean): Promise<boolean> {
+    return new Promise<boolean>((resolve) => {
+      resolve(true)
+    });
+  }
+
+  @Method()
+  afterSwipe(): Promise<void> {
+    return DeckdeckgoSlideUtils.afterSwipe();
+  }
+
+  @Method()
+  lazyLoadContent(): Promise<void> {
+    return DeckdeckgoSlideUtils.lazyLoadContent(this.el);
+  }
+
+  render() {
+    return <div class="deckgo-slide">
+      <slot name="title"></slot>
+      <div class="deckgo-slide-qrcode">
+        <slot name="content"></slot>
+        <deckgo-qrcode content={this.content}></deckgo-qrcode>
+      </div>
+    </div>;
+  }
+
+  hostData() {
+    return {
+      class: {
+        'deckgo-slide-container': true
+      }
+    }
+  }
+
+}