hr-design-system-handlebars 1.67.7 → 1.67.8

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v1.67.8 (Wed May 15 2024)
+
+#### 🐛 Bug Fix
+
+- Refactoring datawrapper for webcomponent optional [#920](https://github.com/mumprod/hr-design-system-handlebars/pull/920) ([@Paul-Atreidis](https://github.com/Paul-Atreidis) [@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 2
+
+- [@Paul-Atreidis](https://github.com/Paul-Atreidis)
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.67.7 (Wed May 15 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

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

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

@@ -1,11 +1,18 @@
         
-const DataWrapperContentRefresher = function (context, id, refreshIntervall) {
+const DataWrapperContentRefresher = function (context, id, refreshIntervall, webcomponent) {
     const { element: rootElement } = context
     let remainingTime
     let timer
     let uniqueID = id
     let intervall = refreshIntervall
+    
+    if (webcomponent) {
+    let container = document.getElementById('datawrapper-chart-' + uniqueID)
+    let script = document.getElementById('datawrapper-component-js')
+    }
+    else{
     let iframeRefresh = document.getElementById('datawrapper-chart-' + uniqueID)
+    }
     
     const createRefresher = function () {
         console.log("Refresher bauen")
@@ -45,15 +52,26 @@ const DataWrapperContentRefresher = function (context, id, refreshIntervall) {
 
     const refreshIframe = function () {
         console.log('Reload')
-        iframeRefresh.style.opacity = '0'
-        iframeRefresh.src =
-            iframeRefresh.src.split('?')[0] + '?_=' + new Date().getTime()
+        if(webcomponent) {
+            container.style.opacity = '0'
+            script.src = script.src.split('?')[0] + '?_=' + new Date().getTime()
+        }
+        else{
+            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'
+            if(webcomponent) {
+                container.style.opacity = '1'    
+            }
+            else{
+                iframeRefresh.style.opacity = '1'
+            }
             document.getElementById('overlay' + uniqueID).style.display = 'none'
         }, 1000)
         timer = setInterval(function () {

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

@@ -172,19 +172,11 @@ const ExternalService = function (context) {
     const createDataWrapperEmbed = function () {
         removeDatapolicyBox()
         createUniqueID()
-        if (iFrameConfig.noResponsiveIframe == 'true') {
-            noResponsiveIframe = new DataWrapperNoResponsiveIframe(context, iFrameConfig.aspectRatio, iFrameConfig.fixedHeight, uniqueId, embedCode)
-            noResponsiveIframe.createNoResponsiveIframe()
-
-            if (iFrameConfig.refreshContent == 'true') {
-                console.log("contentRefresher anfügen")
-                contentRefresher = new DataWrapperContentRefresher(context, uniqueId, iFrameConfig.refreshIntervall)
-                contentRefresher.createRefresher()
-            }
-        } 
-        else {
+        if (iFrameConfig.responsiveIframe == 'true') {
+            
+            //Responsives Iframe
             var iframe = document.createElement('iframe')
-              //Auflösen nach Tailwind-Klassen //dataWrapper-embed
+            //Auflösen nach Tailwind-Klassen //dataWrapper-embed
             iframe.className = 'w-0 !min-w-full border-0'
             iframe.setAttribute('webkitallowfullscreen', '')
             iframe.setAttribute('mozallowfullscreen', '')
@@ -199,13 +191,53 @@ const ExternalService = function (context) {
                 '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)
+                contentRefresher = new DataWrapperContentRefresher(context, uniqueId, iFrameConfig.refreshIntervall, false)
                 contentRefresher.createRefresher()
             }
+        } 
+        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 {
+                //Klassisches Iframe mit AR-Wrapper oder fester Höhe
+                noResponsiveIframe = new DataWrapperNoResponsiveIframe(context, iFrameConfig.aspectRatio, iFrameConfig.fixedHeight, uniqueId, embedCode)
+                noResponsiveIframe.createNoResponsiveIframe()
+    
+                if (iFrameConfig.refreshContent == 'true') {
+                    console.log("contentRefresher anfügen")
+                    contentRefresher = new DataWrapperContentRefresher(context, uniqueId, iFrameConfig.refreshIntervall, false)
+                    contentRefresher.createRefresher()
+                }
+            }
+           
+           
         }
     }
 

package/dist/views/components/externalService/external_service_with_datapolicy_check.hbs

@@ -1,8 +1,9 @@
 <div class="grid clear-both{{#unless _isTeaser}} mt-10{{/unless}}">
         {{~> components/base/a11y/hiddenText _locaTag="story_externalservice_intro_sr" ~}}        
-        <div class="c-externalService c-externalService__{{this.externalServiceConfig.externalServiceId}} js-load"
+        <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}}","dataPolicyCheck": true,"iFrameConfig": { {{#if this.fixedHeight}}
-                "fixedHeight":"{{this.fixedHeight}}"{{else}}{{#if this.aspectRatio}}"aspectRatio":"{{this.aspectRatio}}"{{else}}"aspectRatio":"16x9"{{/if}}{{/if}},"noResponsiveIframe":"{{{this.setResponsiveIframe}}}"{{#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}},"responsiveIframe":"{{{this.setResponsiveIframe}}}","webcomponent":"{{{this.setWebcomponent}}}"{{#if this.setTimedReloadIframe}},"refreshContent":"{{{this.setTimedReloadIframe}}}","refreshIntervall":"{{this.setTimeForReload}}"{{/if}} }}'>
             {{~> components/externalService/components/external_service_data_policy ~}}
         </div>
         {{~> components/externalService/components/external_service_caption ~}}

package/dist/views_static/components/externalService/external_service_with_datapolicy_check.hbs

@@ -1,8 +1,9 @@
 <div class="grid clear-both{{#unless _isTeaser}} mt-10{{/unless}}">
         {{~> components/base/a11y/hiddenText _locaTag="story_externalservice_intro_sr" ~}}        
-        <div class="c-externalService c-externalService__{{this.externalServiceConfig.externalServiceId}} js-load"
+        <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}}","dataPolicyCheck": true,"iFrameConfig": { {{#if this.fixedHeight}}
-                "fixedHeight":"{{this.fixedHeight}}"{{else}}{{#if this.aspectRatio}}"aspectRatio":"{{this.aspectRatio}}"{{else}}"aspectRatio":"16x9"{{/if}}{{/if}},"noResponsiveIframe":"{{{this.setResponsiveIframe}}}"{{#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}},"responsiveIframe":"{{{this.setResponsiveIframe}}}","webcomponent":"{{{this.setWebcomponent}}}"{{#if this.setTimedReloadIframe}},"refreshContent":"{{{this.setTimedReloadIframe}}}","refreshIntervall":"{{this.setTimeForReload}}"{{/if}} }}'>
             {{~> components/externalService/components/external_service_data_policy ~}}
         </div>
         {{~> components/externalService/components/external_service_caption ~}}

package/package.json

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "1.67.7",
+    "version": "1.67.8",
     "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,11 +1,18 @@
         
-const DataWrapperContentRefresher = function (context, id, refreshIntervall) {
+const DataWrapperContentRefresher = function (context, id, refreshIntervall, webcomponent) {
     const { element: rootElement } = context
     let remainingTime
     let timer
     let uniqueID = id
     let intervall = refreshIntervall
+    
+    if (webcomponent) {
+    let container = document.getElementById('datawrapper-chart-' + uniqueID)
+    let script = document.getElementById('datawrapper-component-js')
+    }
+    else{
     let iframeRefresh = document.getElementById('datawrapper-chart-' + uniqueID)
+    }
     
     const createRefresher = function () {
         console.log("Refresher bauen")
@@ -45,15 +52,26 @@ const DataWrapperContentRefresher = function (context, id, refreshIntervall) {
 
     const refreshIframe = function () {
         console.log('Reload')
-        iframeRefresh.style.opacity = '0'
-        iframeRefresh.src =
-            iframeRefresh.src.split('?')[0] + '?_=' + new Date().getTime()
+        if(webcomponent) {
+            container.style.opacity = '0'
+            script.src = script.src.split('?')[0] + '?_=' + new Date().getTime()
+        }
+        else{
+            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'
+            if(webcomponent) {
+                container.style.opacity = '1'    
+            }
+            else{
+                iframeRefresh.style.opacity = '1'
+            }
             document.getElementById('overlay' + uniqueID).style.display = 'none'
         }, 1000)
         timer = setInterval(function () {

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

@@ -172,19 +172,11 @@ const ExternalService = function (context) {
     const createDataWrapperEmbed = function () {
         removeDatapolicyBox()
         createUniqueID()
-        if (iFrameConfig.noResponsiveIframe == 'true') {
-            noResponsiveIframe = new DataWrapperNoResponsiveIframe(context, iFrameConfig.aspectRatio, iFrameConfig.fixedHeight, uniqueId, embedCode)
-            noResponsiveIframe.createNoResponsiveIframe()
-
-            if (iFrameConfig.refreshContent == 'true') {
-                console.log("contentRefresher anfügen")
-                contentRefresher = new DataWrapperContentRefresher(context, uniqueId, iFrameConfig.refreshIntervall)
-                contentRefresher.createRefresher()
-            }
-        } 
-        else {
+        if (iFrameConfig.responsiveIframe == 'true') {
+            
+            //Responsives Iframe
             var iframe = document.createElement('iframe')
-              //Auflösen nach Tailwind-Klassen //dataWrapper-embed
+            //Auflösen nach Tailwind-Klassen //dataWrapper-embed
             iframe.className = 'w-0 !min-w-full border-0'
             iframe.setAttribute('webkitallowfullscreen', '')
             iframe.setAttribute('mozallowfullscreen', '')
@@ -199,13 +191,53 @@ const ExternalService = function (context) {
                 '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)
+                contentRefresher = new DataWrapperContentRefresher(context, uniqueId, iFrameConfig.refreshIntervall, false)
                 contentRefresher.createRefresher()
             }
+        } 
+        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 {
+                //Klassisches Iframe mit AR-Wrapper oder fester Höhe
+                noResponsiveIframe = new DataWrapperNoResponsiveIframe(context, iFrameConfig.aspectRatio, iFrameConfig.fixedHeight, uniqueId, embedCode)
+                noResponsiveIframe.createNoResponsiveIframe()
+    
+                if (iFrameConfig.refreshContent == 'true') {
+                    console.log("contentRefresher anfügen")
+                    contentRefresher = new DataWrapperContentRefresher(context, uniqueId, iFrameConfig.refreshIntervall, false)
+                    contentRefresher.createRefresher()
+                }
+            }
+           
+           
         }
     }
 

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

@@ -1,8 +1,9 @@
 <div class="grid clear-both{{#unless _isTeaser}} mt-10{{/unless}}">
         {{~> components/base/a11y/hiddenText _locaTag="story_externalservice_intro_sr" ~}}        
-        <div class="c-externalService c-externalService__{{this.externalServiceConfig.externalServiceId}} js-load"
+        <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}}","dataPolicyCheck": true,"iFrameConfig": { {{#if this.fixedHeight}}
-                "fixedHeight":"{{this.fixedHeight}}"{{else}}{{#if this.aspectRatio}}"aspectRatio":"{{this.aspectRatio}}"{{else}}"aspectRatio":"16x9"{{/if}}{{/if}},"noResponsiveIframe":"{{{this.setResponsiveIframe}}}"{{#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}},"responsiveIframe":"{{{this.setResponsiveIframe}}}","webcomponent":"{{{this.setWebcomponent}}}"{{#if this.setTimedReloadIframe}},"refreshContent":"{{{this.setTimedReloadIframe}}}","refreshIntervall":"{{this.setTimeForReload}}"{{/if}} }}'>
             {{~> components/externalService/components/external_service_data_policy ~}}
         </div>
         {{~> components/externalService/components/external_service_caption ~}}