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

package/README.md

@@ -237,7 +237,6 @@ include images from this section. Otherwise, all lightboxed images will be inclu
 
 - `trigger` - `false` - selector representing an element you want to use as a trigger to open lightbox
 - `captions` - `false` - whether to show captions or not in the overlay
-- `swipe` - `true` – if swipe is true, native zoom won't work, so allow choosing
 - `elements` - `object` - switch out default elements in the overlay
   - `arrowRight` - `function` - returns an element
   - `arrowLeft` - `function` - returns an element
@@ -277,6 +276,33 @@ HTML
 </div>
 ```
 
+#### Group Functionality
+
+You can group togglers together to create an accordion-like behavior where only one toggler in the group can be open at a time. When you open one toggler, all others in the same group will close automatically.
+
+```html
+<div data-toggle data-toggle-group="phases">
+  <button data-toggle-trigger="phase1">Phase 1 <span class="arrow icon">&darr;</span></button>
+  <div class="panel" data-toggle-content="phase1">
+    Phase 1 content
+  </div>
+</div>
+
+<div data-toggle data-toggle-group="phases">
+  <button data-toggle-trigger="phase2">Phase 2 <span class="arrow icon">&darr;</span></button>
+  <div class="panel" data-toggle-content="phase2">
+    Phase 2 content
+  </div>
+</div>
+
+<div data-toggle data-toggle-group="phases">
+  <button data-toggle-trigger="phase3">Phase 3 <span class="arrow icon">&darr;</span></button>
+  <div class="panel" data-toggle-content="phase3">
+    Phase 3 content
+  </div>
+</div>
+```
+
 CSS
 ```css
 [data-toggle-trigger] {
@@ -290,6 +316,14 @@ CSS
   }
 }
 
+/* Style active trigger elements */
+[data-toggle-trigger][data-toggle-trigger-active] {
+  background-color: #e8f4ff;
+  border-color: #4a90e2;
+  color: #0056b3;
+  font-weight: bold;
+}
+
 [data-toggle-content] {
   height: 0;
   overflow: hidden;
@@ -313,6 +347,136 @@ togglers.forEach(toggleEl => {
 #### Options
 
 
+## Dataloader
+
+A component for dynamically loading and filtering content via AJAX with optional URL synchronization.
+
+### Basic Usage
+
+HTML:
+```html
+<div data-loader="/api/articles" data-loader-id="articles">
+  <div class="filters">
+    <a href="#" data-loader-param="all" data-loader-param-selected>All</a>
+    <a href="#" data-loader-param="tech" data-loader-param-key="category">Technology</a>
+    <a href="#" data-loader-param="design" data-loader-param-key="category">Design</a>
+  </div>
+  
+  <div data-loader-canvas>
+    <!-- Content will be loaded here -->
+  </div>
+  
+  <button data-loader-more>Load More</button>
+</div>
+```
+
+JavaScript:
+```js
+import { Dataloader } from '@brandocms/jupiter'
+
+const dataloader = new Dataloader(app, $loaderEl, {
+  onFetch: (dataloader) => {
+    // Initialize components after content loads
+    const mw = new Moonwalk(app, {}, dataloader.$canvasEl)
+    new Lazyload(app, {}, dataloader.$canvasEl)
+    mw.ready()
+  }
+})
+```
+
+### URL Synchronization
+
+Enable bidirectional sync between dataloader parameters and browser URL:
+
+```js
+// Configure URL patterns for different dataloaders
+const urlConfigs = {
+  events: {
+    templates: {
+      en: '/events/:location/:type',
+      no: '/arrangementer/:location/:type'
+    },
+    updateOnInit: false // Don't update URL on initialization
+  },
+  news: {
+    templates: {
+      en: '/news/:category/:year',
+      no: '/nyheter/:category/:year'
+    }
+  }
+}
+
+// Initialize all dataloaders with URL sync
+app.dataloaders = []
+Dom.all('[data-loader]').forEach($dl => {
+  app.dataloaders.push(
+    new Dataloader(app, $dl, {
+      urlSync: urlConfigs,
+      onFetch: (dataloader) => {
+        // Your onFetch logic
+      }
+    })
+  )
+})
+```
+
+### Split Layout
+
+Components can be placed outside the main dataloader element:
+
+```html
+<!-- Sidebar -->
+<div data-loader="/api/articles" data-loader-id="articles">
+  <a href="#" data-loader-param="tech" data-loader-param-key="category">Tech</a>
+</div>
+
+<!-- Main content area -->
+<div data-loader-canvas-for="articles">
+  <!-- Content loads here -->
+</div>
+
+<!-- Footer -->
+<button data-loader-more-for="articles">Load More</button>
+<input data-loader-filter-for="articles" placeholder="Search...">
+```
+
+### Options
+
+- `page` - `number` - Initial page number (default: 0)
+- `loaderParam` - `object` - Initial parameters
+- `filter` - `string` - Initial filter value
+- `onFetch` - `function` - Called after content is fetched
+- `urlSync` - `object` - URL synchronization configuration:
+  - `templates` - Language-specific URL templates with `:param` placeholders
+  - `updateOnInit` - `boolean` - Update URL on initialization (default: true)
+  - `languageInPath` - `boolean` - Include language in URL path
+  - `hideDefaultLanguage` - `boolean` - Hide default language from URL (default: true)
+  - `defaultLanguage` - `string` - Default language code (default: 'en')
+  - `buildUrl` - `function` - Custom URL building function
+  - `parseUrl` - `function` - Custom URL parsing function
+
+### Attributes
+
+- `data-loader="/api/endpoint"` - Main container with API endpoint
+- `data-loader-id="unique-id"` - Unique identifier for the dataloader
+- `data-loader-canvas` - Container where content will be loaded
+- `data-loader-canvas-for="id"` - Canvas for specific dataloader (split layout)
+- `data-loader-param="value"` - Parameter value to send to API
+- `data-loader-param-key="key"` - Parameter key (default: 'defaultParam')
+- `data-loader-param-multi` - Allow multiple selections for this parameter
+- `data-loader-param-selected` - Marks parameter as selected
+- `data-loader-more` - Load more button
+- `data-loader-more-for="id"` - Load more for specific dataloader (split layout)
+- `data-loader-filter` - Filter input field
+- `data-loader-filter-for="id"` - Filter for specific dataloader (split layout)
+- `data-loader-loading` - Added during loading
+- `data-loader-starved` - Added to load more button when no more content
+
+### API Response Headers
+
+- `jpt-dataloader: starved` - Set this header when there's no more content to load
+
+
 ## Links
 
 #### Options
@@ -752,7 +916,15 @@ const customPopup = new Popup(app, '[data-popup][data-popup-key="custom"]', {
 </div>
 ```
 
-## StickyHeader
+## DoubleHeader
+
+A dual-header module that clones the original header element. The clone stays fixed and
+hides when scrolling down, revealing on scroll up. Uses IntersectionObserver to detect
+when the original header is visible.
+
+> **Note:** This module was previously named `StickyHeader`. It was renamed to `DoubleHeader`
+> to better reflect its dual-header/clone architecture. The new `StickyHeader` module uses
+> CSS `position: sticky` instead.
 
  * header element should not have position: fixed
 
@@ -785,6 +957,23 @@ const customPopup = new Popup(app, '[data-popup][data-popup-key="custom"]', {
       before tweening into view
 
 
+## StickyHeader
+
+A header that uses `position: sticky`. Hides when scrolling down and is revealed on scrolling up.
+Unlike FixedHeader, the sticky header stays in document flow - when hidden via transform,
+its space is still reserved.
+
+> **Note:** This is a new module. If you were using the old `StickyHeader` (which cloned the header),
+> you should now use `DoubleHeader` instead.
+
+ * header element needs `position: sticky; top: 0;`
+ * No padding-top needed on content below (header stays in document flow)
+
+### Options
+
+Same options as FixedHeader - see FixedHeader documentation below.
+
+
 ## FixedHeader
 
  * header element needs position: fixed;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brandocms/jupiter",
-  "version": "4.0.0-beta.1",
+  "version": "5.0.0-beta.1",
   "description": "Frontend helpers.",
   "author": "Univers/Twined",
   "license": "UNLICENSED",
@@ -23,34 +23,36 @@
   "scripts": {
     "test": "playwright test",
     "types": "tsc",
-    "playwright": "playwright test",
+    "playwright": "playwright test --project=chromium  --reporter line",
     "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 ",
+    "playwright:moonwalk": "playwright test e2e/moonwalk.spec.js --project=chromium  --reporter line",
+    "playwright:lazyload": "playwright test e2e/lazyload.spec.js --project=chromium  --reporter line",
+    "playwright:toggler": "playwright test e2e/toggler.spec.js --project=chromium  --reporter line",
+    "playwright:breakpoints": "playwright test e2e/breakpoints.spec.js --project=chromium  --reporter line",
+    "playwright:typography": "playwright test e2e/typography.spec.js --project=chromium  --reporter line",
+    "playwright:popover": "playwright test e2e/popover.spec.js e2e/popover.click.spec.js e2e/popover.follow.spec.js --project=chromium  --reporter line",
+    "playwright:popup": "playwright test e2e/popup.spec.js --project=chromium  --reporter line",
+    "playwright:dataloader": "playwright test e2e/dataloader.spec.js --project=chromium  --reporter line",
+    "playwright:dataloader-url-sync": "playwright test e2e/dataloader-url-sync.spec.js --project=chromium  --reporter line",
+    "playwright:parallax": "playwright test e2e/parallax.spec.js --project=chromium  --reporter line",
     "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.7",
-    "lodash.defaultsdeep": "^4.6.1"
+    "gsap": "^3.13.0",
+    "lodash.defaultsdeep": "^4.6.1",
+    "motion": "^12.23.24",
+    "virtual-scroll": "^2.2.1"
   },
   "devDependencies": {
-    "@playwright/test": "^1.51.1",
-    "@types/node": "^22.13.10",
-    "typescript": "^5.8.2",
-    "vite": "^6.2.2"
+    "@playwright/test": "^1.52.0",
+    "@types/node": "^22.15.16",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

package/src/index.js

@@ -3,9 +3,8 @@
  * @module jupiter
  */
 
-import { CSSPlugin, Draggable, ScrollToPlugin, ScrollTrigger, gsap } from 'gsap/all'
+import { animate, scroll, stagger, motionValue } from 'motion'
 
-import Hammer from '@egjs/hammerjs'
 import _defaultsDeep from 'lodash.defaultsdeep'
 
 import Application from './modules/Application'
@@ -14,6 +13,7 @@ import Cookies from './modules/Cookies'
 import CoverOverlay from './modules/CoverOverlay'
 import Dataloader from './modules/Dataloader'
 import Dom from './modules/Dom'
+import DoubleHeader from './modules/DoubleHeader'
 import Dropdown from './modules/Dropdown'
 import EqualHeightElements from './modules/EqualHeightElements'
 import EqualHeightImages from './modules/EqualHeightImages'
@@ -26,6 +26,7 @@ import HeroVideo from './modules/HeroVideo'
 import Lazyload from './modules/Lazyload'
 import Lightbox from './modules/Lightbox'
 import Links from './modules/Links'
+import Looper from './modules/Looper'
 import Marquee from './modules/Marquee'
 import MobileMenu from './modules/MobileMenu'
 import Moonwalk from './modules/Moonwalk'
@@ -50,7 +51,7 @@ export {
   CoverOverlay,
   Dataloader,
   Dom,
-  Draggable,
+  DoubleHeader,
   Dropdown,
   EqualHeightElements,
   EqualHeightImages,
@@ -63,6 +64,7 @@ export {
   Lazyload,
   Lightbox,
   Links,
+  Looper,
   Marquee,
   MobileMenu,
   Moonwalk,
@@ -82,11 +84,9 @@ export {
   rafCallback,
   _defaultsDeep,
 
-  // Export some of the libs we use,
-  // that can also be used in the main frontend.
-  gsap,
-  CSSPlugin,
-  ScrollToPlugin,
-  ScrollTrigger,
-  Hammer
+  // Export Motion functions for animation
+  animate,
+  scroll,
+  stagger,
+  motionValue,
 }