hr-design-system-handlebars 1.82.8 → 1.82.10

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

@@ -1,6 +1,7 @@
 import SettingsCookie from './globalSettingsCookie.subfeature'
 import DataWrapperContentRefresher from './dataWrapperContentRefresher.subfeature'
 import DataWrapperNoResponsiveIframe from './dataWrapperNoResponsiveIframe.subfeature'
+import CreateWahlGemeindeErgebnis from './createWahlErgebnisGemeinde.subfeature'
 import {
     fireEvent,
     hr$,
@@ -8,9 +9,7 @@ import {
     loadScript,
     removeScript,
     replaceAnimated,
-    requestTimeout,
-    getJSONCookie,
-    deleteCookie,
+    requestTimeout
 } from 'hrQuery'
 
 const ExternalService = function (context) {
@@ -25,17 +24,16 @@ const ExternalService = function (context) {
         id = options.id,
         iFrameConfig = options.iFrameConfig
     let acceptButton,
-        acceptAlwaysCheckbox = hr$('.js-dataPolicy-acceptPermanentely', rootElement)[0],
-        dataPolicySettingsButton = hr$('.js-data-policy-settings-button', rootParent)[0]
+        acceptAlwaysCheckbox = hr$('.js-dataPolicy-acceptPermanentely', rootElement)[0]
     let embedCode = options.embedCode,
         iframe,
         settingsCookie,
         noResponsiveIframe,
         contentRefresher,
+        gemeindewahlergebnis,
         uniqueId,
-        isExternalServiceLoaded = false,
-        isWebview = window.parent.document.documentElement.classList.contains('webview')
-
+        isExternalServiceLoaded = false
+        
     const testDOMElements = function () {
         console.log(rootElement)
         console.log(rootParent)
@@ -58,10 +56,8 @@ const ExternalService = function (context) {
                 console.log('Done')
                 if (undefined !== callback) {
                     replaceAnimated(rootElement, data.html, false, callback)
-                    alert('boing')
                 } else {
                     replaceAnimated(rootElement, data.html, false)
-                    alert('boing, boing')
                 }
             })
             //Add handlers to be called when the Deferred object is rejected.
@@ -104,7 +100,7 @@ const ExternalService = function (context) {
                         createWahlOMatEmbed()
                         break  
                     case 'wahl-gemeinde-ergebnis':
-                        createWahlGemeindeErgebnis()
+                        createWahlGemeindeErgebnisEmbed()
                         break  
                     default:
                         console.error('No JS Config for external service ' + id)
@@ -115,155 +111,10 @@ 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 createWahlGemeindeErgebnisEmbed = function () {
+        gemeindewahlergebnis = new CreateWahlGemeindeErgebnis(embedCode,rootElement)
+        gemeindewahlergebnis.createErgebnis()
     }
     const createWahlOMatEmbed = function () {
 
@@ -297,6 +148,7 @@ const ExternalService = function (context) {
         rootElement.appendChild(script)
     }
     const createUniqueID = function() {
+       console.log("Erzeuge einzigartige ID")
        uniqueId = Math.random().toString(36).replace(/[^a-z]+/g, '').substring(2, 10)
     }
 
@@ -324,6 +176,7 @@ const ExternalService = function (context) {
     const createDataWrapperEmbed = function () {
         removeDatapolicyBox()
         createUniqueID()
+        console.log("UniqueID"+uniqueId)
         if (iFrameConfig.noResponsiveIframe == 'true') {
 
              //Klassisches Iframe mit AR-Wrapper oder fester Höhe
@@ -342,7 +195,7 @@ const ExternalService = function (context) {
                 
                 // Webcomponent
                 const divTag = document.createElement('div')
-                divTag.id = 'datawrapper-chart-' + uniqueID
+                divTag.id = 'datawrapper-chart-' + uniqueId
                 rootElement.insertBefore(divTag, null)
                 const scriptTag = document.createElement('script')
                 scriptTag.setAttribute('id', 'datawrapper-component-js')
@@ -504,18 +357,10 @@ const ExternalService = function (context) {
             settingsCookie = new SettingsCookie()
             acceptButton = hr$('.js-dataPolicy-accept', rootElement)[0]
             listen('click', handleDatapolicy, acceptButton)
-            if (isWebview) {
-                if (settingsCookie.isDataPolicyCookieAccepted(id)) {
+            if (settingsCookie.isSettingsCookieAccepted(id)) {
                     loadServiceWithDataPolicyButton()
-                } else {
-                    dataPolicyBox.style.visibility = 'visible'
-                }
             } else {
-                if (settingsCookie.isSettingsCookieAccepted(id)) {
-                    loadServiceWithDataPolicyButton()
-                } else {
                     dataPolicyBox.style.visibility = 'visible'
-                }
             }
             listen('hr:externalService-activate-' + id, loadServiceWithDataPolicyButton)
             listen('hr:externalService-deactivate-' + id, removeExternalService)
@@ -528,9 +373,6 @@ const ExternalService = function (context) {
         if (acceptAlwaysCheckbox.checked == true) {
             fireEvent('hr:externalService-activate-' + id)
             settingsCookie.setCookieForOptions(id)
-            if (isWebview) {
-                settingsCookie.setCookieForDataPolicy(id)
-            }
         } else {
             loadServiceWithDataPolicyButton()
             console.log('External Service once loaded - ' + id)
@@ -573,22 +415,6 @@ const ExternalService = function (context) {
         toggleContentSettingsButton()
     }
 
-    const syncAppOptionsToSettingsCookie = function () {
-        if (getJSONCookie('datapolicy')) {
-            let dataPolicyCookie = getJSONCookie('datapolicy') || {}
-            let objArray = Object.entries(dataPolicyCookie)
-            objArray.forEach(([key, value]) => {
-                settingsCookie.setCookieForOptions(key, value)
-            })
-        }
-    }
-
-    const setWhitelistServicesForInitialApp = function () {
-        let whitelist = ['ard_mediathek', 'arte_concert', 'arte_concert_new', 'datawrapper_cdn']
-        for (let i = 0; i < whitelist.length; ++i) {
-            settingsCookie.setCookieForDataPolicy(whitelist[i], true)
-        }
-    }
     const resetCheckboxForPermanentService = function () {
         /*Die Autocompletion des Browsers merkt sich die Zustände von Formularelementen nach einem Refresh, das wird hier hart zurückgesetzt*/
         var clist = document.getElementsByClassName('js-dataPolicy-acceptPermanentely')
@@ -599,13 +425,6 @@ const ExternalService = function (context) {
     initDataPolicy()
     resetCheckboxForPermanentService()
     testDOMElements()
-    if (isWebview) {
-        /*Für die App werden Cookie-Daten des neuen Cookies wieder mit dem alten Cookie synchronisiert */
-        syncAppOptionsToSettingsCookie()
-        if (!getJSONCookie('datapolicy') || !getJSONCookie('hrSettings')) {
-            setWhitelistServicesForInitialApp()
-        }
-    }
 }
 
 export default ExternalService

package/src/stories/views/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-adjust_context _noDelay=this.dontLazyload}}
+                    {{~> components/teaser/components/teaser_media_player _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _aspectRatio=_aspectRatio-adjust_context _addClassImg=_addClassImg-adjust_context _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-adjust_context _noDelay=this.dontLazyload}}
+                    {{~> components/teaser/components/teaser_media_player _mediaButtonIcon="audio_button" _mediaButtonLabel="Audio" _aspectRatio=_aspectRatio-adjust_context _addClassImg=_addClassImg-adjust_context _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-adjust_context _noDelay=this.dontLazyload}}
+                    {{~> components/teaser/components/teaser_media_player _mediaButtonIcon="audio_button" _mediaButtonLabel="Podcast" _aspectRatio=_aspectRatio-adjust_context _addClassImg=_addClassImg-adjust_context _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-adjust_context _noDelay=this.dontLazyload}}
+                    {{~> components/teaser/components/teaser_media_player _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream=true _aspectRatio=_aspectRatio-adjust_context _addClassImg=_addClassImg-adjust_context _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-adjust_context _noDelay=this.dontLazyload}}
+                    {{~> components/teaser/components/teaser_media_player _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream=true _aspectRatio=_aspectRatio-adjust_context _addClassImg=_addClassImg-adjust_context _noDelay=this.dontLazyload}}
                {{/with}}
                {{#if ../../_isMobile1to1~}}  
                     {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}