hr-design-system-handlebars 1.63.9 → 1.63.10

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v1.63.10 (Fri Apr 12 2024)
+
+#### 🐛 Bug Fix
+
+- Several fixes for Javascript and Iframe Styles [#899](https://github.com/mumprod/hr-design-system-handlebars/pull/899) ([@Paul-Atreidis](https://github.com/Paul-Atreidis))
+
+#### Authors: 1
+
+- [@Paul-Atreidis](https://github.com/Paul-Atreidis)
+
+---
+
 # v1.63.9 (Thu Apr 11 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1536,6 +1536,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .aspect-video {
   aspect-ratio: 16 / 9;
 }
+.\!h-full {
+  height: 100% !important;
+}
 .h-0 {
   height: 0px;
 }
@@ -1593,6 +1596,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .h-\[500rem\] {
   height: 500rem;
 }
+.h-\[560px\] {
+  height: 560px;
+}
 .h-\[9px\] {
   height: 9px;
 }
@@ -1719,6 +1725,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .w-screen {
   width: 100vw;
 }
+.\!min-w-full {
+  min-width: 100% !important;
+}
 .min-w-0 {
   min-width: 0px;
 }
@@ -3324,7 +3333,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1712858412306;
+  counter-reset: cnt1712914517068;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3703,7 +3712,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1712858412306 1;
+  counter-increment: cnt1712914517068 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3719,7 +3728,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1712858412306);
+  content: counter(cnt1712914517068);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -5535,6 +5544,10 @@ article.indexTextDS .indexTextHighlighted .link {
     height: 2rem;
   }
 
+  .sm480\:h-full {
+    height: 100%;
+  }
+
   .sm480\:w-2\/3 {
     width: 66.666667%;
   }

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

@@ -1,85 +1,88 @@
         
-const DataWrapperContentRefresher = function (context, uniqueID) {
-        const { element: rootElement } = context
-        let remainingTime
-        let timer
-        let iframeRefresh = document.getElementById('datawrapper-chart-' + uniqueID)
+const DataWrapperContentRefresher = function (context, id, refreshIntervall) {
+    const { element: rootElement } = context
+    let remainingTime
+    let timer
+    let uniqueID = id
+    let intervall = refreshIntervall
+    let iframeRefresh = document.getElementById('datawrapper-chart-' + uniqueID)
+    
+    const createRefresher = function () {
+        console.log("Refresher bauen")
+        let divCounter = document.createElement('div')
+        let divOverlay = document.createElement('div')
+        let divTextOverlay = document.createElement('div')
+        divOverlay.id = 'overlay' + uniqueID
+        divOverlay.style.position = 'absolute'
+        divOverlay.style.top = '0'
+        divOverlay.style.display = 'none'
+        divOverlay.style.alignItems = 'center'
+        divOverlay.style.justifyContent = 'center'
+        divOverlay.style.backgroundColor = '#fff'
+        divOverlay.style.width = '100%'
+        divOverlay.style.height = 'calc(100% - 36px)'
+        divOverlay.style.backgroundColor = '#d8e9f6'
+        divTextOverlay.innerHTML = 'Lade Inhalt neu...'
+        divTextOverlay.style.backgroundColor = '#005293'
+        divTextOverlay.style.padding = '8px'
+        divTextOverlay.style.color = '#fff'
+        divTextOverlay.style.fontWeight = '800'
+        divTextOverlay.style.fontFamily = 'RobotoSlab'
+        divTextOverlay.style.borderRadius = '6px 6px 6px 6px'
+        divOverlay.appendChild(divTextOverlay)
+        divCounter.id = 'counter' + uniqueID
+        divCounter.style.backgroundColor = '#006dc1'
+        divCounter.style.color = '#fff'
+        divCounter.style.fontSize = '12px'
+        divCounter.style.padding = '8px'
+        divCounter.style.borderRadius = '0 0 4px 4px'
         
-        const createRefresher = function (uniqueID) {
-            let divCounter = document.createElement('div')
-            let divOverlay = document.createElement('div')
-            let divTextOverlay = document.createElement('div')
-            divOverlay.id = 'overlay' + uniqueID
-            divOverlay.style.position = 'absolute'
-            divOverlay.style.top = '0'
-            divOverlay.style.display = 'none'
-            divOverlay.style.alignItems = 'center'
-            divOverlay.style.justifyContent = 'center'
-            divOverlay.style.backgroundColor = '#fff'
-            divOverlay.style.width = '100%'
-            divOverlay.style.height = 'calc(100% - 36px)'
-            divOverlay.style.backgroundColor = '#d8e9f6'
-            divTextOverlay.innerHTML = 'Lade Inhalt neu...'
-            divTextOverlay.style.backgroundColor = '#005293'
-            divTextOverlay.style.padding = '8px'
-            divTextOverlay.style.color = '#fff'
-            divTextOverlay.style.fontWeight = '800'
-            divTextOverlay.style.fontFamily = 'RobotoSlab'
-            divTextOverlay.style.borderRadius = '6px 6px 6px 6px'
-            divOverlay.appendChild(divTextOverlay)
-            divCounter.id = 'counter' + uniqueID
-            divCounter.style.backgroundColor = '#006dc1'
-            divCounter.style.color = '#fff'
-            divCounter.style.fontSize = '12px'
-            divCounter.style.padding = '8px'
-            divCounter.style.borderRadius = '0 0 4px 4px'
-            
-            rootElement.style.position = 'relative'
-            rootElement.appendChild(divCounter)
-            rootElement.appendChild(divOverlay)
-            startCountdown()
-        }
+        rootElement.style.position = 'relative'
+        rootElement.appendChild(divCounter)
+        rootElement.appendChild(divOverlay)
+        startCountdown()
+    }
 
-        const refreshIframe = function () {
-            console.log('Reload')
-            iframeRefresh.style.opacity = '0'
-            iframeRefresh.src =
-                iframeRefresh.src.split('?')[0] + '?_=' + new Date().getTime()
-            clearInterval(timer)
-        }
-        const startCountdown = function () {
-            remainingTime = Number(iFrameConfig.refreshIntervall)
-            setTimeout(function () {
-                iframeRefresh.style.opacity = '1'
-                document.getElementById('overlay' + uniqueID).style.display = 'none'
-            }, 1000)
-            timer = setInterval(function () {
-                checkTimer()
-            }, 1000)
-        }
-        const checkTimer = function () {
-            if (remainingTime >= 0) {
+    const refreshIframe = function () {
+        console.log('Reload')
+        iframeRefresh.style.opacity = '0'
+        iframeRefresh.src =
+            iframeRefresh.src.split('?')[0] + '?_=' + new Date().getTime()
+        clearInterval(timer)
+    }
+    const startCountdown = function () {
+        remainingTime = Number(intervall)
+        setTimeout(function () {
+            iframeRefresh.style.opacity = '1'
+            document.getElementById('overlay' + uniqueID).style.display = 'none'
+        }, 1000)
+        timer = setInterval(function () {
+            checkTimer()
+        }, 1000)
+    }
+    const checkTimer = function () {
+        if (remainingTime >= 0) {
+            document.getElementById('counter' + uniqueID).innerHTML =
+                'Dieser Inhalt wird automatisch aktualisiert in ' +
+                secondsToTimeString(remainingTime) +
+                ' Min.'
+            remainingTime -= 1
+            if (remainingTime == -1) {
+                document.getElementById('overlay' + uniqueID).style.display = 'flex'
                 document.getElementById('counter' + uniqueID).innerHTML =
-                    'Dieser Inhalt wird automatisch aktualisiert in ' +
-                    secondsToTimeString(remainingTime) +
-                    ' Min.'
-                remainingTime -= 1
-                if (remainingTime == -1) {
-                    document.getElementById('overlay' + uniqueID).style.display = 'flex'
-                    document.getElementById('counter' + uniqueID).innerHTML =
-                        'Zeitintervall wird neu gestartet...'
-                }
-            } else {
-                refreshIframe()
-                startCountdown()
+                    'Zeitintervall wird neu gestartet...'
             }
+        } else {
+            refreshIframe()
+            startCountdown()
         }
-        const secondsToTimeString = function (seconds) {
-            return new Date(seconds * 1000).toISOString().substr(14, 5)
-        }
-        return {
-            createRefresher: createRefresher
-        }
     }
+    const secondsToTimeString = function (seconds) {
+        return new Date(seconds * 1000).toISOString().substr(14, 5)
+    }
+    return {
+        createRefresher: createRefresher
+    }
+}
 
-    export default DataWrapperContentRefresher            
+export default DataWrapperContentRefresher            

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

@@ -1,28 +1,62 @@
-const DataWrapperNoResponsiveIframe = function (context, configAR, configFixedHeight, comfigEmbedCode) {
+const DataWrapperNoResponsiveIframe = function (context, configAR, configFixedHeight, embedCode) {
     
     const { element: rootElement } = context
     let aspectRatio = configAR
     let fixedHeight = configFixedHeight
-    let embedCode = comfigEmbedCode
 
-    const createNoResponsiveIframe = function (aspectRatioClass) {
+    const createNoResponsiveIframe = function () {
 
    
     var parentDiv = document.createElement('div')
-    parentDiv.className = 'copytext__scrollWrapper'
+    //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) {
-            div.className = 'noaspect_datawrapper_cdn'
+            //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 {
-            div.className = aspectRatioClass + ' datawrapper_cdn'
+        //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')
-    iframe.className = 'w-full h-full datawrapper_cdn'
+
+    //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', '')

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

@@ -23,19 +23,24 @@ const ExternalService = function (context) {
         embedType = options.embedType,
         dataPolicyCheck = options.dataPolicyCheck || false,
         id = options.id,
-        iFrameConfig = options.iFrameConfig,
-        isWebview = window.parent.document.documentElement.classList.contains('webview'),
-        button = hr$('.js-dataPolicyTeaser__button', rootElement)[0]
-
+        iFrameConfig = options.iFrameConfig
     let acceptButton,
         acceptAlwaysCheckbox = hr$('.js-dataPolicy-acceptPermanentely', rootElement)[0],
-        dataPolicySettingsButton = hr$('.js-data-policy-settings-button', rootParent)[0],
-        embedCode = options.embedCode,
+        dataPolicySettingsButton = hr$('.js-data-policy-settings-button', rootParent)[0]
+    let embedCode = options.embedCode,
         iframe,
         settingsCookie,
-        isExternalServiceLoaded = false
-
+        noResponsiveIframe,
+        contentRefresher,
+        uniqueId,
+        isExternalServiceLoaded = false,
+        isWebview = window.parent.document.documentElement.classList.contains('webview')
 
+    const testDOMElements = function () {
+        console.log(rootElement)
+        console.log(rootParent)
+        console.log(acceptAlwaysCheckbox)
+    }
     const embedExternalService = function (callback) {
         $.ajax({
             type: 'GET',
@@ -101,7 +106,7 @@ const ExternalService = function (context) {
                 }
                 break
             default:
-                loadIframe()
+                loadIframe() //für alle Dienste die nicht der DSGVO Datapolicy unterliegen
         }
     }
 
@@ -123,34 +128,49 @@ const ExternalService = function (context) {
         script.type = 'text/javascript'
         rootElement.appendChild(script)
     }
+    const createUniqueID = function() {
+       uniqueId = Math.random().toString(36).replace(/[^a-z]+/g, '').substring(2, 10)
+    }
+
+    const getAspectRatioClass = function () {
+        switch (iFrameConfig.aspectRatio) {
+            case '16x9':
+                return "ar-16-9"
+            case '16x7':
+                return "ar-16-7"
+            case '4x3':
+                return "ar-4-3"
+            case '100x27':
+                return "ar-100-27"
+            case '100':
+                return "ar-1-1"                
+            case '9x16':
+                return "ar-9-16"
+            case '7x16':
+                return "ar-7-16"
+            default:
+                return "ar-16-9"
+        }   
+    }
 
     const createDataWrapperEmbed = function () {
         removeDatapolicyBox()
-        var uniqueID = function () {
-            return Math.random()
-            .toString(36)
-            .replace(/[^a-z]+/g, '')
-            .substring(2, 10)
-        }
-        let contentRefresher = new DataWrapperContentRefresher(context, uniqueID)
-        let noResponsiveIframe = new DataWrapperNoResponsiveIframe(context, iFrameConfig.aspectRatio, iFrameConfig.fixedHeight, embedCode)
-
+        createUniqueID()
         if (iFrameConfig.noResponsiveIframe == 'true') {
-            noResponsiveIframe.createNoResponsiveIframe(getAspectRatioClass())
+            noResponsiveIframe = new DataWrapperNoResponsiveIframe(context, iFrameConfig.aspectRatio, iFrameConfig.fixedHeight, embedCode)
+            noResponsiveIframe.createNoResponsiveIframe()
         } 
         else {
             var iframe = document.createElement('iframe')
-            iframe.className = 'dataWrapper-embed'
-            iframe.style.width = '0'
-            iframe.style.minWidth = '100% !important'
-            iframe.style.border = 'none'
+              //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
+            iframe.id = 'datawrapper-chart-' + uniqueId
             rootElement.insertBefore(iframe, null)
 
             loadScript(
@@ -159,6 +179,8 @@ const ExternalService = function (context) {
                 true
             )
             if (iFrameConfig.refreshContent == 'true') {
+                console.log("contentRefresher anfügen")
+                contentRefresher = new DataWrapperContentRefresher(context, uniqueId, iFrameConfig.refreshIntervall)
                 contentRefresher.createRefresher()
             }
         }
@@ -251,64 +273,39 @@ const ExternalService = function (context) {
         }, 250)
     }
 
-    const getAspectRatioClass = function () {
-        switch (iFrameConfig.aspectRatio) {
-            case '16x9':
-                return "ar-16-9"
-            case '16x7':
-                return "ar-16-7"
-            case '4x3':
-                return "ar-4-3"
-            case '100x27':
-                return "ar-100-27"
-            case '100':
-                return "ar-1-1"                
-            case '9x16':
-                return "ar-9-16"
-            case '7x16':
-                return "ar-7-16"
-            default:
-                return "ar-16-9"
-        }   
-    }
-
     const loadIframe = function () {
         console.log('load iframe ' + id)
         iframe =
             "<iframe id='i_frame' data-isloaded='0' src='" +
             embedCode +
-            "' frameborder='0' class='" +
-            iFrameConfig.heightClass +
-            "' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>"
+            "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>"
         if (iFrameConfig.aspectRatio) {
             iframe =
-                "<div class='copytext__scrollWrapper'><div class='" +
+                "<div class='!h-full'><div class=" +
                 getAspectRatioClass() +
                 ' ' +
                 id +
                 "'><iframe id='i_frame' data-isloaded='0' src='" +
                 embedCode +
-                "' frameborder='0' class='w-full h-full " +
-                iFrameConfig.heightClass +
-                ' ' +
+                "' frameborder='0' class='w-full h-full '" +
                 id +
                 "' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></div>"
             //TODO Weiche Animation der Inhalte
         } else {
             if (iFrameConfig.fixedHeight) {
                 iframe =
-                    "<div class='copytext__scrollWrapper -fixedHeight' style='height:" +
+                    "<div class='!h-full' style='height:" +
                     iFrameConfig.fixedHeight +
-                    "px'><iframe data-isloaded='0' class='w-full h-full' src='" +
+                    "px'><iframe data-isloaded='0' src='" +
                     embedCode +
-                    "' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
+                    "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
             } else {
                 iframe =
-                    "<div class='copytext__scrollWrapper " +
+                    "<div class='!h-full " +
                     id +
-                    "'><iframe data-isloaded='0' class='w-full h-full' src='" +
+                    "'><iframe data-isloaded='0' src='" +
                     embedCode +
-                    "' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
+                    "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
             }
         }
 
@@ -414,6 +411,7 @@ 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()

package/package.json

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

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

@@ -1,85 +1,88 @@
         
-const DataWrapperContentRefresher = function (context, uniqueID) {
-        const { element: rootElement } = context
-        let remainingTime
-        let timer
-        let iframeRefresh = document.getElementById('datawrapper-chart-' + uniqueID)
+const DataWrapperContentRefresher = function (context, id, refreshIntervall) {
+    const { element: rootElement } = context
+    let remainingTime
+    let timer
+    let uniqueID = id
+    let intervall = refreshIntervall
+    let iframeRefresh = document.getElementById('datawrapper-chart-' + uniqueID)
+    
+    const createRefresher = function () {
+        console.log("Refresher bauen")
+        let divCounter = document.createElement('div')
+        let divOverlay = document.createElement('div')
+        let divTextOverlay = document.createElement('div')
+        divOverlay.id = 'overlay' + uniqueID
+        divOverlay.style.position = 'absolute'
+        divOverlay.style.top = '0'
+        divOverlay.style.display = 'none'
+        divOverlay.style.alignItems = 'center'
+        divOverlay.style.justifyContent = 'center'
+        divOverlay.style.backgroundColor = '#fff'
+        divOverlay.style.width = '100%'
+        divOverlay.style.height = 'calc(100% - 36px)'
+        divOverlay.style.backgroundColor = '#d8e9f6'
+        divTextOverlay.innerHTML = 'Lade Inhalt neu...'
+        divTextOverlay.style.backgroundColor = '#005293'
+        divTextOverlay.style.padding = '8px'
+        divTextOverlay.style.color = '#fff'
+        divTextOverlay.style.fontWeight = '800'
+        divTextOverlay.style.fontFamily = 'RobotoSlab'
+        divTextOverlay.style.borderRadius = '6px 6px 6px 6px'
+        divOverlay.appendChild(divTextOverlay)
+        divCounter.id = 'counter' + uniqueID
+        divCounter.style.backgroundColor = '#006dc1'
+        divCounter.style.color = '#fff'
+        divCounter.style.fontSize = '12px'
+        divCounter.style.padding = '8px'
+        divCounter.style.borderRadius = '0 0 4px 4px'
         
-        const createRefresher = function (uniqueID) {
-            let divCounter = document.createElement('div')
-            let divOverlay = document.createElement('div')
-            let divTextOverlay = document.createElement('div')
-            divOverlay.id = 'overlay' + uniqueID
-            divOverlay.style.position = 'absolute'
-            divOverlay.style.top = '0'
-            divOverlay.style.display = 'none'
-            divOverlay.style.alignItems = 'center'
-            divOverlay.style.justifyContent = 'center'
-            divOverlay.style.backgroundColor = '#fff'
-            divOverlay.style.width = '100%'
-            divOverlay.style.height = 'calc(100% - 36px)'
-            divOverlay.style.backgroundColor = '#d8e9f6'
-            divTextOverlay.innerHTML = 'Lade Inhalt neu...'
-            divTextOverlay.style.backgroundColor = '#005293'
-            divTextOverlay.style.padding = '8px'
-            divTextOverlay.style.color = '#fff'
-            divTextOverlay.style.fontWeight = '800'
-            divTextOverlay.style.fontFamily = 'RobotoSlab'
-            divTextOverlay.style.borderRadius = '6px 6px 6px 6px'
-            divOverlay.appendChild(divTextOverlay)
-            divCounter.id = 'counter' + uniqueID
-            divCounter.style.backgroundColor = '#006dc1'
-            divCounter.style.color = '#fff'
-            divCounter.style.fontSize = '12px'
-            divCounter.style.padding = '8px'
-            divCounter.style.borderRadius = '0 0 4px 4px'
-            
-            rootElement.style.position = 'relative'
-            rootElement.appendChild(divCounter)
-            rootElement.appendChild(divOverlay)
-            startCountdown()
-        }
+        rootElement.style.position = 'relative'
+        rootElement.appendChild(divCounter)
+        rootElement.appendChild(divOverlay)
+        startCountdown()
+    }
 
-        const refreshIframe = function () {
-            console.log('Reload')
-            iframeRefresh.style.opacity = '0'
-            iframeRefresh.src =
-                iframeRefresh.src.split('?')[0] + '?_=' + new Date().getTime()
-            clearInterval(timer)
-        }
-        const startCountdown = function () {
-            remainingTime = Number(iFrameConfig.refreshIntervall)
-            setTimeout(function () {
-                iframeRefresh.style.opacity = '1'
-                document.getElementById('overlay' + uniqueID).style.display = 'none'
-            }, 1000)
-            timer = setInterval(function () {
-                checkTimer()
-            }, 1000)
-        }
-        const checkTimer = function () {
-            if (remainingTime >= 0) {
+    const refreshIframe = function () {
+        console.log('Reload')
+        iframeRefresh.style.opacity = '0'
+        iframeRefresh.src =
+            iframeRefresh.src.split('?')[0] + '?_=' + new Date().getTime()
+        clearInterval(timer)
+    }
+    const startCountdown = function () {
+        remainingTime = Number(intervall)
+        setTimeout(function () {
+            iframeRefresh.style.opacity = '1'
+            document.getElementById('overlay' + uniqueID).style.display = 'none'
+        }, 1000)
+        timer = setInterval(function () {
+            checkTimer()
+        }, 1000)
+    }
+    const checkTimer = function () {
+        if (remainingTime >= 0) {
+            document.getElementById('counter' + uniqueID).innerHTML =
+                'Dieser Inhalt wird automatisch aktualisiert in ' +
+                secondsToTimeString(remainingTime) +
+                ' Min.'
+            remainingTime -= 1
+            if (remainingTime == -1) {
+                document.getElementById('overlay' + uniqueID).style.display = 'flex'
                 document.getElementById('counter' + uniqueID).innerHTML =
-                    'Dieser Inhalt wird automatisch aktualisiert in ' +
-                    secondsToTimeString(remainingTime) +
-                    ' Min.'
-                remainingTime -= 1
-                if (remainingTime == -1) {
-                    document.getElementById('overlay' + uniqueID).style.display = 'flex'
-                    document.getElementById('counter' + uniqueID).innerHTML =
-                        'Zeitintervall wird neu gestartet...'
-                }
-            } else {
-                refreshIframe()
-                startCountdown()
+                    'Zeitintervall wird neu gestartet...'
             }
+        } else {
+            refreshIframe()
+            startCountdown()
         }
-        const secondsToTimeString = function (seconds) {
-            return new Date(seconds * 1000).toISOString().substr(14, 5)
-        }
-        return {
-            createRefresher: createRefresher
-        }
     }
+    const secondsToTimeString = function (seconds) {
+        return new Date(seconds * 1000).toISOString().substr(14, 5)
+    }
+    return {
+        createRefresher: createRefresher
+    }
+}
 
-    export default DataWrapperContentRefresher            
+export default DataWrapperContentRefresher            

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

@@ -1,28 +1,62 @@
-const DataWrapperNoResponsiveIframe = function (context, configAR, configFixedHeight, comfigEmbedCode) {
+const DataWrapperNoResponsiveIframe = function (context, configAR, configFixedHeight, embedCode) {
     
     const { element: rootElement } = context
     let aspectRatio = configAR
     let fixedHeight = configFixedHeight
-    let embedCode = comfigEmbedCode
 
-    const createNoResponsiveIframe = function (aspectRatioClass) {
+    const createNoResponsiveIframe = function () {
 
    
     var parentDiv = document.createElement('div')
-    parentDiv.className = 'copytext__scrollWrapper'
+    //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) {
-            div.className = 'noaspect_datawrapper_cdn'
+            //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 {
-            div.className = aspectRatioClass + ' datawrapper_cdn'
+        //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')
-    iframe.className = 'w-full h-full datawrapper_cdn'
+
+    //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', '')

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

@@ -23,19 +23,24 @@ const ExternalService = function (context) {
         embedType = options.embedType,
         dataPolicyCheck = options.dataPolicyCheck || false,
         id = options.id,
-        iFrameConfig = options.iFrameConfig,
-        isWebview = window.parent.document.documentElement.classList.contains('webview'),
-        button = hr$('.js-dataPolicyTeaser__button', rootElement)[0]
-
+        iFrameConfig = options.iFrameConfig
     let acceptButton,
         acceptAlwaysCheckbox = hr$('.js-dataPolicy-acceptPermanentely', rootElement)[0],
-        dataPolicySettingsButton = hr$('.js-data-policy-settings-button', rootParent)[0],
-        embedCode = options.embedCode,
+        dataPolicySettingsButton = hr$('.js-data-policy-settings-button', rootParent)[0]
+    let embedCode = options.embedCode,
         iframe,
         settingsCookie,
-        isExternalServiceLoaded = false
-
+        noResponsiveIframe,
+        contentRefresher,
+        uniqueId,
+        isExternalServiceLoaded = false,
+        isWebview = window.parent.document.documentElement.classList.contains('webview')
 
+    const testDOMElements = function () {
+        console.log(rootElement)
+        console.log(rootParent)
+        console.log(acceptAlwaysCheckbox)
+    }
     const embedExternalService = function (callback) {
         $.ajax({
             type: 'GET',
@@ -101,7 +106,7 @@ const ExternalService = function (context) {
                 }
                 break
             default:
-                loadIframe()
+                loadIframe() //für alle Dienste die nicht der DSGVO Datapolicy unterliegen
         }
     }
 
@@ -123,34 +128,49 @@ const ExternalService = function (context) {
         script.type = 'text/javascript'
         rootElement.appendChild(script)
     }
+    const createUniqueID = function() {
+       uniqueId = Math.random().toString(36).replace(/[^a-z]+/g, '').substring(2, 10)
+    }
+
+    const getAspectRatioClass = function () {
+        switch (iFrameConfig.aspectRatio) {
+            case '16x9':
+                return "ar-16-9"
+            case '16x7':
+                return "ar-16-7"
+            case '4x3':
+                return "ar-4-3"
+            case '100x27':
+                return "ar-100-27"
+            case '100':
+                return "ar-1-1"                
+            case '9x16':
+                return "ar-9-16"
+            case '7x16':
+                return "ar-7-16"
+            default:
+                return "ar-16-9"
+        }   
+    }
 
     const createDataWrapperEmbed = function () {
         removeDatapolicyBox()
-        var uniqueID = function () {
-            return Math.random()
-            .toString(36)
-            .replace(/[^a-z]+/g, '')
-            .substring(2, 10)
-        }
-        let contentRefresher = new DataWrapperContentRefresher(context, uniqueID)
-        let noResponsiveIframe = new DataWrapperNoResponsiveIframe(context, iFrameConfig.aspectRatio, iFrameConfig.fixedHeight, embedCode)
-
+        createUniqueID()
         if (iFrameConfig.noResponsiveIframe == 'true') {
-            noResponsiveIframe.createNoResponsiveIframe(getAspectRatioClass())
+            noResponsiveIframe = new DataWrapperNoResponsiveIframe(context, iFrameConfig.aspectRatio, iFrameConfig.fixedHeight, embedCode)
+            noResponsiveIframe.createNoResponsiveIframe()
         } 
         else {
             var iframe = document.createElement('iframe')
-            iframe.className = 'dataWrapper-embed'
-            iframe.style.width = '0'
-            iframe.style.minWidth = '100% !important'
-            iframe.style.border = 'none'
+              //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
+            iframe.id = 'datawrapper-chart-' + uniqueId
             rootElement.insertBefore(iframe, null)
 
             loadScript(
@@ -159,6 +179,8 @@ const ExternalService = function (context) {
                 true
             )
             if (iFrameConfig.refreshContent == 'true') {
+                console.log("contentRefresher anfügen")
+                contentRefresher = new DataWrapperContentRefresher(context, uniqueId, iFrameConfig.refreshIntervall)
                 contentRefresher.createRefresher()
             }
         }
@@ -251,64 +273,39 @@ const ExternalService = function (context) {
         }, 250)
     }
 
-    const getAspectRatioClass = function () {
-        switch (iFrameConfig.aspectRatio) {
-            case '16x9':
-                return "ar-16-9"
-            case '16x7':
-                return "ar-16-7"
-            case '4x3':
-                return "ar-4-3"
-            case '100x27':
-                return "ar-100-27"
-            case '100':
-                return "ar-1-1"                
-            case '9x16':
-                return "ar-9-16"
-            case '7x16':
-                return "ar-7-16"
-            default:
-                return "ar-16-9"
-        }   
-    }
-
     const loadIframe = function () {
         console.log('load iframe ' + id)
         iframe =
             "<iframe id='i_frame' data-isloaded='0' src='" +
             embedCode +
-            "' frameborder='0' class='" +
-            iFrameConfig.heightClass +
-            "' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>"
+            "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>"
         if (iFrameConfig.aspectRatio) {
             iframe =
-                "<div class='copytext__scrollWrapper'><div class='" +
+                "<div class='!h-full'><div class=" +
                 getAspectRatioClass() +
                 ' ' +
                 id +
                 "'><iframe id='i_frame' data-isloaded='0' src='" +
                 embedCode +
-                "' frameborder='0' class='w-full h-full " +
-                iFrameConfig.heightClass +
-                ' ' +
+                "' frameborder='0' class='w-full h-full '" +
                 id +
                 "' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></div>"
             //TODO Weiche Animation der Inhalte
         } else {
             if (iFrameConfig.fixedHeight) {
                 iframe =
-                    "<div class='copytext__scrollWrapper -fixedHeight' style='height:" +
+                    "<div class='!h-full' style='height:" +
                     iFrameConfig.fixedHeight +
-                    "px'><iframe data-isloaded='0' class='w-full h-full' src='" +
+                    "px'><iframe data-isloaded='0' src='" +
                     embedCode +
-                    "' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
+                    "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
             } else {
                 iframe =
-                    "<div class='copytext__scrollWrapper " +
+                    "<div class='!h-full " +
                     id +
-                    "'><iframe data-isloaded='0' class='w-full h-full' src='" +
+                    "'><iframe data-isloaded='0' src='" +
                     embedCode +
-                    "' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
+                    "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
             }
         }
 
@@ -414,6 +411,7 @@ 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()

package/src/stories/views/components/externalService/external_service.mdx

@@ -24,4 +24,23 @@ Die interaktiven Elemente sind:
 <li> einen Aktions-Button, der den Inhalt einmalig, bis zum nächsten Refresh oder erneuten Besuch der Seite anzeigt.</li>
 </ul>
 
-<Story of={ExternalServiceStories.ExterneDienste} />
+
+## Beispiel Dienst Giphy
+<Story of={ExternalServiceStories.ExterneDiensteGiphy} />
+
+## Beispiel Dienst Datawrapper mit responsivem Iframe
+Der Datawrapper wird standardmässig mit einem responsiven Iframe geladen, d.h. das der Inhalt des Iframes - die Datengrafik - an den äußeren Container skaliert wird.
+
+<Story of={ExternalServiceStories.ExterneDiensteDatawrapper} />
+
+## Beispiel Dienst Datawrapper ohne responsives Iframe und fester Höhe
+Ist die Konfiguration "NoResponsiveIFrame" auf TRUE gesetzt werden die Felder für "FixedHeight" und "AspectRatio" ausgelesen. Ist das Feld FixedHeight befüllt, wird der Wert daraus übernommen
+<Story of={ExternalServiceStories.ExterneDiensteDatawrapperNoResponsiveFixedHeight} />
+
+## Beispiel Dienst Datawrapper ohne responsives Iframe und AspectRatio
+Ist die Konfiguration "NoResponsiveIFrame" auf TRUE gesetzt werden die Felder für "FixedHeight" und "AspectRatio" ausgelesen. Ist das Feld AspectRatio ausgewählt wird der Wert daraus übernommen
+<Story of={ExternalServiceStories.ExterneDiensteDatawrapperNoResponsiveAspectRatio} />
+
+
+## Beispiel Dienst Datawrapper mit ContentRefresher
+<Story of={ExternalServiceStories.ExterneDiensteDatawrapperContentRefresher} />

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

@@ -23,8 +23,29 @@ export default {
     },
 }
 
-export const ExterneDienste = {
+export const ExterneDiensteGiphy = {
     render: TemplatePageExternalService.bind({}),
-    name: 'Externe Dienste',
-    args: ExternalServiceContent, 
-}
+    name: 'Externe Dienste Giphy',
+    args: ExternalServiceContent.Giphy, 
+}
+export const ExterneDiensteDatawrapper = {
+    render: TemplatePageExternalService.bind({}),
+    name: 'Externe Dienste Datawrapper MIT Responsivem Iframe',
+    args: ExternalServiceContent.Datawrapper_CDN, 
+}
+export const ExterneDiensteDatawrapperNoResponsiveFixedHeight = {
+    render: TemplatePageExternalService.bind({}),
+    name: 'Externe Dienste Datawrapper OHNE Responsivem Iframe (Feste Höhe)',
+    args: ExternalServiceContent.Datawrapper_CDN_NoResponsiveFixedHeight, 
+}
+export const ExterneDiensteDatawrapperNoResponsiveAspectRatio = {
+    render: TemplatePageExternalService.bind({}),
+    name: 'Externe Dienste Datawrapper OHNE Responsivem Iframe (Aspect Ratio)',
+    args: ExternalServiceContent.Datawrapper_CDN_NoResponsiveAspectRatio, 
+}
+export const ExterneDiensteDatawrapperContentRefresher = {
+    render: TemplatePageExternalService.bind({}),
+    name: 'Externe Dienste Datawrapper mit ContentRefresher',
+    args: ExternalServiceContent.Datawrapper_CDN_NoResponsiveFixedHeightReload, 
+}
+