Add the decorator withTransition on the AnchorNavLink to avoid using …

…a specific class
studiometa · Apr 8, 2024 · 42b6c9c · 42b6c9c
1 parent 14df699
commit 42b6c9c
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 27 deletions.
diff --git a/packages/docs/components/molecules/AnchorNav/stories/app.twig b/packages/docs/components/molecules/AnchorNav/stories/app.twig
@@ -1,8 +1,4 @@
 {% 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">
@@ -11,10 +7,8 @@
         <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"
+            data-option-enter-to="text-pink-500"
+            data-option-enter-keep
             class="py-2 px-2">
             item-{{ loop.index }}
           </a>

diff --git a/packages/ui/molecules/AnchorNav/AnchorNav.ts b/packages/ui/molecules/AnchorNav/AnchorNav.ts
@@ -27,20 +27,9 @@ export class AnchorNav<T extends BaseProps = BaseProps> extends Base<T & AnchorN
    */
   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.forEach((item) => {
+      const method = item.targetSelector === id ? 'enter' : 'leave';
+      item[method]();
+    });
   }
-
-  //   this.$children.AnchorNavLink.filter((navLink, navLinkId) => id !== navLinkId).forEach(
-  //     ({ leave }) => leave(),
-  //   );
-
-  //   this.$children.AnchorNavLink[id].enter();
-  // }
 }
diff --git a/packages/ui/molecules/AnchorNav/AnchorNavLink.ts b/packages/ui/molecules/AnchorNav/AnchorNavLink.ts
@@ -1,5 +1,6 @@
 import type { BaseConfig } from '@studiometa/js-toolkit';
 import { AnchorScrollTo } from '../../atoms/AnchorScrollTo/AnchorScrollTo.js';
+import { withTransition } from '../../decorators/index.js';
 
 export interface AnchorNavLinkProps extends AnchorScrollToProps {
   $options: {
@@ -10,7 +11,7 @@ export interface AnchorNavLinkProps extends AnchorScrollToProps {
 /**
  * Manage a slider item and its state transition.
  */
-export class AnchorNavLink extends AnchorScrollTo<AnchorNavLinkProps> {
+export class AnchorNavLink extends withTransition(AnchorScrollTo)<AnchorNavLinkProps> {
   /**
    * Config.
    */

diff --git a/packages/ui/molecules/AnchorNav/AnchorNavTarget.ts b/packages/ui/molecules/AnchorNav/AnchorNavTarget.ts
@@ -23,10 +23,7 @@ export class AnchorNavTarget extends withIntersectionObserver(Base, {
   };
 
   intersected(entries) {
-    console.log(entries);
     if (entries[0].isIntersecting) {
-      console.log(this.$options);
-
       let { id } = entries[0].target;
       id = `#${id}`;
       this.$emit('is-intersected', id);