feat: add fullscreen viewer

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>