hr-design-system-handlebars 1.82.8 → 1.82.10

package/dist/views_static/components/teaser/components/teaser_av_consumption.hbs

@@ -3,7 +3,7 @@
           {{#with this.toModel.videoElement}}
                {{~> components/mediaplayer/media_player _uiTestHook="ui-test-video-ondemand-player" _isUsedInTeaser=true _addClassImg=../../_addClassImg~}}
                {{#with ../../this}}
-                    {{~> components/teaser/components/teaser_media_player _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _aspectRatio=_aspectRatio _noDelay=this.dontLazyload}}
+                    {{~> components/teaser/components/teaser_media_player _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _aspectRatio=_aspectRatio _addClassImg=_addClassImg _noDelay=this.dontLazyload}}
                {{/with}}
                {{#if ../../_isMobile1to1~}}  
                     {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}
@@ -14,7 +14,7 @@
           {{#with this.toModel.audioElementForVideoView}}
                {{~> components/mediaplayer/media_player _uiTestHook="ui-test-audio-ondemand-player" _isUsedInTeaser=true _addClassImg=../../_addClassImg~}}                  
                {{#with ../../this}}
-                    {{~> components/teaser/components/teaser_media_player _mediaButtonIcon="audio_button" _mediaButtonLabel="Audio" _aspectRatio=_aspectRatio _noDelay=this.dontLazyload}}
+                    {{~> components/teaser/components/teaser_media_player _mediaButtonIcon="audio_button" _mediaButtonLabel="Audio" _aspectRatio=_aspectRatio _addClassImg=_addClassImg _noDelay=this.dontLazyload}}
                {{/with}}
                {{#if ../../_isMobile1to1~}}  
                     {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}
@@ -25,7 +25,7 @@
           {{#with this.toModel.audioElementForVideoView}}
                {{~> components/mediaplayer/media_player _uiTestHook="ui-test-audio-ondemand-player" _isUsedInTeaser=true _addClassImg=../../_addClassImg~}}             
                {{#with ../../this}}
-                    {{~> components/teaser/components/teaser_media_player _mediaButtonIcon="audio_button" _mediaButtonLabel="Podcast" _aspectRatio=_aspectRatio _noDelay=this.dontLazyload}}
+                    {{~> components/teaser/components/teaser_media_player _mediaButtonIcon="audio_button" _mediaButtonLabel="Podcast" _aspectRatio=_aspectRatio _addClassImg=_addClassImg _noDelay=this.dontLazyload}}
                {{/with}}
                {{#if ../../_isMobile1to1~}}  
                     {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}
@@ -36,7 +36,7 @@
           {{#with this.toModel.audioLivestreamElementForVideoView}}
                {{~> components/mediaplayer/media_player _uiTestHook="ui-test-audio-livestream-player" _isUsedInTeaser=true _addClassImg=../../_addClassImg~}}             
                {{#with ../../this}}
-                    {{~> components/teaser/components/teaser_media_player _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream=true _aspectRatio=_aspectRatio _noDelay=this.dontLazyload}}
+                    {{~> components/teaser/components/teaser_media_player _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream=true _aspectRatio=_aspectRatio _addClassImg=_addClassImg _noDelay=this.dontLazyload}}
                {{/with}}
                {{#if ../../_isMobile1to1~}}  
                     {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}
@@ -47,7 +47,7 @@
           {{#with this.toModel.videoLivestreamElement}}
                {{~> components/mediaplayer/media_player _uiTestHook="ui-test-video-livestream-player" _isUsedInTeaser=true _addClassImg=../../_addClassImg~}}             
                {{#with ../../this}}
-                    {{~> components/teaser/components/teaser_media_player _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream=true _aspectRatio=_aspectRatio _noDelay=this.dontLazyload}}
+                    {{~> components/teaser/components/teaser_media_player _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream=true _aspectRatio=_aspectRatio _addClassImg=_addClassImg _noDelay=this.dontLazyload}}
                {{/with}}
                {{#if ../../_isMobile1to1~}}  
                     {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}

package/package.json

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

package/src/stories/basics/iconography/page_icon_404_data.js

@@ -2,12 +2,12 @@ const images = require.context('/src/assets/icons/404/svgmap', true);
 
 let imageList = {}
 let file
-let svgList = {}
+let svgList404 = {}
 imageList = images.keys().map(image => images(image));
 
 for(let i=0; i < imageList.length; i++){
     file = imageList[i].replace(/^.*[\\/]/, '').slice(0,-4)
-    svgList[file] = file
+    svgList404[file] = file
 }
 
-export default svgList;
+export default svgList404;

package/src/stories/basics/iconography/page_icon_epg_data.js

@@ -2,12 +2,12 @@ const images = require.context('/src/assets/icons/epg/svgmap', true);
 
 let imageList = {}
 let file
-let svgList = {}
+let svgListEpg = {}
 imageList = images.keys().map(image => images(image));
 
 for(let i=0; i < imageList.length; i++){
     file = imageList[i].replace(/^.*[\\/]/, '').slice(0,-4)
-    svgList[file] = file
+    svgListEpg[file] = file
 }
 
-export default svgList;
+export default svgListEpg;

package/src/stories/basics/iconography/page_icon_public_transport_data.js

@@ -2,12 +2,12 @@ const images = require.context('/src/assets/icons/publictransport/svgmap', true)
 
 let imageList = {}
 let file
-let svgList = {}
+let svgListPublicTransport = {}
 imageList = images.keys().map(image => images(image));
 
 for(let i=0; i < imageList.length; i++){
     file = imageList[i].replace(/^.*[\\/]/, '').slice(0,-4)
-    svgList[file] = file
+    svgListPublicTransport[file] = file
 }
 
-export default svgList;
+export default svgListPublicTransport;

package/src/stories/basics/iconography/page_icon_traffic_data.js

@@ -2,12 +2,12 @@ const images = require.context('/src/assets/icons/traffic/svgmap', true);
 
 let imageList = {}
 let file
-let svgList = {}
+let svgListTraffic = {}
 imageList = images.keys().map(image => images(image));
 
 for(let i=0; i < imageList.length; i++){
     file = imageList[i].replace(/^.*[\\/]/, '').slice(0,-4)
-    svgList[file] = file
+    svgListTraffic[file] = file
 }
 
-export default svgList;
+export default svgListTraffic;

package/src/stories/basics/iconography/page_icon_weather_data.js

@@ -2,12 +2,12 @@ const images = require.context('/src/assets/icons/weather/svgmap', true);
 
 let imageList = {}
 let file
-let svgList = {}
+let svgListWeather = {}
 imageList = images.keys().map(image => images(image));
 
 for(let i=0; i < imageList.length; i++){
     file = imageList[i].replace(/^.*[\\/]/, '').slice(0,-4)
-    svgList[file] = file
+    svgListWeather[file] = file
 }
 
-export default svgList;
+export default svgListWeather;

package/src/stories/basics/iconography/page_icons.mdx

@@ -5,7 +5,7 @@ import svgList404 from './page_icon_404_data.js'
 import svgListWeather from './page_icon_weather_data.js'
 import svgListPublicTransport from './page_icon_public_transport_data.js'
 import svgListTraffic from './page_icon_traffic_data.js'
-import svgListEPG from './page_icon_epg_data.js'
+import svgListEpg from './page_icon_epg_data.js'
 
 <Meta title="Grundlegendes/Iconographie/Iconwelt" />
 
@@ -52,7 +52,7 @@ aber auch die anderen noch aus dem alten Delivery stammenden dargestellt werden.
             <div style={{backgroundColor:'#fafafa', border: '1px solid #cacaca', display: 'inline-flex', alignItems: 'center', justifyContent: 'center'}}>
                 <div style={{ width: '120px', height: '150px', margin: '5px', textAlign:'center', justifyContent: 'center'}}>
                 <svg className="svg-item" width="120px" height="100px"> 
-                    <use xlinkHref={'./icons/icons/svgmap.min.svg#'+token[0]}></use>
+                    <use xlinkHref={'./icons/404/svgmap.min.svg#'+token[0]}></use>
                 </svg>
                 <span style={{textAlign:'center', fontSize:'12px', display: 'block', backgroundColor:'#000', color: '#fff', marginTop: '10px'}}>{token[0]}</span>
                 </div>
@@ -67,7 +67,7 @@ aber auch die anderen noch aus dem alten Delivery stammenden dargestellt werden.
             <div style={{backgroundColor:'#fafafa', border: '1px solid #cacaca', display: 'inline-flex', alignItems: 'center', justifyContent: 'center'}}>
                 <div style={{ width: '120px', height: '150px', margin: '5px', textAlign:'center', justifyContent: 'center'}}>
                 <svg className="svg-item" width="120px" height="100px"> 
-                    <use xlinkHref={'./icons/icons/svgmap.min.svg#'+token[0]}></use>
+                    <use xlinkHref={'./icons/weather/svgmap.min.svg#'+token[0]}></use>
                 </svg>
                 <span style={{textAlign:'center', fontSize:'12px', display: 'block', backgroundColor:'#000', color: '#fff', marginTop: '10px'}}>{token[0]}</span>
                 </div>
@@ -82,7 +82,7 @@ aber auch die anderen noch aus dem alten Delivery stammenden dargestellt werden.
             <div style={{backgroundColor:'#fafafa', border: '1px solid #cacaca', display: 'inline-flex', alignItems: 'center', justifyContent: 'center'}}>
                 <div style={{ width: '120px', height: '150px', margin: '5px', textAlign:'center', justifyContent: 'center'}}>
                 <svg className="svg-item" width="120px" height="100px"> 
-                    <use xlinkHref={'./icons/icons/svgmap.min.svg#'+token[0]}></use>
+                    <use xlinkHref={'./icons/publictransport/svgmap.min.svg#'+token[0]}></use>
                 </svg>
                 <span style={{textAlign:'center', fontSize:'12px', display: 'block', backgroundColor:'#000', color: '#fff', marginTop: '10px'}}>{token[0]}</span>
                 </div>
@@ -97,7 +97,7 @@ aber auch die anderen noch aus dem alten Delivery stammenden dargestellt werden.
             <div style={{backgroundColor:'#fafafa', border: '1px solid #cacaca', display: 'inline-flex', alignItems: 'center', justifyContent: 'center'}}>
                 <div style={{ width: '120px', height: '150px', margin: '5px', textAlign:'center', justifyContent: 'center'}}>
                 <svg className="svg-item" width="120px" height="100px"> 
-                    <use xlinkHref={'./icons/icons/svgmap.min.svg#'+token[0]}></use>
+                    <use xlinkHref={'./icons/traffic/svgmap.min.svg#'+token[0]}></use>
                 </svg>
                 <span style={{textAlign:'center', fontSize:'12px', display: 'block', backgroundColor:'#000', color: '#fff', marginTop: '10px'}}>{token[0]}</span>
                 </div>
@@ -107,12 +107,12 @@ aber auch die anderen noch aus dem alten Delivery stammenden dargestellt werden.
 
 ## Icons für EPG
 
-{Object.entries(svgListEPG).map((token, key) => {
+{Object.entries(svgListEpg).map((token, key) => {
         return (
             <div style={{backgroundColor:'#fafafa', border: '1px solid #cacaca', display: 'inline-flex', alignItems: 'center', justifyContent: 'center'}}>
                 <div style={{ width: '120px', height: '150px', margin: '5px', textAlign:'center', justifyContent: 'center'}}>
                 <svg className="svg-item" width="120px" height="100px"> 
-                    <use xlinkHref={'./icons/icons/svgmap.min.svg#'+token[0]}></use>
+                    <use xlinkHref={'./icons/epg/svgmap.min.svg#'+token[0]}></use>
                 </svg>
                 <span style={{textAlign:'center', fontSize:'12px', display: 'block', backgroundColor:'#000', color: '#fff', marginTop: '10px'}}>{token[0]}</span>
                 </div>

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

@@ -1,6 +1,4 @@
 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'
 
@@ -12,16 +10,10 @@ const DataPolicySettings = function (context) {
         { element: rootElement } = context,
         container = hr$('#datapolicy-settings-dialog',document)[0],
         dialog = new A11yDialog(container),
-        settingsButtons = hr$('.js-data-policy-settings-button', document),
-        overlay = hr$('.js-data-policy-settings-overlay', rootElement)[0],
-        closeButton = hr$('.js-data-policy-settings-close-button', rootElement)[0],
         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]
 
@@ -192,18 +184,39 @@ const DataPolicySettings = function (context) {
         appSettingsCookie = getJSONCookie('appSettings') || {}
     }
 
-    //Für die hs-App wird der Button ein und ausgeblendet
+    //Für die hs-App wird der Globale Einstellungsbutton ein- und ausgeblendet, 
+    //sowie der Einstellungsbutton für einen einzelnen externen Dienst, sobald dieser einmalig oder dauerhaft aktiviert wurde
     const showSettingsButton = function () {
         let settingsButton = document.getElementById('globalSettingsButton')
         if (isWebview) {
             readAppSettingsButtonCookie()
             if (appSettingsCookie['hidePrivacySettingsButton'] === true) {
-                settingsButton.style.display = 'none'
+                settingsButton.classList.add('hidden')
+                document.querySelectorAll('.js-content-settings-button').forEach(function(jscontentSettingsButton) {
+                   
+                    jscontentSettingsButton.classList.add('hidden')
+              
+                });
+                document.querySelectorAll('.js-settings-button-inner').forEach(function(jsSettingsButton) {
+                    
+                    jsSettingsButton.classList.add('hidden')
+                    
+                });
             } else {
-                settingsButton.style.display = 'inline-flex'
+                settingsButton.classList.remove('hidden')
+                document.querySelectorAll('.js-content-settings-button').forEach(function(jscontentSettingsButton) {
+                    if(jscontentSettingsButton.classList.contains('hidden')) {
+                        jscontentSettingsButton.classList.remove('hidden')
+                    }
+                });
+                document.querySelectorAll('.js-settings-button-inner').forEach(function(jsSettingsButton) {
+                    if(jscontentSettingsButton.classList.contains('hidden')) {
+                    jsSettingsButton.classList.remove('hidden')
+                    }
+                });
             }
         } else {
-            settingsButton.style.display = 'inline-flex'
+          
         }
     }
 

package/src/stories/views/components/externalService/components/external_service_data_policy.hbs

@@ -13,7 +13,7 @@
         <div class="float-right pt-4">
             {{#with this}}
                 <div class="inline-flex">
-                 {{~> components/externalService/components/external_service_settings_button ~}}
+                 {{~> components/externalService/components/external_service_settings_button _css="js-settings-inner-button"~}}
                 {{#*inline "htmlProperties"}}
                     data-piano-tracking='{"label":"DSGVO-Overlay"}'
                     data-a11y-dialog-show="datapolicy-settings-dialog"

package/src/stories/views/components/externalService/components/external_service_settings_button.hbs

@@ -1,4 +1,4 @@
-{{#> components/button/button _size="md" _variant="tertiary" _css="" _type="button"}}
+{{#> components/button/button _size="md" _variant="tertiary" _css=_css _type="button"}}
             {{> components/button/components/button_icon _icon="settings" _iconmap="icons"}}
             {{> components/button/components/button_label _label="Einstellungen"}}
 {{/components/button/button}}

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

@@ -0,0 +1,157 @@
+const CreateWahlGemeindeErgebnis = function (embedCode,rootElement) {
+    let eCode = embedCode,
+        cleanUrl,
+        wahlKreisVersionJsonUrl,
+        wahlkreis,
+        wahlid,
+        jsonResponse,
+        iFrameElement,
+        iframeHeight = 300
+
+    const createErgebnis = function() {
+        extractDataFromEmbedCode()
+        initMessageEventListener()
+        fetchJsonData()
+    } 
+    const cleanVariables = function (variable) {
+        while (variable.charAt(0) === '&') {
+            variable = variable.substring(1)
+        }
+        return variable
+    }
+    const extractDataFromEmbedCode = function () {
+        const parts = eCode.split('*')
+        if (parts.length === 4) {
+            cleanUrl = cleanVariables(decodeURIComponent(parts[0].trim()))
+            wahlkreis = cleanVariables(decodeURIComponent(parts[1].trim()))
+            wahlid = cleanVariables(decodeURIComponent(parts[2].trim()))
+            wahlKreisVersionJsonUrl = cleanVariables(decodeURIComponent(parts[3].trim()))
+        }
+    }
+    const loadIframe = function (version, url, wahlkreis) {
+        if (version) {
+            let iframeUrl = url.replace('{version}', version)
+            let iframe = document.createElement('iframe')
+            iframe.className = ''
+            iframe.style.border = 'none'
+            iframe.style.height = iframeHeight + 'px'
+            iframe.style.width = '100%'
+            iframe.setAttribute('webkitallowfullscreen', '')
+            iframe.setAttribute('mozallowfullscreen', '')
+            iframe.setAttribute('allowfullscreen', '')
+            iframe.setAttribute('scrolling', 'no')
+            iframe.setAttribute('frameborder', '0')
+            iframe.src = iframeUrl
+            iframe.id = 'wahl-gemeinde-ergebnis-' + wahlkreis
+            rootElement.innerHTML = ''
+            rootElement.insertBefore(iframe, null)
+            iFrameElement = document.getElementById('wahl-gemeinde-ergebnis-' + wahlkreis)
+        } else {
+            loadNoDataDiv('Es liegen zur Zeit noch keine Ergebnisse vor', 5)
+        }
+    }
+    const loadNoDataDiv = function (text, timeout) {
+        let div = document.createElement('div')
+        div.className =
+            'p-5 c-externalService__wahl-gemeinde-ergebnis-no-result rounded-tl-hr rounded-br-hr bg-highlight-1'
+        div.innerHTML =
+            '<div class="text-2xl text-clusterTeaserHeadline font-titleCluster mb-2">' +
+            text +
+            '</div>' +
+            '<div class="flex flex-row" >' +
+            '  <div class="">' +
+            '    <span>Dieser Inhalt wird automatisch aktualisiert in</span>' +
+            '    <span data-minutes>' +
+            timeout +
+            '    </span>' +
+            '    <span>Min</span>' +
+            '    <span data-seconds>0</span>' +
+            '    <span>Sek</span>' +
+            '  </div>' +
+            '</div>'
+        rootElement.innerHTML = ''
+        rootElement.insertBefore(div, null)
+        countdownMinutes(timeout, fetchJsonData)
+    }
+    const resizeIframe = function (newheight) {
+        if (newheight !== iframeHeight) {
+            iFrameElement.style.height = newheight + 'px'
+            iframeHeight = newheight
+        }
+    }
+    const processMessage = function (evt) {
+        if (evt.origin !== 'https://www.tagesschau.de') {
+            console.log('message', evt.origin + ' ist nicht vertrauenswürdig')
+        } else {
+            resizeIframe(evt.data)
+        }
+    }
+    const initMessageEventListener = function () {
+        if (window.addEventListener) {
+            // For standards-compliant web browsers
+            window.addEventListener('message', processMessage, false)
+        } else {
+            window.attachEvent('onmessage', processMessage)
+        }
+    }
+    const fetchJsonData = function () {
+        fetch(wahlKreisVersionJsonUrl, {
+            method: 'GET',
+            headers: {
+                Accept: 'application/json',
+            },
+        })
+            .then((response) => response.json())
+            .then((jsonData) =>
+                loadIframe(
+                    jsonData.hasOwnProperty(wahlkreis) && jsonData[wahlkreis].v
+                        ? jsonData[wahlkreis].v
+                        : null,
+                    cleanUrl,
+                    wahlkreis,
+                ),
+            )
+            .catch(function () {
+                loadNoDataDiv('Es liegen zur Zeit noch keine Ergebnisse vor', 5)
+                console.log('No JSON Data Loaded')
+            })
+    }
+
+    function countdownMinutes(minutesToCountdown, callbackFunction) {
+        const second = 1000,
+            minute = second * 60,
+            hour = minute * 60,
+            day = hour * 24,
+            minuteElement = document.querySelector('[data-minutes]'),
+            secondElement = document.querySelector('[data-seconds]')
+
+        function AddMinutesToDate(date, minutes) {
+            return new Date(date.getTime() + minutes * 60000)
+        }
+
+        let countDown = AddMinutesToDate(new Date(), minutesToCountdown),
+            x = setInterval(function () {
+                let now = new Date().getTime(),
+                    distance = countDown - now
+
+                if (minuteElement != null) {
+                    minuteElement.innerText = Math.floor((distance % hour) / minute)
+                }
+
+                if (secondElement != null) {
+                    secondElement.innerText = Math.floor((distance % minute) / second)
+                }
+
+                if (distance < 1000) {
+                    callbackFunction()
+                    clearInterval(x)
+                }
+            }, second)
+    }
+    return {
+        createErgebnis: createErgebnis
+    }
+
+}
+
+export default CreateWahlGemeindeErgebnis