hr-design-system-handlebars 1.114.69 → 1.114.71

package/src/stories/views/components/content/copytext/components/gallery/galleryitem_description_copytext.hbs

@@ -0,0 +1,18 @@
+<figcaption class="gallery-slider__caption">
+    {{~#> components/content/copytext/components/image/caption _isFullTextVisible=true  _cssClassCaption=_cssClassCaption~}}
+        <span class="block font-bold">{{loca "gallery_image_number"}} {{this.number}}/{{this.totalNumber}} {{~#with this.title}} <span class="mx-1.5">|</span>{{this}}{{/with~}}</span>
+        {{#if this.caption}} {{~> components/content/copytext/components/image/image_caption_text~}} {{/if}}
+        {{~> components/content/copytext/components/image/image_copyright~}}
+        <span class="mx-1.5">|</span>
+        {{~#with _mediaBacklinkToStoryTeaser-adjust_context~}}
+            {{~#>components/base/link _link=this.link _css="hover:underline hover:!decoration-1 text-link dark:text-link-dark"~}}
+                <span>
+                    {{~this.readMore~}}
+                    {{~#if this.hasIcon}}
+                        {{~> components/base/image/icon _icon=this.iconName _iconmap="icons" _addClass="inline -mt-0.5 ml-1 w-5 h-5 fill-current"~}}
+                    {{~/if~}}
+                </span>
+            {{~/components/base/link~}}
+        {{~/with~}}
+    {{~/components/content/copytext/components/image/caption~}}
+</figcaption>

package/src/stories/views/components/content/copytext/components/gallery/galleryitem_figure.hbs

@@ -0,0 +1,35 @@
+<figure {{#unless @first}} x-cloak {{/unless}}>
+    <div class="relative ar-16-9 gallery-slider__image animate-duration-500 animate-delay-100 animate-once animate-ease-in-out" 
+        :class="animationEnabled ? (slideToRight ? 'animate-fade-left' : 'animate-fade-right') : ''"
+        {{!-- x-transition:enter="transition ease-out duration-700 delay-75"
+        x-transition:enter-start="opacity-0 transform scale-90"
+        x-transition:enter-end="opacity-100 transform scale-100" --}}>
+        {{~#if this.displayOriginal.isTrue ~}}
+            <div class="relative" aria-hidden="true">
+                {{> components/base/image/responsive_image
+                        _type="gallery"
+                        _variant="default"
+                        _addClass="ar-16-9"
+                        _noDelay=(if @first true '')
+                        _isWebview=true}}
+                <div class="absolute top-0 bottom-0 left-0 right-0 w-full bg-white/80 backdrop-blur-md">
+                </div>
+            </div>
+            {{> components/base/image/responsive_image
+                _type="gallery"
+                _variant="portrait"
+                _addClass="absolute top-0 left-0 right-0 bottom-0"
+                _addClassImg="!w-auto h-full absolute left-1/2 -translate-x-1/2"
+                _noDelay=(if @first true '')
+                _isWebview=true}}
+        {{else}}
+            {{> components/base/image/responsive_image  
+                _type="gallery" 
+                _variant="default" 
+                _addClass="ar-16-9"
+                _noDelay=(if @first true '')
+                _isWebview=true}}
+        {{~/if~}}
+    </div>
+    {{~> components/content/copytext/components/gallery/galleryitem_description_copytext _mediaBacklinkToStoryTeaser=_mediaBacklinkToStoryTeaser _cssClassCaption=_cssClassCaption~}}
+</figure>

package/src/stories/views/components/content/copytext/components/gallery/js/gallerySlider.alpine.js

@@ -0,0 +1,49 @@
+export default function gallerySlider() {
+    return { 
+        slides: [],
+        captions: [],
+        currentSlideIndex: 1,
+        animationEnabled: false,
+        slideToRight: true,
+        touchStartX: null,
+        touchEndX: null,
+        swipeThreshold: 50,
+        previous() {
+            this.animationEnabled = true;
+            this.slideToRight = false;    
+            this.currentSlideIndex = (this.currentSlideIndex - 1 > 0) ? this.currentSlideIndex - 1 : this.slides.length;            
+        },            
+        next() {                
+            if (this.slides.length > 0) {
+                this.animationEnabled = true;
+                this.slideToRight = true;
+                this.currentSlideIndex = (this.currentSlideIndex % this.slides.length) + 1;
+            }
+        },
+        loadSlider() {
+            this.slides = [...document.querySelectorAll('.gallery-slider__image')];
+            this.slides.forEach((slide, index) => slide.setAttribute('x-show', `currentSlideIndex === ${index + 1}`));
+            this.captions = [...document.querySelectorAll('.gallery-slider__caption')];
+            this.captions.forEach((caption, index) => caption.setAttribute('x-show', `currentSlideIndex === ${index + 1}`));
+        },
+        handleTouchStart(event) {
+            this.touchStartX = event.touches[0].clientX
+        },
+        handleTouchMove(event) {
+            this.touchEndX = event.touches[0].clientX
+        },
+        handleTouchEnd() {
+            if(this.touchEndX){
+                if (this.touchStartX - this.touchEndX > this.swipeThreshold) {
+                    this.next()
+                }
+                if (this.touchStartX - this.touchEndX < -this.swipeThreshold) {
+                    this.previous()
+                }
+                this.touchStartX = null
+                this.touchEndX = null
+            }
+        }
+
+    };
+}

package/src/stories/views/components/content/copytext/components/image/caption.hbs

@@ -1,5 +1,5 @@
 <figcaption class="flex items-start mt-3 text-xs sm480:text-sm font-headingSerif {{_cssClassCaption}}">
-    <div  class="dark:text-text-dark overflow-anywhere hyphens-auto line-clamp-2">
+    <div  class="dark:text-text-dark{{#unless _isFullTextVisible}} overflow-anywhere hyphens-auto line-clamp-2{{/unless}}">
         {{> @partial-block }}
     </div>
 </figcaption>

package/src/stories/views/components/content/copytext/components/image/image_caption_text.hbs

@@ -1,3 +1,3 @@
 <span class="pr-3">
-    {{this.caption}} 
+    {{{this.caption}}}
 </span>

package/src/stories/views/components/content/copytext/components/media/media_figure.hbs

@@ -11,7 +11,7 @@
                     {{~> components/content/copytext/components/media/media_figure_byline this}}
                 {{/components/label/label_group}}
             {{/if~}}
-            {{#if this.isVideo}}
+            {{#if _hasHeadline}}
                 {{#with this.toModel.mediaBacklinkToStoryTeaser}}
                     {{#>components/base/link _link=this.link _css="hover:underline hover:!decoration-1 text-link dark:text-link-dark ds-link block"}}
                         {{> components/content/copytext/components/media/media_figure_headline}}
@@ -52,30 +52,35 @@
             {{/if}} 
         {{/with}}
     {{/if}}
+    {{#if this.isGallery}}
+        {{~> components/content/copytext/components/gallery/galleryitem_copytext _cssClassCaption=_cssClassCaption ~}}
+    {{/if}}
     {{#unless _voting-option}}
-        {{#if this.teaseritem}}
-            {{#if this.isAudio}}
-                {{~#> components/content/copytext/components/image/caption this.teaseritem _cssClassCaption=_cssClassCaption~}}
-                    {{~> components/content/copytext/components/image/image_copyright~}}
-                    <span class="mx-1.5">|</span>
-                    {{~#with ../this.toModel.mediaBacklinkToStoryTeaser-adjust_context~}}
-                        {{~#>components/base/link _link=this.link _css="hover:underline hover:!decoration-1 text-link dark:text-link-dark"~}}
-                            <span>
-                                {{~this.readMore~}}
-                                {{~#if this.hasIcon}}
-                                    {{~> components/base/image/icon _icon=this.iconName _iconmap="icons" _addClass="inline -mt-0.5 ml-1 w-5 h-5 fill-current"~}}
-                                {{~/if~}}
-                            </span>
-                        {{~/components/base/link~}}
-                    {{~/with~}}
-                {{~/components/content/copytext/components/image/caption~}}
-            {{else}}
-                {{~#> components/content/copytext/components/image/collapsible_caption this.teaseritem _cssClassCaption=_cssClassCaption~}}
-                    {{#if this.caption}} {{~> components/content/copytext/components/image/image_caption_text~}} {{/if}}
-                    {{~> components/content/copytext/components/image/image_copyright~}}
-                {{~/components/content/copytext/components/image/collapsible_caption~}}
+        {{#unless this.isGallery}}
+            {{#if this.teaseritem}}
+                {{#if this.isAudio}}
+                    {{~#> components/content/copytext/components/image/caption this.teaseritem _cssClassCaption=_cssClassCaption~}}
+                        {{~> components/content/copytext/components/image/image_copyright~}}
+                        <span class="mx-1.5">|</span>
+                        {{~#with ../this.toModel.mediaBacklinkToStoryTeaser-adjust_context~}}
+                            {{~#>components/base/link _link=this.link _css="hover:underline hover:!decoration-1 text-link dark:text-link-dark"~}}
+                                <span>
+                                    {{~this.readMore~}}
+                                    {{~#if this.hasIcon}}
+                                        {{~> components/base/image/icon _icon=this.iconName _iconmap="icons" _addClass="inline -mt-0.5 ml-1 w-5 h-5 fill-current"~}}
+                                    {{~/if~}}
+                                </span>
+                            {{~/components/base/link~}}
+                        {{~/with~}}
+                    {{~/components/content/copytext/components/image/caption~}}
+                {{else}}
+                    {{~#> components/content/copytext/components/image/collapsible_caption this.teaseritem _cssClassCaption=_cssClassCaption~}}
+                        {{#if this.caption}} {{~> components/content/copytext/components/image/image_caption_text~}} {{/if}}
+                        {{~> components/content/copytext/components/image/image_copyright~}}
+                    {{~/components/content/copytext/components/image/collapsible_caption~}}
+                {{/if}}
             {{/if}}
-        {{/if}}
+        {{/unless}}
     {{/unless}}
     {{~> components/base/a11y/hiddenText _locaTag=_a11yOutro-loca ~}}
 </figure>

package/src/stories/views/components/content/copytext/components/video/video.hbs

@@ -1,5 +1,5 @@
 {{#if this.showFullSize.isTrue }}
-    {{> components/content/copytext/components/media/media_figure _playerLocation="Copytext" _isFullsize=true _playerSize="100" _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hrds-copytext-teaser-half]:mt-4 sm:[&+.hrds-copytext-teaser-half]:mt-0 sm:article-narrow sm:my-14" _cssClassCaption=(if _isTickerCopytext "" "mx-5 sm:mx-0" ) _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _hasHeadline=true _playerLocation="Copytext" _isFullsize=true _playerSize="100" _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hrds-copytext-teaser-half]:mt-4 sm:[&+.hrds-copytext-teaser-half]:mt-0 sm:article-narrow sm:my-14" _cssClassCaption=(if _isTickerCopytext "" "mx-5 sm:mx-0" ) _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
 {{else}}
-    {{> components/content/copytext/components/media/media_figure _playerLocation="Copytext" _isFullsize=false _playerSize="50" _addClass="hrds-copytext-teaser-half print:hidden article-full-width sm:article-narrow mt-12 mb-8 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid" _cssClassCaption=(if _isTickerCopytext "" "mx-5 sm:mx-0" ) _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _hasHeadline=true _playerLocation="Copytext" _isFullsize=false _playerSize="50" _addClass="hrds-copytext-teaser-half print:hidden article-full-width sm:article-narrow mt-12 mb-8 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid" _cssClassCaption=(if _isTickerCopytext "" "mx-5 sm:mx-0" ) _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
 {{/if}} 

package/src/stories/views/components/content/copytext/components/videolivestream.hbs

@@ -1,5 +1,5 @@
 {{#if this.showFullSize.isTrue }}
-    {{> components/content/copytext/components/media/media_figure _isFullsize=true _playerLocation="Copytext" _playerSize="100" _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hrds-copytext-teaser-half]:mt-4 sm:[&+.hrds-copytext-teaser-half]:mt-0 sm:article-narrow sm:my-14" _cssClassCaption=(if _isTickerCopytext "" "mx-5 sm:mx-0" ) _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _hasHeadline=true _isFullsize=true _playerLocation="Copytext" _playerSize="100" _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hrds-copytext-teaser-half]:mt-4 sm:[&+.hrds-copytext-teaser-half]:mt-0 sm:article-narrow sm:my-14" _cssClassCaption=(if _isTickerCopytext "" "mx-5 sm:mx-0" ) _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
 {{else}}
-    {{> components/content/copytext/components/media/media_figure _isFullsize=false _playerLocation="Copytext" _playerSize="50" _addClass="hrds-copytext-teaser-half print:hidden article-full-width sm:article-narrow mt-12 mb-8 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid" _cssClassCaption=(if _isTickerCopytext "" "mx-5 sm:mx-0" ) _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _hasHeadline=true _isFullsize=false _playerLocation="Copytext" _playerSize="50" _addClass="hrds-copytext-teaser-half print:hidden article-full-width sm:article-narrow mt-12 mb-8 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid" _cssClassCaption=(if _isTickerCopytext "" "mx-5 sm:mx-0" ) _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
 {{/if}} 

package/src/stories/views/components/content/copytext/copytext.stories.js

@@ -17,6 +17,8 @@ import copytext_video_json from './fixtures/copytext_video.json'
 import copytext_audio_json from './fixtures/copytext_audio.json'
 import copytext_audio_event_stream_json from './fixtures/copytext_audio_livestream.json'
 import copytext_livestream_json from './fixtures/copytext_livestream.json'
+import copytext_gallery_json from './fixtures/copytext_gallery.json'
+import copytext_gallery_portrait_json from './fixtures/copytext_gallery_portrait.json'
 
 const Template = ({ ...args }) => {
     return copytext({ ...args })
@@ -139,6 +141,18 @@ export const WithAudioEventStream = {
     args: copytext_audio_event_stream_json,
 }
 
+export const WithGallery = {
+    render: Template.bind({}),
+    name: 'Bildergalerie',
+    args: copytext_gallery_json,
+}
+
+export const WithGalleryPortrait = {
+    render: Template.bind({}),
+    name: 'Bildergalerie mit Hochkantbildern',
+    args: copytext_gallery_portrait_json,
+}
+
 export const SnapshotWithMedia = {
     render: Template.bind({}),
     name: 'Snapshot 1',

package/src/stories/views/components/content/copytext/copytext_body.hbs

@@ -13,7 +13,7 @@
         {{~> components/content/copytext/components/accordion/accordion ~}}
         {{/if~}}
         {{~#if this.isGallery}}
-            {{> components/content/copytext/components/gallery }}
+            {{> components/content/copytext/components/gallery/gallery _isTickerCopytext=../_isTickerCopytext }}
         {{/if~}}
         {{~#if this.isFileDownload}}
             {{> components/content/copytext/components/filedownload }}

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

@@ -0,0 +1 @@
+{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit Bildergalerie"},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum <em>dolor sit amet</em>, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='hrds-copytext__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"paragraphBoxItem":{"isGallery":true,"toModel":{"galleryPage":{"isGallery":true,"label":{"type":"gallery","loca":"label_gallery","byline":{"bylineText":"5 Bilder"}},"toModel":{"mediaBacklinkToStoryTeaser":{"link":{"url":"/galleryseite","isTargetBlank":false},"readMoreScreenreader":"zur hr3.de Bildergalerie","title":"Bildergalerie title","isForeignBrand":true,"readMore":"zur hr3.de Bildergalerie-Einzelseite","hasIcon":true,"iconName":"extern"}},"gallery":{"items":[{"isImage":true,"showFullSize":{"isTrue":true},"displayOriginal":{"isTrue":false},"number":"1","totalNumber":"5","title":"title","caption":"Jugendfeuerwehr","copyrightWithLinks":"Karsten Hufer","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/jugendfeuerwehr-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/jugendfeuerwehr-102_v-16to9__small.jpg 320w, images/jugendfeuerwehr-102_v-16to9__medium.jpg 480w, images/jugendfeuerwehr-102_v-16to9__medium__extended.jpg 640w, images/jugendfeuerwehr-102_v-16to9.jpg 960w, images/jugendfeuerwehr-102_v-16to9__retina.jpg 1920w"}]}},{"isImage":true,"showFullSize":{"isTrue":true},"displayOriginal":{"isTrue":false},"number":"2","totalNumber":"5","title":"title","caption":"buchmesse","copyrightWithLinks":"Karsten Hufer","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/buchmesse-fahnen-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/buchmesse-fahnen-102_v-16to9__small.jpg 320w, images/buchmesse-fahnen-102_v-16to9__medium.jpg 480w, images/buchmesse-fahnen-102_v-16to9__medium__extended.jpg 640w, images/buchmesse-fahnen-102_v-16to9.jpg 960w, images/buchmesse-fahnen-102_v-16to9__retina.jpg 1920w"}]}},{"isImage":true,"showFullSize":{"isTrue":true},"displayOriginal":{"isTrue":false},"number":"3","totalNumber":"5","title":"title","caption":"connichi","copyrightWithLinks":"Karsten Hufer","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/connichi-106_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/connichi-106_v-16to9__small.jpg 320w, images/connichi-106_v-16to9__medium.jpg 480w, images/connichi-106_v-16to9__medium__extended.jpg 640w, images/connichi-106_v-16to9.jpg 960w, images/connichi-106_v-16to9__retina.jpg 1920w"}]}},{"isImage":true,"showFullSize":{"isTrue":true},"displayOriginal":{"isTrue":false},"number":"4","totalNumber":"5","title":"title","caption":"emmanuel-tjeknavorian","copyrightWithLinks":"Karsten Hufer","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/emmanuel-tjeknavorian-108_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/emmanuel-tjeknavorian-108_v-16to9__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-16to9__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-16to9__medium__extended.jpg 640w, images/emmanuel-tjeknavorian-108_v-16to9.jpg 960w, images/emmanuel-tjeknavorian-108_v-16to9__retina.jpg 1920w"}]}},{"isImage":true,"showFullSize":{"isTrue":true},"displayOriginal":{"isTrue":false},"number":"5","totalNumber":"5","title":"title","caption":"greenteams-grafik","copyrightWithLinks":"Karsten Hufer","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/greenteams-grafik-100_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/greenteams-grafik-100_v-16to9__small.jpg 320w, images/greenteams-grafik-100_v-16to9__medium.jpg 480w, images/greenteams-grafik-100_v-16to9__medium__extended.jpg 640w, images/greenteams-grafik-100_v-16to9.jpg 960w, images/greenteams-grafik-100_v-16to9__retina.jpg 1920w"}]}}]}}}}}]}

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

@@ -0,0 +1 @@
+{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit Bildergalerie-Hochkantbildern"},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum <em>dolor sit amet</em>, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='hrds-copytext__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"paragraphBoxItem":{"isGallery":true,"toModel":{"galleryPage":{"isGallery":true,"label":{"type":"gallery","loca":"label_gallery","byline":{"bylineText":"3 Bilder"}},"toModel":{"mediaBacklinkToStoryTeaser":{"link":{"url":"/galleryseite","isTargetBlank":false},"readMoreScreenreader":"zur hr3.de Bildergalerie","title":"Bildergalerie title","isForeignBrand":true,"readMore":"zur hr3.de Bildergalerie-Einzelseite","hasIcon":true,"iconName":"extern"}},"gallery":{"items":[{"isImage":true,"showFullSize":{"isTrue":true},"displayOriginal":{"isTrue":true},"number":"1","totalNumber":"5","title":"title","caption":"decke uni marburg 1","copyrightWithLinks":"Karsten Hufer","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/decke-uni-marburg-104_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/decke-uni-marburg-104_v-Xto9__small.jpg 135w, images/decke-uni-marburg-104_v-Xto9__medium.jpg 203w, images/decke-uni-marburg-104_v-Xto9.jpg 405w, images/decke-uni-marburg-104_v-Xto9__retina.jpg 810w"}]}},{"isImage":true,"showFullSize":{"isTrue":true},"displayOriginal":{"isTrue":true},"number":"2","totalNumber":"5","title":"title","caption":"decke uni marburg 2","copyrightWithLinks":"Karsten Hufer","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/decke-uni-marburg-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/decke-uni-marburg-102_v-Xto9__small.jpg 135w, images/decke-uni-marburg-102_v-Xto9__medium.jpg 203w, images/decke-uni-marburg-102_v-Xto9.jpg 405w, images/decke-uni-marburg-102_v-Xto9__retina.jpg 810w"}]}},{"isImage":true,"showFullSize":{"isTrue":true},"displayOriginal":{"isTrue":true},"number":"3","totalNumber":"5","title":"title","caption":"decke uni marburg 3","copyrightWithLinks":"Karsten Hufer","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/dach-uni-marburg-101_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/dach-uni-marburg-101_v-Xto9__small.jpg 135w, images/dach-uni-marburg-101_v-Xto9__medium.jpg 203w, images/dach-uni-marburg-101_v-Xto9.jpg 405w, images/dach-uni-marburg-101_v-Xto9__retina.jpg 810w"}]}}]}}}}}]}

package/src/stories/views/components/label/label.hbs

@@ -2,8 +2,8 @@
     class='sb-label rounded px-1.5 pt-px inline-block tracking-wide text-white text-base leading-5.5 font-heading{{#if _css}} {{_css}}{{/if}} 
         {{inline-switch
             _type
-            '["media","event","breakingnews","comment","analysis","der-tag-in-hessen","hessen-am-abend","glosse","fragen-und-antworten","infografik","interaktiv","program","download","pm","liveticker","ticker","livestream","live","livechat","buliticker","social-tv","blog","podcast","kurzmeldung","location","topic","video","audio"]'
-            '["bg-labelMedia","bg-labelEvent","bg-labelBreakingnews","bg-labelComment","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","bg-labelKurzmeldung","bg-labelEvent","bg-labelComment","bg-labelMedia","bg-labelMedia"]'
+            '["media","event","breakingnews","comment","analysis","der-tag-in-hessen","hessen-am-abend","glosse","fragen-und-antworten","infografik","interaktiv","program","download","pm","liveticker","ticker","livestream","live","livechat","buliticker","social-tv","blog","podcast","kurzmeldung","location","topic","video","audio","gallery"]'
+            '["bg-labelMedia","bg-labelEvent","bg-labelBreakingnews","bg-labelComment","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","bg-labelKurzmeldung","bg-labelEvent","bg-labelComment","bg-labelMedia","bg-labelMedia","bg-labelMedia"]'
         }}'
 >
     {{_text}}

package/src/stories/views/components/mediaplayer/mediaPlayer_stickyWrapper.hbs

@@ -1,5 +1,5 @@
 
-<div x-data="stickyPlayer" class="relative ar-16-9 bg-slate-400" x-intersect:leave.threshold.45="inViewport = false" x-intersect:enter.threshold.45="inViewport = true; videoWasStopedWhenSticky = false">
+<div x-data="stickyPlayer" class="relative ar-16-9" x-intersect:leave.threshold.45="inViewport = false" x-intersect:enter.threshold.45="inViewport = true; videoWasStopedWhenSticky = false">
     <div x-ref="videoElementWrapper"
         class="transition-all lg:transition-none right-4" 
         :class="{   'ar-16-9 w-1/2 max-w-70 sm:w-70 fixed z-300 animate-fade-right animate-once animate-duration-1000': shouldVideoBeFixed(),
@@ -7,7 +7,7 @@
                     'top-14 md:top-16': $store.navIsVisible,
                     'lg:top-31': $store.navIsVisible && !$store.subNavIsVisible,
                     'lg:top-40': $store.navIsVisible && $store.subNavIsVisible,
-                    'top-4 lg:top-20': !$store.navIsVisible}">                   
+                    'top-14 lg:top-20': !$store.navIsVisible}">                   
         {{> @partial-block }} 
         <button @click="closeVideo()" class="absolute top-0 right-0 flex items-center justify-center w-12 h-12 z-300 hover:scale-105"
                 :class="{'hidden': !shouldVideoBeFixed(),
@@ -26,7 +26,7 @@
                 videoStoped: true,
                 videoPlaying: false,
                 videoWasStopedWhenSticky: false,
-                videoWasStopedByUser: false,
+                videoWasClosedByUser: false,
                 videoElement: null,
 
                 shouldVideoBeFixed: function () {
@@ -46,8 +46,8 @@
                             this.videoPlaying = false;
                             this.videoStoped = true;
                             if (!this.inViewport ) {
-                                if(this.videoWasStopedByUser){
-                                    this.videoWasStopedByUser = false
+                                if(this.videoWasClosedByUser){
+                                    this.videoWasClosedByUser = false
                                 } else {
                                     this.videoWasStopedWhenSticky = true;
                                 }                               
@@ -57,8 +57,9 @@
                     }
                 },
                 closeVideo: function () {
-                    this.videoElement.pause();
-                    this.videoWasStopedByUser = true;
+                    this.videoWasStopedWhenSticky = false;
+                    this.videoWasClosedByUser = true;
+                    this.videoElement.pause();                 
                 },
                 init: function () {
                     this.videoElement = this.$refs.videoElementWrapper.querySelector("video");

package/src/stories/views/components/page/index/page.data.js

@@ -2,7 +2,7 @@ import structuredClone from 'core-js-pure/actual/structured-clone'
 import NavigationData from '../../site_header/fixtures/site_header.json'
 import teaserStandard from '../../teaser/fixtures/teaser_standard.json'
 
-import data_story from '../story/fixtures/story.json'
+import data_story from '../story/fixtures/story_with_video.json'
 import data_breadcrumb from '../../navigation/breadcrumb/fixtures/breadcrumb.json'
 
 const NavigationDataWithTeaser = structuredClone(

package/src/stories/views/components/page/story/story_article.hbs

@@ -20,10 +20,10 @@
                     _noDelay=true}}
             {{/if}}
             {{#if this.isVideoOnDemand}}
-               {{> components/content/copytext/components/media/media_figure _playerLocation="Aufmacher" _isFullsize=true _isLead=true _playerSize="100" _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
+               {{> components/content/copytext/components/media/media_figure _hasHeadline=true _isSticky=true _playerLocation="Aufmacher" _isFullsize=true _isLead=true _playerSize="100" _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
             {{/if}}
             {{#if this.isLivestream}}
-               {{> components/content/copytext/components/media/media_figure _playerLocation="Aufmacher" _isFullsize=true _isLead=true _playerSize="100" _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
+               {{> components/content/copytext/components/media/media_figure _hasHeadline=true _isSticky=true _playerLocation="Aufmacher" _isFullsize=true _isLead=true _playerSize="100" _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
             {{/if}}
         {{/with}}
     {{/unless}}

package/tailwind.config.js

@@ -406,6 +406,8 @@ module.exports = {
                 'button-inverted--dark': 'var(--color-button-inverted--dark)',
                 'button-disabled': 'var(--color-button-disabled)',
                 'button-disabled--dark': 'var(--color-button-disabled--dark)',
+                'button-transparent': 'var(--color-button-transparent)',
+                'button-transparent--dark': 'var(--color-button-transparent--dark)',
                 'media-button': 'var(--color-media-button)',
                 'media-button-live': 'var(--color-media-button-live)',
                 'focus-state': 'var(--color-focus-state)',

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

@@ -1,7 +0,0 @@
-{{~#if (isStorybook)~}}
-    <div class="mt-6 italic text-gray-dark">coming soon: Gallery-component</div>
-{{~else~}}
-    {{#with this.toModel.galleryPage}}
-        {{> modules/media/media_figure _addClass="print:hidden copytext__clearBox dontPrint" _a11yIntro-loca="story_gallery_intro_sr" _a11yOutro-loca="story_gallery_outro_sr" }}
-    {{/with}}
-{{~/if~}}    

package/dist/views_static/components/content/copytext/components/gallery.hbs

@@ -1,7 +0,0 @@
-{{~#if (isStorybook)~}}
-    <div class="mt-6 italic text-gray-dark">coming soon: Gallery-component</div>
-{{~else~}}
-    {{#with this.toModel.galleryPage}}
-        {{> modules/media/media_figure _addClass="print:hidden copytext__clearBox dontPrint" _a11yIntro-loca="story_gallery_intro_sr" _a11yOutro-loca="story_gallery_outro_sr" }}
-    {{/with}}
-{{~/if~}}    

package/src/stories/views/components/content/copytext/components/gallery.hbs

@@ -1,7 +0,0 @@
-{{~#if (isStorybook)~}}
-    <div class="mt-6 italic text-gray-dark">coming soon: Gallery-component</div>
-{{~else~}}
-    {{#with this.toModel.galleryPage}}
-        {{> modules/media/media_figure _addClass="print:hidden copytext__clearBox dontPrint" _a11yIntro-loca="story_gallery_intro_sr" _a11yOutro-loca="story_gallery_outro_sr" }}
-    {{/with}}
-{{~/if~}}