hr-design-system-handlebars 0.51.0 → 0.51.1

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v0.51.1 (Thu Jul 28 2022)
+
+#### 🐛 Bug Fix
+
+- FEATURE: All js files that get loaded by [#288](https://github.com/mumprod/hr-design-system-handlebars/pull/288) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
 # v0.51.0 (Wed Jul 27 2022)
 
 #### 🚀 Enhancement

package/build/scripts/build.js

@@ -7,5 +7,7 @@ const run = (cmd) => execSync(cmd, { stdio: 'inherit', cwd: root })
 // Copy hbs files into the dist folder
 run(`npx copyfiles \"./src/index.js\" dist --up=1`)
 run(`npx copyfiles \"./src/stories/views/**/*.{js,hbs}\" dist --up=2`)
-run(`npx copyfiles \"./src/stories/views/**/*Ds.{feature,subfeature}.js\" dist/assets/js  --up=2`)
+run(
+    `npx copyfiles -e \"./src/stories/views/**/clickTracking.feature.js\" \"./src/stories/views/**/*.{feature,subfeature}.js\" dist/assets/js  --up=2`
+)
 run(`npx copyfiles \"./src/assets/**/*.{woff,svg}\" dist --up=1`)

package/dist/assets/js/views/base/tracking/atiHelper.subfeature.js

@@ -0,0 +1,36 @@
+import TrackingCookie from 'components/externalService/trackingCookieDs.subfeature'
+
+const isTrackingAllowed = () => {
+    const trackingCookie = new TrackingCookie()
+    return trackingCookie.isTrackingAccepted('ati')
+}
+
+const uxAction = (label, secondLevelId) => {
+    secondLevelId = secondLevelId || window.xtn2
+    if (window.xt_click && isTrackingAllowed()) {
+        window.xt_click('this', 'C', secondLevelId, label, 'A')
+    }
+}
+
+const uxNavigation = (label, secondLevelId) => {
+    secondLevelId = secondLevelId || window.xtn2
+    if (window.xt_click && isTrackingAllowed()) {
+        window.xt_click('this', 'C', secondLevelId, label, 'N')
+    }
+}
+
+const pi = (label, secondLevelId) => {
+    secondLevelId = secondLevelId || window.xtn2
+    if (window.xt_click && isTrackingAllowed()) {
+        window.xt_click('this', 'F', secondLevelId, label)
+    }
+}
+
+const download = (label, secondLevelId) => {
+    secondLevelId = secondLevelId || window.xtn2
+    if (window.xt_click && isTrackingAllowed()) {
+        window.xt_click('this', 'C', secondLevelId, label, 'T')
+    }
+}
+
+export { isTrackingAllowed, uxAction, uxNavigation, pi, download }

package/dist/assets/js/views/base/tracking/atiMediaHelper.subfeature.js

@@ -0,0 +1,193 @@
+import { isTrackingAllowed, pi } from 'base/tracking/atiHelper.subfeature'
+
+const ATIMediaHelper = function (
+    avType,
+    pageName,
+    secondLevelId,
+    length,
+    multcid,
+    multctype,
+    multcdate,
+    chapter
+) {
+    'use strict'
+    ;(this.avType = avType),
+        (this.secondLevelId = secondLevelId),
+        (this.multcid = multcid),
+        (this.multctype = multctype),
+        (this.multcdate = multcdate),
+        (this.chapter = chapter),
+        (this.pageName = pageName),
+        (this.length = length),
+        (this.wasNeverPlayed = true)
+
+    /*console.log(this.avType)
+    console.log(this.secondLevelId)
+    console.log(this.pageName)
+    console.log(this.length)*/
+}
+
+ATIMediaHelper.prototype = {
+    xtRichMediaVideoHelper: function (data) {
+        if (window.xt_rm && isTrackingAllowed()) {
+            console.log('XT_RM')
+            console.log('A ID: ' + data.avType + '&plyr=' + data.pageName)
+            console.log('B SECONDLEVELID: ' + data.secondLevelId)
+            console.log('C PAGENAME: ' + data.pageName + ':' + data.avType + 'Play')
+            console.log('D ACTION: ' + data.action)
+            console.log('F REFRESH: ' + data.refresh)
+            console.log('G DURATION: ' + data.length)
+            console.log('H POSTIONBUF: ' + '0')
+            console.log('H POSITION: ' + 'rmp=' + data.position)
+            console.log('H POSITIONNEW: ' + data.positionNew)
+            console.log('J DATARATE: ' + data.datarate)
+            console.log('K LOCATION: ' + data.location)
+            console.log('L TYPE: ' + data.type)
+            console.log('M SIZE: ' + data.size)
+            console.log('N FORMAT: ' + data.format)
+            xt_rm(
+                data.avType + '&plyr=' + data.pageName,
+                data.secondLevelId,
+                data.pageName + ':' + data.avType + 'Play',
+                data.action,
+                '',
+                data.refresh,
+                data.length,
+                '&rmp=' + data.position + '&rmpf=' + data.positionNew + '&rmbufp=0',
+                '',
+                data.datarate,
+                data.location,
+                data.type,
+                data.size,
+                data.format
+            )
+        }
+    },
+
+    xtClickVideoHelper: function (data) {
+        if (window.xt_click) {
+            console.log('XT_CLICK ')
+            var uniqueId = Math.abs(this.hashCode(data.pageName))
+            uniqueId = uniqueId.length > 15 ? uniqueId.substring(0, 15) : uniqueId
+            pi(
+                data.pageName +
+                    ':' +
+                    data.avType +
+                    'Play' +
+                    '&pid=' +
+                    uniqueId +
+                    '&pchap=' +
+                    data.chapter +
+                    '&pidt=' +
+                    data.x5 +
+                    '&x1=' +
+                    data.x1 +
+                    '&x2=' +
+                    data.x2 +
+                    '&x5=' +
+                    data.x5.substring(0, 8),
+                data.secondLevelId
+            )
+        }
+    },
+
+    hashCode: function (string) {
+        var hash = 0,
+            i,
+            chr
+        if (string.length === 0) return hash
+        for (i = 0; i < string.length; i++) {
+            chr = string.charCodeAt(i)
+            hash = (hash << 5) - hash + chr
+            hash |= 0 // Convert to 32bit integer
+        }
+        return hash
+    },
+
+    trackInitialMediaPlay: function () {
+        const data = {}
+
+        if (this.wasNeverPlayed) {
+            if (this.avType === 'livestreamVideo' || this.avType === 'livestreamAudio') {
+                data.object = 'this'
+                data.click = 'F'
+                if (this.avType === 'livestreamVideo') {
+                    data.pageName = this.pageName + ':video'
+                    data.avType = 'video'
+                } else {
+                    data.pageName = this.pageName + ':audio'
+                    data.avType = 'audio'
+                }
+                data.secondLevelId = this.secondLevelId
+                data.x1 = this.multcid
+                data.x2 = this.multctype
+                data.x5 = this.multcdate
+                data.chapter = this.chapter
+                data.action = 'play'
+                data.refresh = '10'
+                data.length = ''
+                data.position = '0'
+                data.positionNew = '0'
+                data.datarate = ''
+                data.location = 'int'
+                data.type = 'live'
+                data.size = ''
+                data.format = ''
+            } else {
+                data.object = 'this'
+                data.click = 'F'
+                data.avType = this.avType
+                data.pageName = this.pageName
+                data.secondLevelId = this.secondLevelId
+                data.x1 = this.multcid
+                data.x2 = this.multctype
+                data.x5 = this.multcdate
+                data.chapter = this.chapter
+                data.action = 'play'
+                data.refresh = ''
+                data.length = this.length
+                data.position = '0'
+                data.positionNew = '0'
+                data.datarate = '19'
+                data.location = 'int'
+                data.type = 'clip'
+                data.size = '100000'
+                data.format = '9'
+            }
+
+            this.xtClickVideoHelper(data)
+            this.xtRichMediaVideoHelper(data)
+        }
+
+        this.wasNeverPlayed = false
+    },
+
+    trackMediaSeek: function (_from, _to) {
+        console.log(_from)
+        console.log(_to)
+
+        const data = {}
+
+        data.avType = this.avType
+        data.pageName = this.pageName
+        data.secondLevelId = this.secondLevelId
+        data.x1 = this.multcid
+        data.x2 = this.multctype
+        data.x5 = this.multcdate
+        data.chapter = this.chapter
+        data.action = 'move'
+        data.refresh = ''
+        data.length = this.length
+        data.position = _from
+        data.positionNew = _to
+        data.datarate = ''
+        data.location = 'int'
+        data.type = 'clip'
+        data.size = ''
+        data.format = ''
+
+        this.xtRichMediaVideoHelper(data)
+    },
+}
+
+export default ATIMediaHelper

package/dist/assets/js/views/components/foo.feature.js

@@ -0,0 +1,16 @@
+import { hr$ } from 'hrQuery'
+const Foo = (context) => {
+    const { options } = context
+    const { element: rootElement } = context
+    const { test } = options
+
+    const init = () => {
+        console.log(rootElement)
+        console.log(hr$('.inner', rootElement))
+        console.log(`Feature ${test} geladen`)
+    }
+
+    init()
+}
+
+export default Foo

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

@@ -0,0 +1,380 @@
+import Initializer from 'initializer'
+import loadFeature from 'loadFeature'
+
+const hr$ = (selector, element) => {
+    // if element set, use it
+    // if not use document as default
+    const rootElement = element || document
+
+    // falls kein selector angegeben
+    // gib das element zurück
+    if (!selector) {
+        return rootElement
+    }
+
+    // wenn ein , oder ein leerzeichen '.class1 .class2'
+    // in der query dann qSA
+    if (
+        selector.indexOf(',') > 0 ||
+        selector.split(' ').length > 1 ||
+        selector.split('.').length > 1
+    ) {
+        return rootElement.querySelectorAll(selector)
+    }
+
+    if (selector[0] === '.') {
+        return rootElement.getElementsByClassName(selector.substring(1))
+    }
+
+    if (selector[0] === '#') {
+        return new Array(document.getElementById(selector.substring(1)))
+    }
+
+    // gib eine NodeList zurück
+    return rootElement.querySelectorAll(selector)
+}
+
+const stripTags = text => {
+    if (text) {
+        return text.replace(/(<([^>]+)>)/gi, '')
+    }
+    return false
+}
+
+const getViewportWidth = () =>
+    Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
+
+const isString = value => Object.prototype.toString.call(value) === '[object String]'
+
+const isElementInViewport = el => {
+    const rect = el.getBoundingClientRect()
+    return rect.top <= (document.documentElement || document.body).clientHeight
+}
+
+const getClosestParentWithTag = (tagName, node) => {
+    while (node !== null && node.tagName !== 'BODY') {
+        if (node.tagName && node.tagName.toLowerCase() === tagName) {
+            return node
+        }
+        node = node.parentNode
+    }
+    return false
+}
+
+const getNodeWithClassInPath = (className, startNode) => {
+    let node = startNode
+
+    while (node && node !== document) {
+        if (node.classList.contains(className)) {
+            return node
+        }
+        node = node.parentNode
+    }
+    return false
+}
+
+const isDescendant = (parent, child) => {
+    let node = child.parentNode
+    while (node !== null) {
+        if (node === parent) {
+            return true
+        }
+        node = node.parentNode
+    }
+    return false
+}
+
+/* wartet x ms seit dem letzen aufruf bis es ausgeführt wird */
+const debounce = (fn, delay) => {
+    let timer = null
+    return (...args) => {
+        const context = this
+        clearTimeout(timer)
+        timer = setTimeout(() => {
+            fn.apply(context, args)
+        }, delay)
+    }
+}
+/* feuert all x ms */
+const throttle = (fn, threshhold, scope) => {
+    threshhold = threshhold || 250
+    let last
+    let deferTimer
+    return (...args) => {
+        const context = scope || this
+
+        const now = +new Date()
+        if (last && now < last + threshhold) {
+            // hold on to it
+            clearTimeout(deferTimer)
+            deferTimer = setTimeout(() => {
+                last = now
+                fn.apply(context, args)
+            }, threshhold)
+        } else {
+            last = now
+            fn.apply(context, args)
+        }
+    }
+}
+
+/* Once, führt eine Funktion genau einmal aus, egal wie oft sie aufgerufen wird
+ * Usage
+    var canOnlyFireOnce = hr$.once(function() {
+        console.log('Fired!');
+    });
+
+    canOnlyFireOnce(); // "Fired!"
+    canOnlyFireOnce(); // nada
+ *
+ */
+const once = (fn, context) => {
+    let result
+
+    return (...args) => {
+        if (fn) {
+            result = fn.apply(context || this, args)
+            fn = null
+        }
+
+        return result
+    }
+}
+
+const listen = (eventName, fn, documentNode) => {
+    documentNode = documentNode === undefined ? document : documentNode
+
+    if (window.attachEvent) {
+        documentNode.attachEvent(eventName, fn)
+    } else {
+        documentNode.addEventListener(eventName, fn)
+    }
+}
+const unlisten = (eventName, fn, documentNode) => {
+    documentNode = documentNode === undefined ? document : documentNode
+
+    if (window.attachEvent) {
+        documentNode.detachEvent(eventName, fn)
+    } else {
+        documentNode.removeEventListener(eventName, fn)
+    }
+}
+const listenOnce = (eventName, fn, documentNode) => {
+    documentNode = documentNode === undefined ? document : documentNode
+
+    documentNode.addEventListener(eventName, fn, { once: true })
+}
+
+const fireEvent = (event_name, data, handleIframe) => {
+    const event = document.createEvent('CustomEvent')
+
+    event.initCustomEvent(event_name, true, true, data)
+
+    document.dispatchEvent(event)
+
+    if (handleIframe) {
+        if (hr$('#js-iFrame')[0]) {
+            hr$('#js-iFrame')[0].contentWindow.document.dispatchEvent(event)
+        }
+        if (inIframe()) {
+            parent.document.dispatchEvent(event)
+        }
+    }
+}
+
+const inIframe = () => {
+    try {
+        return window.self !== window.top
+    } catch (e) {
+        return true
+    }
+}
+
+const setJSONCookie = (cookieName, cookieValue, cookieLifetime) => {
+    setCookie(cookieName, JSON.stringify(cookieValue), cookieLifetime)
+}
+
+const setCookie = (cookieName, cookieValue, cookieLifetime) => {
+    let expires
+
+    const domain = getDomain()
+
+    if (cookieLifetime) {
+        expires = new Date()
+        expires.setMilliseconds(expires.getMilliseconds() + cookieLifetime)
+        expires = expires.toUTCString()
+    } else {
+        expires = ''
+    }
+
+    document.cookie =
+        cookieName + '=' + cookieValue + ';expires=' + expires + ';domain=' + domain + ';path=/;'
+}
+
+const getJSONCookie = cookieName => {
+    let cookie
+
+    try {
+        cookie = JSON.parse(getCookie(cookieName))
+    } catch (e) {}
+
+    return cookie
+}
+
+const getCookie = cookieName => {
+    let cookieString = RegExp('' + cookieName + '[^;]+').exec(document.cookie)
+    return unescape(!!cookieString ? cookieString.toString().replace(/^[^=]+./, '') : '')
+}
+
+const deleteCookie = cookieName => {
+    const domain = getDomain()
+    document.cookie =
+        cookieName + '=;expires=Thu, 01 Jan 1970 00:00:01 GMT;domain=' + domain + ';path=/;'
+}
+
+const getDomain = () => {
+    return window.location.hostname.substring(window.location.hostname.indexOf('.') + 1)
+}
+const requestTimeout = (fn, delay) => {
+    var requestAnimFrame = (function() {
+            return (
+                window.requestAnimationFrame ||
+                function(callback, element) {
+                    window.setTimeout(callback, 1000 / 60)
+                }
+            )
+        })(),
+        start = new Date().getTime(),
+        handle = {}
+    function loop() {
+        var current = new Date().getTime(),
+            delta = current - start
+        if (delta >= delay) {
+            fn.call()
+        } else {
+            handle.value = requestAnimFrame(loop)
+        }
+    }
+    handle.value = requestAnimFrame(loop)
+    return handle
+}
+
+const replaceAnimated = (
+    elem,
+    data,
+    rescan,
+    callback,
+    timeoutDelay,
+    valueFrom,
+    valueTo,
+    easing,
+    duration
+) => {
+    const property = 'opacity'
+    timeoutDelay = timeoutDelay || 800
+    valueFrom = valueFrom || 0.2
+    valueTo = valueTo || 1.0
+    easing = easing || 'ease-in-out'
+    duration = duration || '0.8s'
+
+    elem.style.WebkitTransition = property + ' ' + duration + ' ' + easing
+    elem.style.MozTransition = property + ' ' + duration + ' ' + easing
+    elem.style.transition = property + ' ' + duration + ' ' + easing
+
+    elem.style[property] = valueFrom
+
+    requestTimeout(function() {
+        if (data) {
+            elem.innerHTML = data
+        }
+        elem.style[property] = valueTo
+
+        if (rescan) {
+            Initializer.run(elem, loadFeature)
+            hrScriptLoad.rescanForModulesAndVariants(elem)
+        }
+
+        if (callback) {
+            callback()
+        }
+    }, timeoutDelay)
+}
+
+hr$.loadScript = function(id, scriptUrl, async, callback) {
+    if (document.getElementById(id)) return
+
+    var firstScriptTagInPage = hr$('script')[0],
+        scriptTag = document.createElement('script')
+
+    scriptTag.id = id
+    scriptTag.src = scriptUrl
+
+    if (async) {
+        scriptTag.setAttribute('async', !!async)
+    }
+
+    if (callback) {
+        scriptTag.addEventListener(
+            'load',
+            function(e) {
+                callback(null, e)
+            },
+            false
+        )
+    }
+
+    firstScriptTagInPage.parentNode.insertBefore(scriptTag, firstScriptTagInPage)
+}
+
+const loadScript = (id, scriptUrl, async, callback) => {
+    if (document.getElementById(id)) return
+
+    let firstScriptTagInPage = hr$('script')[0],
+        scriptTag = document.createElement('script')
+
+    scriptTag.id = id
+    scriptTag.src = scriptUrl
+
+    if (async) {
+        scriptTag.setAttribute('async', !!async)
+    }
+
+    if (callback) {
+        scriptTag.addEventListener(
+            'load',
+            function(e) {
+                callback(null, e)
+            },
+            false
+        )
+    }
+
+    firstScriptTagInPage.parentNode.insertBefore(scriptTag, firstScriptTagInPage)
+}
+
+export {
+    hr$,
+    stripTags,
+    getViewportWidth,
+    isString,
+    isElementInViewport,
+    getClosestParentWithTag,
+    getNodeWithClassInPath,
+    isDescendant,
+    debounce,
+    throttle,
+    once,
+    listen,
+    unlisten,
+    listenOnce,
+    fireEvent,
+    inIframe,
+    setCookie,
+    setJSONCookie,
+    getJSONCookie,
+    getCookie,
+    deleteCookie,
+    requestTimeout,
+    replaceAnimated,
+    loadScript
+}

package/package.json

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