{"version":3,"file":"BQ2q4LkK.js","sources":["../../../../../../../app/components/CiCampsiteMedia/CiCampsiteMediaImage.vue","../../../../../../../app/composables/useCampsiteMedia.ts"],"sourcesContent":["<script setup lang=\"ts\">\n// components\nimport CiCampsiteMediaInfo from '@/components/CiCampsiteMedia/CiCampsiteMediaInfo.vue';\n\n/********************\n * REFS & VARS       *\n ********************/\nexport interface CiCampsiteMediaImageProps {\n  item: any;\n  selected?: boolean;\n  showUser?: boolean;\n  altFallback?: string;\n}\nconst props = withDefaults(defineProps<CiCampsiteMediaImageProps>(), {\n  selected: false,\n  showUser: true,\n});\n\n/********************\n * COMPOSITIONS      *\n ********************/\nconst { fixImageUrlAndCheckWebp } = useWebp();\n\n/********************\n * REFS & VARS       *\n ********************/\nconst sizes = {\n  small: [650, 433],\n  big: [1110, 740],\n};\n\nconst description = computed(() => {\n  return props.item.description || `${props.altFallback} image ${props.item.idx}`;\n});\n\n/********************\n * FUNCTIONS         *\n ********************/\nfunction getPicture(selected = false) {\n  const smallImg = props.item.images.small;\n  const bigImg = props.item.images.big;\n  const [smallWidth, smallHeight] = sizes.small;\n  const [bigWidth, bigHeight] = sizes.big;\n  const smallJpg = fixImageUrlAndCheckWebp(smallImg);\n  const smallWebp = fixImageUrlAndCheckWebp(smallImg, true);\n  const bigJpg = fixImageUrlAndCheckWebp(bigImg);\n  const bigWebp = fixImageUrlAndCheckWebp(bigImg, true);\n\n  const selectedPictures = [\n    {\n      srcset: `${bigWebp.url} ${bigWidth}w`,\n      media: '(min-width: 992px)',\n      type: bigWebp.contentType,\n      width: bigWidth,\n      height: bigHeight,\n    },\n    {\n      srcset: `${bigJpg.url} ${bigWidth}w`,\n      media: '(min-width: 992px)',\n      type: bigJpg.contentType,\n      width: bigWidth,\n      height: bigHeight,\n    },\n    {\n      srcset: `${smallWebp.url} ${smallWidth}w`,\n      media: '(min-width: 0px)',\n      type: smallWebp.contentType,\n      width: smallWidth,\n      height: smallHeight,\n    },\n    {\n      srcset: `${smallJpg.url} ${smallWidth}w`,\n      media: '(min-width: 0px)',\n      type: smallJpg.contentType,\n      width: smallWidth,\n      height: smallHeight,\n    },\n  ];\n\n  if (selected) {\n    return selectedPictures;\n  }\n  return [\n    {\n      srcset: `${smallWebp.url} ${smallWidth}w`,\n      media: '(min-width: 1200px)',\n      type: smallWebp.contentType,\n      width: smallWidth,\n      height: smallHeight,\n    },\n    {\n      srcset: `${smallJpg.url} ${smallWidth}w`,\n      media: '(min-width: 1200px)',\n      type: smallJpg.contentType,\n      width: smallWidth,\n      height: smallHeight,\n    },\n    ...selectedPictures,\n  ];\n}\n</script>\n\n<template>\n  <div\n    class=\"media-type-picture relative overflow-hidden rounded pt-[66.61%]\"\n    :class=\"{ 'selected': props.selected, 'bg-gray-10': !props.selected }\"\n  >\n    <template v-if=\"!props.item.eager\">\n      <client-only>\n        <picture>\n          <source\n            v-for=\"(source, idx) of getPicture()\"\n            :key=\"idx\"\n            :srcset=\"source.srcset\"\n            :media=\"source.media\"\n            :type=\"source.type\"\n          />\n\n          <img\n            :src=\"props.item.images.small\"\n            :width=\"sizes.small[0]\"\n            :height=\"sizes.small[1]\"\n            class=\"image absolute left-0 top-0 size-full\"\n            loading=\"lazy\"\n            :alt=\"description\"\n          />\n        </picture>\n      </client-only>\n    </template>\n    <picture v-else>\n      <source\n        v-for=\"(source, idx) of getPicture()\"\n        :key=\"idx\"\n        :srcset=\"source.srcset\"\n        :media=\"source.media\"\n        :type=\"source.type\"\n      />\n\n      <img\n        :src=\"item.images.small\"\n        :width=\"sizes.small[0]\"\n        :height=\"sizes.small[0]\"\n        class=\"image absolute left-0 top-0 size-full\"\n        :alt=\"description\"\n        loading=\"eager\"\n      />\n    </picture>\n\n    <!-- selected -->\n    <picture v-if=\"selected\">\n      <source\n        v-for=\"(source, idx) of getPicture(true)\"\n        :key=\"idx\"\n        :srcset=\"source.srcset\"\n        :media=\"source.media\"\n        :type=\"source.type\"\n      />\n      <img\n        :src=\"item.images.small\"\n        :width=\"sizes.small[0]\"\n        :height=\"sizes.small[1]\"\n        class=\"image absolute left-0 top-0 h-auto w-full rounded\"\n        :alt=\"description\"\n        loading=\"eager\"\n      />\n    </picture>\n    <CiCampsiteMediaInfo\n      v-if=\"props.selected\"\n      :item=\"props.item\"\n      :show-user=\"props.showUser\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.media-type-picture {\n  &.selected .image {\n    height: auto !important;\n  }\n}\n</style>\n","export default function useCampsiteMedia() {\n  /********************\n   * REFS & VARS       *\n   ********************/\n  const campsite = ref<Record<string, unknown>>({ media: [] });\n  const mediaItemRefs = ref<Record<number, HTMLElement>>({});\n  const selectedItemIdx = ref<number | null>(null);\n\n  /********************\n   * FUNCTIONS         *\n   ********************/\n  function onKeyUp(event: KeyboardEvent) {\n    // ArrowLeft, ArrowRight, Escape\n    if (event.key === 'ArrowLeft') {\n      selectNextMediaItem(-1);\n    } else if (event.key === 'ArrowRight') {\n      selectNextMediaItem(1);\n    } else if (event.key === 'Escape') {\n      deselectCurrentMediaItem();\n    }\n  }\n\n  function getMediaItemByMediaIdx(idx) {\n    const items = campsite.value.media.filter(item => item.idx === idx);\n    if (!items.length) {\n      return null;\n    }\n    return items[0];\n  }\n\n  function getNextMediaItemIndex(idx: number | null, direction = 1): number | null {\n    if (idx === null && direction === 1) {\n      idx = -1;\n    }\n\n    let items = [];\n    if (direction > 0) {\n      items = campsite.value.media.filter(item => item.idx > idx);\n    } else {\n      items = campsite.value.media.filter(item => item.idx < idx);\n    }\n    if (!items.length) {\n      return null;\n    }\n    if (direction > 0) {\n      return items[0].idx;\n    } else {\n      return items[items.length - 1].idx;\n    }\n  }\n\n  function selectNextMediaItem(direction) {\n    const newIdx = getNextMediaItemIndex(selectedItemIdx.value, direction);\n    if (newIdx === null) {\n      return;\n    }\n    selectedItemIdx.value = newIdx;\n    toggleSelectedMedia(\n      getMediaItemByMediaIdx(selectedItemIdx.value),\n      mediaItemRefs.value[selectedItemIdx.value]?.firstElementChild,\n      true,\n    );\n  }\n\n  function deselectCurrentMediaItem() {\n    if (selectedItemIdx.value === null) {\n      return;\n    }\n    toggleSelectedMedia(\n      getMediaItemByMediaIdx(selectedItemIdx.value),\n      mediaItemRefs.value[selectedItemIdx.value]?.firstElementChild,\n      false,\n    );\n  }\n\n  function isSelected(item) {\n    return !!item.selected;\n  }\n\n  function onMediaItemClicked(event, item, offset = 0) {\n    selectedItemIdx.value = item.idx;\n    toggleSelectedMedia(item, event.currentTarget, null, offset);\n  }\n\n  function toggleSelectedMedia(\n    media,\n    htmlElement: HTMLElement | Element | null = null,\n    val: null | boolean = null,\n    offset = 0,\n  ) {\n    media.selected = val !== null ? val : !media.selected;\n\n    if (htmlElement !== null) {\n      if (offset > 0) {\n        nextTick(() => {\n          window.scroll({ top: getOffsetTop(htmlElement) - offset, behavior: 'smooth' });\n        });\n      } else {\n        nextTick(() => {\n          htmlElement.scrollIntoView({ behavior: 'smooth' });\n        });\n      }\n    }\n  }\n\n  return {\n    campsite,\n    isSelected,\n    mediaItemRefs,\n    onKeyUp,\n    onMediaItemClicked,\n    selectedItemIdx,\n  };\n}\n"],"names":["props","__props","fixImageUrlAndCheckWebp","useWebp","sizes","description","computed","getPicture","selected","smallImg","bigImg","smallWidth","smallHeight","bigWidth","bigHeight","smallJpg","smallWebp","bigJpg","bigWebp","selectedPictures","useCampsiteMedia","campsite","ref","mediaItemRefs","selectedItemIdx","onKeyUp","event","selectNextMediaItem","deselectCurrentMediaItem","getMediaItemByMediaIdx","idx","items","item","getNextMediaItemIndex","direction","newIdx","toggleSelectedMedia","_a","isSelected","onMediaItemClicked","offset","media","htmlElement","val","nextTick","getOffsetTop"],"mappings":"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"}