Add QR code close button

README.md

@@ -165,4 +165,4 @@ If you like my work and like to keep me motivated you can buy me a coconut water
 - [Christian Tarne](https://github.com/Metropo)
 - [DeNeD1](https://github.com/DeNeD1)
 - [DIY89](https://github.com/DIY89)
-
+- [mhellmeier](https://github.com/mhellmeier)

src/js/core.js

@@ -692,15 +692,25 @@ const photoBooth = (function () {
         // Add QR Code Image
         const qrCodeModal = $('#qrCode');
         photoboothTools.modal.empty(qrCodeModal);
-        $('<img src="api/qrcode.php?filename=' + filename + '"/>').on('load', function () {
-            const body = qrCodeModal.find('.modal__body');
+        const body = qrCodeModal.find('.modal__body');
+        $('<button>')
+            .on('click touchstart', function (ev) {
+                ev.preventDefault();
+                ev.stopPropagation();
 
-            $(this).appendTo(body);
-            $('<p>')
-                .css('max-width', this.width + 'px')
-                .html(photoboothTools.getTranslation('qrHelp') + '</br><b>' + config.webserver.ssid + '</b>')
-                .appendTo(body);
-        });
+                photoboothTools.modal.close('#qrCode');
+            })
+            .append($('<i>').addClass('fa fa-times'))
+            .css('float', 'right')
+            .appendTo(body);
+        $('<img src="api/qrcode.php?filename=' + filename + '"/>')
+            .on('load', function () {
+                $('<p>')
+                    .css('max-width', this.width + 'px')
+                    .html(photoboothTools.getTranslation('qrHelp') + '</br><b>' + config.webserver.ssid + '</b>')
+                    .appendTo(body);
+            })
+            .appendTo(body);
 
         // Add Print Link
         $(document).off('click touchstart', '.printbtn');

src/js/photoinit.js

@@ -251,6 +251,15 @@ function initPhotoSwipeFromDOM(gallerySelector) {
             let img = gallery.currItem.src;
             img = img.split('\\').pop().split('/').pop();
 
+            $('<button>')
+                .on('click touchstart', function (ev) {
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                    $('.pswp__qr').empty().removeClass('qr-active').fadeOut('fast');
+                })
+                .append($('<i>').addClass('fa fa-times'))
+                .css('float', 'right')
+                .appendTo(pswpQR);
             $('<img>')
                 .attr('src', 'api/qrcode.php?filename=' + img)
                 .appendTo(pswpQR);