@brandocms/jupiter 4.0.0-beta.1 → 4.0.0-beta.2

package/src/modules/Popover/index.js

@@ -1,8 +1,18 @@
-import { gsap } from 'gsap/all'
+import { animate } from 'motion'
 import Dom from '../Dom'
 import _defaultsDeep from 'lodash.defaultsdeep'
+import * as Events from '../../events'
 
-const DEFAULT_OPTIONS = {}
+const DEFAULT_OPTIONS = {
+  clickToggle: false,
+  allowMultiple: false,
+  followTrigger: false,
+  followSpeed: 0.3,
+  onShow: null,
+}
+
+// Static array to track active popovers
+const activePopovers = []
 
 export default class Popover {
   constructor(app, trigger, opts = {}) {
@@ -13,10 +23,17 @@ export default class Popover {
     this.position = this.trigger.getAttribute('data-popover-position') || 'top'
     this.className = 'popover'
     this.orderedPositions = ['top', 'right', 'bottom', 'left']
+    this.currentPosition = this.position
 
     const popoverTemplate = document.querySelector(
       `[data-popover-template=${trigger.dataset.popoverTarget}]`
     )
+
+    if (!popoverTemplate) {
+      console.warn(`Popover template not found for trigger: ${trigger.dataset.popoverTarget}`)
+      return
+    }
+
     this.popover = document.createElement('div')
     this.popover.innerHTML = popoverTemplate.innerHTML
 
@@ -24,22 +41,31 @@ export default class Popover {
       position: 'fixed',
     })
 
+    // Add base popover class
     this.popover.classList.add(this.className)
 
+    // Add any classes from the template element
+    if (popoverTemplate.classList && popoverTemplate.classList.length > 0) {
+      popoverTemplate.classList.forEach(className => {
+        if (className !== 'popover-template') {
+          this.popover.classList.add(className)
+        }
+      })
+    }
+
+    // Bind handlers
+    this.boundHandleDocumentClick = this.handleDocumentClick.bind(this)
+    this.boundHandleScroll = this.handleScroll.bind(this)
+
     if (!app.featureTests.results.touch) {
-      this.trigger.addEventListener(
-        'mouseenter',
-        this.handleMouseEnter.bind(this)
-      )
-      this.trigger.addEventListener(
-        'mouseleave',
-        this.handleMouseLeave.bind(this)
-      )
+      if (this.opts.clickToggle) {
+        this.trigger.addEventListener('click', this.handleClick.bind(this))
+      } else {
+        this.trigger.addEventListener('mouseenter', this.handleMouseEnter.bind(this))
+        this.trigger.addEventListener('mouseleave', this.handleMouseLeave.bind(this))
+      }
     } else {
-      this.trigger.addEventListener(
-        'touchstart',
-        this.handleTouchStart.bind(this)
-      )
+      this.trigger.addEventListener('touchstart', this.handleTouchStart.bind(this))
     }
   }
 
@@ -55,19 +81,61 @@ export default class Popover {
     this.toggle()
   }
 
+  handleClick(e) {
+    e.stopPropagation()
+    this.toggle()
+  }
+
   get isVisible() {
     return document.body.contains(this.popover)
   }
 
   show() {
+    // Close other popovers if not allowing multiple
+    if (!this.opts.allowMultiple) {
+      this.closeAllExcept(this)
+    }
+
     document.body.appendChild(this.popover)
 
-    const { top: triggerTop, left: triggerLeft } =
-      this.trigger.getBoundingClientRect()
-    const { offsetHeight: triggerHeight, offsetWidth: triggerWidth } =
-      this.trigger
-    const { offsetHeight: popoverHeight, offsetWidth: popoverWidth } =
-      this.popover
+    // Add to active popovers list
+    if (!activePopovers.includes(this)) {
+      activePopovers.push(this)
+    }
+
+    // Calculate initial position
+    this.updatePosition(false)
+
+    // Setup document click handler for click outside closing
+    if (this.opts.clickToggle) {
+      this.addDocumentClickHandler()
+    }
+
+    // Setup scroll handler if followTrigger is enabled
+    if (this.opts.followTrigger) {
+      // Use requestAnimationFrame to ensure the popover is fully rendered
+      requestAnimationFrame(() => {
+        this.addScrollListener()
+      })
+    }
+
+    // Call onShow callback if provided
+    if (typeof this.opts.onShow === 'function') {
+      requestAnimationFrame(() => {
+        this.opts.onShow(this)
+      })
+    }
+  }
+
+  // Update popover position based on trigger position
+  updatePosition(shouldAnimate = true) {
+    const {
+      top: triggerTop,
+      left: triggerLeft,
+      width: triggerWidth,
+      height: triggerHeight,
+    } = this.trigger.getBoundingClientRect()
+    const { offsetHeight: popoverHeight, offsetWidth: popoverWidth } = this.popover
 
     const positionIndex = this.orderedPositions.indexOf(this.position)
 
@@ -94,31 +162,77 @@ export default class Popover {
       },
     }
 
+    // Try to find a position that keeps the popover in viewport
     const position = this.orderedPositions
       .slice(positionIndex)
       .concat(this.orderedPositions.slice(0, positionIndex))
-      .map((pos) => positions[pos])
-      .find((pos) => {
-        this.popover.style.top = `${pos.top}px`
-        this.popover.style.left = `${pos.left}px`
-        return Dom.inViewport(this.popover)
+      .map(pos => positions[pos])
+      .find(pos => {
+        // Temporarily set position to check viewport
+        if (!shouldAnimate) {
+          this.popover.style.top = `${pos.top}px`
+          this.popover.style.left = `${pos.left}px`
+        }
+        return Dom.inViewportStrict(this.popover)
       })
 
-    this.orderedPositions.forEach((pos) => {
+    // Remove previous position classes
+    this.orderedPositions.forEach(pos => {
       this.popover.classList.remove(`${this.className}--${pos}`)
     })
 
+    // Set position and apply appropriate class
     if (position) {
+      if (shouldAnimate && this.isVisible) {
+        animate(this.popover, {
+          top: Math.max(0, position.top),
+          left: Math.max(0, position.left)
+        }, {
+          duration: this.opts.followSpeed,
+          ease: 'easeOut'
+        })
+      } else if (!shouldAnimate) {
+        this.popover.style.top = `${Math.max(0, position.top)}px`
+        this.popover.style.left = `${Math.max(0, position.left)}px`
+      }
       this.popover.classList.add(`${this.className}--${position.name}`)
+      this.currentPosition = position.name
     } else {
-      this.popover.style.top = positions.bottom.top
-      this.popover.style.left = positions.bottom.left
+      // Fallback to bottom if no position works
+      if (shouldAnimate && this.isVisible) {
+        animate(this.popover, {
+          top: Math.max(0, positions.bottom.top),
+          left: Math.max(0, positions.bottom.left)
+        }, {
+          duration: this.opts.followSpeed,
+          ease: 'easeOut'
+        })
+      } else if (!shouldAnimate) {
+        this.popover.style.top = `${Math.max(0, positions.bottom.top)}px`
+        this.popover.style.left = `${Math.max(0, positions.bottom.left)}px`
+      }
       this.popover.classList.add(`${this.className}--bottom`)
+      this.currentPosition = 'bottom'
     }
   }
 
   hide() {
     this.popover.remove()
+
+    // Remove from active popovers
+    const index = activePopovers.indexOf(this)
+    if (index !== -1) {
+      activePopovers.splice(index, 1)
+    }
+
+    // Remove handlers
+    if (this.opts.clickToggle) {
+      this.removeDocumentClickHandler()
+    }
+
+    if (this.opts.followTrigger) {
+      this.removeScrollListener()
+    }
   }
 
   toggle() {
@@ -128,4 +242,48 @@ export default class Popover {
       this.show()
     }
   }
+
+  // Add document click handler to close popover when clicking outside
+  addDocumentClickHandler() {
+    document.addEventListener('click', this.boundHandleDocumentClick)
+  }
+
+  // Remove document click handler
+  removeDocumentClickHandler() {
+    document.removeEventListener('click', this.boundHandleDocumentClick)
+  }
+
+  // Handle clicks on document to close popover when clicking outside
+  handleDocumentClick(e) {
+    // If click is outside the popover and the trigger, close it
+    if (this.isVisible && !this.popover.contains(e.target) && !this.trigger.contains(e.target)) {
+      this.hide()
+    }
+  }
+
+  // Close all popovers except the specified one
+  closeAllExcept(exceptPopover) {
+    activePopovers.forEach(popover => {
+      if (popover !== exceptPopover) {
+        popover.hide()
+      }
+    })
+  }
+
+  // Handle scroll events to update popover position
+  handleScroll() {
+    if (this.isVisible) {
+      this.updatePosition(true)
+    }
+  }
+
+  // Add scroll event listener using APPLICATION:SCROLL event
+  addScrollListener() {
+    window.addEventListener(Events.APPLICATION_SCROLL, this.boundHandleScroll)
+  }
+
+  // Remove scroll event listener
+  removeScrollListener() {
+    window.removeEventListener(Events.APPLICATION_SCROLL, this.boundHandleScroll)
+  }
 }

package/src/modules/Popup/index.js

@@ -1,4 +1,5 @@
-import { gsap } from 'gsap/all'
+import { animate } from 'motion'
+import { set } from '../../utils/motion-helpers'
 import _defaultsDeep from 'lodash.defaultsdeep'
 
 /**
@@ -36,51 +37,41 @@ const DEFAULT_OPTIONS = {
   onClose: () => {},
 
   tweenIn: (trigger, target, popup) => {
-    gsap.set(popup.backdrop, { display: 'block' })
-    gsap.to(popup.backdrop, {
-      duration: 0.3,
-      opacity: 1,
-      onComplete: () => {
-        gsap.fromTo(
+    popup.backdrop.style.display = 'block'
+    animate(popup.backdrop, { opacity: 1 }, { duration: 0.3 })
+      .finished
+      .then(() => {
+        target.style.display = 'block'
+        animate(
           target,
           {
-            duration: 0.3,
-            yPercent: -50,
-            x: -5,
-            xPercent: -50,
-            opacity: 0,
-            display: 'block',
+            transform: [
+              'translate(calc(-50% - 5px), -50%)',
+              'translate(-50%, -50%)'
+            ],
+            opacity: [0, 1]
           },
-          {
-            duration: 0.3,
-            yPercent: -50,
-            xPercent: -50,
-            x: 0,
-            opacity: 1,
-          }
+          { duration: 0.3, ease: [0.4, 0, 0.2, 1] }
         )
-      },
-    })
+      })
   },
 
   tweenOut: (popup) => {
     console.log('default tweenOut')
     const popupElement = popup.currentPopup
     if (popupElement) {
-      gsap.to(popupElement, {
-        duration: 0.3,
-        opacity: 0,
-        display: 'none',
-      })
+      animate(popupElement, { opacity: 0 }, { duration: 0.3 })
+        .finished
+        .then(() => {
+          popupElement.style.display = 'none'
+        })
     }
-    gsap.to(popup.backdrop, {
-      duration: 0.3,
-      opacity: 0,
-      onComplete: () => {
+    animate(popup.backdrop, { opacity: 0 }, { duration: 0.3 })
+      .finished
+      .then(() => {
         // Remove the backdrop completely instead of just hiding it
         popup.backdrop.remove()
-      },
-    })
+      })
   },
 }
 
@@ -189,7 +180,9 @@ export default class Popup {
     if (key) {
       backdrop.setAttribute('data-popup-key', key)
     }
-    gsap.set(backdrop, { opacity: 0, display: 'none', zIndex: 4999 })
+    backdrop.style.display = 'none'
+    backdrop.style.zIndex = '4999'
+    set(backdrop, { opacity: 0 })
 
     backdrop.addEventListener('click', (e) => {
       e.stopPropagation()

package/src/modules/StackedBoxes/index.js

@@ -1,4 +1,4 @@
-import { gsap } from 'gsap/all'
+import { set } from '../../utils/motion-helpers'
 import _defaultsDeep from 'lodash.defaultsdeep'
 
 const DEFAULT_OPTIONS = {}
@@ -62,10 +62,10 @@ export default class StackedBoxes {
   }
 
   pull(box, amnt) {
-    gsap.set(box, { y: amnt * -1, marginBottom: amnt * -1 })
+    set(box, { y: amnt * -1, marginBottom: amnt * -1 })
   }
 
   size(target, src) {
-    gsap.set(target, { height: src.clientHeight })
+    set(target, { height: src.clientHeight })
   }
 }