@brandocms/jupiter 3.54.2 → 3.54.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brandocms/jupiter",
-  "version": "3.54.2",
+  "version": "3.54.4",
   "description": "Frontend helpers.",
   "author": "Univers/Twined",
   "license": "UNLICENSED",

package/src/modules/Dropdown/index.js

@@ -25,15 +25,20 @@ const DEFAULT_OPTIONS = {
   selectors: {
     trigger: '[data-dropdown-trigger]',
     menu: '[data-dropdown-menu]',
-    menuItems: '[data-dropdown-menu] > li'
+    menuItems: '[data-dropdown-menu] > li',
   },
   tweens: {
     items: {
       duration: 0.2,
       autoAlpha: 0,
-      stagger: 0.03
-    }
-  }
+      stagger: 0.03,
+    },
+  },
+
+  onBeforeOpen: async (dropdown) => {},
+  onAfterOpen: async (dropdown) => {},
+  onBeforeClose: async (dropdown) => {},
+  onAfterClose: async (dropdown) => {},
 }
 
 export default class Dropdown {
@@ -44,14 +49,25 @@ export default class Dropdown {
     this.open = false
     this.element = opts.el
     this.timeline = gsap.timeline({ paused: true, reversed: true })
+
     this.elements.trigger = Dom.find(this.element, this.opts.selectors.trigger)
     if (this.elements.trigger.hasAttribute('data-dropdown-target')) {
-      const dropdownTarget = this.elements.trigger.getAttribute('data-dropdown-target')
+      const dropdownTarget = this.elements.trigger.getAttribute(
+        'data-dropdown-target'
+      )
       this.elements.menu = Dom.find(dropdownTarget)
     } else {
       this.elements.menu = Dom.find(this.element, this.opts.selectors.menu)
     }
-    this.elements.menuItems = Dom.all(this.elements.menu, this.opts.selectors.menuItems)
+
+    this.elements.menuItems = Dom.all(
+      this.elements.menu,
+      this.opts.selectors.menuItems
+    )
+
+    // Bind the document click handler to this instance
+    this.handleDocumentClick = this.handleDocumentClick.bind(this)
+
     this.initialize()
     this.checkForInitialOpen()
   }
@@ -64,38 +80,60 @@ export default class Dropdown {
         this.elements.menu,
         {
           className: `${this.elements.menu.className} zero-height`,
-          duration: 0.1
+          duration: 0.1,
         },
-
         'open'
       )
       .to(
         this.elements.menu,
         {
           height: 'auto',
-          duration: 0.1
+          duration: 0.1,
         },
         'open'
       )
       .call(() => {
-        // check if we have space
-        const subMenuBound = this.elements.menu.getBoundingClientRect()
-        const windowHeight = window.innerHeight
-
-        const subMenuY = subMenuBound.y
-        const subMenuHeight = subMenuBound.height
-
-        Dom.setCSSVar('dropdown-menu-height', `${subMenuHeight}px`, this.elements.menu)
-
-        if (subMenuHeight + subMenuY > windowHeight) {
+        // Get current bounds and viewport dimensions
+        const menuRect = this.elements.menu.getBoundingClientRect()
+        const viewportHeight = window.innerHeight
+        const viewportWidth = window.innerWidth
+        const menuHeight = menuRect.height
+        const menuTop = menuRect.top
+
+        // Update CSS variable for height (if used in your styles)
+        Dom.setCSSVar(
+          'dropdown-menu-height',
+          `${menuHeight}px`,
+          this.elements.menu
+        )
+
+        // Vertical placement: if the menu overflows the bottom, set placement to "top"
+        if (menuHeight + menuTop > viewportHeight) {
           this.elements.menu.setAttribute('data-dropdown-placement', 'top')
         } else {
           this.elements.menu.setAttribute('data-dropdown-placement', 'bottom')
         }
+
+        // Horizontal check: adjust left offset if the menu is offscreen
+        const computedStyle = window.getComputedStyle(this.elements.menu)
+        let currentLeft = parseFloat(computedStyle.left) || 0
+
+        if (menuRect.left < 0) {
+          // Shift right by the amount it’s off the left edge
+          this.elements.menu.style.left = `${currentLeft - menuRect.left}px`
+        } else if (menuRect.right > viewportWidth) {
+          // Shift left by the amount it’s off the right edge
+          this.elements.menu.style.left = `${currentLeft - (menuRect.right - viewportWidth)}px`
+        }
       })
       .to(this.elements.menu, { opacity: 1 })
+
     if (this.elements.menuItems.length) {
-      this.timeline.from(this.elements.menuItems, this.opts.tweens.items, 'open+=.1')
+      this.timeline.from(
+        this.elements.menuItems,
+        this.opts.tweens.items,
+        'open+=.1'
+      )
     }
 
     if (!this.elements.trigger) {
@@ -104,18 +142,22 @@ export default class Dropdown {
     this.elements.trigger.addEventListener('click', this.onClick.bind(this))
   }
 
-  onClick(event) {
+  async onClick(event) {
     event.preventDefault()
     event.stopPropagation()
 
     if (this.open) {
-      this.closeMenu()
+      await this.opts.onBeforeClose(this)
+      await this.closeMenu()
+      this.opts.onAfterClose(this)
     } else {
-      this.openMenu()
+      await this.opts.onBeforeOpen(this)
+      await this.openMenu()
+      this.opts.onAfterOpen(this)
     }
   }
 
-  openMenu() {
+  async openMenu() {
     if (!this.opts.multipleActive) {
       if (this.app.currentMenu) {
         this.app.currentMenu.closeMenu()
@@ -125,22 +167,37 @@ export default class Dropdown {
     this.open = true
     this.elements.trigger.dataset.dropdownActive = ''
 
+    // Add document click listener when menu is open.
+    document.addEventListener('click', this.handleDocumentClick)
+
     if (this.timeline.reversed()) {
-      this.timeline.play()
+      await this.timeline.play()
     } else {
-      this.timeline.reverse()
+      await this.timeline.reverse()
     }
   }
 
-  closeMenu() {
+  async closeMenu() {
     this.app.currentMenu = null
     this.open = false
     delete this.elements.trigger.dataset.dropdownActive
 
+    // Remove the document click listener when menu closes.
+    document.removeEventListener('click', this.handleDocumentClick)
+
     if (this.timeline.reversed()) {
-      this.timeline.play()
+      await this.timeline.play()
     } else {
-      this.timeline.reverse()
+      await this.timeline.reverse()
+    }
+  }
+
+  // Handler that checks if a click was outside the dropdown element.
+  handleDocumentClick(event) {
+    // If the click target is not inside the dropdown, close the menu.
+    if (!this.element.contains(event.target)) {
+      // this.closeMenu()
+      this.onClick(event)
     }
   }
 

package/src/modules/Moonwalk/index.js

@@ -52,6 +52,11 @@ const DEFAULT_OPTIONS = {
    */
   clearMoonwalkOnAnchors: true,
 
+  /**
+   * If an element with moonwalk-run also has moonwalk-section, print a console warning
+   */
+  warnRunWithSection: true,
+
   /**
    * Determines how early the IntersectionObserver triggers
    */
@@ -120,6 +125,17 @@ export default class Moonwalk {
         .forEach((ms) => ms.removeAttribute('data-moonwalk'))
     }
 
+    if (this.opts.warnRunWithSection) {
+      container
+        .querySelectorAll('[data-moonwalk-run][data-moonwalk-section]')
+        .forEach((ms) =>
+          console.warn(
+            'Element with moonwalk-run also has moonwalk-section. This may lead to rendering issues.',
+            ms
+          )
+        )
+    }
+
     if (this.opts.clearMoonwalkOnAnchors) {
       if (window.location.hash) {
         this.walkToThisPoint(window.location.hash)