Rename the component AnchorNav

packages/docs/components/molecules/StickyTableOfContent/index.md → packages/docs/components/molecules/AnchorNav/index.md

@@ -1,7 +1,7 @@
-# StickyTable <Badges :texts="badges" />
+# AnchorNav <Badges :texts="badges" />
 
 <script setup>
-  import pkg from '@studiometa/ui/molecules/StickyTable/package.json';
+  import pkg from '@studiometa/ui/molecules/AnchorNav/package.json';
   const badges = [`v${pkg.version}`, 'Twig'];
 </script>
 

packages/docs/components/molecules/StickyTableOfContent/stories/app.js → packages/docs/components/molecules/AnchorNav/stories/app.js

@@ -1,19 +1,19 @@
 /* eslint-disable max-classes-per-file */
 import { Base, createApp } from '@studiometa/js-toolkit';
 import {
-  StickyTable as StickyTableCore,
-  StickyTableItem,
-  StickyTableSection,
+  AnchorNav as AnchorNavCore,
+  AnchorNavLink,
+  AnchorNavTarget,
 } from '@studiometa/ui';
 
 /**
  *
  */
-class StickyTable extends StickyTableCore {
+class AnchorNav extends AnchorNavCore {
   static config = {
     components: {
-      StickyTableItem,
-      StickyTableSection,
+      AnchorNavLink,
+      AnchorNavTarget,
     },
   };
 }
@@ -25,7 +25,7 @@ class App extends Base {
   static config = {
     name: 'App',
     components: {
-      StickyTable,
+      AnchorNav,
     },
   };
 }

packages/docs/components/molecules/AnchorNav/stories/app.twig

@@ -0,0 +1,53 @@
+{% set section_length = 3 %}
+<style type="text/css">
+  .current { color: pink; }
+</style>
+
+
+<div data-component="AnchorNav" class="flex items-start relative">
+  <nav class="bg-blue-200 w-1/3 sticky flex flex-col top-4">
+    <ul>
+      {% for item in 1..section_length %}
+        <li>
+          <a href="#item-{{ loop.index }}"
+            data-component="AnchorNavLink"
+            data-option-enter-to="text-purple-500"
+            data-option-enter-active="transition-colors duration-300 ease-out-quad"
+            data-option-leave-from="text-purple-500"
+            data-option-leave-active="transition-colors duration-300 ease-out-quad"
+            class="py-2 px-2">
+            item-{{ loop.index }}
+          </a>
+        </li>
+      {% 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 %}
+      <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 %} #}
+  </div>
+</div>
+
+<div class="h-screen"></div>

packages/ui/molecules/AnchorNav/AnchorNav.ts

@@ -0,0 +1,46 @@
+import { Base } from '@studiometa/js-toolkit';
+import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
+import { AnchorNavLink } from './AnchorNavLink.js';
+import { AnchorNavTarget } from './AnchorNavTarget.js';
+
+export interface AnchorNavProps extends BaseProps {
+  $children: {
+    AnchorNavLink: AnchorNavLink[];
+    AnchorNavTarget: AnchorNavTarget[];
+  };
+}
+
+export class AnchorNav<T extends BaseProps = BaseProps> extends Base<T & AnchorNavProps> {
+  /**
+   * Config
+   */
+  static config: BaseConfig = {
+    name: 'AnchorNav',
+    components: {
+      AnchorNavLink,
+      AnchorNavTarget,
+    },
+  };
+
+  /**
+   * Listen to the AnchorNavTarget that is intersected
+   */
+  onAnchorNavTargetIsIntersected(id) {
+    console.log(id);
+
+    if (document.querySelector('.current')) {
+      document.querySelector('.current').classList.remove('current');
+    }
+    const currentAnchorNavLink = this.$children.AnchorNavLink.find(
+      (anchorNavLink) => anchorNavLink.targetSelector === id,
+    );
+    currentAnchorNavLink.$el.classList.add('current');
+  }
+
+  //   this.$children.AnchorNavLink.filter((navLink, navLinkId) => id !== navLinkId).forEach(
+  //     ({ leave }) => leave(),
+  //   );
+
+  //   this.$children.AnchorNavLink[id].enter();
+  // }
+}

packages/ui/molecules/AnchorNav/AnchorNavLink.ts

@@ -0,0 +1,67 @@
+import type { BaseConfig } from '@studiometa/js-toolkit';
+import { AnchorScrollTo } from '../../atoms/AnchorScrollTo/AnchorScrollTo.js';
+
+export interface AnchorNavLinkProps extends AnchorScrollToProps {
+  $options: {
+    id: string;
+  };
+}
+
+/**
+ * Manage a slider item and its state transition.
+ */
+export class AnchorNavLink extends AnchorScrollTo<AnchorNavLinkProps> {
+  /**
+   * Config.
+   */
+  static config: BaseConfig = {
+    ...AnchorScrollTo.config,
+    name: 'AnchorNavLink',
+  };
+}
+
+// import type { BaseConfig } from '@studiometa/js-toolkit';
+// import { AnchorScrollTo, AnchorScrollToProps } from '../../atoms/AnchorScrollTo/AnchorScrollTo.js';
+// import { withTransition } from '../../decorators/index.js';
+// import { Transition } from '../../primitives/index.js';
+
+// export interface AnchorNavLinkProps extends AnchorScrollToProps {
+//   $options: {
+//     id: string;
+//   };
+// }
+
+// /**
+//  * Manage a slider item and its state transition.
+//  */
+// export class AnchorNavLink extends withTransition(AnchorScrollTo)<AnchorNavLinkProps> {
+//   /**
+//    * Config.
+//    */
+//   static config: BaseConfig = {
+//     ...AnchorScrollTo.config,
+//     name: 'AnchorNavLink',
+//     options: {
+//       ...AnchorScrollTo.config.options,
+//       ...Transition.config.options,
+//       enterKeep: {
+//         type: Boolean,
+//         default: true,
+//       },
+//       leaveKeep: {
+//         type: Boolean,
+//         default: true,
+//       },
+//     },
+//   };
+
+//   enter() {
+//     this.$options.active = true;
+//     super.enter();
+//   }
+
+//   leave() {
+//     this.$options.active = false;
+//     super.leave();
+//   }
+// }

packages/ui/molecules/StickyTable/StickyTableSection.ts → packages/ui/molecules/AnchorNav/AnchorNavTarget.ts

@@ -1,7 +1,7 @@
 import { Base } from '@studiometa/js-toolkit';
 import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
 
-export interface StickyTableSectionProps extends BaseProps {
+export interface AnchorNavTargetProps extends BaseProps {
   $refs: {
     item: HTMLElement[];
   };
@@ -10,12 +10,12 @@ export interface StickyTableSectionProps extends BaseProps {
 /**
  * Manage a sticky table section.
  */
-export class StickyTableSection extends Base<StickyTableSectionProps> {
+export class AnchorNavTarget extends Base<AnchorNavTargetProps> {
   /**
    * Config.
    */
   static config: BaseConfig = {
-    name: 'StickyTableSection',
+    name: 'AnchorNavTarget',
     refs: ['item[]'],
     options: {
       threshold: { type: String, default: '0.5' },
@@ -24,8 +24,9 @@ export class StickyTableSection extends Base<StickyTableSectionProps> {
     emits: ['is-intersected'],
   };
 
-  /** TODO use the withIntersectionObserver from js-toolkit or with sentinel from ui */
   mounted() {
+    console.log('mounted');
+
     const observer = new IntersectionObserver(this.checkIntersection.bind(this), {
       threshold: this.$options.threshold,
       rootMargin: this.$options.rootmargin,
@@ -36,12 +37,38 @@ export class StickyTableSection extends Base<StickyTableSectionProps> {
   }
 
   checkIntersection(entries) {
-    if (entries[0].isIntersecting) {
-      console.log(this.$options);
+    console.log(entries);
 
+    if (entries[0].isIntersecting) {
       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);
+  //   }
+// }

packages/ui/molecules/AnchorNav/index.ts

@@ -0,0 +1,3 @@
+export * from './AnchorNav.js';
+export * from './AnchorNavLink.js';
+export * from './AnchorNavTarget.js';

packages/ui/molecules/StickyTable/package.json → packages/ui/molecules/AnchorNav/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@studiometa/ui-sticky-table",
+  "name": "@studiometa/ui-anchor-nav",
   "type": "module",
   "version": "0.0.0"
 }