fix(#743): QR code size calculation

Signed-off-by: peterpeterparker <[email protected]>
deckgo · May 29, 2020 · 31b912f · 31b912f
1 parent 0301719
commit 31b912f
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 37 deletions.
diff --git a/webcomponents/slides/qrcode/src/components/slide/deckdeckgo-slide-qrcode.tsx b/webcomponents/slides/qrcode/src/components/slide/deckdeckgo-slide-qrcode.tsx
@@ -6,7 +6,7 @@ import {DeckdeckgoSlideResize, hideLazyLoadImages, afterSwipe, lazyLoadContent}
 @Component({
   tag: 'deckgo-slide-qrcode',
   styleUrl: 'deckdeckgo-slide-qrcode.scss',
-  shadow: true
+  shadow: true,
 })
 export class DeckdeckgoSlideQrcode implements DeckdeckgoSlideResize {
   @Element() el: HTMLElement;
@@ -21,6 +21,9 @@ export class DeckdeckgoSlideQrcode implements DeckdeckgoSlideResize {
   @Prop({reflectToAttr: true}) imgSrc: string;
   @Prop({reflectToAttr: true}) imgAlt: string;
 
+  private container!: HTMLDivElement;
+  private qrCode!: HTMLElement;
+
   async componentDidLoad() {
     await hideLazyLoadImages(this.el);
 
@@ -53,23 +56,32 @@ export class DeckdeckgoSlideQrcode implements DeckdeckgoSlideResize {
     }
   };
 
-  private initQRCodeSize(): Promise<void> {
-    return new Promise<void>((resolve) => {
-      const container: HTMLElement = this.el.shadowRoot.querySelector('div.deckgo-slide-qrcode');
+  private async initQRCodeSize() {
+    if (!this.container || !this.qrCode) {
+      return;
+    }
 
-      if (container) {
-        const width: number = container.clientWidth;
-        const height: number = container.clientHeight;
+    const title: HTMLElement = this.el.querySelector(':scope > [slot="title"]');
 
-        const qrCode: HTMLElement = container.querySelector('deckgo-qrcode');
+    if (!title) {
+      return;
+    }
 
-        if (qrCode && width > 0 && height > 0) {
-          qrCode.style.setProperty('--deckgo-qrcode-size', width > height ? height + 'px' : 'calc(' + width + 'px - 32px)');
-        }
-      }
+    const style: CSSStyleDeclaration = window.getComputedStyle(this.container);
 
-      resolve();
-    });
+    if (!style) {
+      return;
+    }
+
+    const qrCodeSafeAreaSize: number = 64;
+    const spacing: number = title.clientHeight + qrCodeSafeAreaSize;
+
+    const size: number =
+      (this.container.clientWidth < this.container.clientHeight
+        ? this.container.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight)
+        : this.container.clientHeight - parseFloat(style.paddingTop) - parseFloat(style.paddingBottom)) - spacing;
+
+    this.qrCode.style.setProperty('--deckgo-qrcode-size', size + 'px');
   }
 
   @Method()
@@ -119,11 +131,13 @@ export class DeckdeckgoSlideQrcode implements DeckdeckgoSlideResize {
   render() {
     return (
       <Host class={{'deckgo-slide-container': true}}>
-        <div class="deckgo-slide">
+        <div class="deckgo-slide" ref={(el) => (this.container = el as HTMLDivElement)}>
           <slot name="title"></slot>
           <div class="deckgo-slide-qrcode">
             <slot name="content"></slot>
-            <deckgo-qrcode content={this.content}>{this.renderLogo()}</deckgo-qrcode>
+            <deckgo-qrcode content={this.content} ref={(el) => (this.qrCode = el as HTMLElement)}>
+              {this.renderLogo()}
+            </deckgo-qrcode>
           </div>
           <slot name="notes"></slot>
           <slot name="actions"></slot>

diff --git a/webcomponents/slides/qrcode/src/index.html b/webcomponents/slides/qrcode/src/index.html
@@ -1,29 +1,28 @@
 <!DOCTYPE html>
 <html dir="ltr" lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
 
-  <title>DeckDeckGo - Slide QR Code Template</title>
+    <title>DeckDeckGo - Slide QR Code Template</title>
 
-  <script type="module" src="/build/deckdeckgo-slide-qrcode.esm.js"></script>
-  <script nomodule src="/build/deckdeckgo-slide-qrcode.js"></script>
+    <script type="module" src="/build/deckdeckgo-slide-qrcode.esm.js"></script>
+    <script nomodule src="/build/deckdeckgo-slide-qrcode.js"></script>
 
-  <script type="module" src="https://unpkg.com/@deckdeckgo/core@latest/dist/deckdeckgo/deckdeckgo.esm.js"></script>
-  <script nomodule="" src="https://unpkg.com/@deckdeckgo/core@latest/dist/deckdeckgo/deckdeckgo.js"></script>
+    <script type="module" src="https://unpkg.com/@deckdeckgo/core@latest/dist/deckdeckgo/deckdeckgo.esm.js"></script>
+    <script nomodule="" src="https://unpkg.com/@deckdeckgo/core@latest/dist/deckdeckgo/deckdeckgo.js"></script>
 
-  <script type="module" src="https://unpkg.com/@deckdeckgo/qrcode@latest/dist/deckdeckgo-qrcode/deckdeckgo-qrcode.esm.js"></script>
-  <script nomodule="" src="https://unpkg.com/@deckdeckgo/qrcode@latest/dist/deckdeckgo-qrcode/deckdeckgo-qrcode.js"></script>
+    <script type="module" src="https://unpkg.com/@deckdeckgo/qrcode@latest/dist/deckdeckgo-qrcode/deckdeckgo-qrcode.esm.js"></script>
+    <script nomodule="" src="https://unpkg.com/@deckdeckgo/qrcode@latest/dist/deckdeckgo-qrcode/deckdeckgo-qrcode.js"></script>
 
-</head>
-<body style="margin: 0; overflow: hidden;">
-
-<deckgo-deck>
-  <deckgo-slide-qrcode content="https://deckdeckgo.com" style="--deckgo-qrcode-color-fill: black;">
-    <h1 slot="title">QR Code</h1>
-    <p slot="content">Display a QR code to let your audience get your slides as a PWA without any delay</p>
-  </deckgo-slide-qrcode>
-</deckgo-deck>
-
-</body>
+    <link rel="stylesheet" href="https://unpkg.com/@deckdeckgo/[email protected]/css/deck.min.css" />
+  </head>
+  <body style="margin: 0; overflow: hidden;">
+    <deckgo-deck>
+      <deckgo-slide-qrcode content="https://deckdeckgo.com" style="--deckgo-qrcode-color-fill: black;">
+        <h1 slot="title">QR Code</h1>
+        <p slot="content">Display a QR code to let your audience get your slides as a PWA without any delay</p>
+      </deckgo-slide-qrcode>
+    </deckgo-deck>
+  </body>
 </html>