From 044134b190155bae9dffb9b137cb950c9fe59e67 Mon Sep 17 00:00:00 2001
From: Jan-Hendrik Willms <tleilax+studip@gmail.com>
Date: Wed, 11 May 2022 09:04:43 +0000
Subject: [PATCH] change the way the qr code is displayed
Closes #995
Merge request studip/studip!583
---
.../assets/javascripts/bootstrap/qr_code.js | 11 +-
resources/assets/javascripts/lib/qr_code.js | 110 ++++++++++++------
.../assets/stylesheets/less/qrcode-print.less | 24 ----
resources/assets/stylesheets/less/qrcode.less | 80 +++++--------
resources/assets/stylesheets/print.less | 1 -
5 files changed, 116 insertions(+), 110 deletions(-)
delete mode 100644 resources/assets/stylesheets/less/qrcode-print.less
diff --git a/resources/assets/javascripts/bootstrap/qr_code.js b/resources/assets/javascripts/bootstrap/qr_code.js
index 4fad876ebd1..cddc1533dde 100644
--- a/resources/assets/javascripts/bootstrap/qr_code.js
+++ b/resources/assets/javascripts/bootstrap/qr_code.js
@@ -1,4 +1,13 @@
-jQuery(document).on('click', 'a[data-qr-code]', STUDIP.QRCode.show);
+jQuery(document).on('click', 'a[data-qr-code]', function (event) {
+ const data = $(this).data();
+ STUDIP.QRCode.show(this.href, {
+ print: data.qrCodePrint ?? false,
+ title: data.qrTitle ?? null,
+ description: data.qrCode || null,
+ });
+
+ event.preventDefault();
+});
STUDIP.ready((event) => {
$('code.qr', event.target).each(function () {
diff --git a/resources/assets/javascripts/lib/qr_code.js b/resources/assets/javascripts/lib/qr_code.js
index 6766d78bcc8..914db9b6d0a 100644
--- a/resources/assets/javascripts/lib/qr_code.js
+++ b/resources/assets/javascripts/lib/qr_code.js
@@ -1,51 +1,89 @@
import QRCodeGenerator from "../vendor/qrcode-04f46c6.js"
+import { $gettext } from "./gettext.js";
+import Dialog from "./dialog.js";
const QRCode = {
- show: function() {
- jQuery('#qr_code').remove();
- jQuery("<div id='qr_code'/>").appendTo('body');
- var title = jQuery(this).data('qr-title');
- if (title) {
- jQuery('#qr_code').append('<h1 class="title">' + title + '</h1>');
- } else {
- jQuery('#qr_code').append("<div class='header'/>");
+ defaultOptions: {
+ title: false,
+ },
+ show(text, options = {}) {
+ options = Object.assign({}, QRCode.defaultOptions, options);
+
+ // Prepare content
+ const content = $('<div class="qr-code-display"/>');
+ $('<img/>').attr('src', STUDIP.ASSETS_URL + 'images/logos/logoklein.png').appendTo(content);
+ if (options.title) {
+ $('<h1>').text(options.title).appendTo(content);
+ }
+
+ const code = $('<div class="code"/>').appendTo(content);
+ const url = $('<div class="url"/>').appendTo(content);
+ $('<a/>', {
+ href: text,
+ target: '_blank'
+ }).text(text).appendTo(url);
+
+ if (options.description) {
+ const description = $('<div class="description"/>').text(options.description).appendTo(content);
}
- jQuery('#qr_code').append("<div class='code'/>");
- jQuery('#qr_code').append("<div class='url'/>");
- jQuery('#qr_code').append("<div class='description'/>");
- var code = new QRCodeGenerator(jQuery('#qr_code .code')[0], {
- text: jQuery(this).attr('href'),
+ // Actually generate code
+ new QRCodeGenerator(code[0], {
+ text: text,
width: 1280,
height: 1280,
correctLevel: 3
});
- jQuery('#qr_code .url').text(jQuery(this).attr('href'));
- jQuery('#qr_code .description').text(jQuery(this).data('qr-code'));
- var print_button_enabled = jQuery(this).data('qr-code-print');
- if (print_button_enabled) {
- var icon_path = STUDIP.URLHelper.getURL(
- 'assets/images/icons/blue/print.svg'
- );
- var print_element = jQuery('<img></img>');
- jQuery(print_element).attr('src', icon_path);
- jQuery(print_element).addClass('PrintAction');
- jQuery('#qr_code').append(print_element);
- }
+ // Prepare dialog
+ let buttons = {
+ fullscreen: {
+ text: $gettext('Vollbild'),
+ 'class': 'fullscreen',
+ click () {
+ if (content[0].requestFullscreen) {
+ content[0].requestFullscreen();
+ } else if (content[0].msRequestFullscreen) {
+ content[0].msRequestFullscreen();
+ } else if (content[0].mozRequestFullScreen) {
+ content[0].mozRequestFullScreen();
+ } else if (content[0].webkitRequestFullscreen) {
+ content[0].webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+ }
+ }
+ },
+ cancel: {
+ text: $gettext('Schließen'),
+ 'class': 'cancel',
+ click () {
+ Dialog.close();
+ }
+ },
+ };
- //jQuery("#qr_code .code").html(jQuery(this).find(".qrcode_image").clone());
- var qr = jQuery('#qr_code')[0];
- if (qr.requestFullscreen) {
- qr.requestFullscreen();
- } else if (qr.msRequestFullscreen) {
- qr.msRequestFullscreen();
- } else if (qr.mozRequestFullScreen) {
- qr.mozRequestFullScreen();
- } else if (qr.webkitRequestFullscreen) {
- qr.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+ if (options.print) {
+ buttons = Object.assign({
+ print: {
+ text: $gettext('Drucken'),
+ 'class': 'print',
+ click () {
+ var openWindow = window.open("", '_blank');
+ openWindow.document.write(`<body style="text-align: center;">${content.html()}</body>`);
+ openWindow.document.close();
+ openWindow.focus();
+ openWindow.print();
+ openWindow.close();
+ }
+ },
+ }, buttons);
}
- return false;
+
+
+ Dialog.show(content, {
+ title: options.title ?? $gettext('QR-Code'),
+ size: 'big',
+ buttons
+ });
},
generate: function (element, text, options = {}) {
options.text = text;
diff --git a/resources/assets/stylesheets/less/qrcode-print.less b/resources/assets/stylesheets/less/qrcode-print.less
deleted file mode 100644
index 7b3ccd01b4a..00000000000
--- a/resources/assets/stylesheets/less/qrcode-print.less
+++ /dev/null
@@ -1,24 +0,0 @@
-@media print {
- div#qr_code {
- text-align: center;
-
- h1.title {
- margin-bottom: 10mm;
- }
-
- div.code img {
- width: 170mm;
- height: 170mm;
- }
-
- .PrintAction {
- display: none;
- }
-
- div.url {
- margin-top: 10mm;
- font-size: 14px;
- font-weight: bold;
- }
- }
-}
diff --git a/resources/assets/stylesheets/less/qrcode.less b/resources/assets/stylesheets/less/qrcode.less
index bde88bb9133..4f9773da351 100644
--- a/resources/assets/stylesheets/less/qrcode.less
+++ b/resources/assets/stylesheets/less/qrcode.less
@@ -1,65 +1,49 @@
-#qr_code {
- display: none;
- background-color: white;
- width: 100%;
- height: 100%;
+.qr-code-display {
+ display: flex;
flex-direction: column;
- justify-content: space-around;
align-items: center;
- color: #444444;
-
- .code > div {
- margin-left: auto;
- margin-right: auto;
- text-align: center;
- }
+ justify-content: center;
+ height: 100%;
+ width: 100%;
- .code img {
- width: 70vh;
- height: 70vh;
+ h1 {
+ display: none;
}
- .header {
- background-image: url("@{image-path}/logos/logoklein.png");
- height: 100px;
+ .code {
+ flex: 0 1 auto;
+ max-height: 90%; // TODO This will not scale well if description grows
width: 100%;
- background-repeat: no-repeat;
- background-position: center center;
+
+ img {
+ margin: auto;
+ max-height: 100%;
+ object-fit: contain;
+ }
}
- h1 {
- text-align: center;
- font-size: 1.5em;
+ .url,
+ .description {
+ flex: 0 0 auto;
+ margin-top: 1em;
}
- &.print-view {
- .code img {
- width: 170mm;
- height: 170mm;
- }
+ &:fullscreen {
+ background: var(--white);
- .PrintAction {
- display: none;
+ h1 {
+ display: initial;
+ font-size: 3em;
}
- .url {
- font-size: 14px;
+ .code {
+ max-height: 80%;
}
}
-}
-#qr_code:-moz-full-screen {
- display: flex;
-}
-
-#qr_code:-webkit-full-screen {
- display: flex;
-}
-
-#qr_code:-ms-fullscreen {
- display: flex;
-}
-
-#qr_code:fullscreen {
- display: flex;
+ @media not print {
+ & > img {
+ display: none;
+ }
+ }
}
diff --git a/resources/assets/stylesheets/print.less b/resources/assets/stylesheets/print.less
index 01aea628ddf..96d43c86c7c 100644
--- a/resources/assets/stylesheets/print.less
+++ b/resources/assets/stylesheets/print.less
@@ -3,7 +3,6 @@
@import "less/visibility.less";
@import "less/fullcalendar-print.less";
@import "less/resources-print.less";
-@import "less/qrcode-print.less";
@import (reference) "less/schedule.less";
--
GitLab