hr-design-system-handlebars 1.124.10 → 1.125.0

package/src/stories/views/components/external-service/dataWrapperNoResponsiveIframe.subfeature.js

@@ -1,83 +1,61 @@
-const DataWrapperNoResponsiveIframe = function (context, configAR, configFixedHeight, id, embedCode, lazyLoad) {
-    
-    const { element: rootElement } = context
-    let aspectRatio = configAR
-    let fixedHeight = configFixedHeight
-    let uniqueId = id
-
+const DataWrapperNoResponsiveIframe = function ({
+    rootElement,
+    aspectRatio,
+    fixedHeight,
+    id,
+    embedCode,
+    lazyLoad,
+}) {
     const createNoResponsiveIframe = function () {
-
-   
-    var parentDiv = document.createElement('div')
-    //Auflösen nach Tailwind-Klassen //copytext__scrollWrapper
-    parentDiv.className = '!h-full'
-    var div = document.createElement('div')
-    //Keine Aspect-Ratio ausgewählt aber eine feste Höhe
-    
-    console.log(aspectRatio)
-    console.log(configAR)
-    if (aspectRatio === undefined) {
+        const parentDiv = document.createElement('div')
+        //Auflösen nach Tailwind-Klassen //copytext__scrollWrapper
+        parentDiv.className = '!h-full'
+        const div = document.createElement('div')
+        //Keine Aspect-Ratio ausgewählt aber eine feste Höhe
+        if (aspectRatio === undefined) {
             //Auflösen nach Tailwind-Klassen //noaspect_datawrapper_cdn
             div.className = 'relative overflow-hidden w-0 border-0 !min-w-full'
             div.style.height = fixedHeight + 'px'
             div.style.width = '100%'
-    } 
-    // Aspect-Ratio ausgewählt
-    else {
-        //ar-- in Tailwind-Klassen
-        let tailwindCSS
-        switch(aspectRatio){
-            case '100':
-                tailwindCSS = "ar-1-1" 
-            break;
-            case '16x9':
-                tailwindCSS = "ar-16-9" 
-            break;
-            case '9x16':
-                tailwindCSS = "ar-9-16"
-            break;
-            case '16x7':
-                tailwindCSS = "ar-16-7"
-            break;
-            case '7x16':
-                tailwindCSS = "ar-7-16"
-            break;
-            case '4x3':
-                tailwindCSS = "ar-4-3"
-            break;
-            case '100x27':
-                tailwindCSS = "ar-100-27"
-            break;
-            default:
-                tailwindCSS = "ar-16-9"
-          }
-          
-            div.className = tailwindCSS + " w-full sm480:h-full h-[560px]"
-    }
-    var iframe = document.createElement('iframe')
+        }
+        // Aspect-Ratio ausgewählt
+        else {
+            //ar-- in Tailwind-Klassen
+            const aspectRatiosToCssClasses = {
+                '100': 'ar-1-1',
+                '16x9': 'ar-16-9',
+                '9x16': 'ar-9-16',
+                '16x7': 'ar-16-7',
+                '7x16': 'ar-7-16',
+                '4x3': 'ar-4-3',
+                '100x27': 'ar-100-27',
+            }
+            const tailwindCSS = aspectRatiosToCssClasses[aspectRatio] || 'ar-16-9'
+            div.className = `${tailwindCSS} w-full sm480:h-full h-[560px]`
+        }
+        var iframe = document.createElement('iframe')
 
-    //Auflösen nach Tailwind-Klassen //ar_iframe datawrapper_cdn
-    iframe.setAttribute('class', 'border-0 top-0 left-0 w-full h-full overflow-y-hidden')
-    iframe.setAttribute('id', 'i_frame')
-    iframe.setAttribute('data-isloaded', '0')
-    iframe.setAttribute('webkitallowfullscreen', '')
-    iframe.setAttribute('mozallowfullscreen', '')
-    iframe.setAttribute('allowfullscreen', '')
-    iframe.setAttribute('scrolling', 'no')
-    iframe.setAttribute('frameborder', '0')
-    iframe.src = embedCode
-    iframe.id = 'datawrapper-chart-' + uniqueId
-    if (lazyLoad) {
-        iframe.loading = "lazy";
-    }
-    
-    div.appendChild(iframe)
-    parentDiv.appendChild(div)
-    rootElement.appendChild(parentDiv)
+        //Auflösen nach Tailwind-Klassen //ar_iframe datawrapper_cdn
+        iframe.className = 'border-0 top-0 left-0 w-full h-full overflow-y-hidden'
+        iframe.id = 'datawrapper-chart-' + id
+        iframe.setAttribute('data-isloaded', '0')
+        iframe.setAttribute('webkitallowfullscreen', '')
+        iframe.setAttribute('mozallowfullscreen', '')
+        iframe.setAttribute('allowfullscreen', '')
+        iframe.setAttribute('scrolling', 'no')
+        iframe.setAttribute('frameborder', '0')
+        iframe.src = embedCode
+        if (lazyLoad) {
+            iframe.loading = 'lazy'
+        }
+
+        div.appendChild(iframe)
+        parentDiv.appendChild(div)
+        rootElement.appendChild(parentDiv)
     }
     return {
-        createNoResponsiveIframe: createNoResponsiveIframe
+        createNoResponsiveIframe: createNoResponsiveIframe,
     }
 }
 
-export default DataWrapperNoResponsiveIframe      
+export default DataWrapperNoResponsiveIframe

package/src/stories/views/components/external-service/externalServiceDs.feature.js

@@ -29,10 +29,7 @@ const ExternalService = function (context) {
     let embedCode = options.embedCode,
         iframe,
         settingsCookie = new SettingsCookie(),
-        noResponsiveIframe,
-        contentRefresher,
         gemeindewahlergebnis,
-        uniqueId,
         isExternalServiceLoaded = false,
         tiktokOnPage = []
 
@@ -74,61 +71,34 @@ const ExternalService = function (context) {
     }
 
     const insertExternalService = function () {
-        switch (embedType) {
-            case 'js':
-                switch (id) {
-                    case '23degrees':
-                        createTwentyThreeDegreesEmbed()
-                        break
-                    case 'facebook-post':
-                        createFacebookEmbed()
-                        break
-                    case 'instagram':
-                        createInstagramEmbed()
-                        break
-                    case 'tiktok':
-                        createTikTokEmbed()
-                        break
-                    case 'twitter':
-                        createTwitterEmbed()
-                        break
-                    case 'twitter-post':
-                        createTwitterPostEmbed()
-                        break
-                    case 'datawrapper_cdn':
-                        createDataWrapperEmbed()
-                        break
-                    case 'wahlmonitor':
-                        createWahlEmbed()
-                        break
-                    case 'wahlmonitor_v2':
-                        createWahlEmbed()
-                        break
-                    case 'wahlkreiskarte':
-                        createWahlEmbed()
-                        break
-                    case 'wahlkreiskarte_v2':
-                        createWahlEmbed()
-                        break
-                    case 'wahlomat-euwa':
-                        createWahlOMatEuwaEmbed()
-                        break
-                    case 'wahlomat-butawa':
-                        createWahlOMatButawaEmbed()
-                        break
-                    case 'wahl-gemeinde-ergebnis':
-                        createWahlGemeindeErgebnisEmbed()
-                        break
-                    case 'wer-waehlte-wen':
-                        werWaehlteWenEmbed()
-                        break
-                    default:
-                        console.error('No JS Config for external service ' + id)
-                        break
-                }
-                break
-            default:
-                loadIframe() //für alle Dienste die nicht der DSGVO Datapolicy unterliegen
+        if (embedType !== 'js') {
+            loadIframe() // Für alle Dienste, die nicht der DSGVO Datapolicy unterliegen
+            return
+        }
+
+        const externalServiceMap = {
+            '23degrees': createTwentyThreeDegreesEmbed,
+            'facebook-post': createFacebookEmbed,
+            'instagram': createInstagramEmbed,
+            'tiktok': createTikTokEmbed,
+            'twitter': createTwitterEmbed,
+            'twitter-post': createTwitterPostEmbed,
+            'datawrapper_cdn': createDataWrapperEmbed,
+            'wahlmonitor': createWahlEmbed,
+            'wahlmonitor_v2': createWahlEmbed,
+            'wahlkreiskarte': createWahlEmbed,
+            'wahlkreiskarte_v2': createWahlEmbed,
+            'wahlomat-euwa': createWahlOMatEuwaEmbed,
+            'wahlomat-butawa': createWahlOMatButawaEmbed,
+            'wahl-gemeinde-ergebnis': createWahlGemeindeErgebnisEmbed,
+            'wer-waehlte-wen': werWaehlteWenEmbed,
+        }
+
+        const service = externalServiceMap[id]
+        if (service) {
+            service()
+        } else {
+            console.error(`No JS Config for external service ${id}`)
         }
     }
 
@@ -206,14 +176,6 @@ const ExternalService = function (context) {
         })
     }
 
-    const createUniqueID = function () {
-        console.log('Erzeuge einzigartige ID')
-        uniqueId = Math.random()
-            .toString(36)
-            .replace(/[^a-z]+/g, '')
-            .substring(2, 10)
-    }
-
     const getAspectRatioClass = function () {
         switch (iFrameConfig.aspectRatio) {
             case '16x9':
@@ -237,96 +199,104 @@ const ExternalService = function (context) {
 
     const createDataWrapperEmbed = function () {
         removeDatapolicyBox()
-        createUniqueID()
-        console.log('UniqueID' + uniqueId)
-        if (iFrameConfig.noResponsiveIframe == 'true') {
+        const uniqueId = createUniqueID()
+        const {
+            isNoResponsiveIframe,
+            isWebcomponent,
+            refreshContent,
+            aspectRatio,
+            fixedHeight,
+            refreshIntervall,
+        } = iFrameConfig
+
+        const addContentRefresher = (isWebcomponent) => {
+            new DataWrapperContentRefresher({
+                rootElement,
+                id: uniqueId,
+                refreshIntervall,
+                isWebcomponent,
+            }).createRefresher()
+        }
+
+        if (isNoResponsiveIframe == 'true') {
             //Klassisches Iframe mit AR-Wrapper oder fester Höhe
-            noResponsiveIframe = new DataWrapperNoResponsiveIframe(
-                context,
-                iFrameConfig.aspectRatio,
-                iFrameConfig.fixedHeight,
-                uniqueId,
-                embedCode,
-                lazyLoad
-            )
-            noResponsiveIframe.createNoResponsiveIframe()
-
-            if (iFrameConfig.refreshContent == 'true') {
-                console.log('contentRefresher anfügen')
-                contentRefresher = new DataWrapperContentRefresher(
-                    context,
-                    uniqueId,
-                    iFrameConfig.refreshIntervall,
-                    false
-                )
-                contentRefresher.createRefresher()
+            new DataWrapperNoResponsiveIframe({
+                rootElement: rootElement,
+                aspectRatio: aspectRatio,
+                fixedHeight: fixedHeight,
+                id: uniqueId,
+                embedCode: embedCode,
+                lazyLoad: lazyLoad,
+            }).createNoResponsiveIframe()
+
+            if (refreshContent == 'true') {
+                addContentRefresher(false)
             }
-        } else {
-            if (iFrameConfig.webcomponent == 'true') {
-                // Webcomponent
-                const divTag = document.createElement('div')
-                divTag.id = 'datawrapper-chart-' + uniqueId
-                rootElement.insertBefore(divTag, null)
-                const scriptTag = document.createElement('script')
-                scriptTag.setAttribute('id', 'datawrapper-component-js')
-                scriptTag.setAttribute('type', 'text/javascript')
-                scriptTag.setAttribute('defer', 'defer')
-                scriptTag.setAttribute('src', embedCode + 'embed.js?v=1')
-                scriptTag.setAttribute('charset', 'utf-8')
-                const noScriptTag = document.createElement('noscript')
-                const imageTag = document.createElement('img')
-                imageTag.src = embedCode + 'full.png'
-                imageTag.alt = ''
-                noScriptTag.appendChild(imageTag)
-                divTag.appendChild(scriptTag)
-                divTag.appendChild(noScriptTag)
-
-                if (iFrameConfig.refreshContent == 'true') {
-                    console.log('contentRefresher anfügen')
-                    contentRefresher = new DataWrapperContentRefresher(
-                        context,
-                        uniqueId,
-                        iFrameConfig.refreshIntervall,
-                        true
-                    )
-                    contentRefresher.createRefresher()
-                }
-            } else {
-                //Responsives Iframe
-                var iframe = document.createElement('iframe')
-                //Auflösen nach Tailwind-Klassen //dataWrapper-embed
-                iframe.className = 'w-0 !min-w-full border-0'
-                iframe.setAttribute('webkitallowfullscreen', '')
-                iframe.setAttribute('mozallowfullscreen', '')
-                iframe.setAttribute('allowfullscreen', '')
-                iframe.setAttribute('scrolling', 'no')
-                iframe.setAttribute('frameborder', '0')
-                iframe.src = embedCode
-                iframe.id = 'datawrapper-chart-' + uniqueId
-                if (lazyLoad) {
-                    iframe.loading = 'lazy'
-                }
-                rootElement.insertBefore(iframe, null)
+            return
+        }
 
-                loadScript(
-                    'datawrapper-js',
-                    'https://static.hr.de/hessenschau/datawrapper/responsiveIframe.js',
-                    true
-                )
-                if (iFrameConfig.refreshContent == 'true') {
-                    console.log('contentRefresher anfügen')
-                    contentRefresher = new DataWrapperContentRefresher(
-                        context,
-                        uniqueId,
-                        iFrameConfig.refreshIntervall,
-                        false
-                    )
-                    contentRefresher.createRefresher()
-                }
+        if (isWebcomponent == 'true') {
+            // Webcomponent
+            const divTag = document.createElement('div')
+            divTag.id = `datawrapper-chart-${uniqueId}`
+            rootElement.appendChild(divTag)
+
+            const scriptTag = document.createElement('script')
+            Object.assign(scriptTag, {
+                id: 'datawrapper-component-js',
+                type: 'text/javascript',
+                defer: true,
+                src: `${embedCode}embed.js?v=1`,
+                charset: 'utf-8',
+            })
+
+            const noScriptTag = document.createElement('noscript')
+            const imageTag = document.createElement('img')
+            imageTag.src = `${embedCode}full.png`
+            imageTag.alt = ''
+            noScriptTag.appendChild(imageTag)
+
+            divTag.append(scriptTag, noScriptTag)
+
+            if (refreshContent == 'true') {
+                addContentRefresher(true)
             }
+            return
+        }
+        //Responsives Iframe
+        const iframe = document.createElement('iframe')
+        //Auflösen nach Tailwind-Klassen //dataWrapper-embed
+        iframe.className = 'w-0 !min-w-full border-0'
+        iframe.setAttribute('webkitallowfullscreen', '')
+        iframe.setAttribute('mozallowfullscreen', '')
+        iframe.setAttribute('allowfullscreen', '')
+        iframe.setAttribute('scrolling', 'no')
+        iframe.setAttribute('frameborder', '0')
+        iframe.src = embedCode
+        iframe.id = `datawrapper-chart-${uniqueId}`
+        if (lazyLoad) {
+            iframe.loading = 'lazy'
+        }
+        rootElement.appendChild(iframe)
+
+        loadScript(
+            'datawrapper-js',
+            'https://static.hr.de/hessenschau/datawrapper/responsiveIframe.js',
+            true
+        )
+        if (refreshContent == 'true') {
+            addContentRefresher(false)
         }
     }
 
+    const createUniqueID = function () {
+        console.log('Erzeuge einzigartige ID')
+        return Math.random()
+            .toString(36)
+            .replace(/[^a-z]+/g, '')
+            .substring(2, 10)
+    }
+
     const createTwentyThreeDegreesEmbed = function () {
         removeDatapolicyBox()
 

package/src/stories/views/components/external-service/external_service_with_datapolicy_check.hbs

@@ -3,7 +3,7 @@
         <div class="c-externalService c-externalService__{{this.externalServiceConfig.externalServiceId}}{{#unless
                 this.fixedHeight }} -noFixedHeight{{/unless}} js-load"
              data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType":"{{this.externalServiceConfig.externalServiceEmbedType}}","lazyLoad":{{defaultIfEmpty _lazyLoad false}},"dataPolicyCheck": true, "whiteList":{{this.externalServiceConfig.isWhitelisted}},"iFrameConfig": { {{~#if this.fixedHeight~}}
-                "fixedHeight":"{{this.fixedHeight}}"{{~else~}}{{~#if this.aspectRatio}}"aspectRatio":"{{this.aspectRatio}}"{{~else~}}"aspectRatio":"16x9"{{/if}}{{~/if}},"noResponsiveIframe":"{{{this.setResponsiveIframe}}}","webcomponent":"{{{this.setWebcomponent}}}"{{~#if this.setTimedReloadIframe}},"refreshContent":"{{{this.setTimedReloadIframe}}}","refreshIntervall":"{{this.setTimeForReload}}"{{~/if}} }}'>
+                "fixedHeight":"{{this.fixedHeight}}"{{~else~}}{{~#if this.aspectRatio}}"aspectRatio":"{{this.aspectRatio}}"{{~else~}}"aspectRatio":"16x9"{{/if}}{{~/if}},"isNoResponsiveIframe":"{{{this.setResponsiveIframe}}}","isWebcomponent":"{{{this.setWebcomponent}}}"{{~#if this.setTimedReloadIframe}},"refreshContent":"{{{this.setTimedReloadIframe}}}","refreshIntervall":"{{this.setTimeForReload}}"{{~/if}} }}'>
             {{~> components/external-service/components/external_service_data_policy ~}}
         </div>
         {{~> components/external-service/components/external_service_caption ~}}