implement displaying qr codes for crypto donations

_includes/head.html

@@ -12,4 +12,6 @@
   {%- if jekyll.environment == 'production' and site.google_analytics -%}
     {%- include google-analytics.html -%}
   {%- endif -%}
+
+  <script src="{{ "/assets/main.js" | relative_url }}"></script>
 </head>

_includes/header.html

@@ -1,12 +1,14 @@
 <header id="title-header" role="banner">
   <div class="row row-vertically-centered">
-    <div class="eight columns">
+    <div class="five columns">
       <h1 class="title">
         <a href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>
       </h1>
     </div>
 
-    <div class="four columns light">
+    <div id="crypto-display" class="four columns"></div>
+
+    <div class="three columns light">
       <div class="social">
         <span class="spaced">RSS/Social:</span>
         <a class="spaced" href="{{ 'feed.xml' | relative_url }}">
@@ -22,15 +24,15 @@
       <div class="donation">
         <span>If you like what I do, consider donating!</span><br/>
         <span>
-          <a href="https://cash.me/$mediocregopher">USD</a>
+          <a href="https://cash.me/$mediocregopher" target="_blank">USD</a>
           •
-          <a href="bitcoin:1KSqgPBQ7VWc5yxUT2DsB3VpsvRyahL2k8">BTC</a>
+          <a class="crypto" href="bitcoin:18kqNYjUZ4zNEp4VjE3pKPLBitUy6U76rk">BTC</a>
           •
-          LTC
+          <a class="crypto" href="litecoin:LZgyna6Nw4phzWv24QP4xgUi7hC9DDHV7o">LTC</a>
           •
-          ETH
+          <a class="crypto" href="ethereum:0xB8e1608059174760f4652178303f7c7a59121922">ETH</a>
           •
-          ZEC
+          <a class="crypto" href="zcash:zcMmjd2gNetan9QciRExVdTb64ZEYPjk8w6NiEXnLRcDbVQQxZ9xvKH3Ab3y7uccCrN5HRvR5YVvq684gC1drvnYadp3Yz2">ZEC</a>
         </span>
       </div>
     </div>

assets/main.css

@@ -43,6 +43,40 @@ ul {
     margin-right: 0.5em;
 }
 
+#crypto-display {
+    margin-right: 2rem;
+}
+
+/* the qr library uses a canvas to generate the qr code then base64's it into a
+ * separate img tag. For an instant the original canvas shows though, creating
+ * an annoying visual, so this ensures that that doesn't happen. */
+#crypto-display-qr canvas {
+    display: none;
+}
+
+#crypto-display-qr img {
+    width: 100%;
+}
+
+#crypto-display-addr {
+    word-wrap: break-word;
+    margin-top: 1em;
+}
+
+#crypto-display-x {
+    text-align: center;
+    margin-top: 1em;
+}
+
+#crypto-display-x span:hover {
+    cursor: pointer;
+    font-weight: bold;
+}
+
+#crypto-display-x span {
+    cursor: pointer;
+}
+
 #posts-list {
     margin-top: 3rem;
     list-style: none;

assets/main.js

@@ -0,0 +1,69 @@
+console.log("main.js started");
+
+// For asynchronously loading the qr code library, loadQRLib returns a promise
+// which will be resolved when the library is loaded.
+var qrLibProm;
+var loadQRLib = () => {
+    if (qrLibProm) { return qrLibProm; }
+    qrLibProm = new Promise((resolve, reject) => {
+        console.log("loading qrcode.min.js");
+        var script = document.createElement('script');
+        script.src = "/assets/qrcode.min.js";
+        script.async = true;
+        script.onload = () => { resolve(); };
+        document.querySelectorAll('head')[0].appendChild(script);
+    });
+    return qrLibProm;
+};
+
+document.addEventListener("DOMContentLoaded", () => {
+    console.log("DOM loaded");
+
+    var cryptoDisplay = document.querySelector('#crypto-display');
+    var clearCryptoDisplay = () => {
+        while(cryptoDisplay.firstChild) {
+            cryptoDisplay.removeChild(cryptoDisplay.firstChild);
+        }
+    };
+
+    console.log("setting up crypto buttons");
+    document.querySelectorAll('.crypto').forEach((el) => {
+        var href = el.href;
+        el.href="#";
+        el.onclick = () => {
+            var parts = href.split(":");
+            if (parts.length != 2) {
+                console.error(el, "href not properly formatted");
+                return;
+            }
+            var currency = parts[0];
+            var address = parts[1];
+
+            clearCryptoDisplay();
+
+            var cryptoDisplayQR = document.createElement('div');
+            cryptoDisplayQR.id = "crypto-display-qr";
+
+            var cryptoDisplayAddr = document.createElement('div');
+            cryptoDisplayAddr.id = "crypto-display-addr";
+            cryptoDisplayAddr.innerHTML = '<span>'+currency + " address: " + address + '</span>';
+
+            var cryptoDisplayX = document.createElement('div');
+            cryptoDisplayX.id = "crypto-display-x";
+            cryptoDisplayX.onclick = clearCryptoDisplay;
+            cryptoDisplayX.innerHTML = '<span>X</span>';
+
+            cryptoDisplay.appendChild(cryptoDisplayQR);
+            cryptoDisplay.appendChild(cryptoDisplayAddr);
+            cryptoDisplay.appendChild(cryptoDisplayX);
+
+            loadQRLib().then(() => {
+                new QRCode(cryptoDisplayQR, {
+                    text: currency,
+                    width: 512,
+                    height: 512,
+                });
+            });
+        };
+    });
+})