hr-design-system-handlebars 1.70.3 → 1.70.5

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.70.5 (Wed Jun 12 2024)
+
+#### 🐛 Bug Fix
+
+- Europawahl: Externen Dienst für Ergebnisse einrichten [#942](https://github.com/mumprod/hr-design-system-handlebars/pull/942) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v1.70.4 (Wed Jun 12 2024)
+
+#### 🐛 Bug Fix
+
+- better positioning and handling of copymessage [#941](https://github.com/mumprod/hr-design-system-handlebars/pull/941) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
 # v1.70.3 (Tue Jun 11 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1317,6 +1317,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .-mt-6 {
   margin-top: -1.5rem;
 }
+.-mt-8 {
+  margin-top: -2rem;
+}
 .-mt-\[18px\] {
   margin-top: -18px;
 }
@@ -1362,6 +1365,12 @@ article.indexTextDS .indexTextHighlighted .link {
 .mb-8 {
   margin-bottom: 2rem;
 }
+.ml-0 {
+  margin-left: 0px;
+}
+.ml-0\.5 {
+  margin-left: 0.125rem;
+}
 .ml-1 {
   margin-left: 0.25rem;
 }
@@ -3350,7 +3359,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1718128408094;
+  counter-reset: cnt1718195046691;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3729,7 +3738,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1718128408094 1;
+  counter-increment: cnt1718195046691 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3745,7 +3754,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1718128408094);
+  content: counter(cnt1718195046691);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

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

@@ -102,7 +102,10 @@ const ExternalService = function (context) {
                         break
                     case 'wahlomat':
                         createWahlOMatEmbed()
-                        break    
+                        break  
+                    case 'wahl-gemeinde-ergebnis':
+                        createWahlGemeindeErgebnis()
+                        break  
                     default:
                         console.error('No JS Config for external service ' + id)
                         break
@@ -112,7 +115,156 @@ const ExternalService = function (context) {
                 loadIframe() //für alle Dienste die nicht der DSGVO Datapolicy unterliegen
         }
     }
+    const createWahlGemeindeErgebnis = function () {
+        let embedCode = options.embedCode,
+            cleanUrl,
+            wahlKreisVersionJsonUrl,
+            wahlkreis,
+            wahlid,
+            jsonResponse,
+            iFrameElement,
+            iframeHeight = 300
 
+        const cleanVariables = function (variable) {
+            while (variable.charAt(0) === '&') {
+                variable = variable.substring(1)
+            }
+            return variable
+        }
+        const extractDataFromEmbedCode = function () {
+            const parts = embedCode.split('*')
+            if (parts.length === 4) {
+                cleanUrl = cleanVariables(decodeURIComponent(parts[0].trim()))
+                wahlkreis = cleanVariables(decodeURIComponent(parts[1].trim()))
+                wahlid = cleanVariables(decodeURIComponent(parts[2].trim()))
+                wahlKreisVersionJsonUrl = cleanVariables(decodeURIComponent(parts[3].trim()))
+            }
+        }
+        const loadIframe = function (version, url, wahlkreis) {
+            if (version) {
+                let iframeUrl = url.replace('{version}', version)
+                let iframe = document.createElement('iframe')
+                iframe.className = ''
+                iframe.style.border = 'none'
+                iframe.style.height = iframeHeight + 'px'
+                iframe.style.width = '100%'
+                iframe.setAttribute('webkitallowfullscreen', '')
+                iframe.setAttribute('mozallowfullscreen', '')
+                iframe.setAttribute('allowfullscreen', '')
+                iframe.setAttribute('scrolling', 'no')
+                iframe.setAttribute('frameborder', '0')
+                iframe.src = iframeUrl
+                iframe.id = 'wahl-gemeinde-ergebnis-' + wahlkreis
+                rootElement.innerHTML = ''
+                rootElement.insertBefore(iframe, null)
+                iFrameElement = document.getElementById('wahl-gemeinde-ergebnis-' + wahlkreis)
+            } else {
+                loadNoDataDiv('Es liegen zur Zeit noch keine Ergebnisse vor', 5)
+            }
+        }
+        const loadNoDataDiv = function (text, timeout) {
+            let div = document.createElement('div')
+            div.className =
+                'p-5 c-externalService__wahl-gemeinde-ergebnis-no-result rounded-tl-hr rounded-br-hr bg-highlight-1'
+            div.innerHTML =
+                '<div class="text-2xl text-clusterTeaserHeadline font-titleCluster mb-2">' +
+                text +
+                '</div>' +
+                '<div class="flex flex-row" >' +
+                '  <div class="">' +
+                '    <span>Dieser Inhalt wird automatisch aktualisiert in</span>' +
+                '    <span data-minutes>' +
+                timeout +
+                '    </span>' +
+                '    <span>Min</span>' +
+                '    <span data-seconds>0</span>' +
+                '    <span>Sek</span>' +
+                '  </div>' +
+                '</div>'
+            rootElement.innerHTML = ''
+            rootElement.insertBefore(div, null)
+            countdownMinutes(timeout, fetchJsonData)
+        }
+        const resizeIframe = function (newheight) {
+            if (newheight !== iframeHeight) {
+                iFrameElement.style.height = newheight + 'px'
+                iframeHeight = newheight
+            }
+        }
+        const processMessage = function (evt) {
+            if (evt.origin !== 'https://www.tagesschau.de') {
+                console.log('message', evt.origin + ' ist nicht vertrauenswürdig')
+            } else {
+                resizeIframe(evt.data)
+            }
+        }
+        const initMessageEventListener = function () {
+            if (window.addEventListener) {
+                // For standards-compliant web browsers
+                window.addEventListener('message', processMessage, false)
+            } else {
+                window.attachEvent('onmessage', processMessage)
+            }
+        }
+        const fetchJsonData = function () {
+            fetch(wahlKreisVersionJsonUrl, {
+                method: 'GET',
+                headers: {
+                    Accept: 'application/json',
+                },
+            })
+                .then((response) => response.json())
+                .then((jsonData) =>
+                    loadIframe(
+                        jsonData.hasOwnProperty(wahlkreis) && jsonData[wahlkreis].v
+                            ? jsonData[wahlkreis].v
+                            : null,
+                        cleanUrl,
+                        wahlkreis,
+                    ),
+                )
+                .catch(function () {
+                    loadNoDataDiv('Es liegen zur Zeit noch keine Ergebnisse vor', 5)
+                    console.log('No JSON Data Loaded')
+                })
+        }
+
+        function countdownMinutes(minutesToCountdown, callbackFunction) {
+            const second = 1000,
+                minute = second * 60,
+                hour = minute * 60,
+                day = hour * 24,
+                minuteElement = document.querySelector('[data-minutes]'),
+                secondElement = document.querySelector('[data-seconds]')
+
+            function AddMinutesToDate(date, minutes) {
+                return new Date(date.getTime() + minutes * 60000)
+            }
+
+            let countDown = AddMinutesToDate(new Date(), minutesToCountdown),
+                x = setInterval(function () {
+                    let now = new Date().getTime(),
+                        distance = countDown - now
+
+                    if (minuteElement != null) {
+                        minuteElement.innerText = Math.floor((distance % hour) / minute)
+                    }
+
+                    if (secondElement != null) {
+                        secondElement.innerText = Math.floor((distance % minute) / second)
+                    }
+
+                    if (distance < 1000) {
+                        callbackFunction()
+                        clearInterval(x)
+                    }
+                }, second)
+        }
+
+        extractDataFromEmbedCode()
+        initMessageEventListener()
+        fetchJsonData()
+    }
     const createWahlOMatEmbed = function () {
 
         const divTag = document.createElement('div')

package/dist/views/components/social_sharing/social_sharing_compact.hbs

@@ -11,7 +11,7 @@
             <div :class="{ 'flex justify-start col-full sm:col-main relative': $store.sharingIsVisible == false }">
                 <div :style="($store.footerIsVisible && !$screen('lg')) && {bottom:$store.sharingBottomPos.current}" 
                     :class="{ 'bottom-[19px] flex-col absolute mt-3 rounded-md': $store.sharingIsVisible == false && $store.footerIsVisible == false,
-                                'flex-col absolute mt-3' : $store.footerIsVisible == true }"
+                                'flex-col absolute mt-3' : !$screen('lg') && $store.footerIsVisible == true && window.innerHeight > document.querySelector('#content').offsetHeight + document.querySelector('.sb-main-navigation').offsetHeight + (window.innerHeight - document.querySelector('footer').offsetTop) - document.querySelector('footer').offsetHeight}"
                     class="flex self-center gap-3 bg-white left-5">
                     <button 
                         class="order-2 p-2 text-white border border-button bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group"

package/dist/views/components/social_sharing/social_sharing_compact_icons.hbs

@@ -70,17 +70,17 @@
     >
         {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="copy-ds" _iconmap="icons" ~}}
     </a>
+    <div class="absolute flex flex-row items-center justify-start hidden w-auto h-8 -mt-8 ml-0.5 text-xs bg-white whitespace-nowrap js-copyMessage sm480:text-sm font-headingSerif dark:text-text-dark">
+        {{~> components/base/image/icon _addClass="w-7 h-7 text-green-600 mr-2" _icon="status-done" _iconmap="icons" ~}}
+        {{loca "share_copy_message" }}
+    </div>
 </li>
-<div class="absolute flex flex-row items-center justify-end hidden w-full h-8 text-xs bg-white js-copyMessage sm480:text-sm font-headingSerif dark:text-text-dark">
-    {{~> components/base/image/icon _addClass="w-6 h-6 text-green-600 mr-2" _icon="status-done" _iconmap="icons" ~}}
-    {{loca "share_copy_message" }}
-</div>
-
 <script>
     function copyHandler(){
         return  {  
             copyToClipboard(event) {
-                const messageDiv = document.querySelector('.js-copyMessage')
+                const clickedContainer = event.currentTarget.parentNode
+                const messageDiv = clickedContainer.querySelector('.js-copyMessage')
                 const el = document.createElement('textarea')
                 el.value = window.location.href
                 el.setAttribute('readonly', '')

package/dist/views_static/components/social_sharing/social_sharing_compact.hbs

@@ -11,7 +11,7 @@
             <div :class="{ 'flex justify-start col-full sm:col-main relative': $store.sharingIsVisible == false }">
                 <div :style="($store.footerIsVisible && !$screen('lg')) && {bottom:$store.sharingBottomPos.current}" 
                     :class="{ 'bottom-[19px] flex-col absolute mt-3 rounded-md': $store.sharingIsVisible == false && $store.footerIsVisible == false,
-                                'flex-col absolute mt-3' : $store.footerIsVisible == true }"
+                                'flex-col absolute mt-3' : !$screen('lg') && $store.footerIsVisible == true && window.innerHeight > document.querySelector('#content').offsetHeight + document.querySelector('.sb-main-navigation').offsetHeight + (window.innerHeight - document.querySelector('footer').offsetTop) - document.querySelector('footer').offsetHeight}"
                     class="flex self-center gap-3 bg-white left-5">
                     <button 
                         class="order-2 p-2 text-white border border-button bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group"

package/dist/views_static/components/social_sharing/social_sharing_compact_icons.hbs

@@ -70,17 +70,17 @@
     >
         {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="copy-ds" _iconmap="icons" ~}}
     </a>
+    <div class="absolute flex flex-row items-center justify-start hidden w-auto h-8 -mt-8 ml-0.5 text-xs bg-white whitespace-nowrap js-copyMessage sm480:text-sm font-headingSerif dark:text-text-dark">
+        {{~> components/base/image/icon _addClass="w-7 h-7 text-green-600 mr-2" _icon="status-done" _iconmap="icons" ~}}
+        {{loca "share_copy_message" }}
+    </div>
 </li>
-<div class="absolute flex flex-row items-center justify-end hidden w-full h-8 text-xs bg-white js-copyMessage sm480:text-sm font-headingSerif dark:text-text-dark">
-    {{~> components/base/image/icon _addClass="w-6 h-6 text-green-600 mr-2" _icon="status-done" _iconmap="icons" ~}}
-    {{loca "share_copy_message" }}
-</div>
-
 <script>
     function copyHandler(){
         return  {  
             copyToClipboard(event) {
-                const messageDiv = document.querySelector('.js-copyMessage')
+                const clickedContainer = event.currentTarget.parentNode
+                const messageDiv = clickedContainer.querySelector('.js-copyMessage')
                 const el = document.createElement('textarea')
                 el.value = window.location.href
                 el.setAttribute('readonly', '')

package/package.json

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

package/src/assets/fixtures/content/copytext/copytext_externalservice.json

@@ -4,6 +4,21 @@
             "isHeadline": true,
             "text": "Copytext mit externen Diensten"
         },
+        {
+            "isHeadline": true,
+            "text": "Wahl Gemeinde Ergebnis"
+        },        
+        {
+            "paragraphBoxItem": {
+                "isExternalService": true,
+                "toModel": {
+                    "externalService": {
+                        "@->jsoninclude": "external_service/external_service.inc.json",
+                        "@->contentpath": "Wahl_Gemeinde_Ergebnis"
+                    }
+                }
+            }
+        },
         {
             "isHeadline": true,
             "text": "360Grad"

package/src/assets/fixtures/external_service/external_service.inc.json

@@ -245,5 +245,20 @@
         "setResponsiveIframe": false,
         "setTimedReloadIframe": false,
         "setTimeForReload": ""
+    },
+    "Wahl_Gemeinde_Ergebnis": {
+        "externalServiceConfig": {
+            "makeConfigurable": false,
+            "embedAsIFrame": false,
+            "externalServiceId": "wahl-gemeinde-ergebnis",
+            "externalServiceEmbedType": "js",
+            "externalServiceName": "wahl-gemeinde-ergebnis"
+        },
+        "serviceUrl": "https://www.tagesschau.de/wahl/archiv/2024-06-09-EP-DE/charts/wahlkreis-detail/G06412000-{version}.shtml?externalEmbed*G06412000*&2024-06-09-EP-DE*&https%3A%2F%2Fwww.hessenschau.de%2Fpolitik%2Flandtagswahl%2Fkandidatencheck%2Fwk-versions.json",
+        "fixedHeight": "",
+        "aspectRatio": "",
+        "setResponsiveIframe": false,
+        "setTimedReloadIframe": false,
+        "setTimeForReload": ""
     }                                                                      
 }

package/src/stories/views/components/content/copytext/fixtures/copytext_externalservice.json

@@ -1 +1 @@
-{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit externen Diensten"},{"isHeadline":true,"text":"360Grad"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":false,"embedAsIFrame":true,"externalServiceId":"360grad","externalServiceEmbedType":"iFrame","externalServiceName":"360 Grad"},"serviceUrl":"https://static.hr.de/hessenschau/360/tour-altstadt/360Tour-altstadt-final1.html","aspectRatio":"100","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"ARD-Mediathek (Video)"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"ard_mediathek","externalServiceEmbedType":"iFrame","externalServiceName":"ARD Mediathek (Video)"},"serviceUrl":"https://www.ardmediathek.de/embed/Y3JpZDovL2Z1bmsubmV0LzExNzkwL3ZpZGVvLzE3NzQ2NzU?clientType=hr","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"ARTE Concert 2.0"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"arte_concert_new","externalServiceEmbedType":"iFrame","externalServiceName":"Arte Concert 2.0"},"serviceUrl":"https://www.arte.tv/player/v5/index.php?json_url=https%3A%2F%2Fapi.arte.tv%2Fapi%2Fplayer%2Fv2%2Fconfig%2Fde%2F116593-005-A&lang=de&autoplay=false&mute=0","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Bundesliga Audiostream"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":false,"embedAsIFrame":true,"externalServiceId":"bundesligaAudiostream","externalServiceEmbedType":"iFrame","externalServiceName":"Bundesliga Audiostream"},"serviceUrl":"https://livecenter.sportschau.de/iframe/spielplan-kompakt/co3/md11/////","aspectRatio":"9x16","fixedHeight":"600","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Datawrapper CDN"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"datawrapper_cdn","externalServiceEmbedType":"js","externalServiceName":"Datawrapper (Datengrafik)"},"serviceUrl":"https://datawrapper.dwcdn.net/IC3Xn/1/","fixedHeight":"380","setResponsiveIframe":true,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Esri Karte"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"esri","externalServiceEmbedType":"iFrame","externalServiceName":"Esri (Notfallkarte)"},"serviceUrl":"https://arcg.is/1aW0au0","aspectRatio":"100","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":"","externalServiceCaption":"Notfallkarte"}}}},{"isHeadline":true,"text":"Facebook"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"facebook-post","externalServiceEmbedType":"js","externalServiceName":"Facebook"},"serviceUrl":"https://www.facebook.com/ZooFFM/posts/1926440010874354","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Flourish"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"flourish","externalServiceEmbedType":"iFrame","externalServiceName":"Flourish (Datengrafik)"},"serviceUrl":"https://public.flourish.studio/story/18361/embed","fixedHeight":"550","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Giphy"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"giphy","externalServiceEmbedType":"iFrame","externalServiceName":"Giphy (animiertes GIF)"},"serviceUrl":"https://giphy.com/embed/ONxw4niC96zwk","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Instagram"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"instagram","externalServiceEmbedType":"js","externalServiceName":"Instagram"},"serviceUrl":"https://www.instagram.com/p/CEjxNt8lW4K/","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"X"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"twitter-post","externalServiceEmbedType":"js","externalServiceName":"X"},"serviceUrl":"https://twitter.com/tagesthemen/status/1578122540362465299","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Vimeo"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"vimeo","externalServiceEmbedType":"iFrame","externalServiceName":"Vimeo (Video)"},"serviceUrl":"https://player.vimeo.com/video/438111654","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Youtube"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"youtube","externalServiceEmbedType":"iFrame","externalServiceName":"YouTube (Video)"},"serviceUrl":"https://www.youtube-nocookie.com/embed/LMjXHYHZtrE?rel=0","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Youtube 360°"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"youtube360","externalServiceEmbedType":"iFrame","externalServiceName":"YouTube 360 (360° Video)"},"serviceUrl":"https://www.youtube-nocookie.com/embed/yT1pyf9oXGk","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":"","externalServiceCaption":"Eine Demo der Virtual Reality-Inszenierung '2049: Zeitreise Mobilität'"}}}},{"isHeadline":true,"text":"Statischer Dienst"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":false,"embedAsIFrame":true,"externalServiceId":"staticService","externalServiceEmbedType":"iFrame","externalServiceName":"Statischer Dienst"},"serviceUrl":"https://static.hr.de/hessenschau/btw21/linientool/unternehmensgruendung","fixedHeight":"1000","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Wahlmonitor"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":false,"embedAsIFrame":false,"externalServiceId":"wahlmonitor","externalServiceEmbedType":"js","externalServiceName":"Wahlmonitor"},"serviceUrl":"https://www.tagesschau.de/wahl/monitor-15/4e1_monitor_embed.js*data-externalembed=true data-electionid=2023-10-08-LT-DE-HE data-ratio=43 data-arrows=1 data-hideLinkContainer=1 data-lra=hr data-tagesschau=1","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Wahlkreiskarte"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":false,"embedAsIFrame":false,"externalServiceId":"wahlkreiskarte","externalServiceEmbedType":"js","externalServiceName":"Wahlkreiskarte"},"serviceUrl":"https://www.tagesschau.de/wahl/karte21/current/4e1_karte_embed.js*data-electionid=2023-10-08-LT-DE-HE data-y= data-a=K data-k= data-p= data-elements= data-site= data-q=","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Koalitionsrechner"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":false,"embedAsIFrame":true,"externalServiceId":"koalitionsrechner","externalServiceEmbedType":"iFrame","externalServiceName":"Koalitionsrechner"},"serviceUrl":"https://www.tagesschau.de/wahl/koalitionsrechner/2023-10-08-LT-DE-HE-koalitionsrechner_embed.shtml","fixedHeight":"550","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}}],"dataPolicy":{"serviceList":[{"key":"ard_mediathek","value":"ARD Mediathek (Video)"},{"key":"arte_concert","value":"Arte Concert"},{"key":"arte_concert_new","value":"Arte Concert 2.0"},{"key":"datawrapper_cdn","value":"Datawrapper (Datengrafik)"},{"key":"esri","value":"Esri (Notfallkarte)"},{"key":"facebook-post","value":"Facebook"},{"key":"flourish","value":"Flourish (Datengrafik)"},{"key":"giphy","value":"Giphy (animiertes GIF)"},{"key":"instagram","value":"Instagram"},{"key":"twitter-post","value":"Twitter"},{"key":"vimeo","value":"Vimeo (Video)"},{"key":"youtube","value":"YouTube (Video)"},{"key":"youtube360","value":"YouTube 360 (360° Video)"}]}}
+{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit externen Diensten"},{"isHeadline":true,"text":"Wahl Gemeinde Ergebnis"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":false,"embedAsIFrame":false,"externalServiceId":"wahl-gemeinde-ergebnis","externalServiceEmbedType":"js","externalServiceName":"wahl-gemeinde-ergebnis"},"serviceUrl":"https://www.tagesschau.de/wahl/archiv/2024-06-09-EP-DE/charts/wahlkreis-detail/G06412000-{version}.shtml?externalEmbed*G06412000*&2024-06-09-EP-DE*&https%3A%2F%2Fwww.hessenschau.de%2Fpolitik%2Flandtagswahl%2Fkandidatencheck%2Fwk-versions.json","fixedHeight":"","aspectRatio":"","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"360Grad"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":false,"embedAsIFrame":true,"externalServiceId":"360grad","externalServiceEmbedType":"iFrame","externalServiceName":"360 Grad"},"serviceUrl":"https://static.hr.de/hessenschau/360/tour-altstadt/360Tour-altstadt-final1.html","aspectRatio":"100","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"ARD-Mediathek (Video)"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"ard_mediathek","externalServiceEmbedType":"iFrame","externalServiceName":"ARD Mediathek (Video)"},"serviceUrl":"https://www.ardmediathek.de/embed/Y3JpZDovL2Z1bmsubmV0LzExNzkwL3ZpZGVvLzE3NzQ2NzU?clientType=hr","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"ARTE Concert 2.0"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"arte_concert_new","externalServiceEmbedType":"iFrame","externalServiceName":"Arte Concert 2.0"},"serviceUrl":"https://www.arte.tv/player/v5/index.php?json_url=https%3A%2F%2Fapi.arte.tv%2Fapi%2Fplayer%2Fv2%2Fconfig%2Fde%2F116593-005-A&lang=de&autoplay=false&mute=0","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Bundesliga Audiostream"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":false,"embedAsIFrame":true,"externalServiceId":"bundesligaAudiostream","externalServiceEmbedType":"iFrame","externalServiceName":"Bundesliga Audiostream"},"serviceUrl":"https://livecenter.sportschau.de/iframe/spielplan-kompakt/co3/md11/////","aspectRatio":"9x16","fixedHeight":"600","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Datawrapper CDN"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"datawrapper_cdn","externalServiceEmbedType":"js","externalServiceName":"Datawrapper (Datengrafik)"},"serviceUrl":"https://datawrapper.dwcdn.net/IC3Xn/1/","fixedHeight":"380","setResponsiveIframe":true,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Esri Karte"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"esri","externalServiceEmbedType":"iFrame","externalServiceName":"Esri (Notfallkarte)"},"serviceUrl":"https://arcg.is/1aW0au0","aspectRatio":"100","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":"","externalServiceCaption":"Notfallkarte"}}}},{"isHeadline":true,"text":"Facebook"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"facebook-post","externalServiceEmbedType":"js","externalServiceName":"Facebook"},"serviceUrl":"https://www.facebook.com/ZooFFM/posts/1926440010874354","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Flourish"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"flourish","externalServiceEmbedType":"iFrame","externalServiceName":"Flourish (Datengrafik)"},"serviceUrl":"https://public.flourish.studio/story/18361/embed","fixedHeight":"550","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Giphy"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"giphy","externalServiceEmbedType":"iFrame","externalServiceName":"Giphy (animiertes GIF)"},"serviceUrl":"https://giphy.com/embed/ONxw4niC96zwk","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Instagram"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"instagram","externalServiceEmbedType":"js","externalServiceName":"Instagram"},"serviceUrl":"https://www.instagram.com/p/CEjxNt8lW4K/","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"X"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"twitter-post","externalServiceEmbedType":"js","externalServiceName":"X"},"serviceUrl":"https://twitter.com/tagesthemen/status/1578122540362465299","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Vimeo"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"vimeo","externalServiceEmbedType":"iFrame","externalServiceName":"Vimeo (Video)"},"serviceUrl":"https://player.vimeo.com/video/438111654","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Youtube"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"youtube","externalServiceEmbedType":"iFrame","externalServiceName":"YouTube (Video)"},"serviceUrl":"https://www.youtube-nocookie.com/embed/LMjXHYHZtrE?rel=0","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Youtube 360°"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"youtube360","externalServiceEmbedType":"iFrame","externalServiceName":"YouTube 360 (360° Video)"},"serviceUrl":"https://www.youtube-nocookie.com/embed/yT1pyf9oXGk","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":"","externalServiceCaption":"Eine Demo der Virtual Reality-Inszenierung '2049: Zeitreise Mobilität'"}}}},{"isHeadline":true,"text":"Statischer Dienst"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":false,"embedAsIFrame":true,"externalServiceId":"staticService","externalServiceEmbedType":"iFrame","externalServiceName":"Statischer Dienst"},"serviceUrl":"https://static.hr.de/hessenschau/btw21/linientool/unternehmensgruendung","fixedHeight":"1000","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Wahlmonitor"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":false,"embedAsIFrame":false,"externalServiceId":"wahlmonitor","externalServiceEmbedType":"js","externalServiceName":"Wahlmonitor"},"serviceUrl":"https://www.tagesschau.de/wahl/monitor-15/4e1_monitor_embed.js*data-externalembed=true data-electionid=2023-10-08-LT-DE-HE data-ratio=43 data-arrows=1 data-hideLinkContainer=1 data-lra=hr data-tagesschau=1","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Wahlkreiskarte"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":false,"embedAsIFrame":false,"externalServiceId":"wahlkreiskarte","externalServiceEmbedType":"js","externalServiceName":"Wahlkreiskarte"},"serviceUrl":"https://www.tagesschau.de/wahl/karte21/current/4e1_karte_embed.js*data-electionid=2023-10-08-LT-DE-HE data-y= data-a=K data-k= data-p= data-elements= data-site= data-q=","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Koalitionsrechner"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":false,"embedAsIFrame":true,"externalServiceId":"koalitionsrechner","externalServiceEmbedType":"iFrame","externalServiceName":"Koalitionsrechner"},"serviceUrl":"https://www.tagesschau.de/wahl/koalitionsrechner/2023-10-08-LT-DE-HE-koalitionsrechner_embed.shtml","fixedHeight":"550","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}}],"dataPolicy":{"serviceList":[{"key":"ard_mediathek","value":"ARD Mediathek (Video)"},{"key":"arte_concert","value":"Arte Concert"},{"key":"arte_concert_new","value":"Arte Concert 2.0"},{"key":"datawrapper_cdn","value":"Datawrapper (Datengrafik)"},{"key":"esri","value":"Esri (Notfallkarte)"},{"key":"facebook-post","value":"Facebook"},{"key":"flourish","value":"Flourish (Datengrafik)"},{"key":"giphy","value":"Giphy (animiertes GIF)"},{"key":"instagram","value":"Instagram"},{"key":"twitter-post","value":"Twitter"},{"key":"vimeo","value":"Vimeo (Video)"},{"key":"youtube","value":"YouTube (Video)"},{"key":"youtube360","value":"YouTube 360 (360° Video)"}]}}

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

@@ -102,7 +102,10 @@ const ExternalService = function (context) {
                         break
                     case 'wahlomat':
                         createWahlOMatEmbed()
-                        break    
+                        break  
+                    case 'wahl-gemeinde-ergebnis':
+                        createWahlGemeindeErgebnis()
+                        break  
                     default:
                         console.error('No JS Config for external service ' + id)
                         break
@@ -112,7 +115,156 @@ const ExternalService = function (context) {
                 loadIframe() //für alle Dienste die nicht der DSGVO Datapolicy unterliegen
         }
     }
+    const createWahlGemeindeErgebnis = function () {
+        let embedCode = options.embedCode,
+            cleanUrl,
+            wahlKreisVersionJsonUrl,
+            wahlkreis,
+            wahlid,
+            jsonResponse,
+            iFrameElement,
+            iframeHeight = 300
 
+        const cleanVariables = function (variable) {
+            while (variable.charAt(0) === '&') {
+                variable = variable.substring(1)
+            }
+            return variable
+        }
+        const extractDataFromEmbedCode = function () {
+            const parts = embedCode.split('*')
+            if (parts.length === 4) {
+                cleanUrl = cleanVariables(decodeURIComponent(parts[0].trim()))
+                wahlkreis = cleanVariables(decodeURIComponent(parts[1].trim()))
+                wahlid = cleanVariables(decodeURIComponent(parts[2].trim()))
+                wahlKreisVersionJsonUrl = cleanVariables(decodeURIComponent(parts[3].trim()))
+            }
+        }
+        const loadIframe = function (version, url, wahlkreis) {
+            if (version) {
+                let iframeUrl = url.replace('{version}', version)
+                let iframe = document.createElement('iframe')
+                iframe.className = ''
+                iframe.style.border = 'none'
+                iframe.style.height = iframeHeight + 'px'
+                iframe.style.width = '100%'
+                iframe.setAttribute('webkitallowfullscreen', '')
+                iframe.setAttribute('mozallowfullscreen', '')
+                iframe.setAttribute('allowfullscreen', '')
+                iframe.setAttribute('scrolling', 'no')
+                iframe.setAttribute('frameborder', '0')
+                iframe.src = iframeUrl
+                iframe.id = 'wahl-gemeinde-ergebnis-' + wahlkreis
+                rootElement.innerHTML = ''
+                rootElement.insertBefore(iframe, null)
+                iFrameElement = document.getElementById('wahl-gemeinde-ergebnis-' + wahlkreis)
+            } else {
+                loadNoDataDiv('Es liegen zur Zeit noch keine Ergebnisse vor', 5)
+            }
+        }
+        const loadNoDataDiv = function (text, timeout) {
+            let div = document.createElement('div')
+            div.className =
+                'p-5 c-externalService__wahl-gemeinde-ergebnis-no-result rounded-tl-hr rounded-br-hr bg-highlight-1'
+            div.innerHTML =
+                '<div class="text-2xl text-clusterTeaserHeadline font-titleCluster mb-2">' +
+                text +
+                '</div>' +
+                '<div class="flex flex-row" >' +
+                '  <div class="">' +
+                '    <span>Dieser Inhalt wird automatisch aktualisiert in</span>' +
+                '    <span data-minutes>' +
+                timeout +
+                '    </span>' +
+                '    <span>Min</span>' +
+                '    <span data-seconds>0</span>' +
+                '    <span>Sek</span>' +
+                '  </div>' +
+                '</div>'
+            rootElement.innerHTML = ''
+            rootElement.insertBefore(div, null)
+            countdownMinutes(timeout, fetchJsonData)
+        }
+        const resizeIframe = function (newheight) {
+            if (newheight !== iframeHeight) {
+                iFrameElement.style.height = newheight + 'px'
+                iframeHeight = newheight
+            }
+        }
+        const processMessage = function (evt) {
+            if (evt.origin !== 'https://www.tagesschau.de') {
+                console.log('message', evt.origin + ' ist nicht vertrauenswürdig')
+            } else {
+                resizeIframe(evt.data)
+            }
+        }
+        const initMessageEventListener = function () {
+            if (window.addEventListener) {
+                // For standards-compliant web browsers
+                window.addEventListener('message', processMessage, false)
+            } else {
+                window.attachEvent('onmessage', processMessage)
+            }
+        }
+        const fetchJsonData = function () {
+            fetch(wahlKreisVersionJsonUrl, {
+                method: 'GET',
+                headers: {
+                    Accept: 'application/json',
+                },
+            })
+                .then((response) => response.json())
+                .then((jsonData) =>
+                    loadIframe(
+                        jsonData.hasOwnProperty(wahlkreis) && jsonData[wahlkreis].v
+                            ? jsonData[wahlkreis].v
+                            : null,
+                        cleanUrl,
+                        wahlkreis,
+                    ),
+                )
+                .catch(function () {
+                    loadNoDataDiv('Es liegen zur Zeit noch keine Ergebnisse vor', 5)
+                    console.log('No JSON Data Loaded')
+                })
+        }
+
+        function countdownMinutes(minutesToCountdown, callbackFunction) {
+            const second = 1000,
+                minute = second * 60,
+                hour = minute * 60,
+                day = hour * 24,
+                minuteElement = document.querySelector('[data-minutes]'),
+                secondElement = document.querySelector('[data-seconds]')
+
+            function AddMinutesToDate(date, minutes) {
+                return new Date(date.getTime() + minutes * 60000)
+            }
+
+            let countDown = AddMinutesToDate(new Date(), minutesToCountdown),
+                x = setInterval(function () {
+                    let now = new Date().getTime(),
+                        distance = countDown - now
+
+                    if (minuteElement != null) {
+                        minuteElement.innerText = Math.floor((distance % hour) / minute)
+                    }
+
+                    if (secondElement != null) {
+                        secondElement.innerText = Math.floor((distance % minute) / second)
+                    }
+
+                    if (distance < 1000) {
+                        callbackFunction()
+                        clearInterval(x)
+                    }
+                }, second)
+        }
+
+        extractDataFromEmbedCode()
+        initMessageEventListener()
+        fetchJsonData()
+    }
     const createWahlOMatEmbed = function () {
 
         const divTag = document.createElement('div')

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

@@ -2,6 +2,7 @@ import {
     ExternalServiceContent
 } from './external_service.data.js'
 import externalService from './external_service_with_datapolicy_check.hbs'
+import externalServiceNoDatapolicyCheck from './external_service.hbs'
 
 const TemplatePageExternalService = (args, { globals: { theme } }) => {
     // You can either use a function to create DOM elements or use a plain html string!
@@ -9,7 +10,12 @@ const TemplatePageExternalService = (args, { globals: { theme } }) => {
     let brand = undefined !== theme ? theme : 'hessenschau'       
     return externalService({ brand, ...args })
 }
-
+const TemplatePageExternalServiceNoDatapolicyCheck = (args, { globals: { theme } }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    let brand = undefined !== theme ? theme : 'hessenschau'       
+    return externalServiceNoDatapolicyCheck({ brand, ...args })
+}
 export default {
     title: 'Komponenten/Externe Dienste',
     argTypes: {},
@@ -53,4 +59,9 @@ export const ExterneDiensteDatawrapperContentRefresher = {
     name: 'Externe Dienste Datawrapper mit ContentRefresher',
     args: ExternalServiceContent.Datawrapper_CDN_NoResponsiveFixedHeightReload, 
 }
+export const WahlGemeindeErgebnis = {
+    render: TemplatePageExternalServiceNoDatapolicyCheck.bind({}),
+    name: 'Externe Dienste Wahl Gemeinde Ergebnis',
+    args: ExternalServiceContent.Wahl_Gemeinde_Ergebnis, 
+}
 

package/src/stories/views/components/externalService/fixtures/external_service_with_datapolicy.json

@@ -208,5 +208,20 @@
         "setTimedReloadIframe": false,
         "setTimeForReload": "",
         "externalServiceCaption": "Eine Demo der Virtual Reality-Inszenierung '2049: Zeitreise Mobilität'"
+    },
+    "Wahl_Gemeinde_Ergebnis": {
+        "externalServiceConfig": {
+            "makeConfigurable": false,
+            "embedAsIFrame": false,
+            "externalServiceId": "wahl-gemeinde-ergebnis",
+            "externalServiceEmbedType": "js",
+            "externalServiceName": "wahl-gemeinde-ergebnis"
+        },
+        "serviceUrl": "https://www.tagesschau.de/wahl/archiv/2024-06-09-EP-DE/charts/wahlkreis-detail/G06412000-{version}.shtml?externalEmbed*G06412000*&2024-06-09-EP-DE*&https%3A%2F%2Fwww.hessenschau.de%2Fpolitik%2Flandtagswahl%2Fkandidatencheck%2Fwk-versions.json",
+        "fixedHeight": "",
+        "aspectRatio": "",
+        "setResponsiveIframe": false,
+        "setTimedReloadIframe": false,
+        "setTimeForReload": ""
     }                                                
 }

package/src/stories/views/components/social_sharing/social_sharing_compact.hbs

@@ -11,7 +11,7 @@
             <div :class="{ 'flex justify-start col-full sm:col-main relative': $store.sharingIsVisible == false }">
                 <div :style="($store.footerIsVisible && !$screen('lg')) && {bottom:$store.sharingBottomPos.current}" 
                     :class="{ 'bottom-[19px] flex-col absolute mt-3 rounded-md': $store.sharingIsVisible == false && $store.footerIsVisible == false,
-                                'flex-col absolute mt-3' : $store.footerIsVisible == true }"
+                                'flex-col absolute mt-3' : !$screen('lg') && $store.footerIsVisible == true && window.innerHeight > document.querySelector('#content').offsetHeight + document.querySelector('.sb-main-navigation').offsetHeight + (window.innerHeight - document.querySelector('footer').offsetTop) - document.querySelector('footer').offsetHeight}"
                     class="flex self-center gap-3 bg-white left-5">
                     <button 
                         class="order-2 p-2 text-white border border-button bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group"

package/src/stories/views/components/social_sharing/social_sharing_compact_icons.hbs

@@ -70,17 +70,17 @@
     >
         {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="copy-ds" _iconmap="icons" ~}}
     </a>
+    <div class="absolute flex flex-row items-center justify-start hidden w-auto h-8 -mt-8 ml-0.5 text-xs bg-white whitespace-nowrap js-copyMessage sm480:text-sm font-headingSerif dark:text-text-dark">
+        {{~> components/base/image/icon _addClass="w-7 h-7 text-green-600 mr-2" _icon="status-done" _iconmap="icons" ~}}
+        {{loca "share_copy_message" }}
+    </div>
 </li>
-<div class="absolute flex flex-row items-center justify-end hidden w-full h-8 text-xs bg-white js-copyMessage sm480:text-sm font-headingSerif dark:text-text-dark">
-    {{~> components/base/image/icon _addClass="w-6 h-6 text-green-600 mr-2" _icon="status-done" _iconmap="icons" ~}}
-    {{loca "share_copy_message" }}
-</div>
-
 <script>
     function copyHandler(){
         return  {  
             copyToClipboard(event) {
-                const messageDiv = document.querySelector('.js-copyMessage')
+                const clickedContainer = event.currentTarget.parentNode
+                const messageDiv = clickedContainer.querySelector('.js-copyMessage')
                 const el = document.createElement('textarea')
                 el.value = window.location.href
                 el.setAttribute('readonly', '')