{"version":3,"file":"BjQ-rr5O.js","sources":["../../../../../../../app/components/CiCampsiteMedia/CiCampsiteMediaPanono.vue","../../../../../../../app/pages/campsite/[identifier]/media/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\nexport interface CiCampsiteMediaPanonoProps {\n  panonoId: string;\n  selected?: boolean;\n}\nconst props = withDefaults(defineProps<CiCampsiteMediaPanonoProps>(), {\n  selected: false,\n});\n</script>\n\n<template>\n  <div class=\"h-full\">\n    <div\n      class=\"aspect-video rounded\"\n      style=\"-webkit-mask-image: -webkit-radial-gradient(white, black)\"\n    >\n      <div\n        v-if=\"!props.selected\"\n        class=\"click-area absolute left-0 top-0 z-10 size-full cursor-pointer\"\n      />\n      <client-only>\n        <iframe\n          :src=\"`//cloud.panono.com/p/${props.panonoId}/embed`\"\n          class=\"absoluter left-0 top-0 size-full\"\n          allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n          allowfullscreen\n          title=\"panono\"\n          loading=\"lazy\"\n        />\n      </client-only>\n    </div>\n  </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n.no-touch .click-area {\n  @apply block;\n}\n</style>\n","<script setup lang=\"ts\">\n// icons\nimport { faArrowUp, faChevronLeft, faChevronRight } from '@fortawesome/pro-solid-svg-icons';\nimport { faCube, faSearchPlus } from '@fortawesome/pro-light-svg-icons';\n\n// components\nimport CiCampsiteMediaImage from '@/components/CiCampsiteMedia/CiCampsiteMediaImage.vue';\nimport CiCampsiteMediaPanono from '@/components/CiCampsiteMedia/CiCampsiteMediaPanono.vue';\nimport CiCampsiteMediaVideo from '@/components/CiCampsiteMedia/CiCampsiteMediaVideo.vue';\nimport CiSkeletonItem from '@/components/skeleton/CiSkeletonItem.vue';\nimport CiStickyNavigation from '@/components/CiStickyNavigation/CiStickyNavigation.vue';\n\ntype Links = { campsite: number[]; visitor: number[] };\n\ndefinePageMeta({\n  layout: 'default',\n});\n\n/********************\n * COMPOSITIONS      *\n ********************/\nconst localePath = useLocalePath();\nconst route = useRoute();\nconst searchService = useSearchService();\nconst seoStore = useSeoStore();\nconst viewport = useViewport();\nconst { $gettext, $pgettext } = useGettext();\nconst { campsite, onKeyUp, isSelected, onMediaItemClicked, mediaItemRefs } = useCampsiteMedia();\nconst { fetchError, fetchFailed, fetchStatus } = useFetchError();\nconst { locale } = useI18n();\nconst { requestAds } = useAds();\n\nconst { ppcWebsiteLink } = useCampsiteDetail({\n  campsite: () => campsite.value,\n});\n\nconst { hasAds, isPartOfAvailabilityService, getPreEnterData } = useCampsiteAdsAs({\n  campsite: () => campsite.value,\n});\n\nconst { scrollToRef, sectionRefs } = useCampsiteDetail({\n  campsite: () => campsite.value,\n});\n\n/********************\n * REFS & VARS       *\n ********************/\nconst dividerTexts = reactive({\n  picture: {\n    campsite: '',\n    visitor: '',\n  },\n  video: {\n    campsite: '',\n    visitor: '',\n  },\n});\n\nconst freezeBottomNavbar = ref(false);\nconst lastScrollPosition = ref(0);\nconst links = ref<Links | null>(null);\nconst prepareStickyNavigationItems = ref([]);\nconst showBottomNavbar = ref(false);\nconst subNavigationAnchors = ref([]);\n\n/********************\n * INITIALIZATION    *\n ********************/\nif (import.meta.client) {\n  await useAsyncData(route.fullPath, getPreEnterData);\n}\nconst { data: loadedData, pending, error } = await useLazyAsyncData(`media-${route.params.identifier}`, async () => {\n  try {\n    const response = await searchService.getCampsiteMedia(route.params?.identifier as string, locale.value);\n    const dividers: any = {};\n    const stickyNavigationItems: any[] = [];\n    let firstTwoImages: number = 0;\n    const hasPpcOrAs\n      = (response.purchases ? response.purchases.includes(256) : false) || [\n        'ctoutvert',\n        'compusoft',\n        'camping.info-bvcd',\n        'camping.info-booking',\n        'camping.care',\n        'phobs',\n      ].includes(response.booking_provider);\n\n    /*\n      1. campsite pics\n      2. panono\n      3. campsite vids\n      4. visitor pics\n      5. visitor vids\n    */\n    const orders: any = {\n      'picture-campsite': 0,\n      'panono': 1,\n      'video-campsite': 2,\n      'picture-visitor': 3,\n      'video-visitor': 4,\n    };\n\n    response.media.sort((a: any, b: any) => {\n      const subtypeA = a.media_type === 'panono' ? '' : `-${a.picture_type || a.video_type}`;\n      const subtypeB = b.media_type === 'panono' ? '' : `-${b.picture_type || b.video_type}`;\n      const orderKeyA = `${a.media_type}${subtypeA}`;\n      const orderKeyB = `${b.media_type}${subtypeB}`;\n      const orderA: number = orders[orderKeyA];\n      const orderB: number = orders[orderKeyB];\n\n      if (orderA < orderB) {\n        return -1;\n      } else if (orderA > orderB) {\n        return 1;\n      }\n      return 0;\n    });\n\n    response.media.map((item: any, idx: number) => {\n      const mediaType = item.media_type;\n      const pictureType = item.picture_type;\n      const videoType = item.video_type;\n      const dividerType = `${mediaType}-${pictureType}-${videoType}`;\n\n      if (mediaType === 'picture') {\n        firstTwoImages += 1;\n      }\n\n      item.idx = idx;\n      item.eager = firstTwoImages < 3;\n\n      if (!dividers[dividerType]) {\n        dividers[dividerType] = true;\n\n        if (mediaType !== 'panono') {\n          const subType = pictureType || videoType || 'campsite';\n          const anchor = `${subType}-${mediaType}`;\n\n          if (idx % 2 === 0) {\n            idx++;\n          }\n\n          stickyNavigationItems.push({\n            anchor,\n            label: [mediaType, subType],\n          });\n        }\n      }\n      item.selected = false;\n      // media.push(item);\n      return item;\n    });\n\n    response.mediaStructured = {\n      campsite: [],\n      visitor: [],\n    };\n\n    response.media.forEach((item) => {\n      if (item.media_type === 'panono') {\n        response.mediaStructured['campsite'].push(item);\n      } else if (item.media_type === 'picture') {\n        if (item.picture_type === 'campsite') {\n          response.mediaStructured['campsite'].push(item);\n        } else if (item.picture_type === 'visitor') {\n          response.mediaStructured['visitor'].push(item);\n        }\n      } else if (item.media_type === 'video') {\n        if (item.video_type === 'campsite') {\n          response.mediaStructured['campsite'].push(item);\n        } else if (item.video_type === 'visitor') {\n          response.mediaStructured['visitor'].push(item);\n        }\n      }\n    });\n\n    const links: Links = {\n      campsite: [],\n      visitor: [],\n    };\n\n    if (hasPpcOrAs) {\n      links['campsite'] = getLinksForMedia(response.mediaStructured['campsite'].length);\n      links['visitor'] = getLinksForMedia(response.mediaStructured['visitor'].length);\n    }\n\n    seoStore.setDynamicMetaParam({\n      campsite_name: response.name,\n    });\n\n    return {\n      campsite: response,\n      links,\n      stickyNavigationItems,\n    };\n  } catch (error) {\n    fetchError(error);\n    return error;\n  }\n});\n\nif (error.value) {\n  throw createError({ statusCode: error.value?.statusCode, message: error.value.statusMessage });\n}\n\nonMounted(() => {\n  window.addEventListener('scroll', onScroll);\n  window.addEventListener('keyup', onKeyUp);\n});\n\nonBeforeUnmount(() => {\n  window.removeEventListener('scroll', onScroll);\n  window.removeEventListener('keyup', onKeyUp);\n});\n\n/********************\n * FUNCTIONS         *\n ********************/\nwatch(() => loadedData.value, setData, { immediate: true });\n\nfunction setData(newValue) {\n  if (newValue) {\n    campsite.value = newValue.campsite;\n    links.value = newValue.links;\n    prepareStickyNavigationItems.value = newValue.stickyNavigationItems;\n    setTimeout(() => {\n      initStickyNavigation();\n    }, 100);\n\n    nextTick(() => {\n      // refresh ad slots\n      requestAds();\n    });\n  }\n}\n\nfunction initStickyNavigation() {\n  const getReduceFunction = (mediaType, subType) => {\n    return (sum, obj) => {\n      let n = 0;\n      const objSubType = obj.picture_type || obj.video_type || null;\n      if (obj.media_type === mediaType && objSubType === subType) {\n        n = 1;\n      }\n      return sum + n;\n    };\n  };\n  const numItems = (mediaType, subType) => campsite.value.media?.reduce(getReduceFunction(mediaType, subType), 0);\n  const counts = {\n    picture: {\n      campsite: numItems('picture', 'campsite') + numItems('panono', null),\n      visitor: numItems('picture', 'visitor'),\n    },\n    video: {\n      campsite: numItems('video', 'campsite'),\n      visitor: numItems('video', 'visitor'),\n    },\n  };\n  const getNavigationText = (mediaType, subType, withCount = true) => {\n    const texts = {\n      picture: {\n        campsite: $pgettext('Media Sticky navigation - keep this short!', 'Campsite owner photos'),\n        visitor: $pgettext('Media Sticky navigation - keep this short!', 'Guests photos'),\n      },\n      video: {\n        campsite: $pgettext('Media Sticky navigation - keep this short!', 'Campsite owner videos'),\n        visitor: $pgettext('Media Sticky navigation - keep this short!', 'Guests videos'),\n      },\n    };\n    if (texts[mediaType]) {\n      let count = 0;\n      if (counts[mediaType]) {\n        count = counts[mediaType][subType];\n      }\n      if (withCount) {\n        return (\n          `${texts[mediaType][subType]} <span class=\"ml-1 inline-block rounded-[10rem] bg-primary px-[7px] py-[3px] text-xs font-bold leading-3 text-white\">${count}</span>`\n        );\n      } else {\n        return texts[mediaType][subType] || '';\n      }\n    }\n  };\n\n  const navAnchors = [];\n  prepareStickyNavigationItems.value.forEach((item) => {\n    dividerTexts[item.label[0]][item.label[1]] = getNavigationText(item.label[0], item.label[1], false);\n    navAnchors.push({\n      anchor: item.anchor,\n      label: getNavigationText(item.label[0], item.label[1]),\n      ref: sectionRefs[item.anchor],\n    });\n  });\n  subNavigationAnchors.value = navAnchors;\n}\n\nfunction onScroll() {\n  // Get the current scroll position\n  const currentScrollPosition = window.pageYOffset || document.documentElement.scrollTop;\n  // Because of momentum scrolling on mobiles, we shouldn't continue if it is less than zero\n  if (currentScrollPosition < 0) {\n    return;\n  }\n  let scrolledToBottomOffset = 50;\n  const footer = document.getElementById('footer');\n  if (footer) {\n    scrolledToBottomOffset = footer.clientHeight;\n  }\n  freezeBottomNavbar.value = false;\n  if (Math.abs(currentScrollPosition + window.innerHeight - document.body.offsetHeight) <= scrolledToBottomOffset) {\n    showBottomNavbar.value = true;\n    freezeBottomNavbar.value = true;\n    lastScrollPosition.value = currentScrollPosition;\n    return;\n  }\n  if (Math.abs(currentScrollPosition - lastScrollPosition.value) < 60) {\n    return;\n  }\n  // Here we determine whether we need to show or hide the navbar\n  showBottomNavbar.value = currentScrollPosition > 150 && currentScrollPosition < lastScrollPosition.value;\n  // Set the current scroll position as the last scroll position\n  lastScrollPosition.value = currentScrollPosition;\n}\n\nfunction getMediaItemClasses(item) {\n  return [isSelected(item) ? 'selected' : 'col-lg-6 group', `media-item--${item.media_type}`];\n}\n\nfunction onScrollToTop() {\n  window.scrollTo({ top: 0, behavior: 'smooth' });\n}\n\nfunction getAdId(idx) {\n  const mapping = {\n    9: 'camping_content_3',\n    13: 'camping_content_4',\n    17: 'camping_content_5',\n  };\n  return mapping[idx] || '';\n}\n\nfunction getLinksForMedia(numMedia: number) {\n  let links: any[] = [];\n  if (numMedia < 3) {\n    links = [numMedia];\n  } else {\n    links = [4];\n    const sample = 1;\n    let maxNum = Math.max(1, Math.floor(numMedia / sample));\n    let minNum = Math.max(Math.floor(maxNum / 2), 1);\n    const numPpc = Math.floor(Math.random() * (maxNum - minNum + 1) + minNum);\n\n    let lastPpcOrAs = 2;\n    for (let i = 0; i < numPpc; i++) {\n      minNum = lastPpcOrAs + 2;\n      maxNum = Math.min(numMedia, minNum + i * Math.floor(numMedia / numPpc));\n      lastPpcOrAs\n            = Math.min(\n          Math.floor(numMedia / 2),\n          Math.floor(\n            Math.random() * (Math.floor(maxNum / 2) - Math.floor(minNum / 2) + 1) + Math.floor(minNum / 2),\n          ),\n        ) * 2;\n      if (!links.includes(lastPpcOrAs) && !links.includes(lastPpcOrAs - 1) && !links.includes(lastPpcOrAs - 2)) {\n        links.push(lastPpcOrAs);\n      }\n    }\n  }\n  return links;\n}\n</script>\n\n<template>\n  <div>\n    <template v-if=\"!fetchFailed\">\n      <template v-if=\"pending\">\n        <CiSkeletonItem\n          color=\"#f5f5f5\"\n          class=\"h-[114px] border-b-2 border-gray-40\"\n        />\n\n        <template v-if=\"hasAds\">\n          <div class=\"absolute size-full\">\n            <div class=\"container h-full\">\n              <div class=\"flex h-full\">\n                <CiSkeletonItem\n                  class=\"ad ad--skyscraper ad--skyscraper-left sticky top-0 z-10\"\n                  style=\"top: 50px\"\n                />\n                <CiSkeletonItem\n                  class=\"ad ad--skyscraper ad--skyscraper-right sticky top-0 z-10\"\n                  style=\"top: 50px\"\n                />\n              </div>\n            </div>\n          </div>\n\n          <div class=\"container-lg mb-4 mt-2 pt-0\">\n            <CiSkeletonItem class=\"ad ad--header\" />\n          </div>\n        </template>\n\n        <div class=\"container mt-4\">\n          <div class=\"row row-small-gutter\">\n            <template\n              v-for=\"idx in 8\"\n              :key=\"`item_${idx}`\"\n            >\n              <div class=\"media-item col-12 col-lg-6 mb-[10px]\">\n                <CiSkeletonItem class=\"relative h-full rounded pt-[66.61%]\" />\n              </div>\n\n              <template v-if=\"hasAds && idx === 4\">\n                <div\n                  :key=\"`ad_${idx}`\"\n                  class=\"col-12\"\n                >\n                  <CiSkeletonItem class=\"ad--h-600-480-570 mb-[10px] w-full\" />\n                </div>\n              </template>\n            </template>\n          </div>\n        </div>\n      </template>\n      <template v-else>\n        <!-- back navigation -->\n        <div class=\"bg-gray-10\">\n          <div class=\"container py-2\">\n            <CiNavigationToggle\n              type=\"black\"\n              :href=\"localePath({ name: RBN_CAMPSITE_DETAIL, params: { identifier: route.params.identifier } })\"\n            >\n              <span class=\"ml-3 text-dark\">{{ $gettext('Back to %{campsite}', { campsite: campsite.name }, true) }}</span>\n            </CiNavigationToggle>\n          </div>\n        </div>\n\n        <!-- sticky navigation -->\n        <CiStickyNavigation\n          :ref=\"el => (sectionRefs['subnav'] = el as InstanceType<typeof CiStickyNavigation>)\"\n          :items=\"toRaw(subNavigationAnchors)\"\n          :use-html=\"true\"\n          :jump-to-first=\"false\"\n          :jump-to-last=\"true\"\n          @item-clicked=\"scrollToRef\"\n        />\n\n        <div class=\"relative\">\n          <div\n            v-if=\"viewport.isGreaterOrEquals('xl') && hasAds\"\n            class=\"skyscraper absolute size-full pb-12\"\n          >\n            <div class=\"container h-full\">\n              <div class=\"flex h-full\">\n                <CiAdSlot\n                  id=\"camping_sidebar_left\"\n                  class=\"ad--skyscraper ad--skyscraper-left sticky top-0\"\n                  style=\"top: 50px; z-index: 31\"\n                />\n                <CiAdSlot\n                  id=\"camping_sidebar_1\"\n                  class=\"ad--skyscraper ad--skyscraper-right sticky top-0\"\n                  style=\"top: 50px; z-index: 31\"\n                />\n                <!-- won't be rendered -->\n                <!-- <ci-ad-slot id=\"cpdp_wallpaper_pixel\"></ci-ad-slot> -->\n              </div>\n            </div>\n          </div>\n\n          <div\n            v-if=\"hasAds\"\n            class=\"container-lg mb-4 mt-2 pt-0\"\n          >\n            <div\n              v-if=\"viewport.isLessThan('lg')\"\n              :mq=\"['xs', 'sm', 'md']\"\n            >\n              <CiAdSlot\n                id=\"camping_header\"\n                class=\"ad--header\"\n                style=\"max-height: 100px !important\"\n              />\n            </div>\n            <div v-if=\"viewport.isGreaterOrEquals('lg')\">\n              <CiAdSlot\n                id=\"camping_header\"\n                class=\"ad--header\"\n              />\n            </div>\n          </div>\n\n          <!-- media elements -->\n          <div\n            class=\"container relative mt-4\"\n            :class=\"{ 'mb-32 md:mb-20': !freezeBottomNavbar, 'mb-4': freezeBottomNavbar }\"\n          >\n            <div class=\"row row-small-gutter\">\n              <div\n                v-if=\"campsite.mediaStructured?.['campsite'].some((item) => (item.media_type === 'picture'))\"\n                id=\"campsite-picture\"\n                :ref=\"el => (sectionRefs['campsite-picture'] = el as HTMLElement)\"\n                class=\"divider col-12 invisible m-0 size-0 p-0\"\n              />\n              <template v-for=\"(item, idx) of campsite.mediaStructured?.['campsite']\" :key=\"item.id\">\n                <template v-if=\"hasAds && (item.idx + 1) === 5\">\n                  <div\n                    :key=\"`ad_${item.idx}`\"\n                    class=\"col-12 mb-[10px]\"\n                  >\n                    <CiAdSlot\n                      id=\"camping_content_2\"\n                      class=\"ad--h-600-480-570\"\n                    />\n                  </div>\n                </template>\n                <template v-if=\"hasAds && ((item.idx + 1) === 9 || (item.idx + 1) === 13 || (item.idx + 1) === 17)\">\n                  <div\n                    :key=\"`ad_${item.idx + 1}`\"\n                    class=\"col-12 mb-[10px]\"\n                  >\n                    <CiAdSlot\n                      :id=\"getAdId(item.idx + 1)\"\n                      class=\"ad--h-250\"\n                    />\n                  </div>\n                </template>\n\n                <div\n                  v-if=\"\n                    item.idx !== undefined\n                      && item.idx !== null\n                      && links.campsite?.includes(idx)\n                      && (ppcWebsiteLink('inline') || isPartOfAvailabilityService)\n                  \"\n                  :key=\"`link-${item.idx}`\"\n                  class=\"col-12 website-link mb-6 mt-3 text-center\"\n                >\n                  <div class=\"flex flex-col justify-center lg:flex-row\">\n                    <a\n                      v-if=\"ppcWebsiteLink('inline')\"\n                      :href=\"ppcWebsiteLink('inline')\"\n                      class=\"button w-full md:w-auto\"\n                      :class=\"[isPartOfAvailabilityService ? 'button--primary-outline mr-2' : 'button--primary']\"\n                      referrerpolicy=\"unsafe-url\"\n                      target=\"_blank\"\n                      rel=\"noopener\"\n                    >\n                      <span>{{ $gettext('Go to website') }}</span>\n                      <CiAwesomeIcon\n                        :icon=\"faChevronRight\"\n                        ratio=\"0.6\"\n                      />\n                    </a>\n                    <nuxt-link\n                      v-if=\"isPartOfAvailabilityService\"\n                      class=\"button button--primary mt-2 lg:mt-0\"\n                      :to=\"\n                        localePath({\n                          name: RBN_CAMPSITE_DETAIL,\n                          params: { identifier: route.params.identifier },\n                          hash: '#availabilities',\n                        })\n                      \"\n                    >\n                      <span>{{ $gettext('Check availability') }}</span>\n                      <CiAwesomeIcon\n                        :icon=\"faChevronRight\"\n                        ratio=\"0.6\"\n                      />\n                    </nuxt-link>\n                  </div>\n                </div>\n\n                <div\n                  v-if=\"campsite.mediaStructured?.['campsite'].findIndex((item) => (item.media_type === 'video')) === idx\"\n                  id=\"campsite-video\"\n                  :ref=\"el => (sectionRefs['campsite-video'] = el as HTMLElement)\"\n                  class=\"divider invisible m-0 size-0 p-0\"\n                  :class=\"{ 'col-12': idx % 2 === 0 }\"\n                />\n\n                <div\n                  :ref=\"el => (mediaItemRefs[item.idx] = el as HTMLElement)\"\n                  :data-idx=\"idx\"\n                  class=\"media-item col-12 mb-[10px]\"\n                  :class=\"getMediaItemClasses(item)\"\n                >\n                  <CiCampsiteMediaImage\n                    v-if=\"item.media_type === 'picture'\"\n                    :item=\"item\"\n                    :selected=\"isSelected(item)\"\n                    :alt-fallback=\"campsite.name\"\n                    @click=\"onMediaItemClicked($event, item, 50)\"\n                  />\n\n                  <CiCampsiteMediaPanono\n                    v-else-if=\"item.media_type === 'panono'\"\n                    :selected=\"isSelected(item)\"\n                    :panono-id=\"item.id\"\n                    @click=\"onMediaItemClicked($event, item, 50)\"\n                  />\n\n                  <CiCampsiteMediaVideo\n                    v-else-if=\"item.media_type === 'video'\"\n                    :item=\"item\"\n                    :selected=\"isSelected(item)\"\n                    @click=\"onMediaItemClicked($event, item, 50)\"\n                  />\n\n                  <CiAwesomeIcon\n                    v-if=\"item.media_type !== 'video'\"\n                    :icon=\"faSearchPlus\"\n                    ratio=\"2.0\"\n                    class=\"zoom-icon absolute fill-white\"\n                  />\n\n                  <div\n                    v-if=\"item.media_type === 'panono'\"\n                    class=\"panono-icon absolute fill-white\"\n                  >\n                    <CiAwesomeIcon\n                      :icon=\"faCube\"\n                      ratio=\"2.0\"\n                    />\n                  </div>\n                </div>\n              </template>\n              <div\n                v-if=\"campsite.mediaStructured?.['visitor'].some((item) => (item.media_type === 'picture'))\"\n                id=\"visitor-picture\"\n                :ref=\"el => (sectionRefs['visitor-picture'] = el as HTMLElement)\"\n                class=\"divider col-12\"\n              >\n                <h2\n                  class=\"my-4 text-center\"\n                >\n                  {{ $pgettext('Media Sticky navigation - keep this short!', 'Guests photos') }}\n                </h2>\n              </div>\n              <template v-for=\"(item, idx) of campsite.mediaStructured?.['visitor']\" :key=\"item.id\">\n                <template v-if=\"hasAds && (item.idx + 1) === 5\">\n                  <div\n                    :key=\"`ad_${item.idx}`\"\n                    class=\"col-12 mb-[10px]\"\n                  >\n                    <CiAdSlot\n                      id=\"camping_content_2\"\n                      class=\"ad--h-600-480-570\"\n                    />\n                  </div>\n                </template>\n\n                <template v-if=\"hasAds && ((item.idx + 1) === 9 || (item.idx + 1) === 13 || (item.idx + 1) === 17)\">\n                  <div\n                    :key=\"`ad_${item.idx + 1}`\"\n                    class=\"col-12 mb-[10px]\"\n                  >\n                    <CiAdSlot\n                      :id=\"getAdId(item.idx + 1)\"\n                      class=\"ad--h-250\"\n                    />\n                  </div>\n                </template>\n                <div\n                  v-if=\"\n                    item.idx !== undefined\n                      && item.idx !== null\n                      && links['visitor']?.includes(idx)\n                      && (ppcWebsiteLink('inline') || isPartOfAvailabilityService)\n                  \"\n                  :key=\"`link-${item.idx}`\"\n                  class=\"col-12 website-link mb-6 mt-3 text-center\"\n                >\n                  <div class=\"flex flex-col justify-center lg:flex-row\">\n                    <a\n                      v-if=\"ppcWebsiteLink('inline')\"\n                      :href=\"ppcWebsiteLink('inline')\"\n                      class=\"button w-full md:w-auto\"\n                      :class=\"[isPartOfAvailabilityService ? 'button--primary-outline mr-2' : 'button--primary']\"\n                      referrerpolicy=\"unsafe-url\"\n                      target=\"_blank\"\n                      rel=\"noopener\"\n                    >\n                      <span>{{ $gettext('Go to website') }}</span>\n                      <CiAwesomeIcon\n                        :icon=\"faChevronRight\"\n                        ratio=\"0.6\"\n                      />\n                    </a>\n                    <nuxt-link\n                      v-if=\"isPartOfAvailabilityService\"\n                      class=\"button button--primary mt-2 lg:mt-0\"\n                      :to=\"\n                        localePath({\n                          name: RBN_CAMPSITE_DETAIL,\n                          params: { identifier: route.params.identifier },\n                          hash: '#availabilities',\n                        })\n                      \"\n                    >\n                      <span>{{ $gettext('Check availability') }}</span>\n                      <CiAwesomeIcon\n                        :icon=\"faChevronRight\"\n                        ratio=\"0.6\"\n                      />\n                    </nuxt-link>\n                  </div>\n                </div>\n\n                <div\n                  v-if=\"campsite.mediaStructured?.['visitor'].findIndex((item) => (item.media_type === 'video')) === idx\"\n                  id=\"visitor-video\"\n                  :ref=\"el => (sectionRefs['visitor-video'] = el as HTMLElement)\"\n                  class=\"divider invisible m-0 size-0 p-0\"\n                  :class=\"{ 'col-12': idx % 2 === 0 }\"\n                />\n\n                <div\n                  :ref=\"el => (mediaItemRefs[item.idx] = el as HTMLElement)\"\n                  :data-idx=\"idx\"\n                  class=\"media-item col-12 mb-[10px]\"\n                  :class=\"getMediaItemClasses(item)\"\n                >\n                  <CiCampsiteMediaImage\n                    v-if=\"item.media_type === 'picture'\"\n                    :item=\"item\"\n                    :selected=\"isSelected(item)\"\n                    :alt-fallback=\"campsite.name\"\n                    @click=\"onMediaItemClicked($event, item, 50)\"\n                  />\n\n                  <CiCampsiteMediaPanono\n                    v-else-if=\"item.media_type === 'panono'\"\n                    :selected=\"isSelected(item)\"\n                    :panono-id=\"item.id\"\n                    @click=\"onMediaItemClicked($event, item, 50)\"\n                  />\n\n                  <CiCampsiteMediaVideo\n                    v-else-if=\"item.media_type === 'video'\"\n                    :item=\"item\"\n                    :selected=\"isSelected(item)\"\n                    @click=\"onMediaItemClicked($event, item, 50)\"\n                  />\n\n                  <CiAwesomeIcon\n                    v-if=\"item.media_type !== 'video'\"\n                    :icon=\"faSearchPlus\"\n                    ratio=\"2.0\"\n                    class=\"zoom-icon absolute fill-white\"\n                  />\n\n                  <div\n                    v-if=\"item.media_type === 'panono'\"\n                    class=\"panono-icon absolute fill-white\"\n                  >\n                    <CiAwesomeIcon\n                      :icon=\"faCube\"\n                      ratio=\"2.0\"\n                    />\n                  </div>\n                </div>\n              </template>\n            </div>\n          </div>\n\n          <!-- bottom nav bar -->\n          <transition name=\"fade\">\n            <div\n              v-if=\"showBottomNavbar\"\n              class=\"navbar-bottom bottom-[15px] left-0 z-10 flex w-full flex-wrap justify-center px-2 md:flex-nowrap\"\n              :class=\"{ 'fixed': !freezeBottomNavbar, 'mb-6': freezeBottomNavbar }\"\n            >\n              <nuxt-link\n                :to=\"localePath({ name: RBN_CAMPSITE_DETAIL, params: { identifier: route.params.identifier } })\"\n                class=\"button button--primary-outline-white mb-2 w-full md:mb-0 md:mr-2 md:w-auto\"\n              >\n                <CiAwesomeIcon\n                  :icon=\"faChevronLeft\"\n                  ratio=\"0.6\"\n                />\n                <span class=\"pr-2\">{{ $gettext('Back to campsite') }}</span>\n              </nuxt-link>\n              <a\n                href=\"#\"\n                class=\"button button--primary-outline-white w-full md:w-auto\"\n                referrerpolicy=\"unsafe-url\"\n                target=\"_blank\"\n                rel=\"noopener\"\n                @click.prevent=\"onScrollToTop\"\n              >\n                <span>{{ $gettext('Back to top') }}</span>\n                <CiAwesomeIcon\n                  :icon=\"faArrowUp\"\n                  ratio=\"0.6\"\n                />\n              </a>\n            </div>\n          </transition>\n        </div>\n      </template>\n    </template>\n    <CiErrorView\n      v-else\n      :error=\"fetchStatus\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.media-item {\n  transition: filter 0.5s ease-out;\n\n  .zoom-icon,\n  .panono-icon {\n    @apply pointer-events-none left-1/2 top-1/2 opacity-0;\n    transform: translate(-50%, -50%);\n    transition: opacity 0.5s ease-out;\n  }\n\n  .panono-icon {\n    @apply rounded-xl bg-black/70 p-5 opacity-0;\n    @media (hover: none) and (pointer: coarse) {\n      display: none;\n    }\n  }\n\n  &:not(.selected) {\n    .panono-icon {\n      @apply opacity-80;\n    }\n  }\n\n  .no-touch &:hover {\n    @apply cursor-pointer;\n\n    .panono-icon {\n      @apply opacity-0;\n    }\n\n    &:not(.selected) {\n      filter: brightness(70%);\n\n      .zoom-icon {\n        @apply opacity-100;\n      }\n    }\n  }\n}\n</style>\n"],"names":["props","__props","localePath","useLocalePath","route","useRoute","searchService","useSearchService","seoStore","useSeoStore","viewport","useViewport","$gettext","$pgettext","useGettext","campsite","onKeyUp","isSelected","onMediaItemClicked","mediaItemRefs","useCampsiteMedia","fetchError","fetchFailed","fetchStatus","useFetchError","locale","useI18n","requestAds","useAds","ppcWebsiteLink","useCampsiteDetail","hasAds","isPartOfAvailabilityService","getPreEnterData","useCampsiteAdsAs","scrollToRef","sectionRefs","dividerTexts","reactive","freezeBottomNavbar","ref","lastScrollPosition","links","prepareStickyNavigationItems","showBottomNavbar","subNavigationAnchors","__temp","__restore","_withAsyncContext","useAsyncData","loadedData","pending","error","useLazyAsyncData","response","_a","dividers","stickyNavigationItems","firstTwoImages","hasPpcOrAs","orders","b","subtypeA","subtypeB","orderKeyA","orderKeyB","orderA","orderB","item","idx","mediaType","pictureType","videoType","dividerType","subType","anchor","getLinksForMedia","createError","onMounted","onScroll","onBeforeUnmount","watch","setData","newValue","initStickyNavigation","nextTick","getReduceFunction","sum","obj","n","objSubType","numItems","counts","getNavigationText","withCount","texts","count","navAnchors","currentScrollPosition","scrolledToBottomOffset","footer","getMediaItemClasses","onScrollToTop","getAdId","numMedia","maxNum","minNum","numPpc","lastPpcOrAs","i"],"mappings":"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"}