Opcja przesuwania potraf w modalu szczegółow

2026-06-10 20:42:43 +02:00
parent 79a83d4d73
commit 99bb83702a
3 changed files with 444 additions and 33 deletions
--- a/public/app.php
+++ b/public/app.php
@@ -234,16 +234,28 @@ $vMenu = publicAssetVersion($publicDir, 'menu.json');

  <!-- ITEM MODAL -->
  <div class="modal-overlay" id="itemModal">
-    <div class="modal-content" style="padding: 0; overflow: hidden; max-width: 380px;">
-      <div style="position: relative;">
-        <img id="itemModalImage" src="" style="width: 100%; height: 240px; object-fit: cover; display: block;" alt="">
-        <button class="close-btn" onclick="closeItemModal()" style="position: absolute; top: 10px; right: 15px; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.8); font-size: 32px; z-index: 10; background: rgba(0,0,0,0.3); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1;">&times;</button>
-      </div>
-      <div style="padding: 24px; text-align: left;">
-        <h3 id="itemModalTitle" style="margin-top: 0; color: var(--text-main); font-family: 'Playfair Display', serif; font-size: 24px; margin-bottom: 8px;"></h3>
-        <div id="itemModalPrice" style="color: var(--primary); font-weight: 700; font-size: 20px; margin-bottom: 16px;"></div>
-        <p id="itemModalDesc" style="color: var(--text-muted); font-size: 15px; line-height: 1.6; margin-bottom: 24px;"></p>
-        <button class="btn btn-secondary" onclick="closeItemModal()" style="width: 100%;">Zamknij</button>
+    <div class="modal-content item-modal-content" id="itemModalContent">
+      <button type="button" class="close-btn item-modal-close" onclick="closeItemModal()" aria-label="Zamknij">&times;</button>
+      <div class="item-modal-pane" id="itemModalPane">
+        <div class="item-modal-image-wrap">
+          <img id="itemModalImage" class="item-modal-image" src="" alt="">
+          <div id="itemModalImagePlaceholder" class="menu-image-placeholder" aria-hidden="true">
+            <svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/>
+              <circle cx="12" cy="13" r="4"/>
+            </svg>
+            <span>Brak zdjęcia</span>
+          </div>
+        </div>
+        <div class="item-modal-body">
+          <div class="item-modal-meta">
+            <span id="itemModalCounter" class="item-modal-counter"></span>
+          </div>
+          <h3 id="itemModalTitle" class="item-modal-title"></h3>
+          <div id="itemModalPrice" class="item-modal-price"></div>
+          <p id="itemModalDesc" class="item-modal-desc"></p>
+          <button type="button" class="btn btn-secondary item-modal-close-btn" onclick="closeItemModal()">Zamknij</button>
+        </div>
      </div>
    </div>
  </div>
--- a/public/assets/css/app.css
+++ b/public/assets/css/app.css
@@ -1256,4 +1256,158 @@ header {
  content: " zł";
  font-size: 12px;
  font-weight: 400;
+}
+
+/* --- ITEM MODAL --- */
+.item-modal-content {
+  position: relative;
+  padding: 0;
+  overflow: hidden;
+  max-width: 380px;
+  touch-action: pan-y;
+}
+
+.item-modal-pane {
+  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.34s ease;
+  will-change: transform, opacity;
+}
+
+.item-modal-pane.is-dragging {
+  transition: none;
+}
+
+.item-modal-pane.is-exiting-left {
+  transform: translateX(-18%);
+  opacity: 0;
+}
+
+.item-modal-pane.is-exiting-right {
+  transform: translateX(18%);
+  opacity: 0;
+}
+
+.item-modal-pane.is-entering-from-right {
+  transition: none;
+  transform: translateX(18%);
+  opacity: 0;
+}
+
+.item-modal-pane.is-entering-from-left {
+  transition: none;
+  transform: translateX(-18%);
+  opacity: 0;
+}
+
+.item-modal-image-wrap {
+  position: relative;
+  height: 240px;
+  background: var(--surface-light);
+}
+
+.item-modal-image {
+  width: 100%;
+  height: 240px;
+  object-fit: cover;
+  display: block;
+}
+
+.menu-image-placeholder {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  color: var(--text-muted);
+  background: linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.15));
+}
+
+.menu-image-placeholder span {
+  font-size: 13px;
+  letter-spacing: 0.02em;
+}
+
+.menu-image-placeholder.hidden,
+.item-modal-image.hidden,
+.rmc-image.hidden {
+  display: none;
+}
+
+.rmc-image-wrap {
+  position: relative;
+  width: 90px;
+  height: 90px;
+  flex-shrink: 0;
+}
+
+.rmc-image-wrap .menu-image-placeholder {
+  border-radius: 12px;
+}
+
+.rmc-image-wrap .menu-image-placeholder svg {
+  width: 28px;
+  height: 28px;
+}
+
+.rmc-image-wrap .menu-image-placeholder span {
+  font-size: 10px;
+}
+
+.item-modal-close {
+  position: absolute;
+  top: 10px;
+  right: 15px;
+  z-index: 12;
+  color: #fff;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
+  font-size: 32px;
+  background: rgba(0, 0, 0, 0.3);
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+.item-modal-body {
+  padding: 24px;
+  text-align: left;
+}
+
+.item-modal-meta {
+  min-height: 18px;
+  margin-bottom: 6px;
+}
+
+.item-modal-counter {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.item-modal-title {
+  margin: 0 0 8px;
+  color: var(--text-main);
+  font-family: 'Playfair Display', serif;
+  font-size: 24px;
+}
+
+.item-modal-price {
+  color: var(--primary);
+  font-weight: 700;
+  font-size: 20px;
+  margin-bottom: 16px;
+}
+
+.item-modal-desc {
+  color: var(--text-muted);
+  font-size: 15px;
+  line-height: 1.6;
+  margin: 0 0 24px;
+}
+
+.item-modal-close-btn {
+  width: 100%;
 }
--- a/public/assets/js/app.js
+++ b/public/assets/js/app.js
@@ -1436,6 +1436,249 @@ window.fetchGUS = async function () {
 };

 // --- DYNAMIC MENU LOADING ---
+
+let itemModalKeys = [];
+let itemModalIndex = -1;
+let itemModalTouchStart = null;
+let itemModalDragging = false;
+let itemModalAnimating = false;
+
+function resetItemModalPane() {
+  const pane = document.getElementById("itemModalPane");
+  if (!pane) return;
+  pane.classList.remove(
+    "is-dragging",
+    "is-exiting-left",
+    "is-exiting-right",
+    "is-entering-from-left",
+    "is-entering-from-right"
+  );
+  pane.style.transform = "";
+  pane.style.opacity = "";
+}
+
+function waitForPaneTransition(pane, timeoutMs = 400) {
+  return new Promise((resolve) => {
+    let settled = false;
+    const finish = () => {
+      if (settled) return;
+      settled = true;
+      pane.removeEventListener("transitionend", onEnd);
+      resolve();
+    };
+    const onEnd = (e) => {
+      if (e.target === pane) finish();
+    };
+    pane.addEventListener("transitionend", onEnd);
+    setTimeout(finish, timeoutMs);
+  });
+}
+
+function isValidMenuImageUrl(url) {
+  return typeof url === "string" && url.trim().length > 0;
+}
+
+window.handleMenuImageError = function (imgEl) {
+  if (!imgEl) return;
+  imgEl.onerror = null;
+  imgEl.classList.add("hidden");
+  const wrap = imgEl.closest(".rmc-image-wrap, .item-modal-image-wrap");
+  const placeholder = wrap?.querySelector(".menu-image-placeholder");
+  if (placeholder) placeholder.classList.remove("hidden");
+};
+
+function applyMenuItemImage(imgEl, placeholderEl, url) {
+  if (!imgEl || !placeholderEl) return;
+
+  if (!isValidMenuImageUrl(url)) {
+    imgEl.src = "";
+    imgEl.classList.add("hidden");
+    placeholderEl.classList.remove("hidden");
+    return;
+  }
+
+  imgEl.onload = () => {
+    imgEl.classList.remove("hidden");
+    placeholderEl.classList.add("hidden");
+  };
+  imgEl.onerror = () => handleMenuImageError(imgEl);
+  imgEl.classList.remove("hidden");
+  placeholderEl.classList.add("hidden");
+  imgEl.src = url;
+}
+
+function renderMenuListImage(url) {
+  const hasUrl = isValidMenuImageUrl(url);
+  const imgClass = hasUrl ? "rmc-image" : "rmc-image hidden";
+  const placeholderClass = hasUrl ? "menu-image-placeholder hidden" : "menu-image-placeholder";
+  const srcAttr = hasUrl ? ` src="${url}"` : "";
+  const onerror = hasUrl ? ' onerror="handleMenuImageError(this)"' : "";
+
+  return `<div class="rmc-image-wrap"><img class="${imgClass}"${srcAttr} alt="" loading="lazy"${onerror}><div class="${placeholderClass}" aria-hidden="true"><svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg><span>Brak zdjęcia</span></div></div>`;
+}
+
+function findMenuItem(categoryId, position) {
+  if (!window.menuDataRaw) return null;
+  for (const cat of window.menuDataRaw) {
+    for (const item of cat.items) {
+      if (item.categoryId == categoryId && item.position == position) {
+        return item;
+      }
+    }
+  }
+  return null;
+}
+
+function buildVisibleMenuItemKeys() {
+  const keys = [];
+  document.querySelectorAll(".rmc-position").forEach((el) => {
+    if (el.style.display === "none") return;
+    const category = el.closest(".rm-category");
+    if (category && category.style.display === "none") return;
+    keys.push({
+      categoryId: el.getAttribute("data-category-id"),
+      position: el.getAttribute("data-position"),
+    });
+  });
+  return keys;
+}
+
+function updateItemModalNavigation() {
+  const total = itemModalKeys.length;
+  const counter = document.getElementById("itemModalCounter");
+  if (counter) counter.textContent = total > 1 ? `${itemModalIndex + 1} / ${total}` : "";
+}
+
+function populateItemModal(item) {
+  const imgEl = document.getElementById("itemModalImage");
+  const placeholderEl = document.getElementById("itemModalImagePlaceholder");
+  const titleEl = document.getElementById("itemModalTitle");
+  const descEl = document.getElementById("itemModalDesc");
+  const priceEl = document.getElementById("itemModalPrice");
+
+  applyMenuItemImage(imgEl, placeholderEl, item.image);
+  if (titleEl) titleEl.textContent = item.title;
+  if (descEl) descEl.textContent = item.description || "";
+  if (priceEl) priceEl.textContent = item.price;
+  updateItemModalNavigation();
+}
+
+window.navigateItemModal = async function (delta) {
+  if (!itemModalKeys.length || !delta || itemModalAnimating) return;
+  const nextIndex = itemModalIndex + delta;
+  if (nextIndex < 0 || nextIndex >= itemModalKeys.length) return;
+
+  const key = itemModalKeys[nextIndex];
+  const item = findMenuItem(key.categoryId, key.position);
+  const pane = document.getElementById("itemModalPane");
+  if (!item || !pane) return;
+
+  itemModalAnimating = true;
+  resetItemModalPane();
+
+  const exitClass = delta > 0 ? "is-exiting-left" : "is-exiting-right";
+  const enterClass = delta > 0 ? "is-entering-from-right" : "is-entering-from-left";
+
+  pane.classList.add(exitClass);
+  await waitForPaneTransition(pane);
+
+  itemModalIndex = nextIndex;
+  populateItemModal(item);
+
+  pane.classList.remove(exitClass);
+  pane.classList.add(enterClass);
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      pane.classList.remove(enterClass);
+    });
+  });
+
+  await waitForPaneTransition(pane);
+  itemModalAnimating = false;
+};
+
+function bindItemModalSwipe() {
+  const content = document.getElementById("itemModalContent");
+  const pane = document.getElementById("itemModalPane");
+  const modal = document.getElementById("itemModal");
+  if (!content || !pane || !modal || content.dataset.swipeBound) return;
+  content.dataset.swipeBound = "1";
+
+  content.addEventListener(
+    "touchstart",
+    (e) => {
+      if (itemModalAnimating || itemModalKeys.length <= 1 || e.touches.length !== 1) return;
+      if (e.target.closest("button")) return;
+      const touch = e.touches[0];
+      itemModalTouchStart = { x: touch.clientX, y: touch.clientY };
+      itemModalDragging = false;
+    },
+    { passive: true }
+  );
+
+  content.addEventListener(
+    "touchmove",
+    (e) => {
+      if (!itemModalTouchStart || itemModalAnimating || itemModalKeys.length <= 1) return;
+      const touch = e.touches[0];
+      const dx = touch.clientX - itemModalTouchStart.x;
+      const dy = touch.clientY - itemModalTouchStart.y;
+
+      if (!itemModalDragging) {
+        if (Math.abs(dx) > 12 && Math.abs(dx) > Math.abs(dy)) {
+          itemModalDragging = true;
+          pane.classList.add("is-dragging");
+        } else if (Math.abs(dy) > 12) {
+          itemModalTouchStart = null;
+          return;
+        } else {
+          return;
+        }
+      }
+
+      let translateX = dx;
+      if (itemModalIndex <= 0 && dx > 0) translateX = dx * 0.3;
+      if (itemModalIndex >= itemModalKeys.length - 1 && dx < 0) translateX = dx * 0.3;
+
+      pane.style.transform = `translateX(${translateX}px)`;
+      pane.style.opacity = String(1 - Math.min(Math.abs(translateX) / 320, 0.18));
+    },
+    { passive: true }
+  );
+
+  content.addEventListener(
+    "touchend",
+    (e) => {
+      if (!itemModalTouchStart) return;
+      const touch = e.changedTouches[0];
+      const dx = touch.clientX - itemModalTouchStart.x;
+      const dy = touch.clientY - itemModalTouchStart.y;
+      const wasDragging = itemModalDragging;
+
+      itemModalTouchStart = null;
+      itemModalDragging = false;
+
+      if (!wasDragging) return;
+
+      pane.classList.remove("is-dragging");
+      pane.style.transform = "";
+      pane.style.opacity = "";
+
+      if (Math.abs(dx) >= 50 && Math.abs(dx) > Math.abs(dy)) {
+        navigateItemModal(dx < 0 ? 1 : -1);
+      }
+    },
+    { passive: true }
+  );
+
+  document.addEventListener("keydown", (e) => {
+    if (!modal.classList.contains("active")) return;
+    if (e.key === "ArrowRight") navigateItemModal(1);
+    if (e.key === "ArrowLeft") navigateItemModal(-1);
+    if (e.key === "Escape") closeItemModal();
+  });
+}
+
 async function loadMenu() {
  try {
    const response = await fetch(`menu.json?v=${encodeURIComponent(MENU_ASSET_VERSION)}`);
@@ -1460,7 +1703,7 @@ async function loadMenu() {
      category.items.forEach(item => {
        html += `
          <div class="rmc-position" data-position="${item.position}" data-category-id="${item.categoryId}" onclick="openItemModal('${item.categoryId}', '${item.position}')" style="cursor: pointer;">
-            <img class="rmc-image" src="${item.image}" alt="" loading="lazy">
+            ${renderMenuListImage(item.image)}
            <div class="rmc-title">
              <h4>${item.title}<span>${item.description}</span></h4>
            </div>
@@ -1484,31 +1727,29 @@ async function loadMenu() {

 // Inicjalizacja ładowania menu
 loadMenu();
+bindItemModalSwipe();

 window.openItemModal = function(categoryId, position) {
-  if (!window.menuDataRaw) return;
-  let foundItem = null;
-  for (const cat of window.menuDataRaw) {
-    for (const item of cat.items) {
-      if (item.categoryId == categoryId && item.position == position) {
-        foundItem = item;
-        break;
-      }
-    }
-    if (foundItem) break;
+  itemModalKeys = buildVisibleMenuItemKeys();
+  itemModalIndex = itemModalKeys.findIndex(
+    (key) => key.categoryId == categoryId && key.position == position
+  );
+
+  if (itemModalIndex < 0) {
+    itemModalKeys = [{ categoryId, position }];
+    itemModalIndex = 0;
  }
-  
-  if (foundItem) {
-    document.getElementById('itemModalImage').src = foundItem.image;
-    document.getElementById('itemModalTitle').textContent = foundItem.title;
-    document.getElementById('itemModalDesc').textContent = foundItem.description;
-    document.getElementById('itemModalPrice').textContent = foundItem.price;
-    
-    const modal = document.getElementById('itemModal');
-    if (modal) {
-      modal.classList.add('active');
-      document.body.style.overflow = 'hidden';
-    }
+
+  const foundItem = findMenuItem(categoryId, position);
+  if (!foundItem) return;
+
+  populateItemModal(foundItem);
+  resetItemModalPane();
+
+  const modal = document.getElementById('itemModal');
+  if (modal) {
+    modal.classList.add('active');
+    document.body.style.overflow = 'hidden';
  }
 };

@@ -1518,6 +1759,10 @@ window.closeItemModal = function() {
    modal.classList.remove('active');
    document.body.style.overflow = '';
  }
+  itemModalTouchStart = null;
+  itemModalDragging = false;
+  itemModalAnimating = false;
+  resetItemModalPane();
 };

 window.editCompanyData = function () {