npm - hr-design-system-handlebars - Versions diffs - 1.70.4 → 1.70.6 - Mend

hr-design-system-handlebars 1.70.4 → 1.70.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,3 +1,27 @@
+# v1.70.6 (Wed Jun 12 2024)
+#### 🐛 Bug Fix
+- ✨ h-Auszeichnungen der Label überarbeiten [#943](https://github.com/mumprod/hr-design-system-handlebars/pull/943) ([@vascoeduardo](https://github.com/vascoeduardo))
+#### Authors: 1
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+---
+# v1.70.5 (Wed Jun 12 2024)
+#### 🐛 Bug Fix
+- Europawahl: Externen Dienst für Ergebnisse einrichten [#942](https://github.com/mumprod/hr-design-system-handlebars/pull/942) ([@vascoeduardo](https://github.com/vascoeduardo))
+#### Authors: 1
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+---
 # v1.70.4 (Wed Jun 12 2024)
 #### 🐛 Bug Fix

package/dist/assets/index.css CHANGED Viewed

@@ -3359,7 +3359,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1718191247598;
+  counter-reset: cnt1718204121860;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3738,7 +3738,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1718191247598 1;
+  counter-increment: cnt1718204121860 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3754,7 +3754,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1718191247598);
+  content: counter(cnt1718204121860);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

package/dist/assets/js/components/externalService/externalServiceDs.feature.js CHANGED Viewed

@@ -102,7 +102,10 @@ const ExternalService = function (context) {
                         break
                     case 'wahlomat':
                         createWahlOMatEmbed()
-                        break
+                        break
+                    case 'wahl-gemeinde-ergebnis':
+                        createWahlGemeindeErgebnis()
+                        break
                     default:
                         console.error('No JS Config for external service ' + id)
                         break
@@ -112,7 +115,156 @@ const ExternalService = function (context) {
                 loadIframe() //für alle Dienste die nicht der DSGVO Datapolicy unterliegen
         }
     }
+    const createWahlGemeindeErgebnis = function () {
+        let embedCode = options.embedCode,
+            cleanUrl,
+            wahlKreisVersionJsonUrl,
+            wahlkreis,
+            wahlid,
+            jsonResponse,
+            iFrameElement,
+            iframeHeight = 300
+        const cleanVariables = function (variable) {
+            while (variable.charAt(0) === '&') {
+                variable = variable.substring(1)
+            }
+            return variable
+        }
+        const extractDataFromEmbedCode = function () {
+            const parts = embedCode.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)
+        }
+        extractDataFromEmbedCode()
+        initMessageEventListener()
+        fetchJsonData()
+    }
     const createWahlOMatEmbed = function () {
         const divTag = document.createElement('div')

package/dist/views/components/page/base/page_header.hbs CHANGED Viewed

@@ -1,16 +1,15 @@
 <header class="mt-6 sm480:mt-8">
+    {{#with this.label}}
+        {{#> components/label/label_group _css="mb-2"}}
+            {{> components/label/label _type=this.type _text=(loca this.loca)}}
+        {{/components/label/label_group}}
+    {{/with}}
     <h2>
-        {{#if this.label }}
-            {{#with this.label}}
-                {{#> components/label/label_group _css="mb-2"}}
-                    {{> components/label/label _type=this.type _text=(loca this.loca)}}
-                {{/components/label/label_group}}
-            {{/with}}
-        {{else}}
+        {{#unless this.label }}
             {{~#if topline}}
                 <span class="block mb-2 text-base sm480:text-xl font-heading">{{this.topline}}</span>
             {{/if~}}
-        {{/if~}}
+        {{/unless~}}
         <span class="text-3xl font-headingSerif sm480:text-4xl">{{this.title}}</span>
     </h2>
 </header>

package/dist/views_static/components/page/base/page_header.hbs CHANGED Viewed

@@ -1,16 +1,15 @@
 <header class="mt-6 sm480:mt-8">
+    {{#with this.label}}
+        {{#> components/label/label_group _css="mb-2"}}
+            {{> components/label/label _type=this.type _text=(loca this.loca)}}
+        {{/components/label/label_group}}
+    {{/with}}
     <h2>
-        {{#if this.label }}
-            {{#with this.label}}
-                {{#> components/label/label_group _css="mb-2"}}
-                    {{> components/label/label _type=this.type _text=(loca this.loca)}}
-                {{/components/label/label_group}}
-            {{/with}}
-        {{else}}
+        {{#unless this.label }}
             {{~#if topline}}
                 <span class="block mb-2 text-base sm480:text-xl font-heading">{{this.topline}}</span>
             {{/if~}}
-        {{/if~}}
+        {{/unless~}}
         <span class="text-3xl font-headingSerif sm480:text-4xl">{{this.title}}</span>
     </h2>
 </header>

package/package.json CHANGED Viewed

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

package/src/assets/fixtures/content/copytext/copytext_externalservice.json CHANGED Viewed

@@ -4,6 +4,21 @@
             "isHeadline": true,
             "text": "Copytext mit externen Diensten"
         },
+        {
+            "isHeadline": true,
+            "text": "Wahl Gemeinde Ergebnis"
+        },
+        {
+            "paragraphBoxItem": {
+                "isExternalService": true,
+                "toModel": {
+                    "externalService": {
+                        "@->jsoninclude": "external_service/external_service.inc.json",
+                        "@->contentpath": "Wahl_Gemeinde_Ergebnis"
+                    }
+                }
+            }
+        },
         {
             "isHeadline": true,
             "text": "360Grad"

package/src/assets/fixtures/external_service/external_service.inc.json CHANGED Viewed

@@ -245,5 +245,20 @@
         "setResponsiveIframe": false,
         "setTimedReloadIframe": false,
         "setTimeForReload": ""
+    },
+    "Wahl_Gemeinde_Ergebnis": {
+        "externalServiceConfig": {
+            "makeConfigurable": false,
+            "embedAsIFrame": false,
+            "externalServiceId": "wahl-gemeinde-ergebnis",
+            "externalServiceEmbedType": "js",
+            "externalServiceName": "wahl-gemeinde-ergebnis"
+        },
+        "serviceUrl": "https://www.tagesschau.de/wahl/archiv/2024-06-09-EP-DE/charts/wahlkreis-detail/G06412000-{version}.shtml?externalEmbed*G06412000*&2024-06-09-EP-DE*&https%3A%2F%2Fwww.hessenschau.de%2Fpolitik%2Flandtagswahl%2Fkandidatencheck%2Fwk-versions.json",
+        "fixedHeight": "",
+        "aspectRatio": "",
+        "setResponsiveIframe": false,
+        "setTimedReloadIframe": false,
+        "setTimeForReload": ""
     }
 }

package/src/stories/views/components/content/copytext/fixtures/copytext_externalservice.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit externen Diensten"},{"isHeadline":true,"text":"360Grad"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":false,"embedAsIFrame":true,"externalServiceId":"360grad","externalServiceEmbedType":"iFrame","externalServiceName":"360 Grad"},"serviceUrl":"https://static.hr.de/hessenschau/360/tour-altstadt/360Tour-altstadt-final1.html","aspectRatio":"100","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"ARD-Mediathek (Video)"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"ard_mediathek","externalServiceEmbedType":"iFrame","externalServiceName":"ARD Mediathek (Video)"},"serviceUrl":"https://www.ardmediathek.de/embed/Y3JpZDovL2Z1bmsubmV0LzExNzkwL3ZpZGVvLzE3NzQ2NzU?clientType=hr","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"ARTE Concert 2.0"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"arte_concert_new","externalServiceEmbedType":"iFrame","externalServiceName":"Arte Concert 2.0"},"serviceUrl":"https://www.arte.tv/player/v5/index.php?json_url=https%3A%2F%2Fapi.arte.tv%2Fapi%2Fplayer%2Fv2%2Fconfig%2Fde%2F116593-005-A&lang=de&autoplay=false&mute=0","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Bundesliga Audiostream"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":false,"embedAsIFrame":true,"externalServiceId":"bundesligaAudiostream","externalServiceEmbedType":"iFrame","externalServiceName":"Bundesliga Audiostream"},"serviceUrl":"https://livecenter.sportschau.de/iframe/spielplan-kompakt/co3/md11/////","aspectRatio":"9x16","fixedHeight":"600","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Datawrapper CDN"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"datawrapper_cdn","externalServiceEmbedType":"js","externalServiceName":"Datawrapper (Datengrafik)"},"serviceUrl":"https://datawrapper.dwcdn.net/IC3Xn/1/","fixedHeight":"380","setResponsiveIframe":true,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Esri Karte"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"esri","externalServiceEmbedType":"iFrame","externalServiceName":"Esri (Notfallkarte)"},"serviceUrl":"https://arcg.is/1aW0au0","aspectRatio":"100","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":"","externalServiceCaption":"Notfallkarte"}}}},{"isHeadline":true,"text":"Facebook"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"facebook-post","externalServiceEmbedType":"js","externalServiceName":"Facebook"},"serviceUrl":"https://www.facebook.com/ZooFFM/posts/1926440010874354","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Flourish"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"flourish","externalServiceEmbedType":"iFrame","externalServiceName":"Flourish (Datengrafik)"},"serviceUrl":"https://public.flourish.studio/story/18361/embed","fixedHeight":"550","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Giphy"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"giphy","externalServiceEmbedType":"iFrame","externalServiceName":"Giphy (animiertes GIF)"},"serviceUrl":"https://giphy.com/embed/ONxw4niC96zwk","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Instagram"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"instagram","externalServiceEmbedType":"js","externalServiceName":"Instagram"},"serviceUrl":"https://www.instagram.com/p/CEjxNt8lW4K/","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"X"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"twitter-post","externalServiceEmbedType":"js","externalServiceName":"X"},"serviceUrl":"https://twitter.com/tagesthemen/status/1578122540362465299","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Vimeo"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"vimeo","externalServiceEmbedType":"iFrame","externalServiceName":"Vimeo (Video)"},"serviceUrl":"https://player.vimeo.com/video/438111654","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Youtube"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"youtube","externalServiceEmbedType":"iFrame","externalServiceName":"YouTube (Video)"},"serviceUrl":"https://www.youtube-nocookie.com/embed/LMjXHYHZtrE?rel=0","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Youtube 360°"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"youtube360","externalServiceEmbedType":"iFrame","externalServiceName":"YouTube 360 (360° Video)"},"serviceUrl":"https://www.youtube-nocookie.com/embed/yT1pyf9oXGk","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":"","externalServiceCaption":"Eine Demo der Virtual Reality-Inszenierung '2049: Zeitreise Mobilität'"}}}},{"isHeadline":true,"text":"Statischer Dienst"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":false,"embedAsIFrame":true,"externalServiceId":"staticService","externalServiceEmbedType":"iFrame","externalServiceName":"Statischer Dienst"},"serviceUrl":"https://static.hr.de/hessenschau/btw21/linientool/unternehmensgruendung","fixedHeight":"1000","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Wahlmonitor"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":false,"embedAsIFrame":false,"externalServiceId":"wahlmonitor","externalServiceEmbedType":"js","externalServiceName":"Wahlmonitor"},"serviceUrl":"https://www.tagesschau.de/wahl/monitor-15/4e1_monitor_embed.jsdata-externalembed=true data-electionid=2023-10-08-LT-DE-HE data-ratio=43 data-arrows=1 data-hideLinkContainer=1 data-lra=hr data-tagesschau=1","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Wahlkreiskarte"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":false,"embedAsIFrame":false,"externalServiceId":"wahlkreiskarte","externalServiceEmbedType":"js","externalServiceName":"Wahlkreiskarte"},"serviceUrl":"https://www.tagesschau.de/wahl/karte21/current/4e1_karte_embed.jsdata-electionid=2023-10-08-LT-DE-HE data-y= data-a=K data-k= data-p= data-elements= data-site= data-q=","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Koalitionsrechner"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":false,"embedAsIFrame":true,"externalServiceId":"koalitionsrechner","externalServiceEmbedType":"iFrame","externalServiceName":"Koalitionsrechner"},"serviceUrl":"https://www.tagesschau.de/wahl/koalitionsrechner/2023-10-08-LT-DE-HE-koalitionsrechner_embed.shtml","fixedHeight":"550","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}}],"dataPolicy":{"serviceList":[{"key":"ard_mediathek","value":"ARD Mediathek (Video)"},{"key":"arte_concert","value":"Arte Concert"},{"key":"arte_concert_new","value":"Arte Concert 2.0"},{"key":"datawrapper_cdn","value":"Datawrapper (Datengrafik)"},{"key":"esri","value":"Esri (Notfallkarte)"},{"key":"facebook-post","value":"Facebook"},{"key":"flourish","value":"Flourish (Datengrafik)"},{"key":"giphy","value":"Giphy (animiertes GIF)"},{"key":"instagram","value":"Instagram"},{"key":"twitter-post","value":"Twitter"},{"key":"vimeo","value":"Vimeo (Video)"},{"key":"youtube","value":"YouTube (Video)"},{"key":"youtube360","value":"YouTube 360 (360° Video)"}]}}
1	+ {"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit externen Diensten"},{"isHeadline":true,"text":"Wahl Gemeinde Ergebnis"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":false,"embedAsIFrame":false,"externalServiceId":"wahl-gemeinde-ergebnis","externalServiceEmbedType":"js","externalServiceName":"wahl-gemeinde-ergebnis"},"serviceUrl":"https://www.tagesschau.de/wahl/archiv/2024-06-09-EP-DE/charts/wahlkreis-detail/G06412000-{version}.shtml?externalEmbedG06412000&2024-06-09-EP-DE&https%3A%2F%2Fwww.hessenschau.de%2Fpolitik%2Flandtagswahl%2Fkandidatencheck%2Fwk-versions.json","fixedHeight":"","aspectRatio":"","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"360Grad"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":false,"embedAsIFrame":true,"externalServiceId":"360grad","externalServiceEmbedType":"iFrame","externalServiceName":"360 Grad"},"serviceUrl":"https://static.hr.de/hessenschau/360/tour-altstadt/360Tour-altstadt-final1.html","aspectRatio":"100","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"ARD-Mediathek (Video)"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"ard_mediathek","externalServiceEmbedType":"iFrame","externalServiceName":"ARD Mediathek (Video)"},"serviceUrl":"https://www.ardmediathek.de/embed/Y3JpZDovL2Z1bmsubmV0LzExNzkwL3ZpZGVvLzE3NzQ2NzU?clientType=hr","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"ARTE Concert 2.0"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"arte_concert_new","externalServiceEmbedType":"iFrame","externalServiceName":"Arte Concert 2.0"},"serviceUrl":"https://www.arte.tv/player/v5/index.php?json_url=https%3A%2F%2Fapi.arte.tv%2Fapi%2Fplayer%2Fv2%2Fconfig%2Fde%2F116593-005-A&lang=de&autoplay=false&mute=0","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Bundesliga Audiostream"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":false,"embedAsIFrame":true,"externalServiceId":"bundesligaAudiostream","externalServiceEmbedType":"iFrame","externalServiceName":"Bundesliga Audiostream"},"serviceUrl":"https://livecenter.sportschau.de/iframe/spielplan-kompakt/co3/md11/////","aspectRatio":"9x16","fixedHeight":"600","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Datawrapper CDN"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"datawrapper_cdn","externalServiceEmbedType":"js","externalServiceName":"Datawrapper (Datengrafik)"},"serviceUrl":"https://datawrapper.dwcdn.net/IC3Xn/1/","fixedHeight":"380","setResponsiveIframe":true,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Esri Karte"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"esri","externalServiceEmbedType":"iFrame","externalServiceName":"Esri (Notfallkarte)"},"serviceUrl":"https://arcg.is/1aW0au0","aspectRatio":"100","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":"","externalServiceCaption":"Notfallkarte"}}}},{"isHeadline":true,"text":"Facebook"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"facebook-post","externalServiceEmbedType":"js","externalServiceName":"Facebook"},"serviceUrl":"https://www.facebook.com/ZooFFM/posts/1926440010874354","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Flourish"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"flourish","externalServiceEmbedType":"iFrame","externalServiceName":"Flourish (Datengrafik)"},"serviceUrl":"https://public.flourish.studio/story/18361/embed","fixedHeight":"550","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Giphy"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"giphy","externalServiceEmbedType":"iFrame","externalServiceName":"Giphy (animiertes GIF)"},"serviceUrl":"https://giphy.com/embed/ONxw4niC96zwk","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Instagram"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"instagram","externalServiceEmbedType":"js","externalServiceName":"Instagram"},"serviceUrl":"https://www.instagram.com/p/CEjxNt8lW4K/","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"X"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"twitter-post","externalServiceEmbedType":"js","externalServiceName":"X"},"serviceUrl":"https://twitter.com/tagesthemen/status/1578122540362465299","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Vimeo"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"vimeo","externalServiceEmbedType":"iFrame","externalServiceName":"Vimeo (Video)"},"serviceUrl":"https://player.vimeo.com/video/438111654","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Youtube"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"youtube","externalServiceEmbedType":"iFrame","externalServiceName":"YouTube (Video)"},"serviceUrl":"https://www.youtube-nocookie.com/embed/LMjXHYHZtrE?rel=0","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Youtube 360°"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"youtube360","externalServiceEmbedType":"iFrame","externalServiceName":"YouTube 360 (360° Video)"},"serviceUrl":"https://www.youtube-nocookie.com/embed/yT1pyf9oXGk","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":"","externalServiceCaption":"Eine Demo der Virtual Reality-Inszenierung '2049: Zeitreise Mobilität'"}}}},{"isHeadline":true,"text":"Statischer Dienst"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":false,"embedAsIFrame":true,"externalServiceId":"staticService","externalServiceEmbedType":"iFrame","externalServiceName":"Statischer Dienst"},"serviceUrl":"https://static.hr.de/hessenschau/btw21/linientool/unternehmensgruendung","fixedHeight":"1000","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Wahlmonitor"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":false,"embedAsIFrame":false,"externalServiceId":"wahlmonitor","externalServiceEmbedType":"js","externalServiceName":"Wahlmonitor"},"serviceUrl":"https://www.tagesschau.de/wahl/monitor-15/4e1_monitor_embed.jsdata-externalembed=true data-electionid=2023-10-08-LT-DE-HE data-ratio=43 data-arrows=1 data-hideLinkContainer=1 data-lra=hr data-tagesschau=1","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Wahlkreiskarte"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":false,"embedAsIFrame":false,"externalServiceId":"wahlkreiskarte","externalServiceEmbedType":"js","externalServiceName":"Wahlkreiskarte"},"serviceUrl":"https://www.tagesschau.de/wahl/karte21/current/4e1_karte_embed.js*data-electionid=2023-10-08-LT-DE-HE data-y= data-a=K data-k= data-p= data-elements= data-site= data-q=","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Koalitionsrechner"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":false,"embedAsIFrame":true,"externalServiceId":"koalitionsrechner","externalServiceEmbedType":"iFrame","externalServiceName":"Koalitionsrechner"},"serviceUrl":"https://www.tagesschau.de/wahl/koalitionsrechner/2023-10-08-LT-DE-HE-koalitionsrechner_embed.shtml","fixedHeight":"550","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}}],"dataPolicy":{"serviceList":[{"key":"ard_mediathek","value":"ARD Mediathek (Video)"},{"key":"arte_concert","value":"Arte Concert"},{"key":"arte_concert_new","value":"Arte Concert 2.0"},{"key":"datawrapper_cdn","value":"Datawrapper (Datengrafik)"},{"key":"esri","value":"Esri (Notfallkarte)"},{"key":"facebook-post","value":"Facebook"},{"key":"flourish","value":"Flourish (Datengrafik)"},{"key":"giphy","value":"Giphy (animiertes GIF)"},{"key":"instagram","value":"Instagram"},{"key":"twitter-post","value":"Twitter"},{"key":"vimeo","value":"Vimeo (Video)"},{"key":"youtube","value":"YouTube (Video)"},{"key":"youtube360","value":"YouTube 360 (360° Video)"}]}}

package/src/stories/views/components/externalService/externalServiceDs.feature.js CHANGED Viewed

@@ -102,7 +102,10 @@ const ExternalService = function (context) {
                         break
                     case 'wahlomat':
                         createWahlOMatEmbed()
-                        break
+                        break
+                    case 'wahl-gemeinde-ergebnis':
+                        createWahlGemeindeErgebnis()
+                        break
                     default:
                         console.error('No JS Config for external service ' + id)
                         break
@@ -112,7 +115,156 @@ const ExternalService = function (context) {
                 loadIframe() //für alle Dienste die nicht der DSGVO Datapolicy unterliegen
         }
     }
+    const createWahlGemeindeErgebnis = function () {
+        let embedCode = options.embedCode,
+            cleanUrl,
+            wahlKreisVersionJsonUrl,
+            wahlkreis,
+            wahlid,
+            jsonResponse,
+            iFrameElement,
+            iframeHeight = 300
+        const cleanVariables = function (variable) {
+            while (variable.charAt(0) === '&') {
+                variable = variable.substring(1)
+            }
+            return variable
+        }
+        const extractDataFromEmbedCode = function () {
+            const parts = embedCode.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)
+        }
+        extractDataFromEmbedCode()
+        initMessageEventListener()
+        fetchJsonData()
+    }
     const createWahlOMatEmbed = function () {
         const divTag = document.createElement('div')

package/src/stories/views/components/externalService/external_service.stories.js CHANGED Viewed

@@ -2,6 +2,7 @@ import {
     ExternalServiceContent
 } from './external_service.data.js'
 import externalService from './external_service_with_datapolicy_check.hbs'
+import externalServiceNoDatapolicyCheck from './external_service.hbs'
 const TemplatePageExternalService = (args, { globals: { theme } }) => {
     // You can either use a function to create DOM elements or use a plain html string!
@@ -9,7 +10,12 @@ const TemplatePageExternalService = (args, { globals: { theme } }) => {
     let brand = undefined !== theme ? theme : 'hessenschau'
     return externalService({ brand, ...args })
 }
+const TemplatePageExternalServiceNoDatapolicyCheck = (args, { globals: { theme } }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    let brand = undefined !== theme ? theme : 'hessenschau'
+    return externalServiceNoDatapolicyCheck({ brand, ...args })
+}
 export default {
     title: 'Komponenten/Externe Dienste',
     argTypes: {},
@@ -53,4 +59,9 @@ export const ExterneDiensteDatawrapperContentRefresher = {
     name: 'Externe Dienste Datawrapper mit ContentRefresher',
     args: ExternalServiceContent.Datawrapper_CDN_NoResponsiveFixedHeightReload,
 }
+export const WahlGemeindeErgebnis = {
+    render: TemplatePageExternalServiceNoDatapolicyCheck.bind({}),
+    name: 'Externe Dienste Wahl Gemeinde Ergebnis',
+    args: ExternalServiceContent.Wahl_Gemeinde_Ergebnis,
+}

package/src/stories/views/components/externalService/fixtures/external_service_with_datapolicy.json CHANGED Viewed

@@ -208,5 +208,20 @@
         "setTimedReloadIframe": false,
         "setTimeForReload": "",
         "externalServiceCaption": "Eine Demo der Virtual Reality-Inszenierung '2049: Zeitreise Mobilität'"
+    },
+    "Wahl_Gemeinde_Ergebnis": {
+        "externalServiceConfig": {
+            "makeConfigurable": false,
+            "embedAsIFrame": false,
+            "externalServiceId": "wahl-gemeinde-ergebnis",
+            "externalServiceEmbedType": "js",
+            "externalServiceName": "wahl-gemeinde-ergebnis"
+        },
+        "serviceUrl": "https://www.tagesschau.de/wahl/archiv/2024-06-09-EP-DE/charts/wahlkreis-detail/G06412000-{version}.shtml?externalEmbed*G06412000*&2024-06-09-EP-DE*&https%3A%2F%2Fwww.hessenschau.de%2Fpolitik%2Flandtagswahl%2Fkandidatencheck%2Fwk-versions.json",
+        "fixedHeight": "",
+        "aspectRatio": "",
+        "setResponsiveIframe": false,
+        "setTimedReloadIframe": false,
+        "setTimeForReload": ""
     }
 }

package/src/stories/views/components/page/base/page_header.hbs CHANGED Viewed

@@ -1,16 +1,15 @@
 <header class="mt-6 sm480:mt-8">
+    {{#with this.label}}
+        {{#> components/label/label_group _css="mb-2"}}
+            {{> components/label/label _type=this.type _text=(loca this.loca)}}
+        {{/components/label/label_group}}
+    {{/with}}
     <h2>
-        {{#if this.label }}
-            {{#with this.label}}
-                {{#> components/label/label_group _css="mb-2"}}
-                    {{> components/label/label _type=this.type _text=(loca this.loca)}}
-                {{/components/label/label_group}}
-            {{/with}}
-        {{else}}
+        {{#unless this.label }}
             {{~#if topline}}
                 <span class="block mb-2 text-base sm480:text-xl font-heading">{{this.topline}}</span>
             {{/if~}}
-        {{/if~}}
+        {{/unless~}}
         <span class="text-3xl font-headingSerif sm480:text-4xl">{{this.title}}</span>
     </h2>
 </header>