Merge pull request #746 from deckgo/slide-qr-code-size

fix(#743): slide qr code size calculation

CHANGELOG.md

@@ -1,3 +1,16 @@
+<a name="1.4.0"></a>
+
+# [1.4.0](https://github.com/deckgo/deckdeckgo/compare/v1.3.0...v1.4.0) (In progress)
+
+### Applications
+
+- docs: v1.4.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/docs/CHANGELOG.md))
+- remote: v1.2.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/remote/CHANGELOG.md))
+
+### Web Components: Templates
+
+- slide-qrcode: v1.0.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/slides/qrcode/CHANGELOG.md))
+
 <a name="1.3.0"></a>
 
 # [1.3.0](https://github.com/deckgo/deckdeckgo/compare/v1.2.0...v1.3.0) (2020-05-28)

docs/CHANGELOG.md

@@ -1,3 +1,9 @@
+# 1.4.1 (2020-05-29)
+
+### Fix
+
+- QR code slide size calculation
+
 # 1.4.0 (2020-05-21)
 
 ### Features

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deckdeckgo-docs",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "The Progressive Web App alternative for simple presentations",
   "license": "MIT",
   "files": [
@@ -34,7 +34,7 @@
     "@deckdeckgo/slide-countdown": "^1.0.1",
     "@deckdeckgo/slide-gif": "^1.0.1",
     "@deckdeckgo/slide-poll": "^1.0.1",
-    "@deckdeckgo/slide-qrcode": "^1.0.1",
+    "@deckdeckgo/slide-qrcode": "^1.0.2",
     "@deckdeckgo/slide-split": "^1.1.4",
     "@deckdeckgo/slide-title": "^1.0.1",
     "@deckdeckgo/slide-video": "^1.0.1",

remote/CHANGELOG.md

@@ -1,4 +1,10 @@
-# 1.2.0 (2020-05-28)
+# 1.2.2 (2020-05-29)
+
+### Fix
+
+- QR code slide size calculation
+
+# 1.2.0 and 1.2.1 (2020-05-28)
 
 ### Features
 

remote/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deckdeckgo-remote",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "author": "David Dal Busco",
   "description": "Present and interact with your lightweight DeckDeckGo's presentation",
   "license": "AGPL-3.0-or-later",
@@ -34,7 +34,7 @@
     "@deckdeckgo/slide-countdown": "^1.0.1",
     "@deckdeckgo/slide-gif": "^1.0.1",
     "@deckdeckgo/slide-poll": "^1.0.1",
-    "@deckdeckgo/slide-qrcode": "^1.0.1",
+    "@deckdeckgo/slide-qrcode": "^1.0.2",
     "@deckdeckgo/slide-split": "^1.1.4",
     "@deckdeckgo/slide-title": "^1.0.1",
     "@deckdeckgo/slide-video": "^1.0.1",

studio/package.json

@@ -34,7 +34,7 @@
     "@deckdeckgo/slide-content": "^1.0.1",
     "@deckdeckgo/slide-gif": "^1.0.1",
     "@deckdeckgo/slide-poll": "^1.0.1",
-    "@deckdeckgo/slide-qrcode": "^1.0.1",
+    "@deckdeckgo/slide-qrcode": "^1.0.2",
     "@deckdeckgo/slide-split": "^1.1.4",
     "@deckdeckgo/slide-title": "^1.0.1",
     "@deckdeckgo/slide-utils": "^1.1.0",

webcomponents/slides/qrcode/CHANGELOG.md

@@ -1,6 +1,12 @@
+# 1.0.2 (2020-05-29)
+
+### Fix
+
+- QR code size calculation ([#743](https://github.com/deckgo/deckdeckgo/issues/743))
+
 # 1.0.1 (2020-05-11)
 
-### Feat
+### Features
 
 - update Stencil for Gatsby build
 

webcomponents/slides/qrcode/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deckdeckgo/slide-qrcode",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "The QR Code template is handy to display a QR Code in presentations which could, for example, point to your deck available as a PWA",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

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>

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>