hr-design-system-handlebars 1.52.18 → 1.52.20

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# v1.52.20 (Tue Jan 30 2024)
+
+#### 🐛 Bug Fix
+
+- use button instead of link for remaining items loader [#821](https://github.com/mumprod/hr-design-system-handlebars/pull/821) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
+# v1.52.19 (Mon Jan 29 2024)
+
+#### 🐛 Bug Fix
+
+- Dpe 2708 [#814](https://github.com/mumprod/hr-design-system-handlebars/pull/814) ([@Paul-Atreidis](https://github.com/Paul-Atreidis) [@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 2
+
+- [@Paul-Atreidis](https://github.com/Paul-Atreidis)
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.52.18 (Fri Jan 26 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1828,6 +1828,18 @@ a.link {
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.animate-none {
+  animation: none;
+}
+@keyframes spin {
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
 .cursor-default {
   cursor: default;
 }
@@ -3261,7 +3273,7 @@ a.link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1706285302242;
+  counter-reset: cnt1706619591815;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3563,7 +3575,7 @@ a.link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1706285302242 1;
+  counter-increment: cnt1706619591815 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3579,7 +3591,7 @@ a.link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1706285302242);
+  content: counter(cnt1706619591815);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

package/dist/assets/js/components/article/components/podcast/podcastChannelRemainingEpisodesLoader.feature.js

@@ -14,7 +14,7 @@ const PodcastChannelRemainingEpisodesLoader = function (context) {
 
     const handleDynLoad = function (event) {
         event.preventDefault()
-        dynLoadTrigElement.classList.add('-loading')
+        dynLoadTrigElement.classList.add('animate-spin')
         ajaxLoad(event.currentTarget, true)
     }
     const ajaxLoad = function (target, push, cache) {
@@ -37,7 +37,7 @@ const PodcastChannelRemainingEpisodesLoader = function (context) {
                 }, 1000)
             })
             .fail(function (data, status, xhr) {
-                dynLoadTrigElement.classList.remove('-loading')
+                dynLoadTrigElement.classList.remove('animate-spin')
                 console.log('fail')
             })
     }

package/dist/assets/js/components/dataPolicySettings/dataPolicySettingsDs.feature.js

@@ -1,9 +1,11 @@
+import SettingsCookie from 'components/externalService/globalSettingsCookie.subfeature'
 import DatapolicyCookie from 'components/externalService/datapolicyCookie.subfeature'
 import TrackingCookie from 'components/externalService/trackingCookie.subfeature'
 import { fireEvent, getJSONCookie, hr$, setJSONCookie, listen } from 'hrQuery'
 import { uxAction } from 'base/tracking/pianoHelper.subfeature'
 
 import A11yDialog from 'a11y-dialog'
+import { deleteCookie } from '../../generic/hrQuery.subfeature'
 
 const DataPolicySettings = function (context) {
     const { options } = context,
@@ -16,204 +18,161 @@ const DataPolicySettings = function (context) {
         bodyElement = document.getElementsByTagName('html')[0],
         datapolicyCookie = new DatapolicyCookie(),
         trackingCookie = new TrackingCookie(),
+        settingsCookie = new SettingsCookie(),
         toggleSwitches = hr$('.js-toggleSwitch-checkbox', container),
         toggleSwitchesExternal = hr$('.js-toggleSwitch-external', container),
         toggleSwitchesTracking = hr$('.js-toggleSwitch-tracking', container),
         toggleAllSwitch = hr$('.js-toggleSwitch-checkbox-all', container)[0],
-        providerTitle = hr$('.js-providerTitle', container)[0],
-        trackingCookieLifetime = 1000 * 60 * 60 * 24 * 365 * 10
-        let isWebview = window.parent.document.documentElement.classList.contains('webview'),
-        cookie = {}
+        providerTitle = hr$('.js-providerTitle', container)[0]
 
-    console.log('gelaaaadeeeeeeeen')
-    ///////////////////
-    // OVERLAY START //
-    ///////////////////
-    const showSettingsButton = function () {
-        let settingsButton = document.getElementById('globalSettingsButton')
-        if (isWebview) {
-            console.log('Button Anzeige steuern')
-            readAppSettingsButtonCookie()
-            console.log(cookie['hidePrivacySettingsButton'])
-            if (cookie['hidePrivacySettingsButton'] === true) {
-                settingsButton.style.display = 'none'
-            } else {
-                settingsButton.style.display = 'inline-flex'
+        let isWebview = window.parent.document.documentElement.classList.contains('webview'),
+        appSettingsCookie = {},
+        dataDataPolicyCookie = {},
+        dataTrackingCookie = {},
+        dataSettingsCookie = {}
+
+    //Überprüfung ob die alten Cookies zusammengeführt werden müssen
+    const checkForExistingCookies = function () {
+        if(getJSONCookie('datapolicy') || getJSONCookie('tracking')){
+            console.log("hessenschau bisher => Beide Cookies existieren")
+            deleteOldCookiesandTransferData()
+        }
+        else{
+            console.log("hessenschau neu => nach der Löschung der beiden alten Cookies muß hier gelesen werden")
+            if(getJSONCookie('hrSettings')) {
+                getAllToggleValuesFromSettings()
+            }
+            else {
+                console.log("hessenschau neu => wenn kein hrSettings erzeugt wurde")
+                let whitelist = ["agf","ati","ard_mediathek","arte_concert","arte_concert_new","datawrapper_cdn"]
+                for (let i = 0; i < toggleSwitches.length; ++i) {
+                    if(toggleSwitches[i].id == "agf" || toggleSwitches[i].id == "ati" || toggleSwitches[i].id == "ard_mediathek" || toggleSwitches[i].id == "arte_concert" || toggleSwitches[i].id == "arte_concert_new" || toggleSwitches[i].id == "datawrapper_cdn"){
+                        setCookieForSettings(toggleSwitches[i].id, true)
+                    }
+                    else {
+                        setCookieForSettings(toggleSwitches[i].id, false)
+                    }
+                }
+                setAllToggleValuesFromSettings()
+                changeProviderTitle()
             }
-        } else {
-            settingsButton.style.display = 'inline-flex'
-            console.log('Button immer anzeigen, weil nicht App')
         }
     }
-    const readAppSettingsButtonCookie = function () {
-        cookie = getJSONCookie('appSettings') || {}
-    }
-    const writeAppSettingsButtonCookie = function () {
-        cookie = 'true'
-        setJSONCookie('hsAppSettingsButton', cookie, trackingCookieLifetime)
-    }
 
-    const onDialogShow = function (event) {
-        bodyElement.classList.add('optionOpen')
-        const opener = event.detail == null && event.detail.target.closest('[data-a11y-dialog-show]') ? event.detail.target.closest('[data-a11y-dialog-show]') : null
-        const pianoTracking = null != opener && undefined !== opener.dataset.pianoTracking ? JSON.parse(opener.dataset.pianoTracking) : {label:"Datenschutzerklärung"}
-        if(undefined !== pianoTracking.secondLevelId){
-            console.log(pianoTracking)
-            uxAction('Einstellungsdialog geöffnet - ' + pianoTracking.label, pianoTracking.secondLevelId)
-        }else{
-            console.log(pianoTracking)
-            uxAction('Einstellungsdialog geöffnet - ' + pianoTracking.label)
-        }
+    const deleteOldCookiesandTransferData = function () {
+        dataDataPolicyCookie = getJSONCookie('datapolicy') || {}
+        dataTrackingCookie = getJSONCookie('tracking') || {}
+        let objMerge 
+        // Beide bestehenden JSONs aus Tracking und Service werden zusammengeführt.
+        objMerge = JSON.stringify(dataTrackingCookie) + JSON.stringify(dataDataPolicyCookie);
+        objMerge = objMerge.replace(/\}\{/, ",");
+        objMerge = JSON.parse(objMerge);
+        let objArray = Object.entries(objMerge);
+        objArray.forEach(([key, value]) => {
+            //hrSettingsCookie wird geschrieben
+            setCookieForSettings(key, value)
+        });
+        setAllToggleValuesFromSettings()
+        changeProviderTitle()
+        deleteCookie('datapolicy')
+        deleteCookie('tracking')
     }
 
-    const onDialogHide = function () {
-        console.log("Hide")
-        bodyElement.classList.remove('optionOpen')
-    }
-    const shouldDialogBeOpendOnLoad = function () {
-        const urlParam = getUrlVars()['openDialog']
-        if (typeof urlParam !== 'undefined' && urlParam === 'true') {
-            dialog.show()
+    const setCookieForSettings = function (key, value) {
+        settingsCookie.setCookieForOptions(key, value)
+        if (value) {
+            fireEvent('hr:externalService-activate-' + key)
+        } else {
+            fireEvent('hr:externalService-deactivate-' + key)
         }
     }
-    const getUrlVars = function () {
-        let vars = {}
-        const parts = window.location.href.replace(
-            /[?&]+([^=&]+)=([^&]*)/gi,
-            function (m, key, value) {
-                vars[key] = value
-            }
-        )
-        return vars
-    }
-    ///////////////////
-    // OVERLAY END ////
-    ///////////////////
 
-    /////////////////////
-    // TOGGLES START ////
-    /////////////////////
+    const getAllToggleValuesFromSettings = function () {
+        setAllToggleValuesFromSettings()
+        changeProviderTitle()
+        //initial alles deaktivieren
+        //hr-settings schreiben
 
-    const initializeToggleStateExternal = function () {
-        for (let i = 0; i < toggleSwitchesExternal.length; ++i) {
-            initializeEventListenerForService(i)
+    }
 
-            setListenerForService(toggleSwitchesExternal[i])
+    const setAllToggleValuesFromSettings = function () {
+        dataSettingsCookie = getJSONCookie('hrSettings') || {}
+        let settingId
+        let settingState
+        for (let i = 0; i < toggleSwitches.length; ++i) {
+          settingId = toggleSwitches[i].id
+          settingState = dataSettingsCookie.settingId
+            document.getElementById(toggleSwitches[i].id).checked = settingState 
+              
+            setAllToggleEventListeners(toggleSwitches[i])
+            initializeAllToggleEventListeners(i)
 
-            if (isCookieSetForService(toggleSwitchesExternal[i].id)) {
-                toggleSwitchesExternal[i].checked = true
+            if (isCookieSetForSettings(toggleSwitches[i].id)) {
+                toggleSwitches[i].checked = true
             } else if (
-                !isCookieExistForService(toggleSwitchesExternal[i].id) &&
-                toggleSwitchesExternal[i].getAttribute('initial') == 'checked'
+                !isCookieExistForSettings(toggleSwitches[i].id) &&
+                toggleSwitches[i].getAttribute('initial') == 'checked'
             ) {
-                toggleSwitchesExternal[i].checked = true
-                setCookieForService(toggleSwitchesExternal[i])
+                toggleSwitches[i].checked = true
+                setCookieForSettings(toggleSwitches[i].id,toggleSwitches[i].checked)
             }
         }
-
-        toggleAllSwitch.checked = allTogglesChecked()
-        changeProviderTitle()
+        toggleAllSwitch.checked = allTogglesExternalServiceChecked()
     }
-    const initializeToggleStateTracking = function () {
-        for (let i = 0; i < toggleSwitchesTracking.length; ++i) {
-            initializeEventListenerForTracking(i)
-
-            setListenerForTracking(toggleSwitchesTracking[i])
-
-            if (isCookieSetForTracking(toggleSwitchesTracking[i].id)) {
-                toggleSwitchesTracking[i].checked = true
-            }
 
-            if (
-                !isCookieExistForTracking(toggleSwitchesTracking[i].id) &&
-                toggleSwitchesTracking[i].getAttribute('initial') == 'checked'
-            ) {
-                toggleSwitchesTracking[i].checked = true
-                setCookieForTracking(toggleSwitchesTracking[i])
-            }
-        }
+    const isCookieSetForSettings = function (externalService) {
+        return settingsCookie.isSettingsCookieAccepted(externalService)
     }
-    const initializeEventListenerForService = function (serviceId) {
-        listen(
-            'hr:externalService-activate-' + toggleSwitchesExternal[serviceId].id,
-            function () {
-                toggleSwitchesExternal[serviceId].checked = true
-            },
-            document
-        )
+
+    const isCookieExistForSettings = function (externalService) {
+        return settingsCookie.isSettingsCookieExistent(externalService)
     }
-    const initializeEventListenerForTracking = function (serviceId) {
+
+    const initializeAllToggleEventListeners = function (serviceId) {
         listen(
-            'hr:trackingService-activate-' + toggleSwitchesTracking[serviceId].id,
+            'hr:externalService-activate-' + toggleSwitches[serviceId].id,
             function () {
-                toggleSwitchesTracking[serviceId].checked = true
+                toggleSwitches[serviceId].checked = true
             },
             document
         )
     }
-    const setListenerForService = function (element) {
+
+    const setAllToggleEventListeners = function (element) {
         listen(
             'change',
             function () {
-                setCookieForService(element)
-                toggleAllSwitch.checked = allTogglesChecked()
+                setCookieForSettings(element.id, element.checked)
+                toggleAllSwitch.checked = allTogglesExternalServiceChecked()
                 changeProviderTitle()
             },
             element
         )
     }
-    const setListenerForTracking = function (element) {
-        listen(
-            'change',
-            function () {
-                setCookieForTracking(element)
-            },
-            element
-        )
-    }
-    const setCookieForService = function (element) {
-        datapolicyCookie.setCookieForExternalService(element.id, element.checked)
-        if (element.checked) {
-            fireEvent('hr:externalService-activate-' + element.id)
-        } else {
-            console.log('fireEvent: hr:externalService-deactivate-' + element.id)
-            fireEvent('hr:externalService-deactivate-' + element.id)
-        }
-    }
-    const setCookieForTracking = function (element) {
-        trackingCookie.setCookieForTracking(element.id, element.checked)
-        if (element.checked) {
-            fireEvent('hr:trackingService-activate-' + element.id)
-        } else {
-            fireEvent('hr:trackingService-deactivate-' + element.id)
-        }
-    }
-    const toggleAll = function () {
-        console.log('Toggle All' + toggleAllSwitch.checked)
 
+    const toggleAll = function () {
         for (let i = 0; i < toggleSwitchesExternal.length; ++i) {
             if (toggleSwitchesExternal[i].checked != toggleAllSwitch.checked) {
                 toggleSwitchesExternal[i].checked = toggleAllSwitch.checked
-                setCookieForService(toggleSwitchesExternal[i])
+                setCookieForSettings(toggleSwitchesExternal[i].id, toggleSwitchesExternal[i].checked)
             }
         }
-
         changeProviderTitle()
     }
-    const allTogglesChecked = function () {
-        let allChecked
 
+    const allTogglesExternalServiceChecked = function () {
+        let allChecked
         for (let i = 0; i < toggleSwitchesExternal.length; ++i) {
             if (toggleSwitchesExternal[i].checked) {
                 allChecked = true
             } else {
                 allChecked = false
-
                 break
             }
         }
         return allChecked
     }
+
     const changeProviderTitle = function () {
         if (toggleAllSwitch.checked == true) {
             providerTitle.textContent = 'Alle Anbieter deaktivieren'
@@ -221,35 +180,74 @@ const DataPolicySettings = function (context) {
             providerTitle.textContent = 'Alle Anbieter aktivieren'
         }
     }
-    const isCookieSetForService = function (externalService) {
-        return datapolicyCookie.isDatapolicyAccepted(externalService)
-    }
-    const isCookieSetForTracking = function (trackingService) {
-        return trackingCookie.isTrackingAccepted(trackingService)
-    }
-    const isCookieExistForService = function (externalService) {
-        return datapolicyCookie.isDatapolicyExistent(externalService)
-    }
-    const isCookieExistForTracking = function (trackingService) {
-        return trackingCookie.isTrackingCookieExistent(trackingService)
-    }
+
     const initializeEventListeners = function () {
         listen('change', toggleAll, toggleAllSwitch)
         listen("show", onDialogShow, container)
         listen("hide", onDialogHide, container)
     }
-    // steuert die Darstellung des Buttons für die hs-App ///
-    showSettingsButton()
-    //// 1. Toggle States aller Switches setzen ////
-    ////    Cookies setzen usw.                 ////
-    initializeToggleStateExternal()
 
-    initializeToggleStateTracking()
+    const readAppSettingsButtonCookie = function () {
+        /* Das Cookie 'appSettings' wird in der App-Logik für die Webview erzeugt. Hier nur ausgelesen, um die Option für den Settings-Button abzufragen */
+        appSettingsCookie = getJSONCookie('appSettings') || {}
+    }
 
-    //// 2. Event Listener initialisieren ////
-    initializeEventListeners()
+    //Für die hs-App wird der Button ein und ausgeblendet
+    const showSettingsButton = function () {
+        let settingsButton = document.getElementById('globalSettingsButton')
+        if (isWebview) {
+            readAppSettingsButtonCookie()
+            if (appSettingsCookie['hidePrivacySettingsButton'] === true) {
+                settingsButton.style.display = 'none'
+            } else {
+                settingsButton.style.display = 'inline-flex'
+            }
+        } else {
+            settingsButton.style.display = 'inline-flex'
+        }
+    }
 
+    const onDialogShow = function (event) {
+        bodyElement.classList.add('optionOpen')
+        const opener = event.detail == null && event.detail.target.closest('[data-a11y-dialog-show]') ? event.detail.target.closest('[data-a11y-dialog-show]') : null
+        const pianoTracking = null != opener && undefined !== opener.dataset.pianoTracking ? JSON.parse(opener.dataset.pianoTracking) : {label:"Datenschutzerklärung"}
+        if(undefined !== pianoTracking.secondLevelId){
+            console.log(pianoTracking)
+            uxAction('Einstellungsdialog geöffnet - ' + pianoTracking.label, pianoTracking.secondLevelId)
+        }else{
+            console.log(pianoTracking)
+            uxAction('Einstellungsdialog geöffnet - ' + pianoTracking.label)
+        }
+    }
+
+    const onDialogHide = function () {
+        console.log("Hide")
+        bodyElement.classList.remove('optionOpen')
+    }
+    const shouldDialogBeOpendOnLoad = function () {
+        const urlParam = getUrlVars()['openDialog']
+        if (typeof urlParam !== 'undefined' && urlParam === 'true') {
+            dialog.show()
+        }
+    }
+    const getUrlVars = function () {
+        let vars = {}
+        const parts = window.location.href.replace(
+            /[?&]+([^=&]+)=([^&]*)/gi,
+            function (m, key, value) {
+                vars[key] = value
+            }
+        )
+        return vars
+    }
+   
+    // steuert die Darstellung des Buttons für die hs-App ///
+    showSettingsButton()
+    // Überprüfen ob die alten Cookies vorhanden sind
+    checkForExistingCookies()
+    initializeEventListeners()
     shouldDialogBeOpendOnLoad()
+   
 }
 
 export default DataPolicySettings

package/dist/assets/js/components/externalService/datapolicyCookie.subfeature.js

@@ -34,7 +34,7 @@ const DataPolicyCookie = function () {
     return {
         setCookieForExternalService: setCookieForExternalService,
         isDatapolicyAccepted: isDatapolicyAccepted,
-        isDatapolicyExistent: isDatapolicyExistent,
+        isDatapolicyExistent: isDatapolicyExistent
     }
 }
 

package/dist/assets/js/components/externalService/globalSettingsCookie.subfeature.js

@@ -0,0 +1,41 @@
+import { getJSONCookie, setJSONCookie } from 'hrQuery'
+
+const GlobalSettingsCookie = function () {
+    const settingsCookieLifetime = 1000 * 60 * 60 * 24 * 365 * 10 /* 10 years */
+    let cookie = {}
+
+    const setCookieForOptions = function (option, state) {
+        if (state == null) {
+            state = true
+        }
+        console.log('Schreibe Settings-Cookie: ' + option + ': ' + state)
+        readSettingsCookie()
+        cookie[option] = state
+        writeSettingsCookie()
+    }
+
+    const isSettingsCookieAccepted = function (externalService) {
+        readSettingsCookie()
+        return cookie[externalService] === true
+    }
+
+    const writeSettingsCookie = function () {
+        setJSONCookie('hrSettings', cookie, settingsCookieLifetime)
+    }
+
+    const readSettingsCookie = function () {
+        cookie = getJSONCookie('hrSettings') || {}
+    }
+
+    const isSettingsCookieExistent = function (option) {
+        readSettingsCookie()
+        return cookie.hasOwnProperty(option)
+    }
+    return {
+        setCookieForOptions: setCookieForOptions,
+        isSettingsCookieExistent: isSettingsCookieExistent,
+        isSettingsCookieAccepted: isSettingsCookieAccepted
+    }
+}
+
+export default GlobalSettingsCookie

package/dist/views/components/article/components/podcast/podcast_playlist_article.hbs

@@ -6,12 +6,12 @@
             {{~#if this.remainingPlaylistItems}}
                 <div class="flex items-center justify-center pb-5 js-load"
                     data-hr-podcast-channel-remaining-episodes-loader='{"dynLoadTrigSelector":".js-load-remaining-items-button","dynLoadReplaceSelector":".js-placeholder-reload", "url":"{{this.reloadUrl}}"}'>
-                    {{#> components/button/link_button _size="lg" _title="Weitere Episoden laden" _type="button" _css="js-load-remaining-items-button" _link=this.allEpisodeUrl }}
+                    {{#> components/button/button _size="lg" _title="Weitere Episoden laden" _type="button" _css="js-load-remaining-items-button" _link=this.allEpisodeUrl }}
                         {{> components/button/components/button_label _label="Weitere Episoden laden"}}
-                        {{> components/button/components/button_icon _icon="reload" _iconmap="icons"}}
-                    {{/components/button/link_button}}
+                        {{> components/button/components/button_icon _icon="reload" _iconmap="icons" _css="animate-none"}}
+                    {{/components/button/button}}
                     {{#*inline "htmlProperties"}}
-                        data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "weitereEpisodenLaden:ButtonClick"}]}'
+                        data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "weitereEpisodenLaden:ButtonClick"}]}' rel='nofollow'
                     {{/inline}}
                 </div>
                 <div class="js-placeholder-reload"></div>

package/dist/views_static/components/article/components/podcast/podcast_playlist_article.hbs

@@ -6,12 +6,12 @@
             {{~#if this.remainingPlaylistItems}}
                 <div class="flex items-center justify-center pb-5 js-load"
                     data-hr-podcast-channel-remaining-episodes-loader='{"dynLoadTrigSelector":".js-load-remaining-items-button","dynLoadReplaceSelector":".js-placeholder-reload", "url":"{{this.reloadUrl}}"}'>
-                    {{#> components/button/link_button _size="lg" _title="Weitere Episoden laden" _type="button" _css="js-load-remaining-items-button" _link=this.allEpisodeUrl }}
+                    {{#> components/button/button _size="lg" _title="Weitere Episoden laden" _type="button" _css="js-load-remaining-items-button" _link=this.allEpisodeUrl }}
                         {{> components/button/components/button_label _label="Weitere Episoden laden"}}
-                        {{> components/button/components/button_icon _icon="reload" _iconmap="icons"}}
-                    {{/components/button/link_button}}
+                        {{> components/button/components/button_icon _icon="reload" _iconmap="icons" _css="animate-none"}}
+                    {{/components/button/button}}
                     {{#*inline "htmlProperties"}}
-                        data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "weitereEpisodenLaden:ButtonClick"}]}'
+                        data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "weitereEpisodenLaden:ButtonClick"}]}' rel='nofollow'
                     {{/inline}}
                 </div>
                 <div class="js-placeholder-reload"></div>

package/package.json

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

package/src/stories/views/components/article/components/podcast/podcastChannelRemainingEpisodesLoader.feature.js

@@ -14,7 +14,7 @@ const PodcastChannelRemainingEpisodesLoader = function (context) {
 
     const handleDynLoad = function (event) {
         event.preventDefault()
-        dynLoadTrigElement.classList.add('-loading')
+        dynLoadTrigElement.classList.add('animate-spin')
         ajaxLoad(event.currentTarget, true)
     }
     const ajaxLoad = function (target, push, cache) {
@@ -37,7 +37,7 @@ const PodcastChannelRemainingEpisodesLoader = function (context) {
                 }, 1000)
             })
             .fail(function (data, status, xhr) {
-                dynLoadTrigElement.classList.remove('-loading')
+                dynLoadTrigElement.classList.remove('animate-spin')
                 console.log('fail')
             })
     }

package/src/stories/views/components/article/components/podcast/podcast_playlist_article.hbs

@@ -6,12 +6,12 @@
             {{~#if this.remainingPlaylistItems}}
                 <div class="flex items-center justify-center pb-5 js-load"
                     data-hr-podcast-channel-remaining-episodes-loader='{"dynLoadTrigSelector":".js-load-remaining-items-button","dynLoadReplaceSelector":".js-placeholder-reload", "url":"{{this.reloadUrl}}"}'>
-                    {{#> components/button/link_button _size="lg" _title="Weitere Episoden laden" _type="button" _css="js-load-remaining-items-button" _link=this.allEpisodeUrl }}
+                    {{#> components/button/button _size="lg" _title="Weitere Episoden laden" _type="button" _css="js-load-remaining-items-button" _link=this.allEpisodeUrl }}
                         {{> components/button/components/button_label _label="Weitere Episoden laden"}}
-                        {{> components/button/components/button_icon _icon="reload" _iconmap="icons"}}
-                    {{/components/button/link_button}}
+                        {{> components/button/components/button_icon _icon="reload" _iconmap="icons" _css="animate-none"}}
+                    {{/components/button/button}}
                     {{#*inline "htmlProperties"}}
-                        data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "weitereEpisodenLaden:ButtonClick"}]}'
+                        data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "weitereEpisodenLaden:ButtonClick"}]}' rel='nofollow'
                     {{/inline}}
                 </div>
                 <div class="js-placeholder-reload"></div>

package/src/stories/views/components/dataPolicySettings/dataPolicySettingsDs.feature.js

@@ -1,9 +1,11 @@
+import SettingsCookie from 'components/externalService/globalSettingsCookie.subfeature'
 import DatapolicyCookie from 'components/externalService/datapolicyCookie.subfeature'
 import TrackingCookie from 'components/externalService/trackingCookie.subfeature'
 import { fireEvent, getJSONCookie, hr$, setJSONCookie, listen } from 'hrQuery'
 import { uxAction } from 'base/tracking/pianoHelper.subfeature'
 
 import A11yDialog from 'a11y-dialog'
+import { deleteCookie } from '../../generic/hrQuery.subfeature'
 
 const DataPolicySettings = function (context) {
     const { options } = context,
@@ -16,204 +18,161 @@ const DataPolicySettings = function (context) {
         bodyElement = document.getElementsByTagName('html')[0],
         datapolicyCookie = new DatapolicyCookie(),
         trackingCookie = new TrackingCookie(),
+        settingsCookie = new SettingsCookie(),
         toggleSwitches = hr$('.js-toggleSwitch-checkbox', container),
         toggleSwitchesExternal = hr$('.js-toggleSwitch-external', container),
         toggleSwitchesTracking = hr$('.js-toggleSwitch-tracking', container),
         toggleAllSwitch = hr$('.js-toggleSwitch-checkbox-all', container)[0],
-        providerTitle = hr$('.js-providerTitle', container)[0],
-        trackingCookieLifetime = 1000 * 60 * 60 * 24 * 365 * 10
-        let isWebview = window.parent.document.documentElement.classList.contains('webview'),
-        cookie = {}
+        providerTitle = hr$('.js-providerTitle', container)[0]
 
-    console.log('gelaaaadeeeeeeeen')
-    ///////////////////
-    // OVERLAY START //
-    ///////////////////
-    const showSettingsButton = function () {
-        let settingsButton = document.getElementById('globalSettingsButton')
-        if (isWebview) {
-            console.log('Button Anzeige steuern')
-            readAppSettingsButtonCookie()
-            console.log(cookie['hidePrivacySettingsButton'])
-            if (cookie['hidePrivacySettingsButton'] === true) {
-                settingsButton.style.display = 'none'
-            } else {
-                settingsButton.style.display = 'inline-flex'
+        let isWebview = window.parent.document.documentElement.classList.contains('webview'),
+        appSettingsCookie = {},
+        dataDataPolicyCookie = {},
+        dataTrackingCookie = {},
+        dataSettingsCookie = {}
+
+    //Überprüfung ob die alten Cookies zusammengeführt werden müssen
+    const checkForExistingCookies = function () {
+        if(getJSONCookie('datapolicy') || getJSONCookie('tracking')){
+            console.log("hessenschau bisher => Beide Cookies existieren")
+            deleteOldCookiesandTransferData()
+        }
+        else{
+            console.log("hessenschau neu => nach der Löschung der beiden alten Cookies muß hier gelesen werden")
+            if(getJSONCookie('hrSettings')) {
+                getAllToggleValuesFromSettings()
+            }
+            else {
+                console.log("hessenschau neu => wenn kein hrSettings erzeugt wurde")
+                let whitelist = ["agf","ati","ard_mediathek","arte_concert","arte_concert_new","datawrapper_cdn"]
+                for (let i = 0; i < toggleSwitches.length; ++i) {
+                    if(toggleSwitches[i].id == "agf" || toggleSwitches[i].id == "ati" || toggleSwitches[i].id == "ard_mediathek" || toggleSwitches[i].id == "arte_concert" || toggleSwitches[i].id == "arte_concert_new" || toggleSwitches[i].id == "datawrapper_cdn"){
+                        setCookieForSettings(toggleSwitches[i].id, true)
+                    }
+                    else {
+                        setCookieForSettings(toggleSwitches[i].id, false)
+                    }
+                }
+                setAllToggleValuesFromSettings()
+                changeProviderTitle()
             }
-        } else {
-            settingsButton.style.display = 'inline-flex'
-            console.log('Button immer anzeigen, weil nicht App')
         }
     }
-    const readAppSettingsButtonCookie = function () {
-        cookie = getJSONCookie('appSettings') || {}
-    }
-    const writeAppSettingsButtonCookie = function () {
-        cookie = 'true'
-        setJSONCookie('hsAppSettingsButton', cookie, trackingCookieLifetime)
-    }
 
-    const onDialogShow = function (event) {
-        bodyElement.classList.add('optionOpen')
-        const opener = event.detail == null && event.detail.target.closest('[data-a11y-dialog-show]') ? event.detail.target.closest('[data-a11y-dialog-show]') : null
-        const pianoTracking = null != opener && undefined !== opener.dataset.pianoTracking ? JSON.parse(opener.dataset.pianoTracking) : {label:"Datenschutzerklärung"}
-        if(undefined !== pianoTracking.secondLevelId){
-            console.log(pianoTracking)
-            uxAction('Einstellungsdialog geöffnet - ' + pianoTracking.label, pianoTracking.secondLevelId)
-        }else{
-            console.log(pianoTracking)
-            uxAction('Einstellungsdialog geöffnet - ' + pianoTracking.label)
-        }
+    const deleteOldCookiesandTransferData = function () {
+        dataDataPolicyCookie = getJSONCookie('datapolicy') || {}
+        dataTrackingCookie = getJSONCookie('tracking') || {}
+        let objMerge 
+        // Beide bestehenden JSONs aus Tracking und Service werden zusammengeführt.
+        objMerge = JSON.stringify(dataTrackingCookie) + JSON.stringify(dataDataPolicyCookie);
+        objMerge = objMerge.replace(/\}\{/, ",");
+        objMerge = JSON.parse(objMerge);
+        let objArray = Object.entries(objMerge);
+        objArray.forEach(([key, value]) => {
+            //hrSettingsCookie wird geschrieben
+            setCookieForSettings(key, value)
+        });
+        setAllToggleValuesFromSettings()
+        changeProviderTitle()
+        deleteCookie('datapolicy')
+        deleteCookie('tracking')
     }
 
-    const onDialogHide = function () {
-        console.log("Hide")
-        bodyElement.classList.remove('optionOpen')
-    }
-    const shouldDialogBeOpendOnLoad = function () {
-        const urlParam = getUrlVars()['openDialog']
-        if (typeof urlParam !== 'undefined' && urlParam === 'true') {
-            dialog.show()
+    const setCookieForSettings = function (key, value) {
+        settingsCookie.setCookieForOptions(key, value)
+        if (value) {
+            fireEvent('hr:externalService-activate-' + key)
+        } else {
+            fireEvent('hr:externalService-deactivate-' + key)
         }
     }
-    const getUrlVars = function () {
-        let vars = {}
-        const parts = window.location.href.replace(
-            /[?&]+([^=&]+)=([^&]*)/gi,
-            function (m, key, value) {
-                vars[key] = value
-            }
-        )
-        return vars
-    }
-    ///////////////////
-    // OVERLAY END ////
-    ///////////////////
 
-    /////////////////////
-    // TOGGLES START ////
-    /////////////////////
+    const getAllToggleValuesFromSettings = function () {
+        setAllToggleValuesFromSettings()
+        changeProviderTitle()
+        //initial alles deaktivieren
+        //hr-settings schreiben
 
-    const initializeToggleStateExternal = function () {
-        for (let i = 0; i < toggleSwitchesExternal.length; ++i) {
-            initializeEventListenerForService(i)
+    }
 
-            setListenerForService(toggleSwitchesExternal[i])
+    const setAllToggleValuesFromSettings = function () {
+        dataSettingsCookie = getJSONCookie('hrSettings') || {}
+        let settingId
+        let settingState
+        for (let i = 0; i < toggleSwitches.length; ++i) {
+          settingId = toggleSwitches[i].id
+          settingState = dataSettingsCookie.settingId
+            document.getElementById(toggleSwitches[i].id).checked = settingState 
+              
+            setAllToggleEventListeners(toggleSwitches[i])
+            initializeAllToggleEventListeners(i)
 
-            if (isCookieSetForService(toggleSwitchesExternal[i].id)) {
-                toggleSwitchesExternal[i].checked = true
+            if (isCookieSetForSettings(toggleSwitches[i].id)) {
+                toggleSwitches[i].checked = true
             } else if (
-                !isCookieExistForService(toggleSwitchesExternal[i].id) &&
-                toggleSwitchesExternal[i].getAttribute('initial') == 'checked'
+                !isCookieExistForSettings(toggleSwitches[i].id) &&
+                toggleSwitches[i].getAttribute('initial') == 'checked'
             ) {
-                toggleSwitchesExternal[i].checked = true
-                setCookieForService(toggleSwitchesExternal[i])
+                toggleSwitches[i].checked = true
+                setCookieForSettings(toggleSwitches[i].id,toggleSwitches[i].checked)
             }
         }
-
-        toggleAllSwitch.checked = allTogglesChecked()
-        changeProviderTitle()
+        toggleAllSwitch.checked = allTogglesExternalServiceChecked()
     }
-    const initializeToggleStateTracking = function () {
-        for (let i = 0; i < toggleSwitchesTracking.length; ++i) {
-            initializeEventListenerForTracking(i)
-
-            setListenerForTracking(toggleSwitchesTracking[i])
-
-            if (isCookieSetForTracking(toggleSwitchesTracking[i].id)) {
-                toggleSwitchesTracking[i].checked = true
-            }
 
-            if (
-                !isCookieExistForTracking(toggleSwitchesTracking[i].id) &&
-                toggleSwitchesTracking[i].getAttribute('initial') == 'checked'
-            ) {
-                toggleSwitchesTracking[i].checked = true
-                setCookieForTracking(toggleSwitchesTracking[i])
-            }
-        }
+    const isCookieSetForSettings = function (externalService) {
+        return settingsCookie.isSettingsCookieAccepted(externalService)
     }
-    const initializeEventListenerForService = function (serviceId) {
-        listen(
-            'hr:externalService-activate-' + toggleSwitchesExternal[serviceId].id,
-            function () {
-                toggleSwitchesExternal[serviceId].checked = true
-            },
-            document
-        )
+
+    const isCookieExistForSettings = function (externalService) {
+        return settingsCookie.isSettingsCookieExistent(externalService)
     }
-    const initializeEventListenerForTracking = function (serviceId) {
+
+    const initializeAllToggleEventListeners = function (serviceId) {
         listen(
-            'hr:trackingService-activate-' + toggleSwitchesTracking[serviceId].id,
+            'hr:externalService-activate-' + toggleSwitches[serviceId].id,
             function () {
-                toggleSwitchesTracking[serviceId].checked = true
+                toggleSwitches[serviceId].checked = true
             },
             document
         )
     }
-    const setListenerForService = function (element) {
+
+    const setAllToggleEventListeners = function (element) {
         listen(
             'change',
             function () {
-                setCookieForService(element)
-                toggleAllSwitch.checked = allTogglesChecked()
+                setCookieForSettings(element.id, element.checked)
+                toggleAllSwitch.checked = allTogglesExternalServiceChecked()
                 changeProviderTitle()
             },
             element
         )
     }
-    const setListenerForTracking = function (element) {
-        listen(
-            'change',
-            function () {
-                setCookieForTracking(element)
-            },
-            element
-        )
-    }
-    const setCookieForService = function (element) {
-        datapolicyCookie.setCookieForExternalService(element.id, element.checked)
-        if (element.checked) {
-            fireEvent('hr:externalService-activate-' + element.id)
-        } else {
-            console.log('fireEvent: hr:externalService-deactivate-' + element.id)
-            fireEvent('hr:externalService-deactivate-' + element.id)
-        }
-    }
-    const setCookieForTracking = function (element) {
-        trackingCookie.setCookieForTracking(element.id, element.checked)
-        if (element.checked) {
-            fireEvent('hr:trackingService-activate-' + element.id)
-        } else {
-            fireEvent('hr:trackingService-deactivate-' + element.id)
-        }
-    }
-    const toggleAll = function () {
-        console.log('Toggle All' + toggleAllSwitch.checked)
 
+    const toggleAll = function () {
         for (let i = 0; i < toggleSwitchesExternal.length; ++i) {
             if (toggleSwitchesExternal[i].checked != toggleAllSwitch.checked) {
                 toggleSwitchesExternal[i].checked = toggleAllSwitch.checked
-                setCookieForService(toggleSwitchesExternal[i])
+                setCookieForSettings(toggleSwitchesExternal[i].id, toggleSwitchesExternal[i].checked)
             }
         }
-
         changeProviderTitle()
     }
-    const allTogglesChecked = function () {
-        let allChecked
 
+    const allTogglesExternalServiceChecked = function () {
+        let allChecked
         for (let i = 0; i < toggleSwitchesExternal.length; ++i) {
             if (toggleSwitchesExternal[i].checked) {
                 allChecked = true
             } else {
                 allChecked = false
-
                 break
             }
         }
         return allChecked
     }
+
     const changeProviderTitle = function () {
         if (toggleAllSwitch.checked == true) {
             providerTitle.textContent = 'Alle Anbieter deaktivieren'
@@ -221,35 +180,74 @@ const DataPolicySettings = function (context) {
             providerTitle.textContent = 'Alle Anbieter aktivieren'
         }
     }
-    const isCookieSetForService = function (externalService) {
-        return datapolicyCookie.isDatapolicyAccepted(externalService)
-    }
-    const isCookieSetForTracking = function (trackingService) {
-        return trackingCookie.isTrackingAccepted(trackingService)
-    }
-    const isCookieExistForService = function (externalService) {
-        return datapolicyCookie.isDatapolicyExistent(externalService)
-    }
-    const isCookieExistForTracking = function (trackingService) {
-        return trackingCookie.isTrackingCookieExistent(trackingService)
-    }
+
     const initializeEventListeners = function () {
         listen('change', toggleAll, toggleAllSwitch)
         listen("show", onDialogShow, container)
         listen("hide", onDialogHide, container)
     }
-    // steuert die Darstellung des Buttons für die hs-App ///
-    showSettingsButton()
-    //// 1. Toggle States aller Switches setzen ////
-    ////    Cookies setzen usw.                 ////
-    initializeToggleStateExternal()
 
-    initializeToggleStateTracking()
+    const readAppSettingsButtonCookie = function () {
+        /* Das Cookie 'appSettings' wird in der App-Logik für die Webview erzeugt. Hier nur ausgelesen, um die Option für den Settings-Button abzufragen */
+        appSettingsCookie = getJSONCookie('appSettings') || {}
+    }
 
-    //// 2. Event Listener initialisieren ////
-    initializeEventListeners()
+    //Für die hs-App wird der Button ein und ausgeblendet
+    const showSettingsButton = function () {
+        let settingsButton = document.getElementById('globalSettingsButton')
+        if (isWebview) {
+            readAppSettingsButtonCookie()
+            if (appSettingsCookie['hidePrivacySettingsButton'] === true) {
+                settingsButton.style.display = 'none'
+            } else {
+                settingsButton.style.display = 'inline-flex'
+            }
+        } else {
+            settingsButton.style.display = 'inline-flex'
+        }
+    }
 
+    const onDialogShow = function (event) {
+        bodyElement.classList.add('optionOpen')
+        const opener = event.detail == null && event.detail.target.closest('[data-a11y-dialog-show]') ? event.detail.target.closest('[data-a11y-dialog-show]') : null
+        const pianoTracking = null != opener && undefined !== opener.dataset.pianoTracking ? JSON.parse(opener.dataset.pianoTracking) : {label:"Datenschutzerklärung"}
+        if(undefined !== pianoTracking.secondLevelId){
+            console.log(pianoTracking)
+            uxAction('Einstellungsdialog geöffnet - ' + pianoTracking.label, pianoTracking.secondLevelId)
+        }else{
+            console.log(pianoTracking)
+            uxAction('Einstellungsdialog geöffnet - ' + pianoTracking.label)
+        }
+    }
+
+    const onDialogHide = function () {
+        console.log("Hide")
+        bodyElement.classList.remove('optionOpen')
+    }
+    const shouldDialogBeOpendOnLoad = function () {
+        const urlParam = getUrlVars()['openDialog']
+        if (typeof urlParam !== 'undefined' && urlParam === 'true') {
+            dialog.show()
+        }
+    }
+    const getUrlVars = function () {
+        let vars = {}
+        const parts = window.location.href.replace(
+            /[?&]+([^=&]+)=([^&]*)/gi,
+            function (m, key, value) {
+                vars[key] = value
+            }
+        )
+        return vars
+    }
+   
+    // steuert die Darstellung des Buttons für die hs-App ///
+    showSettingsButton()
+    // Überprüfen ob die alten Cookies vorhanden sind
+    checkForExistingCookies()
+    initializeEventListeners()
     shouldDialogBeOpendOnLoad()
+   
 }
 
 export default DataPolicySettings

package/src/stories/views/components/externalService/datapolicyCookie.subfeature.js

@@ -34,7 +34,7 @@ const DataPolicyCookie = function () {
     return {
         setCookieForExternalService: setCookieForExternalService,
         isDatapolicyAccepted: isDatapolicyAccepted,
-        isDatapolicyExistent: isDatapolicyExistent,
+        isDatapolicyExistent: isDatapolicyExistent
     }
 }
 

package/src/stories/views/components/externalService/globalSettingsCookie.subfeature.js

@@ -0,0 +1,41 @@
+import { getJSONCookie, setJSONCookie } from 'hrQuery'
+
+const GlobalSettingsCookie = function () {
+    const settingsCookieLifetime = 1000 * 60 * 60 * 24 * 365 * 10 /* 10 years */
+    let cookie = {}
+
+    const setCookieForOptions = function (option, state) {
+        if (state == null) {
+            state = true
+        }
+        console.log('Schreibe Settings-Cookie: ' + option + ': ' + state)
+        readSettingsCookie()
+        cookie[option] = state
+        writeSettingsCookie()
+    }
+
+    const isSettingsCookieAccepted = function (externalService) {
+        readSettingsCookie()
+        return cookie[externalService] === true
+    }
+
+    const writeSettingsCookie = function () {
+        setJSONCookie('hrSettings', cookie, settingsCookieLifetime)
+    }
+
+    const readSettingsCookie = function () {
+        cookie = getJSONCookie('hrSettings') || {}
+    }
+
+    const isSettingsCookieExistent = function (option) {
+        readSettingsCookie()
+        return cookie.hasOwnProperty(option)
+    }
+    return {
+        setCookieForOptions: setCookieForOptions,
+        isSettingsCookieExistent: isSettingsCookieExistent,
+        isSettingsCookieAccepted: isSettingsCookieAccepted
+    }
+}
+
+export default GlobalSettingsCookie