diff options
| author | Jan-Hendrik Willms <tleilax+studip@gmail.com> | 2022-05-13 13:21:13 +0000 |
|---|---|---|
| committer | Jan-Hendrik Willms <tleilax+studip@gmail.com> | 2022-05-13 13:21:13 +0000 |
| commit | 024421a96574dbb6c2a6ffc8fbd7d469140e6643 (patch) | |
| tree | 6d50ee586c19a1267bcce838a6a245cf104011b2 /resources/assets/javascripts | |
| parent | c6893fd30b8430605978ee4525f577b9fa5a47a2 (diff) | |
load jquery.qrcode via npm and rework integration into stud.ip
Closes #993
Merge request studip/studip!571
Diffstat (limited to 'resources/assets/javascripts')
| -rw-r--r-- | resources/assets/javascripts/bootstrap/qr_code.js | 42 | ||||
| -rw-r--r-- | resources/assets/javascripts/jquery-bundle.js | 1 | ||||
| -rw-r--r-- | resources/assets/javascripts/lib/qr_code.js | 18 |
3 files changed, 9 insertions, 52 deletions
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); } }; |