hr-design-system-handlebars 0.51.0 → 0.52.0

package/.storybook/main.js

@@ -36,10 +36,7 @@ module.exports = {
             components: path.resolve(__dirname, '../src/stories/views/components'),
             base: path.resolve(__dirname, '../src/stories/views/base'),
             tailwind$: path.resolve(__dirname, '../src/assets/tailwind.css'),
-            hrQuery$: path.resolve(
-                __dirname,
-                '../src/stories/views/components/generic/hrQuery.subfeature.js'
-            ),
+            hrQuery$: path.resolve(__dirname, '../src/stories/views/generic/hrQuery.subfeature.js'),
             initializer$: path.resolve(
                 __dirname,
                 '../build/webpack/feature-loader/initializer/initializer.js'

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+# v0.52.0 (Mon Aug 01 2022)
+
+#### 🚀 Enhancement
+
+- Dpe 1675 Download Teaser [#290](https://github.com/mumprod/hr-design-system-handlebars/pull/290) ([@Sunny1112358](https://github.com/Sunny1112358))
+
+#### Authors: 1
+
+- [@Sunny1112358](https://github.com/Sunny1112358)
+
+---
+
+# v0.51.2 (Thu Jul 28 2022)
+
+#### 🐛 Bug Fix
+
+- FEATURE: hrQuery is moved out of the components [#289](https://github.com/mumprod/hr-design-system-handlebars/pull/289) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
+# v0.51.1 (Thu Jul 28 2022)
+
+#### 🐛 Bug Fix
+
+- FEATURE: All js files that get loaded by [#288](https://github.com/mumprod/hr-design-system-handlebars/pull/288) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
 # v0.51.0 (Wed Jul 27 2022)
 
 #### 🚀 Enhancement

package/build/helpers/loca.js

@@ -17,6 +17,7 @@ module.exports = function(text, options) {
         "comment_anchor_2": " Kommentaren des Artikels springen",
         "date_simple_at": options + " Uhr",
         "label_ticker":"Ticker",
+        "label_download":"Download",
         "label_media":"Media",
         "group_tabbed_more":"weitere Meldungen aus " + options,
     }

package/build/scripts/build.js

@@ -7,5 +7,7 @@ const run = (cmd) => execSync(cmd, { stdio: 'inherit', cwd: root })
 // Copy hbs files into the dist folder
 run(`npx copyfiles \"./src/index.js\" dist --up=1`)
 run(`npx copyfiles \"./src/stories/views/**/*.{js,hbs}\" dist --up=2`)
-run(`npx copyfiles \"./src/stories/views/**/*Ds.{feature,subfeature}.js\" dist/assets/js  --up=2`)
+run(
+    `npx copyfiles -e \"./src/stories/views/**/clickTracking.feature.js\" \"./src/stories/views/**/*.{feature,subfeature}.js\" dist/assets/js  --up=2`
+)
 run(`npx copyfiles \"./src/assets/**/*.{woff,svg}\" dist --up=1`)

package/dist/assets/js/views/base/tracking/atiHelper.subfeature.js

@@ -0,0 +1,36 @@
+import TrackingCookie from 'components/externalService/trackingCookieDs.subfeature'
+
+const isTrackingAllowed = () => {
+    const trackingCookie = new TrackingCookie()
+    return trackingCookie.isTrackingAccepted('ati')
+}
+
+const uxAction = (label, secondLevelId) => {
+    secondLevelId = secondLevelId || window.xtn2
+    if (window.xt_click && isTrackingAllowed()) {
+        window.xt_click('this', 'C', secondLevelId, label, 'A')
+    }
+}
+
+const uxNavigation = (label, secondLevelId) => {
+    secondLevelId = secondLevelId || window.xtn2
+    if (window.xt_click && isTrackingAllowed()) {
+        window.xt_click('this', 'C', secondLevelId, label, 'N')
+    }
+}
+
+const pi = (label, secondLevelId) => {
+    secondLevelId = secondLevelId || window.xtn2
+    if (window.xt_click && isTrackingAllowed()) {
+        window.xt_click('this', 'F', secondLevelId, label)
+    }
+}
+
+const download = (label, secondLevelId) => {
+    secondLevelId = secondLevelId || window.xtn2
+    if (window.xt_click && isTrackingAllowed()) {
+        window.xt_click('this', 'C', secondLevelId, label, 'T')
+    }
+}
+
+export { isTrackingAllowed, uxAction, uxNavigation, pi, download }

package/dist/assets/js/views/base/tracking/atiMediaHelper.subfeature.js

@@ -0,0 +1,193 @@
+import { isTrackingAllowed, pi } from 'base/tracking/atiHelper.subfeature'
+
+const ATIMediaHelper = function (
+    avType,
+    pageName,
+    secondLevelId,
+    length,
+    multcid,
+    multctype,
+    multcdate,
+    chapter
+) {
+    'use strict'
+    ;(this.avType = avType),
+        (this.secondLevelId = secondLevelId),
+        (this.multcid = multcid),
+        (this.multctype = multctype),
+        (this.multcdate = multcdate),
+        (this.chapter = chapter),
+        (this.pageName = pageName),
+        (this.length = length),
+        (this.wasNeverPlayed = true)
+
+    /*console.log(this.avType)
+    console.log(this.secondLevelId)
+    console.log(this.pageName)
+    console.log(this.length)*/
+}
+
+ATIMediaHelper.prototype = {
+    xtRichMediaVideoHelper: function (data) {
+        if (window.xt_rm && isTrackingAllowed()) {
+            console.log('XT_RM')
+            console.log('A ID: ' + data.avType + '&plyr=' + data.pageName)
+            console.log('B SECONDLEVELID: ' + data.secondLevelId)
+            console.log('C PAGENAME: ' + data.pageName + ':' + data.avType + 'Play')
+            console.log('D ACTION: ' + data.action)
+            console.log('F REFRESH: ' + data.refresh)
+            console.log('G DURATION: ' + data.length)
+            console.log('H POSTIONBUF: ' + '0')
+            console.log('H POSITION: ' + 'rmp=' + data.position)
+            console.log('H POSITIONNEW: ' + data.positionNew)
+            console.log('J DATARATE: ' + data.datarate)
+            console.log('K LOCATION: ' + data.location)
+            console.log('L TYPE: ' + data.type)
+            console.log('M SIZE: ' + data.size)
+            console.log('N FORMAT: ' + data.format)
+            xt_rm(
+                data.avType + '&plyr=' + data.pageName,
+                data.secondLevelId,
+                data.pageName + ':' + data.avType + 'Play',
+                data.action,
+                '',
+                data.refresh,
+                data.length,
+                '&rmp=' + data.position + '&rmpf=' + data.positionNew + '&rmbufp=0',
+                '',
+                data.datarate,
+                data.location,
+                data.type,
+                data.size,
+                data.format
+            )
+        }
+    },
+
+    xtClickVideoHelper: function (data) {
+        if (window.xt_click) {
+            console.log('XT_CLICK ')
+            var uniqueId = Math.abs(this.hashCode(data.pageName))
+            uniqueId = uniqueId.length > 15 ? uniqueId.substring(0, 15) : uniqueId
+            pi(
+                data.pageName +
+                    ':' +
+                    data.avType +
+                    'Play' +
+                    '&pid=' +
+                    uniqueId +
+                    '&pchap=' +
+                    data.chapter +
+                    '&pidt=' +
+                    data.x5 +
+                    '&x1=' +
+                    data.x1 +
+                    '&x2=' +
+                    data.x2 +
+                    '&x5=' +
+                    data.x5.substring(0, 8),
+                data.secondLevelId
+            )
+        }
+    },
+
+    hashCode: function (string) {
+        var hash = 0,
+            i,
+            chr
+        if (string.length === 0) return hash
+        for (i = 0; i < string.length; i++) {
+            chr = string.charCodeAt(i)
+            hash = (hash << 5) - hash + chr
+            hash |= 0 // Convert to 32bit integer
+        }
+        return hash
+    },
+
+    trackInitialMediaPlay: function () {
+        const data = {}
+
+        if (this.wasNeverPlayed) {
+            if (this.avType === 'livestreamVideo' || this.avType === 'livestreamAudio') {
+                data.object = 'this'
+                data.click = 'F'
+                if (this.avType === 'livestreamVideo') {
+                    data.pageName = this.pageName + ':video'
+                    data.avType = 'video'
+                } else {
+                    data.pageName = this.pageName + ':audio'
+                    data.avType = 'audio'
+                }
+                data.secondLevelId = this.secondLevelId
+                data.x1 = this.multcid
+                data.x2 = this.multctype
+                data.x5 = this.multcdate
+                data.chapter = this.chapter
+                data.action = 'play'
+                data.refresh = '10'
+                data.length = ''
+                data.position = '0'
+                data.positionNew = '0'
+                data.datarate = ''
+                data.location = 'int'
+                data.type = 'live'
+                data.size = ''
+                data.format = ''
+            } else {
+                data.object = 'this'
+                data.click = 'F'
+                data.avType = this.avType
+                data.pageName = this.pageName
+                data.secondLevelId = this.secondLevelId
+                data.x1 = this.multcid
+                data.x2 = this.multctype
+                data.x5 = this.multcdate
+                data.chapter = this.chapter
+                data.action = 'play'
+                data.refresh = ''
+                data.length = this.length
+                data.position = '0'
+                data.positionNew = '0'
+                data.datarate = '19'
+                data.location = 'int'
+                data.type = 'clip'
+                data.size = '100000'
+                data.format = '9'
+            }
+
+            this.xtClickVideoHelper(data)
+            this.xtRichMediaVideoHelper(data)
+        }
+
+        this.wasNeverPlayed = false
+    },
+
+    trackMediaSeek: function (_from, _to) {
+        console.log(_from)
+        console.log(_to)
+
+        const data = {}
+
+        data.avType = this.avType
+        data.pageName = this.pageName
+        data.secondLevelId = this.secondLevelId
+        data.x1 = this.multcid
+        data.x2 = this.multctype
+        data.x5 = this.multcdate
+        data.chapter = this.chapter
+        data.action = 'move'
+        data.refresh = ''
+        data.length = this.length
+        data.position = _from
+        data.positionNew = _to
+        data.datarate = ''
+        data.location = 'int'
+        data.type = 'clip'
+        data.size = ''
+        data.format = ''
+
+        this.xtRichMediaVideoHelper(data)
+    },
+}
+
+export default ATIMediaHelper

package/dist/assets/js/views/components/foo.feature.js

@@ -0,0 +1,16 @@
+import { hr$ } from 'hrQuery'
+const Foo = (context) => {
+    const { options } = context
+    const { element: rootElement } = context
+    const { test } = options
+
+    const init = () => {
+        console.log(rootElement)
+        console.log(hr$('.inner', rootElement))
+        console.log(`Feature ${test} geladen`)
+    }
+
+    init()
+}
+
+export default Foo

package/package.json

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

package/src/assets/fixtures/teaser/teaser_alternative_100_serif_download.json

@@ -0,0 +1,40 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaserDownload",
+    "@->overrides": [
+        {
+            "@->contentpath": "logicItem.includePath",
+            "@->value": "components/teaser/teaser_alternative"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserSize",
+            "@->value": "100"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserType",
+            "@->value": "alternative-ds"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.isMobile1to1",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.link.content.isMobile1to1",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserImage",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "md_1_tab"
+            }
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.label",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_labels.inc.json",
+                "@->contentpath": "download"
+            }
+        }
+    ]
+}

package/src/assets/fixtures/teaser/teaser_alternative_50_serif_download.json

@@ -0,0 +1,40 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaserDownload",
+    "@->overrides": [
+        {
+            "@->contentpath": "logicItem.includePath",
+            "@->value": "components/teaser/teaser_alternative"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserSize",
+            "@->value": "50"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserType",
+            "@->value": "alternative-ds"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.isMobile1to1",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.link.content.isMobile1to1",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserImage",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "md_2_tab"
+            }
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.label",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_labels.inc.json",
+                "@->contentpath": "download"
+            }
+        }
+    ]
+}

package/src/assets/fixtures/teaser/teaser_labels.inc.json

@@ -14,5 +14,13 @@
             "bylineSsi": "BylineText aus ssi",
             "bylineText": "BylineText"
         }
+    },
+    "download": {
+        "type": "download",
+        "loca": "label_download",
+        "byline": {
+            "bylineSsi": "ZIP - 3mb",
+            "bylineText": "BylineText"
+        }
     }
 }

package/src/assets/fixtures/teaser/teaser_standard_100_serif_download.json

@@ -0,0 +1,17 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaserDownload",
+    "@->overrides": [
+        {
+            "@->contentpath": "logicItem.includeModel.teaserSize",
+            "@->value": "100"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.label",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_labels.inc.json",
+                "@->contentpath": "download"
+            }
+        }
+    ]
+}

package/src/assets/fixtures/teaser/teaser_standard_50_serif_download.json

@@ -0,0 +1,17 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaserDownload",
+    "@->overrides": [
+        {
+            "@->contentpath": "logicItem.includeModel.teaserSize",
+            "@->value": "50"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.label",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_labels.inc.json",
+                "@->contentpath": "download"
+            }
+        }
+    ]
+}

package/src/assets/fixtures/teaser/teasers.inc.json

@@ -110,6 +110,117 @@
             }
         }
     },
+    "teaserDownload": {
+        "isSsi": true,
+        "logicItem": {
+            "includePath": "components/teaser/teaser_standard",
+            "includeModel": {
+                "byline": "Byline",
+                "title": "Download",
+                "topline": "",
+                "headingFontVariant": "serif",
+                "extendedTitle": "",
+                "teaserType": "standard-ds",
+                "teaserSize": "hero",
+                "isMobile1to1": false,
+                "teaserDate": {
+                    "htmlDateTime": "2022-04-17T19:30+0200",
+                    "htmlDate": "20.02.1983",
+                    "date": "17.04.22",
+                    "dateSeparatorTime": "17.04.22, 19:30"
+                },
+                "teaserInfo": {
+                    "showTeaserInfo": true,
+                    "showTeaserInfoSection": true,
+                    "showTeaserInfoChannel": true,
+                    "showTeaserInfoAll": true,
+                    "showTeaserInfoDate": false,
+                    "showTeaserInfoDateTime": false,
+                    "showTeaserInfoProgramRef": true
+                },
+                "teaserImage": {
+                    "@->jsoninclude": "teaser/teaser_images.inc.json",
+                    "@->contentpath": "standard_1"
+                },
+                "hasMediaButtons": false,
+                "dontLazyload": true,
+                "isStandardTeaser": true,
+                "isHeroTeaser": true,
+                "isMediaTeaser": false,
+                "isGuide": false,
+                "isProgram": false,
+                "isEvent": false,
+                "isTicker": false,
+                "isAudio": false,
+                "isVideo": false,
+                "isPodcastEpisode": false,
+                "isExtOrBrandLink": false,
+                "isAuthor": false,
+                "copyright": "Copyright Text",
+                "audioAuthor": "Audio Author",
+                "hasStatus": false,
+                "hasTeaserItem": true,
+                "allowAVConsumption": false,
+                "displayEpgInfos": false,
+                "aspectRatio": "ar--teaserTop",
+                "hideGeotag": false,
+                "hideEditableByline": true,
+                "doTracking": true,
+                "trackingForArdMediatheksLink": false,
+                "showMediatheksLink": false,
+                "showAirdate": false,
+                "showProfileInfoAsByline": false,
+                "obsolet_brandOfTeaser": "hessenschau",
+                "documentSection": "",
+                "headlineTag": "h1",
+                "icon": "ortsmarke",
+                "imageVariant": "topteaser",
+                "shorttext": "",
+                "sophoraId": "rueckkehr-nach-abschiebung-wolfhagen--100",
+                "profiles": "",
+                "teaserLead": {
+                    "avDocument": "",
+                    "image": ""
+                },
+                "geotag": [
+                    {
+                        "title": "Wolfhagen"
+                    }
+                ],
+                "link": {
+                    "url": "/teaser1",
+                    "webviewUrl": "/teaser1#webview",
+                    "isTargetBlank": false,
+                    "hasIcon": false,
+                    "iconName": "iconName",
+                    "readMoreText": {
+                        "readMoreScreenreader": "Zum Artikel",
+                        "readMore": "mehr",
+                        "readMoreLong": "read More Long"
+                    },
+                    "content": {
+                        "headlineTag": "h1",
+                        "headingFontVariant": "serif",
+                        "imageVariant": "topteaser",
+                        "isFileDownload": false,
+                        "teaserImage": {
+                            "@->jsoninclude": "teaser/teaser_images.inc.json",
+                            "@->contentpath": "standard_1"
+                        },
+                        "teaserSize": "hero",
+                        "isMobile1to1": false,
+                        "teaserType": "standard-ds",
+                        "title": "Abgeschobene Geschwister aus Syrien zurück in Wolfhagen",
+                        "topline": "Überglücklich, aber ohne Mama",
+                        "trackingData": {
+                            "secondLevelId": "2",
+                            "pageName": "hessenschau"
+                        }
+                    }
+                }
+            }
+        }
+    },
     "teaserWithComments": {
         "isSsi": true,
         "logicItem": {

package/src/stories/views/components/teaser/fixtures/teaser_alternative_100_serif_download.json

@@ -0,0 +1 @@
+{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_alternative","includeModel":{"byline":"Byline","title":"Download","topline":"","headingFontVariant":"serif","extendedTitle":"","teaserType":"alternative-ds","teaserSize":"100","isMobile1to1":"true","teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":false,"showTeaserInfoProgramRef":true},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"https://picsum.photos/id/188/480/270","sources":[{"media":"all and (max-width: 47.938em)","sizes":"40vw","srcset":"https://picsum.photos/id/188/320/320 320w, https://picsum.photos/id/188/480/480 480w, https://picsum.photos/id/188/640/640 640w, https://picsum.photos/id/188/960/960 960w"},{"media":"all and (min-width: 48em) ","sizes":"33vw","srcset":"https://picsum.photos/id/188/320/180 320w, https://picsum.photos/id/188/480/270 480w, https://picsum.photos/id/188/640/360 640w, https://picsum.photos/id/188/960/540 960w"}]}},"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"","sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"},"content":{"headlineTag":"h1","headingFontVariant":"serif","imageVariant":"topteaser","isFileDownload":false,"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/188/480/270","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","srcset":"https://picsum.photos/id/188/320/180 320w, https://picsum.photos/id/188/480/270 480w, https://picsum.photos/id/188/640/360 640w, https://picsum.photos/id/188/960/540 960w, https://picsum.photos/id/188/1920/1080 1920w"}]}},"teaserSize":"hero","isMobile1to1":"true","teaserType":"standard-ds","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","trackingData":{"secondLevelId":"2","pageName":"hessenschau"}}},"label":{"type":"download","loca":"label_download","byline":{"bylineSsi":"ZIP - 3mb","bylineText":"BylineText"}}}}}

package/src/stories/views/components/teaser/fixtures/teaser_alternative_50_serif_download.json

@@ -0,0 +1 @@
+{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_alternative","includeModel":{"byline":"Byline","title":"Download","topline":"","headingFontVariant":"serif","extendedTitle":"","teaserType":"alternative-ds","teaserSize":"50","isMobile1to1":"true","teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":false,"showTeaserInfoProgramRef":true},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"https://picsum.photos/id/189/480/270","sources":[{"media":"all and (max-width: 47.938em)","sizes":"40vw","srcset":"https://picsum.photos/id/189/320/320 320w, https://picsum.photos/id/189/480/480 480w, https://picsum.photos/id/189/640/640 640w, https://picsum.photos/id/189/960/960 960w"},{"media":"all and (min-width: 48em) ","sizes":"33vw","srcset":"https://picsum.photos/id/189/320/180 320w, https://picsum.photos/id/189/480/270 480w, https://picsum.photos/id/189/640/360 640w, https://picsum.photos/id/189/960/540 960w"}]}},"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"","sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"},"content":{"headlineTag":"h1","headingFontVariant":"serif","imageVariant":"topteaser","isFileDownload":false,"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/188/480/270","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","srcset":"https://picsum.photos/id/188/320/180 320w, https://picsum.photos/id/188/480/270 480w, https://picsum.photos/id/188/640/360 640w, https://picsum.photos/id/188/960/540 960w, https://picsum.photos/id/188/1920/1080 1920w"}]}},"teaserSize":"hero","isMobile1to1":"true","teaserType":"standard-ds","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","trackingData":{"secondLevelId":"2","pageName":"hessenschau"}}},"label":{"type":"download","loca":"label_download","byline":{"bylineSsi":"ZIP - 3mb","bylineText":"BylineText"}}}}}

package/src/stories/views/components/teaser/fixtures/teaser_standard_100_serif_download.json

@@ -0,0 +1 @@
+{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Download","topline":"","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard-ds","teaserSize":"100","isMobile1to1":false,"teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":false,"showTeaserInfoProgramRef":true},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/188/480/270","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","srcset":"https://picsum.photos/id/188/320/180 320w, https://picsum.photos/id/188/480/270 480w, https://picsum.photos/id/188/640/360 640w, https://picsum.photos/id/188/960/540 960w, https://picsum.photos/id/188/1920/1080 1920w"}]}},"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"","sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"},"content":{"headlineTag":"h1","headingFontVariant":"serif","imageVariant":"topteaser","isFileDownload":false,"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/188/480/270","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","srcset":"https://picsum.photos/id/188/320/180 320w, https://picsum.photos/id/188/480/270 480w, https://picsum.photos/id/188/640/360 640w, https://picsum.photos/id/188/960/540 960w, https://picsum.photos/id/188/1920/1080 1920w"}]}},"teaserSize":"hero","isMobile1to1":false,"teaserType":"standard-ds","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","trackingData":{"secondLevelId":"2","pageName":"hessenschau"}}},"label":{"type":"download","loca":"label_download","byline":{"bylineSsi":"ZIP - 3mb","bylineText":"BylineText"}}}}}

package/src/stories/views/components/teaser/fixtures/teaser_standard_50_serif_download.json

@@ -0,0 +1 @@
+{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Download","topline":"","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard-ds","teaserSize":"50","isMobile1to1":false,"teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":false,"showTeaserInfoProgramRef":true},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/188/480/270","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","srcset":"https://picsum.photos/id/188/320/180 320w, https://picsum.photos/id/188/480/270 480w, https://picsum.photos/id/188/640/360 640w, https://picsum.photos/id/188/960/540 960w, https://picsum.photos/id/188/1920/1080 1920w"}]}},"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"","sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"},"content":{"headlineTag":"h1","headingFontVariant":"serif","imageVariant":"topteaser","isFileDownload":false,"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/188/480/270","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","srcset":"https://picsum.photos/id/188/320/180 320w, https://picsum.photos/id/188/480/270 480w, https://picsum.photos/id/188/640/360 640w, https://picsum.photos/id/188/960/540 960w, https://picsum.photos/id/188/1920/1080 1920w"}]}},"teaserSize":"hero","isMobile1to1":false,"teaserType":"standard-ds","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","trackingData":{"secondLevelId":"2","pageName":"hessenschau"}}},"label":{"type":"download","loca":"label_download","byline":{"bylineSsi":"ZIP - 3mb","bylineText":"BylineText"}}}}}

package/src/stories/views/components/teaser/teaser_alternativ.stories.mdx

@@ -8,6 +8,7 @@ import heroTeaserWithLabel from './fixtures/teaser_alternative_hero_serif_label.
 import heroTeaserWithComments from './fixtures/teaser_alternative_hero_serif_comments.json'
 import teaser100 from './fixtures/teaser_alternative_100_serif.json'
 import teaser50 from './fixtures/teaser_alternative_50_serif.json'
+import teaser50Download from './fixtures/teaser_alternative_50_serif_download.json'
 
 <Meta
     title="Komponenten/Teaser/Alternativ"
@@ -67,6 +68,10 @@ Der Alternativ-Teaser besteht aus 2 Hauptelemente: <b>Bild</b> und <b>Text</b> (
     Desktop = Bild(33%) neben Text(66%) <br/>
     Mobile = Verhalten wie bei 100% Standard-Teaser <br/>
 
+<b>Alternativ 50% mit Download:</b> <br/>
+    Desktop = Bild(33%) neben Text(66%) <br/>
+    Mobile = Verhalten wie bei 100% Standard-Teaser <br/>    
+
 Der Alternativ-Teaser soll nur als 100%- bzw. 50%-Teaser verwendet werden.
 
 ## Sub-Komponenten
@@ -111,4 +116,7 @@ Die Alternativ-Teaser-Komponente wird in handlebars wie folgt eingebaut:
     <Story name="Alternativ 50" args={teaser50.logicItem.includeModel}>
         {Template.bind({})}
     </Story>
+    <Story name="Alternativ 50 mit Download" args={teaser50Download.logicItem.includeModel}>
+        {Template.bind({})}
+    </Story>
 </Preview>

package/src/stories/views/components/teaser/teaser_standard.stories.mdx

@@ -7,6 +7,7 @@ import teaser100Serif from './fixtures/teaser_standard_100_serif.json'
 import teaser50Serif from './fixtures/teaser_standard_50_serif.json'
 import teaser33Serif from './fixtures/teaser_standard_33_serif.json'
 import teaser25Serif from './fixtures/teaser_standard_25_serif.json'
+import teaser100Download from './fixtures/teaser_standard_100_serif_download.json'
 
 <Meta
     title="Komponenten/Teaser/Standard"
@@ -108,5 +109,8 @@ Die Standard-Teaser-Komponente wird in handlebars wie folgt eingebaut:
     <Story name="Standard 25" args={teaser25Serif.logicItem.includeModel}>
         {Template.bind({})}
     </Story>
+    <Story name="Standard 100 Mit Download" args={teaser100Download.logicItem.includeModel}>
+        {Template.bind({})}
+    </Story>
 </Preview>
 

package/src/stories/views/generic/hrQuery.subfeature.js

@@ -0,0 +1,380 @@
+import Initializer from 'initializer'
+import loadFeature from 'loadFeature'
+
+const hr$ = (selector, element) => {
+    // if element set, use it
+    // if not use document as default
+    const rootElement = element || document
+
+    // falls kein selector angegeben
+    // gib das element zurück
+    if (!selector) {
+        return rootElement
+    }
+
+    // wenn ein , oder ein leerzeichen '.class1 .class2'
+    // in der query dann qSA
+    if (
+        selector.indexOf(',') > 0 ||
+        selector.split(' ').length > 1 ||
+        selector.split('.').length > 1
+    ) {
+        return rootElement.querySelectorAll(selector)
+    }
+
+    if (selector[0] === '.') {
+        return rootElement.getElementsByClassName(selector.substring(1))
+    }
+
+    if (selector[0] === '#') {
+        return new Array(document.getElementById(selector.substring(1)))
+    }
+
+    // gib eine NodeList zurück
+    return rootElement.querySelectorAll(selector)
+}
+
+const stripTags = text => {
+    if (text) {
+        return text.replace(/(<([^>]+)>)/gi, '')
+    }
+    return false
+}
+
+const getViewportWidth = () =>
+    Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
+
+const isString = value => Object.prototype.toString.call(value) === '[object String]'
+
+const isElementInViewport = el => {
+    const rect = el.getBoundingClientRect()
+    return rect.top <= (document.documentElement || document.body).clientHeight
+}
+
+const getClosestParentWithTag = (tagName, node) => {
+    while (node !== null && node.tagName !== 'BODY') {
+        if (node.tagName && node.tagName.toLowerCase() === tagName) {
+            return node
+        }
+        node = node.parentNode
+    }
+    return false
+}
+
+const getNodeWithClassInPath = (className, startNode) => {
+    let node = startNode
+
+    while (node && node !== document) {
+        if (node.classList.contains(className)) {
+            return node
+        }
+        node = node.parentNode
+    }
+    return false
+}
+
+const isDescendant = (parent, child) => {
+    let node = child.parentNode
+    while (node !== null) {
+        if (node === parent) {
+            return true
+        }
+        node = node.parentNode
+    }
+    return false
+}
+
+/* wartet x ms seit dem letzen aufruf bis es ausgeführt wird */
+const debounce = (fn, delay) => {
+    let timer = null
+    return (...args) => {
+        const context = this
+        clearTimeout(timer)
+        timer = setTimeout(() => {
+            fn.apply(context, args)
+        }, delay)
+    }
+}
+/* feuert all x ms */
+const throttle = (fn, threshhold, scope) => {
+    threshhold = threshhold || 250
+    let last
+    let deferTimer
+    return (...args) => {
+        const context = scope || this
+
+        const now = +new Date()
+        if (last && now < last + threshhold) {
+            // hold on to it
+            clearTimeout(deferTimer)
+            deferTimer = setTimeout(() => {
+                last = now
+                fn.apply(context, args)
+            }, threshhold)
+        } else {
+            last = now
+            fn.apply(context, args)
+        }
+    }
+}
+
+/* Once, führt eine Funktion genau einmal aus, egal wie oft sie aufgerufen wird
+ * Usage
+    var canOnlyFireOnce = hr$.once(function() {
+        console.log('Fired!');
+    });
+
+    canOnlyFireOnce(); // "Fired!"
+    canOnlyFireOnce(); // nada
+ *
+ */
+const once = (fn, context) => {
+    let result
+
+    return (...args) => {
+        if (fn) {
+            result = fn.apply(context || this, args)
+            fn = null
+        }
+
+        return result
+    }
+}
+
+const listen = (eventName, fn, documentNode) => {
+    documentNode = documentNode === undefined ? document : documentNode
+
+    if (window.attachEvent) {
+        documentNode.attachEvent(eventName, fn)
+    } else {
+        documentNode.addEventListener(eventName, fn)
+    }
+}
+const unlisten = (eventName, fn, documentNode) => {
+    documentNode = documentNode === undefined ? document : documentNode
+
+    if (window.attachEvent) {
+        documentNode.detachEvent(eventName, fn)
+    } else {
+        documentNode.removeEventListener(eventName, fn)
+    }
+}
+const listenOnce = (eventName, fn, documentNode) => {
+    documentNode = documentNode === undefined ? document : documentNode
+
+    documentNode.addEventListener(eventName, fn, { once: true })
+}
+
+const fireEvent = (event_name, data, handleIframe) => {
+    const event = document.createEvent('CustomEvent')
+
+    event.initCustomEvent(event_name, true, true, data)
+
+    document.dispatchEvent(event)
+
+    if (handleIframe) {
+        if (hr$('#js-iFrame')[0]) {
+            hr$('#js-iFrame')[0].contentWindow.document.dispatchEvent(event)
+        }
+        if (inIframe()) {
+            parent.document.dispatchEvent(event)
+        }
+    }
+}
+
+const inIframe = () => {
+    try {
+        return window.self !== window.top
+    } catch (e) {
+        return true
+    }
+}
+
+const setJSONCookie = (cookieName, cookieValue, cookieLifetime) => {
+    setCookie(cookieName, JSON.stringify(cookieValue), cookieLifetime)
+}
+
+const setCookie = (cookieName, cookieValue, cookieLifetime) => {
+    let expires
+
+    const domain = getDomain()
+
+    if (cookieLifetime) {
+        expires = new Date()
+        expires.setMilliseconds(expires.getMilliseconds() + cookieLifetime)
+        expires = expires.toUTCString()
+    } else {
+        expires = ''
+    }
+
+    document.cookie =
+        cookieName + '=' + cookieValue + ';expires=' + expires + ';domain=' + domain + ';path=/;'
+}
+
+const getJSONCookie = cookieName => {
+    let cookie
+
+    try {
+        cookie = JSON.parse(getCookie(cookieName))
+    } catch (e) {}
+
+    return cookie
+}
+
+const getCookie = cookieName => {
+    let cookieString = RegExp('' + cookieName + '[^;]+').exec(document.cookie)
+    return unescape(!!cookieString ? cookieString.toString().replace(/^[^=]+./, '') : '')
+}
+
+const deleteCookie = cookieName => {
+    const domain = getDomain()
+    document.cookie =
+        cookieName + '=;expires=Thu, 01 Jan 1970 00:00:01 GMT;domain=' + domain + ';path=/;'
+}
+
+const getDomain = () => {
+    return window.location.hostname.substring(window.location.hostname.indexOf('.') + 1)
+}
+const requestTimeout = (fn, delay) => {
+    var requestAnimFrame = (function() {
+            return (
+                window.requestAnimationFrame ||
+                function(callback, element) {
+                    window.setTimeout(callback, 1000 / 60)
+                }
+            )
+        })(),
+        start = new Date().getTime(),
+        handle = {}
+    function loop() {
+        var current = new Date().getTime(),
+            delta = current - start
+        if (delta >= delay) {
+            fn.call()
+        } else {
+            handle.value = requestAnimFrame(loop)
+        }
+    }
+    handle.value = requestAnimFrame(loop)
+    return handle
+}
+
+const replaceAnimated = (
+    elem,
+    data,
+    rescan,
+    callback,
+    timeoutDelay,
+    valueFrom,
+    valueTo,
+    easing,
+    duration
+) => {
+    const property = 'opacity'
+    timeoutDelay = timeoutDelay || 800
+    valueFrom = valueFrom || 0.2
+    valueTo = valueTo || 1.0
+    easing = easing || 'ease-in-out'
+    duration = duration || '0.8s'
+
+    elem.style.WebkitTransition = property + ' ' + duration + ' ' + easing
+    elem.style.MozTransition = property + ' ' + duration + ' ' + easing
+    elem.style.transition = property + ' ' + duration + ' ' + easing
+
+    elem.style[property] = valueFrom
+
+    requestTimeout(function() {
+        if (data) {
+            elem.innerHTML = data
+        }
+        elem.style[property] = valueTo
+
+        if (rescan) {
+            Initializer.run(elem, loadFeature)
+            hrScriptLoad.rescanForModulesAndVariants(elem)
+        }
+
+        if (callback) {
+            callback()
+        }
+    }, timeoutDelay)
+}
+
+hr$.loadScript = function(id, scriptUrl, async, callback) {
+    if (document.getElementById(id)) return
+
+    var firstScriptTagInPage = hr$('script')[0],
+        scriptTag = document.createElement('script')
+
+    scriptTag.id = id
+    scriptTag.src = scriptUrl
+
+    if (async) {
+        scriptTag.setAttribute('async', !!async)
+    }
+
+    if (callback) {
+        scriptTag.addEventListener(
+            'load',
+            function(e) {
+                callback(null, e)
+            },
+            false
+        )
+    }
+
+    firstScriptTagInPage.parentNode.insertBefore(scriptTag, firstScriptTagInPage)
+}
+
+const loadScript = (id, scriptUrl, async, callback) => {
+    if (document.getElementById(id)) return
+
+    let firstScriptTagInPage = hr$('script')[0],
+        scriptTag = document.createElement('script')
+
+    scriptTag.id = id
+    scriptTag.src = scriptUrl
+
+    if (async) {
+        scriptTag.setAttribute('async', !!async)
+    }
+
+    if (callback) {
+        scriptTag.addEventListener(
+            'load',
+            function(e) {
+                callback(null, e)
+            },
+            false
+        )
+    }
+
+    firstScriptTagInPage.parentNode.insertBefore(scriptTag, firstScriptTagInPage)
+}
+
+export {
+    hr$,
+    stripTags,
+    getViewportWidth,
+    isString,
+    isElementInViewport,
+    getClosestParentWithTag,
+    getNodeWithClassInPath,
+    isDescendant,
+    debounce,
+    throttle,
+    once,
+    listen,
+    unlisten,
+    listenOnce,
+    fireEvent,
+    inIframe,
+    setCookie,
+    setJSONCookie,
+    getJSONCookie,
+    getCookie,
+    deleteCookie,
+    requestTimeout,
+    replaceAnimated,
+    loadScript
+}