Add touch-friendly collage layout modal and unify selection flow

Author: reloxx13

assets/js/core.js

@@ -1384,6 +1384,15 @@ const photoBooth = (function () {
 
     $('.takeCollage, .newcollage').on('click', function (e) {
         e.preventDefault();
+        console.log('Collage button clicked');
+        if (config.collage.enabled && config.collage.allow_selection && $('#collageSelectorModal').length) {
+            console.log('Opening collage selector modal');
+            $('#collageSelectorModal').data('pending-start', true);
+            $('#collageSelectorModal').removeClass('hidden').attr('aria-hidden', 'false');
+            $(this).trigger('blur');
+            return;
+        }
+        console.log('Starting collage without selection');
         api.thrill(PhotoStyle.COLLAGE);
         $(this).trigger('blur');
     });
@@ -1590,16 +1599,32 @@ const photoBooth = (function () {
         config.collage.enabled &&
         config.collage.allow_selection
     ) {
-        document.getElementById('collageSelect').addEventListener('change', function () {
-            const selectedOption = this.options[this.selectedIndex];
-            const limit = selectedOption.dataset.limit;
-            const layout = selectedOption.value;
+        const collageModal = $('#collageSelectorModal');
+        const closeBtn = $('#collageSelectorClose');
+        const optionButtons = $('.collageSelector__option');
+
+        // Move modal to body so it isn't hidden by stage visibility
+        if (collageModal.length) {
+            $('body').append(collageModal.detach());
+        }
 
+        const setSelection = (layout, limit) => {
             api.collageLayout = layout;
             api.collageLimit = parseInt(limit, 10);
+        };
+
+        const closeModal = () => {
+            collageModal.addClass('hidden');
+            collageModal.attr('aria-hidden', 'true');
+        };
+
+        closeBtn.on('click', closeModal);
 
-            console.log('Collage layout updated:', api.collageLayout);
-            console.log('Collage limit updated:', api.collageLimit);
+        optionButtons.on('click', function () {
+            const button = $(this);
+            setSelection(button.data('layout'), button.data('limit'));
+            closeModal();
+            api.thrill(PhotoStyle.COLLAGE);
         });
     }
 

assets/sass/components/_button.scss

@@ -120,31 +120,61 @@
 /**
  * Select menu
  */
-#collageSelect {
-  font-size: var(--button-font-size);
-  font-weight: var(--button-font-weight);
-  height: auto;
-  min-height: 2rem;
-  vertical-align: middle;
-  border: var(--button-border-width) solid var(--button-border-color);
-  background: var(--button-background);
-  color: var(--button-color);
-  padding: 0.2rem;
-  align-items: center;
-  justify-content: center;
+#collageSelector {
+  width: 100%;
+  margin-top: 0.75rem;
+}
 
-  &.focused,
-  &:hover,
-  &:focus {
-    --button-background: var(--button-focus-background);
-  }
+.collageSelector__trigger {
+  justify-content: flex-start;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.collageSelector__current {
+  display: block;
+  font-size: 0.9rem;
+  opacity: 0.85;
+  margin-top: 0.25rem;
+}
+
+.collageSelector__options {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 0.75rem;
+  width: 100%;
+}
+
+.collageSelector__option {
+  width: 100%;
+  border: 1px solid var(--border-color);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  font-size: 1.05rem;
+  text-align: left;
+  background: #fff;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+}
+
+.collageSelector__option:focus,
+.collageSelector__option:hover,
+.collageSelector__option.is-selected {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color), #fff 70%);
+}
+
+.collageSelector__limit {
+  display: block;
+  font-size: 0.85rem;
+  opacity: 0.8;
+  margin-top: 0.35rem;
 }
 
 [data-ui-button='classic_rounded'],
 [data-ui-button='modern'],
 [data-ui-button='modern_squared'] {
-  #collageSelect {
-    border-radius: 0.625rem;
+  .collageSelector__option {
+    border-radius: 0.75rem;
   }
 }
 

assets/sass/components/_modal.scss

@@ -8,7 +8,8 @@
   --modal-font-size: 1rem;
   --modal-line-height: 1.2;
   --modal-padding: 2rem;
-  --modal-spacing: 2rem;
+  --modal-spacing: 1.5rem;
+  --modal-max-width: 960px;
 
   --modal-button-color: var(--button-font-color);
   --modal-button-background: var(--primary-color);
@@ -45,11 +46,14 @@
     position: relative;
     color: var(--modal-color);
     background: var(--modal-background);
-    max-width: calc(100dvw - var(--modal-spacing) * 2);
+    width: min(var(--modal-max-width), calc(100dvw - var(--modal-spacing) * 2));
+    max-width: min(var(--modal-max-width), calc(100dvw - var(--modal-spacing) * 2));
+    min-width: min(640px, calc(100dvw - var(--modal-spacing) * 2));
     max-height: calc(100dvh - var(--modal-spacing) * 2);
   }
 
   &-body {
+    width: 100%;
     text-align: center;
     overflow-y: scroll;
     font-size: var(--modal-font-size);

template/components/collageSelection.php

@@ -8,29 +8,39 @@ function renderCollageOptionsFromEnumWithLimit(array $collageConfig): string
 {
     $languageService = LanguageService::getInstance();
 
-    $html = '<div id="collageDiv">';
-    $html .= '<p>' . $languageService->translate('selectCollageLayout') . '</p>';
-    $html .= '<select id="collageSelect">';
+    $html = '<div id="collageSelector">';
+    $html .= '<div class="modal hidden" id="collageSelectorModal" aria-hidden="true" role="dialog" aria-labelledby="collageSelectorTitle">';
+    $html .= '<div class="modal-inner">';
+    $html .= '<div class="modal-body">';
+    $html .= '<h3 id="collageSelectorTitle">' . $languageService->translate('selectCollageLayout') . '</h3>';
+    $html .= '<div class="collageSelector__options">';
 
     foreach (CollageLayoutEnum::cases() as $layout) {
         if (in_array($layout, $collageConfig['layouts_enabled'])) {
             $collageConfig['layout'] = $layout->value;
             $limitData = Collage::calculateLimit($collageConfig);
             $limit = $limitData['limit'];
 
-            $selected = ($layout->value === $collageConfig['layout']) ? ' selected' : '';
-
             $html .= sprintf(
-                '<option value="%s" data-limit="%d"%s>%s</option>',
-                htmlspecialchars($layout->value, ENT_QUOTES, 'UTF-8'),
+                '<button type="button" class="collageSelector__option cursor-pointer" data-layout="%s" data-limit="%d">' .
+                '%s' .
+                '<span class="collageSelector__limit">' .
+                $languageService->translate('pictures') . ': %d' .
+                '</span>' .
+                '</button>',
+                $layout->value,
                 $limit,
-                $selected,
-                htmlspecialchars($layout->label(), ENT_QUOTES, 'UTF-8')
+                $layout->label(),
+                $limit
             );
         }
     }
 
-    $html .= '</select>';
+    $html .= '</div>'; // options
+    $html .= '</div>'; // body
+    $html .= '<div class="modal-buttonbar">';
+    $html .= '<button type="button" class="modal-button" id="collageSelectorClose">' . htmlspecialchars($languageService->translate('close'), ENT_QUOTES, 'UTF-8') . '</button>';
+    $html .= '</div></div></div>';
     $html .= '</div>';
 
     return $html;