{"version":3,"file":"BKrilcvn.js","sources":["../../../../components/content/ZoomImage.vue"],"sourcesContent":["<template>\n    <NuxtImg v-bind=\"props\" class=\"aspect-auto zoom-image\" @click=\"open\" />\n</template>\n\n<style>\n.zoom-overlay {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    opacity: 0;\n    transition: opacity .3s;\n    will-change: opacity;\n    background: rgba(255, 255, 255, 0.5);\n    z-index: 20;\n}\n\n.zoom-loading {\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 3rem;\n    height: 3rem;\n    border: 0.5rem solid rgba(255, 255, 255, 0.5);\n    border-radius: 50%;\n    border-top: 0.5rem solid #1c1cf0;\n    z-index: 20;\n    animation: rotating 1.5s ease-in-out infinite;\n    will-change: transform, opacity;\n    transition: opacity 0.3s;\n}\n\n@keyframes rotating {\n    0% {\n        transform: translate(-50%, -50%) rotate(0deg)\n    }\n\n    100% {\n        transform: translate(-50%, -50%) rotate(360deg);\n    }\n}\n\n.zoom--opened .zoom-overlay {\n    cursor: pointer;\n    cursor: zoom-out;\n    opacity: 1\n}\n\n.zoom-image {\n    cursor: pointer;\n    cursor: zoom-in;\n    z-index: 21;\n    transition: transform .3s cubic-bezier(.2, 0, .2, 1) !important\n}\n\n.zoom-image--hidden {\n    visibility: hidden\n}\n\n.zoom-image--opened {\n    position: relative;\n    cursor: pointer;\n    cursor: zoom-out;\n    object-fit: contain;\n    will-change: transform;\n}\n</style>\n\n<script setup lang=\"ts\">\nconst props = defineProps({\n    src: String,\n    alt: String,\n    height: String,\n    width: String,\n    href: String,\n    quality: String,\n    loading: String,\n    class: String,\n    title: Boolean\n})\n\nconst image = ref(null)\nconst zoomed = ref(null)\nconst overlay = ref(null)\n\nconst scrollTop = ref(0)\n\nconst open = async (ev) => {\n    image.value = ev.target\n    overlay.value = document.createElement(\"div\")\n    overlay.value.classList.add(\"zoom-overlay\")\n    const loading = document.createElement(\"div\")\n    loading.classList.add(\"zoom-loading\")\n    overlay.value.appendChild(loading)\n    document.body.appendChild(overlay.value)\n    window.requestAnimationFrame(() => {\n        document.body.classList.add(\"zoom--opened\")\n    })\n    scrollTop.value = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0\n\n    // Load original image\n    try {\n        await loadImage(image.value.src)\n        createZoomed(zoomed.value)\n    } catch (err) {\n        console.error(err)\n    } finally {\n        loading.style.opacity = \"0\"\n        await new Promise(resolve => setTimeout(resolve, 0))\n        image.value.classList.add(\"zoom-image--hidden\")\n        zoomed.value.classList.add(\"zoom-image\")\n        zoomed.value.classList.add(\"zoom-image--opened\")\n        zoomed.value.addEventListener(\"click\", close, true)\n        overlay.value.addEventListener(\"click\", close, true)\n        document.addEventListener(\"keyup\", handleKeyUp)\n        document.addEventListener(\"scroll\", handleScroll)\n        window.addEventListener(\"resize\", close)\n    }\n}\nconst handleKeyUp = (event) => {\n    const key = event.key || event.keyCode;\n    if (key === \"Escape\" || key === \"Esc\" || key === 27) {\n        close()\n    }\n}\nconst handleScroll = () => {\n    const currentScroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;\n    if (Math.abs(scrollTop.value - currentScroll) > 200) {\n        setTimeout(close, 150);\n    }\n}\nconst close = () => {\n\n    if (zoomed.value) {\n        zoomed.value.style.transform = \"\"\n    }\n    setTimeout(() => {\n        if (image.value) {\n            image.value.classList.remove(\"zoom-image--hidden\")\n            image.value = null\n        }\n        if (zoomed.value) {\n            zoomed.value.removeEventListener(\"click\", close)\n            document.body.removeChild(zoomed.value)\n            zoomed.value = null\n        }\n\n        if (overlay.value) {\n            overlay.value.removeEventListener(\"click\", close)\n            document.body.removeChild(overlay.value)\n            overlay.value = null\n        }\n\n        document.removeEventListener(\"keyup\", handleKeyUp)\n        document.removeEventListener(\"scroll\", handleScroll)\n        window.removeEventListener(\"resize\", close)\n    }, 300)\n}\n\nconst createZoomed = (zoomImage) => {\n    const originalRect = image.value.getBoundingClientRect()\n    const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0\n    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0\n    zoomImage.style.position = \"absolute\"\n    zoomImage.style.top = originalRect.top + scrollTop + \"px\"\n    zoomImage.style.left = originalRect.left + scrollLeft + \"px\"\n    zoomImage.style.width = originalRect.width + \"px\"\n    zoomImage.style.height = originalRect.height + \"px\"\n    zoomImage.style.transform = \"\"\n\n    document.body.appendChild(zoomImage)\n    const viewportWidth = document.documentElement.clientWidth - 30 * 2\n    const viewportHeight = document.documentElement.clientHeight - 30 * 2\n    const naturalWidth = zoomImage.naturalWidth || viewportWidth\n    const naturalHeight = zoomImage.naturalHeight || viewportHeight\n    const imageRect = zoomImage.getBoundingClientRect()\n    const top = imageRect.top\n    const left = imageRect.left\n    const width = imageRect.width\n    const height = imageRect.height\n    const scaleX = Math.min(Math.max(width, naturalWidth), viewportWidth) / width\n    const scaleY = Math.min(Math.max(height, naturalHeight), viewportHeight) / height\n    const scale = Math.min(scaleX, scaleY)\n    const translateX = (-left + (viewportWidth - width) / 2 + 30) / scale\n    const translateY = (-top + (viewportHeight - height) / 2 + 30) / scale\n    const transform = \"scale(\" + scale + \") translate3d(\" + translateX + \"px, \" + translateY + \"px, 0)\"\n    zoomImage.style.transform = transform\n}\n\n\nconst loadImage = (url) => {\n    return new Promise((resolve, reject) => {\n        const image = new Image()\n        image.src = \"/assets/\" + url.split('/assets/')[1]\n        image.onload = () => {\n            zoomed.value = image\n            resolve(image)\n        }\n        image.onerror = () => {\n            reject(new Error(\"Failed to load image.\"))\n        }\n    })\n}\n</script>"],"names":["props","__props","image","ref","zoomed","overlay","scrollTop","open","ev","loading","loadImage","createZoomed","err","resolve","close","handleKeyUp","handleScroll","event","key","currentScroll","zoomImage","originalRect","scrollLeft","viewportWidth","viewportHeight","naturalWidth","naturalHeight","imageRect","top","left","width","height","scaleX","scaleY","scale","translateX","translateY","transform","url","reject"],"mappings":"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"}