@brandocms/jupiter 3.55.0 → 4.0.0-beta.2

package/src/modules/Breakpoints/index.js

@@ -1,6 +1,14 @@
 import _defaultsDeep from 'lodash.defaultsdeep'
 import * as Events from '../../events'
 
+/**
+ * @typedef {Object} BreakpointsOptions
+ * @property {boolean} [runListenerOnInit=false] - Whether to run listener on initialization
+ * @property {string[]} [breakpoints=['xs', 'sm', 'md', 'lg']] - Breakpoint names
+ * @property {Object.<string, Function>} [listeners={}] - Listener functions for breakpoints
+ */
+
+/** @type {BreakpointsOptions} */
 const DEFAULT_OPTIONS = {
   runListenerOnInit: false,
   breakpoints: ['xs', 'sm', 'md', 'lg'],
@@ -13,14 +21,24 @@ const DEFAULT_OPTIONS = {
     //     // NOT XS ANYMORE
     //   }
     // }
-  }
+  },
 }
 
+/**
+ * Breakpoints module for responsive design
+ */
 export default class Breakpoints {
+  /**
+   * Create a new Breakpoints instance
+   * @param {Object} app - Application instance
+   * @param {BreakpointsOptions} [opts={}] - Breakpoints options
+   */
   constructor(app, opts = {}) {
     this.app = app
     this.mediaQueries = {}
     this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
+    this.currentBreakpoint = null
+    this.initialized = false
     window.addEventListener(Events.APPLICATION_PRELUDIUM, () => {
       this.initialize(false)
     })
@@ -30,63 +48,125 @@ export default class Breakpoints {
   }
 
   initialize(reveal = false) {
-    this.opts.breakpoints.forEach(size => {
-      this.mediaQueries[size] = this._getVal(`--breakpoint-${size}`)
-    })
+    if (!reveal) {
+      this.opts.breakpoints.forEach((size) => {
+        this.mediaQueries[size] = this._getVal(`--breakpoint-${size}`)
+      })
 
-    const keys = Object.keys(this.mediaQueries)
-    keys.forEach(key => {
-      let query = ''
-      const next = keys[(keys.indexOf(key) + 1) % keys.length]
-      if (key === this.opts.breakpoints[0] && this.mediaQueries[key] === '0') {
-        query = `(min-width: 0px) and (max-width: ${parseInt(this.mediaQueries[next]) - 1}px)`
-      } else if (next === this.opts.breakpoints[0]) {
-        // max size
-        query = `(min-width: ${this.mediaQueries[key]})`
-      } else {
-        query = `(min-width: ${this.mediaQueries[key]}) and (max-width: ${
-          parseInt(this.mediaQueries[next]) - 1
-        }px)`
-      }
+      const keys = Object.keys(this.mediaQueries)
+      keys.forEach((key) => {
+        let query = ''
+        const next = keys[(keys.indexOf(key) + 1) % keys.length]
+        if (
+          key === this.opts.breakpoints[0] &&
+          this.mediaQueries[key] === '0'
+        ) {
+          query = `(min-width: 0px) and (max-width: ${parseInt(this.mediaQueries[next]) - 1}px)`
+        } else if (next === this.opts.breakpoints[0]) {
+          // max size
+          query = `(min-width: ${this.mediaQueries[key]})`
+        } else {
+          query = `(min-width: ${this.mediaQueries[key]}) and (max-width: ${
+            parseInt(this.mediaQueries[next]) - 1
+          }px)`
+        }
 
-      this.mediaQueries[key] = window.matchMedia(query)
-      this.mediaQueries[key].addListener(this.defaultListener.bind(this))
+        this.mediaQueries[key] = window.matchMedia(query)
 
-      if (Object.prototype.hasOwnProperty.call(this.opts.listeners, key)) {
-        this.mediaQueries[key].addListener(this.opts.listeners[key])
-      }
-    })
+        // Replace the direct listener with a combined one that handles both core and custom behavior
+        const combinedListener = (e) => {
+          if (e.matches) {
+            // Get the current breakpoint
+            const oldBreakpoint = this.currentBreakpoint
+            this.setCurrentBreakpoint()
 
-    if (reveal && this.opts.runListenerOnInit) {
-      const { key, mq } = this.getCurrentBreakpoint()
-      if (Object.prototype.hasOwnProperty.call(this.opts.listeners, key)) {
-        this.opts.listeners[key](mq)
-      }
+            // Only dispatch event if breakpoint actually changed
+            if (oldBreakpoint !== this.currentBreakpoint) {
+              const evt = new CustomEvent(Events.BREAKPOINT_CHANGE, {
+                detail: {
+                  leaveBreakpoint: oldBreakpoint,
+                  enterBreakpoint: this.currentBreakpoint,
+                },
+              })
+              window.dispatchEvent(evt)
+            }
+          }
+
+          // Run any custom listener if one exists for this breakpoint
+          if (Object.prototype.hasOwnProperty.call(this.opts.listeners, key)) {
+            this.opts.listeners[key](e)
+          }
+        }
+
+        this.mediaQueries[key].addListener(combinedListener)
+      })
     }
 
+    // Set the current breakpoint first
     this.setCurrentBreakpoint()
+
+    // Only fire events and run listeners for initialization if needed
+    if (reveal && this.opts.runListenerOnInit && !this.initialized) {
+      this.initialized = true
+      const result = this.getCurrentBreakpoint()
+
+      if (result && result.key && result.mq) {
+        // Create a fake event object that mimics MediaQueryListEvent
+        const fakeEvent = {
+          matches: result.mq.matches,
+          media: result.mq.media,
+          target: result.mq,
+        }
+
+        // Fire the BREAKPOINT_CHANGE event only once during initialization
+        const evt = new CustomEvent(Events.BREAKPOINT_CHANGE)
+        window.dispatchEvent(evt)
+
+        // Run any custom listener if one exists for this breakpoint
+        if (
+          Object.prototype.hasOwnProperty.call(this.opts.listeners, result.key)
+        ) {
+          this.opts.listeners[result.key](fakeEvent)
+        }
+      }
+    }
   }
 
   getCurrentBreakpoint() {
-    const key = Object.keys(this.mediaQueries).find(q => this.mediaQueries[q].matches)
+    // First check if mediaQueries is populated
+    if (!Object.keys(this.mediaQueries).length) {
+      return null
+    }
 
-    return { key, mq: this.mediaQueries[key] }
+    const key = Object.keys(this.mediaQueries).find((q) => {
+      return this.mediaQueries[q] && this.mediaQueries[q].matches
+    })
+
+    // Only return if we found a matching breakpoint
+    if (key && this.mediaQueries[key]) {
+      return { key, mq: this.mediaQueries[key] }
+    }
+
+    return null
   }
 
   defaultListener(e) {
     if (e.matches) {
       this.setCurrentBreakpoint()
     }
-    const evt = new CustomEvent(Events.BREAKPOINT_CHANGE)
-    window.dispatchEvent(evt)
   }
 
   setCurrentBreakpoint() {
-    const { key } = this.getCurrentBreakpoint()
-    this.app.breakpoint = key
+    const result = this.getCurrentBreakpoint()
+    if (result && result.key) {
+      this.currentBreakpoint = result.key
+      this.app.breakpoint = result.key
+    }
   }
 
   _getVal(key) {
-    return getComputedStyle(document.documentElement).getPropertyValue(key).trim()
+    return getComputedStyle(document.documentElement)
+      .getPropertyValue(key)
+      .trim()
   }
 }

package/src/modules/Cookies/index.js

@@ -1,46 +1,64 @@
-import { gsap } from 'gsap'
+import { animate } from 'motion'
 import _defaultsDeep from 'lodash.defaultsdeep'
 import * as Events from '../../events'
-
+import { set } from '../../utils/motion-helpers'
+
+/**
+ * @typedef {Object} CookiesOptions
+ * @property {Function} [onAccept] - Called when cookies are accepted
+ * @property {Function} [onRefuse] - Called when cookies are refused
+ * @property {Function} [alreadyConsented] - Called if user has already consented to cookies
+ * @property {Function} [alreadyRefused] - Called if user has already refused cookies
+ * @property {Function} [setCookies] - Custom function to set cookies
+ * @property {Function} [showCC] - Custom function to display cookie consent dialog
+ */
+
+/** @type {CookiesOptions} */
 const DEFAULT_OPTIONS = {
-  onAccept: c => {
+  onAccept: (c) => {
     const oneYearFromNow = new Date()
     oneYearFromNow.setFullYear(oneYearFromNow.getFullYear() + 1)
 
-    const timeline = gsap.timeline()
     c.setCookie('COOKIES_CONSENT_STATUS', 1, oneYearFromNow, '/')
     c.opts.setCookies(c)
 
-    timeline
-      .to(c.cc, { duration: 0.35, y: '120%', ease: 'power3.in' }, '0')
-      .to(c.inner, { duration: 0.3, opacity: 0, ease: 'power3.in' }, '0')
-      .set(c.cc, { display: 'none' })
+    const timeline = [
+      [c.cc, { y: '120%' }, { duration: 0.35, ease: 'easeIn', at: 0 }],
+      [c.inner, { opacity: 0 }, { duration: 0.3, ease: 'easeIn', at: 0 }]
+    ]
+
+    animate(timeline).finished.then(() => {
+      c.cc.style.display = 'none'
+    })
   },
 
-  onRefuse: c => {
+  onRefuse: (c) => {
     const oneYearFromNow = new Date()
     oneYearFromNow.setFullYear(oneYearFromNow.getFullYear() + 1)
 
-    const timeline = gsap.timeline()
     c.setCookie('COOKIES_CONSENT_STATUS', 0, oneYearFromNow, '/')
 
-    timeline
-      .to(c.cc, { duration: 0.35, y: '120%', ease: 'power3.in' }, '0')
-      .to(c.inner, { duration: 0.3, opacity: 0, ease: 'power3.in' }, '0')
-      .set(c.cc, { display: 'none' })
+    const timeline = [
+      [c.cc, { y: '120%' }, { duration: 0.35, ease: 'easeIn', at: 0 }],
+      [c.inner, { opacity: 0 }, { duration: 0.3, ease: 'easeIn', at: 0 }]
+    ]
+
+    animate(timeline).finished.then(() => {
+      c.cc.style.display = 'none'
+    })
   },
 
-  alreadyConsented: c => {
+  alreadyConsented: (c) => {
     // user has already consented to cookies. Can be used to update/load gtm etc.
   },
 
-  alreadyRefused: c => {
+  alreadyRefused: (c) => {
     // user has already refused cookies.
   },
 
-  setCookies: c => {},
+  setCookies: (c) => {},
 
-  showCC: c => {
+  showCC: (c) => {
     if (c.hasCookie('COOKIES_CONSENT_STATUS')) {
       if (c.getCookie('COOKIES_CONSENT_STATUS') === '1') {
         c.opts.alreadyConsented(c)
@@ -50,54 +68,34 @@ const DEFAULT_OPTIONS = {
       return
     }
 
-    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'
-      )
-  }
+    // Set display block and reset state immediately
+    c.cc.style.display = 'block'
+    set(c.cc, { opacity: 1 })
+    set(c.inner, { opacity: 1 })
+
+    // Calculate timeline positions:
+    // - c.cc: starts at 1s, duration 0.5s, ends at 1.5s
+    // - c.text: starts at 1.15s (0.15s after cc starts), duration 0.7s, ends at 1.85s
+    // - c.btns: starts at 1.5s (when cc finishes), duration 0.7s
+    const timeline = [
+      [c.cc, { y: ['120%', '0%'] }, { duration: 0.5, ease: 'easeOut', at: 1 }],
+      [c.text, { opacity: [0, 1] }, { duration: 0.7, ease: 'easeOut', at: 1.15 }],
+      [c.btns, { opacity: [0, 1] }, { duration: 0.7, ease: 'easeOut', at: 1.5 }]
+    ]
+
+    animate(timeline)
+  },
 }
 
+/**
+ * Cookies module for handling cookie consent
+ */
 export default class Cookies {
+  /**
+   * Create a new Cookies instance
+   * @param {Object} app - Application instance
+   * @param {CookiesOptions} [opts={}] - Cookies options
+   */
   constructor(app, opts = {}) {
     this.app = app
     this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
@@ -127,6 +125,11 @@ export default class Cookies {
     }
   }
 
+  /**
+   * Get a cookie value by key
+   * @param {string} sKey - Cookie key
+   * @returns {string|null} Cookie value or null if not found
+   */
   getCookie(sKey) {
     if (!sKey) {
       return null
@@ -146,6 +149,16 @@ export default class Cookies {
     )
   }
 
+  /**
+   * Set a cookie
+   * @param {string} sKey - Cookie key
+   * @param {string|number} sValue - Cookie value
+   * @param {Date|string|number} vEnd - Expiration date, string date, or max age in seconds
+   * @param {string} [sPath] - Cookie path
+   * @param {string} [sDomain] - Cookie domain
+   * @param {boolean} [bSecure] - Secure flag
+   * @returns {boolean} Whether cookie was set successfully
+   */
   setCookie(sKey, sValue, vEnd, sPath, sDomain, bSecure) {
     if (!sKey || /^(?:expires|max-age|path|domain|secure)$/i.test(sKey)) {
       return false
@@ -155,7 +168,9 @@ export default class Cookies {
       switch (vEnd.constructor) {
         case Number:
           sExpires =
-            vEnd === Infinity ? '; expires=Fri, 31 Dec 9999 23:59:59 GMT' : `; max-age=${vEnd}`
+            vEnd === Infinity
+              ? '; expires=Fri, 31 Dec 9999 23:59:59 GMT'
+              : `; max-age=${vEnd}`
           break
         case String:
           sExpires = `; expires=${vEnd}`
@@ -173,6 +188,13 @@ export default class Cookies {
     return true
   }
 
+  /**
+   * Remove a cookie
+   * @param {string} sKey - Cookie key
+   * @param {string} [sPath] - Cookie path
+   * @param {string} [sDomain] - Cookie domain
+   * @returns {boolean} Whether cookie was removed successfully
+   */
   removeCookie(sKey, sPath, sDomain) {
     if (!this.hasCookie(sKey)) {
       return false
@@ -183,6 +205,11 @@ export default class Cookies {
     return true
   }
 
+  /**
+   * Check if a cookie exists
+   * @param {string} sKey - Cookie key
+   * @returns {boolean} Whether cookie exists
+   */
   hasCookie(sKey) {
     if (!sKey || /^(?:expires|max-age|path|domain|secure)$/i.test(sKey)) {
       return false
@@ -192,6 +219,10 @@ export default class Cookies {
     ).test(document.cookie)
   }
 
+  /**
+   * Get all cookie keys
+   * @returns {string[]} Array of cookie keys
+   */
   keys() {
     const aKeys = document.cookie
       .replace(/((?:^|\s*;)[^=]+)(?=;|$)|^\s*|\s*(?:=[^;]*)?(?:\1|$)/g, '')

package/src/modules/CoverOverlay/index.js

@@ -1,4 +1,4 @@
-import { gsap } from 'gsap'
+import { animate } from 'motion'
 import _defaultsDeep from 'lodash.defaultsdeep'
 
 const DEFAULT_OPTIONS = {}
@@ -13,7 +13,7 @@ export default class CoverOverlay {
   initialize() {
     const coveredModules = document.querySelectorAll('[data-cover-overlay]')
 
-    Array.from(coveredModules).forEach(v => {
+    Array.from(coveredModules).forEach((v) => {
       let player
       const overlay = v.querySelector('.picture-wrapper')
       const btn = v.querySelector('[data-cover-overlay-button]')
@@ -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 {