@brandocms/jupiter 3.55.0 → 4.0.0-beta.2

package/src/modules/Links/index.js

@@ -1,17 +1,28 @@
-import { gsap } from 'gsap'
-import { ScrollToPlugin } from 'gsap/ScrollToPlugin'
+import { animate } from 'motion'
 import _defaultsDeep from 'lodash.defaultsdeep'
-
-gsap.registerPlugin(ScrollToPlugin)
-
+import { set } from '../../utils/motion-helpers'
+
+/**
+ * @typedef {Object} LinksOptions
+ * @property {boolean} [triggerEvents=true] - Whether to trigger events when scrolling
+ * @property {number} [scrollDuration=0.8] - Duration of scroll animation
+ * @property {boolean} [scrollOffsetNav=false] - Whether to offset scroll for nav header
+ * @property {number} [mobileMenuDelay=800] - Delay for mobile menu before scrolling
+ * @property {boolean} [openExternalInWindow=true] - Whether to open external links in new window
+ * @property {string} [linkQuery] - Query selector for regular links
+ * @property {string} [anchorQuery] - Query selector for anchor links
+ * @property {Function} [onAnchor] - Called when an anchor link is clicked
+ * @property {Function} [onTransition] - Called when transitioning between pages
+ */
+
+/** @type {LinksOptions} */
 const DEFAULT_OPTIONS = {
   triggerEvents: true,
   scrollDuration: 0.8,
   scrollOffsetNav: false,
   mobileMenuDelay: 800,
   openExternalInWindow: true,
-  linkQuery:
-    'a:not([href^="#"]):not([target="_blank"]):not([data-lightbox]):not(.noanim)',
+  linkQuery: 'a:not([href^="#"]):not([target="_blank"]):not([data-lightbox]):not(.noanim)',
   anchorQuery: 'a[href^="#"]:not(.noanim)',
 
   onAnchor: (target, links) => {
@@ -20,11 +31,7 @@ const DEFAULT_OPTIONS = {
       const headerHeight = header ? header.clientHeight : 0
       target = { y: target, offsetY: headerHeight }
     }
-    links.app.scrollTo(
-      target,
-      links.opts.scrollDuration,
-      links.opts.triggerEvents
-    )
+    links.app.scrollTo(target, links.opts.scrollDuration, links.opts.triggerEvents)
   },
 
   onTransition: (href, app) => {
@@ -34,55 +41,54 @@ const DEFAULT_OPTIONS = {
     const fader = document.querySelector('#fader')
 
     if (fader) {
-      gsap.set(fader, { display: 'block', opacity: 0 })
-      gsap.to(main, {
-        duration: 0.8,
-        y: 25,
-        ease: 'power3.out',
-      })
+      set(fader, { display: 'block', opacity: 0 })
+
+      if (main) {
+        animate(main, { y: 25 }, { duration: 0.8, ease: 'easeOut' })
+        animate(main, { opacity: 0 }, { duration: 0.2 })
+      }
 
       if (header) {
-        gsap.to(header, { duration: 0.2, opacity: 0 })
+        animate(header, { opacity: 0 }, { duration: 0.2 })
       }
 
       if (footer) {
-        gsap.to(footer, { duration: 0.2, opacity: 0 })
+        animate(footer, { opacity: 0 }, { duration: 0.2 })
       }
 
-      gsap.to(fader, {
-        duration: 0.2,
-        opacity: 1,
-        onComplete: () => {
-          window.location = href
-        },
+      animate(fader, { opacity: 1 }, { duration: 0.2 }).finished.then(() => {
+        window.location = href
       })
     } else {
-      gsap.to(main, {
-        duration: 0.8,
-        y: 25,
-        ease: 'power3.out',
-      })
+      if (main) {
+        animate(main, { y: 25 }, { duration: 0.8, ease: 'easeOut' })
+        animate(main, { opacity: 0 }, { duration: 0.2 })
+      }
 
       if (header) {
-        gsap.to(header, { duration: 0.2, opacity: 0 })
+        animate(header, { opacity: 0 }, { duration: 0.2 })
       }
 
       if (footer) {
-        gsap.to(footer, { duration: 0.2, opacity: 0 })
+        animate(footer, { opacity: 0 }, { duration: 0.2 })
       }
 
-      gsap.to(main, {
-        duration: 0.2,
-        opacity: 0,
-        onComplete: () => {
-          window.location = href
-        },
+      animate(main, { opacity: 0 }, { duration: 0.2 }).finished.then(() => {
+        window.location = href
       })
     }
   },
 }
 
+/**
+ * Links handler for navigation and transitions
+ */
 export default class Links {
+  /**
+   * Create a new Links instance
+   * @param {Object} app - Application instance
+   * @param {LinksOptions} [opts={}] - Links options
+   */
   constructor(app, opts = {}) {
     this.app = app
     this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
@@ -98,7 +104,7 @@ export default class Links {
   bindHeroLink() {
     const el = document.querySelector('[data-link-to-content]')
     if (el) {
-      el.addEventListener('click', (e) => {
+      el.addEventListener('click', e => {
         const dataTarget = document.querySelector('main')
         e.preventDefault()
         if (dataTarget) {
@@ -110,8 +116,8 @@ export default class Links {
 
   bindAnchors(anchors) {
     let wait = false
-    Array.from(anchors).forEach((anchor) => {
-      anchor.addEventListener('click', (e) => {
+    Array.from(anchors).forEach(anchor => {
+      anchor.addEventListener('click', e => {
         e.preventDefault()
         const href = anchor.getAttribute('href')
         if (href === '#') {
@@ -166,21 +172,21 @@ export default class Links {
   bindLinks(links) {
     const loadingContainer = document.querySelector('.loading-container')
 
-    Array.from(links).forEach((link) => {
+    Array.from(links).forEach(link => {
       const href = link.getAttribute('href')
       if (!href || href === '#' || href.startsWith('javascript:')) {
         return // Skip empty, anchor, or JS-based links
       }
 
       // Determine the normalized hostname of the current document.
-      const normalizedCurrentHost = this.normalizeHostname(
-        document.location.hostname
-      )
+      const normalizedCurrentHost = this.normalizeHostname(document.location.hostname)
 
       // For absolute URLs, use the URL constructor.
       let linkHostname
+      let linkUrl
       try {
-        linkHostname = new URL(href, document.location.href).hostname
+        linkUrl = new URL(href, document.location.href)
+        linkHostname = linkUrl.hostname
       } catch (error) {
         // If URL construction fails, assume it's not internal.
         console.warn(`Failed to parse URL for href "${href}":`, error) // Log errors for debugging
@@ -195,7 +201,7 @@ export default class Links {
         link.setAttribute('target', '_blank')
       }
 
-      link.addEventListener('click', (e) => {
+      link.addEventListener('click', e => {
         if (e.shiftKey || e.metaKey || e.ctrlKey) {
           return
         }
@@ -204,9 +210,29 @@ export default class Links {
           loadingContainer.style.display = 'none'
         }
 
-        if (internalLink) {
-          e.preventDefault()
-          this.opts.onTransition(href, this.app)
+        if (internalLink && linkUrl) {
+          // Check if we're navigating to the same page with just a different hash
+          const currentUrl = new URL(window.location.href)
+          const isSamePage = linkUrl.pathname === currentUrl.pathname && 
+                            linkUrl.search === currentUrl.search
+          
+          if (isSamePage && linkUrl.hash) {
+            // Same page, just different hash - treat as anchor navigation
+            e.preventDefault()
+            const target = linkUrl.hash
+            const element = document.querySelector(target)
+            if (element) {
+              this.opts.onAnchor(element, this)
+              history.pushState({}, '', href)
+            }
+          } else if (isSamePage && !linkUrl.hash && !currentUrl.hash) {
+            // Same exact page without hash - do nothing
+            e.preventDefault()
+          } else {
+            // Different page or same page with/without hash change - do transition
+            e.preventDefault()
+            this.opts.onTransition(href, this.app)
+          }
         }
       })
     })