Add the withIntersectionObserver on the componenet AnchorNavTarget

studiometa · Apr 8, 2024 · 14df699 · 14df699
1 parent c5ba291
commit 14df699
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 65 deletions.
diff --git a/packages/docs/components/molecules/AnchorNav/stories/app.twig b/packages/docs/components/molecules/AnchorNav/stories/app.twig
@@ -22,31 +22,16 @@
       {% endfor %}
     </ul>
   </nav>
-  <div class="w-2/3" data-component="AnchorNavTarget">
-  <div data-ref="item[]" id="item-1" class="relative bg-purple-200 h-[300px]">
-      <div class="bg-pink-200 h-[50px]">
-        Item-1
-      </div>
-    </div>
-    <div data-ref="item[]" id="item-2" class="relative bg-purple-300 h-[300px]">
-      <div class="bg-pink-200 h-[50px]">
-        Item-2
-      </div>
-    </div>
-    <div data-ref="item[]" id="item-3" class="relative bg-purple-400 h-[300px]">
-      <div class="bg-pink-200 h-[50px]">
-        Item-3
-      </div>
-    </div>
-    {# {% for item in 1..section_length %}
+  <div class="w-2/3">
+    {% for item in 1..section_length %}
       <section data-component="AnchorNavTarget"
         id="item-{{ loop.index }}"
         class="relative bg-purple-200 h-[300px]">
         <div class="bg-pink-200 h-[50px]">
           Item-{{ loop.index }}
         </div>
       </section>
-    {% endfor %} #}
+    {% endfor %}
   </div>
 </div>
 

diff --git a/packages/ui/molecules/AnchorNav/AnchorNavTarget.ts b/packages/ui/molecules/AnchorNav/AnchorNavTarget.ts
@@ -1,4 +1,4 @@
-import { Base } from '@studiometa/js-toolkit';
+import { Base, withIntersectionObserver } from '@studiometa/js-toolkit';
 import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
 
 export interface AnchorNavTargetProps extends BaseProps {
@@ -10,65 +10,26 @@ export interface AnchorNavTargetProps extends BaseProps {
 /**
  * Manage a sticky table section.
  */
-export class AnchorNavTarget extends Base<AnchorNavTargetProps> {
+export class AnchorNavTarget extends withIntersectionObserver(Base, {
+  threshold: 0.5,
+  rootMargin: '0% 0px -40% 0px',
+})<AnchorNavTargetProps> {
   /**
    * Config.
    */
   static config: BaseConfig = {
     name: 'AnchorNavTarget',
-    refs: ['item[]'],
-    options: {
-      threshold: { type: String, default: '0.5' },
-      rootmargin: { type: String, default: '0% 0px -40% 0px' },
-    },
     emits: ['is-intersected'],
   };
 
-  mounted() {
-    console.log('mounted');
-
-    const observer = new IntersectionObserver(this.checkIntersection.bind(this), {
-      threshold: this.$options.threshold,
-      rootMargin: this.$options.rootmargin,
-    });
-    this.$refs.item.forEach((target) => {
-      observer.observe(target);
-    });
-  }
-
-  checkIntersection(entries) {
+  intersected(entries) {
     console.log(entries);
-
     if (entries[0].isIntersecting) {
+      console.log(this.$options);
+
       let { id } = entries[0].target;
       id = `#${id}`;
-      console.log(id);
-
       this.$emit('is-intersected', id);
     }
   }
 }
-
-/**
- * Manage a sticky table section.
- */
-// export class AnchorNavTarget extends withIntersectionObserver(Base, {
-//   threshold: 0.5,
-//   rootMargin: '0% 0px -40% 0px',
-// })<AnchorNavTargetProps> {
-//   /**
-//    * Config.
-//    */
-//   static config: BaseConfig = {
-//     name: 'AnchorNavTarget',
-//   };
-
-  // intersected(entries) {
-  //   if (entries[0].isIntersecting) {
-  //     console.log(this.$options);
-
-  //     let { id } = entries[0].target;
-  //     id = `#${id}`;
-  //     this.$emit('is-intersected', id);
-  //   }
-// }