add pdf viewer - page change observer working

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@vue-pdf-viewer/viewer": "^1.4.3",
     "@vue/compiler-sfc": "^3.5.6",
     "dayjs": "^1.11.13",
     "lodash": "^4.17.21",

src/components/project/client-brief/ModeSelection.vue

@@ -53,6 +53,7 @@
         </p>
       </div>
       <div
+        @click="emit('update:step', 'PdfViewer')"
         class="card card--cta | flex-1 | h-full"
         style="--padding: var(--space-32); --row-gap: var(--space-32)"
       >

src/components/project/client-brief/PdfViewer.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <div :style="{ width: '1028px', height: '700px', margin: '0 auto' }">
+      <VPdfViewer
+        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
+        local="fr_FR"
+        @loaded="onPdfLoaded"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { VPdfViewer } from "@vue-pdf-viewer/viewer";
+
+const onPdfLoaded = () => {
+  console.log("PDF chargé, mise en place de l'observation.");
+
+  const wrapper = document.querySelector(".vpv-pages-inner-container");
+
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry, index) => {
+        if (entry.intersectionRatio > 0.5) {
+          console.log(entry.target.getAttribute("aria-label"));
+        }
+      });
+    },
+    {
+      root: wrapper,
+      threshold: [0.5],
+    }
+  );
+
+  const observePages = () => {
+    const pages = document.querySelectorAll(".vpv-page-inner-container");
+    pages.forEach((page) => {
+      if (!page.__observed__) {
+        observer.observe(page);
+        page.__observed__ = true;
+      }
+    });
+  };
+
+  const mutationObserver = new MutationObserver(() => {
+    observePages();
+  });
+
+  if (wrapper) {
+    mutationObserver.observe(wrapper, { childList: true, subtree: true });
+  }
+
+  observePages();
+};
+</script>

src/views/ClientBrief.vue

@@ -14,12 +14,14 @@ import { ref } from "vue";
 import Intro from "../components/project/client-brief/Intro.vue";
 import ModeSelection from "../components/project/client-brief/ModeSelection.vue";
 import Images from "../components/project/client-brief/Images.vue";
+import PdfViewer from "../components/project/client-brief/PdfViewer.vue";
 import { usePageStore } from "../stores/page";
 
 const stepsComponents = {
   Intro,
   ModeSelection,
   Images,
+  PdfViewer,
 };
 
 const { page } = usePageStore();