hr-design-system-handlebars 0.56.8 → 0.56.9

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v0.56.9 (Fri Sep 02 2022)
+
+#### 🐛 Bug Fix
+
+- Feature/dpe 1567 [#314](https://github.com/mumprod/hr-design-system-handlebars/pull/314) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
 # v0.56.8 (Thu Sep 01 2022)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1897,7 +1897,7 @@ video {
           transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1662058116451;
+  counter-reset: cnt1662109528702;
 }
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
@@ -2280,7 +2280,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1662058116451 1;
+  counter-increment: cnt1662109528702 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2297,7 +2297,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1662058116451);
+  content: counter(cnt1662109528702);
 }
 /*! purgecss start ignore */
 :root,

package/dist/assets/js/views/generic/hrQuery.subfeature.js

@@ -1,7 +1,7 @@
 import Initializer from 'initializer'
 import loadFeature from 'loadFeature'
 
-const hr$ = (selector, element) => {
+const hr$ = function (selector, element) {
     // if element set, use it
     // if not use document as default
     const rootElement = element || document
@@ -34,24 +34,19 @@ const hr$ = (selector, element) => {
     return rootElement.querySelectorAll(selector)
 }
 
-const stripTags = text => {
-    if (text) {
-        return text.replace(/(<([^>]+)>)/gi, '')
-    }
-    return false
-}
+const stripTags = (text) => (text ? text.replace(/(<([^>]+)>)/gi, '') : false)
 
 const getViewportWidth = () =>
     Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
 
-const isString = value => Object.prototype.toString.call(value) === '[object String]'
+const isString = (value) => Object.prototype.toString.call(value) === '[object String]'
 
-const isElementInViewport = el => {
+const isElementInViewport = (el) => {
     const rect = el.getBoundingClientRect()
     return rect.top <= (document.documentElement || document.body).clientHeight
 }
 
-const getClosestParentWithTag = (tagName, node) => {
+const getClosestParentWithTag = function (tagName, node) {
     while (node !== null && node.tagName !== 'BODY') {
         if (node.tagName && node.tagName.toLowerCase() === tagName) {
             return node
@@ -61,7 +56,7 @@ const getClosestParentWithTag = (tagName, node) => {
     return false
 }
 
-const getNodeWithClassInPath = (className, startNode) => {
+const getNodeWithClassInPath = function (className, startNode) {
     let node = startNode
 
     while (node && node !== document) {
@@ -73,7 +68,7 @@ const getNodeWithClassInPath = (className, startNode) => {
     return false
 }
 
-const isDescendant = (parent, child) => {
+const isDescendant = function (parent, child) {
     let node = child.parentNode
     while (node !== null) {
         if (node === parent) {
@@ -85,9 +80,9 @@ const isDescendant = (parent, child) => {
 }
 
 /* wartet x ms seit dem letzen aufruf bis es ausgeführt wird */
-const debounce = (fn, delay) => {
+const debounce = function (fn, delay) {
     let timer = null
-    return (...args) => {
+    return function (...args) {
         const context = this
         clearTimeout(timer)
         timer = setTimeout(() => {
@@ -96,11 +91,11 @@ const debounce = (fn, delay) => {
     }
 }
 /* feuert all x ms */
-const throttle = (fn, threshhold, scope) => {
+const throttle = function (fn, threshhold, scope) {
     threshhold = threshhold || 250
     let last
     let deferTimer
-    return (...args) => {
+    return function (...args) {
         const context = scope || this
 
         const now = +new Date()
@@ -128,10 +123,10 @@ const throttle = (fn, threshhold, scope) => {
     canOnlyFireOnce(); // nada
  *
  */
-const once = (fn, context) => {
+const once = function (fn, context) {
     let result
 
-    return (...args) => {
+    return function (...args) {
         if (fn) {
             result = fn.apply(context || this, args)
             fn = null
@@ -141,16 +136,25 @@ const once = (fn, context) => {
     }
 }
 
-const listen = (eventName, fn, documentNode) => {
+const listen = function (eventName, fn, documentNode, forceActive = false) {
     documentNode = documentNode === undefined ? document : documentNode
 
+    // Use passive listeners to improve scrolling performance
+    // See:
+    // https://web.dev/uses-passive-event-listeners/
+    // https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
+
+    const isTouchOrMouseEvent =
+        eventName === 'touchstart' || eventName === 'touchmove' || eventName === 'wheel'
+    const isPassive = Modernizr.passiveeventlisteners && !forceActive && isTouchOrMouseEvent
+
     if (window.attachEvent) {
         documentNode.attachEvent(eventName, fn)
     } else {
-        documentNode.addEventListener(eventName, fn)
+        documentNode.addEventListener(eventName, fn, isPassive ? { passive: true } : false)
     }
 }
-const unlisten = (eventName, fn, documentNode) => {
+const unlisten = function (eventName, fn, documentNode) {
     documentNode = documentNode === undefined ? document : documentNode
 
     if (window.attachEvent) {
@@ -159,7 +163,7 @@ const unlisten = (eventName, fn, documentNode) => {
         documentNode.removeEventListener(eventName, fn)
     }
 }
-const listenOnce = (eventName, fn, documentNode) => {
+const listenOnce = function (eventName, fn, documentNode) {
     documentNode = documentNode === undefined ? document : documentNode
 
     documentNode.addEventListener(eventName, fn, { once: true })
@@ -194,7 +198,7 @@ const setJSONCookie = (cookieName, cookieValue, cookieLifetime) => {
     setCookie(cookieName, JSON.stringify(cookieValue), cookieLifetime)
 }
 
-const setCookie = (cookieName, cookieValue, cookieLifetime) => {
+const setCookie = function (cookieName, cookieValue, cookieLifetime) {
     let expires
 
     const domain = getDomain()
@@ -211,7 +215,7 @@ const setCookie = (cookieName, cookieValue, cookieLifetime) => {
         cookieName + '=' + cookieValue + ';expires=' + expires + ';domain=' + domain + ';path=/;'
 }
 
-const getJSONCookie = cookieName => {
+const getJSONCookie = (cookieName) => {
     let cookie
 
     try {
@@ -221,12 +225,12 @@ const getJSONCookie = cookieName => {
     return cookie
 }
 
-const getCookie = cookieName => {
+const getCookie = (cookieName) => {
     let cookieString = RegExp('' + cookieName + '[^;]+').exec(document.cookie)
     return unescape(!!cookieString ? cookieString.toString().replace(/^[^=]+./, '') : '')
 }
 
-const deleteCookie = cookieName => {
+const deleteCookie = (cookieName) => {
     const domain = getDomain()
     document.cookie =
         cookieName + '=;expires=Thu, 01 Jan 1970 00:00:01 GMT;domain=' + domain + ';path=/;'
@@ -235,17 +239,18 @@ const deleteCookie = cookieName => {
 const getDomain = () => {
     return window.location.hostname.substring(window.location.hostname.indexOf('.') + 1)
 }
-const requestTimeout = (fn, delay) => {
-    var requestAnimFrame = (function() {
+const requestTimeout = function (fn, delay) {
+    var requestAnimFrame = (function () {
             return (
                 window.requestAnimationFrame ||
-                function(callback, element) {
+                function (callback, element) {
                     window.setTimeout(callback, 1000 / 60)
                 }
             )
         })(),
         start = new Date().getTime(),
         handle = {}
+
     function loop() {
         var current = new Date().getTime(),
             delta = current - start
@@ -255,11 +260,12 @@ const requestTimeout = (fn, delay) => {
             handle.value = requestAnimFrame(loop)
         }
     }
+
     handle.value = requestAnimFrame(loop)
     return handle
 }
 
-const replaceAnimated = (
+const replaceAnimated = function (
     elem,
     data,
     rescan,
@@ -269,7 +275,7 @@ const replaceAnimated = (
     valueTo,
     easing,
     duration
-) => {
+) {
     const property = 'opacity'
     timeoutDelay = timeoutDelay || 800
     valueFrom = valueFrom || 0.2
@@ -283,7 +289,7 @@ const replaceAnimated = (
 
     elem.style[property] = valueFrom
 
-    requestTimeout(function() {
+    requestTimeout(function () {
         if (data) {
             elem.innerHTML = data
         }
@@ -300,33 +306,33 @@ const replaceAnimated = (
     }, timeoutDelay)
 }
 
-hr$.loadScript = function(id, scriptUrl, async, callback) {
-    if (document.getElementById(id)) return
+const getScrollY = () =>
+    window.pageYOffset !== undefined
+        ? window.pageYOffset
+        : (document.documentElement || document.body.parentNode || document.body).scrollTop
 
-    var firstScriptTagInPage = hr$('script')[0],
-        scriptTag = document.createElement('script')
+//Funktion um X & Y Offset eines Elements zu ermitteln
+const getElementOffset = function (el) {
+    let _x = 0
+    let _y = 0
+    _x = Math.round(el.getBoundingClientRect().left)
+    _y = Math.round(el.getBoundingClientRect().top)
 
-    scriptTag.id = id
-    scriptTag.src = scriptUrl
+    return { top: _y, left: _x }
+}
 
-    if (async) {
-        scriptTag.setAttribute('async', !!async)
-    }
+const reinitializeFeature = function (element) {
+    Initializer.run(element, loadFeature)
+}
 
-    if (callback) {
-        scriptTag.addEventListener(
-            'load',
-            function(e) {
-                callback(null, e)
-            },
-            false
-        )
+const removeScript = function (id) {
+    const element = document.getElementById(id)
+    if (element) {
+        element.parentNode.removeChild(element)
     }
-
-    firstScriptTagInPage.parentNode.insertBefore(scriptTag, firstScriptTagInPage)
 }
 
-const loadScript = (id, scriptUrl, async, callback) => {
+const loadScript = function (id, scriptUrl, async, callback) {
     if (document.getElementById(id)) return
 
     let firstScriptTagInPage = hr$('script')[0],
@@ -342,7 +348,7 @@ const loadScript = (id, scriptUrl, async, callback) => {
     if (callback) {
         scriptTag.addEventListener(
             'load',
-            function(e) {
+            function (e) {
                 callback(null, e)
             },
             false
@@ -352,7 +358,94 @@ const loadScript = (id, scriptUrl, async, callback) => {
     firstScriptTagInPage.parentNode.insertBefore(scriptTag, firstScriptTagInPage)
 }
 
+/*
+ * Fügt ein "style" bereich zum dokument hinzu
+ * und gibt eine referenz darauf zurück
+ * auf der man dann mit insertRule arbeiten kann
+ */
+const addStyle = function (css, mediaQuery) {
+    // Create the <style> tag
+    const style = document.createElement('style')
+
+    if (mediaQuery) {
+        style.setAttribute('media', mediaQuery)
+    }
+
+    // Add the <style> element to the page
+    if (style.styleSheet) {
+        style.styleSheet.cssText = css || ''
+    } else {
+        style.appendChild(document.createTextNode(css || ''))
+    }
+
+    document.head.appendChild(style)
+
+    return style.sheet
+}
+
+const simulateClickOn = function (elem) {
+    elem.dispatchEvent(
+        new MouseEvent('click', {
+            view: window,
+            bubbles: true,
+            cancelable: true,
+        })
+    )
+}
+
+/*!
+ * Behaves the same as setInterval except uses requestAnimationFrame() where possible for better performance
+ * modified gist.github.com/joelambert/1002116
+ * the fallback function requestAnimFrame is incorporated
+ * gist.github.com/joelambert/1002116
+ * gist.github.com/englishextra/873c8f78bfda7cafc905f48a963df07b
+ * jsfiddle.net/englishextra/sxrzktkz/
+ * @param {Object} fn The callback function
+ * @param {Int} delay The delay in milliseconds
+ * requestInterval(fn, delay);
+ */
+const requestInterval = function (fn, delay) {
+    const requestAnimFrame = (function () {
+            return (
+                window.requestAnimationFrame ||
+                function (callback, element) {
+                    window.setTimeout(callback, 1000 / 60)
+                }
+            )
+        })(),
+        handle = {}
+    let start = new Date().getTime()
+
+    function loop() {
+        handle.value = requestAnimFrame(loop)
+        const current = new Date().getTime(),
+            delta = current - start
+        if (delta >= delay) {
+            fn.call()
+            start = new Date().getTime()
+        }
+    }
+
+    handle.value = requestAnimFrame(loop)
+    return handle
+}
+
+/*!
+ * Behaves the same as clearInterval except uses cancelRequestAnimationFrame()
+ * where possible for better performance
+ * gist.github.com/joelambert/1002116
+ * gist.github.com/englishextra/873c8f78bfda7cafc905f48a963df07b
+ * jsfiddle.net/englishextra/sxrzktkz/
+ * @param {Int|Object} handle function handle, or function
+ * clearRequestInterval(handle);
+ */
+const clearRequestInterval = (handle) =>
+    window.cancelAnimationFrame && handle
+        ? window.cancelAnimationFrame(handle.value)
+        : window.clearInterval(handle)
+
 export {
+    addStyle,
     hr$,
     stripTags,
     getViewportWidth,
@@ -373,8 +466,15 @@ export {
     setJSONCookie,
     getJSONCookie,
     getCookie,
+    getScrollY,
+    getElementOffset,
     deleteCookie,
+    requestInterval,
+    clearRequestInterval,
     requestTimeout,
     replaceAnimated,
-    loadScript
+    loadScript,
+    removeScript,
+    reinitializeFeature,
+    simulateClickOn,
 }

package/dist/views/generic/hrQuery.subfeature.js

@@ -1,7 +1,7 @@
 import Initializer from 'initializer'
 import loadFeature from 'loadFeature'
 
-const hr$ = (selector, element) => {
+const hr$ = function (selector, element) {
     // if element set, use it
     // if not use document as default
     const rootElement = element || document
@@ -34,24 +34,19 @@ const hr$ = (selector, element) => {
     return rootElement.querySelectorAll(selector)
 }
 
-const stripTags = text => {
-    if (text) {
-        return text.replace(/(<([^>]+)>)/gi, '')
-    }
-    return false
-}
+const stripTags = (text) => (text ? text.replace(/(<([^>]+)>)/gi, '') : false)
 
 const getViewportWidth = () =>
     Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
 
-const isString = value => Object.prototype.toString.call(value) === '[object String]'
+const isString = (value) => Object.prototype.toString.call(value) === '[object String]'
 
-const isElementInViewport = el => {
+const isElementInViewport = (el) => {
     const rect = el.getBoundingClientRect()
     return rect.top <= (document.documentElement || document.body).clientHeight
 }
 
-const getClosestParentWithTag = (tagName, node) => {
+const getClosestParentWithTag = function (tagName, node) {
     while (node !== null && node.tagName !== 'BODY') {
         if (node.tagName && node.tagName.toLowerCase() === tagName) {
             return node
@@ -61,7 +56,7 @@ const getClosestParentWithTag = (tagName, node) => {
     return false
 }
 
-const getNodeWithClassInPath = (className, startNode) => {
+const getNodeWithClassInPath = function (className, startNode) {
     let node = startNode
 
     while (node && node !== document) {
@@ -73,7 +68,7 @@ const getNodeWithClassInPath = (className, startNode) => {
     return false
 }
 
-const isDescendant = (parent, child) => {
+const isDescendant = function (parent, child) {
     let node = child.parentNode
     while (node !== null) {
         if (node === parent) {
@@ -85,9 +80,9 @@ const isDescendant = (parent, child) => {
 }
 
 /* wartet x ms seit dem letzen aufruf bis es ausgeführt wird */
-const debounce = (fn, delay) => {
+const debounce = function (fn, delay) {
     let timer = null
-    return (...args) => {
+    return function (...args) {
         const context = this
         clearTimeout(timer)
         timer = setTimeout(() => {
@@ -96,11 +91,11 @@ const debounce = (fn, delay) => {
     }
 }
 /* feuert all x ms */
-const throttle = (fn, threshhold, scope) => {
+const throttle = function (fn, threshhold, scope) {
     threshhold = threshhold || 250
     let last
     let deferTimer
-    return (...args) => {
+    return function (...args) {
         const context = scope || this
 
         const now = +new Date()
@@ -128,10 +123,10 @@ const throttle = (fn, threshhold, scope) => {
     canOnlyFireOnce(); // nada
  *
  */
-const once = (fn, context) => {
+const once = function (fn, context) {
     let result
 
-    return (...args) => {
+    return function (...args) {
         if (fn) {
             result = fn.apply(context || this, args)
             fn = null
@@ -141,16 +136,25 @@ const once = (fn, context) => {
     }
 }
 
-const listen = (eventName, fn, documentNode) => {
+const listen = function (eventName, fn, documentNode, forceActive = false) {
     documentNode = documentNode === undefined ? document : documentNode
 
+    // Use passive listeners to improve scrolling performance
+    // See:
+    // https://web.dev/uses-passive-event-listeners/
+    // https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
+
+    const isTouchOrMouseEvent =
+        eventName === 'touchstart' || eventName === 'touchmove' || eventName === 'wheel'
+    const isPassive = Modernizr.passiveeventlisteners && !forceActive && isTouchOrMouseEvent
+
     if (window.attachEvent) {
         documentNode.attachEvent(eventName, fn)
     } else {
-        documentNode.addEventListener(eventName, fn)
+        documentNode.addEventListener(eventName, fn, isPassive ? { passive: true } : false)
     }
 }
-const unlisten = (eventName, fn, documentNode) => {
+const unlisten = function (eventName, fn, documentNode) {
     documentNode = documentNode === undefined ? document : documentNode
 
     if (window.attachEvent) {
@@ -159,7 +163,7 @@ const unlisten = (eventName, fn, documentNode) => {
         documentNode.removeEventListener(eventName, fn)
     }
 }
-const listenOnce = (eventName, fn, documentNode) => {
+const listenOnce = function (eventName, fn, documentNode) {
     documentNode = documentNode === undefined ? document : documentNode
 
     documentNode.addEventListener(eventName, fn, { once: true })
@@ -194,7 +198,7 @@ const setJSONCookie = (cookieName, cookieValue, cookieLifetime) => {
     setCookie(cookieName, JSON.stringify(cookieValue), cookieLifetime)
 }
 
-const setCookie = (cookieName, cookieValue, cookieLifetime) => {
+const setCookie = function (cookieName, cookieValue, cookieLifetime) {
     let expires
 
     const domain = getDomain()
@@ -211,7 +215,7 @@ const setCookie = (cookieName, cookieValue, cookieLifetime) => {
         cookieName + '=' + cookieValue + ';expires=' + expires + ';domain=' + domain + ';path=/;'
 }
 
-const getJSONCookie = cookieName => {
+const getJSONCookie = (cookieName) => {
     let cookie
 
     try {
@@ -221,12 +225,12 @@ const getJSONCookie = cookieName => {
     return cookie
 }
 
-const getCookie = cookieName => {
+const getCookie = (cookieName) => {
     let cookieString = RegExp('' + cookieName + '[^;]+').exec(document.cookie)
     return unescape(!!cookieString ? cookieString.toString().replace(/^[^=]+./, '') : '')
 }
 
-const deleteCookie = cookieName => {
+const deleteCookie = (cookieName) => {
     const domain = getDomain()
     document.cookie =
         cookieName + '=;expires=Thu, 01 Jan 1970 00:00:01 GMT;domain=' + domain + ';path=/;'
@@ -235,17 +239,18 @@ const deleteCookie = cookieName => {
 const getDomain = () => {
     return window.location.hostname.substring(window.location.hostname.indexOf('.') + 1)
 }
-const requestTimeout = (fn, delay) => {
-    var requestAnimFrame = (function() {
+const requestTimeout = function (fn, delay) {
+    var requestAnimFrame = (function () {
             return (
                 window.requestAnimationFrame ||
-                function(callback, element) {
+                function (callback, element) {
                     window.setTimeout(callback, 1000 / 60)
                 }
             )
         })(),
         start = new Date().getTime(),
         handle = {}
+
     function loop() {
         var current = new Date().getTime(),
             delta = current - start
@@ -255,11 +260,12 @@ const requestTimeout = (fn, delay) => {
             handle.value = requestAnimFrame(loop)
         }
     }
+
     handle.value = requestAnimFrame(loop)
     return handle
 }
 
-const replaceAnimated = (
+const replaceAnimated = function (
     elem,
     data,
     rescan,
@@ -269,7 +275,7 @@ const replaceAnimated = (
     valueTo,
     easing,
     duration
-) => {
+) {
     const property = 'opacity'
     timeoutDelay = timeoutDelay || 800
     valueFrom = valueFrom || 0.2
@@ -283,7 +289,7 @@ const replaceAnimated = (
 
     elem.style[property] = valueFrom
 
-    requestTimeout(function() {
+    requestTimeout(function () {
         if (data) {
             elem.innerHTML = data
         }
@@ -300,33 +306,33 @@ const replaceAnimated = (
     }, timeoutDelay)
 }
 
-hr$.loadScript = function(id, scriptUrl, async, callback) {
-    if (document.getElementById(id)) return
+const getScrollY = () =>
+    window.pageYOffset !== undefined
+        ? window.pageYOffset
+        : (document.documentElement || document.body.parentNode || document.body).scrollTop
 
-    var firstScriptTagInPage = hr$('script')[0],
-        scriptTag = document.createElement('script')
+//Funktion um X & Y Offset eines Elements zu ermitteln
+const getElementOffset = function (el) {
+    let _x = 0
+    let _y = 0
+    _x = Math.round(el.getBoundingClientRect().left)
+    _y = Math.round(el.getBoundingClientRect().top)
 
-    scriptTag.id = id
-    scriptTag.src = scriptUrl
+    return { top: _y, left: _x }
+}
 
-    if (async) {
-        scriptTag.setAttribute('async', !!async)
-    }
+const reinitializeFeature = function (element) {
+    Initializer.run(element, loadFeature)
+}
 
-    if (callback) {
-        scriptTag.addEventListener(
-            'load',
-            function(e) {
-                callback(null, e)
-            },
-            false
-        )
+const removeScript = function (id) {
+    const element = document.getElementById(id)
+    if (element) {
+        element.parentNode.removeChild(element)
     }
-
-    firstScriptTagInPage.parentNode.insertBefore(scriptTag, firstScriptTagInPage)
 }
 
-const loadScript = (id, scriptUrl, async, callback) => {
+const loadScript = function (id, scriptUrl, async, callback) {
     if (document.getElementById(id)) return
 
     let firstScriptTagInPage = hr$('script')[0],
@@ -342,7 +348,7 @@ const loadScript = (id, scriptUrl, async, callback) => {
     if (callback) {
         scriptTag.addEventListener(
             'load',
-            function(e) {
+            function (e) {
                 callback(null, e)
             },
             false
@@ -352,7 +358,94 @@ const loadScript = (id, scriptUrl, async, callback) => {
     firstScriptTagInPage.parentNode.insertBefore(scriptTag, firstScriptTagInPage)
 }
 
+/*
+ * Fügt ein "style" bereich zum dokument hinzu
+ * und gibt eine referenz darauf zurück
+ * auf der man dann mit insertRule arbeiten kann
+ */
+const addStyle = function (css, mediaQuery) {
+    // Create the <style> tag
+    const style = document.createElement('style')
+
+    if (mediaQuery) {
+        style.setAttribute('media', mediaQuery)
+    }
+
+    // Add the <style> element to the page
+    if (style.styleSheet) {
+        style.styleSheet.cssText = css || ''
+    } else {
+        style.appendChild(document.createTextNode(css || ''))
+    }
+
+    document.head.appendChild(style)
+
+    return style.sheet
+}
+
+const simulateClickOn = function (elem) {
+    elem.dispatchEvent(
+        new MouseEvent('click', {
+            view: window,
+            bubbles: true,
+            cancelable: true,
+        })
+    )
+}
+
+/*!
+ * Behaves the same as setInterval except uses requestAnimationFrame() where possible for better performance
+ * modified gist.github.com/joelambert/1002116
+ * the fallback function requestAnimFrame is incorporated
+ * gist.github.com/joelambert/1002116
+ * gist.github.com/englishextra/873c8f78bfda7cafc905f48a963df07b
+ * jsfiddle.net/englishextra/sxrzktkz/
+ * @param {Object} fn The callback function
+ * @param {Int} delay The delay in milliseconds
+ * requestInterval(fn, delay);
+ */
+const requestInterval = function (fn, delay) {
+    const requestAnimFrame = (function () {
+            return (
+                window.requestAnimationFrame ||
+                function (callback, element) {
+                    window.setTimeout(callback, 1000 / 60)
+                }
+            )
+        })(),
+        handle = {}
+    let start = new Date().getTime()
+
+    function loop() {
+        handle.value = requestAnimFrame(loop)
+        const current = new Date().getTime(),
+            delta = current - start
+        if (delta >= delay) {
+            fn.call()
+            start = new Date().getTime()
+        }
+    }
+
+    handle.value = requestAnimFrame(loop)
+    return handle
+}
+
+/*!
+ * Behaves the same as clearInterval except uses cancelRequestAnimationFrame()
+ * where possible for better performance
+ * gist.github.com/joelambert/1002116
+ * gist.github.com/englishextra/873c8f78bfda7cafc905f48a963df07b
+ * jsfiddle.net/englishextra/sxrzktkz/
+ * @param {Int|Object} handle function handle, or function
+ * clearRequestInterval(handle);
+ */
+const clearRequestInterval = (handle) =>
+    window.cancelAnimationFrame && handle
+        ? window.cancelAnimationFrame(handle.value)
+        : window.clearInterval(handle)
+
 export {
+    addStyle,
     hr$,
     stripTags,
     getViewportWidth,
@@ -373,8 +466,15 @@ export {
     setJSONCookie,
     getJSONCookie,
     getCookie,
+    getScrollY,
+    getElementOffset,
     deleteCookie,
+    requestInterval,
+    clearRequestInterval,
     requestTimeout,
     replaceAnimated,
-    loadScript
+    loadScript,
+    removeScript,
+    reinitializeFeature,
+    simulateClickOn,
 }

package/package.json

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "0.56.8",
+    "version": "0.56.9",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "start-storybook -p 6006 public",

package/src/stories/views/generic/hrQuery.subfeature.js

@@ -1,7 +1,7 @@
 import Initializer from 'initializer'
 import loadFeature from 'loadFeature'
 
-const hr$ = (selector, element) => {
+const hr$ = function (selector, element) {
     // if element set, use it
     // if not use document as default
     const rootElement = element || document
@@ -34,24 +34,19 @@ const hr$ = (selector, element) => {
     return rootElement.querySelectorAll(selector)
 }
 
-const stripTags = text => {
-    if (text) {
-        return text.replace(/(<([^>]+)>)/gi, '')
-    }
-    return false
-}
+const stripTags = (text) => (text ? text.replace(/(<([^>]+)>)/gi, '') : false)
 
 const getViewportWidth = () =>
     Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
 
-const isString = value => Object.prototype.toString.call(value) === '[object String]'
+const isString = (value) => Object.prototype.toString.call(value) === '[object String]'
 
-const isElementInViewport = el => {
+const isElementInViewport = (el) => {
     const rect = el.getBoundingClientRect()
     return rect.top <= (document.documentElement || document.body).clientHeight
 }
 
-const getClosestParentWithTag = (tagName, node) => {
+const getClosestParentWithTag = function (tagName, node) {
     while (node !== null && node.tagName !== 'BODY') {
         if (node.tagName && node.tagName.toLowerCase() === tagName) {
             return node
@@ -61,7 +56,7 @@ const getClosestParentWithTag = (tagName, node) => {
     return false
 }
 
-const getNodeWithClassInPath = (className, startNode) => {
+const getNodeWithClassInPath = function (className, startNode) {
     let node = startNode
 
     while (node && node !== document) {
@@ -73,7 +68,7 @@ const getNodeWithClassInPath = (className, startNode) => {
     return false
 }
 
-const isDescendant = (parent, child) => {
+const isDescendant = function (parent, child) {
     let node = child.parentNode
     while (node !== null) {
         if (node === parent) {
@@ -85,9 +80,9 @@ const isDescendant = (parent, child) => {
 }
 
 /* wartet x ms seit dem letzen aufruf bis es ausgeführt wird */
-const debounce = (fn, delay) => {
+const debounce = function (fn, delay) {
     let timer = null
-    return (...args) => {
+    return function (...args) {
         const context = this
         clearTimeout(timer)
         timer = setTimeout(() => {
@@ -96,11 +91,11 @@ const debounce = (fn, delay) => {
     }
 }
 /* feuert all x ms */
-const throttle = (fn, threshhold, scope) => {
+const throttle = function (fn, threshhold, scope) {
     threshhold = threshhold || 250
     let last
     let deferTimer
-    return (...args) => {
+    return function (...args) {
         const context = scope || this
 
         const now = +new Date()
@@ -128,10 +123,10 @@ const throttle = (fn, threshhold, scope) => {
     canOnlyFireOnce(); // nada
  *
  */
-const once = (fn, context) => {
+const once = function (fn, context) {
     let result
 
-    return (...args) => {
+    return function (...args) {
         if (fn) {
             result = fn.apply(context || this, args)
             fn = null
@@ -141,16 +136,25 @@ const once = (fn, context) => {
     }
 }
 
-const listen = (eventName, fn, documentNode) => {
+const listen = function (eventName, fn, documentNode, forceActive = false) {
     documentNode = documentNode === undefined ? document : documentNode
 
+    // Use passive listeners to improve scrolling performance
+    // See:
+    // https://web.dev/uses-passive-event-listeners/
+    // https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
+
+    const isTouchOrMouseEvent =
+        eventName === 'touchstart' || eventName === 'touchmove' || eventName === 'wheel'
+    const isPassive = Modernizr.passiveeventlisteners && !forceActive && isTouchOrMouseEvent
+
     if (window.attachEvent) {
         documentNode.attachEvent(eventName, fn)
     } else {
-        documentNode.addEventListener(eventName, fn)
+        documentNode.addEventListener(eventName, fn, isPassive ? { passive: true } : false)
     }
 }
-const unlisten = (eventName, fn, documentNode) => {
+const unlisten = function (eventName, fn, documentNode) {
     documentNode = documentNode === undefined ? document : documentNode
 
     if (window.attachEvent) {
@@ -159,7 +163,7 @@ const unlisten = (eventName, fn, documentNode) => {
         documentNode.removeEventListener(eventName, fn)
     }
 }
-const listenOnce = (eventName, fn, documentNode) => {
+const listenOnce = function (eventName, fn, documentNode) {
     documentNode = documentNode === undefined ? document : documentNode
 
     documentNode.addEventListener(eventName, fn, { once: true })
@@ -194,7 +198,7 @@ const setJSONCookie = (cookieName, cookieValue, cookieLifetime) => {
     setCookie(cookieName, JSON.stringify(cookieValue), cookieLifetime)
 }
 
-const setCookie = (cookieName, cookieValue, cookieLifetime) => {
+const setCookie = function (cookieName, cookieValue, cookieLifetime) {
     let expires
 
     const domain = getDomain()
@@ -211,7 +215,7 @@ const setCookie = (cookieName, cookieValue, cookieLifetime) => {
         cookieName + '=' + cookieValue + ';expires=' + expires + ';domain=' + domain + ';path=/;'
 }
 
-const getJSONCookie = cookieName => {
+const getJSONCookie = (cookieName) => {
     let cookie
 
     try {
@@ -221,12 +225,12 @@ const getJSONCookie = cookieName => {
     return cookie
 }
 
-const getCookie = cookieName => {
+const getCookie = (cookieName) => {
     let cookieString = RegExp('' + cookieName + '[^;]+').exec(document.cookie)
     return unescape(!!cookieString ? cookieString.toString().replace(/^[^=]+./, '') : '')
 }
 
-const deleteCookie = cookieName => {
+const deleteCookie = (cookieName) => {
     const domain = getDomain()
     document.cookie =
         cookieName + '=;expires=Thu, 01 Jan 1970 00:00:01 GMT;domain=' + domain + ';path=/;'
@@ -235,17 +239,18 @@ const deleteCookie = cookieName => {
 const getDomain = () => {
     return window.location.hostname.substring(window.location.hostname.indexOf('.') + 1)
 }
-const requestTimeout = (fn, delay) => {
-    var requestAnimFrame = (function() {
+const requestTimeout = function (fn, delay) {
+    var requestAnimFrame = (function () {
             return (
                 window.requestAnimationFrame ||
-                function(callback, element) {
+                function (callback, element) {
                     window.setTimeout(callback, 1000 / 60)
                 }
             )
         })(),
         start = new Date().getTime(),
         handle = {}
+
     function loop() {
         var current = new Date().getTime(),
             delta = current - start
@@ -255,11 +260,12 @@ const requestTimeout = (fn, delay) => {
             handle.value = requestAnimFrame(loop)
         }
     }
+
     handle.value = requestAnimFrame(loop)
     return handle
 }
 
-const replaceAnimated = (
+const replaceAnimated = function (
     elem,
     data,
     rescan,
@@ -269,7 +275,7 @@ const replaceAnimated = (
     valueTo,
     easing,
     duration
-) => {
+) {
     const property = 'opacity'
     timeoutDelay = timeoutDelay || 800
     valueFrom = valueFrom || 0.2
@@ -283,7 +289,7 @@ const replaceAnimated = (
 
     elem.style[property] = valueFrom
 
-    requestTimeout(function() {
+    requestTimeout(function () {
         if (data) {
             elem.innerHTML = data
         }
@@ -300,33 +306,33 @@ const replaceAnimated = (
     }, timeoutDelay)
 }
 
-hr$.loadScript = function(id, scriptUrl, async, callback) {
-    if (document.getElementById(id)) return
+const getScrollY = () =>
+    window.pageYOffset !== undefined
+        ? window.pageYOffset
+        : (document.documentElement || document.body.parentNode || document.body).scrollTop
 
-    var firstScriptTagInPage = hr$('script')[0],
-        scriptTag = document.createElement('script')
+//Funktion um X & Y Offset eines Elements zu ermitteln
+const getElementOffset = function (el) {
+    let _x = 0
+    let _y = 0
+    _x = Math.round(el.getBoundingClientRect().left)
+    _y = Math.round(el.getBoundingClientRect().top)
 
-    scriptTag.id = id
-    scriptTag.src = scriptUrl
+    return { top: _y, left: _x }
+}
 
-    if (async) {
-        scriptTag.setAttribute('async', !!async)
-    }
+const reinitializeFeature = function (element) {
+    Initializer.run(element, loadFeature)
+}
 
-    if (callback) {
-        scriptTag.addEventListener(
-            'load',
-            function(e) {
-                callback(null, e)
-            },
-            false
-        )
+const removeScript = function (id) {
+    const element = document.getElementById(id)
+    if (element) {
+        element.parentNode.removeChild(element)
     }
-
-    firstScriptTagInPage.parentNode.insertBefore(scriptTag, firstScriptTagInPage)
 }
 
-const loadScript = (id, scriptUrl, async, callback) => {
+const loadScript = function (id, scriptUrl, async, callback) {
     if (document.getElementById(id)) return
 
     let firstScriptTagInPage = hr$('script')[0],
@@ -342,7 +348,7 @@ const loadScript = (id, scriptUrl, async, callback) => {
     if (callback) {
         scriptTag.addEventListener(
             'load',
-            function(e) {
+            function (e) {
                 callback(null, e)
             },
             false
@@ -352,7 +358,94 @@ const loadScript = (id, scriptUrl, async, callback) => {
     firstScriptTagInPage.parentNode.insertBefore(scriptTag, firstScriptTagInPage)
 }
 
+/*
+ * Fügt ein "style" bereich zum dokument hinzu
+ * und gibt eine referenz darauf zurück
+ * auf der man dann mit insertRule arbeiten kann
+ */
+const addStyle = function (css, mediaQuery) {
+    // Create the <style> tag
+    const style = document.createElement('style')
+
+    if (mediaQuery) {
+        style.setAttribute('media', mediaQuery)
+    }
+
+    // Add the <style> element to the page
+    if (style.styleSheet) {
+        style.styleSheet.cssText = css || ''
+    } else {
+        style.appendChild(document.createTextNode(css || ''))
+    }
+
+    document.head.appendChild(style)
+
+    return style.sheet
+}
+
+const simulateClickOn = function (elem) {
+    elem.dispatchEvent(
+        new MouseEvent('click', {
+            view: window,
+            bubbles: true,
+            cancelable: true,
+        })
+    )
+}
+
+/*!
+ * Behaves the same as setInterval except uses requestAnimationFrame() where possible for better performance
+ * modified gist.github.com/joelambert/1002116
+ * the fallback function requestAnimFrame is incorporated
+ * gist.github.com/joelambert/1002116
+ * gist.github.com/englishextra/873c8f78bfda7cafc905f48a963df07b
+ * jsfiddle.net/englishextra/sxrzktkz/
+ * @param {Object} fn The callback function
+ * @param {Int} delay The delay in milliseconds
+ * requestInterval(fn, delay);
+ */
+const requestInterval = function (fn, delay) {
+    const requestAnimFrame = (function () {
+            return (
+                window.requestAnimationFrame ||
+                function (callback, element) {
+                    window.setTimeout(callback, 1000 / 60)
+                }
+            )
+        })(),
+        handle = {}
+    let start = new Date().getTime()
+
+    function loop() {
+        handle.value = requestAnimFrame(loop)
+        const current = new Date().getTime(),
+            delta = current - start
+        if (delta >= delay) {
+            fn.call()
+            start = new Date().getTime()
+        }
+    }
+
+    handle.value = requestAnimFrame(loop)
+    return handle
+}
+
+/*!
+ * Behaves the same as clearInterval except uses cancelRequestAnimationFrame()
+ * where possible for better performance
+ * gist.github.com/joelambert/1002116
+ * gist.github.com/englishextra/873c8f78bfda7cafc905f48a963df07b
+ * jsfiddle.net/englishextra/sxrzktkz/
+ * @param {Int|Object} handle function handle, or function
+ * clearRequestInterval(handle);
+ */
+const clearRequestInterval = (handle) =>
+    window.cancelAnimationFrame && handle
+        ? window.cancelAnimationFrame(handle.value)
+        : window.clearInterval(handle)
+
 export {
+    addStyle,
     hr$,
     stripTags,
     getViewportWidth,
@@ -373,8 +466,15 @@ export {
     setJSONCookie,
     getJSONCookie,
     getCookie,
+    getScrollY,
+    getElementOffset,
     deleteCookie,
+    requestInterval,
+    clearRequestInterval,
     requestTimeout,
     replaceAnimated,
-    loadScript
+    loadScript,
+    removeScript,
+    reinitializeFeature,
+    simulateClickOn,
 }