@brandocms/jupiter 3.55.0 → 4.0.0-beta.1

package/README.md

@@ -532,36 +532,161 @@ Paragraph one and two will then get a `data-moonwalk="slide"` attribute.
 
 ## Popup
 
+The Popup module allows you to create modal dialogs that appear when triggered by a button click.
+
 ### Options
 
-- `tweenIn: (el, popup) => {}`
-  - Function that gets called to tween popup + background in.
-  - `el` is the popup element itself, while `popup` is the `Popup()` class.
+- `selector` - default `[data-popup]`
+  - CSS selector to find popup elements
+
+- `responsive: (app) => boolean` - default `() => true`
+  - Function to determine if popup should be shown on current breakpoint
+
+- `onOpen: (trigger, target, popup) => {}`
+  - Function called when popup opens
+  - `trigger` is the element that triggered the popup
+  - `target` is the popup element
+  - `popup` is the Popup instance
+
+- `onClose: (popup) => {}`
+  - Function called when popup closes
+  - `popup` is the Popup instance
+
+- `tweenIn: (trigger, target, popup) => {}`
+  - Function for animating the popup opening
+  - `trigger` is the element that triggered the popup
+  - `target` is the popup element
+  - `popup` is the Popup instance
   - Backdrop can be accessed as `popup.backdrop`
 
 - `tweenOut: (popup) => {}`
-  - Function that gets called to tween popup + background out
+  - Function for animating the popup closing
+  - `popup` is the Popup instance
+  - Popup element can be accessed as `popup.currentPopup`
   - Backdrop can be accessed as `popup.backdrop`
 
-- `onClose: (popup) => {}`
-  - Function that gets called right before `popup.close`
+### Basic Usage
+
+HTML:
+
+```html
+<div id="my-popup" data-popup>
+  <div class="popup-header">
+    <h3>My Popup</h3>
+    <button class="close-button" data-popup-close>×</button>
+  </div>
+  <div class="popup-content">
+    <p>This is a popup that appears when the trigger button is clicked.</p>
+  </div>
+</div>
+
+<button data-popup-trigger="#my-popup">Open Popup</button>
+```
+
+JavaScript:
 
-### Example
+```js
+import { Application, Popup } from '@brandocms/jupiter'
+
+const app = new Application()
+const popup = new Popup(app)
+```
 
-Example HTML
+### Advanced Usage with Multiple Popups
+
+You can create multiple independent popups by using the key-based system. This ensures that each popup operates independently, with its own backdrop and close behavior.
+
+HTML:
 
 ```html
-<div class="newsletter-popup" data-popup>
-  ...
-  <button data-popup-close>
+<!-- First popup with key "newsletter" -->
+<div id="newsletter-popup" data-popup data-popup-key="newsletter">
+  <div class="popup-header">
+    <h3>Newsletter Signup</h3>
+    <button class="close-button" data-popup-close>×</button>
+  </div>
+  <div class="popup-content">
+    <p>Sign up for our newsletter!</p>
+  </div>
+</div>
+
+<!-- Second popup with key "login" -->
+<div id="login-popup" data-popup data-popup-key="login">
+  <div class="popup-header">
+    <h3>Login</h3>
+    <button class="close-button" data-popup-close>×</button>
+  </div>
+  <div class="popup-content">
+    <p>Enter your credentials to log in.</p>
+  </div>
 </div>
 
-<button data-popup-trigger=".newsletter-popup">
-  Open popup
+<!-- Triggers for each popup with corresponding keys -->
+<button data-popup-trigger="#newsletter-popup" data-popup-key="newsletter">
+  Subscribe to Newsletter
 </button>
+
+<button data-popup-trigger="#login-popup" data-popup-key="login">
+  Login
+</button>
+```
+
+JavaScript:
+
+```js
+import { Application, Popup } from '@brandocms/jupiter'
+
+const app = new Application()
+
+// Create separate instances for different types of popups
+const newsletterPopup = new Popup(app, '[data-popup][data-popup-key="newsletter"]', {
+  onOpen: (trigger, target, popup) => {
+    console.log('Newsletter popup opened')
+  }
+})
+
+const loginPopup = new Popup(app, '[data-popup][data-popup-key="login"]', {
+  onOpen: (trigger, target, popup) => {
+    console.log('Login popup opened')
+  }
+})
+```
+
+### Custom Animations
+
+You can customize the animation for specific popups:
+
+```js
+const customPopup = new Popup(app, '[data-popup][data-popup-key="custom"]', {
+  tweenIn: (trigger, target, popup) => {
+    // Set backdrop visible
+    gsap.set(popup.backdrop, { display: 'block' })
+    gsap.to(popup.backdrop, {
+      duration: 0.3,
+      opacity: 1,
+      onComplete: () => {
+        // Bounce in animation for popup
+        gsap.fromTo(
+          target,
+          {
+            scale: 0.5,
+            opacity: 0,
+            display: 'block'
+          },
+          {
+            duration: 0.5,
+            scale: 1,
+            opacity: 1,
+            ease: 'back.out(1.7)'
+          }
+        )
+      }
+    })
+  }
+})
 ```
 
-Example CSS (PCSS)
+### CSS Styling
 
 ```scss
 [data-popup] {
@@ -576,9 +701,12 @@ Example CSS (PCSS)
   text-align: center;
   display: none;
   opacity: 0;
-
+  transform: translate(-50%, -50%);
+  border-radius: 6px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+  
   @responsive mobile {
-    width: 80%;
+    width: 90%;
   }
 }
 
@@ -586,13 +714,23 @@ Example CSS (PCSS)
   z-index: 4999;
   display: none;
   opacity: 0;
-  background-color: theme(colors.blue.100);
+  background-color: rgba(0, 0, 0, 0.5);
   position: fixed;
   top: 0;
   left: 0;
+  right: 0;
+  bottom: 0;
   height: 100%;
   width: 100%;
 }
+
+.close-button {
+  background: none;
+  border: none;
+  font-size: 20px;
+  cursor: pointer;
+  color: #333;
+}
 ```
 
 
@@ -796,81 +934,209 @@ Hero example:
 
 ## Parallax
 
+Smooth parallax scrolling effect for images and elements, inspired by SimpleParallax.js.
+
 ### Options
 
 - `el`
   - default `[data-parallax]`
+  - Can also be `[data-parallax-parent]` for multi-element parallax
+
+- `factor`
+  - default `1.3`
+  - Controls the speed of the parallax effect (higher = more movement)
+  - Can be overridden per-element with `data-parallax-factor` attribute
 
 - `fadeContent`
+  - default `true`
+  - If true, fades out content as it leaves the viewport
+  - For multi-element parallax, can be set per-element with `data-parallax-fade` attribute
+
+- `scale`
+  - default `1.2`
+  - Scale factor to apply to parallax background images to prevent gaps during movement
+
+- `orientation`
+  - default `'up'`
+  - Direction of parallax movement: `'up'`, `'down'`, `'left'`, or `'right'`
+  - Can be overridden per-element with `data-parallax-orientation` attribute
+
+- `overflow`
   - default `false`
-  - If true, fades out `[data-parallax-content]` as we move towards bottom of parallaxed element
+  - Whether to allow element overflow to be visible
 
+### Single-Element Parallax
 
-Example:
+For traditional parallax effects with a background and content:
 
 ```html
 <style>
   [data-parallax] {
     position: relative;
-    min-height: 100vh;
+    min-height: 70vh;
     overflow: hidden;
   }
 
   [data-parallax-figure] {
     position: absolute;
-    top: 0;
+    top: -20%;
     left: 0;
-    height: 100%;
     width: 100%;
-    max-height: 100%;
-  }
-
-  [data-parallax-figure] picture {
-    height: 100%;
-    width: 100%;
-  }
-
-  [data-parallax-figure] picture img {
-    min-height: 100%;
-    min-width: 100%;
-    max-height: 100%;
-    object-fit: cover;
+    height: 140%;
+    background-size: cover;
+    background-position: center;
+    will-change: transform;
   }
 
   [data-parallax-content] {
     position: absolute;
     top: 0;
     left: 0;
-    height: 100%;
     width: 100%;
+    height: 100%;
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
+    color: white;
+    text-align: center;
+    background-color: rgba(0, 0, 0, 0.3);
+    z-index: 1;
+    will-change: transform, opacity;
   }
+</style>
+
+<section data-parallax>
+  <div 
+    data-parallax-figure 
+    style="background-image: url('/path/to/image.jpg');"
+  ></div>
+  <div data-parallax-content>
+    <h2>Parallax Title</h2>
+    <p>Parallax content with automatic fade effect</p>
+  </div>
+</section>
+```
 
-  [data-parallax-content] div {
-    color: #ffffff;
-    font-size: 4rem;
+### Multi-Element Parallax
+
+For creating parallax effects with multiple elements, each with their own movement speed and fade settings:
+
+```html
+<style>
+  [data-parallax-parent] {
+    position: relative;
+    height: 80vh;
+    overflow: hidden;
+  }
+  
+  .parallax-element {
+    position: absolute;
+    width: 200px;
+    height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-weight: bold;
+    text-align: center;
+    border-radius: 10px;
+    will-change: transform, opacity;
+  }
+  
+  /* Position elements as needed */
+  .element-1 {
+    background-color: #e74c3c;
+    left: 20%;
+    top: 30%;
+  }
+  
+  .element-2 {
+    background-color: #3498db;
+    left: 50%;
+    top: 40%;
+  }
+  
+  .element-3 {
+    background-color: #2ecc71;
+    left: 70%;
+    top: 50%;
   }
 </style>
 
+<div data-parallax-parent>
+  <!-- Slow element moving down -->
+  <div 
+    class="parallax-element element-1" 
+    data-parallax-factor="0.8" 
+    data-parallax-orientation="down"
+  >
+    Slow downward movement
+  </div>
+  
+  <!-- Medium element with fade effect -->
+  <div 
+    class="parallax-element element-2" 
+    data-parallax-factor="1.5" 
+    data-parallax-fade
+  >
+    Medium upward movement with fade
+  </div>
+  
+  <!-- Fast element without fade moving left -->
+  <div 
+    class="parallax-element element-3" 
+    data-parallax-factor="2.5"
+    data-parallax-orientation="left"
+  >
+    Fast leftward movement
+  </div>
+</div>
+```
+
+### Initialize in JS
+
+```js
+import { Application, Parallax } from '@brandocms/jupiter'
+
+const app = new Application()
+
+// Traditional parallax with background image and content
+const singleParallax = new Parallax(app, {
+  // Default options
+  factor: 1.3,
+  fadeContent: true,
+  scale: 1.2  
+})
+
+// Multi-element parallax
+const multiParallax = new Parallax(app, {
+  el: '[data-parallax-parent]',
+  orientation: 'up'  // Default movement direction
+})
+
+// Cleanup when needed
+function cleanup() {
+  singleParallax.destroy()
+  multiParallax.destroy()
+}
+```
+
+### Using with picture elements
+
+For using parallax with responsive images:
+
+```html
 <section data-parallax>
   <div data-parallax-figure>
-    <%= picture_tag(
-      work.cover,
-      placeholder: false,
-      key: :original,
-      lazyload: true,
-      srcset: {Kunstnerforbundet.Artists.Work, :cover},
-      prefix: media_url(),
-      img_class: "img-fluid",
-      alt: "#{work.title} (#{work.year}) - #{work.size} - #{work.technique}")
-    %>
+    <picture>
+      <source media="(min-width: 1200px)" srcset="/images/large.jpg">
+      <source media="(min-width: 768px)" srcset="/images/medium.jpg">
+      <img src="/images/small.jpg" alt="Parallax image">
+    </picture>
   </div>
   <div data-parallax-content>
-    <div>
-      Testing some parallax :)
-    </div>
+    <h2>Responsive Parallax</h2>
   </div>
 </section>
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brandocms/jupiter",
-  "version": "3.55.0",
+  "version": "4.0.0-beta.1",
   "description": "Frontend helpers.",
   "author": "Univers/Twined",
   "license": "UNLICENSED",
@@ -15,32 +15,42 @@
   "module": "src/index.js",
   "browser": "src/index.js",
   "files": [
-    "src"
+    "src",
+    "types"
   ],
   "homepage": "https://github.com/brandocms/jupiter#readme",
   "sideEffects": false,
   "scripts": {
-    "test": "jest __tests__ --passWithNoTests",
-    "coverage": "jest __tests__ --coverage"
-  },
-  "jest": {
-    "testEnvironment": "jsdom",
-    "transformIgnorePatterns": [
-      "/node_modules/(?!gsap).+\\.js$"
-    ]
+    "test": "playwright test",
+    "types": "tsc",
+    "playwright": "playwright test",
+    "playwright:ui": "playwright test --ui",
+    "playwright:report": "playwright show-report",
+    "playwright:moonwalk": "playwright test e2e/moonwalk.spec.js --project=chromium",
+    "playwright:lazyload": "playwright test e2e/lazyload.spec.js --project=chromium",
+    "playwright:toggler": "playwright test e2e/toggler.spec.js --project=chromium",
+    "playwright:breakpoints": "playwright test e2e/breakpoints.spec.js --project=chromium",
+    "playwright:typography": "playwright test e2e/typography.spec.js --project=chromium",
+    "playwright:popover": "playwright test e2e/popover.spec.js --project=chromium",
+    "playwright:popup": "playwright test e2e/popup.spec.js --project=chromium",
+    "playwright:dataloader": "playwright test e2e/dataloader.spec.js --project=chromium",
+    "playwright:parallax": "playwright test e2e/parallax.spec.js --project=chromium ",
+    "vite": "vite",
+    "vite:build": "vite build",
+    "vite:preview": "vite preview"
   },
+  "types": "types/index.d.ts",
   "dependencies": {
     "@egjs/hammerjs": "^2.0.17",
     "body-scroll-lock": "^4.0.0-beta.0",
-    "gsap": "3.12.5",
+    "gsap": "^3.12.7",
     "lodash.defaultsdeep": "^4.6.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.25.2",
-    "@babel/preset-env": "^7.25.3",
-    "babel-jest": "^29.7.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0"
+    "@playwright/test": "^1.51.1",
+    "@types/node": "^22.13.10",
+    "typescript": "^5.8.2",
+    "vite": "^6.2.2"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

package/src/index.js

@@ -1,3 +1,8 @@
+/**
+ * @file Main entry point for Jupiter - a frontend toolkit for animations and interactions
+ * @module jupiter
+ */
+
 import { CSSPlugin, Draggable, ScrollToPlugin, ScrollTrigger, gsap } from 'gsap/all'
 
 import Hammer from '@egjs/hammerjs'

package/src/modules/Application/index.js

@@ -1,5 +1,4 @@
-import { gsap } from 'gsap'
-import { ScrollToPlugin } from 'gsap/ScrollToPlugin'
+import { gsap, ScrollToPlugin } from 'gsap/all'
 import _defaultsDeep from 'lodash.defaultsdeep'
 import rafCallback from '../../utils/rafCallback'
 import prefersReducedMotion from '../../utils/prefersReducedMotion'
@@ -67,6 +66,14 @@ const DEFAULT_OPTIONS = {
   faderOpts: {
     fadeIn: (callback = () => {}) => {
       const fader = document.querySelector('#fader')
+      if (!fader) {
+        if (window.bfTO) {
+          clearTimeout(window.bfTO)
+        }
+        document.body.classList.remove('unloaded')
+        callback()
+        return
+      }
       gsap.to(fader, {
         opacity: 0,
         ease: 'power1.inOut',
@@ -107,16 +114,18 @@ export default class Application {
     this.position = {
       top: 0,
       left: 0,
+      lastTop: 0,
+      lastLeft: 0,
     }
 
     this.state = {
       revealed: false,
       forcedScroll: false,
+      scrollDirection: null,
     }
 
     this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
     this.focusableSelectors = this.opts.focusableSelectors
-
     this.featureTests = new FeatureTests(this, this.opts.featureTests)
 
     if (typeof this.opts.breakpointConfig === 'object') {
@@ -662,10 +671,33 @@ export default class Application {
       return
     }
 
+    // Store previous position
+    this.position.lastTop = this.position.top
+    this.position.lastLeft = this.position.left
+
+    // Get current position
     this.position.top = window.pageYOffset
     this.position.left = window.pageXOffset
 
-    const evt = new CustomEvent(Events.APPLICATION_SCROLL, e)
+    // Determine scroll direction
+    if (this.position.top > this.position.lastTop) {
+      this.state.scrollDirection = 'down'
+    } else if (this.position.top < this.position.lastTop) {
+      this.state.scrollDirection = 'up'
+    } else if (this.position.left > this.position.lastLeft) {
+      this.state.scrollDirection = 'right'
+    } else if (this.position.left < this.position.lastLeft) {
+      this.state.scrollDirection = 'left'
+    }
+
+    // Create an enhanced event object with additional data
+    const detail = {
+      scrollDirection: this.state.scrollDirection,
+      position: this.position,
+      originalEvent: e
+    }
+    
+    const evt = new CustomEvent(Events.APPLICATION_SCROLL, { detail })
     window.dispatchEvent(evt)
   }