hr-design-system-handlebars 0.49.0 → 0.49.3

package/.storybook/main.js

@@ -34,10 +34,11 @@ module.exports = {
             ...config.resolve.alias,
             scripts: path.resolve(__dirname, '../scripts'),
             components: path.resolve(__dirname, '../src/stories/views/components'),
+            base: path.resolve(__dirname, '../src/stories/views/base'),
             tailwind$: path.resolve(__dirname, '../src/assets/tailwind.css'),
-            hrQueryNew$: path.resolve(
+            hrQueryDs$: path.resolve(
                 __dirname,
-                '../src/stories/views/components/generic/hrQueryNew.js'
+                '../src/stories/views/components/generic/hrQueryDs.js'
             ),
             initializer$: path.resolve(
                 __dirname,

package/.storybook/preview.js

@@ -11,14 +11,21 @@ import loadFeature from '../build/webpack/feature-loader/initializer/loader'
 import 'components/site_header/header_alpine'
 
 function loadDelayedImages(){setTimeout((function(){var t,e=document.images,s=[],a=function(t){void 0!==window.picturefill&&window.picturefill({reevaluate:!0,elements:t})};for(var i=0;i<e.length;++i)(t=e[i].dataset?e[i].dataset.srcset:e[i].getAttribute("data-srcset"))&&(0===e[i].getBoundingClientRect().top?s.push(e[i]):e[i].setAttribute("srcset",t));a(e),setTimeout((function(){var t;for(var i=0;i<s.length;++i)t=s[i].dataset?s[i].dataset.srcset:s[i].getAttribute("data-srcset"),s[i].setAttribute("srcset",t);a(s)}),900)}),0)}
-    
-document.addEventListener('DOMContentLoaded', function (event) {
-    console.log('DOM fully loaded and parsed')
 
-    console.log('Start feature initialization')
+let eventSrcUrl = null;
+
+document.addEventListener('DOMContentLoaded', function (event) {
+    console.log('DOM fully loaded and parsed') 
+    if(eventSrcUrl != event.srcElement.URL) {
+        eventSrcUrl = event.srcElement.URL
+        
+        console.log('Start feature initialization' )
 
-    Initializer.run(document, loadFeature)
-    setTimeout(loadDelayedImages,200);
+        Initializer.run(document, loadFeature)
+        setTimeout(loadDelayedImages,200);
+    } else {
+        console.log("second DOMContentLoaded Event was blocked!");
+    }   
 })
 
 if (process.env.NODE_ENV !== 'production') {

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+# v0.49.3 (Tue Jul 05 2022)
+
+#### 🐛 Bug Fix
+
+- Dpe 1588 [#261](https://github.com/mumprod/hr-design-system-handlebars/pull/261) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v0.49.2 (Tue Jul 05 2022)
+
+#### 🐛 Bug Fix
+
+- jsoninclude used in header now [#259](https://github.com/mumprod/hr-design-system-handlebars/pull/259) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
+# v0.49.1 (Fri Jul 01 2022)
+
+#### 🐛 Bug Fix
+
+- add json for tabbox [#258](https://github.com/mumprod/hr-design-system-handlebars/pull/258) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
 # v0.49.0 (Thu Jun 30 2022)
 
 #### 🚀 Enhancement

package/dist/assets/index.css

@@ -1270,6 +1270,9 @@ video {
 .p-2 {
   padding: 0.5rem;
 }
+.p-5 {
+  padding: 1.25rem;
+}
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;

package/dist/views/base/tracking/{atiHelperNew.js → atiHelperDs.js}

@@ -1,5 +1,5 @@
 
-import TrackingCookie from '../../components/externalService/trackingCookie.subfeature'
+import TrackingCookie from 'components/externalService/trackingCookieDs.subfeature'
 
 const isTrackingAllowed = () => {
     const trackingCookie = new TrackingCookie()

package/dist/views/base/tracking/{atiMediaHelperNew.js → atiMediaHelperDs.js}

@@ -1,4 +1,4 @@
-import { isTrackingAllowed, pi } from '../tracking/atiHelperNew'
+import { isTrackingAllowed, pi } from 'base/tracking/atiHelperDs'
 
 const ATIMediaHelper = function (
     avType,

package/{src/stories/views/components/audio/audioElement.subfeature.js → dist/views/components/audio/audioElementDs.subfeature.js}

@@ -1,6 +1,6 @@
-import { fireEvent, hr$, listen } from 'hrQueryNew'
-import { uxAction } from '../../base/tracking/atiHelperNew'
-import ATIMediaHelper from '../../base/tracking/atiMediaHelperNew'
+import { fireEvent, hr$, listen } from 'hrQueryDs'
+import { uxAction } from 'base/tracking/atiHelperDs'
+import ATIMediaHelper from 'base/tracking/atiMediaHelperDs'
 
 const AudioElement = function (options, rootElement) {
     'use strict'

package/dist/views/components/base/load_dynamic.hbs

@@ -5,6 +5,9 @@
     {{#case "components/teaser/group_teaser/group_teaser"}}
         {{> components/teaser/group_teaser/group_teaser}}
     {{/case}}
+    {{#case "components/teaser/tabbox/group_tabbox"}}
+        {{> components/teaser/tabbox/group_tabbox}}
+    {{/case}}
     {{#case "components/teaser/teaser_standard"}}
         {{> components/teaser/teaser_standard}}
     {{/case}}

package/dist/views/components/button/button_round.hbs

@@ -4,6 +4,9 @@
     {{~#if _name}} name="{{_name}}"{{/if}} 
     class="bg-blue-500 hover:bg-blue-700 text-white rounded-full border-4 border-white p-1 {{_addClass}}{{#if _webview}} -webview{{/if}}"
     {{~#if _value}} value="{{_value}}"{{/if}}
+    {{~#if _alpineClick}} @click="{{_alpineClick}}"{{/if}}
+
+
 >
     {{~#if _showIcon~}}
         {{> components/base/image/icon _icon=_icon _iconmap=_iconmap _addClass=_addIconClass _webview=_webview}}

package/{src/stories/views/components/externalService/trackingCookie.subfeature.js → dist/views/components/externalService/trackingCookieDs.subfeature.js}

@@ -1,4 +1,4 @@
-import { getJSONCookie, setJSONCookie } from 'hrQueryNew'
+import { getJSONCookie, setJSONCookie } from 'hrQueryDs'
 
 const TrackingCookie = function () {
     let cookie = {}

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

@@ -1,4 +1,4 @@
-import { hr$ } from 'hrQueryNew'
+import { hr$ } from 'hrQueryDs'
 const Foo = (context) => {
     const { options } = context
     const { element: rootElement } = context

package/dist/views/components/mediaplayer/{mediaplayerLoader.feature.js → mediaplayerLoaderDs.feature.js}

@@ -1,8 +1,8 @@
-import { hr$, listenOnce } from 'hrQueryNew'
-import { uxAction } from '../../base/tracking/atiHelperNew'
-import VideoOnDemandPlayer from '../video/videoOnDemandPlayer.subfeature'
-import AudioElement from '../audio/audioElement.subfeature'
-import VideoLivestream from '../video/livestream/videoLivestream.subfeature'
+import { hr$, listenOnce, fireEvent, listen } from 'hrQueryDs'
+import { uxAction } from 'base/tracking/atiHelperDs'
+import VideoOnDemandPlayer from 'components/video/videoOnDemandPlayerDs.subfeature'
+import AudioElement from 'components/audio/audioElementDs.subfeature'
+import VideoLivestream from 'components/video/livestream/videoLivestreamDs.subfeature'
 
 const MediaplayerLoader = function (context) {
     'use strict'
@@ -14,9 +14,14 @@ const MediaplayerLoader = function (context) {
         position = options.position,
         teaserSize = options.teaserSize,
         config = options.config,
-        audioContent = hr$('.js-audioElement__audio', rootElement)[0],
-        mediaplayerButton = hr$('.js-mediaplayer__button', rootElement)[0]
-        
+        audioContent = hr$('.js-audioElement__audio', rootElement)[0],    
+        // containerId = options.containerId,
+        rootParent = rootElement.parentNode,
+        mediaplayerButton = hr$('.js-mediaplayer__button', rootParent)[0];
+    
+    let video = false; 
+
+
     const removeVideoHover = function () {
         rootElement.parentNode.parentNode.classList.remove('-imageHover')
         rootElement.parentNode.parentNode.parentNode.classList.remove('-imageHover')
@@ -35,11 +40,24 @@ const MediaplayerLoader = function (context) {
         uxAction('mediabuttonclick::' + teaserSize + '::playButtonClick')
     }
 
-    const loadOnDemand = function () {
-        console.log("loadOnDemand");
-        new VideoOnDemandPlayer(options)
-        removeVideoHover()
-        uxAction('mediabuttonclick::' + teaserSize + '::playButtonClick')
+    
+    const unloadPlayer = function() {
+        console.log("video.pause()");
+        video.pause();
+    }
+
+    const loadOnDemand = function () {    
+        if(!video){
+            console.log("loadOnDemand");
+            video = new VideoOnDemandPlayer(options)
+            removeVideoHover()
+            uxAction('mediabuttonclick::' + teaserSize + '::playButtonClick')
+            listenOnce('player_colosed', unloadPlayer)  
+        } else {
+            console.log("video.play()");
+            listenOnce('player_colosed', unloadPlayer) 
+            video.play();
+        }
     }
 
     const loadAudio = function () {
@@ -48,6 +66,8 @@ const MediaplayerLoader = function (context) {
         uxAction('mediabuttonclick::' + teaserSize + '::playButtonClick')
     }
 
+
+   
     switch (type) {
         case 'live':
             console.log('live');
@@ -61,7 +81,8 @@ const MediaplayerLoader = function (context) {
         case 'ondemand':
             console.log('ondemand');
             if (position === 'teaser') {
-                listenOnce('click', loadOnDemand, mediaplayerButton)
+              // listenOnce('click', loadOnDemand, mediaplayerButton)
+              listen('click', loadOnDemand, mediaplayerButton)
             } else {
                 loadOnDemand()
             }
@@ -77,5 +98,6 @@ const MediaplayerLoader = function (context) {
             }
             break
     }
+    
 }
 export default MediaplayerLoader

package/dist/views/components/teaser/tabbox/group_tabbox.hbs

@@ -0,0 +1,16 @@
+<div class="w-full">
+    <br/>
+    teaserSize: {{this.teaserSize}}<br/>
+    isFirstTeaser: {{this.isFirstTeaser}}<br/>
+    hasGroupTitle: {{this.hasGroupTitle}}<br/>
+    teaserIndex: {{this.teaserIndex}}<br/>
+    groupTitle: {{this.groupTitle}}<br/>
+    link.url:{{this.link.url}}<br/>
+    title: {{this.title}}<br/>
+    <br/>
+    <b>Teaser:</b><br/>
+    {{~#each this.logicItems}}
+        {{this.logicItem.includeModel.title}}<br/>
+    {{/each~}}
+    <br/><hr/>
+</div>

package/dist/views/components/teaser/tabbox/teaser_tabbox.hbs

@@ -0,0 +1,15 @@
+<div class="w-full p-5">
+
+    <b><u>Tabbox-Data</u></b><br/><br/>
+
+    wanda-Id: {{this.wandaPageId}}<br/><br/>
+
+    Tabs:<br/>
+    {{~#each this.tabbedGroup~}}
+        {{this.title}}<br/>
+    {{~/each~}}
+    <br/>
+    <b>Teasergruppen:</b><hr/>
+    {{~> components/teaser/teaser_logic/teaser_logic ~}}
+
+</div>

package/dist/views/components/teaser/teaser_standard.hbs

@@ -1,8 +1,21 @@
-<article class="col-span-12 flex gap-y-3 gap-x-4 {{inline-switch this.teaserSize '["25","33","50"]' '["px-5 md:px-0 md:col-span-3 flex-row md:flex-col","md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
+<article class="col-span-12 flex gap-y-3 gap-x-4 {{inline-switch this.teaserSize '["25","33","50"]' '["js-is1to1 px-5 md:px-0 md:col-span-3 md:flex-col","md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} "
+    x-data="{ videoStart: false }"
+    {{#switch this.teaserSize~}}
+        {{~#case "25"}}  
+        
+            :class="videoStart ? 'flex-col' : 'flex-row'"
+        {{/case~}}
+    {{~/switch~}}   
+    >
     <figure class="relative {{inline-switch this.teaserSize '["25"]' '["basis-2/5 md:flex-full ar-1-1 md:ar-16-9", "ar-16-9"]'}} ">    
         {{> components/teaser/components/teaser_lead }}       
     </figure>
     <div class="{{inline-switch this.teaserSize '["25"]' '["basis-3/5 md:flex-full"]'}} ">
+        {{#switch this.teaserSize~}}
+            {{~#case "25"}}  
+                <button x-show="videoStart" @click="videoStart = false; $dispatch('player_colosed')" class="md:hidden">Video schließen</button>
+            {{/case~}}
+        {{~/switch~}}   
         <header class="md:px-0 {{inline-switch teaserSize '["25"]' '["","px-5"]'}}">
             {{#>components/base/link css="hover:text-toplineColor" doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="headlineLink" }} 
                 {{> components/teaser/components/teaser_heading 

package/{src/stories/views/components/video/livestream/videoLivestream.subfeature.js → dist/views/components/video/livestream/videoLivestreamDs.subfeature.js}

@@ -1,5 +1,5 @@
-import { fireEvent, hr$, listen, loadScript } from 'hrQueryNew'
-import TrackingCookie from '../../externalService/trackingCookie.subfeature'
+import { fireEvent, hr$, listen, loadScript } from 'hrQueryDs'
+import TrackingCookie from 'components/externalService/trackingCookieDs.subfeature'
 
 const VideoLivestream = function (options, rootElement) {
     'use strict'

package/{src/stories/views/components/video/videoOnDemandPlayer.subfeature.js → dist/views/components/video/videoOnDemandPlayerDs.subfeature.js}

@@ -1,5 +1,5 @@
-import { fireEvent, hr$, listen, loadScript } from 'hrQueryNew'
-import TrackingCookie from '../externalService/trackingCookie.subfeature'
+import { fireEvent, hr$, listen, loadScript } from 'hrQueryDs'
+import TrackingCookie from 'components/externalService/trackingCookieDs.subfeature'
 
 const VideoOnDemandPlayer = function (options, rootElement) {
     'use strict'
@@ -28,8 +28,8 @@ console.log('VideoOnDemandPlayer');
         mediaCollection,
         mediaStreamArray = []
 
-     	console.log(skinPath);
-    /*    console.log(isAdaptiveStream);
+    /* 	console.log(skinPath);
+        console.log(isAdaptiveStream);
         console.log(basePlayerUrl);
         console.log(previewImageUrl);
         console.log(adaptiveStreamingUrl);
@@ -341,8 +341,14 @@ console.log('VideoOnDemandPlayer');
                 player.pause()
             }
         })
+        // listen('hr:global:startVideo:'+playerId, function (event) {
+        //     if (event.detail == 'ardplayer') {
+        //         player.play()
+        //     }
+        // })
+       
     }
-
+    
     if (trackingCookie.isTrackingAccepted('agf') && window.gfkConnector && agfMetadata) {
         gfkConnector.init(function (gfkLinkID) {
             agfMetadata.nol_c20 = 'p20,' + gfkLinkID
@@ -351,6 +357,15 @@ console.log('VideoOnDemandPlayer');
     } else {
         setupPlayer()
     }
+
+    return {
+        play: function() {
+            player.play()
+        },
+        pause: function() {
+            player.pause()
+        }
+    }
 }
 
 export default VideoOnDemandPlayer

package/dist/views/components/video/video_element.hbs

@@ -1,5 +1,5 @@
 <div class="c-videoplayer">
-    <div id="{{nextRandom}}" class="relative js-load" data-new-hr-mediaplayer-loader='{
+    <div x-show="videoStart" x-transition.duration.100ms id="{{nextRandom}}" class="js-load" data-new-hr-mediaplayer-loader-ds='{
         "type": "ondemand",
         "position": "{{if _isTeaser 'teaser' 'page'}}",
         "teaserSize" : "{{if ../../this.teasersize ../../this.teasersize '00' }}",
@@ -59,19 +59,26 @@
                 <span class="js-geotag c-teaser__geotag" aria-hidden="true">{{this.[0].title~}}</span>
             {{/with~}}
         {{/unless}}
-        {{#if _isTeaser}}
-            {{#with _teaser}}
+        
+    </div>
+    
+    {{#if _isTeaser}}
+    <div class="relative" x-show="!videoStart" x-transition.duration.100ms>
+        {{#with _teaser}}
+            
                 {{~#if ../_isCopyText~}}
                     {{~> components/base/image/responsive_image this.teaserImage type=(if this.teaserType this.teaserType 'story') variant=(if this.content.imageVariant this.content.imageVariant '100-copytext')  _addClassImg="ar__content" _noDelay=../_noDelay ~}}
                 {{else}}
                     {{#>components/base/link _cssClasses="c-teaser__mediaLink" _isAriaHidden=true
-                                 _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize
-                                 _clickLabelPrefix2="mediaLink" }}                       
+                                _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize
+                                _clickLabelPrefix2="mediaLink" }}                       
                         {{~> components/base/image/responsive_image this.teaserImage type=(if this.teaserType this.teaserType 'story') variant=(if this.content.imageVariant this.content.imageVariant '100-copytext')  _addClassImg="js-mediaplayer__area ar__content mediaPlayerLoader__mediaplayerArea" _noDelay=../../_noDelay ~}}
                     {{/components/base/link }}
                 {{/if}}
-            {{/with}}
-            {{> components/button/button_round _isButton="true" _addClass="absolute bottom-0 right-0 my-4 mx-4 js-mediaplayer__button" _showIcon=true _icon="play" _addIconClass="w-6 h-6 inline" _label="Video"}}
-        {{/if}}
-    </div>
+             
+        {{/with}}
+        {{> components/button/button_round _isButton="true" _addClass="absolute bottom-0 right-0 my-4 mx-4 js-mediaplayer__button" _showIcon=true _icon="play" _addIconClass="w-6 h-6 inline" _label="Video" _alpineClick="videoStart = !videoStart"}}
+    </div>   
+    {{/if}}
+    
 </div>

package/package.json

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

package/src/assets/fixtures/site_header/brandNavigation.inc.json

@@ -0,0 +1,69 @@
+[       
+    {
+        "name": "hessenschau.DE",
+        "text": "hessenschau",
+        "site": "hessenscha",
+        "selected": true,
+        "extern": false
+    },
+    {
+        "name": "HR1",
+        "text": "hr1",
+        "site": "hr1",
+        "extern": true
+    },
+    {
+        "name": "HR2",
+        "text": "hr2-kultur",
+        "site": "hr2",
+        "extern": true
+    },
+    {
+        "name": "HR3",
+        "text": "hr3",
+        "site": "hr3",
+        "extern": true
+    },
+    {
+        "name": "HR4",
+        "text": "hr4",
+        "site": "hr4",
+        "extern": true
+    },
+    {
+        "name": "HR-info",
+        "text": "hr-iNFO",
+        "site": "hr-inforadio",
+        "extern": true
+    },
+    {
+        "name": "you-fm",
+        "text": "YOU FM",
+        "site": "you-fm",
+        "extern": true
+    },
+    {
+        "name": "HR-fernsehen",
+        "text": "hr-fernsehen",
+        "site": "hr-fernsehen",
+        "extern": true
+    },
+    {
+        "name": "HR-Sinfonieorchester",
+        "text": "hr-Sinfonieorchester",
+        "site": "hr-sinfonieorchester",
+        "extern": true
+    },
+    {
+        "name": "HR-Bigband",
+        "text": "hr-Bigband",
+        "site": "hr-bigband",
+        "extern": true
+    },
+    {
+        "name": "Der HR",
+        "text": "Der hr",
+        "site": "hr",
+        "extern": true
+    }
+]