@plattar/plattar-qrcode 1.119.2 → 1.122.1

package/elements/base/base-element.js

@@ -13,7 +13,9 @@ class BaseElement extends HTMLElement {
         const observer = new MutationObserver((mutations) => {
             mutations.forEach((mutation) => {
                 if (mutation.type === "attributes") {
-                    this.renderQRCode();
+                    if (this.hasAttribute("url")) {
+                        this.renderQRCode();
+                    }
                 }
             });
         });
@@ -38,7 +40,8 @@ class BaseElement extends HTMLElement {
         const url = this.hasAttribute("url") ? this.getAttribute("url") : undefined;
 
         if (!url) {
-            throw new Error("BaseElement.renderQRCode() - required attribute \"url\" is missing or invalid");
+            console.warn("PlattarQR.renderQRCode() - required attribute \"url\" is missing or invalid, QR Code will not render");
+            return;
         }
 
         const width = this.hasAttribute("width") ? parseInt(this.getAttribute("width")) : 512;
@@ -117,12 +120,12 @@ class BaseElement extends HTMLElement {
                     color2: "#ffffff",
                     rotation: "0"
                 }
-            }
+            },
+            width: 1024,
+            height: 1024,
+            type: "canvas"
         };
 
-        this._options.width = 2048;
-        this._options.height = 2048;
-        this._options.data = url;
         this._options.margin = margin;
         this._options.image = image;
 
@@ -140,6 +143,45 @@ class BaseElement extends HTMLElement {
                 this._options.dotsOptions.type = "rounded";
         }
 
+        const shortenURL = this.hasAttribute("shorten") ? this.getAttribute("shorten") : "false";
+
+        if (shortenURL && shortenURL.toLowerCase() === "true") {
+            this._ShortenURL(url).then((newURL) => {
+                this._GenerateQRCode(newURL, width, height);
+            }).catch((_err) => {
+                console.warn(_err);
+                // ignore error and just generate normal QR Code
+                this._GenerateQRCode(url, width, height);
+            });
+        }
+        else {
+            this._GenerateQRCode(url, width, height);
+        }
+    }
+
+    _UpdateCanvas(width, height) {
+        if (!this._qrCode) {
+            return;
+        }
+
+        const canvas = this._qrCode._canvas;
+
+        if (canvas) {
+            canvas.style.width = "100%";
+            canvas.style.height = "100%";
+        }
+
+        if (this._divContainer) {
+            const div = this._divContainer;
+
+            div.style.width = width + "px";
+            div.style.height = height + "px";
+        }
+    }
+
+    _GenerateQRCode(url, width, height) {
+        this._options.data = url;
+
         const shadow = this.shadowRoot || this.attachShadow({ mode: 'open' });
 
         const qrCode = this._qrCode;
@@ -162,24 +204,36 @@ class BaseElement extends HTMLElement {
         this._UpdateCanvas(width, height);
     }
 
-    _UpdateCanvas(width, height) {
-        if (!this._qrCode) {
-            return;
-        }
-
-        const canvas = this._qrCode._canvas;
-
-        if (canvas) {
-            canvas.style.width = "100%";
-            canvas.style.height = "100%";
-        }
+    _IsFetchAPISupported() {
+        return 'fetch' in window;
+    }
 
-        if (this._divContainer) {
-            const div = this._divContainer;
+    _ShortenURL(url) {
+        return new Promise((accept, reject) => {
+            if (!this._IsFetchAPISupported()) {
+                return reject(new Error("PlattarQR._ShortenURL() - fetch api not supported, cannot proceed"));
+            }
 
-            div.style.width = width + "px";
-            div.style.height = height + "px";
-        }
+            try {
+                const b64 = btoa(url);
+                const endpoint = "https://c.plattar.space/api/v2/shorten?base64=" + b64;
+
+                fetch(endpoint).then((response) => {
+                    if (!response.ok) {
+                        throw new Error("PlattarQR._ShortenURL() - response was invalid");
+                    }
+
+                    return response.text();
+                }).then((text) => {
+                    return accept(text);
+                }).catch(() => {
+                    return reject(new Error("PlattarQR._ShortenURL() - there was an unexpected issue generating short url"));
+                });
+            }
+            catch (err) {
+                return reject(err);
+            }
+        });
     }
 }
 

package/index.js

@@ -2,9 +2,13 @@
 const QRCodeElement = require("./elements/qrcode-element.js");
 const Version = require("./version");
 
-console.log("using @plattar/plattar-qrcode v" + Version);
+if (customElements) {
+    if (customElements.get("plattar-qrcode") === undefined) {
+        customElements.define("plattar-qrcode", QRCodeElement);
+    }
+}
 
-customElements.define("plattar-qrcode", QRCodeElement);
+console.log("using @plattar/plattar-qrcode v" + Version);
 
 module.exports = {
     version: Version

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@plattar/plattar-qrcode",
-  "version": "1.119.2",
+  "version": "1.122.1",
   "description": "Allows embedding Plattar-Style QR Codes for existing websites.",
   "main": "index.js",
   "module": "index.js",
   "types": "index.d.ts",
   "scripts": {
-    "clean": "rm -rf build node_modules",
+    "clean": "rm -rf build node_modules package-lock.json",
     "build": "npm run clean && npm install && npm run build-es2019 && npm run build-es2015",
     "build-es2019": "rm -rf build/es2019 && mkdir -p build/es2019 && browserify --standalone PlattarQRCode index.js -o build/es2019/plattar-qrcode.js && uglifyjs build/es2019/plattar-qrcode.js --output build/es2019/plattar-qrcode.min.js",
     "build-es2015": "rm -rf build/es2015 && mkdir -p build/es2015 && babel build/es2019/plattar-qrcode.js --presets=@babel/env > build/es2015/plattar-qrcode.js && uglifyjs build/es2015/plattar-qrcode.js --output build/es2015/plattar-qrcode.min.js",
@@ -42,9 +42,9 @@
     "qr-code-styling": "^1.6.0-rc.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.16.0",
-    "@babel/core": "^7.16.0",
-    "@babel/preset-env": "^7.16.4",
+    "@babel/cli": "^7.17.0",
+    "@babel/core": "^7.17.0",
+    "@babel/preset-env": "^7.16.11",
     "browserify": "^17.0.0",
     "uglify-es": "^3.3.9"
   },

package/version.js

@@ -1 +1 @@
-module.exports = "1.119.2";
+module.exports = "1.122.1";