From 207d0f538ee97674695122671d7fd092a4ef792c Mon Sep 17 00:00:00 2001
From: Nicholas Jitkoff <nicholas@jitkoff.com>
Date: Sat, 11 Feb 2023 14:48:44 -0700
Subject: [PATCH] Add QR generation

---
 docs/bitty-menu.js | 23 ++++++++++++++++++++++-
 docs/bitty.js      |  1 +
 docs/index.css     |  8 ++++++++
 3 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/docs/bitty-menu.js b/docs/bitty-menu.js
index 49e43d4..8d593db 100644
--- a/docs/bitty-menu.js
+++ b/docs/bitty-menu.js
@@ -1,3 +1,4 @@
+import * as bitty from '/bitty.js';
 class Menu {
   /**
    * @constructor
@@ -17,7 +18,27 @@ class Menu {
   }  
 
   makeQR() {
-
+    
+    bitty.loadScript('/js/qrious.min.js', null, "").then(() => {
+      console.log("qrious loaded", location.href);
+      let qrDialog = el("dialog#qr-dialog.dialog",
+        el("canvas", {id: "qr"}),
+        el("div", document.title)
+        );
+        qrDialog.onclick = () => {
+          qrDialog.close();
+          qrDialog.parentNode.removeChild(qrDialog)
+        }
+      document.body.append(qrDialog);
+      qrDialog.showModal();
+      var qr = new QRious({
+        element: document.getElementById("qr"),
+        background: 'transparent',
+        foreground: 'currentColor',
+        size: 500,
+        value: location.href,
+      });
+    })
   }  
   sendEmail() {
     console.log("url", location.href)
diff --git a/docs/bitty.js b/docs/bitty.js
index 158db60..34ff9fb 100644
--- a/docs/bitty.js
+++ b/docs/bitty.js
@@ -623,6 +623,7 @@ export {
   pathToMetadata,
   parseBittyURL,
   el,
+  loadScript,
   BASE64_MARKER,
   LZMA64_MARKER,
   BASE_MARKER,
diff --git a/docs/index.css b/docs/index.css
index 31d2abf..9e17468 100644
--- a/docs/index.css
+++ b/docs/index.css
@@ -279,6 +279,7 @@ body:not(.loading) #loader {
     box-shadow: 0 0 0 2px black, inset 0 0 0 3px black;
     min-width: 300px;
     padding: 1.2em;
+    display:flex;
 }
 .dialog, .dialog button {font-size: 18px;font-weight: 600;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
 
@@ -287,6 +288,13 @@ dialog::backdrop {
   /* repeating-conic-gradient(rgba(255,255,255,.5) 0% 25%, transparent 0% 50%) 50% / 4px 4px; */
 }
 
+dialog#qr-dialog {
+  display: flex;
+  flex-direction: column;
+}
+dialog#qr-dialog div {
+  text-align: center;
+}
 
 .dialog button {
   border: 1px solid white;