@brandocms/jupiter 3.55.0 → 4.0.0-beta.2

package/src/modules/Parallax/index.js

@@ -1,79 +1,302 @@
 import _defaultsDeep from 'lodash.defaultsdeep'
-import { gsap } from 'gsap'
 import * as Events from '../../events'
 
-// Default Settings
+/**
+ * @typedef {Object} ParallaxOptions
+ * @property {string|HTMLElement} [el='[data-parallax]'] - Target element selector or element
+ * @property {number} [factor=1.3] - Default parallax movement factor
+ * @property {boolean} [fadeContent=true] - Whether to fade content while scrolling
+ * @property {number} [scale=1.2] - Scale factor to apply to parallax images
+ * @property {number} [delay=0.1] - Delay factor to smooth the effect
+ * @property {string} [orientation='up'] - Direction of parallax effect ('up', 'down', 'left', 'right')
+ * @property {boolean} [overflow=false] - Whether to show element overflow
+ */
+
+/** @type {ParallaxOptions} */
 const DEFAULT_OPTIONS = {
   el: '[data-parallax]',
   factor: 1.3,
-  fadeContent: true
+  fadeContent: true,
+  scale: 1.2,
+  delay: 0.1,
+  orientation: 'up',
+  overflow: false,
 }
 
+/**
+ * Parallax scrolling effect inspired by SimpleParallax.js
+ */
 export default class Parallax {
+  /**
+   * Create a new Parallax instance
+   * @param {Object} app - Application instance
+   * @param {ParallaxOptions} [opts={}] - Parallax options
+   */
   constructor(app, opts = {}) {
     this.app = app
     this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
     this.elements = {}
-
+    this.parallaxElements = []
+    
+    // Get all elements to apply parallax to
     if (typeof this.opts.el === 'string') {
-      this.elements.wrapper = document.querySelector(this.opts.el)
-    } else {
-      this.elements.wrapper = this.opts.el
+      if (this.opts.el.includes('[data-parallax-parent]')) {
+        // Handle multiple elements within parent
+        const parent = document.querySelector(this.opts.el)
+        if (parent) {
+          this.elements.parent = parent
+          const children = parent.querySelectorAll('[data-parallax-factor]')
+          children.forEach(el => this.setupParallaxElement(el))
+        }
+      } else {
+        // Handle single element or multiple elements with same selector
+        const elements = document.querySelectorAll(this.opts.el)
+        elements.forEach(el => this.setupParallaxElement(el))
+      }
+    } else if (this.opts.el instanceof HTMLElement) {
+      // Handle single element passed directly
+      this.setupParallaxElement(this.opts.el)
     }
-
-    this.elements.content = this.elements.wrapper.querySelector('[data-parallax-content]')
-    this.elements.figure = this.elements.wrapper.querySelector('[data-parallax-figure]')
-
-    this.initializeTimeline()
-    window.addEventListener(Events.APPLICATION_SCROLL, this.onScroll.bind(this))
+    
+    // Bind events
+    this.onScroll = this.onScroll.bind(this)
+    window.addEventListener(Events.APPLICATION_SCROLL, this.onScroll)
+    window.addEventListener('resize', this.onScroll)
+    
+    // Initial positioning
+    this.onScroll()
   }
-
-  initializeTimeline() {
-    this.timeline = gsap.timeline({
-      useFrames: true,
-      paused: true
+  
+  /**
+   * Set up a parallax element with its properties
+   * @param {HTMLElement} el - Element to set up
+   */
+  setupParallaxElement(el) {
+    // Get element-specific options
+    const factor = el.hasAttribute('data-parallax-factor') ? 
+      parseFloat(el.getAttribute('data-parallax-factor')) : 
+      this.opts.factor
+      
+    // For traditional parallax, use the global fadeContent option
+    // For individual elements, check for data-parallax-fade attribute
+    let fadeContent = el.hasAttribute('data-parallax') ? 
+      this.opts.fadeContent : 
+      el.hasAttribute('data-parallax-fade')
+    
+    const orientation = el.hasAttribute('data-parallax-orientation') ? 
+      el.getAttribute('data-parallax-orientation') : 
+      this.opts.orientation
+    
+    // Set up for traditional parallax if needed
+    let contentEl = null
+    let figureEl = null
+    
+    if (el.hasAttribute('data-parallax')) {
+      contentEl = el.querySelector('[data-parallax-content]')
+      figureEl = el.querySelector('[data-parallax-figure]')
+      
+      // Apply overflow style if needed
+      if (!this.opts.overflow) {
+        el.style.overflow = 'hidden'
+      }
+      
+      // Scale up the figure element to prevent showing background during parallax
+      if (figureEl) {
+        figureEl.style.transform = `scale(${this.opts.scale})`
+        figureEl.style.willChange = 'transform'
+        figureEl.style.transformOrigin = 'center'
+        
+        // Make sure background fills the container
+        const computedStyle = window.getComputedStyle(figureEl)
+        if (computedStyle.backgroundImage && computedStyle.backgroundImage !== 'none') {
+          if (computedStyle.backgroundSize !== 'cover') {
+            figureEl.style.backgroundSize = 'cover'
+          }
+          if (computedStyle.backgroundPosition !== 'center') {
+            figureEl.style.backgroundPosition = 'center'
+          }
+        }
+      }
+      
+      if (contentEl) {
+        contentEl.style.willChange = fadeContent ? 'transform, opacity' : 'transform'
+        contentEl.style.zIndex = '1' // Ensure content is above the figure
+      }
+    } else {
+      // For individual elements in multi-element parallax
+      el.style.willChange = fadeContent ? 'transform, opacity' : 'transform'
+    }
+    
+    // Store the element and its settings
+    this.parallaxElements.push({
+      element: el,
+      factor,
+      fadeContent,
+      orientation,
+      content: contentEl,
+      figure: figureEl,
+      elementHeight: el.offsetHeight,
+      elementWidth: el.offsetWidth,
+      lastPosition: 0
     })
-
-    if (this.opts.fadeContent) {
-      this.timeline.to(
-        this.elements.content,
-        {
-          duration: this.app.size.height * 0.4,
-          opacity: 0,
-          ease: 'power0.none'
-        },
-        0
-      )
+  }
+  
+  /**
+   * Calculate the transform value based on scroll position
+   * @param {Object} item - Parallax element data
+   * @param {number} scrollPosition - Current scroll position
+   * @returns {Object} Transform and opacity values
+   */
+  calculateTransform(item, scrollPosition) {
+    const { element, factor, fadeContent, orientation } = item
+    
+    // Get element position
+    const rect = element.getBoundingClientRect()
+    const windowHeight = this.app.size.height
+    const windowMiddle = windowHeight / 2
+    
+    // Calculate how far the element is from the middle of the viewport
+    const elementMiddle = rect.top + rect.height / 2
+    const distanceFromMiddle = elementMiddle - windowMiddle
+    
+    // Calculate percentage through viewport (-1 to 1 range, 0 at center)
+    const percentageThrough = distanceFromMiddle / windowHeight
+    
+    // Apply the factor to create parallax effect
+    const movement = percentageThrough * factor * 100
+    
+    // Calculate opacity for fade effect
+    let opacity = 1;
+    
+    // Only apply fade if explicitly enabled
+    if (fadeContent) {
+      // Calculate position in viewport (0 = top of viewport, 1 = bottom of viewport)
+      const viewportPosition = rect.top / windowHeight;
+      
+      // Fade in as element enters viewport from bottom (opacity 0->1)
+      // Fade out as element leaves viewport at top (opacity 1->0)
+      if (viewportPosition <= 0) {
+        // Element is at top or above viewport - fade out based on how far above
+        opacity = Math.max(0, 1 + (viewportPosition * 1.5));
+      } else if (viewportPosition >= 0.7) {
+        // Element is at bottom of viewport - fade in based on position
+        opacity = Math.max(0, 1 - ((viewportPosition - 0.7) * 3.33));
+      }
+      
+      // Ensure opacity is within valid range
+      opacity = Math.max(0, Math.min(1, opacity));
     }
-
-    this.timeline.to(
-      this.elements.content,
-      {
-        duration: this.app.size.height * 0.5,
-        y: this.app.size.height * 0.1,
-        ease: 'power0.none'
-      },
-      0
-    )
-
-    this.timeline.fromTo(
-      this.elements.figure,
-      {
-        duration: this.app.size.height,
-        yPercent: 0
-      },
-      {
-        duration: this.app.size.height,
-        yPercent: (this.app.size.height * this.opts.factor) / 100,
-        ease: 'power0.none'
-      },
-      0
-    )
+    
+    // Create transform based on orientation
+    let transform = ''
+    
+    switch (orientation) {
+      case 'up':
+        transform = `translate3d(0, ${movement}px, 0)`
+        break
+      case 'down':
+        transform = `translate3d(0, ${-movement}px, 0)`
+        break
+      case 'left':
+        transform = `translate3d(${movement}px, 0, 0)`
+        break
+      case 'right':
+        transform = `translate3d(${-movement}px, 0, 0)`
+        break
+      default:
+        transform = `translate3d(0, ${movement}px, 0)`
+    }
+    
+    return { transform, opacity }
   }
-
+  
+  /**
+   * Apply a smooth transition between current and target position
+   * @param {Object} item - Parallax element data
+   * @param {Object} target - Target transform and opacity values
+   */
+  applyTransform(item, target) {
+    const { element, figure, content } = item
+    
+    // For traditional parallax with background and content
+    if (figure) {
+      // Extract and maintain the scale transform
+      let scaleTransform = 'scale(1.2)';
+      const currentTransform = figure.style.transform;
+      if (currentTransform) {
+        const scaleMatch = currentTransform.match(/scale\([^)]+\)/);
+        if (scaleMatch) {
+          scaleTransform = scaleMatch[0];
+        }
+      }
+      
+      figure.style.transform = `${scaleTransform} ${target.transform}`;
+    }
+    
+    // Apply transform and opacity to content
+    if (content) {
+      content.style.transform = target.transform;
+      content.style.opacity = target.opacity;
+    }
+    
+    // For multi-element parallax items
+    if (!figure && !content) {
+      element.style.transform = target.transform;
+      element.style.opacity = target.opacity;
+    }
+  }
+  
+  /**
+   * Handle scroll event to update parallax effect
+   */
   onScroll() {
-    const elTop = this.elements.wrapper.getBoundingClientRect().top
-    const progress = Math.max(0, Math.min(elTop / this.timeline.duration(), 1))
-    this.timeline.progress(progress)
+    if (!this.parallaxElements.length) return
+    
+    const scrollPosition = window.pageYOffset
+    
+    // Update each parallax element
+    this.parallaxElements.forEach(item => {
+      const rect = item.element.getBoundingClientRect()
+      
+      // Only apply parallax if the element is in or near the viewport
+      if (rect.bottom > -100 && rect.top < this.app.size.height + 100) {
+        const transform = this.calculateTransform(item, scrollPosition)
+        this.applyTransform(item, transform)
+      }
+    })
+  }
+  
+  /**
+   * Destroy the parallax instance and clean up
+   */
+  destroy() {
+    window.removeEventListener(Events.APPLICATION_SCROLL, this.onScroll)
+    window.removeEventListener('resize', this.onScroll)
+    
+    // Reset element styles
+    this.parallaxElements.forEach(item => {
+      const { element, figure, content } = item
+      
+      if (figure) {
+        figure.style.transform = ''
+        figure.style.willChange = ''
+      }
+      
+      if (content) {
+        content.style.transform = ''
+        content.style.opacity = ''
+        content.style.willChange = ''
+      }
+      
+      if (!figure && !content) {
+        element.style.transform = ''
+        element.style.opacity = ''
+        element.style.willChange = ''
+      }
+      
+      element.style.overflow = ''
+    })
+    
+    this.parallaxElements = []
   }
 }

package/src/modules/Popover/index.js

@@ -1,8 +1,18 @@
-import { gsap } from 'gsap'
+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,22 +23,47 @@ 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
 
     Object.assign(this.popover.style, {
-      position: 'fixed'
+      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))
     }
@@ -46,15 +81,60 @@ 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
+    // 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)
@@ -63,50 +143,96 @@ export default class Popover {
       top: {
         name: 'top',
         top: triggerTop - popoverHeight,
-        left: triggerLeft - (popoverWidth - triggerWidth) / 2
+        left: triggerLeft - (popoverWidth - triggerWidth) / 2,
       },
       right: {
         name: 'right',
         top: triggerTop - (popoverHeight - triggerHeight) / 2,
-        left: triggerLeft + triggerWidth
+        left: triggerLeft + triggerWidth,
       },
       bottom: {
         name: 'bottom',
         top: triggerTop + triggerHeight,
-        left: triggerLeft - (popoverWidth - triggerWidth) / 2
+        left: triggerLeft - (popoverWidth - triggerWidth) / 2,
       },
       left: {
         name: 'left',
         top: triggerTop - (popoverHeight - triggerHeight) / 2,
-        left: triggerLeft - popoverWidth
-      }
+        left: triggerLeft - popoverWidth,
+      },
     }
 
+    // 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)
+        // 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)
       })
 
+    // 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() {
@@ -116,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)
+  }
 }