feat: add fullscreen viewer

spa/src/components/ProductImageSwiper.vue

@@ -1,100 +1,49 @@
 <template>
-  <div class="aspect-w-4 aspect-h-3">
-    <swiper
-        :lazy="true"
-        :pagination="pagination"
-        :navigation="true"
-        :modules="modules"
-        class="mySwiper w-full min-h-[200px]"
-        @touchMove="onTouchMove"
+  <swiper-container ref="swiperEl" pagination="true">
+    <swiper-slide
+        v-for="image in images"
+        lazy
     >
-      <swiper-slide v-for="image in images">
-        <img
-            :src="image.url"
-            :alt="image.alt"
-            loading="lazy"
-        />
-        <div
-            class="swiper-lazy-preloader swiper-lazy-preloader-white"
-        ></div>
-      </swiper-slide>
-    </swiper>
-  </div>
-
+      <img
+          :src="image.url"
+          :alt="image.alt"
+          loading="lazy"
+      />
+    </swiper-slide>
+  </swiper-container>
 </template>
 
-<script>
-import {Swiper, SwiperSlide} from 'swiper/vue';
+<script setup>
+import {onMounted, ref} from "vue";
 
-import 'swiper/css';
-import 'swiper/css/pagination';
-
-import {Pagination} from 'swiper/modules';
-
-
-export default {
-  components: {
-    Swiper,
-    SwiperSlide,
+const props = defineProps({
+  images: {
+    type: Array,
+    default: () => [],
   },
+});
 
-  props: {
-    images: {
-      type: Array,
-      default: () => [],
-    }
-  },
+const swiperEl = ref(null);
 
-  setup() {
-    const throttle = (func, delay) => {
-      let lastCall = 0;
-      return (...args) => {
-        const now = Date.now();
-        if (now - lastCall >= delay) {
-          lastCall = now;
-          func(...args);
-        }
-      };
-    };
+let haptic = true;
 
-    const hapticTick = throttle(() => {
-      const haptic = window?.Telegram?.WebApp?.HapticFeedback;
-      if (haptic?.selectionChanged) {
-        haptic.selectionChanged();
-      } else if (haptic?.impactOccurred) {
-        haptic.impactOccurred('light');
-      }
-    }, 100);
+onMounted(async () => {
+  swiperEl.value?.addEventListener('swiperactiveindexchange', (event) => {
+    window.Telegram.WebApp.HapticFeedback.selectionChanged();
+  });
 
-    const onTouchMove = () => {
-      hapticTick();
-    };
+  swiperEl.value?.addEventListener('swiperprogress', (num) => {
+    if (haptic === false) return;
+    window.Telegram.WebApp.HapticFeedback.impactOccurred('light');
+    haptic = false;
+    setTimeout(() => haptic = true, 50);
+  });
 
-    return {
-      pagination: {
-        clickable: true,
-        dynamicBullets: true,
-      },
-      modules: [Pagination],
-      onTouchMove,
-    };
-  },
-};
+  swiperEl.value?.addEventListener('swiperreachbeginning', (event) => {
+    window.Telegram.WebApp.HapticFeedback.impactOccurred('medium');
+  });
+  swiperEl.value?.addEventListener('swiperreachend', (event) => {
+    window.Telegram.WebApp.HapticFeedback.impactOccurred('medium');
+  });
+});
 </script>
-
-<style scoped>
-.product-swiper {
-  width: 100%;
-  height: auto;
-}
-
-.swiper-slide {
-  text-align: center;
-}
-
-img {
-  width: 100%;
-  display: block;
-  object-fit: contain;
-}
-</style>