site_logiciels/components/Layout/AnchoredSection.vue

<template>
  <!--suppress VueUnrecognizedDirective -->
  <div
    :id="id"
    ref="section"
    v-intersect="onIntersect"
  >
    <slot/>
  </div>

</template>

<script setup lang="ts">
  import { useLayoutStore } from "~/stores/layoutStore";

  const layoutStore = useLayoutStore()

  const props = defineProps({
    id: {
      type: String,
      required: true
    }
  })

  if (!props.id) {
    throw new Error("Anchor's id is missing")
  }

  const section: Ref<HTMLElement | null> = ref(null)

  layoutStore.setIsAnchoredSectionOnScreen(props.id, false)

  const onIntersect = (e: boolean) => {
    layoutStore.setIsAnchoredSectionOnScreen(props.id, e)
  }

  // TODO: supprimer si pas nécessaire, je conserve au cas où il faudrait un
  //       fonctionnement plus fin qu'un simple intersect
  // const top: Ref<number | null> = ref(null)
  // const bottom: Ref<number | null> = ref(null)
  //
  // onMounted(() => {
  //   top.value = section.value!.offsetTop
  //   bottom.value = section.value!.offsetTop + section.value!.offsetHeight
  // })
  //
  // const onScroll = (e: any) => {
  //   if (top.value === null || bottom.value === null) {
  //     return
  //   }
  //
  //   const scroll: number = e.target.scrollingElement.scrollTop
  //
  //   const active = scroll > top.value && scroll < bottom.value
  //
  //   if (active !== layoutStore.isAnchoredSectionOnScreen[props.id]) {
  //     layoutStore.setIsAnchoredSectionOnScreen(
  //       props.id,
  //       active
  //     )
  //   }
  // }
</script>

<style scoped>

</style>