feat: add fullscreen viewer

spa/src/views/Cart.vue

@@ -27,28 +27,33 @@
           :class="item.stock === false ? 'border-error' : ''"
       >
         <div class="card-body">
-          <div class="avatar">
-            <div class="w-16 rounded">
-              <img :src="item.thumb"/>
+          <div class="flex">
+            <div class="avatar mr-5">
+              <div class="w-16 rounded">
+                <img :src="item.thumb"/>
+              </div>
+            </div>
+
+            <div>
+              <h2 class="card-title">{{ item.name }} <span v-if="! item.stock" class="text-error font-bold">***</span></h2>
+              <p class="text-sm font-bold">{{ item.total }}</p>
+              <p>{{ item.price }}/ед</p>
+              <div>
+                <div v-for="option in item.option">
+                  <p><span class="font-bold">{{ option.name }}</span>: {{ option.value }}</p>
+                  <!--              <component-->
+                  <!--                  v-if="SUPPORTED_OPTION_TYPES.includes(option.type) && componentMap[option.type]"-->
+                  <!--                  :is="componentMap[option.type]"-->
+                  <!--                  :option="option"-->
+                  <!--              />-->
+                  <!--              <div v-else class="text-sm text-error">-->
+                  <!--                Тип опции "{{ option.type }}" не поддерживается.-->
+                  <!--              </div>-->
+                </div>
+              </div>
             </div>
           </div>
 
-          <h2 class="card-title">{{ item.name }} <span v-if="! item.stock" class="text-error font-bold">***</span></h2>
-          <p class="text-sm font-bold">{{ item.total }}</p>
-          <p>{{ item.price }}/ед</p>
-          <div>
-            <div v-for="option in item.option">
-              <p><span class="font-bold">{{ option.name }}</span>: {{ option.value }}</p>
-<!--              <component-->
-<!--                  v-if="SUPPORTED_OPTION_TYPES.includes(option.type) && componentMap[option.type]"-->
-<!--                  :is="componentMap[option.type]"-->
-<!--                  :option="option"-->
-<!--              />-->
-<!--              <div v-else class="text-sm text-error">-->
-<!--                Тип опции "{{ option.type }}" не поддерживается.-->
-<!--              </div>-->
-            </div>
-          </div>
           <div class="card-actions justify-between">
             <Quantity
                 :disabled="cart.isLoading"

spa/src/views/Product.vue

@@ -1,7 +1,27 @@
 <template>
   <div class="pb-10">
     <div>
-      <ProductImageSwiper :images="product.images"/>
+      <swiper-container
+          pagination="true"
+      >
+        <swiper-slide
+          v-for="(image, index) in product.images"
+          lazy="true"
+        >
+          <img
+              :src="image.thumbnailURL"
+              :alt="image.alt"
+              @click="showFullScreen(index)"
+          />
+        </swiper-slide>
+      </swiper-container>
+
+      <FullScreenImageViewer
+        v-if="isFullScreen"
+        :images="product.images"
+        :activeIndex="initialFullScreenIndex"
+        @close="closeFullScreen"
+      />
 
       <!-- Product info -->
       <div
@@ -92,11 +112,10 @@
 </template>
 
 <script setup>
-import {computed, onMounted, ref} from "vue";
+import {computed, onMounted, onUnmounted, ref} from "vue";
 import {useRoute, useRouter} from 'vue-router'
 import ProductOptions from "../components/ProductOptions/ProductOptions.vue";
 import {useCartStore} from "../stores/CartStore.js";
-import ProductImageSwiper from "../components/ProductImageSwiper.vue";
 import Quantity from "../components/Quantity.vue";
 import {SUPPORTED_OPTION_TYPES} from "@/constants/options.js";
 import {apiFetch} from "@/utils/ftch.js";
@@ -111,6 +130,11 @@ const router = useRouter();
 
 const isInCart = ref(false);
 const btnText = computed(() => isInCart.value ? 'В корзине' : 'Купить');
+const isFullScreen = ref(false);
+const initialFullScreenIndex = ref(0);
+
+import FullScreenImageViewer from "@/components/FullScreenImageViewer.vue";
+
 
 const canAddToCart = computed(() => {
   if (!product.value || product.value.options === undefined || product.value.options?.length === 0) {
@@ -126,6 +150,19 @@ const canAddToCart = computed(() => {
   return required.length === 0;
 });
 
+function showFullScreen(index) {
+  window.Telegram.WebApp.HapticFeedback.selectionChanged();
+  isFullScreen.value = true;
+  initialFullScreenIndex.value = index;
+  document.body.style.overflow = 'hidden';
+  history.pushState({ fullscreen: true }, '');
+}
+
+function closeFullScreen() {
+  isFullScreen.value = false;
+  document.body.style.overflow = '';
+}
+
 async function actionBtnClick() {
   try {
     error.value = '';
@@ -150,8 +187,35 @@ function setQuantity(newQuantity) {
   window.Telegram.WebApp.HapticFeedback.selectionChanged();
 }
 
+let canVibrate = true;
+
+function onPopState() {
+  if (isFullScreen.value) {
+    closeFullScreen();
+  } else {
+    // пусть Vue Router сам обработает
+    router.back();
+  }
+}
+
+onUnmounted(() => {
+  window.removeEventListener('popstate', onPopState);
+});
+
 onMounted(async () => {
   const {data} = await apiFetch(`/index.php?route=extension/tgshop/handle&api_action=product_show&id=${productId.value}`);
   product.value = data;
+
+  window.addEventListener('popstate', onPopState);
+
+  const swiperEl = document.querySelector('swiper-container');
+  swiperEl.addEventListener('swiperslidermove', (event) => {
+    if (!canVibrate) return;
+    window.Telegram.WebApp.HapticFeedback.impactOccurred('soft');
+    canVibrate = false;
+    setTimeout(() => {
+      canVibrate = true;
+    }, 50);
+  });
 });
 </script>