hr-design-system-handlebars 1.60.0 → 1.60.1

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v1.60.1 (Tue Mar 12 2024)
+
+#### 🐛 Bug Fix
+
+- Dpe 2959 - add external services [#879](https://github.com/mumprod/hr-design-system-handlebars/pull/879) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
 # v1.60.0 (Mon Mar 11 2024)
 
 #### 🚀 Enhancement

package/dist/assets/index.css

@@ -3316,7 +3316,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1710171228254;
+  counter-reset: cnt1710258551956;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3353,49 +3353,49 @@ article.indexTextDS .indexTextHighlighted .link {
             clear: both;
         }
     }
-.ar-16-9 {
+.ar-16-9, .ar-16x9-DS {
         aspect-ratio: 16 / 9;
     }
 @supports not (aspect-ratio: 16 / 9) {
-        .ar-16-9::before {
+        .ar-16-9::before, .ar-16x9-DS::before {
             float: left;
             padding-top: calc(9 / 16 * 100%);
             content: '';
         }
 
-        .ar-16-9::after {
+        .ar-16-9::after, .ar-16x9-DS::after {
             display: block;
             content: '';
             clear: both;
         }
     }
-.ar-4-3 {
+.ar-4-3, .ar-4x3-DS {
         aspect-ratio: 4 / 3;
     }
 @supports not (aspect-ratio: 4 / 3) {
-        .ar-4-3::before {
+        .ar-4-3::before, .ar-4x3-DS::before {
             float: left;
             padding-top: calc(3 / 4 * 100%);
             content: '';
         }
 
-        .ar-4-3::after {
+        .ar-4-3::after, .ar-4x3-DS::after {
             display: block;
             content: '';
             clear: both;
         }
     }
-.ar-1-1 {
+.ar-1-1, .ar-100-DS {
         aspect-ratio: 1 / 1;
     }
 @supports not (aspect-ratio: 1 / 1) {
-        .ar-1-1::before {
+        .ar-1-1::before, .ar-100-DS::before {
             float: left;
             padding-top: 100%;
             content: '';
         }
 
-        .ar-1-1::after {
+        .ar-1-1::after, .ar-100-DS::after {
             display: block;
             content: '';
             clear: both;
@@ -3622,7 +3622,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1710171228254 1;
+  counter-increment: cnt1710258551956 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3638,7 +3638,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1710171228254);
+  content: counter(cnt1710258551956);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

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

@@ -0,0 +1,492 @@
+import SettingsCookie from './globalSettingsCookie.subfeature'
+import {
+    fireEvent,
+    hr$,
+    listen,
+    loadScript,
+    removeScript,
+    replaceAnimated,
+    requestTimeout,
+    getJSONCookie,
+    deleteCookie,
+} from 'hrQuery'
+
+const ExternalService = function (context) {
+    const { options } = context,
+        { element: rootElement } = context,
+        rootParent = rootElement.parentNode
+    let dataPolicyBox = hr$('.js-datapolicy', rootElement)[0]
+    const dataPolicyBoxHTML = typeof dataPolicyBox !== 'undefined' ? dataPolicyBox.outerHTML : '',
+        contentSettingsButton = hr$('.js-content-settings-button', rootParent)[0],
+        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]
+
+    let acceptButton,
+        acceptAlwaysCheckbox = hr$('.js-dataPolicy-acceptPermanentely', rootElement)[0],
+        dataPolicySettingsButton = hr$('.js-data-policy-settings-button', rootParent)[0],
+        embedCode = options.embedCode,
+        iframe,
+        settingsCookie,
+        isExternalServiceLoaded = false
+
+    const syncAppOptionsToSettingsCookie = function () {
+        if (getJSONCookie('datapolicy')) {
+            let dataPolicyCookie = getJSONCookie('datapolicy') || {}
+            let objArray = Object.entries(dataPolicyCookie)
+            objArray.forEach(([key, value]) => {
+                settingsCookie.setCookieForOptions(key, value)
+            })
+        }
+    }
+
+    const setWhitelistServicesForInitialApp = function () {
+        let whitelist = ['ard_mediathek', 'arte_concert', 'arte_concert_new', 'datawrapper_cdn']
+        for (let i = 0; i < whitelist.length; ++i) {
+            settingsCookie.setCookieForDataPolicy(whitelist[i], true)
+        }
+    }
+
+    const embedExternalService = function (callback) {
+        $.ajax({
+            type: 'GET',
+            dataType: 'jsonp',
+            url: embedCode,
+            headers: { 'Access-Control-Allow-Origin': '*' },
+            timeout: 90 * 1000,
+            cache: false,
+            beforeSend: function () {
+                return true
+            },
+        })
+            //Add handlers to be called when the Deferred object is resolved.
+            .done(function (data, status, xhr) {
+                console.log('Done')
+                if (undefined !== callback) {
+                    replaceAnimated(rootElement, data.html, false, callback)
+                    alert('boing')
+                } else {
+                    replaceAnimated(rootElement, data.html, false)
+                    alert('boing, boing')
+                }
+            })
+            //Add handlers to be called when the Deferred object is rejected.
+            .fail(function (xhr, errorType, error) {
+                //anzeige irgendetwas hat nicht geklappt
+                console.log('Fail:' + errorType)
+            })
+            .always(function () {
+                //aufräumen wenn bedarf besteht.
+                console.log('Always')
+            })
+    }
+
+    const handleDatapolicy = function (event) {
+        if (acceptAlwaysCheckbox.checked == true) {
+            fireEvent('hr:externalService-activate-' + id)
+            settingsCookie.setCookieForOptions(id)
+            if (isWebview) {
+                settingsCookie.setCookieForDataPolicy(id)
+            }
+        } else {
+            loadServiceWithDataPolicyButton()
+            console.log('External Service once loaded - ' + id)
+        }
+        event.stopPropagation()
+    }
+    const loadServiceWithDataPolicyButton = function () {
+        if (rootElement.children[0].classList.contains('js-datapolicy')) {
+            insertExternalService()
+            isExternalServiceLoaded = true
+            toggleContentSettingsButton()
+        }
+    }
+    const toggleContentSettingsButton = function () {
+        if (isExternalServiceLoaded) {
+            contentSettingsButton.classList.remove('hideExtButton')
+        } else {
+            contentSettingsButton.classList.add('hideExtButton')
+        }
+        console.log('Toggle den Einstellungsbutton außerhalb weil ' + isExternalServiceLoaded)
+    }
+
+    const removeDatapolicyBox = function () {
+        rootElement.innerHTML = ''
+        rootElement.classList.remove('c-dataPolicy')
+    }
+
+    const initDataPolicy = function () {
+        if (dataPolicyCheck) {
+            settingsCookie = new SettingsCookie()
+            acceptButton = hr$('.js-dataPolicy-accept', rootElement)[0]
+            listen('click', handleDatapolicy, acceptButton)
+            if (isWebview) {
+                if (settingsCookie.isDataPolicyCookieAccepted(id)) {
+                    loadServiceWithDataPolicyButton()
+                } else {
+                    dataPolicyBox.style.visibility = 'visible'
+                }
+            } else {
+                if (settingsCookie.isSettingsCookieAccepted(id)) {
+                    loadServiceWithDataPolicyButton()
+                } else {
+                    dataPolicyBox.style.visibility = 'visible'
+                }
+            }
+            listen('hr:externalService-activate-' + id, loadServiceWithDataPolicyButton)
+            listen('hr:externalService-deactivate-' + id, removeExternalService)
+        } else {
+            insertExternalService()
+        }
+    }
+
+    const insertExternalService = function () {
+        switch (embedType) {
+            case 'js':
+                switch (id) {
+                    case 'facebook-post':
+                        createFacebookEmbed()
+                        break
+                    case 'instagram':
+                        createInstagramEmbed()
+                        break
+                    case 'twitter':
+                        createTwitterEmbed()
+                        break
+                    case 'twitter-post':
+                        createTwitterPostEmbed()
+                        break
+                    case 'datawrapper_cdn':
+                        createDataWrapperEmbed()
+                        break
+                    case 'wahlmonitor':
+                        createWahlEmbed()
+                        break
+                    case 'wahlkreiskarte':
+                        createWahlEmbed()
+                        break
+                    default:
+                        console.error('No JS Config for external service ' + id)
+                        break
+                }
+                break
+            default:
+                loadIframe()
+        }
+    }
+
+    const createWahlEmbed = function () {
+        let script = document.createElement('script')
+        let cleanUrl
+        const parts = embedCode.split('*')
+        if (parts.length === 2) {
+            const params = parts[1].split(' ')
+            cleanUrl = parts[0].trim()
+            const queryParams = {}
+            for (const param of params) {
+                const [key, value] = param.split('=')
+                queryParams[key] = value
+                script.setAttribute(key, queryParams[key])
+            }
+        }
+        script.src = cleanUrl
+        script.type = 'text/javascript'
+        rootElement.appendChild(script)
+    }
+
+    const createDataWrapperUniqueID = function () {
+        return Math.random()
+            .toString(36)
+            .replace(/[^a-z]+/g, '')
+            .substr(2, 10)
+    }
+    const createDataWrapperEmbed = function () {
+        removeDatapolicyBox()
+        var uniqueID = createDataWrapperUniqueID()
+        if (iFrameConfig.noResponsiveIframe == 'true') {
+            var parentDiv = document.createElement('div')
+            parentDiv.className = 'copytext__scrollWrapper'
+            var div = document.createElement('div')
+            if (iFrameConfig.aspectRatio === undefined) {
+                div.className = 'noaspect_datawrapper_cdn'
+                div.style.height = iFrameConfig.fixedHeight + 'px'
+                div.style.width = '100%'
+            } else {
+                div.className = 'ar--' + iFrameConfig.aspectRatio + ' datawrapper_cdn'
+            }
+            var iframe = document.createElement('iframe')
+            iframe.className = 'ar_iframe datawrapper_cdn'
+            iframe.setAttribute('id', 'i_frame')
+            iframe.setAttribute('data-isloaded', '0')
+            iframe.setAttribute('webkitallowfullscreen', '')
+            iframe.setAttribute('mozallowfullscreen', '')
+            iframe.setAttribute('allowfullscreen', '')
+            iframe.setAttribute('scrolling', 'no')
+            iframe.setAttribute('frameborder', '0')
+            iframe.src = embedCode
+
+            div.appendChild(iframe)
+            parentDiv.appendChild(div)
+            rootElement.appendChild(parentDiv)
+        } else {
+            var iframe = document.createElement('iframe')
+            iframe.className = 'dataWrapper-embed'
+            iframe.style.width = '0'
+            iframe.style.minWidth = '100% !important'
+            iframe.style.border = 'none'
+            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
+            rootElement.insertBefore(iframe, null)
+
+            loadScript(
+                'datawrapper-js',
+                'https://static.hr.de/hessenschau/datawrapper/responsiveIframe.js',
+                true
+            )
+            if (iFrameConfig.refreshContent == 'true') {
+                var remainingTime
+                var timer
+                var iframeRefresh = document.getElementById('datawrapper-chart-' + uniqueID)
+                var divCounter = document.createElement('div')
+                var divOverlay = document.createElement('div')
+                var 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)
+
+                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) {
+                        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()
+                    }
+                }
+                const secondsToTimeString = function (seconds) {
+                    return new Date(seconds * 1000).toISOString().substr(14, 5)
+                }
+                startCountdown()
+            }
+        }
+    }
+
+    const createFacebookEmbed = function () {
+        loadScript(
+            'facebook-js',
+            'https://connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v3.2',
+            true
+        )
+        var width =
+            undefined != rootParent.clientWidth
+                ? rootParent.clientWidth > 350
+                    ? rootParent.clientWidth
+                    : 'auto'
+                : 'auto'
+        var div =
+            "<div class='fb-post' data-lazy='true' data-width='" +
+            width +
+            "' data-href='" +
+            embedCode +
+            "'></div>"
+
+        replaceAnimated(rootElement, div, false, reloadFacebookEmbed)
+    }
+
+    const reloadFacebookEmbed = function () {
+        requestTimeout(function () {
+            if (typeof FB != 'undefined') {
+                FB.init({
+                    status: true,
+                    xfbml: true,
+                    version: 'v10.0',
+                })
+            } else {
+                reloadFacebookEmbed()
+            }
+        }, 125)
+    }
+
+    const createInstagramEmbed = function () {
+        loadScript('instagram-js', '//www.instagram.com/embed.js', true)
+        embedCode = options.embedCode
+        var instagramEmbedCode =
+            "<blockquote class='instagram-media' data-instgrm-captioned " +
+            "data-instgrm-permalink='" +
+            embedCode +
+            "?utm_source=ig_embed&amp;utm_campaign=loading'" +
+            "data-instgrm-version='14'" +
+            "style='background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:660px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);' >" +
+            '</blockquote>'
+        replaceAnimated(rootElement, instagramEmbedCode, false, reloadInstagramEmbed)
+    }
+
+    const reloadInstagramEmbed = function () {
+        requestTimeout(function () {
+            if (typeof instgrm != 'undefined') {
+                instgrm.Embeds.process(rootElement)
+            } else {
+                reloadInstagramEmbed()
+            }
+        }, 250)
+    }
+
+    const createTwitterEmbed = function () {
+        loadScript('twitter-js', '//platform.twitter.com/widgets.js', true)
+        embedExternalService(reloadTwitterWidget)
+    }
+
+    const createTwitterPostEmbed = function () {
+        loadScript('twitterpost-js', '//platform.twitter.com/widgets.js', true)
+        embedCode = options.embedCode
+        var twitterEmbedCode =
+            "<blockquote class='twitter-tweet tw-align-center'>" +
+            "<a href='" +
+            embedCode +
+            "'></a>" +
+            '</blockquote>'
+        replaceAnimated(rootElement, twitterEmbedCode, false, reloadTwitterWidget)
+    }
+
+    const reloadTwitterWidget = function () {
+        requestTimeout(function () {
+            if (typeof twttr != 'undefined') {
+                twttr.widgets.load(rootElement)
+            } else {
+                reloadTwitterWidget()
+            }
+        }, 250)
+    }
+
+    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>"
+        if (iFrameConfig.aspectRatio) {
+            iframe =
+                "<div class='copytext__scrollWrapper'><div class='ar--" +
+                iFrameConfig.aspectRatio +
+                ' ' +
+                id +
+                "'><iframe id='i_frame' data-isloaded='0' src='" +
+                embedCode +
+                "' frameborder='0' class='" +
+                iFrameConfig.heightClass +
+                ' ' +
+                id +
+                "' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></div>"
+            //TODO Weiche Animation der Inhalte
+        } else {
+            if (iFrameConfig.fixedHeight) {
+                iframe =
+                    "<div class='copytext__scrollWrapper -fixedHeight' style='height:" +
+                    iFrameConfig.fixedHeight +
+                    "px'><iframe data-isloaded='0' src='" +
+                    embedCode +
+                    "' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
+            } else {
+                iframe =
+                    "<div class='copytext__scrollWrapper " +
+                    id +
+                    "'><iframe data-isloaded='0' src='" +
+                    embedCode +
+                    "' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
+            }
+        }
+
+        replaceAnimated(rootElement, iframe, false)
+    }
+
+    const removeExternalService = function () {
+        replaceAnimated(rootElement, dataPolicyBoxHTML, true, reinitiateDataPolicyBox)
+    }
+
+    const reinitiateDataPolicyBox = function () {
+        removeScript('scrbbl-js')
+        removeScript('js-wahlergebnis')
+        dataPolicyBox = hr$('.js-datapolicy', rootElement)[0]
+        dataPolicyBox.style.visibility = 'visible'
+        isExternalServiceLoaded = false
+        initDataPolicy()
+        toggleContentSettingsButton()
+    }
+    const resetCheckboxForPermanentService = function () {
+        /*Die Autocompletion des Browsers merkt sich die Zustände von Formularelementen nach einem Refresh, das wird hier hart zurückgesetzt*/
+        var clist = document.getElementsByClassName('js-dataPolicy-acceptPermanentely')
+        for (var i = 0; i < clist.length; ++i) {
+            clist[i].checked = false
+        }
+    }
+    initDataPolicy()
+    resetCheckboxForPermanentService()
+    if (isWebview) {
+        /*Für die App werden Cookie-Daten des neuen Cookies wieder mit dem alten Cookie synchronisiert */
+        syncAppOptionsToSettingsCookie()
+        if (!getJSONCookie('datapolicy') || !getJSONCookie('hrSettings')) {
+            setWhitelistServicesForInitialApp()
+        }
+    }
+}
+
+export default ExternalService

package/dist/views/components/content/copytext/components/externalservice.hbs

@@ -2,19 +2,21 @@
     
     {{#with this.toModel.externalService}}
     
-        <div>this.externalServiceConfig.makeConfigurable: <b>{{this.externalServiceConfig.makeConfigurable}}</b></div>
-        <!--div>this.ServiceUrl: <b>{{this.ServiceUrl}}</b></div-->
-        <div>this.externalServiceConfig.externalServiceId: <b>{{this.externalServiceConfig.externalServiceId}}</b></div>
-        <div>this.externalServiceConfig.externalServiceEmbedType: <b>{{this.externalServiceConfig.externalServiceEmbedType}}</b></div>
-        <div>this.fixedHeight: <b>{{this.fixedHeight}}</b></div>
-        <div>this.aspectRatio: <b>{{this.aspectRatio}}</b></div>
-        <div>this.setResponsiveIframe: <b>{{this.setResponsiveIframe}}</b></div>
-        <div>this.setTimedReloadIframe: <b>{{this.setTimedReloadIframe}}</b></div>
-        <div>this.setTimeForReload: <b>{{this.setTimeForReload}}</b></div>
-        <div>this.externalServiceCaption: <b>{{this.externalServiceCaption}}</b></div>
-        <div>this.externalServiceConfig.externalServiceName: <b>{{this.externalServiceConfig.externalServiceName}}</b></div>
-        <div>this.externalServiceConfig.embedAsIFrame: <b>{{this.externalServiceConfig.embedAsIFrame}}</b></div>
+        <!--div>serviceUrl: <b>{{this.serviceUrl}}</b></div-->
+        <div>externalServiceName: <b>{{this.externalServiceConfig.externalServiceName}}</b></div>
+        <div>makeConfigurable: <b>{{this.externalServiceConfig.makeConfigurable}}</b></div>
+        <div>externalServiceId: <b>{{this.externalServiceConfig.externalServiceId}}</b></div>
+        <div>externalServiceEmbedType: <b>{{this.externalServiceConfig.externalServiceEmbedType}}</b></div>
+        <div>embedAsIFrame: <b>{{this.externalServiceConfig.embedAsIFrame}}</b></div>
+        <div>fixedHeight: <b>{{this.fixedHeight}}</b></div>
+        <div>aspectRatio: <b>{{this.aspectRatio}}</b></div>
+        <div>setResponsiveIframe: <b>{{this.setResponsiveIframe}}</b></div>
+        <div>setTimedReloadIframe: <b>{{this.setTimedReloadIframe}}</b></div>
+        <div>setTimeForReload: <b>{{this.setTimeForReload}}</b></div>
+        <div>externalServiceCaption: <b>{{this.externalServiceCaption}}</b></div>
         
+        {{> components/externalService/externalservice }}
+
     {{/with}}
 
 {{~else~}}

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

@@ -0,0 +1,38 @@
+{{!#if this.externalServiceConfig.makeConfigurable}}
+    
+    <!--External-Service-Dummy-->
+
+{{!else}}
+    
+    {{#if this.serviceUrl}}
+        <div class="clear-both mt-10">
+            <span class="sr-only">{{loca "story_externalservice_intro_sr" }}</span>    
+            {{#if this.externalServiceConfig.embedAsIFrame}}              
+                    
+                <div class="{{#if this.fixedHeight}}overflow-y-hidden{{else}}overflow-hidden{{/if}}" {{#if this.fixedHeight}}style="height:{{this.fixedHeight}}px;"{{/if}}>
+                    {{#unless this.fixedHeight}}<div class="ar-{{defaultIfEmpty this.aspectRatio "16x9"}}-DS">{{/unless}}
+                        <iframe frameborder="0" width="100%" height="100%"
+                                src="{{{this.serviceUrl}}}" webkitallowfullscreen mozallowfullscreen
+                                allowfullscreen scrolling='no'>
+                        </iframe>
+                    {{#unless this.fixedHeight}}</div>{{/unless}}                        
+                </div>
+            
+            {{else}}
+            
+                <div class="c-externalService__{{this.externalServiceConfig.externalServiceId}} js-load"
+                    data-hr-external-service='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}", "embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}", "dataPolicyCheck": false, "iFrameConfig":{}}'>
+                </div>
+                
+            {{/if}}
+                
+            {{#with this.externalServiceCaption}}
+                <div class="py-2.5">
+                    <span class="text-sm font-copy dark:text-text-dark">{{this}}</span>
+                </div>
+            {{/with}}
+            <span class="sr-only">{{loca "story_externalservice_outro_sr" }}</span>    
+        </div>
+    {{/if}}
+
+{{!/if}}