hr-design-system-handlebars 1.88.2 → 1.89.0

package/dist/assets/js/components/mediaplayer/ardPlayerLoader.subfeature.js

@@ -13,7 +13,9 @@ const ArdPlayerLoader = function (options, trackingData, rootElement) {
         settingsCookie = new SettingsCookie(),
         isPlayerDebug = options.isPlayerDebug || false,
         playerLocation = trackingData.playerLocation || "Default",
-        playerSize = trackingData.playerSize || options.teaserSize
+        playerSize = trackingData.playerSize || options.teaserSize,
+        isDarkmodeAllowed = options.isDarkmodeAllowed,
+        darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
     let mediaCollection = options.mediaCollection,
         playerConfig = options.playerConfig,
         isPlayerStarted = false,
@@ -62,6 +64,9 @@ const ArdPlayerLoader = function (options, trackingData, rootElement) {
         }
         whenAvailable('ardplayer', function () {
             player = new ardplayer.Player(playerId, playerConfig, mediaCollection)
+
+            player.setLightMode(isDarkmodeAllowed ? !darkModePreference.matches : true)
+
             if (isPlayerDebug) {
                 ardplayer.debug(true, true, true, true)
             }
@@ -79,10 +84,12 @@ const ArdPlayerLoader = function (options, trackingData, rootElement) {
         }, interval)
     }
 
+    const handleThemeSwitch = function (event) {
+        player.setLightMode(!event.matches)
+    }
+
     const bindPlayerEvents = function () {
         player.$.on(ardplayer.Player.EVENT_PLAY_STREAM, function (event) {
-            console.log(event.target)
-            console.debug(`options.teaserSize: ${options.teaserSize}`)
             const geotag = hr$('.js-geotag', rootElement)[0]
             if (!isPlayerStarted) {
                 trackPlayerStart()
@@ -114,6 +121,8 @@ const ArdPlayerLoader = function (options, trackingData, rootElement) {
             }
         })
 
+
+
         listen('player_start', function (event) {
             if (player) {
                 let playerIdFromConfig = parseInt(playerId)
@@ -126,6 +135,8 @@ const ArdPlayerLoader = function (options, trackingData, rootElement) {
                 }
             }
         })
+
+        listen("change", handleThemeSwitch, darkModePreference)
     }
 
     const trackPlayerStart = function () {

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

@@ -1,7 +1,7 @@
 {{#if this.title}}
     <h2 class="clear-both mt-12 mb-5 text-lg font-normal accordion sm480:mt-14 sm480:text-2xl font-headingSerif dark:text-text-dark">{{this.title}}</h2>
 {{/if}}
-<div x-cloak x-data="{selected:0}" class="pb-3{{#unless this.title}} clear-both mt-12 sm480:mt-14{{/unless}}">
+<div x-cloak x-data="{selected:0}" class="print:hidden pb-3{{#unless this.title}} clear-both mt-12 sm480:mt-14{{/unless}}">
     {{#each this.copytextParagraph }}
         {{#if this.isHeadline}}
             {{#unless @first}}</div></div>{{/unless}}
@@ -39,4 +39,17 @@
             {{#if @last}}</div></div><div class="w-full border-b border-gray-alto"></div>{{/if}}
         {{/if}}
     {{/each}}
+</div>
+<div class="hidden print:block border-y border-gray-alto">
+    {{#each this.copytextParagraph }} 
+        {{#if this.isHeadline}}
+            <h3 class="self-center my-5 text-lg font-normal font-headingSerif">{{{this.text}}}</h3>
+        {{else}}
+            {{#if (isStorybook)}}  
+                {{> components/content/copytext/components/accordion/accordion_item }}   
+            {{else}}            
+                {{~> components/content/copytext/copytext_body _isWebview=_isWebview ~}}
+            {{/if}} 
+        {{/if}}
+    {{/each}}
 </div>

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

@@ -2,6 +2,6 @@
     <div class="mt-6 italic text-gray-dark">coming soon: Gallery-component</div>
 {{~else~}}
     {{#with this.toModel.galleryPage}}
-        {{> modules/media/media_figure _addClass="copytext__clearBox dontPrint" _a11yIntro-loca="story_gallery_intro_sr" _a11yOutro-loca="story_gallery_outro_sr" }}
+        {{> 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/components/content/copytext/components/newsletter.hbs

@@ -1,5 +1,5 @@
 {{~#if (isStorybook)~}}
     <div class="mt-6 italic text-gray-dark">coming soon: Newsletter-component</div>
 {{~else~}}
-    {{> modules/newsletter/newsletter _addClass="copytext__clearBox marginTrailer--m"}}
+    {{> modules/newsletter/newsletter _addClass="print:hidden copytext__clearBox marginTrailer--m"}}
 {{~/if~}}    

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

@@ -1,3 +1,3 @@
-<div class="{{#if this.showFullSize.isTrue }}clear-both [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 mt-12 mb-8 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:mt-14 sm:mb-14{{else}}hr-copytext-teaser-half sm:w-1/2 clear-both sm:float-left sm:mr-5 mt-12 mb-8 sm:mt-6 sm:mb-5{{/if}}">
+<div class="print:hidden {{#if this.showFullSize.isTrue }}clear-both [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 mt-12 mb-8 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:mt-14 sm:mb-14{{else}}hr-copytext-teaser-half sm:w-1/2 clear-both sm:float-left sm:mr-5 mt-12 mb-8 sm:mt-6 sm:mb-5{{/if}}">
     {{> components/teaser/podcast/podcast _headlineTag="h3" _isCopytext=true }} 
 </div>

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

@@ -1,3 +1,3 @@
-<div class="article-narrow w-auto [&+h2]:mt-4 xs:article-full-width xs:mx-13 {{#if this.showFullSize.isTrue }}hr-copytext-teaser-full clear-both mb-8 mt-12 sm:my-14 sm:mx-26 {{else}}hr-copytext-teaser-half sm:w-1/2 clear-both sm:float-left mt-12 mb-8 sm:mt-6 sm:mb-5 sm:mr-5 sm:ml-0{{/if}}">
+<div class="print:hidden article-narrow w-auto [&+h2]:mt-4 xs:article-full-width xs:mx-13 {{#if this.showFullSize.isTrue }}hr-copytext-teaser-full clear-both mb-8 mt-12 sm:my-14 sm:mx-26 {{else}}hr-copytext-teaser-half sm:w-1/2 clear-both sm:float-left mt-12 mb-8 sm:mt-6 sm:mb-5 sm:mr-5 sm:ml-0{{/if}}">
     {{> components/teaser/teaser_poster _isCopytext=true }} 
 </div>    

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

@@ -2,8 +2,8 @@
     <div class="mt-6 italic text-gray-dark">coming soon: Voting-component</div>
 {{~else~}}
     {{#if this.isMultiVote}}
-        {{> modules/teaser/voting-teaser/multiVotingTeaser _addClass="copytext__clearBox"}}
+        {{> modules/teaser/voting-teaser/multiVotingTeaser _addClass="print:hidden copytext__clearBox"}}
     {{else}}
-        {{> modules/teaser/voting-teaser/singleVotingTeaser _addClass="copytext__clearBox"}}
+        {{> modules/teaser/voting-teaser/singleVotingTeaser _addClass="print:hidden copytext__clearBox"}}
     {{/if}}
 {{~/if~}}

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

@@ -1,5 +1,5 @@
 {{~#if (isStorybook)~}}
     <div class="mt-6 italic text-gray-dark">coming soon: Webform-component</div>
 {{~else~}}
-    {{> content/webform/components/webform _addClass="copytext__clearBox marginTrailer--m"}}
+    {{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}
 {{~/if~}}     

package/dist/views/components/social_sharing/social_sharing_copytext.hbs

@@ -2,7 +2,7 @@
     <div 
         x-show="$screen('lg') && $store.sharingIsVisible == false && document.querySelector('.copytextWrapper').offsetHeight > 220" 
         x-init="" 
-        class="{{#unless ../_useSticky}}top-0 {{/unless}}sticky w-10 col-start-2 pt-6 z-100 h-fit"
+        class="print:hidden {{#unless ../_useSticky}}top-0 {{/unless}}sticky w-10 col-start-2 pt-6 z-100 h-fit"
         x-data="socialSharingHandler('vertical-desktop')"
         x-intersect="sharingModuleShown()"
         ax-load 

package/dist/views/components/social_sharing/social_sharing_horizontal.hbs

@@ -2,7 +2,7 @@
     <div 
         x-data="socialSharingHandler('metadatabox')"
         x-init="$watch('$store.sharingIsVisible', () => {$store.sharingIsOpen.metadatabox = false; $store.sharingIsOpen.mobilesticky = false})"
-        class="flex self-center justify-end ml-3 grow"
+        class="flex self-center justify-end ml-3 print:hidden grow"
         x-intersect:leave="$store.sharingIsVisible=false"
         x-intersect:enter="$store.sharingIsVisible=true"
         x-on:resize.window="$store.sharingIsOpen.metadatabox = false"       

package/dist/views/components/teaser/cluster/teaser_cluster.hbs

@@ -4,7 +4,7 @@
                 <h2 class="flex items-center px-5 py-5 text-clusterTeaserHeadline">
                     {{#if this.teaserLogo}}
                         <span>
-                            {{> components/base/image/icon _icon=this.teaserLogo _iconmap="cluster-teaser" _addClass=(inline-switch this.teaserLogo '["hessenschau_de","tagesschau_de","sportschau"]' '["fill-blue-congress w-10 md:w-12 h-10 md:h-12","fill-blue-midnight w-40 lg:w-52 h-8 md:h-12","fill-blue-deepSeaDream w-40 lg:w-52 h-8 md:h-12"]')}}
+                            {{> components/base/image/icon _icon=this.teaserLogo _iconmap="cluster-teaser" _addClass=(inline-switch this.teaserLogo '["hessenschau_de","tagesschau_de","sportschau"]' '["fill-blue-congress-hex w-10 md:w-12 h-10 md:h-12","fill-blue-midnight w-40 lg:w-52 h-8 md:h-12","fill-blue-deepSeaDream w-40 lg:w-52 h-8 md:h-12"]')}}
                         </span>
                     {{/if}}
                     {{#if this.title}}

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

@@ -1,7 +1,7 @@
 {{#if this.title}}
     <h2 class="clear-both mt-12 mb-5 text-lg font-normal accordion sm480:mt-14 sm480:text-2xl font-headingSerif dark:text-text-dark">{{this.title}}</h2>
 {{/if}}
-<div x-cloak x-data="{selected:0}" class="pb-3{{#unless this.title}} clear-both mt-12 sm480:mt-14{{/unless}}">
+<div x-cloak x-data="{selected:0}" class="print:hidden pb-3{{#unless this.title}} clear-both mt-12 sm480:mt-14{{/unless}}">
     {{#each this.copytextParagraph }}
         {{#if this.isHeadline}}
             {{#unless @first}}</div></div>{{/unless}}
@@ -39,4 +39,17 @@
             {{#if @last}}</div></div><div class="w-full border-b border-gray-alto"></div>{{/if}}
         {{/if}}
     {{/each}}
+</div>
+<div class="hidden print:block border-y border-gray-alto">
+    {{#each this.copytextParagraph }} 
+        {{#if this.isHeadline}}
+            <h3 class="self-center my-5 text-lg font-normal font-headingSerif">{{{this.text}}}</h3>
+        {{else}}
+            {{#if (isStorybook)}}  
+                {{> components/content/copytext/components/accordion/accordion_item }}   
+            {{else}}            
+                {{~> components/content/copytext/copytext_body _isWebview=_isWebview ~}}
+            {{/if}} 
+        {{/if}}
+    {{/each}}
 </div>

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

@@ -2,6 +2,6 @@
     <div class="mt-6 italic text-gray-dark">coming soon: Gallery-component</div>
 {{~else~}}
     {{#with this.toModel.galleryPage}}
-        {{> modules/media/media_figure _addClass="copytext__clearBox dontPrint" _a11yIntro-loca="story_gallery_intro_sr" _a11yOutro-loca="story_gallery_outro_sr" }}
+        {{> 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/newsletter.hbs

@@ -1,5 +1,5 @@
 {{~#if (isStorybook)~}}
     <div class="mt-6 italic text-gray-dark">coming soon: Newsletter-component</div>
 {{~else~}}
-    {{> modules/newsletter/newsletter _addClass="copytext__clearBox marginTrailer--m"}}
+    {{> modules/newsletter/newsletter _addClass="print:hidden copytext__clearBox marginTrailer--m"}}
 {{~/if~}}    

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

@@ -1,3 +1,3 @@
-<div class="{{#if this.showFullSize.isTrue }}clear-both [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 mt-12 mb-8 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:mt-14 sm:mb-14{{else}}hr-copytext-teaser-half sm:w-1/2 clear-both sm:float-left sm:mr-5 mt-12 mb-8 sm:mt-6 sm:mb-5{{/if}}">
+<div class="print:hidden {{#if this.showFullSize.isTrue }}clear-both [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 mt-12 mb-8 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:mt-14 sm:mb-14{{else}}hr-copytext-teaser-half sm:w-1/2 clear-both sm:float-left sm:mr-5 mt-12 mb-8 sm:mt-6 sm:mb-5{{/if}}">
     {{> components/teaser/podcast/podcast _headlineTag="h3" _isCopytext=true }} 
 </div>

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

@@ -1,3 +1,3 @@
-<div class="article-narrow w-auto [&+h2]:mt-4 xs:article-full-width xs:mx-13 {{#if this.showFullSize.isTrue }}hr-copytext-teaser-full clear-both mb-8 mt-12 sm:my-14 sm:mx-26 {{else}}hr-copytext-teaser-half sm:w-1/2 clear-both sm:float-left mt-12 mb-8 sm:mt-6 sm:mb-5 sm:mr-5 sm:ml-0{{/if}}">
+<div class="print:hidden article-narrow w-auto [&+h2]:mt-4 xs:article-full-width xs:mx-13 {{#if this.showFullSize.isTrue }}hr-copytext-teaser-full clear-both mb-8 mt-12 sm:my-14 sm:mx-26 {{else}}hr-copytext-teaser-half sm:w-1/2 clear-both sm:float-left mt-12 mb-8 sm:mt-6 sm:mb-5 sm:mr-5 sm:ml-0{{/if}}">
     {{> components/teaser/teaser_poster _isCopytext=true }} 
 </div>    

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

@@ -2,8 +2,8 @@
     <div class="mt-6 italic text-gray-dark">coming soon: Voting-component</div>
 {{~else~}}
     {{#if this.isMultiVote}}
-        {{> modules/teaser/voting-teaser/multiVotingTeaser _addClass="copytext__clearBox"}}
+        {{> modules/teaser/voting-teaser/multiVotingTeaser _addClass="print:hidden copytext__clearBox"}}
     {{else}}
-        {{> modules/teaser/voting-teaser/singleVotingTeaser _addClass="copytext__clearBox"}}
+        {{> modules/teaser/voting-teaser/singleVotingTeaser _addClass="print:hidden copytext__clearBox"}}
     {{/if}}
 {{~/if~}}

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

@@ -1,5 +1,5 @@
 {{~#if (isStorybook)~}}
     <div class="mt-6 italic text-gray-dark">coming soon: Webform-component</div>
 {{~else~}}
-    {{> content/webform/components/webform _addClass="copytext__clearBox marginTrailer--m"}}
+    {{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}
 {{~/if~}}     

package/dist/views_static/components/social_sharing/social_sharing_copytext.hbs

@@ -2,7 +2,7 @@
     <div 
         x-show="$screen('lg') && $store.sharingIsVisible == false && document.querySelector('.copytextWrapper').offsetHeight > 220" 
         x-init="" 
-        class="{{#unless ../_useSticky}}top-0 {{/unless}}sticky w-10 col-start-2 pt-6 z-100 h-fit"
+        class="print:hidden {{#unless ../_useSticky}}top-0 {{/unless}}sticky w-10 col-start-2 pt-6 z-100 h-fit"
         x-data="socialSharingHandler('vertical-desktop')"
         x-intersect="sharingModuleShown()"
         ax-load 

package/dist/views_static/components/social_sharing/social_sharing_horizontal.hbs

@@ -2,7 +2,7 @@
     <div 
         x-data="socialSharingHandler('metadatabox')"
         x-init="$watch('$store.sharingIsVisible', () => {$store.sharingIsOpen.metadatabox = false; $store.sharingIsOpen.mobilesticky = false})"
-        class="flex self-center justify-end ml-3 grow"
+        class="flex self-center justify-end ml-3 print:hidden grow"
         x-intersect:leave="$store.sharingIsVisible=false"
         x-intersect:enter="$store.sharingIsVisible=true"
         x-on:resize.window="$store.sharingIsOpen.metadatabox = false"       

package/dist/views_static/components/teaser/cluster/teaser_cluster.hbs

@@ -4,7 +4,7 @@
                 <h2 class="flex items-center px-5 py-5 text-clusterTeaserHeadline">
                     {{#if this.teaserLogo}}
                         <span>
-                            {{> components/base/image/icon _icon=this.teaserLogo _iconmap="cluster-teaser" _addClass=(inline-switch this.teaserLogo '["hessenschau_de","tagesschau_de","sportschau"]' '["fill-blue-congress w-10 md:w-12 h-10 md:h-12","fill-blue-midnight w-40 lg:w-52 h-8 md:h-12","fill-blue-deepSeaDream w-40 lg:w-52 h-8 md:h-12"]')}}
+                            {{> components/base/image/icon _icon=this.teaserLogo _iconmap="cluster-teaser" _addClass=(inline-switch this.teaserLogo '["hessenschau_de","tagesschau_de","sportschau"]' '["fill-blue-congress-hex w-10 md:w-12 h-10 md:h-12","fill-blue-midnight w-40 lg:w-52 h-8 md:h-12","fill-blue-deepSeaDream w-40 lg:w-52 h-8 md:h-12"]')}}
                         </span>
                     {{/if}}
                     {{#if this.title}}

package/package.json

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

package/src/assets/fixtures/audio/audios.inc.json

@@ -60,7 +60,8 @@
         "jsUrl": "./vendor/ardplayer/ardplayer-hr-6.8.3.82603554.js",
         "isAutoplay": true,
         "teaserSize": "100",
-        "realTeaserSize": "100"
+        "realTeaserSize": "100",
+        "isDarkmodeAllowed": true
     },
     "audio-2": {
         "playerConfig": {
@@ -118,7 +119,8 @@
         "jsUrl": "./vendor/ardplayer/ardplayer-hr-6.8.3.82603554.js",
         "isAutoplay": true,
         "teaserSize": "100",
-        "realTeaserSize": "100"
+        "realTeaserSize": "100",
+        "isDarkmodeAllowed": true
     },
     "audio-podcast": {
         "playerConfig": {
@@ -265,6 +267,7 @@
         "jsUrl": "./vendor/ardplayer/ardplayer-hr-6.8.3.82603554.js",
         "isAutoplay": true,
         "teaserSize": "50",
-        "realTeaserSize": "50"
+        "realTeaserSize": "50",
+        "isDarkmodeAllowed": true
     }
 }

package/src/assets/fixtures/video/videos.inc.json

@@ -74,7 +74,8 @@
         "isAutoplay": true,
         "isPlayerDebug": false,
         "teaserSize": "100",
-        "realTeaserSize": "100"
+        "realTeaserSize": "100",
+        "isDarkmodeAllowed": true
     },
     "video-2": {
         "playerConfig": {
@@ -151,7 +152,8 @@
         "isAutoplay": true,
         "isPlayerDebug": true,
         "teaserSize": "100",
-        "realTeaserSize": "100"
+        "realTeaserSize": "100",
+        "isDarkmodeAllowed": true
     },
     "video-livestream-hr-fernsehen": {
         "playerConfig": {
@@ -218,6 +220,7 @@
         "jsUrl": "./vendor/ardplayer/ardplayer-hr-6.8.3.82603554.js",
         "teaserSize": "100",
         "realTeaserSize": "100",
-        "isAutoplay": true
+        "isAutoplay": true,
+        "isDarkmodeAllowed": true
     }
 }