load jquery.qrcode via npm and rework integration into stud.ip

Closes #993

Merge request studip/studip!571

10 files changed, 29 insertions, 56 deletions

diff --git a/app/controllers/resources/resource.php b/app/controllers/resources/resource.php
index f152f8e..d5bb7ac 100644
--- a/app/controllers/resources/resource.php
+++ b/app/controllers/resources/resource.php
@@ -565,7 +565,7 @@ class Resources_ResourceController extends AuthenticatedController
             $actions->addLink(
                 _('QR-Code anzeigen'),
                 $this->resource->getActionURL('booking_plan'),
-                Icon::create('download'),
+                Icon::create('code-qr'),
                 [
                     'data-qr-code' => '',
                     'data-qr-code-print' => '1'
diff --git a/app/controllers/resources/room_planning.php b/app/controllers/resources/room_planning.php
index 23056bc..c4bf84a 100644
--- a/app/controllers/resources/room_planning.php
+++ b/app/controllers/resources/room_planning.php
@@ -355,7 +355,7 @@ class Resources_RoomPlanningController extends AuthenticatedController
             $actions->addLink(
                 _('QR-Code anzeigen'),
                 $this->resource->getActionURL('booking_plan'),
-                Icon::create('download'),
+                Icon::create('code-qr'),
                 [
                     'data-qr-code'       => '',
                     'data-qr-code-print' => '1',
diff --git a/package-lock.json b/package-lock.json
index 1e6fdfe..1c76887 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -49,6 +49,7 @@
                 "jquery-ui": "1.13",
                 "jquery-ui-timepicker-addon": "1.6.3",
                 "jquery-ui-touch-punch": "0.2.3",
+                "jquery.qrcode": "^1.0.3",
                 "jquery.scrollto": "2.1.2",
                 "jspdf-yworks": "^2.1.1",
                 "jszip": "^3.6.0",
@@ -7652,6 +7653,12 @@
             "integrity": "sha1-7tgiQnM7okP0az6HwYQbMIGR2mg=",
             "dev": true
         },
+        "node_modules/jquery.qrcode": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/jquery.qrcode/-/jquery.qrcode-1.0.3.tgz",
+            "integrity": "sha1-mK003rf0AdcpgcZ2l5DL04qqOfA=",
+            "dev": true
+        },
         "node_modules/jquery.scrollto": {
             "version": "2.1.2",
             "resolved": "https://registry.npmjs.org/jquery.scrollto/-/jquery.scrollto-2.1.2.tgz",
@@ -20852,6 +20859,12 @@
             "integrity": "sha1-7tgiQnM7okP0az6HwYQbMIGR2mg=",
             "dev": true
         },
+        "jquery.qrcode": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/jquery.qrcode/-/jquery.qrcode-1.0.3.tgz",
+            "integrity": "sha1-mK003rf0AdcpgcZ2l5DL04qqOfA=",
+            "dev": true
+        },
         "jquery.scrollto": {
             "version": "2.1.2",
             "resolved": "https://registry.npmjs.org/jquery.scrollto/-/jquery.scrollto-2.1.2.tgz",
diff --git a/package.json b/package.json
index 1048376..ab28535 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
         "jquery-ui": "1.13",
         "jquery-ui-timepicker-addon": "1.6.3",
         "jquery-ui-touch-punch": "0.2.3",
+        "jquery.qrcode": "^1.0.3",
         "jquery.scrollto": "2.1.2",
         "jspdf-yworks": "^2.1.1",
         "jszip": "^3.6.0",
diff --git a/resources/assets/javascripts/bootstrap/qr_code.js b/resources/assets/javascripts/bootstrap/qr_code.js
index cddc153..3a627f7 100644
--- a/resources/assets/javascripts/bootstrap/qr_code.js
+++ b/resources/assets/javascripts/bootstrap/qr_code.js
@@ -1,4 +1,4 @@
-jQuery(document).on('click', 'a[data-qr-code]', function (event) {
+$(document).on('click', 'a[data-qr-code]', function (event) {
     const data = $(this).data();
     STUDIP.QRCode.show(this.href, {
         print: data.qrCodePrint ?? false,
@@ -8,43 +8,3 @@ jQuery(document).on('click', 'a[data-qr-code]', function (event) {
 
     event.preventDefault();
 });
-
-STUDIP.ready((event) => {
-    $('code.qr', event.target).each(function () {
-        let content = $(this).text().trim();
-        let code    = $('<div class="qrcode">').hide();
-        STUDIP.QRCode.generate(code[0], content, {
-            width: 1024,
-            height: 1024
-        });
-        $(this).replaceWith(code);
-        setTimeout(() => code.show(), 0);
-    });
-    jQuery(document).on(
-        'click',
-        '#qr_code .PrintAction',
-        function() {
-            //We must hide the other page elements for the print view functionality.
-            //Furthermore we must set the width and height of the qr-code.
-            jQuery('#layout_wrapper').css(
-                {
-                    display: 'none'
-                }
-            );
-            jQuery('#qr_code').addClass('print-view');
-
-            //Now we can print:
-            window.print();
-        }
-    );
-
-    jQuery(document).on(
-        'fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange',
-        function(event) {
-            //After the print action is called
-            //we must reset the style changes made above:
-            jQuery('#layout_wrapper').removeAttr('style');
-        }
-    );
-});
-
diff --git a/resources/assets/javascripts/jquery-bundle.js b/resources/assets/javascripts/jquery-bundle.js
index 51e3b55..e3724de 100644
--- a/resources/assets/javascripts/jquery-bundle.js
+++ b/resources/assets/javascripts/jquery-bundle.js
@@ -61,6 +61,7 @@ import 'jquery-ui-timepicker-addon';
 import 'multiselect';
 
 import 'jquery.scrollto';
+import 'jquery.qrcode';
 
 import 'jquery-ui-touch-punch';
 
diff --git a/resources/assets/javascripts/lib/qr_code.js b/resources/assets/javascripts/lib/qr_code.js
index 914db9b..3db4fd8 100644
--- a/resources/assets/javascripts/lib/qr_code.js
+++ b/resources/assets/javascripts/lib/qr_code.js
@@ -1,4 +1,3 @@
-import QRCodeGenerator from "../vendor/qrcode-04f46c6.js"
 import { $gettext } from "./gettext.js";
 import Dialog from "./dialog.js";
 
@@ -28,7 +27,7 @@ const QRCode = {
         }
 
         // Actually generate code
-        new QRCodeGenerator(code[0], {
+        code.qrcode({
             text: text,
             width: 1280,
             height: 1280,
@@ -69,6 +68,12 @@ const QRCode = {
                     click () {
                         var openWindow = window.open("", '_blank');
                         openWindow.document.write(`<body style="text-align: center;">${content.html()}</body>`);
+                        // Copy qrcode canvas itself (as it is not included in .html()
+                        openWindow.document.querySelector('canvas').getContext('2d').drawImage(
+                            $('canvas', code)[0],
+                            0,
+                            0
+                        );
                         openWindow.document.close();
                         openWindow.focus();
                         openWindow.print();
@@ -78,20 +83,11 @@ const QRCode = {
             }, buttons);
         }
 
-
         Dialog.show(content, {
             title: options.title ?? $gettext('QR-Code'),
             size: 'big',
             buttons
         });
-    },
-    generate: function (element, text, options = {}) {
-        options.text = text;
-        if (options.correctLevel === undefined) {
-            options.correctLevel = 3;
-        }
-
-        var qrcode = new QRCodeGenerator(element, options);
     }
 };
 
diff --git a/resources/assets/stylesheets/less/qrcode.less b/resources/assets/stylesheets/scss/qrcode.scss
index 4f9773d..c6a8747 100644
--- a/resources/assets/stylesheets/less/qrcode.less
+++ b/resources/assets/stylesheets/scss/qrcode.scss
@@ -14,8 +14,9 @@
         flex: 0 1 auto;
         max-height: 90%; // TODO This will not scale well if description grows
         width: 100%;
+        text-align: center;
 
-        img {
+        canvas {
             margin: auto;
             max-height: 100%;
             object-fit: contain;
@@ -26,6 +27,7 @@
     .description {
         flex: 0 0 auto;
         margin-top: 1em;
+        text-align: center;
     }
 
     &:fullscreen {
diff --git a/resources/assets/stylesheets/studip.less b/resources/assets/stylesheets/studip.less
index 99fe302..07550d4 100644
--- a/resources/assets/stylesheets/studip.less
+++ b/resources/assets/stylesheets/studip.less
@@ -41,7 +41,6 @@
 @import "less/skiplinks.less";
 @import "less/tabs.less";
 @import "less/questionnaire.less";
-@import "less/qrcode.less";
 @import "less/copyable-links.less";
 
 @import "less/admin.less";
diff --git a/resources/assets/stylesheets/studip.scss b/resources/assets/stylesheets/studip.scss
index 3241caa..ed867ef 100644
--- a/resources/assets/stylesheets/studip.scss
+++ b/resources/assets/stylesheets/studip.scss
@@ -23,6 +23,7 @@
 @import "scss/progress_indicator.scss";
 @import "scss/my_courses";
 @import "scss/oer";
+@import "scss/qrcode";
 @import "scss/report";
 @import "scss/resources";
 @import "scss/sidebar";