@brandocms/jupiter 3.46.4 → 3.48.0

package/src/modules/Breakpoints/index.js

@@ -3,12 +3,7 @@ import * as Events from '../../events'
 
 const DEFAULT_OPTIONS = {
   runListenerOnInit: false,
-  breakpoints: [
-    'xs',
-    'sm',
-    'md',
-    'lg'
-  ],
+  breakpoints: ['xs', 'sm', 'md', 'lg'],
 
   listeners: {
     // xs: (mq) => {
@@ -22,15 +17,17 @@ const DEFAULT_OPTIONS = {
 }
 
 export default class Breakpoints {
-  constructor (app, opts = {}) {
+  constructor(app, opts = {}) {
     this.app = app
     this.mediaQueries = {}
     this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
     window.addEventListener(Events.APPLICATION_PRELUDIUM, this.initialize.bind(this))
   }
 
-  initialize () {
-    this.opts.breakpoints.forEach(size => { this.mediaQueries[size] = this._getVal(`--breakpoint-${size}`) })
+  initialize() {
+    this.opts.breakpoints.forEach(size => {
+      this.mediaQueries[size] = this._getVal(`--breakpoint-${size}`)
+    })
 
     const keys = Object.keys(this.mediaQueries)
     keys.forEach(key => {
@@ -42,7 +39,9 @@ export default class Breakpoints {
         // max size
         query = `(min-width: ${this.mediaQueries[key]})`
       } else {
-        query = `(min-width: ${this.mediaQueries[key]}) and (max-width: ${parseInt(this.mediaQueries[next]) - 1}px)`
+        query = `(min-width: ${this.mediaQueries[key]}) and (max-width: ${
+          parseInt(this.mediaQueries[next]) - 1
+        }px)`
       }
 
       this.mediaQueries[key] = window.matchMedia(query)
@@ -63,15 +62,13 @@ export default class Breakpoints {
     this.setCurrentBreakpoint()
   }
 
-  getCurrentBreakpoint () {
-    const key = Object
-      .keys(this.mediaQueries)
-      .find(q => this.mediaQueries[q].matches)
+  getCurrentBreakpoint() {
+    const key = Object.keys(this.mediaQueries).find(q => this.mediaQueries[q].matches)
 
     return { key, mq: this.mediaQueries[key] }
   }
 
-  defaultListener (e) {
+  defaultListener(e) {
     if (e.matches) {
       this.setCurrentBreakpoint()
     }
@@ -79,12 +76,12 @@ export default class Breakpoints {
     window.dispatchEvent(evt)
   }
 
-  setCurrentBreakpoint () {
+  setCurrentBreakpoint() {
     const { key } = this.getCurrentBreakpoint()
     this.app.breakpoint = key
   }
 
-  _getVal (key) {
+  _getVal(key) {
     return getComputedStyle(document.documentElement).getPropertyValue(key).trim()
   }
 }

package/src/modules/Cookies/index.js

@@ -24,38 +24,52 @@ const DEFAULT_OPTIONS = {
     const timeline = gsap.timeline()
 
     timeline
-      .fromTo(c.cc, {
-        duration: 0.5,
-        y: '120%',
-        display: 'block'
-      }, {
-        duration: 0.5,
-        y: '0%',
-        delay: '0.5',
-        ease: 'power3.out'
-      }, '0.5')
-      .fromTo(c.text, {
-        duration: 0.7,
-        opacity: 0
-      }, {
-        duration: 0.7,
-        opacity: 1,
-        ease: 'power3.out'
-      }, '-=0.35')
-      .fromTo(c.btns, {
-        duration: 0.7,
-        opacity: 0
-      }, {
-        duration: 0.7,
-        opacity: 1,
-        ease: 'power3.out'
-      },
-      '-=0.35')
+      .fromTo(
+        c.cc,
+        {
+          duration: 0.5,
+          y: '120%',
+          display: 'block'
+        },
+        {
+          duration: 0.5,
+          y: '0%',
+          delay: '0.5',
+          ease: 'power3.out'
+        },
+        '0.5'
+      )
+      .fromTo(
+        c.text,
+        {
+          duration: 0.7,
+          opacity: 0
+        },
+        {
+          duration: 0.7,
+          opacity: 1,
+          ease: 'power3.out'
+        },
+        '-=0.35'
+      )
+      .fromTo(
+        c.btns,
+        {
+          duration: 0.7,
+          opacity: 0
+        },
+        {
+          duration: 0.7,
+          opacity: 1,
+          ease: 'power3.out'
+        },
+        '-=0.35'
+      )
   }
 }
 
 export default class Cookies {
-  constructor (app, opts = {}) {
+  constructor(app, opts = {}) {
     this.app = app
     this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
 
@@ -69,27 +83,44 @@ export default class Cookies {
       return
     }
 
-    window.addEventListener(Events.APPLICATION_REVEALED, () => { this.opts.showCC(this) })
+    this.app.registerCallback(Events.APPLICATION_REVEALED, () => {
+      this.opts.showCC(this)
+    })
 
     this.btn.addEventListener('click', () => {
       this.opts.onAccept(this)
     })
   }
 
-  getCookie (sKey) {
+  getCookie(sKey) {
     if (!sKey) {
       return null
     }
-    return decodeURIComponent(document.cookie.replace(new RegExp(`(?:(?:^|.*;)\\s*${encodeURIComponent(sKey).replace(/[-.+*]/g, '\\$&')}\\s*\\=\\s*([^;]*).*$)|^.*$`), '$1')) || null
+    return (
+      decodeURIComponent(
+        document.cookie.replace(
+          new RegExp(
+            `(?:(?:^|.*;)\\s*${encodeURIComponent(sKey).replace(
+              /[-.+*]/g,
+              '\\$&'
+            )}\\s*\\=\\s*([^;]*).*$)|^.*$`
+          ),
+          '$1'
+        )
+      ) || null
+    )
   }
 
-  setCookie (sKey, sValue, vEnd, sPath, sDomain, bSecure) {
-    if (!sKey || /^(?:expires|max-age|path|domain|secure)$/i.test(sKey)) { return false }
+  setCookie(sKey, sValue, vEnd, sPath, sDomain, bSecure) {
+    if (!sKey || /^(?:expires|max-age|path|domain|secure)$/i.test(sKey)) {
+      return false
+    }
     let sExpires = ''
     if (vEnd) {
       switch (vEnd.constructor) {
         case Number:
-          sExpires = vEnd === Infinity ? '; expires=Fri, 31 Dec 9999 23:59:59 GMT' : `; max-age=${vEnd}`
+          sExpires =
+            vEnd === Infinity ? '; expires=Fri, 31 Dec 9999 23:59:59 GMT' : `; max-age=${vEnd}`
           break
         case String:
           sExpires = `; expires=${vEnd}`
@@ -101,23 +132,35 @@ export default class Cookies {
           break
       }
     }
-    document.cookie = `${encodeURIComponent(sKey)}=${encodeURIComponent(sValue)}${sExpires}${sDomain ? `; domain=${sDomain}` : ''}${sPath ? `; path=${sPath}` : ''}${bSecure ? '; secure' : ''}`
+    document.cookie = `${encodeURIComponent(sKey)}=${encodeURIComponent(sValue)}${sExpires}${
+      sDomain ? `; domain=${sDomain}` : ''
+    }${sPath ? `; path=${sPath}` : ''}${bSecure ? '; secure' : ''}`
     return true
   }
 
-  removeCookie (sKey, sPath, sDomain) {
-    if (!this.hasCookie(sKey)) { return false }
-    document.cookie = `${encodeURIComponent(sKey)}=; expires=Thu, 01 Jan 1970 00:00:00 GMT${sDomain ? `; domain=${sDomain}` : ''}${sPath ? `; path=${sPath}` : ''}`
+  removeCookie(sKey, sPath, sDomain) {
+    if (!this.hasCookie(sKey)) {
+      return false
+    }
+    document.cookie = `${encodeURIComponent(sKey)}=; expires=Thu, 01 Jan 1970 00:00:00 GMT${
+      sDomain ? `; domain=${sDomain}` : ''
+    }${sPath ? `; path=${sPath}` : ''}`
     return true
   }
 
-  hasCookie (sKey) {
-    if (!sKey || /^(?:expires|max-age|path|domain|secure)$/i.test(sKey)) { return false }
-    return (new RegExp(`(?:^|;\\s*)${encodeURIComponent(sKey).replace(/[-.+*]/g, '\\$&')}\\s*\\=`)).test(document.cookie)
+  hasCookie(sKey) {
+    if (!sKey || /^(?:expires|max-age|path|domain|secure)$/i.test(sKey)) {
+      return false
+    }
+    return new RegExp(
+      `(?:^|;\\s*)${encodeURIComponent(sKey).replace(/[-.+*]/g, '\\$&')}\\s*\\=`
+    ).test(document.cookie)
   }
 
-  keys () {
-    const aKeys = document.cookie.replace(/((?:^|\s*;)[^=]+)(?=;|$)|^\s*|\s*(?:=[^;]*)?(?:\1|$)/g, '').split(/\s*(?:=[^;]*)?;\s*/)
+  keys() {
+    const aKeys = document.cookie
+      .replace(/((?:^|\s*;)[^=]+)(?=;|$)|^\s*|\s*(?:=[^;]*)?(?:\1|$)/g, '')
+      .split(/\s*(?:=[^;]*)?;\s*/)
     for (let nLen = aKeys.length, nIdx = 0; nIdx < nLen; nIdx += 1) {
       aKeys[nIdx] = decodeURIComponent(aKeys[nIdx])
     }

package/src/modules/CoverOverlay/index.js

@@ -4,13 +4,13 @@ import _defaultsDeep from 'lodash.defaultsdeep'
 const DEFAULT_OPTIONS = {}
 
 export default class CoverOverlay {
-  constructor (app, opts = {}) {
+  constructor(app, opts = {}) {
     this.app = app
     this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
     this.initialize()
   }
 
-  initialize () {
+  initialize() {
     const coveredModules = document.querySelectorAll('[data-cover-overlay]')
 
     Array.from(coveredModules).forEach(v => {
@@ -20,7 +20,10 @@ export default class CoverOverlay {
       const iframe = v.querySelector('iframe')
 
       if (iframe) {
-        iframe.setAttribute('allow', 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture')
+        iframe.setAttribute(
+          'allow',
+          'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'
+        )
       }
 
       if (v.hasAttribute('data-cover-overlay-vimeo-play')) {

package/src/modules/Dataloader/index.js

@@ -1,8 +1,174 @@
+import Dom from '../Dom'
+import _defaultsDeep from 'lodash.defaultsdeep'
+
 /**
- * <article 
- *  data-loader>
- *  <div data-loader-canvas>
- * 
- * </div>
- * 
- */
+ * Load data by ajax
+ *
+ * Example DOM:
+ *
+ *  <div class="filter">
+ *    <input type="text" data-loader-filter-for="news" placeholder="Search">
+ *  </div>
+ *
+ *  <div data-loader="/api/posts" data-loader-id="news">
+ *    <ul>
+ *      <li>
+ *        <a class="noanim" href="{{ category.url }}" data-loader-param="all" data-loader-param-selected>All</a>
+ *      </li>
+ *    </ul>
+ *    <div class="posts-grid" data-moonwalk-section data-loader-canvas>
+ *      <!-- render posts here -->
+ *    </div>
+ *    <div class="load-more" data-moonwalk-section>
+ *      <button type="button" data-loader-more data-moonwalk="u">
+ *        Load more posts <span class="arrow-d">&darr;</span>
+ *      </button>
+ *    </div>
+ *  </div>
+ *
+ */
+
+const DEFAULT_OPTIONS = {
+  page: 0,
+  loaderParam: 'all',
+  filter: '',
+  onFetch: dataloader => {
+    /**
+     * Called after fetch complete. Do your DOM manipulation here
+     *
+     * Example:
+     *
+     *    const mw = new Moonwalk(dataloader.app, configureMoonwalk(dataloader.app), dataloader.$el)
+     *    new Lazyload(dataloader.app, { useNativeLazyloadIfAvailable: false }, dataloader.$el)
+     *    new EqualHeightImages(dataloader.app, {}, dataloader.$el)
+     *    mw.ready()
+     */
+  }
+}
+
+export default class Dataloader {
+  constructor(app, $el, opts = {}) {
+    this.status = 'available'
+    this.app = app
+    this.$el = $el
+    this.$canvasEl = Dom.find($el, '[data-loader-canvas]')
+    this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
+    this.initialize()
+  }
+
+  debounce(func, delay = 650) {
+    let timerId
+    return (...args) => {
+      clearTimeout(timerId)
+      timerId = setTimeout(() => {
+        func.apply(this, args)
+      }, delay)
+    }
+  }
+
+  initialize() {
+    this.baseURL = this.$el.dataset.loader
+    this.$paramEls = Dom.all(this.$el, '[data-loader-param]')
+
+    this.$paramEls.forEach($paramEl => {
+      $paramEl.addEventListener('click', this.onParam.bind(this))
+    })
+
+    this.$moreBtn = Dom.find(this.$el, '[data-loader-more]')
+
+    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
+      this.$filterInput = Dom.find(`[data-loader-filter-for="${this.id}"]`)
+    }
+
+    if (this.$filterInput) {
+      this.$filterInput.addEventListener('input', this.debounce(this.onFilterInput.bind(this)))
+    }
+  }
+
+  onFilterInput(e) {
+    e.preventDefault()
+    this.loading()
+    this.opts.page = 0
+    this.opts.filter = this.$filterInput.value
+    this.fetch(false)
+  }
+
+  onMore(e) {
+    e.preventDefault()
+    this.loading()
+    this.opts.page += 1
+    this.fetch(true)
+  }
+
+  onParam(e) {
+    e.preventDefault()
+    this.loading()
+    // reset page when switching param!
+    this.opts.page = 0
+    this.$paramEls.forEach($paramEl => $paramEl.removeAttribute('data-loader-param-selected'))
+    e.currentTarget.setAttribute('data-loader-param-selected', '')
+    this.opts.loaderParam = e.currentTarget.dataset.loaderParam
+    this.fetch()
+  }
+
+  fetch(addEntries = false) {
+    const param = this.opts.loaderParam
+    const filter = this.opts.filter
+
+    fetch(`${this.baseURL}/${param}/${this.opts.page}?` + new URLSearchParams({ filter }))
+      .then(res => {
+        this.status = res.headers.get('jpt-dataloader') || 'available'
+        this.updateButton()
+        return res.text()
+      })
+      .then(html => {
+        if (addEntries) {
+          this.$canvasEl.innerHTML += html
+        } else {
+          this.$canvasEl.innerHTML = html
+        }
+        this.opts.onFetch(this)
+        this.complete()
+      })
+  }
+
+  /**
+   * Set [data-loader-loading] on main el
+   */
+  loading() {
+    document.documentElement.setAttribute('data-loading', '')
+    this.$el.setAttribute('data-loader-loading', '')
+  }
+
+  /**
+   * Remove [data-loader-loading] on main el
+   */
+  complete() {
+    this.$el.removeAttribute('data-loader-loading')
+    document.documentElement.removeAttribute('data-loading')
+  }
+
+  /**
+   * Update the MORE button
+   *
+   * Sets [data-loader-starved] attribute if there is no more to fetch
+   */
+  updateButton() {
+    if (!this.$moreBtn) {
+      return
+    }
+
+    if (this.status === 'starved') {
+      this.$moreBtn.setAttribute('data-loader-starved', '')
+    } else {
+      this.$moreBtn.removeAttribute('data-loader-starved')
+    }
+  }
+}

package/src/modules/Dom/index.js

@@ -1,15 +1,15 @@
 class DOM {
-  constructor () {
+  constructor() {
     this.body = document.body
     this.html = document.documentElement
   }
 
-  new (arg) {
+  new(arg) {
     const doc = new DOMParser().parseFromString(arg.trim(), 'text/html')
     return Array.from(doc.body.childNodes)
   }
 
-  find (arg1, arg2) {
+  find(arg1, arg2) {
     if (typeof arg1 === 'string' && typeof arg2 === 'object') {
       throw new Error('Dom.find: Wrong syntax, use -> Dom.find(node, selector)')
     }
@@ -25,7 +25,7 @@ class DOM {
     return null
   }
 
-  all (arg1, arg2) {
+  all(arg1, arg2) {
     if (typeof arg1 === 'string') {
       return Array.from(document.querySelectorAll(arg1))
     }
@@ -37,47 +37,47 @@ class DOM {
     return []
   }
 
-  create (element, ...classes) {
+  create(element, ...classes) {
     const el = document.createElement(element)
     this.addClass(el, ...classes)
     return el
   }
 
-  append (element) {
+  append(element) {
     document.body.appendChild(element)
   }
 
-  remove (element) {
+  remove(element) {
     element.remove()
   }
 
-  addClass (element, ...classes) {
+  addClass(element, ...classes) {
     classes.forEach(className => {
       element.classList.add(className)
     })
     return element
   }
 
-  removeClass (element, ...classes) {
+  removeClass(element, ...classes) {
     classes.forEach(className => {
       element.classList.remove(className)
     })
     return element
   }
 
-  hasClass (element, className) {
+  hasClass(element, className) {
     return element.classList.contains(className)
   }
 
-  toggleClass (element, ...classes) {
+  toggleClass(element, ...classes) {
     return classes.map(className => element.classList.toggle(className))
   }
 
-  hasAttribute (element, attributeName) {
+  hasAttribute(element, attributeName) {
     return element.hasAttribute(attributeName)
   }
 
-  overlapsVertically ($div1, $div2) {
+  overlapsVertically($div1, $div2) {
     // Div 1 data
     const d1Offset = $div1.getBoundingClientRect()
     const d1Height = this.outerHeight($div1)
@@ -99,7 +99,7 @@ class DOM {
     return 0
   }
 
-  outerHeight (el) {
+  outerHeight(el) {
     let height = el.offsetHeight
     const style = getComputedStyle(el)
 
@@ -107,7 +107,7 @@ class DOM {
     return height
   }
 
-  outerWidth (el) {
+  outerWidth(el) {
     let width = el.offsetWidth
     const style = getComputedStyle(el)
 
@@ -115,23 +115,23 @@ class DOM {
     return width
   }
 
-  getCSSVar (key) {
+  getCSSVar(key) {
     return getComputedStyle(document.documentElement).getPropertyValue(key).trim()
   }
 
-  setCSSVar (key, val) {
+  setCSSVar(key, val) {
     document.documentElement.style.setProperty(`--${key}`, val)
   }
 
-  offset (el) {
-    const rect = el.getBoundingClientRect();
+  offset(el) {
+    const rect = el.getBoundingClientRect()
     return {
       top: rect.top + window.pageYOffset,
       left: rect.left + window.pageXOffset
     }
   }
 
-  position (el) {
+  position(el) {
     return {
       top: el.offsetTop,
       left: el.offsetLeft
@@ -143,15 +143,15 @@ class DOM {
    *
    * @param {*} el
    */
-  inViewport (el) {
+  inViewport(el) {
     const rect = el.getBoundingClientRect()
-    const windowHeight = (window.innerHeight || document.documentElement.clientHeight)
-    const windowWidth = (window.innerWidth || document.documentElement.clientWidth)
+    const windowHeight = window.innerHeight || document.documentElement.clientHeight
+    const windowWidth = window.innerWidth || document.documentElement.clientWidth
 
-    const vertInView = (rect.top <= windowHeight) && ((rect.top + rect.height) >= 0)
-    const horInView = (rect.left <= windowWidth) && ((rect.left + rect.width) >= 0)
+    const vertInView = rect.top <= windowHeight && rect.top + rect.height >= 0
+    const horInView = rect.left <= windowWidth && rect.left + rect.width >= 0
 
-    return (vertInView && horInView)
+    return vertInView && horInView
   }
 }
 

package/src/modules/Dropdown/index.js

@@ -29,7 +29,7 @@ const DEFAULT_OPTIONS = {
 }
 
 export default class Dropdown {
-  constructor (app, opts = {}) {
+  constructor(app, opts = {}) {
     this.app = app
     this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
     this.elements = {}
@@ -42,24 +42,24 @@ export default class Dropdown {
     this.initialize()
   }
 
-  initialize () {
+  initialize() {
     this.timeline.from(
-      this.elements.menu, {
+      this.elements.menu,
+      {
         duration: 0.3,
         className: `${this.elements.menu.className} zero-height`
-      }, 'open'
+      },
+      'open'
     )
     this.timeline.to(
-      this.elements.menu, {
+      this.elements.menu,
+      {
         height: 'auto'
-      }, 'open'
+      },
+      'open'
     )
 
-    this.timeline.from(
-      this.elements.menuItems,
-      this.opts.tweens.items,
-      'open+=.1'
-    )
+    this.timeline.from(this.elements.menuItems, this.opts.tweens.items, 'open+=.1')
 
     if (!this.elements.trigger) {
       return
@@ -67,7 +67,7 @@ export default class Dropdown {
     this.elements.trigger.addEventListener('click', this.onClick.bind(this))
   }
 
-  onClick (event) {
+  onClick(event) {
     event.preventDefault()
     event.stopPropagation()
 
@@ -80,7 +80,7 @@ export default class Dropdown {
     }
   }
 
-  openMenu () {
+  openMenu() {
     if (!this.opts.multipleActive) {
       if (this.app.currentMenu) {
         this.app.currentMenu.closeMenu()
@@ -96,7 +96,7 @@ export default class Dropdown {
     }
   }
 
-  closeMenu () {
+  closeMenu() {
     this.app.currentMenu = null
     this.open = false