hr-design-system-handlebars 0.63.0 → 0.64.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/build/handlebars/partials/handlebar-partials.js +7 -7
- package/dist/assets/index.css +12 -8
- package/dist/views/components/teaser/podcast/podcast_player.hbs +9 -9
- package/dist/views/components/teaser/podcast/podcast_player_ui.hbs +21 -18
- package/dist/views/components/teaser/podcast/podcast_timedisplay.hbs +1 -1
- package/package.json +1 -1
- package/src/assets/fixtures/teaser/teasers.inc.json +1 -1
- package/src/stories/views/components/teaser/fixtures/teaser_podcast.json +1 -1
- package/src/stories/views/components/teaser/podcast/podcast_player.hbs +9 -9
- package/src/stories/views/components/teaser/podcast/podcast_player_ui.hbs +21 -18
- package/src/stories/views/components/teaser/podcast/podcast_timedisplay.hbs +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v0.64.0 (Thu Oct 13 2022)
|
|
2
|
+
|
|
3
|
+
#### 🚀 Enhancement
|
|
4
|
+
|
|
5
|
+
- Dpe 1696 podcast player refactoring part3 [#340](https://github.com/mumprod/hr-design-system-handlebars/pull/340) ([@StefanVesper](https://github.com/StefanVesper))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v0.63.0 (Thu Oct 13 2022)
|
|
2
14
|
|
|
3
15
|
#### 🚀 Enhancement
|
|
@@ -21,10 +21,10 @@ module.exports['components/grid/grid_group_tabbed.hbs'] = '</div>\n<section clas
|
|
|
21
21
|
module.exports['components/grid/grid_item.hbs'] = '<article class="col-span-12 {{inline-switch _size \'["12","8","6","4","3"]\' \'["","md:col-span-8","md:col-span-6","md:col-span-4","md:col-span-3"]\'}}" >\n {{> @partial-block }} \n</article>'
|
|
22
22
|
module.exports['components/label/label.hbs'] = '<span\n class=\'sb-label rounded px-1.5 pt-px inline-block tracking-wide text-white text-base leading-5.5 font-heading\n {{inline-switch\n _type\n \'["media","event","breakingnews","comment","analysis","der-tag-in-hessen","glosse","fragen-und-antworten","infografik","interaktiv","program","download","pm","liveticker","ticker","livestream","live","livechat","buliticker","social-tv","blog","podcast"]\'\n \'["bg-labelMedia","bg-labelEvent","bg-labelBreakingnews","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelInfografik","bg-labelInfografik","bg-labelProgram","bg-labelDownload","bg-labelPm","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelMedia"]\'\n }}\'\n>\n {{_text}}\n</span>\n{{~#with this.byline~}}\n <span class=\'ml-2 text-xs text-grey-scorpion font-headingSerif\'>\n {{~#if this.bylineSsi~}}\n {{{this.bylineSsi}}}\n {{~else~}}\n {{this.bylineText}}\n {{~/if~}}\n </span>\n{{~/with~}}'
|
|
23
23
|
module.exports['components/mediaplayer/media_player.hbs'] = '<div x-show="avStart" id="{{this.ardPlayerConfig.playerId}}" class="ar-16-9 h-auto js-load {{if _cypressHook _cypressHook \'js-media-element\'}} js-video-livestream" data-hr-mediaplayer-loader=\'{{json this.ardPlayerJsonConfig}}\'>\n {{#unless _hideGeotag}}\n {{~#with _geotag}}\n <span class="js-geotag c-teaser__geotag" aria-hidden="true">{{this.[0].title~}}</span>\n {{/with~}}\n {{/unless}}\n</div>\n{{#if _isTeaser}}\n <div class="relative {{_aspectRatio}}" x-show="!avStart" > \n {{#with _teaser}}\n {{~#if ../_isCopyText~}}\n {{~> components/base/image/responsive_image this.teaserImage _type=(if this.teaserType this.teaserType \'story\') _variant=(if this.content.imageVariant this.content.imageVariant \'100-copytext\') _addClassImg="ar__content" _noDelay=../_noDelay ~}} \n {{else}} \n {{#decorator \'components/base/link\' _cssClasses="c-teaser__mediaLink" _isAriaHidden=true\n _doTracking=(if this.doTracking \'true\') _clickLabelPrefix1=this.realTeasersize\n _clickLabelPrefix2="mediaLink" }} \n {{~> components/base/image/responsive_image this.teaserImage _type=(if this.teaserType this.teaserType \'story\') _variant=(if this.content.imageVariant this.content.imageVariant \'100-copytext\') _addClassImg="js-mediaplayer__area ar__content mediaPlayerLoader__mediaplayerArea" _noDelay=../_noDelay ~}} \n {{/decorator }}\n {{/if}}\n {{/with}}\n {{> components/button/button_round _isButton="true" _addClass=(if _isLivestream \'absolute bottom-0 right-0 my-5 mx-5 text-orange-spicyCarrot hover:fill-orange-spicyCarrot js-mediaplayer__button\' \'absolute bottom-0 right-0 my-5 mx-5 text-blue-jellyBean hover:fill-blue-jellyBean js-mediaplayer__button\') _showIcon=true _icon=_mediaButtonIcon _label=_mediaButtonLabel _srOnly="true" _alpineClick="avStart = !avStart; $dispatch(\'player_start\')"}} \n {{~#if this.isPodcast~}}\n <a href="{{this.podcastDownloadUrl}}" class="absolute top-0 right-0 m-5 js-load"{{#with\n this.trackingData}}\n data-hr-click-tracking=\'{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}\'{{/with}}>\n {{> components/base/image/icon _icon=\'download-button\' _addClass="w-10 h-10"}}\n </a>\n {{~/if~}}\n </div>\n{{/if}}'
|
|
24
|
+
module.exports['components/page/page.hbs'] = '<!DOCTYPE html>\n<html \n class="no-js no-js-burgerMenu preload noMicroInteraction"\n data-theme="hessenschau" \n lang="de"\n>\n <head>\n\n <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>\n <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>\n <title>hessenschau.de | Nachrichten aus Hessen</title>\n <meta name="application-name" content="hessenschau.de" />\n <meta name="copyright" content="Hessischer Rundfunk, Frankfurt, Germany" />\n <meta name="author" content="hessenschau.de, Frankfurt, Germany" />\n <meta name="publisher" content="hessenschau.de" />\n <meta name="language" content="Deutsch" />\n\n </head>\n\n <body itemscope itemtype="http://schema.org/WebPage">\n <div class="js-pageSwap">\n \n {{> components/site_header/header }} \n \n <main \n onclick="void(0)" \n role="main" \n id="content"\n class="flex items-center justify-center"\n >\n <div class="grid grid-page">\n <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">\n {{> components/teaser/teaser_standard }}\n </div>\n <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">\n {{> components/teaser/teaser_standard teaserSize="50"}}\n {{> components/teaser/teaser_standard teaserSize="50"}}\n </div>\n <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">\n {{> components/teaser/teaser_standard teaserSize="33"}}\n {{> components/teaser/teaser_standard teaserSize="33"}}\n {{> components/teaser/teaser_standard teaserSize="33"}}\n </div>\n <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">\n {{> components/teaser/teaser_standard teaserSize="50"}}\n {{> components/teaser/teaser_standard teaserSize="50"}}\n </div> \n <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">\n {{> components/teaser/teaser_standard teaserSize="33"}}\n {{> components/teaser/teaser_standard teaserSize="33"}}\n {{> components/teaser/teaser_standard teaserSize="33"}}\n </div>\n <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">\n {{> components/teaser/teaser_standard teaserSize="50"}}\n {{> components/teaser/teaser_standard teaserSize="50"}}\n </div>\n \n </div>\n </main>\n\n </div>\n </body>\n</html>\n'
|
|
24
25
|
module.exports['components/site_header/burger.hbs'] = '<div x-data="burger()" class="flex items-center justify-center h-full fill-current sb-burger">\n <nav>\n <button {{!-- :class="$store.burgeropen ? \'text-blue-congress\' : \'text-white\'" --}} \n class="relative w-10 h-10 text-white tablet:w-18 tablet:h-12 focus:outline-none bg-brand"\n @burger-close.window="burgerClose()"\n @click="$store.burgeropen = !$store.burgeropen" \n @click.debounce="burgerClick()" \n aria-owns="sectionNav" \n aria-controls="sectionNav"\n x-effect="$el.setAttribute(\'aria-expanded\', $store.burgeropen);$el.setAttribute(\'aria-label\', $store.burgeropen ? \'Navigation schließen\' : \'Navigation öffnen\')"\n >\n <span class="sr-only md:hidden">Open main menu</span>\n <div class="absolute block w-6 transform -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2">\n <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-500 ease-in-out transform bg-current " :class="$store.burgeropen ? \'rotate-45\' : \'-mt-2\'"></span>\n <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-500 ease-in-out transform bg-current" :class="{\'opacity-0\': $store.burgeropen } "></span>\n <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-500 ease-in-out transform bg-current" :class="{\'-rotate-45\': $store.burgeropen, \'mt-2\': ! $store.burgeropen }"></span>\n </div>\n </button>\n </nav>\n</div>\n\n<script>\n var burger = () => {\n return {\n burgerClose(){ \n this.$store.burgeropen = false\n this.$dispatch(\'toggle-sectionnav\', false); \n },\n burgerClick(){ \n this.$store.serviceNavIsOpen = false\n this.$dispatch(\'toggle-sectionnav\', this.$store.burgeropen); \n // Todo: not doing anything! can be removed?\n // this.percent > 50 ? this.removeYtranslate() : null;\n this.toggleScrolling(!this.$store.burgeropen) \n },\n removeYtranslate(){\n // Todo: not doing anything! can be removed?\n //this.$refs.serviceList.classList.remove(\'-mt-40\'); \n //this.$refs.sectionnavigation.classList.remove(\'-mt-40\')\n }\n }\n }\n</script>\n'
|
|
25
26
|
module.exports['components/site_header/header.hbs'] = '<div class="sb-main-navigation" x-data="mainNavigationHandler()" x-init="init()">\n <header class="print:hidden relative z-10001 {{#if this.hasOpenSubNavigation}}lg:h-header-lg-big{{else}}lg:h-header-lg-small{{/if}} md:h-header-md h-header-sm"> \n <div x-data \n id="headerWrapper"\n @resize.window="resetNav()" \n :class="shouldBrandNavBeHidden() ? \'-mt-10 lg:-mt-8\' : \'\' "\n class="fixed top-0 left-0 flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">\n \n <div id="anchorNavWrapper" \n class="hidden">\n {{> components/site_header/anchor_navigation/anchor_navigation }}\n </div>\n\n <div id="brandNavWrapper" \n class="relative flex items-center justify-center order-1 w-full bg-white z-10000">\n {{> components/site_header/brand_navigation/brand_navigation }} \n </div>\n\n <div id="serviceNavWrapper" \n :class="shouldServiceNavBeHidden() ? \'-mt-40\' : \'\'"\n \n class="relative flex justify-center order-2 w-full transition-all duration-500 ease-in-out md:border-white lg:border-b bg-blue-congress z-10002"> \n <div id="serviceNavMainContainer" \n class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-10001">\n\n <span id="serviceNavHeadline" class="hidden print:hidden">Service Navigation</span>\n\n <div id="serviceLogoWrapper" \n class="flex items-center order-1 w-full pl-4 pr-2 tablet:pl-5 lg:items-end lg:pb-3 bg-blue-congress md:px-0 md:h-12 lg:h-16 md:w-1/2 md:max-w-1/2 lg:w-1/4 lg:max-w-1/4">\n {{> components/site_header/service_logo }}\n </div>\n \n <div id="serviceItemsWrapper" \n class="flex items-center justify-end flex-initial order-2 inline-block w-full max-w-full align-top bg-blue-congress md:h-12 lg:h-16 lg:order-2 lg:w-3/4 lg:max-w-3/4 md:mt-0 md:w-1/2 md:max-w-1/2 md:order-2 md:border-0">\n {{> components/site_header/service_navigation/service_list }}\n\n {{> components/site_header/navigation_search/quick_search_button }}\n\n <div class="hidden lg:flex">\n {{> components/site_header/navigation_search/quick_search_form }}\n </div>\n \n <div id="burgerWrapper" \n class="flex justify-end flex-none order-2 lg:order-4 md:order-4 lg:hidden"> \n {{> components/site_header/burger }} \n </div>\n \n </div>\n </div>\n </div>\n\n <div id="sectionNavWrapper" \n x-ref="sectionnavigation"\n @toggle-sectionnav.window="toggleSectionNav"\n :class="shouldSectionNavBeHidden() ? \'-mt-40 md:-mt-40 lg:-mt-40\' : \'\'" \n class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-max-height lg:transition-margin-top lg:duration-500 tablet:absolute tablet:top-22 tablet:w-half-screen tablet:ml-half-screen max-h-0 lg:overflow-visible md:mt-0 lg:flex lg:max-h-full lg:h-auto bg-blue-congress z-10000 print:hidden"\n >\n {{> components/site_header/section_navigation/section_navigation }}\n </div>\n \n <div x-cloak :class="shouldServiceNavBeHidden() ? \'hidden -mt-40\' : \'\'"\n x-effect="$el.setAttribute(\'id\', \'flyout-\' + $store.searchID.current + \'-2\');$el.setAttribute(\'aria-expanded\', $store.searchFieldOpen);$el.setAttribute(\'aria-hidden\', !$store.searchFieldOpen);$el.setAttribute(\'aria-labelledby\', \'flyout-\' + $store.searchID.current + \'-1\')" \n x-show="$store.searchFieldOpen"\n class="sb-quick-search-flyout flex tablet:w-half-screen tablet:ml-half-screen justify-end order-4 w-full max-w-full p-2 px-5 py-3.5 bg-white drop-shadow-md md:mt-0 z-10002 lg:hidden print:hidden"\n @search-close.window="$store.searchFieldOpen = false"\n @click.outside="$store.searchFieldOpen = false; $dispatch(\'search-mobile-click-outside\'); dropped = false; toggleScrolling(!$store.serviceNavIsOpensearchFieldOpen && !$store.burgeropen)"\n x-transition:enter="transition ease-out duration-200" \n x-transition:enter-start="opacity-0 transform scale-y-90" \n x-transition:enter-end="opacity-100 transform scale-y-100" \n x-transition:leave="transition ease-in duration-100" \n x-transition:leave-start="opacity-100 transform scale-y-100" \n x-transition:leave-end="opacity-0 transform scale-y-90">\n\n {{> components/site_header/navigation_search/quick_search_form }}\n\n </div>\n \n </div> \n </header>\n <div class="justify-center hidden w-full scale-50 brand-logo_print print:flex">\n <img loading="lazy" \n alt="{{loca "header_homepage_link_title"}}" \n src="{{resourceUrl "assets/base/icons/rsslogo/brandlogo--rss.jpg" _brand=(if this.brand this.brand)}}" \n />\n </div>\n <div x-ref="myOverlay">\n <div x-cloak x-data="overlayHandler()" @click.debounce="overlayWasClicked()" x-show="shouldOverlayBeShown()" class="fixed top-0 left-0 w-screen h-screen bg-gray-800 z-10000 lg:hidden opacity-70"></div>\n </div>\n</div>\n'
|
|
26
27
|
module.exports['components/site_header/service_logo.hbs'] = '<a class="relative flex items-center text-white fill-current sb-service-logo lg:items-end link-focus-white print:hidden" \n href="https://www.hessenschau.de/index.html" \n title="Startseite hessenschau . d e">\n <span x-cloak class="absolute transition-opacity duration-500 ease-in-out" :class="`${percent}` < 50 ? \'opacity-0\' : \'delay-200 opacity-100\'" >\n {{> components/base/image/icon _icon="brandlogo--compact-40x40px" _iconmap="logo" _addClass="logo-compact w-7 h-7 lg:w-10 lg:h-10 items-center "}}\n </span>\n <span class="transition-opacity duration-500 ease-in-out" :class="`${percent}` < 50 ? \'opacity-100\' : \'opacity-0\'">\n {{> components/base/image/icon _icon="brandlogo--desk" _iconmap="logo" _addClass="logo-desk flex items-center fill-white w-40 h-5 md:h-7 md:w-40 lg:h-8 lg:w-52"}}\n </span> \n</a>\n'
|
|
27
|
-
module.exports['components/page/page.hbs'] = '<!DOCTYPE html>\n<html \n class="no-js no-js-burgerMenu preload noMicroInteraction"\n data-theme="hessenschau" \n lang="de"\n>\n <head>\n\n <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>\n <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>\n <title>hessenschau.de | Nachrichten aus Hessen</title>\n <meta name="application-name" content="hessenschau.de" />\n <meta name="copyright" content="Hessischer Rundfunk, Frankfurt, Germany" />\n <meta name="author" content="hessenschau.de, Frankfurt, Germany" />\n <meta name="publisher" content="hessenschau.de" />\n <meta name="language" content="Deutsch" />\n\n </head>\n\n <body itemscope itemtype="http://schema.org/WebPage">\n <div class="js-pageSwap">\n \n {{> components/site_header/header }} \n \n <main \n onclick="void(0)" \n role="main" \n id="content"\n class="flex items-center justify-center"\n >\n <div class="grid grid-page">\n <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">\n {{> components/teaser/teaser_standard }}\n </div>\n <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">\n {{> components/teaser/teaser_standard teaserSize="50"}}\n {{> components/teaser/teaser_standard teaserSize="50"}}\n </div>\n <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">\n {{> components/teaser/teaser_standard teaserSize="33"}}\n {{> components/teaser/teaser_standard teaserSize="33"}}\n {{> components/teaser/teaser_standard teaserSize="33"}}\n </div>\n <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">\n {{> components/teaser/teaser_standard teaserSize="50"}}\n {{> components/teaser/teaser_standard teaserSize="50"}}\n </div> \n <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">\n {{> components/teaser/teaser_standard teaserSize="33"}}\n {{> components/teaser/teaser_standard teaserSize="33"}}\n {{> components/teaser/teaser_standard teaserSize="33"}}\n </div>\n <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">\n {{> components/teaser/teaser_standard teaserSize="50"}}\n {{> components/teaser/teaser_standard teaserSize="50"}}\n </div>\n \n </div>\n </main>\n\n </div>\n </body>\n</html>\n'
|
|
28
28
|
module.exports['components/teaser/teaser_alternativ.hbs'] = '<article class="col-span-12 flex md:flex-row gap-y-3 gap-x-4 md:px-0{{#unless this.isEvent}}{{~inline-switch this.teaserSize \'["hero","100","50"]\' \'[" flex-col"," px-5 md:flex-row"," md:col-span-6 px-5 md:flex-row"]\'~}}{{else}} items-start flex-col{{/unless}}"\n x-data="{ avStart: false }"\n {{#if this.isMobile1to1}}\n :class="avStart ? \'flex-col\' : \'flex-row\'"\n {{/if}} \n >\n <figure class="relative {{~inline-switch this.teaserSize \'["hero","100","50"]\' \'[" basis-2/3 ar-16-9"," ar-1-1 md:ar-16-9 basis-2/5 md:basis-1/3"," ar-1-1 md-ar-16-9 basis-2/5 md:basis-1/2"]\'~}}">\n {{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _aspectRatio=(inline-switch this.teaserSize \'["hero"]\' \'["ar-16-9","ar-1-1 md:ar-16-9"]\') }} \n </figure>\n {{> components/teaser/components/teaser_body _outerCssClasses=(inline-switch this.teaserSize \'["hero","100","50"]\' \'["basis-1/3"," basis-3/5 md:basis-2/3"," basis-3/5 md:basis-1/2"]\') }}\n</article>'
|
|
29
29
|
module.exports['components/teaser/teaser_poster.hbs'] = '<article class="mx-5 md:mx-0 relative col-span-12 flex gap-y-5 gap-x-4 {{inline-switch this.teaserSize \'["33","50"]\' \'["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]\'}} ">\n <figure class="ar-1-1" aria-hidden="true">\n {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content rounded-tl-3xl rounded-br-3xl" ~}}\n </figure> \n <div class="absolute flex justify-center w-full h-full bg-gradient-to-t from-black rounded-tl-3xl rounded-br-3xl" aria-hidden="true">\n <div class="self-center block mx-8 text-center text-white">\n {{> components/teaser/components/teaser_heading _headlineTag="h2" _label=this.label _readMore=this.link.readMoreText.readMoreScreenreader _size=this.teaserSize _title=this.title _topline=this.topline _teaserType=this.teaserType _font=(inline-switch isSerifHeading \'[true, false]\' \'["font-headingSerif","font-heading font-bold"]\') }} \n </div>\n </div>\n {{#decorator \'components/base/link\' _css="absolute flex w-full h-full justify-center" _isAriaHidden=true _doTracking=(if this.doTracking \'true\') _clickLabelPrefix1=this.teaserSize _clickLabelPrefix2="mediaLink" }}\n <div class="self-end {{inline-switch this.teaserSize \'["33","50"]\' \'["mb-8 px-2","mb-8 md:mb-16 px-4 py-2.5"]\'}} text-white border border-white font-heading hover:bg-white hover:text-toplineColor hover:border-toplineColor">{{this.link.readMoreText.readMoreLong}}</div>\n {{/decorator}} \n <span class="sr-only">{{this.link.readMoreText.readMoreLong}}: {{this.title}}</span> \n</article>'
|
|
30
30
|
module.exports['components/teaser/teaser_standard.hbs'] = '<article class="relative col-span-12 flex {{if this.displayTeaserBodyAsImageOverlay \'\' \'gap-y-3\'}} gap-x-4 \n{{~inline-switch this.teaserSize \'["25","33","50"]\' \'[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]\'}}\n{{~#if this.isMobile1to1}} js-is1to1 px-5 md:px-0 md:flex-col{{else}} flex-col{{/if~}} \n "\n x-data="{ avStart: false }"\n {{#if this.isMobile1to1}}\n :class="avStart ? \'flex-col\' : \'flex-row\'"\n {{/if}} \n >\n <figure class="relative \n {{~#if this.isMobile1to1}} basis-2/5 md:flex-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}"> \n {{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _aspectRatio=(inline-switch this.teaserSize \'["25"]\' \'["ar-1-1 md:ar-16-9", "ar-16-9"]\') }} \n </figure>\n {{#if this.displayTeaserBodyAsImageOverlay}}\n {{#decorator \'components/teaser/components/teaser_image_overlay\' _noOverlayInMobileViewports=true _cssClasses=" relative md:absolute w-full bottom-0"}}\n <div class="flex flex-col items-center justify-center p-4 border-dashed border-r border-gray-400">\n {{> components/event/instant_dates}}\n </div>\n {{> components/teaser/components/teaser_body _outerCssClasses=(if this.isMobile1to1 \'py-4 md:px-4 basis-3/5 md:flex-full\' \'py-4 md:px-4\')}}\n {{/decorator}}\n {{else}}\n {{> components/teaser/components/teaser_body _outerCssClasses=(if this.isMobile1to1 \'basis-3/5 md:flex-full\')}}\n {{/if}}\n</article>'
|
|
@@ -33,15 +33,15 @@ module.exports['components/base/image/icon.hbs'] = '{{!--@\nFügt ein SVG-basier
|
|
|
33
33
|
module.exports['components/base/image/responsive_image.hbs'] = '{{!--\n\n`_type`\n`_variant`\n`_alttext` Alternativ-Text des Bildes.<br>\n`_addClass` Möglichkeit zur Angabe einer zusätzlichen CSS-Klasse. `image` ist Standard.<br>\n`_addClassImg`\n`_noDelay` Bilder ohne verzögerung anzeigen, also direkt ins dom schreiben\n`_errorHandler` JavaScript-Code, der ausgeführt wird, wenn das Bild nicht geladen werden kann. Wird z.B. für Fehlerhandling für EDP-Images genutzt.<br>\n\'_disableNoScript\' don\'t add no script fallback\n\n--}}\n{{#withParam this.responsiveImage _type _variant }}\n {{#if this.asPicture}}\n <picture class="{{~#if ../_addClass}} {{../_addClass}}{{/if}}">\n {{#unless _disableNoScript}}\n <noscript>\n <img class="{{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" src="{{this.fallback}}" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}">\n </noscript>\n {{/unless}}\n {{#with this.sources}}\n {{#each this}}\n <source{{#with this.media}} media="{{this}}"{{/with}}\n {{#with this.sizes}} sizes="{{this}}"{{/with}}\n {{#with this.srcset}} srcset="{{this}}"{{/with}}>\n {{/each}}\n {{/with}}\n <img class="{{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" loading="{{#if ../_noDelay}}auto{{else}}lazy{{/if}}" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}" {{~#if ../_errorHandler }} onerror="this.onerror=null; {{../_errorHandler}}"{{/if}}>\n </picture>\n {{/if}}\n\n {{#if this.asImage}}\n {{#with this.sources.[0]}}\n {{~#with ../../_addClass }}<div class="{{this}}">{{/with}}\n {{#unless ../../_disableNoScript}}\n <noscript>\n <img class="{{~#if ../../_addClassImg}} {{../../_addClassImg}}{{/if}}" src="{{../this.fallback}}" alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}">\n </noscript>\n {{/unless}}\n <img {{#with this.sizes}}sizes="{{this}}" {{/with~}}\n loading="{{#if ../../_noDelay}}auto{{else}}lazy{{/if}}"\n {{#with this.srcset}} {{#if ../../../_noDelay}}srcset{{else}}data-srcset{{/if}}="{{this}}"{{/with}}\n src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="\n alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}" class="{{~#with ../../_addClassImg }} {{this}}{{/with}}" {{~#if ../../_errorHandler}} onerror="this.onerror=null; {{../../_errorHandler}}" {{~/if}}>\n {{~#with ../../_addClass }}</div>{{/with}}\n {{/with}}\n\n {{/if}}\n{{/withParam}}'
|
|
34
34
|
module.exports['components/site_header/anchor_navigation/anchor_navigation.hbs'] = '<nav id="sprungmarken" aria-labelledby="anchorNavHeadline">\n <span id="anchorNavHeadline" class="hidden">{{loca "anchor_headline"}}</span>\n <ul>\n <li><a href="#brandNavWrapper" class="hidden">{{loca "anchor_brandNav"}}</a></li>\n <li><a href="#serviceNavWrapper" class="hidden">{{loca "anchor_serviceNav"}}</a></li>\n <li><a href="#sectionNavWrapper" class="hidden">{{loca "anchor_sectionNav"}}</a></li>\n {{{this.featureBoxAnchorSSI}}}\n <li><a href="#content" class="hidden">{{loca "anchor_mainContent"}}</a></li>\n </ul>\n</nav>'
|
|
35
35
|
module.exports['components/site_header/anchor_navigation/featurebox_anchor.hbs'] = '{{#with this.featureBox}}\n<li><a href="#featureBox" class="hidden">{{loca "feature_box_anchor"}}</a></li>\n{{/with}}'
|
|
36
|
+
module.exports['components/site_header/navigation_flyout/navigation_flyout.hbs'] = '{{#with this.subNavigation}}\n <div {{#unless ../this.selected}}x-cloak{{/unless}}\n x-data="flyoutHandler" \n x-ref="{{getRandom}}"\n id="flyout-{{getRandom}}" \n @resize.window.debounce="setFlyoutAnimationStyle();"\n {{#if this.showAsFlyout}} x-show="dropped" {{else}} {{#if ../this.selected}} x-show="$screen(\'lg\') ? true : dropped" {{else}} x-show="dropped" {{/if}} {{/if}}\n {{#if ../_isSectionNav}} x-init="sectionNavFlyoutWatcher()" :class ="shouldFlyoutBeHidden() ? \'hidden\' : \'\'" {{/if}} \n \n class="sb-navigation-flyout bg-white md:filter md:drop-shadow-md lg:absolute \n {{#if ../_isSectionNav}} relative md:top-auto md:left-auto lg:mt-10 w-full transition-all duration-500 ease-in-out\n {{#unless this.showAsFlyout}}\n {{#if ../this.selected}}\n isSelectedAndOpen lg:ml-0 z-10000 lg:border-b lg:border-blue-congress lg:filter-none lg:left-0 flex justify-center\n {{else}} z-10002 lg:left-auto lg:w-auto {{/if}}\n {{else}} z-10002 lg:left-auto lg:w-auto {{/unless}}\n {{else}} z-10002 lg:rounded-b absolute w-full top-10 left-0 md:w-80 lg:w-92 md:top-12 lg:px-4 md:mt-0 md:left-0 lg:top-15 lg:left-0 lg:pl-6 divide-y divide-gray-200 tablet:w-half-screen tablet:ml-half-screen tablet:right-0 tablet:left-auto {{/if}}\n {{#if this.showAsFlyout}} lg:rounded-b lg:pl-4{{/if}}" \n\n aria-labelledby="flyout-{{getRandom}}-1" \n {{#if this.showAsFlyout}}\n x-effect="$el.setAttribute(\'aria-expanded\', dropped); $el.setAttribute(\'aria-hidden\', !dropped)"\n {{else}}\n {{#if ../this.selected}} \n x-effect="$el.setAttribute(\'aria-expanded\', $screen(\'lg\') || dropped); $el.setAttribute(\'aria-hidden\', !($screen(\'lg\') || dropped))"\n {{else}} \n x-effect="$el.setAttribute(\'aria-expanded\', dropped); $el.setAttribute(\'aria-hidden\', !dropped)"\n {{/if}} \n {{/if}} \n >\n {{#unless ../this.isCluster ~}}\n {{#unless ../_isSectionNav}}\n <div class="w-full">\n <div class="flex pt-4 pb-2 pl-4 text-base font-bold bg-white lg:pl-0 md:pt-4 lg:pt-1 lg:pb-0 justify-left text-blue-congress "> \n <a href="{{resourceUrl ../this.url}}" class="-isHeaderLink lg:leading-10 link-focus-inset js-load" data-hr-click-tracking=\'{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "{{../_navigationType}}::{{../_parent}}::{{../this.flyoutStartLinkText}}-Link geklickt"}]}\' >\n {{../this.flyoutStartLinkText}}\n </a> \n </div> \n </div>\n {{/unless}}\n {{/unless}}\n \n <div class="{{#if this.showAsFlyout}}lg:flex lg:flex-row -columnCount--{{this.columnCount}} lg:divide-x lg:divide-gray-200 {{else}} {{#if ../this.selected}} w-full lg:px-10 lg:container {{/if}}{{/if}}">\n {{#if this.showAsFlyout}}\n {{#each this.columns}}\n {{> components/site_header/navigation_flyout/navigation_flyout_column count=../this.columnCount navtype=../../_navigationType _parent=../../_parent _flyout=true~}}\n {{/each}}\n {{else}}\n {{#with this.items}}\n {{> components/site_header/navigation_flyout/navigation_flyout_column selected=../../this.selected navtype=../../_navigationType _parent=../../_parent _flyout=false ~}}\n {{/with}}\n {{/if}}\n </div>\n</div>\n{{/with}}'
|
|
37
|
+
module.exports['components/site_header/navigation_flyout/navigation_flyout_column.hbs'] = '<ul class="{{inline-switch count \'["1","2"]\' \'["md:w-1/1", "md:w-1/1 lg:w-1/2"]\'}} {{inline-switch navtype \'["ServiceNavigation","RubrikNavigation"]\' \'["border-b border-gray-200 md:border-0","border-0"]\'}} lg:even:pl-4 lg:odd:pr-4 {{#if selected}} lg:container lg:flex lg:h-9 {{/if}} ">\n {{~#each this ~}} \n {{~#if this.title~}}\n {{> components/site_header/navigation_flyout/navigation_flyout_item _parentselected=../selected _fromNav=../navtype _flyout=../_flyout _parent=../_parent ~}}\n {{~/if~}} \n {{~/each~}}\n \n</ul>'
|
|
38
|
+
module.exports['components/site_header/navigation_flyout/navigation_flyout_item.hbs'] = '<li :class="dropped ? \'h-auto\' : \'h-10\'" \n class="sb-navigation-flyout-item pl-4 {{#if _flyout}}lg:px-0 {{else}}lg:px-2 lg:first-of-type:pl-0 {{/if}}{{#if _parentselected}}lg:whitespace-nowrap{{/if}} flex h-auto text-base leading-6 border-b border-gray-200 lg:last:border-0 lg:border-0 text-blue-congress justify-start hover:underline">\n {{#decorator \'components/base/link\' _css=(inline-switch _fromNav \'["RubrikNavigation","ServiceNavigation"]\' \'["link-focus-inset py-2 w-full","link-focus py-2 md:pl-0 lg:pl-0 lg:pr-0 break-words w-full"]\') _doNavigationTracking="true" _clickLabelType=_fromNav _clickLabelPrefix1=_parent clickLabelPrefix2=this.link.content.text }}\n {{this.text}} \n {{~#if this.link.hasIcon}}{{> components/base/image/icon _icon=this.link.iconName _addClass="w-4 h-4 fill-current ml-2 inline-flex" _iconmap="icons" }} {{/if}}\n {{/decorator}} \n</li>'
|
|
36
39
|
module.exports['components/site_header/brand_navigation/brand_navigation.hbs'] = '<div x-data="slider()"\n x-init="checkIfScrollable($refs.container)"\n @resize.window="checkIfScrollable($refs.container)"\n class="sb-brand-navigation lg:container w-full md:px-5 lg:px-10 px-3.5 h-10 lg:h-8">\n\n <div class="flex justify-center text-xs list-none text-grey-scorpion ">\n\n <template x-if="isScrollable">\n <div>\n <button class="absolute left-0 w-12 h-full pt-1 arrow-left-background disabled:hidden" @click="prev($refs.container)" :disabled="!arrowLeftDisplay" aria-label="nach links scrollen">\n {{> components/base/image/icon _icon="arrow-left" _iconmap="icons" _addClass="pb-1 mr-4 inline-block w-3.5 h-3.5 text-blue-congress fill-current"}}\n </button>\n <button class="absolute right-0 w-12 h-full pt-1 group arrow-right-background disabled:hidden" @click="next($refs.container)" :disabled="!arrowRightDisplay" aria-label="nach rechts scrollen">\n {{> components/base/image/icon _icon="arrow-right" _iconmap="icons" _addClass="pb-1 ml-4 inline-block w-3.5 h-3.5 text-blue-congress fill-current "}}\n </button>\n </div>\n </template>\n\n <nav x-ref="container" @scroll="updateIndex($event.target)" class="w-full overflow-hidden overflow-x-scroll leading-10 transition-all duration-300 ease-in-out cursor-pointer hide-scroll-bar max-h-10 align-center">\n <span id="brandNavHeading" class="hidden">Navigation der Marken des Hessischen Rundfunks</span>\n {{#with this.brandNavigationItems}}\n <ul class="flex pl-0.5 pr-3 md:px-0 flex-nowrap lg:mr-0">\n {{#each this}}\n {{> components/site_header/brand_navigation/brand_navigation_item }}\n {{/each}} \n </ul>\n {{/with}}\n </nav>\n\n </div>\n \n</div>\n\n<script type="text/javascript">\n\nfunction slider() {\n\n return {\n \n isScrollable:false,\n arrowLeftDisplay:false,\n arrowRightDisplay:true,\n\n arrowsDisplay(e) {\n e.scrollLeft > 1 ? this.arrowLeftDisplay=true : this.arrowLeftDisplay=false;\n e.scrollLeft + e.offsetWidth == e.scrollWidth ? this.arrowRightDisplay=false : this.arrowRightDisplay=true;\n },\n\n prev(e) {\n e.scrollLeft -= 200;\n },\n\n next(e) {\n e.scrollLeft += 200;\n },\n\n updateIndex(e) {\n this.arrowsDisplay(e);\n },\n \n checkIfScrollable(e){\n e.scrollWidth > e.clientWidth ? this.isScrollable=true : this.isScrollable=false;\n this.arrowsDisplay(e);\n }\n };\n}\n\n</script>'
|
|
37
40
|
module.exports['components/site_header/brand_navigation/brand_navigation_item.hbs'] = '<li class="sb-brand-navigation-item{{#if this.selected}} h-10 lg:h-8 font-bold text-blue-congress {{/if}} cursor-pointer inline-block lg:hover:underline active:font-bold active:text-blue-science"> \n <a class="link-focus-inset leading-10 lg:leading-8 flex-col px-3 {{#if @first }}pl-0 {{/if}}lg:flex-row js-load w-max flex justify-center {{#if this.selected}} -currentBrand {{/if}}" aria-label="{{this.name}}" href="{{resourceUrl "index.html" _site=this.site}}"{{#if this.extern}} target="_blank" rel="noopener noreferrer"{{/if}} data-hr-click-tracking=\'{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Brandnavigation::{{this.text}}-Link geklickt"}]}\'>{{this.text}}</a>\n</li>'
|
|
38
41
|
module.exports['components/site_header/navigation_search/quick_search_button.hbs'] = '<div \n x-cloak class="sb-quick-search-button flex items-center h-8 md:h-full md:border-r md:border-l md:border-white lg:border-none" \n :class="$store.searchFieldOpen == true ? \'bg-white mt-2 rounded-t md:mt-0 md:rounded-none\' : \'bg-blue-congress\'"\n>\n <button \n @click="$store.searchFieldOpen = ! $store.searchFieldOpen; dropped = false; $store.serviceNavIsOpen = false; toggleScrolling(!$store.searchFieldOpen)"\n @click.debounce.100ms="$dispatch(\'burger-close\'); $dispatch(\'search-mobile-click\'); $dispatch(\'close-servicemenu\');"\n class="h-full text-white cursor-pointer md:px-4 lg:hidden"\n x-effect="$el.setAttribute(\'id\', \'flyout-\' + $store.searchID.current + \'-1\');$el.setAttribute(\'aria-owns\', \'flyout-\' + $store.searchID.current + \'-2\');$el.setAttribute(\'aria-controls\', \'flyout-\' + $store.searchID.current + \'-2\');$el.setAttribute(\'aria-expanded\', $store.searchFieldOpen == true);$el.setAttribute(\'aria-label\', $store.searchFieldOpen == true ? \'Suche schließen\' : \'Suche öffnen\')"\n >\n <svg \n x-show="$store.searchFieldOpen == false"\n class="h-5 text-white fill-current w-9" \n xmlns="http://www.w3.org/2000/svg" \n viewBox="0 0 20 20"\n role="presentation" \n x-effect="$el.setAttribute(\'aria-hidden\', $store.searchFieldOpen == true)"\n >\n <path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"></path>\n </svg>\n <svg \n x-show="$store.searchFieldOpen == true"\n class="h-6 fill-current w-9 text-blue-congress" \n xmlns="http://www.w3.org/2000/svg" \n viewBox="0 0 20 20"\n x-effect="$el.setAttribute(\'aria-hidden\', $store.searchFieldOpen == false)"\n >\n <path d="M15.898,4.045c-0.271-0.272-0.713-0.272-0.986,0l-4.71,4.711L5.493,4.045c-0.272-0.272-0.714-0.272-0.986,0s-0.272,0.714,0,0.986l4.709,4.711l-4.71,4.711c-0.272,0.271-0.272,0.713,0,0.986c0.136,0.136,0.314,0.203,0.492,0.203c0.179,0,0.357-0.067,0.493-0.203l4.711-4.711l4.71,4.711c0.137,0.136,0.314,0.203,0.494,0.203c0.178,0,0.355-0.067,0.492-0.203c0.273-0.273,0.273-0.715,0-0.986l-4.711-4.711l4.711-4.711C16.172,4.759,16.172,4.317,15.898,4.045z"></path>\n </svg>\n </button>\n</div>'
|
|
39
42
|
module.exports['components/site_header/navigation_search/quick_search_form.hbs'] = '<form \n x-data="searchSuggest()"\n role="search" \n action="{{resourceUrl "suche/index.nocache"}}" \n method="get" \n class="flex w-full sb-quick-search-form md:justify-end lg:h-10"\n>\n <div \n class="relative w-full lg:rounded-l" \n id="search-content"\n @click.away="active=false; cursorIndex=-1"\n @keydown.arrow-down="moveDownList()"\n @keydown.arrow-up="moveUpList()"\n > \n <label for="searchInput--{{nextRandom}}" class="hidden">suchfeld</label>\n <input \n @input.debounce="getSuggestionsForInput();cursorIndex=-1"\n @click="active=true" \n name="query" \n x-model="query"\n placeholder=\'{{loca "search_input_placeholder" }}\' \n class="w-full px-2 py-2 text-base leading-4 placeholder-opacity-100 border rounded-l rounded-r-none shadow-inner appearance-none lg:border-0 lg:border-none border-blue-congress lg:h-10 placeholder-text-xs placeholder-blue-congress text-blue-congress focus:outline-none"\n type="text"\n id="searchInput--{{getRandom}}"\n autocomplete="off"\n role="combobox" \n aria-haspopup="listbox" \n aria-autocomplete="list" \n x-effect="$el.setAttribute(\'aria-expanded\', (query.length > 1 && active && suggestions.length > 0))"\n aria-owns="suggestionlist--{{getRandom}}"\n aria-controls="suggestionlist--{{getRandom}}"\n > \n <div \n class="relative" \n x-show="query.length > 1 && active && suggestions.length"\n x-cloak\n x-transition:leave="transition ease-in duration-100"\n x-transition:leave-start="opacity-100"\n x-transition:leave-end="opacity-0"\n >\n <ul \n role="listbox" \n id="suggestionlist--{{getRandom}}" \n aria-label="Suche öffnen"\n x-effect="$el.setAttribute(\'aria-expanded\', query.length > 1 && active && suggestions.length > 0);$el.setAttribute(\'aria-hidden\', !(query.length > 1 && active && suggestions.length > 0))"\n class="absolute w-full mt-0.5 bg-white border rounded divide-y shadow-xl top-100"\n x-ref="list"\n >\n \n <template x-for="(suggestion, index) in suggestions" :key="index">\n <li class="first-of-type:border-none">\n <a \n x-bind:active="false"\n x-bind:href="\'{{resourceUrl "suche/index.nocache"}}?query=\' + suggestion"\n x-bind:class="{\'py-1.5 px-2 link-focus-inset text-base flex w-full rounded hover:bg-blue-congress hover:text-white\': true, \'bg-blue-congress text-white\':index==cursorIndex }"\n >\n <span x-text="suggestion"></span>\n </a>\n </li>\n </template>\n \n </ul>\n </div> \n </div>\n <button \n aria-label=\'{{loca "search_input_aria_submit" }}\' \n type="submit" \n class="pl-3 pr-2 rounded-r cursor-pointer link-focus-inset bg-blue-congress lg:bg-white text-blue-congress z-10002"\n >\n <svg class="w-6 h-6 text-white fill-current bg-blue-congress lg:fill-current lg:text-blue-congress lg:bg-white" \n xmlns="http://www.w3.org/2000/svg" \n viewBox="0 0 20 20"\n aria-hidden="true"\n >\n <path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"></path>\n </svg>\n </button>\n</form>\n\n<script type="text/javascript">\n\n function searchSuggest() {\n\n return {\n active:true,\n cursorIndex: -1,\n query: "",\n suggestions: [],\n\n getSuggestionsForInput() {\n\n suggestionDataUrl = \'{{resourceUrl "suche/index~suggest.jsp"}}\' + \'?suggestions=\' + this.query;\n\n fetch(suggestionDataUrl)\n\n .then((res) =>{ return res.text()})\n\n .then((data) => {\n data = JSON.parse(data.replace(/"/g, \'"\'))\n data.solrSuggestions = this.filterStartwith(data.solrSuggestions, this.query)\n this.suggestions= this.filterSortbylength(data.solrSuggestions)\n });\n\n },\n\n filterStartwith(data, query) {\n return data.filter(Suggestion => Suggestion.toLowerCase().startsWith(query.toLowerCase().trim()))\n },\n\n filterSortbylength(data) {\n return data.sort((a, b) => a.length - b.length)\n },\n\n moveDownList() {\n if (this.suggestions.length > 0 && this.cursorIndex < this.suggestions.length - 1) \n {\n this.cursorIndex++;\n this.query = this.suggestions[this.cursorIndex];\n }\n },\n\n moveUpList() {\n if (this.suggestions.length > 0 && this.cursorIndex > 0) \n {\n this.cursorIndex--;\n this.query = this.suggestions[this.cursorIndex];\n }\n },\n\n };\n\n }\n\n</script>'
|
|
40
43
|
module.exports['components/site_header/section_navigation/section_navigation.hbs'] = '<div \n id="sectionNav"\n class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:px-10 lg:container bg-blue-congress" \n x-effect="$el.setAttribute(\'aria-expanded\', $store.burgeropen || $screen(\'lg\')); $el.setAttribute(\'aria-hidden\', ! ($store.burgeropen || $screen(\'lg\')))"\n>\n <div class="flex content-start mb-0">\n <div class="flex w-full">\n <span id="sectionNavHeadline" class="hidden">Bereichsnavigation</span>\n {{#with this.sectionNavigationSSILinks}}\n <ul class="flex flex-col items-center w-full text-left text-white list-none lg:flex-row lg:h-auto lg:mt-1">\n {{#each this}} \n {{#if (isStorybook)}} \n {{> components/site_header/section_navigation/section_navigation_item }} \n {{else}}\n {{{this}}}\n {{/if}}\n {{/each}} \n </ul>\n {{/with}}\n </div>\n </div>\n</div> '
|
|
41
44
|
module.exports['components/site_header/section_navigation/section_navigation_item.hbs'] = '{{#each this.navigationItems}}\n <li x-data="dropdown"\n @click.outside="dropped = false" \n @close-servicemenu.window="dropped = false" \n :class="dropped ? \'border-b-0 lg:bg-white lg:text-blue-congress h-auto\' : \'h-10 lg:hover:underline\'" \n class="flex flex-wrap justify-start w-full text-white list-none border-b border-white sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:first:pl-0 first:border-t lg:first:border-t-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-blue-congress lg:rounded-t"> \n {{#if this.isCluster ~}}\n{{!-- Gilt z.B. für REGIONEN: --}} \n <button id="button-{{nextRandom}}-1" \n @click.debounce.100ms="toggle()" \n :class="dropped ? \'first:font-bold lg:first:font-normal lg:underline\' : \'first:font-normal\'"\n class="{{#if this.selected}}-currentSection lg:justify-center {{/if}}link-focus-inset-white js-load pl-4 lg:pl-4 lg:pr-4 flex flex-auto w-full justify-between lg:flex-initial h-10 lg:w-full items-center leading-4 {{#if this.selected}} font-bold{{/if}}" \n x-effect="$el.setAttribute(\'aria-expanded\', dropped);$el.setAttribute(\'tabindex\', $store.burgeropen || $screen(\'lg\') ? \'0\' : \'-1\')"\n aria-owns="flyout-{{getRandom}}" \n aria-controls="flyout-{{getRandom}}" \n data-hr-click-tracking=\'{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Rubriknavigation::{{this.text}}-Toggle-Link geklickt"}]}\'>\n\n {{~else ~}}\n\n {{#if this.subNavigation}}\n{{!-- Gilt z.B. für POLITIK: --}}\n <a href="{{resourceUrl this.url}}" \n id="flyout-{{nextRandom}}-1"\n \n :class="dropped ? \'font-bold\' : \'\'"\n class="{{#if this.selected}}-currentSection lg:justify-center {{/if}}link-focus-inset-white js-load pl-4 pr-8 lg:pl-4 lg:pr-4 flex flex-auto h-10 items-center leading-4 lg:w-full lg:justify-center{{#if this.selected}} font-bold{{/if}}"\n {{#if this.labelText}} aria-label="{{this.labelText}}"{{/if}} \n aria-haspopup="true" \n x-effect="$el.setAttribute(\'aria-expanded\', dropped || $screen(\'lg\'));$el.setAttribute(\'tabindex\', $store.burgeropen || $screen(\'lg\') ? \'0\' : \'-1\')"\n aria-owns="flyout-{{getRandom}}"\n aria-controls="flyout-{{getRandom}}"\n data-hr-click-tracking=\'{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Rubriknavigation::{{this.text}}-Link geklickt"}]}\'> \n {{~else ~}} \n{{!-- Gilt für START/GESELLSCHAFT/WIRTSCHAFT usw: --}}\n <a href="{{resourceUrl this.url}}" \n class="{{#if this.selected}}-currentSection lg:justify-center {{/if}} link-focus-inset-white js-load flex justify-start pl-4 pr-4 h-10 lg:justify-center items-center w-full{{#if this.selected}} font-bold{{/if}}" \n {{#if this.labelText}} aria-label="{{this.labelText}}"{{/if}} \n data-hr-click-tracking=\'{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Rubriknavigation::{{this.text}}-Link geklickt"}]}\'\n x-effect="$el.setAttribute(\'tabindex\', $store.burgeropen || $screen(\'lg\') ? \'0\' : \'-1\')"\n >\n {{~/if}}\n\n {{~/if }}\n\n {{#if this.subNavigation}}\n\n {{~this.text~}}\n \n {{#if this.subNavigation.showAsFlyout ~}}\n \n <div class="flex items-center justify-center w-10 h-10 leading-4 lg:w-auto lg:border-0 lg:pl-1">\n <div class="flex items-center justify-center" :class="dropped ? \'transform rotate-180\':\'\'">\n {{> components/base/image/icon _icon="arrow-down" _iconmap="icons" _addClass="w-3 h-2 fill-current"}}\n </div>\n </div>\n \n {{/if}}\n\n {{else}}\n\n {{~this.text~}}\n\n {{~/if}}\n\n {{#if this.isCluster}}\n\n </button>\n\n {{else}}\n\n </a>\n\n {{#if this.subNavigation}}\n\n <button \n @click.debounce.100ms="toggle()" \n id="button-{{getRandom}}-1" \n class="flex items-center justify-center w-10 h-10 leading-4 border-l border-white js-load lg:hidden" \n aria-haspopup="true" \n x-effect="$el.setAttribute(\'aria-expanded\', dropped);$el.setAttribute(\'tabindex\', $store.burgeropen ? \'0\' : \'-1\')"\n aria-owns="flyout-{{getRandom}}" \n aria-controls="flyout-{{getRandom}}" \n aria-labelledby="flyout-{{getRandom}}-1" \n data-hr-click-tracking=\'{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Rubriknavigation::{{this.text}}-Toggle-Link geklickt"}]}\'>\n\n <span class="hidden">{{~this.text~}}</span>\n \n <div class="flex items-center justify-center lg:ml-2 lg:relative lg:right-0" :class="dropped ? \'transform rotate-180 \':\'\'">\n {{> components/base/image/icon _icon="arrow-down" _iconmap="icons" _addClass="w-4 h-2 fill-current"}}\n </div>\n </button>\n\n {{/if}}\n\n {{/if}}\n \n {{> components/site_header/navigation_flyout/navigation_flyout _isSectionNav=true _navigationType="RubrikNavigation" _parent=this.text }}\n\n </li>\n{{/each}}'
|
|
42
|
-
module.exports['components/site_header/navigation_flyout/navigation_flyout.hbs'] = '{{#with this.subNavigation}}\n <div {{#unless ../this.selected}}x-cloak{{/unless}}\n x-data="flyoutHandler" \n x-ref="{{getRandom}}"\n id="flyout-{{getRandom}}" \n @resize.window.debounce="setFlyoutAnimationStyle();"\n {{#if this.showAsFlyout}} x-show="dropped" {{else}} {{#if ../this.selected}} x-show="$screen(\'lg\') ? true : dropped" {{else}} x-show="dropped" {{/if}} {{/if}}\n {{#if ../_isSectionNav}} x-init="sectionNavFlyoutWatcher()" :class ="shouldFlyoutBeHidden() ? \'hidden\' : \'\'" {{/if}} \n \n class="sb-navigation-flyout bg-white md:filter md:drop-shadow-md lg:absolute \n {{#if ../_isSectionNav}} relative md:top-auto md:left-auto lg:mt-10 w-full transition-all duration-500 ease-in-out\n {{#unless this.showAsFlyout}}\n {{#if ../this.selected}}\n isSelectedAndOpen lg:ml-0 z-10000 lg:border-b lg:border-blue-congress lg:filter-none lg:left-0 flex justify-center\n {{else}} z-10002 lg:left-auto lg:w-auto {{/if}}\n {{else}} z-10002 lg:left-auto lg:w-auto {{/unless}}\n {{else}} z-10002 lg:rounded-b absolute w-full top-10 left-0 md:w-80 lg:w-92 md:top-12 lg:px-4 md:mt-0 md:left-0 lg:top-15 lg:left-0 lg:pl-6 divide-y divide-gray-200 tablet:w-half-screen tablet:ml-half-screen tablet:right-0 tablet:left-auto {{/if}}\n {{#if this.showAsFlyout}} lg:rounded-b lg:pl-4{{/if}}" \n\n aria-labelledby="flyout-{{getRandom}}-1" \n {{#if this.showAsFlyout}}\n x-effect="$el.setAttribute(\'aria-expanded\', dropped); $el.setAttribute(\'aria-hidden\', !dropped)"\n {{else}}\n {{#if ../this.selected}} \n x-effect="$el.setAttribute(\'aria-expanded\', $screen(\'lg\') || dropped); $el.setAttribute(\'aria-hidden\', !($screen(\'lg\') || dropped))"\n {{else}} \n x-effect="$el.setAttribute(\'aria-expanded\', dropped); $el.setAttribute(\'aria-hidden\', !dropped)"\n {{/if}} \n {{/if}} \n >\n {{#unless ../this.isCluster ~}}\n {{#unless ../_isSectionNav}}\n <div class="w-full">\n <div class="flex pt-4 pb-2 pl-4 text-base font-bold bg-white lg:pl-0 md:pt-4 lg:pt-1 lg:pb-0 justify-left text-blue-congress "> \n <a href="{{resourceUrl ../this.url}}" class="-isHeaderLink lg:leading-10 link-focus-inset js-load" data-hr-click-tracking=\'{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "{{../_navigationType}}::{{../_parent}}::{{../this.flyoutStartLinkText}}-Link geklickt"}]}\' >\n {{../this.flyoutStartLinkText}}\n </a> \n </div> \n </div>\n {{/unless}}\n {{/unless}}\n \n <div class="{{#if this.showAsFlyout}}lg:flex lg:flex-row -columnCount--{{this.columnCount}} lg:divide-x lg:divide-gray-200 {{else}} {{#if ../this.selected}} w-full lg:px-10 lg:container {{/if}}{{/if}}">\n {{#if this.showAsFlyout}}\n {{#each this.columns}}\n {{> components/site_header/navigation_flyout/navigation_flyout_column count=../this.columnCount navtype=../../_navigationType _parent=../../_parent _flyout=true~}}\n {{/each}}\n {{else}}\n {{#with this.items}}\n {{> components/site_header/navigation_flyout/navigation_flyout_column selected=../../this.selected navtype=../../_navigationType _parent=../../_parent _flyout=false ~}}\n {{/with}}\n {{/if}}\n </div>\n</div>\n{{/with}}'
|
|
43
|
-
module.exports['components/site_header/navigation_flyout/navigation_flyout_column.hbs'] = '<ul class="{{inline-switch count \'["1","2"]\' \'["md:w-1/1", "md:w-1/1 lg:w-1/2"]\'}} {{inline-switch navtype \'["ServiceNavigation","RubrikNavigation"]\' \'["border-b border-gray-200 md:border-0","border-0"]\'}} lg:even:pl-4 lg:odd:pr-4 {{#if selected}} lg:container lg:flex lg:h-9 {{/if}} ">\n {{~#each this ~}} \n {{~#if this.title~}}\n {{> components/site_header/navigation_flyout/navigation_flyout_item _parentselected=../selected _fromNav=../navtype _flyout=../_flyout _parent=../_parent ~}}\n {{~/if~}} \n {{~/each~}}\n \n</ul>'
|
|
44
|
-
module.exports['components/site_header/navigation_flyout/navigation_flyout_item.hbs'] = '<li :class="dropped ? \'h-auto\' : \'h-10\'" \n class="sb-navigation-flyout-item pl-4 {{#if _flyout}}lg:px-0 {{else}}lg:px-2 lg:first-of-type:pl-0 {{/if}}{{#if _parentselected}}lg:whitespace-nowrap{{/if}} flex h-auto text-base leading-6 border-b border-gray-200 lg:last:border-0 lg:border-0 text-blue-congress justify-start hover:underline">\n {{#decorator \'components/base/link\' _css=(inline-switch _fromNav \'["RubrikNavigation","ServiceNavigation"]\' \'["link-focus-inset py-2 w-full","link-focus py-2 md:pl-0 lg:pl-0 lg:pr-0 break-words w-full"]\') _doNavigationTracking="true" _clickLabelType=_fromNav _clickLabelPrefix1=_parent clickLabelPrefix2=this.link.content.text }}\n {{this.text}} \n {{~#if this.link.hasIcon}}{{> components/base/image/icon _icon=this.link.iconName _addClass="w-4 h-4 fill-current ml-2 inline-flex" _iconmap="icons" }} {{/if}}\n {{/decorator}} \n</li>'
|
|
45
45
|
module.exports['components/site_header/service_navigation/service_list.hbs'] = '<div \n id="serviceList"\n @click.outside="$store.serviceNavIsOpen = false; toggleScrolling(!$store.searchFieldOpen && !$store.burgeropen)"\n x-ref="serviceList"\n :class="shouldServiceIconsBeHidden() ? \'-mt-40\' : \'\'"\n class="absolute left-0 flex justify-center flex-initial w-full h-10 max-w-full align-top duration-500 ease-in-out border-t border-white sb-service-list transition-margin-top -z-1000 md:z-10000 md:h-12 top-10 bg-blue-congress md:border-0 md:top-auto md:w-auto md:left-auto md:static md:justify-end md:flex md:flex-auto lg:h-16 lg:pl-0 lg:pr-4 lg:w-3/4 "\n>\n {{#with this.serviceNavigationSSILinks}}\n <ul class="flex justify-around w-full h-full -itemCount-{{ count }} lg:w-auto lg:justify-end lg:pt-1">\n {{#each this}} \n {{> components/base/loadSSI _templatePath=\'components/site_header/service_navigation/service_navigation_item\' }} \n {{/each}} \n </ul>\n {{/with}}\n</div>'
|
|
46
46
|
module.exports['components/site_header/service_navigation/service_navigation_item.hbs'] = '{{#each this.navigationItems}}\n <li class="sb-service-navigation-item {{inline-switch this.id \'["weather","warnung","traffic","video-podcast"]\' \'["-weather", "-warnung", "-traffic", "-video-podcast"]\' }} flex flex-col h-10 lg:h-15 md:h-full w-full tablet:first:border-l border-r last:border-r-0 lg:border-r-0 text-white" >\n {{#if this.subNavigation}} \n <button \n id="{{nextRandom}}" \n @click.debounce.100ms="toggleServiceNav()" \n @click.outside="dropped = false;"\n @close-servicemenu.window="dropped = false; $store.serviceNavIsOpen = false"\n\n x-data="dropdown"\n id="{{getRandom}}"\n \n class="js-load flex flex-col items-center justify-center h-full px-4 text-left lg:justify-start lg:px-3 lg:pt-1 lg:hover:underline lg:relative lg:rounded-t lg:border-0 lg:left-0 link-focus-inset-white {{#if this.selected}}-currentService{{/if}}"\n\n :class="dropped ? \'bg-white fill-current text-blue-congress lg:border-0 lg:underline\' : \'\'" \n\n aria-owns="flyout-{{getRandom}}" \n aria-controls="flyout-{{getRandom}}"\n x-effect="$el.setAttribute(\'aria-expanded\', dropped);$el.setAttribute(\'aria-label\', dropped ? \'{{this.text}}-Menü schließen\' : \'{{this.text}}-Menü öffnen\')"\n data-hr-click-tracking=\'{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Servicenavigation::{{this.text}}-Link geklickt"}]}\'\n >\n \n {{else}}\n\n {{#if this.extern}}\n <a href="{{this.url}}" target="_blank" x-init="dropped = false" class="flex flex-col items-center justify-center h-full px-4 lg:justify-start lg:px-3 lg:rounded-t link-focus-inset-white js-load" id="flyout-{{nextRandom}}-1" data-hr-click-tracking=\'{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Servicenavigation::{{this.text}}-Link geklickt"}]}\'>\n {{else}}\n <a href="{{resourceUrl this.url}}" x-init="dropped = false" class="flex flex-col items-center justify-center h-full px-4 lg:justify-start lg:px-3 lg:pt-1 lg:rounded-t link-focus-inset-white js-load" id="flyout-{{nextRandom}}-1" data-hr-click-tracking=\'{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Servicenavigation::{{this.text}}-Link geklickt"}]}\'>\n {{/if}}\n\n {{/if}}\n\n <div class="w-7 md:w-8 h-7 md:h-8" >\n {{> components/base/image/icon _icon=this.icon _iconmap="icons" _addClass="w-full h-full"}}\n <span class="sr-only lg:hidden">{{this.text}}</span>\n </div>\n\n <div :class="dropped ? \'text-blue-congress fill-current\' : \'text-white fill-white\'" class="relative flex-row items-center justify-center hidden pt-px text-white lg:flex z-10002">\n <div class="flex" >\n <span class="flex text-xs leading-4 whitespace-nowrap">\n {{text}} \n </span>\n {{#if this.subNavigation}} \n <div class="flex lg:pl-1">\n <div class="flex items-center justify-center" :class="dropped ? \'transform rotate-180\':\'\' ">\n {{> components/base/image/icon _icon="arrow-down" _iconmap="icons" _addClass="w-3 h-2 fill-current"}}\n </div>\n </div>\n {{/if}} \n </div>\n </div> \n {{#if this.subNavigation}} \n {{> components/site_header/navigation_flyout/navigation_flyout _isSectionNav=false _navigationType="ServiceNavigation" _parent=this.text }}\n </button>\n {{else}} \n </a>\n {{/if}} \n </li>\n{{/each}}'
|
|
47
47
|
module.exports['components/teaser/cluster/teaser_cluster.hbs'] = '<article class="mx-5 md:mx-0 col-span-12 grid bg-[#dce8f0] rounded-tl-3xl rounded-br-3xl {{~inline-switch this.teaserSize \'["25","33","50"]\' \'[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]\'}} ">\n <div class="">\n <h2 class="flex items-center px-5 py-6 font-bold font-headingSerif text-blue-congress">\n {{#if this.teaserLogo}}\n <span>\n {{> components/base/image/icon _icon=this.teaserLogo _iconmap="logo" _addClass=(inline-switch this.teaserLogo \'["hessenschau_de"]\' \'["fill-[#005293] w-10 md:w-12 h-10 md:h-12","fill-[#005293] w-40 lg:w-52 h-8 md:h-12"]\')}}\n </span>\n {{/if}}\n {{#if this.title}}\n <span class="text-lg md:text-2xl border-blue-congress {{#if this.teaserLogo}} pl-3 ml-3 border-l-2 border-solid {{/if}}">{{this.title}}</span>\n {{/if}}\n </h2>\n {{> components/teaser/cluster/teaser_cluster_list _ordered=this.isOrdered}} \n </div>\n {{~#with this.headlineListOverview}}\n {{~#if this.link~}}\n <div class="flex mx-5 py-11 {{~inline-switch ../this.teaserSize \'["100"]\' \'[" justify-center md:justify-end"," justify-center"]\'}}">\n {{~> components/button/button_pseudo _color="blue" _linkTitle=this.title~}}\n </div>\n {{~/if~}}\n {{/with~}}\n</article>\n\n'
|
|
@@ -67,9 +67,9 @@ module.exports['components/teaser/tabbox/group_tabbox.hbs'] = '<section \n x-
|
|
|
67
67
|
module.exports['components/teaser/tabbox/teaser_tabbox.hbs'] = '</div>\n<div \n x-data="{ tab: \'{{this.tabbedGroup.[0].title}}\' }"\n class="grid grid-cols-12 pt-6 md:pt-7 bg-[#dce8f0] mx-0 md:rounded-tl-3xl md:rounded-br-3xl col-main gap-x-6 gap-y-6"\n>\n <section class="col-span-full" data-hr-group-tabbed=\'{"wandaPageId":"{{this.wandaPageId}}"}\'>\n <div class="flex flex-wrap justify-center mb-7 mx-1.5" role="tablist">\n {{~#each this.tabbedGroup~}}\n <button onclick="window.location.href=\'#tgp{{@index}}\';"\n :class="tab === \'{{this.title}}\' ? \'text-white bg-blue-congress border-blue-congress\' : \'bg-white text-blue-congress border-white hover:border-blue-congress\'" \n x-effect="$el.removeAttribute(\'onclick\')"\n x-on:click.prevent="tab = \'{{this.title}}\'" \n class="border text-base font-heading py-px px-2 m-1.5" \n type="button" \n role="tab"\n >\n {{this.title}}\n </button>\n {{~/each~}}\n </div>\n {{~> components/teaser/teaser_logic/teaser_logic ~}}\n </section>\n</div>\n<div class="grid grid-cols-12 py-6 bg-white sm:px-8 col-full sm:col-main gap-x-6 gap-y-6"> '
|
|
68
68
|
module.exports['components/teaser/podcast/podcast.hbs'] = '<div class="grid grid-cols-12 pt-5 md:pt-5 bg-[#dce8f0] mx-0 rounded-tl-3xl rounded-br-3xl col-main gap-x-6 gap-y-6" > \n {{> components/teaser/podcast/podcast_player _linkTitle="true" _isSinglePage=true _type="podcastEpisodePlayerTeaser" }}\n </div>'
|
|
69
69
|
module.exports['components/teaser/podcast/podcast_playbutton.hbs'] = '<button x-cloak x-on:keydown.tab="{{_clickFunction}}" x-on:click="{{_clickFunction}}" type="button" class="flex justify-start cursor-pointer group focus:outline-none {{_css}}"> \n <div class="">\n <div x-show="!currentlyPlaying" class="text-white rounded-full bg-blue-science ring-white ring">\n {{> components/base/image/icon _icon="play" _iconmap="icons" _addClass="inline pl-1 py-2 w-12 h-12 fill-current"}}\n </div>\n <div x-show="currentlyPlaying" class="bg-white rounded-full ring-blue-science ring text-blue-science">\n {{> components/base/image/icon _icon="pause" _iconmap="icons" _addClass="inline py-2 w-12 h-12 fill-current"}}\n </div>\n </div>\n</button>'
|
|
70
|
-
module.exports['components/teaser/podcast/podcast_player.hbs'] = '<div class="flex col-span-12">\n <div class="flex flex-col">\n {{!-- First Row --}}\n <div class="flex flex-row px-5 md:pl-5 {{#if ../_ordered}} pl-8 {{/if}} ">\n <div class="flex flex-col"> \n <div class="flex max-h-6">\n {{!-- Label / Airdate --}}\n {{#with label}} \n <div class="">\n <span class=\'sb-label mr-2 rounded px-1.5 pt-px inline-block tracking-wide text-white text-base leading-5.5 font-heading bg-labelMedia\'>\n {{ loca this.loca }}\n </span>\n </div> \n {{/with}}\n \n {{~#with airdateDate}}\n <div class="flex grow pt-1.5 text-xs font-headingSerif text-blue-science">\n <time datetime="{{this.htmlDateTime}}">{{this.date}}</time>\n </div>\n {{/with}}\n\n {{!-- Download Icon --}}\n <div class="flex pr-2 md:pr-5">\n <a href="{{this.podcastDownloadUrl}}" class="h-6 button js-load" {{#with this.trackingData}} data-hr-click-tracking=\'{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{../_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}\'{{/with}}>\n {{> components/base/image/icon _icon=\'download-neu\' _addClass="h-6 w-6 text-blue-science fill-current" }}\n </a>\n </div>\n </div>\n\n {{!-- Überschrift: --}}\n <div class="flex pb-5 pr-2"> \n {{> components/teaser/podcast/podcast_title _title=this.title _teaserSize=this.teaserSize _addClass="" }} \n </div>\n\n </div>\n\n {{!-- Podcast Image --}}\n <div class="flex flex-col ">\n <div class="w-24 md:w-42">\n {{> components/base/image/responsive_image this.teaseritem \n _type=this.teaserType\n _variant="default"\n _addClass=" overflow-hidden ar--100"\n _noDelay=this.dontLazyload \n _addClassImg="w-full h-24 md:h-42 block"\n }}\n </div>\n </div>\n\n </div>\n\n {{!-- Player UI --}}\n <div class="flex px-5 md:pl-5 md:pr-52 md:-mt-14">\n {{> components/teaser/podcast/podcast_player_ui }} \n </div>\n \n {{!-- Abo-Dropdown --}}\n {{!-- // TODO: Dropdown-Items need to be flexible via CMS so we need Array in Json and iterate over it --}}\n <div class="flex flex-row p-5 md:pr-0">\n {{#with this.podcastChannel}} \n <div class="flex">\n {{!-- Container --}}\n <div x-cloak x-data="{\n open: false,\n toggle() {\n if (this.open) {\n return this.close()\n }\n this.$refs.button.focus()\n this.open = true\n },\n close(focusAfter) {\n if (! this.open) return\n this.open = false\n focusAfter && focusAfter.focus()\n }}"\n x-on:keydown.escape.prevent.stop="close($refs.button)"\n x-on:focusin.window="! $refs.panel.contains($event.target) && close()"\n x-id="[\'dropdown-button\']"\n class="relative"\n >\n\n {{!-- Button --}}\n <button\n x-ref="button"\n x-on:click="toggle()"\n :aria-expanded="open"\n :aria-controls="$id(\'dropdown-button\')"\n type="button"\n class="flex items-center gap-2 px-
|
|
71
|
-
module.exports['components/teaser/podcast/podcast_player_ui.hbs'] = '<div class="w-full"> \n <div class="flex
|
|
72
|
-
module.exports['components/teaser/podcast/podcast_timedisplay.hbs'] = '<div x-cloak class="{{_containerCss}}">\n <span class="{{_currentTimeClasses}}" x-text="currentTime">0:00</span>\n <span class="{{_durationClasses}}"> / </span>\n <span class="{{_durationClasses}}" x-text="audioDurationFancy"> </span>\n</div>'
|
|
70
|
+
module.exports['components/teaser/podcast/podcast_player.hbs'] = '<div class="flex col-span-12">\n <div class="flex flex-col">\n {{!-- First Row --}}\n <div class="flex flex-row px-5 md:pl-5 {{#if ../_ordered}} pl-8 {{/if}} ">\n <div class="flex flex-col"> \n <div class="flex max-h-6">\n {{!-- Label / Airdate --}}\n {{#with label}} \n <div class="">\n <span class=\'sb-label mr-2 rounded px-1.5 pt-px inline-block tracking-wide text-white text-base leading-5.5 font-heading bg-labelMedia\'>\n {{ loca this.loca }}\n </span>\n </div> \n {{/with}}\n \n {{~#with airdateDate}}\n <div class="flex grow pt-1.5 text-xs font-headingSerif text-blue-science">\n <time datetime="{{this.htmlDateTime}}">{{this.date}}</time>\n </div>\n {{/with}}\n\n {{!-- Download Icon --}}\n <div class="flex pr-2 md:pr-5">\n <a href="{{this.podcastDownloadUrl}}" class="h-6 button js-load" {{#with this.trackingData}} data-hr-click-tracking=\'{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{../_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}\'{{/with}}>\n {{> components/base/image/icon _icon=\'download-neu\' _addClass="h-6 w-6 text-blue-science fill-current" }}\n </a>\n </div>\n </div>\n\n {{!-- Überschrift: --}}\n <div class="flex pb-5 pr-2 md:pr-5"> \n {{> components/teaser/podcast/podcast_title _title=this.title _teaserSize=this.teaserSize _addClass="" }} \n </div>\n\n </div>\n\n {{!-- Podcast Image --}}\n <div class="flex flex-col ">\n <div class="w-24 md:w-42">\n {{> components/base/image/responsive_image this.teaseritem \n _type=this.teaserType\n _variant="default"\n _addClass=" overflow-hidden ar--100"\n _noDelay=this.dontLazyload \n _addClassImg="w-full h-24 md:h-42 block"\n }}\n </div>\n </div>\n\n </div>\n\n {{!-- Player UI --}}\n <div class="flex px-5 md:pl-5 md:pr-52 md:-mt-14">\n {{> components/teaser/podcast/podcast_player_ui }} \n </div>\n \n {{!-- Abo-Dropdown --}}\n {{!-- // TODO: Dropdown-Items need to be flexible via CMS so we need Array in Json and iterate over it --}}\n <div class="flex flex-row p-5 md:pr-0">\n {{#with this.podcastChannel}} \n <div class="flex">\n {{!-- Container --}}\n <div x-cloak x-data="{\n open: false,\n toggle() {\n if (this.open) {\n return this.close()\n }\n this.$refs.button.focus()\n this.open = true\n },\n close(focusAfter) {\n if (! this.open) return\n this.open = false\n focusAfter && focusAfter.focus()\n }}"\n x-on:keydown.escape.prevent.stop="close($refs.button)"\n x-on:focusin.window="! $refs.panel.contains($event.target) && close()"\n x-id="[\'dropdown-button\']"\n class="relative"\n >\n\n {{!-- Button --}}\n <button\n x-ref="button"\n x-on:click="toggle()"\n :aria-expanded="open"\n :aria-controls="$id(\'dropdown-button\')"\n type="button"\n class="flex items-center gap-2 px-2 py-2 text-white shadow bg-orange-layout">Abonnieren\n <svg xmlns="http://www.w3.org/2000/svg" class="flex self-end w-5 h-5 text-white" viewBox="0 0 20 20" fill="currentColor">\n <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />\n </svg>\n </button>\n\n {{!-- Flyout --}}\n <div\n x-ref="panel"\n x-show="open"\n x-transition.origin.top.left\n x-on:click.outside="close($refs.button)"\n :id="$id(\'dropdown-button\')"\n style="display: none;"\n class="absolute left-0 flex flex-col w-full px-2 text-sm text-white border-t border-white shadow-md grow bg-orange-layout"\n >\n {{!--// TODO: these Items should come via iteration over items-array --}}\n {{#with this.podcastItunesUrl}}\n <a class="flex items-center w-full gap-2 py-1.5 text-left border-b hover:underline disabled:text-gray-500"\n title="Bei iTunes abonnieren" target="_blank"\n rel="noopener noreferrer"\n href="{{this}}"> \n ITunes-Podcast \n </a> \n {{/with}}\n <a href="#" class="flex items-center w-full gap-2 py-1.5 text-left border-b hover:underline disabled:text-gray-500">\n Apple Podcast\n </a>\n <a href="#" class="flex items-center w-full gap-2 py-1.5 text-left border-b hover:underline disabled:text-gray-500">\n ARD Audiothek\n </a>\n <a href="#" class="flex items-center w-full gap-2 py-1.5 text-left border-b hover:underline disabled:text-gray-500">\n Spotify\n </a>\n <a title="RSS Feed abonnieren" target="_blank" rel="noopener noreferrer" href="{{this.podcastRssUrl}}" class="flex items-center w-full gap-2 py-1.5 text-left hover:underline disabled:text-gray-500">\n RSS Feed\n </a>\n </div>\n </div>\n </div>\n {{/with}}\n\n {{!-- Sendungs-Link --}}\n <div class="flex justify-end w-full pl-4 md:pr-52">\n <div class="flex flex-wrap self-end text-xs text-blue-science">\n <span class="flex pr-2 font-bold whitespace-nowrap">Zur Sendung: </span>\n <a class="underline" href="#">{{#with this.teaserInfo}} {{~#if this.showTeaserInfoChannel}} <span class="text__byline">{{../this.podcastChannel.title}}</span>{{/if}} {{/with}}</a>\n </div>\n </div>\n </div>\n </div> \n</div>\n\n{{#unless _isSinglePage}}\n {{#unless this.hideShortText}}\n {{~#with this.shorttext}}\n <div class="col-span-12 px-5 pb-5 text-sm md:text-base font-copy c-podcastEpisodePlayer__shortText">\n <span class="c-teaser__shorttext"> {{this}} </span>\n </div>\n {{/with~}}\n {{/unless}}\n{{/unless}}\n\n<style>\n/* Modify the appearance of the slider thumb */\n.seek_slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 15px;\n height: 15px;\n background: #F07800;\n border: 2px solid white;\n cursor: pointer;\n border-radius: 50%;\n}\n\n</style>'
|
|
71
|
+
module.exports['components/teaser/podcast/podcast_player_ui.hbs'] = '<div class="flex flex-wrap w-full"> \n <div class="flex flex-wrap w-full js-load" \n x-data="playaudio()"\n ax-load\n x-ignore\n ax-load-src="/js/podcastPlayer.alpine.js"\n x-init="setTime( \'{{podcastDuration}}\' )" >\n\n <div class="flex items-center w-full flex-nowrap">\n {{!-- Start/StopButton --}}\n <div class="flex">\n {{> components/teaser/podcast/podcast_playbutton _clickFunction="playAndStop" _css="mr-4" _title=this.title _teaserSize=this.teaserSize _addClass="" }}\n </div>\n\n {{!-- Range Slider --}}\n <div class="flex w-full">\n <input x-ref="range" id="range" x-on:input="rangeInput()" type="range" x-bind:value="currentTimePercentage" min="0" max="1000" class="flex h-1 bg-white rounded-lg appearance-none cursor-pointer grow seek_slider" > \n </div>\n </div>\n \n {{!-- Meta Time usw. --}}\n {{> components/teaser/podcast/podcast_timedisplay _duration=podcastDuration _currentTimeClasses="font-bold text-orange-layout" _durationClasses="text-blue-science" _containerCss="pl-16 -mt-3 flex text-xs grow font-copy"}}\n\n {{!-- AudioElement --}}\n {{~#with this.audioUrl ~}}\n <audio preload="metadata" class="hidden" x-ref=\'audio\'>\n <source id="audio" src={{this}} type=\'audio/mp3\'/>\n </audio>\n {{/with}}\n </div>\n</div>'
|
|
72
|
+
module.exports['components/teaser/podcast/podcast_timedisplay.hbs'] = '<div x-cloak class="{{_containerCss}}">\n <span class="{{_currentTimeClasses}}" x-text="currentTime">0:00</span>\n <span class="{{_durationClasses}} px-0.5"> / </span>\n <span class="{{_durationClasses}}" x-text="audioDurationFancy"> </span>\n</div>'
|
|
73
73
|
module.exports['components/teaser/podcast/podcast_title.hbs'] = '{{#decorator \'components/base/link\' _css="font-headingSerif font-bold text-base mt-2.5 text-toplineColor line-clamp-4 md:line-clamp-2 ..." }} \n <span class="block mt-0.5 group-hover:underline text-blue-science {{#if _ordered}} pl-8 {{/if}} {{~ inline-switch _teaserSize \'["100","50"]\'\'["text-base md:text-2xl","text-base md:text-lg"]\' ~}}">\n {{~_title~}}\n </span>\n{{/decorator}}'
|
|
74
74
|
module.exports['components/teaser/teaser_logic/teaser_logic.hbs'] = '{{~#each this.logicItems}}\n {{~#if this.isSsi~}} \n {{#if (isStorybook)}} \n {{> components/teaser/teaser_logic/teaser_logic.ssi }} \n {{else}}\n {{{this.ssi}}}\n {{/if}} \n {{~else}}\n {{~#with this.includeModel~}}\n {{~#if (isStorybook)~}}\n {{~> components/base/load_dynamic _templatePath=../includePath ~}} \n {{~else~}}\n {{~> (lookup ../. \'includePath\')~}}\n {{~/if~}}\n {{~/with~}}\n {{~/if~}}\n{{/each~}}'
|
|
75
75
|
module.exports['components/teaser/teaser_logic/teaser_logic.ssi.hbs'] = '{{~#with this.logicItem~}}\n {{~#with this.includeModel~}}\n {{~#if (isStorybook)~}}\n {{~> components/base/load_dynamic _templatePath=../includePath ~}}\n {{~else~}}\n {{~> (lookup ../. \'includePath\')~}}\n {{~/if~}}\n {{~/with~}}\n{{~/with~}}'
|
package/dist/assets/index.css
CHANGED
|
@@ -789,8 +789,8 @@ video {
|
|
|
789
789
|
.mr-2 {
|
|
790
790
|
margin-right: 0.5rem;
|
|
791
791
|
}
|
|
792
|
-
|
|
793
|
-
margin-
|
|
792
|
+
.-mt-3 {
|
|
793
|
+
margin-top: -0.75rem;
|
|
794
794
|
}
|
|
795
795
|
.mb-7 {
|
|
796
796
|
margin-bottom: 1.75rem;
|
|
@@ -967,9 +967,6 @@ video {
|
|
|
967
967
|
width: -moz-fit-content;
|
|
968
968
|
width: fit-content;
|
|
969
969
|
}
|
|
970
|
-
.min-w-\[80px\] {
|
|
971
|
-
min-width: 80px;
|
|
972
|
-
}
|
|
973
970
|
.max-w-full {
|
|
974
971
|
max-width: 100%;
|
|
975
972
|
}
|
|
@@ -1580,6 +1577,10 @@ video {
|
|
|
1580
1577
|
padding-top: 0px;
|
|
1581
1578
|
padding-bottom: 0px;
|
|
1582
1579
|
}
|
|
1580
|
+
.px-0\.5 {
|
|
1581
|
+
padding-left: 0.125rem;
|
|
1582
|
+
padding-right: 0.125rem;
|
|
1583
|
+
}
|
|
1583
1584
|
.py-px {
|
|
1584
1585
|
padding-top: 1px;
|
|
1585
1586
|
padding-bottom: 1px;
|
|
@@ -1644,6 +1645,9 @@ video {
|
|
|
1644
1645
|
.pt-1\.5 {
|
|
1645
1646
|
padding-top: 0.375rem;
|
|
1646
1647
|
}
|
|
1648
|
+
.pl-16 {
|
|
1649
|
+
padding-left: 4rem;
|
|
1650
|
+
}
|
|
1647
1651
|
.pb-10 {
|
|
1648
1652
|
padding-bottom: 2.5rem;
|
|
1649
1653
|
}
|
|
@@ -2025,7 +2029,7 @@ video {
|
|
|
2025
2029
|
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
|
|
2026
2030
|
}
|
|
2027
2031
|
.counter-reset {
|
|
2028
|
-
counter-reset:
|
|
2032
|
+
counter-reset: cnt1665674240797;
|
|
2029
2033
|
}
|
|
2030
2034
|
.line-clamp-4 {
|
|
2031
2035
|
overflow: hidden;
|
|
@@ -2414,7 +2418,7 @@ video {
|
|
|
2414
2418
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
2415
2419
|
}
|
|
2416
2420
|
.-ordered {
|
|
2417
|
-
counter-increment:
|
|
2421
|
+
counter-increment: cnt1665674240797 1;
|
|
2418
2422
|
}
|
|
2419
2423
|
.-ordered::before {
|
|
2420
2424
|
position: absolute;
|
|
@@ -2431,7 +2435,7 @@ video {
|
|
|
2431
2435
|
letter-spacing: .0125em;
|
|
2432
2436
|
--tw-text-opacity: 1;
|
|
2433
2437
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
2434
|
-
content: counter(
|
|
2438
|
+
content: counter(cnt1665674240797);
|
|
2435
2439
|
}
|
|
2436
2440
|
/*! purgecss start ignore */
|
|
2437
2441
|
:root,
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
</div>
|
|
29
29
|
|
|
30
30
|
{{!-- Überschrift: --}}
|
|
31
|
-
<div class="flex pb-5 pr-2">
|
|
31
|
+
<div class="flex pb-5 pr-2 md:pr-5">
|
|
32
32
|
{{> components/teaser/podcast/podcast_title _title=this.title _teaserSize=this.teaserSize _addClass="" }}
|
|
33
33
|
</div>
|
|
34
34
|
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
:aria-expanded="open"
|
|
88
88
|
:aria-controls="$id('dropdown-button')"
|
|
89
89
|
type="button"
|
|
90
|
-
class="flex items-center gap-2 px-
|
|
90
|
+
class="flex items-center gap-2 px-2 py-2 text-white shadow bg-orange-layout">Abonnieren
|
|
91
91
|
<svg xmlns="http://www.w3.org/2000/svg" class="flex self-end w-5 h-5 text-white" viewBox="0 0 20 20" fill="currentColor">
|
|
92
92
|
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
|
93
93
|
</svg>
|
|
@@ -101,27 +101,27 @@
|
|
|
101
101
|
x-on:click.outside="close($refs.button)"
|
|
102
102
|
:id="$id('dropdown-button')"
|
|
103
103
|
style="display: none;"
|
|
104
|
-
class="absolute left-0 flex flex-col w-full text-sm text-white shadow-md grow bg-orange-layout"
|
|
104
|
+
class="absolute left-0 flex flex-col w-full px-2 text-sm text-white border-t border-white shadow-md grow bg-orange-layout"
|
|
105
105
|
>
|
|
106
106
|
{{!--// TODO: these Items should come via iteration over items-array --}}
|
|
107
107
|
{{#with this.podcastItunesUrl}}
|
|
108
|
-
<a class="flex items-center w-full gap-2
|
|
108
|
+
<a class="flex items-center w-full gap-2 py-1.5 text-left border-b hover:underline disabled:text-gray-500"
|
|
109
109
|
title="Bei iTunes abonnieren" target="_blank"
|
|
110
110
|
rel="noopener noreferrer"
|
|
111
111
|
href="{{this}}">
|
|
112
112
|
ITunes-Podcast
|
|
113
113
|
</a>
|
|
114
114
|
{{/with}}
|
|
115
|
-
<a href="#" class="flex items-center w-full gap-2
|
|
115
|
+
<a href="#" class="flex items-center w-full gap-2 py-1.5 text-left border-b hover:underline disabled:text-gray-500">
|
|
116
116
|
Apple Podcast
|
|
117
117
|
</a>
|
|
118
|
-
<a href="#" class="flex items-center w-full gap-2
|
|
118
|
+
<a href="#" class="flex items-center w-full gap-2 py-1.5 text-left border-b hover:underline disabled:text-gray-500">
|
|
119
119
|
ARD Audiothek
|
|
120
120
|
</a>
|
|
121
|
-
<a href="#" class="flex items-center w-full gap-2
|
|
121
|
+
<a href="#" class="flex items-center w-full gap-2 py-1.5 text-left border-b hover:underline disabled:text-gray-500">
|
|
122
122
|
Spotify
|
|
123
123
|
</a>
|
|
124
|
-
<a title="RSS Feed abonnieren" target="_blank" rel="noopener noreferrer" href="{{this.podcastRssUrl}}" class="flex items-center w-full gap-2
|
|
124
|
+
<a title="RSS Feed abonnieren" target="_blank" rel="noopener noreferrer" href="{{this.podcastRssUrl}}" class="flex items-center w-full gap-2 py-1.5 text-left hover:underline disabled:text-gray-500">
|
|
125
125
|
RSS Feed
|
|
126
126
|
</a>
|
|
127
127
|
</div>
|
|
@@ -143,7 +143,7 @@
|
|
|
143
143
|
{{#unless _isSinglePage}}
|
|
144
144
|
{{#unless this.hideShortText}}
|
|
145
145
|
{{~#with this.shorttext}}
|
|
146
|
-
<div class="col-span-12
|
|
146
|
+
<div class="col-span-12 px-5 pb-5 text-sm md:text-base font-copy c-podcastEpisodePlayer__shortText">
|
|
147
147
|
<span class="c-teaser__shorttext"> {{this}} </span>
|
|
148
148
|
</div>
|
|
149
149
|
{{/with~}}
|
|
@@ -1,28 +1,31 @@
|
|
|
1
|
-
<div class="w-full">
|
|
2
|
-
<div class="flex
|
|
1
|
+
<div class="flex flex-wrap w-full">
|
|
2
|
+
<div class="flex flex-wrap w-full js-load"
|
|
3
3
|
x-data="playaudio()"
|
|
4
4
|
ax-load
|
|
5
5
|
x-ignore
|
|
6
6
|
ax-load-src="/js/podcastPlayer.alpine.js"
|
|
7
7
|
x-init="setTime( '{{podcastDuration}}' )" >
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
<div class="flex items-center w-full flex-nowrap">
|
|
10
|
+
{{!-- Start/StopButton --}}
|
|
11
|
+
<div class="flex">
|
|
12
|
+
{{> components/teaser/podcast/podcast_playbutton _clickFunction="playAndStop" _css="mr-4" _title=this.title _teaserSize=this.teaserSize _addClass="" }}
|
|
13
|
+
</div>
|
|
12
14
|
|
|
15
|
+
{{!-- Range Slider --}}
|
|
16
|
+
<div class="flex w-full">
|
|
17
|
+
<input x-ref="range" id="range" x-on:input="rangeInput()" type="range" x-bind:value="currentTimePercentage" min="0" max="1000" class="flex h-1 bg-white rounded-lg appearance-none cursor-pointer grow seek_slider" >
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
20
|
+
|
|
13
21
|
{{!-- Meta Time usw. --}}
|
|
14
|
-
{{> components/teaser/podcast/podcast_timedisplay _duration=podcastDuration _currentTimeClasses="font-bold text-orange-layout" _durationClasses="text-blue-science" _containerCss="
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
{{~#with this.audioUrl ~}}
|
|
23
|
-
<audio preload="metadata" class="hidden" x-ref='audio'>
|
|
24
|
-
<source id="audio" src={{this}} type='audio/mp3'/>
|
|
25
|
-
</audio>
|
|
26
|
-
{{/with}}
|
|
22
|
+
{{> components/teaser/podcast/podcast_timedisplay _duration=podcastDuration _currentTimeClasses="font-bold text-orange-layout" _durationClasses="text-blue-science" _containerCss="pl-16 -mt-3 flex text-xs grow font-copy"}}
|
|
23
|
+
|
|
24
|
+
{{!-- AudioElement --}}
|
|
25
|
+
{{~#with this.audioUrl ~}}
|
|
26
|
+
<audio preload="metadata" class="hidden" x-ref='audio'>
|
|
27
|
+
<source id="audio" src={{this}} type='audio/mp3'/>
|
|
28
|
+
</audio>
|
|
29
|
+
{{/with}}
|
|
27
30
|
</div>
|
|
28
31
|
</div>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<div x-cloak class="{{_containerCss}}">
|
|
2
2
|
<span class="{{_currentTimeClasses}}" x-text="currentTime">0:00</span>
|
|
3
|
-
<span class="{{_durationClasses}}"> / </span>
|
|
3
|
+
<span class="{{_durationClasses}} px-0.5"> / </span>
|
|
4
4
|
<span class="{{_durationClasses}}" x-text="audioDurationFancy"> </span>
|
|
5
5
|
</div>
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"repository": "https://github.com/szuelch/hr-design-system-handlebars",
|
|
9
|
-
"version": "0.
|
|
9
|
+
"version": "0.64.0",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "start-storybook -p 6006 public",
|
|
@@ -501,7 +501,7 @@
|
|
|
501
501
|
"includePath": "components/teaser/podcast/podcast",
|
|
502
502
|
"includeModel": {
|
|
503
503
|
"byline": "Byline",
|
|
504
|
-
"title": "Hier steht ein unheimlich toller langer Podcast-Titel, der
|
|
504
|
+
"title": "Hier steht ein unheimlich toller langer Podcast-Titel, der wird bei Desktop nach zwei Zeilen und mobil nach max. 4 Zeilen mit 3 Punkten abgekürzt, sollte er zu lang sein",
|
|
505
505
|
"topline": "Hier steht die Topline",
|
|
506
506
|
"headingFontVariant": "serif",
|
|
507
507
|
"extendedTitle": "",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"isSsi":true,"logicItem":{"includePath":"components/teaser/podcast/podcast","includeModel":{"byline":"Byline","title":"Hier steht ein unheimlich toller langer Podcast-Titel, der geht über zwei Zeilen und wird in der zweiten Zeile mit 3 Punkten abgekürzt, sollte er zu lang sein","topline":"Hier steht die Topline","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard-ds","teaserSize":"100","isMobile1to1":false,"airdateDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1984","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"teaseritem":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/189/480/480","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","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, https://picsum.photos/id/189/1920/1080 1920w"}]}},"podcastDuration":"2:07:56","teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"podcastChannel":{"title":"Der Tag in Hessen!","url":"#ChannelURL","podcastItunesUrl":"#ItunesURL","podcastRssUrl":"#RSSURL"},"audioUrl":"https://mp3podcasthr-a.akamaihd.net/mp3/podcast/hr2_audio/hr2_audio_20220914_95730396.mp3","podcastDownloadUrl":"https://mp3podcasthr-a.akamaihd.net/mp3/podcast/derTag/derTag_20190320_81142988.mp3","teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/101/480/270","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","srcset":"https://picsum.photos/id/101/320/180 320w, https://picsum.photos/id/101/480/270 480w, https://picsum.photos/id/101/640/360 640w, https://picsum.photos/id/101/960/540 960w, https://picsum.photos/id/101/1920/1080 1920w"}]}},"commentsSsi":{"commentNumber":"666","hasOneComment":false,"hasManyComments":true,"commentLink":{"link":{"url":"/teaser1-comments","webviewUrl":"/teaser1-comments#webview","isTargetBlank":false,"readMoreText":{"readMoreScreenreader":"Zu den Kommentaren des Artikels"}}}},"documentSection":"Gesellschaft","displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":false,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcastEpisode":true,"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":true,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","headlineTag":"h2","icon":"ortsmarke","imageVariant":"topteaser","hideShortText":false,"shorttext":"Bla ..... Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre liebe Mutter fehlt.","sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"isPodcast":true,"toModel":{"audioElement":{"isPodcast":true,"ardPlayerConfig":{"playerConfig":{"generic":{"isAutoplay":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"http://localhost:8080/site/hessenschau/assets_2.85.0/vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"site":"551103","config":{"getCollectDomainSSL":"logs1406.xiti.com","secure":true},"page":{"name":"muslim_fashion__mehr_als_ein_kopftuch__podcast:audio:audioPlay","level2":"4","chapter1":"Audio-Start","chapter2":"OnDemand","customVars":{"site":{"1":"podcast-episode-43976","2":"hr-nt:podcastEpisode","5":"202203230802"}}},"richMedia":{"mediaType":"audio","playerId":"4076","mediaLevel2":"4","mediaLabel":"muslim_fashion__mehr_als_ein_kopftuch__podcast:audioPlay","mediaTheme1":"OnDemand","duration":"3040","broadcastMode":"clip"}}}},"mediaCollection":{"streams":[{"kind":"main","isAudioOnly":true,"media":[{"url":"https://mp3podcasthr-a.akamaihd.net/mp3/podcast/derTag/derTag_20190320_81142988.mp3","mimeType":"audio/mp3","audios":[{"kind":"standard","languageCode":"de"}]}]}],"meta":{"durationSeconds":3040,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Muslim Fashion. Mehr als ein Kopftuch.","synopsis":"Wo immer die Ausstellung \"Contemporary Muslim Fashion“ ins Museum kommt, entfacht sie heftige Diskussionen. Nachdem die Schau in San Francisco für Furore sorgte, wird sie demnächst im Frankfurter Museum für Angewandte Kunst als erste Station in Europa gezeigt. Die \"Modest Fashion“, die dezente Mode, so das Schlagwort für die verhüllende, aber keineswegs unsichtbar machende Mode, spaltet das feministische Lager: Ist sie eine Momentaufnahme aktueller muslimischer Kleidungsstile aus aller Welt oder Werbung für die weibliche Verschleierung? In jedem Fall zeigt die Ausstellung, dass die Verhüllung des weiblichen Körpers und der Frisur nicht nur trist, sondern auch schön sein kann - und für manche Trägerinnen befreiend. Und sie ist durchaus politisch, diskutiert gesetzliche Kleiderordnungen und die Frage politischer Symbolik. Inzwischen wollen auch westliche Firmen von der Vielfalt muslimischer Mode profitieren. Sie haben die Konsumentinnen im Nahen Osten und Südostasien als kaufkräftige Klientel entdeckt. Dort ist ein riesiger Markt zu erschließen. Nicht selten wagen sie sich damit an die Grenzen religiöser und gesellschaftlicher Akzeptanz. Kann Mode solche Grenzen überwinden? "},"pluginData":{},"geoBlocked":false},"playerId":"4076","type":"audioOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.3.4.4fc164e9.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.3.4.8ea4ea3d.js","isAutoplay":true,"teaserSize":"50"},"ardPlayerJsonConfig":{"playerConfig":{"generic":{"isAutoplay":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"http://localhost:8080/site/hessenschau/assets_2.85.0/vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"site":"551103","config":{"getCollectDomainSSL":"logs1406.xiti.com","secure":true},"page":{"name":"muslim_fashion__mehr_als_ein_kopftuch__podcast:audio:audioPlay","level2":"4","chapter1":"Audio-Start","chapter2":"OnDemand","customVars":{"site":{"1":"podcast-episode-43976","2":"hr-nt:podcastEpisode","5":"202203230802"}}},"richMedia":{"mediaType":"audio","playerId":"4076","mediaLevel2":"4","mediaLabel":"muslim_fashion__mehr_als_ein_kopftuch__podcast:audioPlay","mediaTheme1":"OnDemand","duration":"3040","broadcastMode":"clip"}}}},"mediaCollection":{"streams":[{"kind":"main","isAudioOnly":true,"media":[{"url":"https://mp3podcasthr-a.akamaihd.net/mp3/podcast/derTag/derTag_20190320_81142988.mp3","mimeType":"audio/mp3","audios":[{"kind":"standard","languageCode":"de"}]}]}],"meta":{"durationSeconds":3040,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Muslim Fashion. Mehr als ein Kopftuch.","synopsis":"Wo immer die Ausstellung \"Contemporary Muslim Fashion“ ins Museum kommt, entfacht sie heftige Diskussionen. Nachdem die Schau in San Francisco für Furore sorgte, wird sie demnächst im Frankfurter Museum für Angewandte Kunst als erste Station in Europa gezeigt. Die \"Modest Fashion“, die dezente Mode, so das Schlagwort für die verhüllende, aber keineswegs unsichtbar machende Mode, spaltet das feministische Lager: Ist sie eine Momentaufnahme aktueller muslimischer Kleidungsstile aus aller Welt oder Werbung für die weibliche Verschleierung? In jedem Fall zeigt die Ausstellung, dass die Verhüllung des weiblichen Körpers und der Frisur nicht nur trist, sondern auch schön sein kann - und für manche Trägerinnen befreiend. Und sie ist durchaus politisch, diskutiert gesetzliche Kleiderordnungen und die Frage politischer Symbolik. Inzwischen wollen auch westliche Firmen von der Vielfalt muslimischer Mode profitieren. Sie haben die Konsumentinnen im Nahen Osten und Südostasien als kaufkräftige Klientel entdeckt. Dort ist ein riesiger Markt zu erschließen. Nicht selten wagen sie sich damit an die Grenzen religiöser und gesellschaftlicher Akzeptanz. Kann Mode solche Grenzen überwinden? "},"pluginData":{},"geoBlocked":false},"playerId":"4076","type":"audioOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.3.4.4fc164e9.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.3.4.8ea4ea3d.js","isAutoplay":true,"teaserSize":"50"}}}},"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":"sans serif","imageVariant":"topteaser","isFileDownload":false,"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/101/480/270","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","srcset":"https://picsum.photos/id/101/320/180 320w, https://picsum.photos/id/101/480/270 480w, https://picsum.photos/id/101/640/360 640w, https://picsum.photos/id/101/960/540 960w, https://picsum.photos/id/101/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":"podcast","loca":"label_podcast","byline":{"bylineSsi":"07:42 min","bylineText":""}}}}}
|
|
1
|
+
{"isSsi":true,"logicItem":{"includePath":"components/teaser/podcast/podcast","includeModel":{"byline":"Byline","title":"Hier steht ein unheimlich toller langer Podcast-Titel, der wird bei Desktop nach zwei Zeilen und mobil nach max. 4 Zeilen mit 3 Punkten abgekürzt, sollte er zu lang sein","topline":"Hier steht die Topline","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard-ds","teaserSize":"100","isMobile1to1":false,"airdateDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1984","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"teaseritem":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/189/480/480","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","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, https://picsum.photos/id/189/1920/1080 1920w"}]}},"podcastDuration":"2:07:56","teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"podcastChannel":{"title":"Der Tag in Hessen!","url":"#ChannelURL","podcastItunesUrl":"#ItunesURL","podcastRssUrl":"#RSSURL"},"audioUrl":"https://mp3podcasthr-a.akamaihd.net/mp3/podcast/hr2_audio/hr2_audio_20220914_95730396.mp3","podcastDownloadUrl":"https://mp3podcasthr-a.akamaihd.net/mp3/podcast/derTag/derTag_20190320_81142988.mp3","teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/101/480/270","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","srcset":"https://picsum.photos/id/101/320/180 320w, https://picsum.photos/id/101/480/270 480w, https://picsum.photos/id/101/640/360 640w, https://picsum.photos/id/101/960/540 960w, https://picsum.photos/id/101/1920/1080 1920w"}]}},"commentsSsi":{"commentNumber":"666","hasOneComment":false,"hasManyComments":true,"commentLink":{"link":{"url":"/teaser1-comments","webviewUrl":"/teaser1-comments#webview","isTargetBlank":false,"readMoreText":{"readMoreScreenreader":"Zu den Kommentaren des Artikels"}}}},"documentSection":"Gesellschaft","displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":false,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcastEpisode":true,"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":true,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","headlineTag":"h2","icon":"ortsmarke","imageVariant":"topteaser","hideShortText":false,"shorttext":"Bla ..... Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre liebe Mutter fehlt.","sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"isPodcast":true,"toModel":{"audioElement":{"isPodcast":true,"ardPlayerConfig":{"playerConfig":{"generic":{"isAutoplay":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"http://localhost:8080/site/hessenschau/assets_2.85.0/vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"site":"551103","config":{"getCollectDomainSSL":"logs1406.xiti.com","secure":true},"page":{"name":"muslim_fashion__mehr_als_ein_kopftuch__podcast:audio:audioPlay","level2":"4","chapter1":"Audio-Start","chapter2":"OnDemand","customVars":{"site":{"1":"podcast-episode-43976","2":"hr-nt:podcastEpisode","5":"202203230802"}}},"richMedia":{"mediaType":"audio","playerId":"4076","mediaLevel2":"4","mediaLabel":"muslim_fashion__mehr_als_ein_kopftuch__podcast:audioPlay","mediaTheme1":"OnDemand","duration":"3040","broadcastMode":"clip"}}}},"mediaCollection":{"streams":[{"kind":"main","isAudioOnly":true,"media":[{"url":"https://mp3podcasthr-a.akamaihd.net/mp3/podcast/derTag/derTag_20190320_81142988.mp3","mimeType":"audio/mp3","audios":[{"kind":"standard","languageCode":"de"}]}]}],"meta":{"durationSeconds":3040,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Muslim Fashion. Mehr als ein Kopftuch.","synopsis":"Wo immer die Ausstellung \"Contemporary Muslim Fashion“ ins Museum kommt, entfacht sie heftige Diskussionen. Nachdem die Schau in San Francisco für Furore sorgte, wird sie demnächst im Frankfurter Museum für Angewandte Kunst als erste Station in Europa gezeigt. Die \"Modest Fashion“, die dezente Mode, so das Schlagwort für die verhüllende, aber keineswegs unsichtbar machende Mode, spaltet das feministische Lager: Ist sie eine Momentaufnahme aktueller muslimischer Kleidungsstile aus aller Welt oder Werbung für die weibliche Verschleierung? In jedem Fall zeigt die Ausstellung, dass die Verhüllung des weiblichen Körpers und der Frisur nicht nur trist, sondern auch schön sein kann - und für manche Trägerinnen befreiend. Und sie ist durchaus politisch, diskutiert gesetzliche Kleiderordnungen und die Frage politischer Symbolik. Inzwischen wollen auch westliche Firmen von der Vielfalt muslimischer Mode profitieren. Sie haben die Konsumentinnen im Nahen Osten und Südostasien als kaufkräftige Klientel entdeckt. Dort ist ein riesiger Markt zu erschließen. Nicht selten wagen sie sich damit an die Grenzen religiöser und gesellschaftlicher Akzeptanz. Kann Mode solche Grenzen überwinden? "},"pluginData":{},"geoBlocked":false},"playerId":"4076","type":"audioOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.3.4.4fc164e9.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.3.4.8ea4ea3d.js","isAutoplay":true,"teaserSize":"50"},"ardPlayerJsonConfig":{"playerConfig":{"generic":{"isAutoplay":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"http://localhost:8080/site/hessenschau/assets_2.85.0/vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"site":"551103","config":{"getCollectDomainSSL":"logs1406.xiti.com","secure":true},"page":{"name":"muslim_fashion__mehr_als_ein_kopftuch__podcast:audio:audioPlay","level2":"4","chapter1":"Audio-Start","chapter2":"OnDemand","customVars":{"site":{"1":"podcast-episode-43976","2":"hr-nt:podcastEpisode","5":"202203230802"}}},"richMedia":{"mediaType":"audio","playerId":"4076","mediaLevel2":"4","mediaLabel":"muslim_fashion__mehr_als_ein_kopftuch__podcast:audioPlay","mediaTheme1":"OnDemand","duration":"3040","broadcastMode":"clip"}}}},"mediaCollection":{"streams":[{"kind":"main","isAudioOnly":true,"media":[{"url":"https://mp3podcasthr-a.akamaihd.net/mp3/podcast/derTag/derTag_20190320_81142988.mp3","mimeType":"audio/mp3","audios":[{"kind":"standard","languageCode":"de"}]}]}],"meta":{"durationSeconds":3040,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Muslim Fashion. Mehr als ein Kopftuch.","synopsis":"Wo immer die Ausstellung \"Contemporary Muslim Fashion“ ins Museum kommt, entfacht sie heftige Diskussionen. Nachdem die Schau in San Francisco für Furore sorgte, wird sie demnächst im Frankfurter Museum für Angewandte Kunst als erste Station in Europa gezeigt. Die \"Modest Fashion“, die dezente Mode, so das Schlagwort für die verhüllende, aber keineswegs unsichtbar machende Mode, spaltet das feministische Lager: Ist sie eine Momentaufnahme aktueller muslimischer Kleidungsstile aus aller Welt oder Werbung für die weibliche Verschleierung? In jedem Fall zeigt die Ausstellung, dass die Verhüllung des weiblichen Körpers und der Frisur nicht nur trist, sondern auch schön sein kann - und für manche Trägerinnen befreiend. Und sie ist durchaus politisch, diskutiert gesetzliche Kleiderordnungen und die Frage politischer Symbolik. Inzwischen wollen auch westliche Firmen von der Vielfalt muslimischer Mode profitieren. Sie haben die Konsumentinnen im Nahen Osten und Südostasien als kaufkräftige Klientel entdeckt. Dort ist ein riesiger Markt zu erschließen. Nicht selten wagen sie sich damit an die Grenzen religiöser und gesellschaftlicher Akzeptanz. Kann Mode solche Grenzen überwinden? "},"pluginData":{},"geoBlocked":false},"playerId":"4076","type":"audioOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.3.4.4fc164e9.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.3.4.8ea4ea3d.js","isAutoplay":true,"teaserSize":"50"}}}},"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":"sans serif","imageVariant":"topteaser","isFileDownload":false,"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/101/480/270","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","srcset":"https://picsum.photos/id/101/320/180 320w, https://picsum.photos/id/101/480/270 480w, https://picsum.photos/id/101/640/360 640w, https://picsum.photos/id/101/960/540 960w, https://picsum.photos/id/101/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":"podcast","loca":"label_podcast","byline":{"bylineSsi":"07:42 min","bylineText":""}}}}}
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
</div>
|
|
29
29
|
|
|
30
30
|
{{!-- Überschrift: --}}
|
|
31
|
-
<div class="flex pb-5 pr-2">
|
|
31
|
+
<div class="flex pb-5 pr-2 md:pr-5">
|
|
32
32
|
{{> components/teaser/podcast/podcast_title _title=this.title _teaserSize=this.teaserSize _addClass="" }}
|
|
33
33
|
</div>
|
|
34
34
|
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
:aria-expanded="open"
|
|
88
88
|
:aria-controls="$id('dropdown-button')"
|
|
89
89
|
type="button"
|
|
90
|
-
class="flex items-center gap-2 px-
|
|
90
|
+
class="flex items-center gap-2 px-2 py-2 text-white shadow bg-orange-layout">Abonnieren
|
|
91
91
|
<svg xmlns="http://www.w3.org/2000/svg" class="flex self-end w-5 h-5 text-white" viewBox="0 0 20 20" fill="currentColor">
|
|
92
92
|
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
|
93
93
|
</svg>
|
|
@@ -101,27 +101,27 @@
|
|
|
101
101
|
x-on:click.outside="close($refs.button)"
|
|
102
102
|
:id="$id('dropdown-button')"
|
|
103
103
|
style="display: none;"
|
|
104
|
-
class="absolute left-0 flex flex-col w-full text-sm text-white shadow-md grow bg-orange-layout"
|
|
104
|
+
class="absolute left-0 flex flex-col w-full px-2 text-sm text-white border-t border-white shadow-md grow bg-orange-layout"
|
|
105
105
|
>
|
|
106
106
|
{{!--// TODO: these Items should come via iteration over items-array --}}
|
|
107
107
|
{{#with this.podcastItunesUrl}}
|
|
108
|
-
<a class="flex items-center w-full gap-2
|
|
108
|
+
<a class="flex items-center w-full gap-2 py-1.5 text-left border-b hover:underline disabled:text-gray-500"
|
|
109
109
|
title="Bei iTunes abonnieren" target="_blank"
|
|
110
110
|
rel="noopener noreferrer"
|
|
111
111
|
href="{{this}}">
|
|
112
112
|
ITunes-Podcast
|
|
113
113
|
</a>
|
|
114
114
|
{{/with}}
|
|
115
|
-
<a href="#" class="flex items-center w-full gap-2
|
|
115
|
+
<a href="#" class="flex items-center w-full gap-2 py-1.5 text-left border-b hover:underline disabled:text-gray-500">
|
|
116
116
|
Apple Podcast
|
|
117
117
|
</a>
|
|
118
|
-
<a href="#" class="flex items-center w-full gap-2
|
|
118
|
+
<a href="#" class="flex items-center w-full gap-2 py-1.5 text-left border-b hover:underline disabled:text-gray-500">
|
|
119
119
|
ARD Audiothek
|
|
120
120
|
</a>
|
|
121
|
-
<a href="#" class="flex items-center w-full gap-2
|
|
121
|
+
<a href="#" class="flex items-center w-full gap-2 py-1.5 text-left border-b hover:underline disabled:text-gray-500">
|
|
122
122
|
Spotify
|
|
123
123
|
</a>
|
|
124
|
-
<a title="RSS Feed abonnieren" target="_blank" rel="noopener noreferrer" href="{{this.podcastRssUrl}}" class="flex items-center w-full gap-2
|
|
124
|
+
<a title="RSS Feed abonnieren" target="_blank" rel="noopener noreferrer" href="{{this.podcastRssUrl}}" class="flex items-center w-full gap-2 py-1.5 text-left hover:underline disabled:text-gray-500">
|
|
125
125
|
RSS Feed
|
|
126
126
|
</a>
|
|
127
127
|
</div>
|
|
@@ -143,7 +143,7 @@
|
|
|
143
143
|
{{#unless _isSinglePage}}
|
|
144
144
|
{{#unless this.hideShortText}}
|
|
145
145
|
{{~#with this.shorttext}}
|
|
146
|
-
<div class="col-span-12
|
|
146
|
+
<div class="col-span-12 px-5 pb-5 text-sm md:text-base font-copy c-podcastEpisodePlayer__shortText">
|
|
147
147
|
<span class="c-teaser__shorttext"> {{this}} </span>
|
|
148
148
|
</div>
|
|
149
149
|
{{/with~}}
|
|
@@ -1,28 +1,31 @@
|
|
|
1
|
-
<div class="w-full">
|
|
2
|
-
<div class="flex
|
|
1
|
+
<div class="flex flex-wrap w-full">
|
|
2
|
+
<div class="flex flex-wrap w-full js-load"
|
|
3
3
|
x-data="playaudio()"
|
|
4
4
|
ax-load
|
|
5
5
|
x-ignore
|
|
6
6
|
ax-load-src="/js/podcastPlayer.alpine.js"
|
|
7
7
|
x-init="setTime( '{{podcastDuration}}' )" >
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
<div class="flex items-center w-full flex-nowrap">
|
|
10
|
+
{{!-- Start/StopButton --}}
|
|
11
|
+
<div class="flex">
|
|
12
|
+
{{> components/teaser/podcast/podcast_playbutton _clickFunction="playAndStop" _css="mr-4" _title=this.title _teaserSize=this.teaserSize _addClass="" }}
|
|
13
|
+
</div>
|
|
12
14
|
|
|
15
|
+
{{!-- Range Slider --}}
|
|
16
|
+
<div class="flex w-full">
|
|
17
|
+
<input x-ref="range" id="range" x-on:input="rangeInput()" type="range" x-bind:value="currentTimePercentage" min="0" max="1000" class="flex h-1 bg-white rounded-lg appearance-none cursor-pointer grow seek_slider" >
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
20
|
+
|
|
13
21
|
{{!-- Meta Time usw. --}}
|
|
14
|
-
{{> components/teaser/podcast/podcast_timedisplay _duration=podcastDuration _currentTimeClasses="font-bold text-orange-layout" _durationClasses="text-blue-science" _containerCss="
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
{{~#with this.audioUrl ~}}
|
|
23
|
-
<audio preload="metadata" class="hidden" x-ref='audio'>
|
|
24
|
-
<source id="audio" src={{this}} type='audio/mp3'/>
|
|
25
|
-
</audio>
|
|
26
|
-
{{/with}}
|
|
22
|
+
{{> components/teaser/podcast/podcast_timedisplay _duration=podcastDuration _currentTimeClasses="font-bold text-orange-layout" _durationClasses="text-blue-science" _containerCss="pl-16 -mt-3 flex text-xs grow font-copy"}}
|
|
23
|
+
|
|
24
|
+
{{!-- AudioElement --}}
|
|
25
|
+
{{~#with this.audioUrl ~}}
|
|
26
|
+
<audio preload="metadata" class="hidden" x-ref='audio'>
|
|
27
|
+
<source id="audio" src={{this}} type='audio/mp3'/>
|
|
28
|
+
</audio>
|
|
29
|
+
{{/with}}
|
|
27
30
|
</div>
|
|
28
31
|
</div>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<div x-cloak class="{{_containerCss}}">
|
|
2
2
|
<span class="{{_currentTimeClasses}}" x-text="currentTime">0:00</span>
|
|
3
|
-
<span class="{{_durationClasses}}"> / </span>
|
|
3
|
+
<span class="{{_durationClasses}} px-0.5"> / </span>
|
|
4
4
|
<span class="{{_durationClasses}}" x-text="audioDurationFancy"> </span>
|
|
5
5
|
</div>
|