hr-design-system-handlebars 0.47.15 → 0.47.18

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+# v0.47.18 (Tue Jun 28 2022)
+
+#### 🐛 Bug Fix
+
+- DPE-1572 kick off [#246](https://github.com/mumprod/hr-design-system-handlebars/pull/246) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v0.47.17 (Mon Jun 27 2022)
+
+#### 🐛 Bug Fix
+
+- Alternativ-Teaser Documentation [#252](https://github.com/mumprod/hr-design-system-handlebars/pull/252) (zouhair1 [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (zouhair1)
+
+---
+
+# v0.47.16 (Mon Jun 27 2022)
+
+#### 🐛 Bug Fix
+
+- add documentation [#251](https://github.com/mumprod/hr-design-system-handlebars/pull/251) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
 # v0.47.15 (Thu Jun 23 2022)
 
 #### 🐛 Bug Fix

package/build/helpers/resourceUrl.js

@@ -1,6 +1,19 @@
 module.exports = function (text, options) {
     var resourceUrl
-
+    // ARD PLAYER Folder
+    if (text.includes('assets/vendor/ardplayer/')){
+        resourceUrl = text.replace(
+            'assets/',
+            './'
+        )
+    }
+    // VENDOR Folder
+    if (text.includes('assets/js/vendor/')){
+        resourceUrl = text.replace(
+            'assets/js/vendor',
+            './vendor/js'
+        )
+    }
     if (text.includes('assets/base/')) {
         if (text.includes('assets/base/icons/logo/') && options.hash['_brand']) {
             resourceUrl = text.replace(

package/dist/assets/index.css

@@ -1493,6 +1493,9 @@ Ensure the default browser behavior of the `hidden` attribute.
 .left-0 {
     left: 0px;
 }
+.bottom-0 {
+    bottom: 0px;
+}
 .right-0 {
     right: 0px;
 }
@@ -1552,6 +1555,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-left: 2rem;
     margin-right: 2rem;
 }
+.my-4 {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+}
 .mx-px {
     margin-left: 1px;
     margin-right: 1px;
@@ -1665,6 +1672,9 @@ Ensure the default browser behavior of the `hidden` attribute.
 .h-5 {
     height: 1.25rem;
 }
+.h-6 {
+    height: 1.5rem;
+}
 .h-3\.5 {
     height: 0.875rem;
 }
@@ -1680,9 +1690,6 @@ Ensure the default browser behavior of the `hidden` attribute.
 .h-8 {
     height: 2rem;
 }
-.h-6 {
-    height: 1.5rem;
-}
 .h-2 {
     height: 0.5rem;
 }
@@ -1947,6 +1954,9 @@ Ensure the default browser behavior of the `hidden` attribute.
 .rounded {
     border-radius: 0.25rem;
 }
+.rounded-full {
+    border-radius: 9999px;
+}
 .rounded-t-xl {
     border-top-left-radius: 0.75rem;
     border-top-right-radius: 0.75rem;
@@ -1976,6 +1986,9 @@ Ensure the default browser behavior of the `hidden` attribute.
 .border {
     border-width: 1px;
 }
+.border-4 {
+    border-width: 4px;
+}
 .border-0 {
     border-width: 0px;
 }
@@ -2018,6 +2031,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     --tw-bg-opacity: 1;
     background-color: rgba(187, 247, 208, var(--tw-bg-opacity));
 }
+.bg-blue-500 {
+    --tw-bg-opacity: 1;
+    background-color: rgba(59, 130, 246, var(--tw-bg-opacity));
+}
 .bg-gray-100 {
     --tw-bg-opacity: 1;
     background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
@@ -2127,9 +2144,20 @@ Ensure the default browser behavior of the `hidden` attribute.
 .\!p-4 {
     padding: 1rem !important;
 }
+.p-1 {
+    padding: 0.25rem;
+}
 .p-2 {
     padding: 0.5rem;
 }
+.py-2 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+}
+.px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
 .py-6 {
     padding-top: 1.5rem;
     padding-bottom: 1.5rem;
@@ -2174,10 +2202,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-left: 0.75rem;
     padding-right: 0.75rem;
 }
-.py-2 {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-}
 .py-1\.5 {
     padding-top: 0.375rem;
     padding-bottom: 0.375rem;
@@ -2190,10 +2214,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-left: 0px;
     padding-right: 0px;
 }
-.px-4 {
-    padding-left: 1rem;
-    padding-right: 1rem;
-}
 .pt-px {
     padding-top: 1px;
 }
@@ -2551,6 +2571,13 @@ Ensure the default browser behavior of the `hidden` attribute.
     transition: transform 150ms ease-in-out 0s;
     transition: transform 150ms ease-in-out 0s, -webkit-transform 150ms ease-in-out 0s;
 }
+.c-videoplayer .ardplayer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
 .first\:border-t:first-child {
     border-top-width: 1px;
 }
@@ -2572,6 +2599,10 @@ Ensure the default browser behavior of the `hidden` attribute.
 .last-of-type\:hidden:last-of-type {
     display: none;
 }
+.hover\:bg-blue-700:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgba(29, 78, 216, var(--tw-bg-opacity));
+}
 .hover\:bg-blue-congress:hover {
     --tw-bg-opacity: 1;
     background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
@@ -3238,4 +3269,4 @@ Ensure the default browser behavior of the `hidden` attribute.
     .tablet\:first\:border-l:first-child {
         border-left-width: 1px;
     }
-}
+}

package/dist/views/base/tracking/atiHelperNew.js

@@ -0,0 +1,37 @@
+
+import TrackingCookie from '../../components/externalService/trackingCookie.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/views/base/tracking/atiMediaHelperNew.js

@@ -0,0 +1,193 @@
+import { isTrackingAllowed, pi } from '../tracking/atiHelperNew'
+
+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/views/components/audio/audioElement.subfeature.js

@@ -0,0 +1,118 @@
+import { fireEvent, hr$, listen } from 'hrQueryNew'
+import { uxAction } from '../../base/tracking/atiHelperNew'
+import ATIMediaHelper from '../../base/tracking/atiMediaHelperNew'
+
+const AudioElement = function (options, rootElement) {
+    'use strict'
+
+    const audio = hr$('audio', rootElement)[0],
+        downloadInfo = hr$('.audioElement__downloadInfo', rootElement)[0],
+        downloadText = hr$('.audioElement__downloadText', rootElement)[0],
+        mediaTracking = new ATIMediaHelper(
+            'audio',
+            options.mediaMetadata.ati.pageName,
+            options.mediaMetadata.ati.secondLevelId,
+            options.mediaMetadata.agf.length,
+            options.mediaMetadata.ati.documentName,
+            options.mediaMetadata.ati.documentType,
+            options.mediaMetadata.ati.documentDate,
+            options.mediaMetadata.ati.chapter
+        )
+    let autoplay = options.autoplay || false,
+        isPlaying = false
+
+    const errorHandling = function (e) {
+        console.dir(audio)
+
+        if (audio.canPlayType && audio.canPlayType('audio/mpeg').length <= 0) {
+            showPlaybackNotSupported()
+            return
+        }
+
+        switch (audio.networkState) {
+            //file not found - 404
+            case HTMLMediaElement.NETWORK_NO_SOURCE:
+                showFileNotFound()
+                return
+
+            default:
+                break
+        }
+
+        //falls es mit einem event aufgerufen wurde
+        //und bis hierhin kam gibt es einen generellen fehler
+        if (e) {
+            showGeneralError()
+            return
+        }
+
+        return
+    }
+    const showGeneralError = function () {
+        console.log('Audio: Error')
+        downloadText.innerHTML = options.playbackError
+        rootElement.insertBefore(downloadInfo, rootElement.firstChild)
+        downloadInfo.style.display = 'inline-block'
+
+        uxAction('audioPlayer', 'generalError')
+    }
+    const showFileNotFound = function () {
+        console.log('Audio: File Not Found')
+        downloadInfo.innerHTML = options.playbackFileNotFound
+        rootElement.insertBefore(downloadInfo, rootElement.firstChild)
+        downloadInfo.style.display = 'inline-block'
+
+        uxAction('audioPlayer', 'fileNotFound')
+    }
+    const showPlaybackNotSupported = function () {
+        console.log('Audio: Playback unsupported')
+        downloadText.innerHTML = options.playbackUnsupported
+        rootElement.insertBefore(downloadInfo, rootElement.firstChild)
+        downloadInfo.style.display = 'inline-block'
+
+        uxAction('audioPlayer', 'playbackNotSupported')
+    }
+    const shouldIStopPlaying = function (event) {
+        console.log(event.detail)
+        if (event.detail != audio && isPlaying) {
+            audio.pause()
+            pauseAudio(event)
+        }
+    }
+    const startAudio = function (e) {
+        console.log('start')
+        uxAction('audioPlayer', 'audioPlay')
+        mediaTracking.trackInitialMediaPlay()
+        fireEvent('hr:global:stopOtherAVs', audio, true)
+        isPlaying = true
+        const geotag = hr$('.js-geotag', rootElement)[0]
+        if (typeof geotag != 'undefined') {
+            geotag.classList.add('hide')
+        }
+    }
+    const pauseAudio = function (e) {
+        console.log('pause')
+        const ended = e.target.ended
+        isPlaying = false
+        if (!ended) {
+            uxAction('audioPlayer', 'pause')
+        } else {
+            uxAction('audioPlayer', 'ended')
+        }
+    }
+
+    //falls ein fehler auftrat bevor das js, geladen wurde
+    errorHandling()
+
+    listen('error', errorHandling, rootElement)
+    listen('play', startAudio, audio)
+    listen('pause', pauseAudio, audio)
+
+    if (autoplay) {
+        audio.play()
+    }
+
+    listen('hr:global:stopOtherAVs', shouldIStopPlaying)
+}
+
+export default AudioElement

package/dist/views/components/button/button.hbs

@@ -0,0 +1,16 @@
+<button 
+    {{~#if _aria}} aria-label="{{_aria}}"{{/if}} 
+    {{~#if _isButton}} type="button"{{else}} type="submit"{{/if~}} 
+    {{~#if _name}} name="{{_name}}"{{/if}} 
+    class="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded {{_addClass}}{{#if _webview}} -webview{{/if}}"
+    {{~#if _value}} value="{{_value}}"{{/if}}
+>
+    {{~#if _showIcon~}}
+        {{> components/base/image/icon _icon=_icon _iconmap=_iconmap _addClass=_addIconClass _webview=_webview}}
+    {{/if~}}
+    {{~#if _label~}}
+        <span class="button__text">
+            {{~_label~}}
+        </span>
+    {{/if~}}
+</button>

package/dist/views/components/button/button_round.hbs

@@ -0,0 +1,16 @@
+<button 
+    {{~#if _aria}} aria-label="{{_aria}}"{{/if}} 
+    {{~#if _isButton}} type="button"{{else}} type="submit"{{/if~}} 
+    {{~#if _name}} name="{{_name}}"{{/if}} 
+    class="bg-blue-500 hover:bg-blue-700 text-white rounded-full border-4 border-white p-1 {{_addClass}}{{#if _webview}} -webview{{/if}}"
+    {{~#if _value}} value="{{_value}}"{{/if}}
+>
+    {{~#if _showIcon~}}
+        {{> components/base/image/icon _icon=_icon _iconmap=_iconmap _addClass=_addIconClass _webview=_webview}}
+    {{/if~}}
+    {{~#if _label~}}
+        <span class="sr-only">
+            {{~_label~}}
+        </span>
+    {{/if~}}
+</button>

package/dist/views/components/externalService/trackingCookie.subfeature.js

@@ -0,0 +1,37 @@
+import { getJSONCookie, setJSONCookie } from 'hrQueryNew'
+
+const TrackingCookie = function () {
+    let cookie = {}
+    const trackingCookieLifetime = 1000 * 60 * 60 * 24 * 365 * 10 /* 10 years */
+
+    const setCookieForTracking = function (trackingService, state) {
+        if (state == null) {
+            state = true
+        }
+        console.log('Schreibe Cookie: ' + trackingService + ': ' + state)
+        readTrackingCookie()
+        cookie[trackingService] = state
+        writeTrackingCookie()
+    }
+    const isTrackingAccepted = function (trackingService) {
+        readTrackingCookie()
+        return cookie[trackingService] === true
+    }
+    const writeTrackingCookie = function () {
+        setJSONCookie('tracking', cookie, trackingCookieLifetime)
+    }
+    const readTrackingCookie = function () {
+        cookie = getJSONCookie('tracking') || {}
+    }
+    const isTrackingCookieExistent = function (trackingService) {
+        readTrackingCookie()
+        return cookie.hasOwnProperty(trackingService)
+    }
+    return {
+        setCookieForTracking: setCookieForTracking,
+        isTrackingAccepted: isTrackingAccepted,
+        isTrackingCookieExistent: isTrackingCookieExistent,
+    }
+}
+
+export default TrackingCookie