hossein-por-shop/frontend/components/home/Preview.vue

<script setup lang="ts">

// import

import useHomeData from "~/composables/api/home/useHomeData";

// state

const { data: homeData } = useHomeData();

const clipPathPercent = ref(49);

const activeSlideVideo = ref<"left" | "right" | "none">("none");

const draggableEl = ref<HTMLElement | null>(null);
const previewContainerEl = ref<HTMLElement | null>(null);

const { x: dragAxisX } = useDraggable(draggableEl, {
    initialValue: { x: 0, y: 0 },
    axis: "x"
});

// watch

watch(() => clipPathPercent.value, (newValue) => {
    if (newValue > 80) {
        activeSlideVideo.value = "right";
    } else if (newValue < 20) {
        activeSlideVideo.value = "left";
    } else {
        activeSlideVideo.value = "none";
    }
});

watch(
    () => dragAxisX.value,
    (newValue) => {
        const clientRect = previewContainerEl.value?.getBoundingClientRect()!;
        const percent = clientRect.width / 100;
        const clipPercent = ((newValue + draggableEl.value!.clientWidth / 2) - clientRect.x - 8) / percent;
        if (clipPercent >= 5 && clipPercent <= 95) {
            clipPathPercent.value = clipPercent;
        }
    }
);
</script>

<template>
    <div class="container">
        <div class="flex flex-col items-center gap-3 mb-10 lg:mb-16">
            <span class="typo-p-sm md:typo-p-md text-slate-500">مقایسه محصولات</span>
            <span class="typo-h-6 md:typo-h-5 lg:typo-h-3 text-black">
                تفاوت محصلات ما را ببینید
            </span>
        </div>
        <div
            ref="previewContainerEl"
            class="rounded-200 overflow-hidden h-[70svh] md:h-[80svh] relative"
        >
            <Transition name="fade">
                <img
                    v-if="activeSlideVideo !== 'right'"
                    :src="homeData!.difreance_section.image1"
                    class="select-none absolute size-full object-cover brightness-[95%]"
                    :alt="homeData!.difreance_section.title1"
                />
                <video
                    v-else
                    autoplay
                    muted
                    src="/video/vid-3.mp4"
                    class="select-none absolute size-full object-cover brightness-[95%]"
                />
            </Transition>

            <div class="absolute size-full right-0 w-full">
                <Transition name="fade">
                    <img
                        v-if="activeSlideVideo !== 'left'"
                        :src="homeData!.difreance_section.image2"
                        class="overlay-image select-none absolute object-cover size-full brightness-[95%]"
                        :alt="homeData!.difreance_section.title2"
                    />
                    <video
                        v-else
                        autoplay
                        muted
                        src="/video/vid-3.mp4"
                        class="overlay-image select-none absolute object-cover size-full brightness-[95%]"
                    />
                </Transition>
                <div
                    :style="{
                        left: `${clipPathPercent}%`,
                    }"
                    class="select-none w-2 h-full bg-black absolute left-0 flex items-center justify-center"
                >
                    <div
                        ref="draggableEl"
                        class="cursor-grab hover:scale-115 transition-transform rounded-full absolute bg-black size-11 flex items-center justify-center"
                    >
                        <Icon
                            name="ci:arrows"
                            size="24"
                            class="**:stroke-white"
                        />
                    </div>
                </div>
            </div>

            <div
                class="max-xs:hidden absolute bottom-0 p-6 md:p-10 w-full flex justify-between items-end"
            >
                <div class="flex flex-col gap-2 text-black">
                    <span class="typo-p-sm md:typo-p-md">
                        {{ homeData!.difreance_section.description1 }}
                    </span>
                    <NuxtLink
                        :to="homeData!.difreance_section.link1"
                        class="typo-h-6 md:typo-h-5 lg:typo-h-3"
                    >
                        {{ homeData!.difreance_section.title1 }}
                    </NuxtLink>
                </div>
                <div class="flex flex-col gap-2 text-black">
                    <span class="typo-p-sm md:typo-p-md text-end">
                        {{ homeData!.difreance_section.description2 }}
                    </span>
                    <NuxtLink
                        :to="homeData!.difreance_section.link2"
                        class="typo-h-6 md:typo-h-5 lg:typo-h-3 text-end"
                    >
                        {{ homeData!.difreance_section.title2 }}
                    </NuxtLink>
                </div>
            </div>
        </div>
    </div>
</template>

<style>
.overlay-image {
    clip-path: polygon(
        v-bind('clipPathPercent + "%"') 0,
        100% 0,
        100% 100%,
        v-bind('clipPathPercent + "%"') 100%
    );
}
</style>