113 lines
2.4 KiB
Vue
113 lines
2.4 KiB
Vue
<template>
|
|
<div class="product-image-swiper">
|
|
<Swiper
|
|
:lazy="true"
|
|
:modules="modules"
|
|
:pagination="pagination"
|
|
@sliderMove="hapticScroll"
|
|
>
|
|
<SwiperSlide
|
|
v-for="(image, index) in images"
|
|
:key="image.url"
|
|
>
|
|
<img
|
|
:src="image.thumbnailURL"
|
|
:alt="image.alt"
|
|
loading="lazy"
|
|
@click="showFullScreen(index)"
|
|
/>
|
|
</SwiperSlide>
|
|
</Swiper>
|
|
|
|
<FullScreenImageViewer
|
|
v-if="isFullScreen"
|
|
:images="images"
|
|
:activeIndex="initialFullScreenIndex"
|
|
@close="closeFullScreen"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {Swiper, SwiperSlide} from 'swiper/vue';
|
|
import FullScreenImageViewer from "@/components/FullScreenImageViewer.vue";
|
|
import {useHapticFeedback} from "@/composables/useHapticFeedback.js";
|
|
import {onMounted, onUnmounted, ref} from "vue";
|
|
import {useHapticScroll} from "@/composables/useHapticScroll.js";
|
|
import {useRouter} from "vue-router";
|
|
|
|
const emit = defineEmits(['onLoad']);
|
|
|
|
const props = defineProps({
|
|
images: {
|
|
type: Array,
|
|
default: [],
|
|
}
|
|
});
|
|
|
|
const router = useRouter();
|
|
const haptic = useHapticFeedback();
|
|
const hapticScroll = useHapticScroll();
|
|
const pagination = {
|
|
clickable: true,
|
|
};
|
|
const modules = [];
|
|
const isFullScreen = ref(false);
|
|
const initialFullScreenIndex = ref(0);
|
|
|
|
function showFullScreen(index) {
|
|
haptic.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 = '';
|
|
}
|
|
|
|
function onPopState() {
|
|
if (isFullScreen.value) {
|
|
closeFullScreen();
|
|
} else {
|
|
// пусть Vue Router сам обработает
|
|
router.back();
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
window.addEventListener('popstate', onPopState);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener('popstate', onPopState);
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.swiper-slide {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.swiper {
|
|
height: 500px;
|
|
border-radius: var(--radius-box, 0.5rem);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.swiper-slide img {
|
|
width: 100%;
|
|
height: 500px;
|
|
object-fit: contain;
|
|
cursor: pointer;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.swiper-slide img:active {
|
|
transform: scale(0.98);
|
|
}
|
|
</style> |