hr-design-system-handlebars 0.84.0 → 0.85.1
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 +24 -0
- package/build/handlebars/partials/handlebar-partials.js +13 -12
- package/dist/assets/index.css +30 -8
- package/dist/assets/vendor/js/podcast_player.alpine.js +35 -32
- package/dist/views/components/teaser/cluster/teaser_cluster.hbs +1 -1
- package/dist/views/components/teaser/podcast/podcast-playlist.hbs +1 -1
- package/dist/views/components/teaser/podcast/podcast.hbs +1 -1
- package/dist/views/components/teaser/podcast/podcast_playbutton.hbs +1 -1
- package/dist/views/components/teaser/podcast/podcast_player.hbs +6 -29
- package/dist/views/components/teaser/podcast/podcast_player_ui.hbs +8 -6
- package/dist/views/components/teaser/podcast/podcast_playlist_player.hbs +23 -114
- package/dist/views/components/teaser/podcast/podcast_subscribe_button.hbs +65 -0
- package/package.json +1 -1
- package/src/assets/css/custom-components.css +25 -1
- package/src/assets/vendor/js/podcast_player.alpine.js +35 -32
- package/src/stories/views/components/teaser/cluster/teaser_cluster.hbs +1 -1
- package/src/stories/views/components/teaser/podcast/podcast-playlist.hbs +1 -1
- package/src/stories/views/components/teaser/podcast/podcast.hbs +1 -1
- package/src/stories/views/components/teaser/podcast/podcast_playbutton.hbs +1 -1
- package/src/stories/views/components/teaser/podcast/podcast_player.hbs +6 -29
- package/src/stories/views/components/teaser/podcast/podcast_player_ui.hbs +8 -6
- package/src/stories/views/components/teaser/podcast/podcast_playlist_player.hbs +23 -114
- package/src/stories/views/components/teaser/podcast/podcast_subscribe_button.hbs +65 -0
- package/tailwind.config.js +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,27 @@
|
|
|
1
|
+
# v0.85.1 (Thu Nov 17 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- change value of color blue-accented [#390](https://github.com/mumprod/hr-design-system-handlebars/pull/390) ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v0.85.0 (Thu Nov 17 2022)
|
|
14
|
+
|
|
15
|
+
#### 🚀 Enhancement
|
|
16
|
+
|
|
17
|
+
- Podcast player refactoring [#388](https://github.com/mumprod/hr-design-system-handlebars/pull/388) ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
18
|
+
|
|
19
|
+
#### Authors: 1
|
|
20
|
+
|
|
21
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
1
25
|
# v0.84.0 (Thu Nov 17 2022)
|
|
2
26
|
|
|
3
27
|
#### 🚀 Enhancement
|
|
@@ -39,16 +39,16 @@ module.exports['components/site_header/anchor_navigation/anchor_navigation.hbs']
|
|
|
39
39
|
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}}'
|
|
40
40
|
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>'
|
|
41
41
|
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>'
|
|
42
|
+
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>'
|
|
43
|
+
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>'
|
|
42
44
|
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
45
|
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
46
|
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
47
|
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> '
|
|
46
48
|
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}}'
|
|
47
|
-
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>'
|
|
48
|
-
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>'
|
|
49
49
|
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>'
|
|
50
50
|
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}}'
|
|
51
|
-
module.exports['components/teaser/cluster/teaser_cluster.hbs'] = '<article class="mx-5 md:mx-0 col-span-12 grid bg-
|
|
51
|
+
module.exports['components/teaser/cluster/teaser_cluster.hbs'] = '<article class="mx-5 md:mx-0 col-span-12 grid bg-blue-accented 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 uppercase{{#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.overviewLink}}\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'
|
|
52
52
|
module.exports['components/teaser/cluster/teaser_cluster_byline.hbs'] = '\n{{#with this.teaserInfo}}\n<p class="mt-2.5 text-xs text-grey-scorpion font-headingSerif">\n {{!--Teaser-Info--}}\n {{#if this.showTeaserInfo~}}\n {{~#if this.showTeaserInfoSection}}\n <span class="uppercase">\n {{../this.documentSection~}}\n </span>\n <span class="mx-px last-of-type:hidden">|</span>\n {{/if}}\n {{~#if this.showTeaserInfoDate}}\n {{~#with ../this.teaserDate}}\n <time datetime="{{this.htmlDateTime}}">{{this.date}}</time>\n {{/with~}}\n <span class="mx-px last-of-type:hidden">|</span>\n {{else}}\n {{~#if this.showTeaserInfoDateTime}}\n {{~#with ../this.teaserDate}}\n <time datetime="{{this.htmlDateTime}}">{{loca "date_simple_at" this.dateSeparatorTime}}</time>\n {{/with~}}\n <span class="mx-px last-of-type:hidden">|</span>\n {{/if~}}\n {{/if~}}\n {{/if}}\n</p>\n{{/with}}'
|
|
53
53
|
module.exports['components/teaser/cluster/teaser_cluster_item.hbs'] = '\n{{#decorator \'components/base/link\' _css="group" _doTracking=(if this.doTracking \'true\') _clickLabelPrefix1="clusterTeaserLink" _clickLabelPrefix2="Link" }} \n {{> components/teaser/components/teaser_heading\n _headlineTag="h1"\n _label=this.label\n _size=_size\n _title=this.title\n _teaserType="cluster"\n _ordered=_ordered\n _titleCss=\'text-clusterTeaserTitle\'\n _firstItem=_firstItem}} \n {{/decorator}}\n{{> components/teaser/cluster/teaser_cluster_byline}}\n \n'
|
|
54
54
|
module.exports['components/teaser/cluster/teaser_cluster_list.hbs'] = '<div class="{{~#if this.showFirstImageOrGenreImage}}{{~inline-switch this.teaserSize \'["100"]\' \'[" md:flex md:flex-row"]\'}}{{~/if~}}">\n {{~#if this.showGenreImage}}\n <div class="px-0 pb-5 {{~inline-switch this.teaserSize \'["100"]\' \'[" md:pl-5 md:basis-1/2 lg:basis-1/3 md:ar-1-1"]\'}}">\n {{~> components/base/image/responsive_image this.genreImage _type=this.teaserType _variant=this.imageVariant _addClass=this.aspectRatio _addClassImg="w-full" ~}}\n </div>\n {{~/if~}}\n {{~#if this.showFirstImage}}\n {{~#with this.firstEntry~}}\n {{~#if this.teaserImage}}\n <div class="px-0 pb-5 {{~inline-switch ../this.teaserSize \'["100"]\' \'[" md:pl-5 md:basis-1/2 lg:basis-1/3"]\'}}"> \n {{~> components/base/image/responsive_image this.teaserImage _type=../this.teaserType _variant=../this.imageVariant _addClass=../this.aspectRatio _addClassImg="pb-4 w-full" ~}}\n <div class="mx-5 {{~inline-switch ../this.teaserSize \'["100"]\' \'[" md:mx-0"]\'}}">\n {{> components/teaser/cluster/teaser_cluster_item _size=../this.teaserSize _ordered=../this.isOrdered _firstItem=true}}\n </div> \n </div> \n {{/if~}}\n {{~/with~}}\n {{/if~}}\n {{~#with this.clusterTeaserItems}}\n {{~#if ../this.isOrdered}}<ol class="mx-5 list-none divide-y divide-white divide-solid counter-reset border-t border-white {{~#if ../this.showGenreImage}}{{~inline-switch ../this.teaserSize \'["100"]\' \'[" md:-pt-5 md:border-none"]\'}}{{/if~}}">{{else}}<ul class="mx-5 divide-y divide-white divide-solid border-t border-white {{~#if ../this.showGenreImage}}{{~inline-switch ../this.teaserSize \'["100"]\' \'[" md:-pt-5 md:border-none"]\'}}{{/if~}}">{{/if}}\n {{~#each this~}}\n <li class="{{~#if ../../this.isOrdered}} -ordered {{/if}} py-5 {{#if ../../this.overviewLink.link}} last-of-type:pb-0{{/if~}} {{~#if ../../this.showGenreImage}}{{~inline-switch ../../this.teaserSize \'["100"]\' \'[" md:first-of-type:pt-0"]\'}}{{/if~}}">\n {{> components/teaser/cluster/teaser_cluster_item _size=../this.teaserSize _ordered=../../this.isOrdered }} \n </li>\n {{~/each}}\n {{~#if ../this.isOrdered}}</ol>{{else}}</ul>{{/if~}}\n {{/with~}}\n</div>'
|
|
@@ -68,18 +68,19 @@ module.exports['components/teaser/components/teaser_topline.hbs'] = '<span\n
|
|
|
68
68
|
module.exports['components/teaser/content_nav/teaser_content_nav.hbs'] = '<div id="{{nextRandom}}"\n x-ignore\n ax-load\n ax-load-src={{resourceUrl "assets/js/vendor/content_nav.alpine.js"}}\n x-data="contentNavigationHandler()"\n class="js-contentNavWrapper col-span-12 flex gap-y-3 gap-x-4 js-load {{inline-switch this.teasersize \'["100","66","50","33","25"]\' \'["flex-col","md:col-span-9 md:flex-row ","md:col-span-6 md:flex-row "," md:col-span-4 md:flex-row "," md:col-span-3 md:flex-row "]\'}}"\n>\n {{> components/content_nav/content_nav _teasersize=this.teasersize }} \n</div>'
|
|
69
69
|
module.exports['components/teaser/group_teaser/group_teaser.hbs'] = '{{#>components/grid/grid_group size=this.teaserSize _backgroundColor=this.backgroundColor }} \n {{~#if this.hasGroupTitle}}\n <h2 class="text-2xl md:text-4xl col-span-full py-0 font-headingSerif {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">\n {{~#if this.hasLink}}<a class="no-underline hover:underline decoration-1 md:decoration-2 text-blue-science" href="{{this.link.url}}">{{/if~}}\n {{this.groupTitle}}\n {{~#if this.hasLink}}</a>{{/if~}}\n </h2>\n {{/if}} \n {{~> components/teaser/teaser_logic/teaser_logic ~}}\n{{/components/grid/grid_group}}'
|
|
70
70
|
module.exports['components/teaser/group_teaser/group_teaser_accented.hbs'] = '{{#>components/grid/grid_group size=this.teaserSize _backgroundColor=this.backgroundColor }}\n \n <div class="h-auto col-span-12 p-8 mx-4 rounded-tr-none rounded-bl-none bg-blue-accented rounded-3xl">\n\n {{~#if this.hasGroupTitle}}\n <h2 class="text-2xl md:text-4xl col-span-full py-0 font-headingSerif {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">\n {{~#if this.hasLink}}<a class="no-underline hover:underline decoration-1 md:decoration-2 text-blue-science" href="{{this.link.url}}">{{/if~}}\n {{this.groupTitle}}\n {{~#if this.hasLink}}</a>{{/if~}}\n </h2>\n {{/if}}\n\n </div>\n <div class="h-24 col-span-12 p-2 mx-4 my-0 -mt-10 rounded-tr-none rounded-bl-none md:p-4 bg-blue-accented rounded-3xl">\n \n {{~> components/teaser/teaser_logic/teaser_logic ~}}\n \n </div>\n \n{{/components/grid/grid_group}}'
|
|
71
|
-
module.exports['components/teaser/
|
|
72
|
-
module.exports['components/teaser/
|
|
73
|
-
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 mx-0 col-full md:pt-7 bg-blue-accented md:rounded-tl-3xl md:rounded-br-3xl md: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-toplineColor border-white hover:border-toplineColor\'" \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">'
|
|
74
|
-
module.exports['components/teaser/podcast/podcast-playlist.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_playlist_player _linkTitle="true" _isSinglePage=false _type="podcastPlaylistPlayerTeaser" }}\n </div>'
|
|
75
|
-
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>'
|
|
71
|
+
module.exports['components/teaser/podcast/podcast-playlist.hbs'] = '<div class="grid grid-cols-12 pt-5 mx-0 md:pt-5 bg-blue-accented rounded-tl-3xl rounded-br-3xl col-main gap-x-6 gap-y-6" >\n {{> components/teaser/podcast/podcast_playlist_player _linkTitle="true" _isSinglePage=false _type="podcastPlaylistPlayerTeaser" }}\n </div>'
|
|
72
|
+
module.exports['components/teaser/podcast/podcast.hbs'] = '<div class="grid grid-cols-12 pt-5 mx-0 md:pt-5 bg-blue-accented 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>'
|
|
76
73
|
module.exports['components/teaser/podcast/podcast_downloadbutton.hbs'] = '<button class="flex {{#if _addClass}} {{_addClass}} {{/if}}">\n <a href="{{_url}}" 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=_iconClass }}\n </a>\n</button>'
|
|
77
74
|
module.exports['components/teaser/podcast/podcast_item_title.hbs'] = '{{#decorator \'components/base/link\' _css="w-full font-heading text-base text-toplineColor line-clamp-4 ..." }} \n <span class="block group-hover:underline text-blue-science {{~ inline-switch _teaserSize \'["100","50"]\'\'[" text-base"," text-base"]\' ~}}">\n {{~_title~}}\n </span>\n{{/decorator}}'
|
|
78
|
-
module.exports['components/teaser/podcast/podcast_playbutton.hbs'] = '<button id="button{{_id}}" x-
|
|
79
|
-
module.exports['components/teaser/podcast/podcast_player.hbs'] = '<div class="flex col-span-12"> \n <div class="flex flex-col grow">\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 grow"> \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 --}}\n {{> components/teaser/podcast/podcast_downloadbutton \n _addClass="ml-2 pr-2 md:pr-5 "\n _iconClass="h-6 w-6 text-blue-science fill-current"\n _url=this.podcastDownloadUrl }}\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 x-data="playaudio()"\n x-init="listenToGlobalStop()"\n ax-load\n x-ignore\n ax-load-src="/vendor/js/podcast_player.alpine.js">\n {{> components/teaser/podcast/podcast_player_ui _isPlaylistPlayer=false\n _podcastDuration=podcastDuration _id=(nextRandom) }} \n </div>\n \n {{!-- Abo-Dropdown --}}\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-1.5 px-2 py-2 text-white shadow font-heading bg-orange-layout">Abonnieren\n <div x-show="open">\n {{> components/base/image/icon _icon=\'arrow-up\' _addClass="flex self-center w-3 h-3 fill-white" }}\n </div>\n <div x-show="!open">\n {{> components/base/image/icon _icon=\'arrow-down\' _addClass="flex self-center mt-0.5 w-3 h-3 fill-white" }}\n </div>\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 shadow-md font-heading shadow-insetfromtop grow bg-orange-layout"\n >\n {{#with this.podcastHoster}}\n <ul>\n {{#each this}}\n <li class="border-b last:border-0"> \n <a class="flex items-center w-full gap-2 py-2 text-left hover:underline disabled:text-gray-500"\n title="{{this.podcastHosterName}}" \n target="_blank"\n rel="noopener noreferrer"\n href="{{this.podcastHosterUrl}}">{{this.podcastHosterName}}</a>\n </li>\n {{/each}}\n </ul>\n {{/with}}\n \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 font-heading 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}}
|
|
80
|
-
module.exports['components/teaser/podcast/podcast_player_ui.hbs'] = '<div class="flex w-full"> \n <div class="flex flex-wrap w-full js-load" \n >\n
|
|
81
|
-
module.exports['components/teaser/podcast/podcast_playlist_player.hbs'] = '<div class="flex col-span-12 pb-5 border-b border-white" >\n <div class="flex flex-col grow">\n {{!-- First Row --}}\n <div class="flex flex-row px-5 md:pl-5 {{#if ../_ordered}} pl-8 {{/if}} ">\n\n <div class="flex flex-col pr-5 grow">\n\n <div class="flex max-h-6">\n {{!-- Label / Airdate --}}\n {{#with label}} \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 {{/with}}\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 {{!-- Shorttext --}}\n {{#unless _isSinglePage}}\n {{#unless this.hideShortText}}\n {{~#with this.shorttext}}\n <div class="hidden pb-6 text-sm md:flex md:text-base font-copy">\n <span class="c-teaser__shorttext"> {{this}} </span>\n </div>\n {{/with~}}\n {{/unless}}\n {{/unless}}\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"\n _noDelay=this.dontLazyload \n _addClassImg="w-full h-24 md:h-42 block"\n }}\n </div>\n </div>\n\n </div>\n \n <div class="flex flex-row px-5 md:pr-0">\n\n {{!-- Abo-Dropdown --}}\n {{#with this.podcastChannel}} \n
|
|
75
|
+
module.exports['components/teaser/podcast/podcast_playbutton.hbs'] = '<button id="button{{_id}}" x-on:keydown.tab="{{_alpineClick}}" x-on:click.stop="{{_alpineClick}}" type="button" class="flex justify-start cursor-pointer group focus:outline-none {{_css}}"> \n <div class="text-white rounded-full js-playbutton bg-blue-science ring-white ring">\n {{> components/base/image/icon _icon="play-wide" _iconmap="icons" _addClass="inline w-12 h-12 fill-current"}}\n </div>\n <div class="hidden bg-white rounded-full js-pausebutton 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</button>'
|
|
76
|
+
module.exports['components/teaser/podcast/podcast_player.hbs'] = '<div class="flex col-span-12"> \n <div class="flex flex-col grow">\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 grow"> \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 --}}\n {{> components/teaser/podcast/podcast_downloadbutton \n _addClass="ml-2 pr-2 md:pr-5 "\n _iconClass="h-6 w-6 text-blue-science fill-current"\n _url=this.podcastDownloadUrl }}\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 x-data="playaudio()"\n x-init="listenToGlobalStop()"\n ax-load\n x-ignore\n ax-load-src="/vendor/js/podcast_player.alpine.js">\n {{> components/teaser/podcast/podcast_player_ui \n _isPlaylistPlayer=false\n _podcastDuration=podcastDuration _id=(nextRandom) \n _first=true\n }} \n </div>\n \n {{!-- Abo-Dropdown --}}\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-1.5 px-2 py-2 text-white shadow font-heading bg-orange-layout">Abonnieren\n <div x-show="open">\n {{> components/base/image/icon _icon=\'arrow-up\' _addClass="flex self-center w-3 h-3 fill-white" }}\n </div>\n <div x-show="!open">\n {{> components/base/image/icon _icon=\'arrow-down\' _addClass="flex self-center mt-0.5 w-3 h-3 fill-white" }}\n </div>\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 shadow-md font-heading shadow-insetfromtop grow bg-orange-layout"\n >\n {{#with this.podcastHoster}}\n <ul>\n {{#each this}}\n <li class="border-b last:border-0"> \n <a class="flex items-center w-full gap-2 py-2 text-left hover:underline disabled:text-gray-500"\n title="{{this.podcastHosterName}}" \n target="_blank"\n rel="noopener noreferrer"\n href="{{this.podcastHosterUrl}}">{{this.podcastHosterName}}</a>\n </li>\n {{/each}}\n </ul>\n {{/with}}\n \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 font-heading 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}}'
|
|
77
|
+
module.exports['components/teaser/podcast/podcast_player_ui.hbs'] = '<div class="flex w-full"> \n <div class="flex flex-wrap w-full js-load" \n >\n <div class="flex {{#if _isPlaylistPlayer}}items-start{{else}}items-center{{/if}} w-full flex-nowrap">\n\n {{!-- Start/StopButton --}}\n <div id="playbutton{{_id}}" class="flex">\n {{> components/teaser/podcast/podcast_playbutton \n _css="mr-4" \n _id = _id\n _alpineClick=(loca "play_button_alpine_click" _id) }}\n </div>\n\n <div class="flex flex-wrap items-start w-full -mt-0.5">\n {{#if _isPlaylistPlayer}} \n <div class="flex w-full">\n {{!-- Airdate --}}\n {{~#with this.airdateDate}}\n <div class="flex text-xs grow font-headingSerif text-blue-science">\n <time datetime="{{this.htmlDateTime}}">{{this.date}}</time>\n </div>\n {{/with}}\n\n {{!-- Download --}}\n <div class="flex self-end">\n {{> components/teaser/podcast/podcast_downloadbutton \n _addClass="ml-2"\n _iconClass="h-6 w-6 text-blue-science fill-current"\n _url=this.podcastDownloadUrl \n }}\n </div>\n </div>\n\n <div class="flex -mt-2 w-fit max-w-3/4 "> \n {{> components/teaser/podcast/podcast_item_title \n _title=this.title \n _teaserSize=this.teaserSize \n _addClass="" }} \n </div> \n {{/if}}\n\n {{!-- Range Slider --}}\n <div class="flex w-full transition-all overflow-hidden {{#if _first}}max-h-9{{else}}max-h-0{{/if}}">\n <input \n {{#unless @first}}x-cloak{{/unless}}\n x-ref="range" \n id="range{{_id}}" \n x-on:input="rangeInput({{_id}})" \n type="range" {{!-- x-bind:value="currentTimePercentage" --}} \n min="0" \n max="1000"\n value="0"\n class="h-1 my-4 bg-white rounded-lg appearance-none cursor-pointer grow seek_slider" > \n </div>\n\n {{#if _isPlaylistPlayer}}\n {{!-- Meta Time usw. --}}\n <div x-init="setTime( \'{{_podcastDuration}}\', \'{{_id}}\' ); " class="flex w-full"> \n {{> components/teaser/podcast/podcast_timedisplay \n _id=_id\n _currentTimeClasses="font-bold text-orange-layout" \n _durationClasses="text-blue-science" \n _containerCss="flex text-xs grow font-headingSerif" }}\n </div>\n {{/if}}\n </div>\n </div>\n \n {{#unless _isPlaylistPlayer}}\n {{!-- Meta Time usw. --}}\n <div x-init="setTime( \'{{_podcastDuration}}\', \'{{_id}}\' ); " >\n {{> components/teaser/podcast/podcast_timedisplay \n _duration=podcastDuration \n _currentTimeClasses="font-bold text-orange-layout" \n _durationClasses="text-blue-science" \n _containerCss="pl-16 -mt-3 flex text-xs grow font-headingSerif"}}\n </div>\n {{/unless}}\n \n {{!-- AudioElement --}}\n {{~#with this.audioUrl ~}}\n <audio \n class="{{../_id}} hidden" \n data-id="{{../_id}}"\n x-init="registerPlayer(\'{{../_podcastDuration}}\',\'{{../_id}}\')"\n @stopotherplayers.window="stopAllOtherPlayers({{../_id}})">\n <source src={{this}} type=\'audio/mp3\'/>\n \n </audio>\n {{/with}}\n </div>\n</div>'
|
|
78
|
+
module.exports['components/teaser/podcast/podcast_playlist_player.hbs'] = '<div class="flex col-span-12 pb-5 border-b border-white" >\n <div class="flex flex-col grow">\n {{!-- First Row --}}\n <div class="flex flex-row px-5 md:pl-5 {{#if ../_ordered}} pl-8 {{/if}} ">\n\n <div class="flex flex-col pr-5 grow">\n\n <div class="flex max-h-6">\n {{!-- Label / Airdate --}}\n {{#with label}} \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 {{/with}}\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 {{!-- Shorttext --}}\n {{#unless _isSinglePage}}\n {{#unless this.hideShortText}}\n {{~#with this.shorttext}}\n <div class="hidden pb-6 text-sm md:flex md:text-base font-copy">\n <span class="c-teaser__shorttext"> {{this}} </span>\n </div>\n {{/with~}}\n {{/unless}}\n {{/unless}}\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"\n _noDelay=this.dontLazyload \n _addClassImg="w-full h-24 md:h-42 block"\n }}\n </div>\n </div>\n\n </div>\n \n <div class="flex flex-row px-5 md:pr-0">\n\n {{!-- Abo-Dropdown --}}\n {{#with this.podcastChannel}} \n {{> components/teaser/podcast/podcast_subscribe_button}}\n {{/with}}\n\n </div>\n \n </div> \n</div>\n\n {{!-- Player UI --}}\n <div class="flex flex-col col-span-12 gap-5 px-5" \n x-data="playaudio()"\n x-init="listenToGlobalStop()"\n ax-load\n x-ignore\n ax-load-src="/vendor/js/podcast_player.alpine.js">\n {{#with this.playlistItems}}\n {{#each this}}\n <div class="flex pb-5 border-b {{#unless @last}}border-white{{/unless}}" >\n {{> components/teaser/podcast/podcast_player_ui \n _isPlaylistPlayer=true\n _podcastDuration=podcastDuration\n _title=title\n _id=(nextRandom)\n _first=@first\n }}\n </div>\n {{/each}}\n {{/with}} \n </div>\n</div>'
|
|
79
|
+
module.exports['components/teaser/podcast/podcast_subscribe_button.hbs'] = '<div class="flex">\n {{!-- Container --}}\n <div 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-1.5 px-2 py-2 text-white shadow font-heading bg-orange-layout">Abonnieren\n <div x-cloak x-show="open" class="w-3 h-3">\n {{> components/base/image/icon _icon=\'arrow-up\' _addClass="flex self-center w-3 h-3 fill-white" }}\n </div>\n <div x-show="!open" class="w-3 h-3">\n {{> components/base/image/icon _icon=\'arrow-down\' _addClass="flex self-center w-3 h-3 fill-white" }}\n </div>\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 shadow-md font-heading shadow-insetfromtop grow bg-orange-layout"\n >\n {{~#with this.podcastHoster~}}\n <ul>\n {{~#each this~}}\n <li class="border-b last:border-0"> \n <a class="flex items-center w-full gap-2 py-2 text-left hover:underline disabled:text-gray-500"\n title="{{this.podcastHosterName}}" \n target="_blank"\n rel="noopener noreferrer"\n href="{{this.podcastHosterUrl}}">{{this.podcastHosterName}}</a>\n </li>\n {{~/each~}}\n </ul>\n {{~/with~}}\n \n </div>\n </div>\n</div>'
|
|
82
80
|
module.exports['components/teaser/podcast/podcast_timedisplay.hbs'] = '<div id="timedisplay{{_id}}" class="{{_containerCss}}">\n <span class="{{_currentTimeClasses}} " id="currentTime" >00:00</span>\n <span class="{{_durationClasses}} px-0.5"> / </span>\n <span class="{{_durationClasses}}" id="audioDurationFancy"> </span>\n</div>'
|
|
83
81
|
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}}'
|
|
82
|
+
module.exports['components/teaser/stage/stage_text.hbs'] = '<div class="absolute left-2/4 right-auto bottom-15 lg:bottom-10 flex w-full px-5 sm:px-11.5 -translate-x-2/4 {{inline-switch this.stageTextPosition \'["right50"]\' \'[" justify-end"," justify-start"]\'}}">\n <div class="p-4 rounded-2xl bg-stageTextBox opacity-85{{inline-switch this.stageTextPosition \'["left100"]\' \'[" w-full"," max-w-xs sm:w-fit md:max-w-2/4"]\'}} ">\n {{#decorator \'components/base/link\'}}\n {{> components/teaser/components/teaser_heading _titleCss="text-stageText" _toplineCss="text-stageText" _labelCss="text-stageText" _title=this.title _label=this.label _topline=this.topline _headlineTag="h2" _size="100" _teaserType="stage" _fontVariant="sans-serif"}}\n {{#if this.showProfileInfoAsByline}}\n <p class="text-stageText font-headingSerif block my-3">{{this.profiles}}</p>\n {{/if}}\n {{#if this.showShorttext}}\n <p class="hidden sm:block text-stageText">{{this.shorttext}}</p>\n {{#if this.link.hasIcon}}\n <span class="flex items-end space-around hover:underline decoration-1 text-stageLink">[{{this.link.readMoreText.readMore}}\n {{> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="w-5 h-5 fill-current ml-1" }}]\n </span>\n {{/if}}\n {{/if}}\n {{#with this.eventtags}}\n {{#with this.series}}\n <span class="hidden font-heading text-stageText text-2xl font-normal leading-6 tracking-wide mt-2.5 -mb-1 sm:block">{{this.title}}</span>\n {{/with}}\n {{#with this.project}}\n <span class="hidden font-heading text-stageText text-2xl font-normal leading-6 tracking-wide mt-2.5 -mb-1 sm:block">{{this.title}}</span>\n {{/with}}\n {{#with this.externalProject}}\n <span class="hidden font-heading text-stageText text-2xl font-normal leading-6 tracking-wide mt-2.5 -mb-1 sm:block">{{this}}</span>\n {{/with}}\n {{/with}}\n {{#with this.location}}\n {{> components/base/loadSSI this.stageLocationSsi _templatePath=\'components/event/stage_location.ssi\' }} \n {{/with}}\n {{#if this.link.hasIcon}}\n <span class="block mt-4 hover:underline text-stageLink {{if this.showShorttext \'hidden\'}}">[{{this.link.readMoreText.readMore}}\n {{> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="inline w-5 h-5 fill-current ml-1" }}]\n </span>\n {{/if}}\n {{/decorator}}\n </div>\n</div>'
|
|
83
|
+
module.exports['components/teaser/tabbox/group_tabbox.hbs'] = '<section \n x-show="tab === \'{{this.groupTitle}}\'"\n class="pb-10"\n>\n {{~#if this.hasGroupTitle~}}\n <h3 class="sr-only">\n <a class="" href="#tgp{{this.teaserIndex}}">\n <span class="">{{this.groupTitle}}</span>\n <span class="">\n {{> components/base/image/icon _icon="arrow-down" _iconmap="icons" _addClass="w-3 h-2 fill-current"}}\n {{> components/base/image/icon _icon="arrow-up" _iconmap="icons" _addClass="w-3 h-2 fill-current"}}\n </span>\n </a>\n </h3>\n {{~/if~}}\n\n <a class="w-0" name="tgp{{this.teaserIndex}}"></a>\n <div class="grid content-start grid-cols-12 px-0 md:px-8 colspan-12 gap-x-6 gap-y-6">\n {{~> components/teaser/teaser_logic/teaser_logic ~}}\n </div>\n {{~#if this.link~}}\n <div class="flex justify-center pt-8">\n {{~> components/button/button_pseudo _linkTitle=(loca "group_tabbed_more" this.title) ~}}\n </div>\n {{~/if~}}\n</section>'
|
|
84
|
+
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 mx-0 col-full md:pt-7 bg-blue-accented md:rounded-tl-3xl md:rounded-br-3xl md: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-toplineColor border-white hover:border-toplineColor\'" \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">'
|
|
84
85
|
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~}}'
|
|
85
86
|
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 {{~#with this.cacheKey~}}\n {{~addCacheEntry this ~}}\n {{~/with~}}\n {{~> (lookup ../. \'includePath\')~}}\n {{~/if~}}\n {{~/with~}}\n{{~/with~}}'
|
package/dist/assets/index.css
CHANGED
|
@@ -585,6 +585,29 @@ video {
|
|
|
585
585
|
margin: 3px 20px 0 0;
|
|
586
586
|
}
|
|
587
587
|
}
|
|
588
|
+
/* PODCAST SEEK SLIDER*/
|
|
589
|
+
.seek_slider::-webkit-slider-thumb{
|
|
590
|
+
-webkit-appearance: none;
|
|
591
|
+
-moz-appearance: none;
|
|
592
|
+
appearance: none;
|
|
593
|
+
width: 16px;
|
|
594
|
+
height: 16px;
|
|
595
|
+
background: #F07800;
|
|
596
|
+
border: 2px solid white;
|
|
597
|
+
cursor: pointer;
|
|
598
|
+
border-radius: 50%;
|
|
599
|
+
}
|
|
600
|
+
.seek_slider::-moz-range-thumb{
|
|
601
|
+
-webkit-appearance: none;
|
|
602
|
+
-moz-appearance: none;
|
|
603
|
+
appearance: none;
|
|
604
|
+
width: 12px;
|
|
605
|
+
height: 12px;
|
|
606
|
+
background: #F07800;
|
|
607
|
+
border: 2px solid white;
|
|
608
|
+
cursor: pointer;
|
|
609
|
+
border-radius: 50%;
|
|
610
|
+
}
|
|
588
611
|
.sr-only {
|
|
589
612
|
position: absolute;
|
|
590
613
|
width: 1px;
|
|
@@ -985,6 +1008,9 @@ video {
|
|
|
985
1008
|
.max-h-6 {
|
|
986
1009
|
max-height: 1.5rem;
|
|
987
1010
|
}
|
|
1011
|
+
.max-h-9 {
|
|
1012
|
+
max-height: 2.25rem;
|
|
1013
|
+
}
|
|
988
1014
|
.w-16 {
|
|
989
1015
|
width: 4rem;
|
|
990
1016
|
}
|
|
@@ -1479,7 +1505,7 @@ video {
|
|
|
1479
1505
|
}
|
|
1480
1506
|
.bg-blue-accented {
|
|
1481
1507
|
--tw-bg-opacity: 1;
|
|
1482
|
-
background-color: rgba(
|
|
1508
|
+
background-color: rgba(234, 243, 250, var(--tw-bg-opacity));
|
|
1483
1509
|
}
|
|
1484
1510
|
.bg-geoTag {
|
|
1485
1511
|
background-color: #E5F2F3;
|
|
@@ -1552,10 +1578,6 @@ video {
|
|
|
1552
1578
|
--tw-bg-opacity: 1;
|
|
1553
1579
|
background-color: rgba(229, 229, 229, var(--tw-bg-opacity));
|
|
1554
1580
|
}
|
|
1555
|
-
.bg-\[\#dce8f0\] {
|
|
1556
|
-
--tw-bg-opacity: 1;
|
|
1557
|
-
background-color: rgba(220, 232, 240, var(--tw-bg-opacity));
|
|
1558
|
-
}
|
|
1559
1581
|
.bg-blue-science {
|
|
1560
1582
|
--tw-bg-opacity: 1;
|
|
1561
1583
|
background-color: rgba(0, 109, 193, var(--tw-bg-opacity));
|
|
@@ -2222,7 +2244,7 @@ video {
|
|
|
2222
2244
|
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
|
|
2223
2245
|
}
|
|
2224
2246
|
.counter-reset {
|
|
2225
|
-
counter-reset:
|
|
2247
|
+
counter-reset: cnt1668703529954;
|
|
2226
2248
|
}
|
|
2227
2249
|
.line-clamp-4 {
|
|
2228
2250
|
overflow: hidden;
|
|
@@ -2611,7 +2633,7 @@ video {
|
|
|
2611
2633
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
2612
2634
|
}
|
|
2613
2635
|
.-ordered {
|
|
2614
|
-
counter-increment:
|
|
2636
|
+
counter-increment: cnt1668703529954 1;
|
|
2615
2637
|
}
|
|
2616
2638
|
.-ordered::before {
|
|
2617
2639
|
position: absolute;
|
|
@@ -2627,7 +2649,7 @@ video {
|
|
|
2627
2649
|
letter-spacing: .0125em;
|
|
2628
2650
|
--tw-text-opacity: 1;
|
|
2629
2651
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
2630
|
-
content: counter(
|
|
2652
|
+
content: counter(cnt1668703529954);
|
|
2631
2653
|
}
|
|
2632
2654
|
.\[-T\:\+Z\] {
|
|
2633
2655
|
--t: +Z;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
export default function playaudio(){
|
|
2
2
|
return {
|
|
3
|
-
audioDuration: 0,
|
|
4
3
|
playerCount: 0,
|
|
5
4
|
playlist: {},
|
|
6
5
|
registerPlayer(duration,id){
|
|
@@ -15,7 +14,7 @@ export default function playaudio(){
|
|
|
15
14
|
_player.currentlyPlaying = false
|
|
16
15
|
_player.init = false
|
|
17
16
|
|
|
18
|
-
|
|
17
|
+
// this.playerCount == 0 ? _player.range.parentNode.classList.remove('hidden') : _player.range.parentNode.classList.add('hidden')
|
|
19
18
|
this.playerCount++
|
|
20
19
|
|
|
21
20
|
this.playlist[id] = _player
|
|
@@ -23,14 +22,14 @@ export default function playaudio(){
|
|
|
23
22
|
},
|
|
24
23
|
listenToGlobalStop(){
|
|
25
24
|
console.log('global listener init')
|
|
26
|
-
window.addEventListener('hr:global:stopOtherAVs',
|
|
25
|
+
window.addEventListener('hr:global:stopOtherAVs', this.stopAllOtherPlayers)
|
|
27
26
|
},
|
|
28
27
|
rangeInput(id) {
|
|
29
28
|
if(this.playlist[id].init == false) {
|
|
30
29
|
this.playAndStop(id)
|
|
31
30
|
this.playAndStop(id)
|
|
32
31
|
}
|
|
33
|
-
this.playlist[id].audioElement.currentTime = (this.playlist[id].range.value/1000) * this.
|
|
32
|
+
this.playlist[id].audioElement.currentTime = (this.playlist[id].range.value/1000) * this.playlist[id].audioElement.duration
|
|
34
33
|
},
|
|
35
34
|
|
|
36
35
|
setTime(duration, id) {
|
|
@@ -48,8 +47,6 @@ export default function playaudio(){
|
|
|
48
47
|
var durationSeconds = (hours * 3600 + minutes * 60 + seconds).toFixed(3);
|
|
49
48
|
}
|
|
50
49
|
|
|
51
|
-
this.audioDuration = durationSeconds;
|
|
52
|
-
|
|
53
50
|
let range = document.getElementById("range"+id)
|
|
54
51
|
range.value = 0
|
|
55
52
|
this.$el.querySelector('#currentTime').innerHTML = this.fancyTimeFormat('0',false)
|
|
@@ -57,46 +54,51 @@ export default function playaudio(){
|
|
|
57
54
|
|
|
58
55
|
},
|
|
59
56
|
|
|
60
|
-
updateCurrentTime(range,timeDisplay,newTime) {
|
|
57
|
+
updateCurrentTime(range,timeDisplay,newTime, id) {
|
|
58
|
+
|
|
61
59
|
timeDisplay.querySelector('#currentTime').innerHTML = this.fancyTimeFormat(newTime, false)
|
|
62
|
-
range.style.background = 'linear-gradient(to right, #006dc1 ' + range.value/10
|
|
63
|
-
range.value = ((100 * newTime) / this.
|
|
60
|
+
range.style.background = 'linear-gradient(to right, #006dc1 ' + (range.value/10) + '%, white ' + (range.value/10) + '% )'
|
|
61
|
+
range.value = ((100 * newTime) / this.playlist[id].audioElement.duration) * 10
|
|
64
62
|
},
|
|
65
63
|
|
|
66
64
|
playAndStop(id) {
|
|
67
65
|
console.log('event target: ' + this.$event.currentTarget.id)
|
|
66
|
+
console.log('playlist: ', this.playlist)
|
|
68
67
|
if(this.playlist[id].init == true){
|
|
69
68
|
this.stopAudio(id)
|
|
70
|
-
this.playlist[id].button.querySelector('.js-playbutton').classList.remove('hidden')
|
|
71
|
-
this.playlist[id].button.querySelector('.js-pausebutton').classList.add('hidden')
|
|
72
69
|
} else {
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
this.
|
|
70
|
+
// this.$dispatch('stopotherplayers',{playerId: id});
|
|
71
|
+
this.stopAllOtherPlayers(id)
|
|
72
|
+
|
|
73
|
+
this.startAudio(id)
|
|
74
|
+
this.playlist[id].range.parentNode.classList.remove('max-h-0')
|
|
75
|
+
this.playlist[id].range.parentNode.classList.add('max-h-9')
|
|
77
76
|
this.playlist[id].button.querySelector('.js-playbutton').classList.add('hidden')
|
|
78
77
|
this.playlist[id].button.querySelector('.js-pausebutton').classList.remove('hidden')
|
|
78
|
+
//let event = new Event("hr:global:stopOtherAVs");
|
|
79
|
+
//window.dispatchEvent(event);
|
|
79
80
|
}
|
|
80
81
|
},
|
|
81
82
|
|
|
82
|
-
stopAllOtherPlayers(id){
|
|
83
|
+
stopAllOtherPlayers(id){ //id=2
|
|
83
84
|
let players = document.querySelectorAll('audio.hidden')
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
85
|
+
for (let i=0; i<players.length; i++){
|
|
86
|
+
if ( players[i].dataset.id != id){
|
|
87
|
+
this.stopAudio(players[i].dataset.id)
|
|
88
|
+
|
|
89
|
+
// this.playlist[players[i].dataset.id].init=false;
|
|
90
|
+
// this.playlist[players[i].dataset.id].audioElement.pause()
|
|
91
|
+
// this.playlist[players[i].dataset.id].button.querySelector('.js-playbutton').classList.remove('hidden')
|
|
92
|
+
// this.playlist[players[i].dataset.id].button.querySelector('.js-pausebutton').classList.add('hidden')
|
|
93
|
+
this.playlist[players[i].dataset.id].range.parentNode.classList.add('max-h-0')
|
|
94
|
+
this.playlist[players[i].dataset.id].range.parentNode.classList.remove('max-h-9')
|
|
92
95
|
}
|
|
93
|
-
|
|
96
|
+
}
|
|
94
97
|
},
|
|
95
98
|
|
|
96
|
-
startAudio(id
|
|
97
|
-
console.log('start audio '+ id
|
|
99
|
+
startAudio(id) {
|
|
100
|
+
console.log('start audio '+ id )
|
|
98
101
|
if(this.playlist[id].init == false){
|
|
99
|
-
this.audioDuration = duration;
|
|
100
102
|
this.initAudioEventListener(id)
|
|
101
103
|
this.playlist[id].init = true;
|
|
102
104
|
|
|
@@ -105,11 +107,12 @@ export default function playaudio(){
|
|
|
105
107
|
this.playlist[id].currentlyPlaying = true;
|
|
106
108
|
},
|
|
107
109
|
|
|
108
|
-
stopAudio(id) {
|
|
109
|
-
console.log('stop audio '+ id)
|
|
110
|
+
stopAudio(id) {
|
|
110
111
|
this.playlist[id].audioElement.pause()
|
|
111
112
|
this.playlist[id].init = false;
|
|
112
|
-
this.playlist[id].currentlyPlaying = false;
|
|
113
|
+
this.playlist[id].currentlyPlaying = false;
|
|
114
|
+
this.playlist[id].button.querySelector('.js-playbutton').classList.remove('hidden')
|
|
115
|
+
this.playlist[id].button.querySelector('.js-pausebutton').classList.add('hidden')
|
|
113
116
|
},
|
|
114
117
|
|
|
115
118
|
initAudioEventListener(id) {
|
|
@@ -117,7 +120,7 @@ export default function playaudio(){
|
|
|
117
120
|
let _range = this.playlist[id].range
|
|
118
121
|
let _timeDisplay = this.playlist[id].timeDisplay
|
|
119
122
|
_audioElement.ontimeupdate = (event) => {
|
|
120
|
-
this.updateCurrentTime(_range, _timeDisplay, _audioElement.currentTime)
|
|
123
|
+
this.updateCurrentTime(_range, _timeDisplay, _audioElement.currentTime, id)
|
|
121
124
|
};
|
|
122
125
|
},
|
|
123
126
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<article class="mx-5 md:mx-0 col-span-12 grid bg-
|
|
1
|
+
<article class="mx-5 md:mx-0 col-span-12 grid bg-blue-accented 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",""]'}} ">
|
|
2
2
|
<div class="">
|
|
3
3
|
<h2 class="flex items-center px-5 py-6 font-bold font-headingSerif text-blue-congress">
|
|
4
4
|
{{#if this.teaserLogo}}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<div class="grid grid-cols-12 pt-5 md:pt-5 bg-
|
|
1
|
+
<div class="grid grid-cols-12 pt-5 mx-0 md:pt-5 bg-blue-accented rounded-tl-3xl rounded-br-3xl col-main gap-x-6 gap-y-6" >
|
|
2
2
|
{{> components/teaser/podcast/podcast_playlist_player _linkTitle="true" _isSinglePage=false _type="podcastPlaylistPlayerTeaser" }}
|
|
3
3
|
</div>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<div class="grid grid-cols-12 pt-5 md:pt-5 bg-
|
|
1
|
+
<div class="grid grid-cols-12 pt-5 mx-0 md:pt-5 bg-blue-accented rounded-tl-3xl rounded-br-3xl col-main gap-x-6 gap-y-6" >
|
|
2
2
|
{{> components/teaser/podcast/podcast_player _linkTitle="true" _isSinglePage=true _type="podcastEpisodePlayerTeaser" }}
|
|
3
3
|
</div>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<button id="button{{_id}}" x-
|
|
1
|
+
<button id="button{{_id}}" x-on:keydown.tab="{{_alpineClick}}" x-on:click.stop="{{_alpineClick}}" type="button" class="flex justify-start cursor-pointer group focus:outline-none {{_css}}">
|
|
2
2
|
<div class="text-white rounded-full js-playbutton bg-blue-science ring-white ring">
|
|
3
3
|
{{> components/base/image/icon _icon="play-wide" _iconmap="icons" _addClass="inline w-12 h-12 fill-current"}}
|
|
4
4
|
</div>
|