feature: use qr-code-styling to generate qr codes (#18)

.github/workflows/release.yml

@@ -14,6 +14,8 @@ name: Create and publish a Docker image
 on:
   release:
     types: [published]
+  push:
+    branches: ["kits-qr-code-update"]
 
 env:
   REGISTRY: ghcr.io

src/static/js/qrcode_download.js

@@ -1,22 +1,75 @@
-function download(){
-    var link = document.createElement('a'); //Creates an 'a' element
-    var thisImg = document.getElementById('qrcode').getElementsByTagName('img')[0]; //gets the first canvas element on the page, assuming the canvas you want to download is this element. 
-    link.download = 'qrcode.png'; //Gives the download an output link
-    link.href = thisImg.src //Gives the data to the link
-    link.click(); //Clicks the 'a' element we created
+function initialize_qrcode() {
+    document.getElementById("embedreadonly").addEventListener('change', (changeEvent) => { 
+      generate_qrcode();
+      return true;
+    });
+
+    generate_qrcode()
 }
 
-function update_qrcode() {
-    delete_qrcode();
-    generate_qrcode();
+function generate_qrcode() {
+    const url = document.getElementById("linkinput").value;
+    const qrCodeDiv = document.getElementById('qrcode')
+    const width = 200;
+    const height = 200;
+
+    // clear old code:
+    qrCodeDiv.innerHTML = '';
+
+    createQrCode(qrCodeDiv, url, width, height)
+} 
+
+function qrCodeOptions(url, width, height) {
+     return {
+        width: width,
+        height: height,
+        type: "svg",
+        data: url,
+        image: "",
+        dotsOptions: {
+            color: '#000000',
+            type: 'dots',
+        },
+        cornersSquareOptions: {
+            type: 'square'
+        },
+        cornersDotOptions: {
+            type: 'dot'
+        },
+        backgroundOptions: {
+            color: "#fff",
+        },
+        imageOptions: {
+            crossOrigin: "anonymous",
+            margin: 0,
+        },    
+    }
+  }
+
+function createQrCode(qrCodeDiv, url, width, height) {
+    const canvas = document.createElement('div');
+    qrCodeDiv.appendChild(canvas)
+
+    let qrCode = new QRCodeStyling(qrCodeOptions(url, width, height));
+    qrCode.append(canvas);
+    const downloadButton = addDownloadButton(qrCode);
+
+    qrCodeDiv.appendChild(downloadButton)
+
+    return qrCode   
 }
 
-function delete_qrcode() {
-    document.getElementById('qrcode').getElementsByTagName('img')[0].remove();
-    document.getElementById('qrcode').getElementsByTagName('canvas')[0].remove();
+function addDownloadButton(qrCode) {
+  const downloadButton = document.createElement('button');
+  downloadButton.id = 'qr-code-download';
+  downloadButton.textContent = 'Download';
+
+  downloadButton.addEventListener('click', function(clickEvent) {
+        qrCode.download({ name: "qr", extension: 'png' });
+        clickEvent.preventDefault();
+        clickEvent.stopPropagation();
+        return false;
+  })
+  return downloadButton;
 }
 
-function generate_qrcode() {
-    let qrlink = document.getElementById("linkinput").value;
-    new QRCode(document.getElementById("qrcode"), qrlink);
-} 

src/static/js/vendors/qr-code-styling/LICENSE

@@ -0,0 +1,24 @@
+This is the license file for QR Code Styling:
+https://github.com/kozakdenys/qr-code-styling/blob/master/LICENSE
+
+MIT License
+
+Copyright (c) 2019 Denys Kozak
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

src/static/skins/kits/pad.css

@@ -44,4 +44,8 @@ body {
   --scrollbar-bg: var(--light-color);
   --scrollbar-track: var(--super-light-color);
   --scrollbar-thumb: var(--dark-color);
+}
+
+#qr-code-download {
+  padding: 10px 0px;
 }

src/templates/pad.html

@@ -30,7 +30,7 @@
     */
   </script>
   <script src="../static/js/basic_error_handler.js?v=<%=settings.randomVersionString%>"></script>
-  <script type="text/javascript" src="../static/js/qrcode.js"></script>
+  <script type="text/javascript" src="../static/js/vendors/qr-code-styling/qrcode-styling.js"></script>
   <script type="text/javascript" src="../static/js/qrcode_download.js"></script>
 
   <meta charset="utf-8">
@@ -290,7 +290,7 @@ <h2 data-l10n-id="pad.modals.disconnected.explanation"></h2>
           <% e.begin_block("embedPopup"); %>
           <h1 data-l10n-id="pad.share"></h1>
           <div id="embedreadonly" class="acl-write">
-              <input type="checkbox" id="readonlyinput" onchange="update_qrcode()">
+              <input type="checkbox" id="readonlyinput">
               <label for="readonlyinput" data-l10n-id="pad.share.readonly"></label>
           </div>
           <div id="linkcode">
@@ -301,14 +301,13 @@ <h2 data-l10n-id="pad.share.link"></h2>
               <h2 data-l10n-id="pad.share.emebdcode"></h2>
               <input id="embedinput" type="text" value="" onclick="this.select()">
           </div>
-          <div id="qrcode">
-              <h2>Dein QR-Code</h2>
+          <div>
+              <h2>QR-Code</h2>
+              <div id="qrcode">
+              </div>
           </div>
-            <script type="text/javascript">
-              let qrlinky = window.location.href
-              new QRCode(document.getElementById("qrcode"), qrlinky);
-            </script>
-            <button onmousedown="download()">QR-Code herunterladen</button>
+
+
           <% e.end_block(); %>
       </div></div>
 
@@ -480,6 +479,10 @@ <h1>Skin Builder</h1>
         padimpexp = require('ep_etherpad-lite/static/js/pad_impexp').padimpexp;
         require('ep_etherpad-lite/static/js/skin_variants');
 
+        // load qrcode - we need to set the embed links first:
+        padeditbar.setEmbedLinks()
+        initialize_qrcode()
+
       }());
       // @license-end
   </script>