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

package/src/modules/CoverOverlay/index.js

@@ -1,4 +1,4 @@
-import { gsap } from 'gsap/all'
+import { animate } from 'motion'
 import _defaultsDeep from 'lodash.defaultsdeep'
 
 const DEFAULT_OPTIONS = {}
@@ -35,18 +35,25 @@ export default class CoverOverlay {
       }
 
       btn.addEventListener('click', () => {
-        const timeline = gsap.timeline()
-
-        timeline
-          .set(iframe, { opacity: 1 })
-          .to(btn, { duration: 0.5, opacity: 0, ease: 'sine.in' })
-          .to(overlay, { duration: 1, opacity: 0, ease: 'sine.in' })
-          .set(overlay, { display: 'none' })
-          .call(() => {
-            if (player) {
-              player.play()
-            }
-          })
+        const timeline = [
+          [btn, { opacity: 0 }, { duration: 0.5, ease: 'easeIn', at: 0 }],
+          [overlay, { opacity: 0 }, { duration: 1, ease: 'easeIn', at: 0 }],
+          [iframe, { opacity: 1 }, { duration: 0.5, ease: 'easeOut', at: 0.5 }],
+          [overlay, { display: 'none' }, { duration: 0, at: 1 }]
+        ]
+
+        animate(timeline).finished.then(() => {
+          if (player) {
+            // Vimeo player
+            player.play()
+          } else if (iframe && iframe.src.includes('youtube.com')) {
+            // YouTube postMessage API
+            iframe.contentWindow.postMessage(
+              '{"event":"command","func":"playVideo","args":""}',
+              '*'
+            )
+          }
+        })
       })
     })
   }

package/src/modules/Dataloader/index.js

@@ -1,5 +1,6 @@
 import Dom from '../Dom'
 import _defaultsDeep from 'lodash.defaultsdeep'
+import DataloaderUrlSync from './url-sync'
 
 /**
  * Load data by ajax
@@ -33,21 +34,30 @@ import _defaultsDeep from 'lodash.defaultsdeep'
  *
  * You can also set a target for the canvas if the category selector and canvas are in different modules:
  *
+ * Option 1 (legacy): Using data-loader-canvas-target
  * <div data-loader="/api/posts" data-loader-id="news" data-loader-canvas-target="#news-canvas">
+ * <div data-loader-canvas id="news-canvas">
  *
- * <div data-loader-canvas id="#news-canvas">
+ * Option 2 (recommended): Using data-loader-canvas-for
+ * <div data-loader="/api/posts" data-loader-id="news">
+ * <div data-loader-canvas data-loader-canvas-for="news">
+ *
+ * And if the "more" button is outside the loader element, use data-loader-more-for:
+ * <button data-loader-more-for="news">Load more</button>
  */
 
 const DEFAULT_OPTIONS = {
   page: 0,
   loaderParam: {},
   filter: '',
-  onFetch: (dataloader) => {
+  urlSync: null,
+  onFetch: dataloader => {
     /**
      * Called after fetch complete. Do your DOM manipulation here
      *
      * Example:
      *
+     *
      *    const mw = new Moonwalk(dataloader.app, configureMoonwalk(dataloader.app), dataloader.$canvasEl)
      *    new Lazyload(dataloader.app, { useNativeLazyloadIfAvailable: false }, dataloader.$canvasEl)
      *    new EqualHeightImages(dataloader.app, {}, dataloader.$canvasEl)
@@ -61,22 +71,33 @@ export default class Dataloader {
     this.status = 'available'
     this.app = app
     this.$el = $el
+    this.id = $el.dataset.loaderId
+
     if ($el.hasAttribute('data-loader-canvas-target')) {
       this.$canvasEl = Dom.find($el.getAttribute('data-loader-canvas-target'))
     } else {
       this.$canvasEl = Dom.find($el, '[data-loader-canvas]')
     }
+
+    // Support new pattern: data-loader-canvas-for
+    if (!this.$canvasEl && this.id) {
+      this.$canvasEl = Dom.find(`[data-loader-canvas-for="${this.id}"]`)
+    }
+
+    if (!this.$canvasEl) {
+      throw new Error('No canvas element found.')
+    }
     this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
     this.initialize()
   }
 
   static replaceInnerHTML(el, url) {
-    return new Promise((resolve) => {
+    return new Promise(resolve => {
       fetch(url)
-        .then((res) => {
+        .then(res => {
           return res.text()
         })
-        .then((html) => {
+        .then(html => {
           el.innerHTML = html
           return resolve(el)
         })
@@ -97,32 +118,55 @@ export default class Dataloader {
     this.baseURL = url
   }
 
+  setInitialParams() {
+    // Set initial parameters from pre-selected elements
+    this.$paramEls.forEach($paramEl => {
+      if ($paramEl.hasAttribute('data-loader-param-selected')) {
+        const key = $paramEl.dataset.loaderParamKey || 'defaultParam'
+        this.opts.loaderParam[key] = $paramEl.dataset.loaderParam
+      }
+    })
+    
+    // Update URL with initial params if URL sync is enabled
+    if (this.urlSync && this.opts.urlSync[this.id].updateOnInit !== false) {
+      this.urlSync.updateUrl(this.opts.loaderParam)
+    }
+  }
+
   initialize() {
     this.baseURL = this.$el.dataset.loader
     this.$paramEls = Dom.all(this.$el, '[data-loader-param]')
+    
+    // Initialize URL sync if config exists for this dataloader ID
+    if (this.opts.urlSync?.[this.id]) {
+      this.urlSync = new DataloaderUrlSync(this, this.opts.urlSync[this.id])
+    }
+    
+    // Set initial parameters from pre-selected elements
+    this.setInitialParams()
 
-    this.$paramEls.forEach(($paramEl) => {
+    this.$paramEls.forEach($paramEl => {
       $paramEl.addEventListener('click', this.onParam.bind(this))
     })
 
     this.$moreBtn = Dom.find(this.$el, '[data-loader-more]')
 
+    if (!this.$moreBtn && this.id) {
+      this.$moreBtn = Dom.find(`[data-loader-more-for="${this.id}"]`)
+    }
+
     if (this.$moreBtn) {
       this.$moreBtn.addEventListener('click', this.onMore.bind(this))
     }
 
     this.$filterInput = Dom.find(this.$el, '[data-loader-filter]')
 
-    if (!this.$filterInput && this.$el.dataset.loaderId) {
-      this.id = this.$el.dataset.loaderId
+    if (!this.$filterInput && this.id) {
       this.$filterInput = Dom.find(`[data-loader-filter-for="${this.id}"]`)
     }
 
     if (this.$filterInput) {
-      this.$filterInput.addEventListener(
-        'input',
-        this.debounce(this.onFilterInput.bind(this))
-      )
+      this.$filterInput.addEventListener('input', this.debounce(this.onFilterInput.bind(this)))
     }
   }
 
@@ -159,11 +203,9 @@ export default class Dataloader {
         // if already selected, clear it
         const key = e.currentTarget.dataset.loaderParamKey || 'defaultParam'
         if (multiVals) {
-          this.opts.loaderParam[key] = this.opts.loaderParam[key].filter(
-            (val) => {
-              return val !== e.currentTarget.dataset.loaderParam
-            }
-          )
+          this.opts.loaderParam[key] = this.opts.loaderParam[key].filter(val => {
+            return val !== e.currentTarget.dataset.loaderParam
+          })
         } else {
           delete this.opts.loaderParam[key]
         }
@@ -178,7 +220,7 @@ export default class Dataloader {
           e.currentTarget.setAttribute('data-loader-param-selected', '')
         } else {
           const paramKey = e.currentTarget.dataset.loaderParamKey
-          this.$paramEls.forEach(($paramEl) => {
+          this.$paramEls.forEach($paramEl => {
             if (paramKey) {
               if ($paramEl.dataset.loaderParamKey === paramKey) {
                 $paramEl.removeAttribute('data-loader-param-selected')
@@ -194,23 +236,28 @@ export default class Dataloader {
       }
     }
 
+    // Update URL if sync is enabled
+    if (this.urlSync) {
+      this.urlSync.updateUrl(this.opts.loaderParam)
+    }
+
     this.fetch()
   }
 
   fetch(addEntries = false) {
     const { defaultParam, ...otherParams } = this.opts.loaderParam
     const filter = this.opts.filter
-
-    fetch(
-      `${this.baseURL}/${defaultParam ? defaultParam + '/' : ''}${this.opts.page}?` +
+    
+    const fetchUrl = `${this.baseURL}/${defaultParam ? defaultParam + '/' : ''}${this.opts.page}?` +
         new URLSearchParams({ filter, ...otherParams })
-    )
-      .then((res) => {
+
+    fetch(fetchUrl)
+      .then(res => {
         this.status = res.headers.get('jpt-dataloader') || 'available'
         this.updateButton()
         return res.text()
       })
-      .then((html) => {
+      .then(html => {
         if (addEntries) {
           this.$canvasEl.innerHTML += html
         } else {

package/src/modules/Dataloader/url-sync.js

@@ -0,0 +1,238 @@
+/**
+ * URL synchronization module for Dataloader
+ * Handles bidirectional sync between dataloader parameters and browser URL
+ */
+export default class DataloaderUrlSync {
+  constructor(dataloader, config) {
+    this.dataloader = dataloader
+    this.config = config
+    this.language = document.documentElement.lang || 'en'
+    
+    // Language handling options
+    this.languageInPath = config.languageInPath || false
+    this.hideDefaultLanguage = config.hideDefaultLanguage !== false // default true
+    this.defaultLanguage = config.defaultLanguage || 'en'
+    
+    // Configure values that should be omitted from URLs (like "all" filters)
+    this.omitFromUrl = config.omitFromUrl || {
+      en: ['all'],
+      no: ['alle'],
+      // Add more languages as needed
+    }
+    
+    this.initialize()
+  }
+  
+  initialize() {
+    // Set initial state from URL
+    this.syncFromUrl()
+    
+    // Listen for browser navigation
+    this.popstateHandler = () => {
+      this.syncFromUrl()
+      this.dataloader.fetch()
+    }
+    window.addEventListener('popstate', this.popstateHandler)
+  }
+  
+  /**
+   * Build URL from parameters using template
+   */
+  buildUrl(params) {
+    // Use custom buildUrl function if provided
+    if (typeof this.config.buildUrl === 'function') {
+      return this.config.buildUrl(params, this.language, window.location.pathname)
+    }
+    
+    const template = this.config.templates[this.language] || 
+                    this.config.templates[this.defaultLanguage] || 
+                    Object.values(this.config.templates)[0] // Fallback to first template
+    
+    if (!template) {
+      console.error('No URL template found for dataloader:', this.dataloader.id)
+      return window.location.pathname
+    }
+    
+    // Replace tokens in template
+    let url = template
+    Object.entries(params).forEach(([key, value]) => {
+      // Check if this value should be omitted from URL for the current language
+      const omitValues = this.omitFromUrl[this.language] || this.omitFromUrl[this.defaultLanguage] || []
+      const shouldOmit = !value || omitValues.includes(value)
+      
+      url = url.replace(`:${key}`, shouldOmit ? '' : value)
+    })
+    
+    // Clean up any remaining tokens and trailing slashes
+    url = url.replace(/\/:[^\/]+/g, '')
+    url = url.replace(/\/+$/, '') // Remove trailing slashes
+    
+    // Ensure we don't end up with empty path
+    if (!url || url === '') {
+      url = template.split(':')[0].replace(/\/+$/, '') || '/'
+    }
+    
+    // Add language prefix if configured
+    if (this.languageInPath) {
+      const shouldAddLang = this.language !== this.defaultLanguage || !this.hideDefaultLanguage
+      if (shouldAddLang && !url.startsWith(`/${this.language}/`)) {
+        url = `/${this.language}${url}`
+      }
+    }
+    
+    return url
+  }
+  
+  /**
+   * Parse current URL and extract parameters based on template
+   */
+  parseUrl() {
+    // Use custom parseUrl function if provided
+    if (typeof this.config.parseUrl === 'function') {
+      return this.config.parseUrl(window.location.pathname, this.language)
+    }
+    
+    const template = this.config.templates[this.language] || 
+                    this.config.templates[this.defaultLanguage] || 
+                    Object.values(this.config.templates)[0]
+    
+    if (!template) {
+      return {}
+    }
+    
+    let path = window.location.pathname
+    
+    // Strip language prefix if configured
+    if (this.languageInPath) {
+      const langPrefix = `/${this.language}/`
+      if (path.startsWith(langPrefix)) {
+        path = path.substring(langPrefix.length - 1)
+      } else if (this.hideDefaultLanguage && path.startsWith('/')) {
+        // Path might not have language prefix if it's the default language
+        // Continue with the path as-is
+      }
+    }
+    
+    // Convert template to regex pattern
+    // First escape special regex characters (except for our tokens)
+    let pattern = template.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+    
+    // Extract parameter names from template
+    const paramNames = []
+    pattern = pattern.replace(/:(\w+)/g, (match, paramName) => {
+      paramNames.push(paramName)
+      return '([^/]+)'
+    })
+    
+    // Make trailing parameters optional by replacing them with optional groups
+    const templateParts = template.split('/')
+    const pathParts = path.split('/')
+    
+    // If path is shorter than template, try matching partial patterns
+    if (pathParts.length <= templateParts.length) {
+      const partialTemplate = templateParts.slice(0, pathParts.length).join('/')
+      let partialPattern = partialTemplate.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+      const partialParamNames = []
+      partialPattern = partialPattern.replace(/:(\w+)/g, (match, paramName) => {
+        partialParamNames.push(paramName)
+        return '([^/]+)'
+      })
+      
+      const partialRegex = new RegExp(`^${partialPattern}$`)
+      const partialMatch = path.match(partialRegex)
+      
+      if (partialMatch) {
+        // Build params object from partial matches
+        const params = {}
+        partialParamNames.forEach((name, index) => {
+          if (partialMatch[index + 1]) {
+            params[name] = decodeURIComponent(partialMatch[index + 1])
+          }
+        })
+        return params
+      }
+    }
+    
+    // Try full pattern match
+    const regex = new RegExp(`^${pattern}$`)
+    const match = path.match(regex)
+    
+    if (!match) {
+      return {}
+    }
+    
+    // Build params object from matches
+    const params = {}
+    paramNames.forEach((name, index) => {
+      if (match[index + 1]) {
+        params[name] = decodeURIComponent(match[index + 1])
+      }
+    })
+    
+    return params
+  }
+  
+  /**
+   * Update browser URL with current parameters
+   */
+  updateUrl(params) {
+    const url = this.buildUrl(params)
+    
+    // Only update if URL actually changed
+    if (url !== window.location.pathname) {
+      history.pushState(
+        { dataloaderId: this.dataloader.id, params }, 
+        '', 
+        url
+      )
+    }
+  }
+  
+  /**
+   * Sync dataloader parameters from current URL
+   */
+  syncFromUrl() {
+    const params = this.parseUrl()
+    
+    // Clear all current selections first
+    this.dataloader.$paramEls.forEach($el => {
+      $el.removeAttribute('data-loader-param-selected')
+    })
+    
+    // Clear internal state
+    this.dataloader.opts.loaderParam = {}
+    
+    // Update dataloader parameters from URL
+    Object.entries(params).forEach(([key, value]) => {
+      // Find the corresponding data-loader-param element
+      const $paramEl = this.dataloader.$paramEls.find($el => {
+        const paramKey = $el.dataset.loaderParamKey || 'defaultParam'
+        return paramKey === key && $el.dataset.loaderParam === value
+      })
+      
+      
+      if ($paramEl) {
+        // Mark as selected
+        $paramEl.setAttribute('data-loader-param-selected', '')
+      }
+      
+      // Always update internal state, even if no UI element found
+      // This ensures the API gets the parameter for filtering
+      if (key === 'defaultParam') {
+        this.dataloader.opts.loaderParam.defaultParam = value
+      } else {
+        this.dataloader.opts.loaderParam[key] = value
+      }
+    })
+    
+  }
+  
+  /**
+   * Clean up event listeners
+   */
+  destroy() {
+    if (this.popstateHandler) {
+      window.removeEventListener('popstate', this.popstateHandler)
+    }
+  }
+}

package/src/modules/Dom/index.js

@@ -163,6 +163,24 @@ class DOM {
 
     return vertInView && horInView
   }
+
+  /**
+   * Strict viewport check - element must be fully contained within viewport bounds
+   * Useful for popovers/tooltips that need to be completely visible
+   *
+   * @param {*} el
+   */
+  inViewportStrict(el) {
+    const rect = el.getBoundingClientRect()
+    const windowHeight = window.innerHeight || document.documentElement.clientHeight
+    const windowWidth = window.innerWidth || document.documentElement.clientWidth
+
+    // Element must be fully within viewport bounds
+    const vertInView = rect.top >= 0 && rect.bottom <= windowHeight
+    const horInView = rect.left >= 0 && rect.right <= windowWidth
+
+    return vertInView && horInView
+  }
 }
 
 export default new DOM()