feature: show qr code aside the image inside gallery

Change-Id: I87db580c6578480820518167db520f9863c722c1
PhotoboothProject · Aug 28, 2024 · 7c5e783 · 7c5e783
1 parent a1f001c
commit 7c5e783
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 0 deletions.
diff --git a/assets/js/photoswipe.js b/assets/js/photoswipe.js
@@ -175,6 +175,25 @@ function initPhotoSwipeFromDOM(gallerySelector) {
                     isButton: true,
                     html: '<i class="' + config.icons.qr + '"></i>',
 
+                    onInit: (el, pswp) => {
+                        if (config.qr.pswp != 'hidden') {
+                            pswp.on('change', () => {
+                                if (document.getElementById('pswpQR')) {
+                                    document.getElementById('pswpQR').remove();
+                                }
+                                const qrImage = document.createElement('img');
+                                qrImage.src =
+                                    environment.publicFolders.api +
+                                    '/qrcode.php?filename=' +
+                                    pswp.currSlide.data.src.split('\\').pop().split('/').pop();
+                                qrImage.alt = 'qr code';
+                                qrImage.id = 'pswpQR';
+                                qrImage.setAttribute('class', 'pswp-qrcode ' + config.qr.pswp);
+                                $('.pswp').append(qrImage);
+                            });
+                        }
+                    },
+
                     onClick: (event, el, pswp) => {
                         const image = pswp.currSlide.data.src.split('\\').pop().split('/').pop();
                         photoBooth.showQrCode(image);
@@ -276,6 +295,9 @@ function initPhotoSwipeFromDOM(gallerySelector) {
                 $('.pswp__button--zoom').empty();
                 $('.pswp__button--zoom').html('<i class="' + config.icons.zoom + '"></i>');
             }
+            if (config.qr.enabled && config.qr.pswp != 'hidden') {
+                $('.pswp__button--qrcode').hide();
+            }
             if (typeof rotaryController !== 'undefined') {
                 rotaryController.focusSet('.pswp');
             }

diff --git a/assets/sass/vendor/_photoswipe.scss b/assets/sass/vendor/_photoswipe.scss
@@ -84,3 +84,34 @@
 .pswp-rotary-focus {
   background: var(--primary-color) !important;
 }
+
+.pswp-qrcode {
+  position: absolute;
+  width: 8rem;
+  &.left {
+    left: 2rem;
+    &--top {
+      top: 4rem;
+    }
+    &--center {
+      top: 50%;
+      translate: 0 -50%;
+    }
+    &--bottom {
+      bottom: 4rem;
+    }
+  }
+  &.right {
+    right: 2rem;
+    &--top {
+      top: 4rem;
+    }
+    &--center {
+      top: 50%;
+      translate: 0 -50%;
+    }
+    &--bottom {
+      bottom: 4rem;
+    }
+  }
+}
diff --git a/lib/configsetup.inc.php b/lib/configsetup.inc.php
@@ -1813,6 +1813,21 @@
             ],
             'value' => $config['qr']['result'],
         ],
+        'qr_pswp' => [
+            'type' => 'select',
+            'name' => 'qr[pswp]',
+            'placeholder' => $defaultConfig['qr']['pswp'],
+            'options' => [
+                'hidden' => 'hidden',
+                'left left--top' => 'top left',
+                'left left--center' => 'left center',
+                'left left--bottom' => 'left bottom',
+                'right right--top' => 'top right',
+                'right right--center' => 'right center',
+                'right right--bottom' => 'right bottom',
+            ],
+            'value' => $config['qr']['pswp'],
+        ],
     ],
     'mail' => [
         'view' => 'basic',

diff --git a/resources/lang/en.json b/resources/lang/en.json
@@ -524,6 +524,7 @@
   "manual:qr:qr_custom_text": "If enabled, own defined help text will be visible below the QR Code.",
   "manual:qr:qr_ecLevel": "QR Code error correction capability to restore data:</br> Level L – up to 7%</br> Level M – up to 15%</br> Level Q – up to 25%</br> Level H – up to 30%</br>",
   "manual:qr:qr_enabled": "If enabled, a QR-Button is visible on the result screen and inside gallery. User can download a picture while scanning the QR Code. If you're accessing Photobooth via \"localhost\", \"127.0.0.1\" or if you have Photobooth installed inside a subfolder, please define IP address of the Photobooth web server to make the QR Code working. <p>Example if Photobooth can be accessed directly: <code>192.168.0.50</code>.</p><p>Example if Photobooth is installed inside a subfolder: <code>192.168.0.50/photobooth</code>.</p>",
+  "manual:qr:qr_pswp": "Choose a position to show the QR Code inside the gallery aside the image. QR Code must be enabled. Choose \"hidden\" to hide the QR Code. Selecting a position hides the qr button inside the gallery.",
   "manual:qr:qr_result": "Choose a position to show the QR Code on the result screen directly after taking a picture. QR Code must be enabled. Choose \"hidden\" to hide the QR Code.",
   "manual:qr:qr_text": "Define own help text which will be visible below the QR Code.",
   "manual:qr:qr_url": "Define a URL to point at via QR Code.",
@@ -782,6 +783,7 @@
   "qr:qr_custom_text": "Use own help text on QR",
   "qr:qr_ecLevel": "QR Code error correction",
   "qr:qr_enabled": "Use QR Codes",
+  "qr:qr_pswp": "QR Code position inside the gallery:",
   "qr:qr_result": "QR Code position on result screen:",
   "qr:qr_text": "Own help text",
   "qr:qr_url": "URL for QR Code",

diff --git a/src/Configuration/PhotoboothConfiguration.php b/src/Configuration/PhotoboothConfiguration.php
@@ -288,6 +288,18 @@ protected function addQr(): NodeDefinition
                     ])
                     ->defaultValue('hidden')
                     ->end()
+                ->enumNode('pswp')
+                    ->values([
+                        'hidden',
+                        'left left--top',
+                        'left left--center',
+                        'left left--bottom',
+                        'right right--top',
+                        'right right--center',
+                        'right right--bottom',
+                    ])
+                    ->defaultValue('hidden')
+                    ->end()
             ->end();
     }