From 024421a96574dbb6c2a6ffc8fbd7d469140e6643 Mon Sep 17 00:00:00 2001 From: Jan-Hendrik Willms Date: Fri, 13 May 2022 13:21:13 +0000 Subject: load jquery.qrcode via npm and rework integration into stud.ip Closes #993 Merge request studip/studip!571 --- app/controllers/resources/resource.php | 2 +- app/controllers/resources/room_planning.php | 2 +- package-lock.json | 13 ++++++ package.json | 1 + resources/assets/javascripts/bootstrap/qr_code.js | 42 +------------------ resources/assets/javascripts/jquery-bundle.js | 1 + resources/assets/javascripts/lib/qr_code.js | 18 ++++---- resources/assets/stylesheets/less/qrcode.less | 49 ---------------------- resources/assets/stylesheets/scss/qrcode.scss | 51 +++++++++++++++++++++++ resources/assets/stylesheets/studip.less | 1 - resources/assets/stylesheets/studip.scss | 1 + 11 files changed, 77 insertions(+), 104 deletions(-) delete mode 100644 resources/assets/stylesheets/less/qrcode.less create mode 100644 resources/assets/stylesheets/scss/qrcode.scss 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 = $('
').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(`${content.html()}`); + // 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/less/qrcode.less deleted file mode 100644 index 4f9773d..0000000 --- a/resources/assets/stylesheets/less/qrcode.less +++ /dev/null @@ -1,49 +0,0 @@ -.qr-code-display { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100%; - width: 100%; - - h1 { - display: none; - } - - .code { - flex: 0 1 auto; - max-height: 90%; // TODO This will not scale well if description grows - width: 100%; - - img { - margin: auto; - max-height: 100%; - object-fit: contain; - } - } - - .url, - .description { - flex: 0 0 auto; - margin-top: 1em; - } - - &:fullscreen { - background: var(--white); - - h1 { - display: initial; - font-size: 3em; - } - - .code { - max-height: 80%; - } - } - - @media not print { - & > img { - display: none; - } - } -} diff --git a/resources/assets/stylesheets/scss/qrcode.scss b/resources/assets/stylesheets/scss/qrcode.scss new file mode 100644 index 0000000..c6a8747 --- /dev/null +++ b/resources/assets/stylesheets/scss/qrcode.scss @@ -0,0 +1,51 @@ +.qr-code-display { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + width: 100%; + + h1 { + display: none; + } + + .code { + flex: 0 1 auto; + max-height: 90%; // TODO This will not scale well if description grows + width: 100%; + text-align: center; + + canvas { + margin: auto; + max-height: 100%; + object-fit: contain; + } + } + + .url, + .description { + flex: 0 0 auto; + margin-top: 1em; + text-align: center; + } + + &:fullscreen { + background: var(--white); + + h1 { + display: initial; + font-size: 3em; + } + + .code { + max-height: 80%; + } + } + + @media not print { + & > img { + display: none; + } + } +} 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"; -- cgit v1.0