hr-design-system-handlebars 1.67.6 → 1.67.8

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.6",
+    "version": "1.67.8",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "storybook dev -p 6006 public",

package/src/assets/icons/icons/svgmap/print.svg

@@ -1,16 +1,16 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg id="print" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: #006dc1;
-        stroke-width: 0px;
-      }
-    </style>
-  </defs>
-  <path class="cls-1" d="M275.5,243.5h-24.08c-5.52,0-10-4.48-10-10s4.48-10,10-10h24.08c5.51,0,10-4.49,10-10v-102c0-5.51-4.49-10-10-10H44.5c-5.51,0-10,4.49-10,10v102c0,5.51,4.49,10,10,10h22.04c5.52,0,10,4.48,10,10s-4.48,10-10,10h-22.04c-16.54,0-30-13.46-30-30v-102c0-16.54,13.46-30,30-30h231c16.54,0,30,13.46,30,30v102c0,16.54-13.46,30-30,30Z"/>
-  <path class="cls-1" d="M209.96,217h-100c-5.52,0-10-4.48-10-10s4.48-10,10-10h100c5.52,0,10,4.48,10,10s-4.48,10-10,10Z"/>
-  <path class="cls-1" d="M209.96,256h-100c-5.52,0-10-4.48-10-10s4.48-10,10-10h100c5.52,0,10,4.48,10,10s-4.48,10-10,10Z"/>
-  <path class="cls-1" d="M232.5,101.5H86.5c-12.13,0-22-9.87-22-22v-42c0-12.13,9.87-22,22-22h146c12.13,0,22,9.87,22,22v42c0,12.13-9.87,22-22,22ZM86.5,35.5c-1.1,0-2,.9-2,2v42c0,1.1.9,2,2,2h146c1.1,0,2-.9,2-2v-42c0-1.1-.9-2-2-2H86.5Z"/>
-  <path class="cls-1" d="M232.5,304.5H86.5c-12.13,0-22-9.87-22-22v-98c0-12.13,9.87-22,22-22h146c12.13,0,22,9.87,22,22v98c0,12.13-9.87,22-22,22ZM86.5,182.5c-1.1,0-2,.9-2,2v98c0,1.1.9,2,2,2h146c1.1,0,2-.9,2-2v-98c0-1.1-.9-2-2-2H86.5Z"/>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="88px"
+	 height="88px" viewBox="0 0 88 88" enable-background="new 0 0 88 88" xml:space="preserve">
+<g id="Ebene_1">
+</g>
+<g id="Ebene_2">
+	<path d="M0,0v88h88V0H0z M27.644,23.183c0-1.487,1.189-2.378,2.379-2.378h27.954c1.488,0,2.379,1.189,2.379,2.378v1.785
+		c0,1.487-1.19,2.378-2.379,2.378H30.022c-1.189,0-2.379-1.189-2.379-2.378V23.183z M53.814,67.195H34.483
+		c-1.487,0-2.379-1.188-2.379-2.379V50.244c0-1.486,1.189-2.379,2.379-2.379h19.033c1.488,0,2.379,1.191,2.379,2.379l0.296,14.572
+		C56.191,66.305,55.005,67.195,53.814,67.195z M71.359,58.572h-8.92c-1.488,0-2.379-1.189-2.379-2.381V43.404H28.536v12.49
+		c0,1.488-1.189,2.379-2.38,2.379H16.64c-1.486,0-2.378-1.188-2.378-2.379V34.483c0-1.487,1.189-2.379,2.378-2.379h54.42
+		c1.488,0,2.384,1.19,2.384,2.379l0.295,21.708C73.738,57.678,72.548,58.572,71.359,58.572z"/>
+</g>
+</svg>