hr-design-system-handlebars 1.40.3 → 1.42.0

package/dist/views/components/podcast/podcast_player.hbs

@@ -52,11 +52,10 @@
 
     {{!-- Player UI --}}
     <div class="flex {{inline-switch this.realTeaserSize '["100","50"]' '["lg:pr-48 lg:-mt-14"," "]'}}" 
-      x-data="playaudio()"
+      x-data="podcastPlayer()"
       x-init="listenToGlobalStop()"
       ax-load
-      x-ignore
-      ax-load-src={{resourceUrl "assets/js/vendor/podcast_player.alpine.js" }}>
+      x-ignore>
       {{> components/podcast/components/podcast_player_ui 
         _isPlaylistPlayer=false
         _podcastDuration=duration

package/dist/views/components/podcast/podcast_playlist_player-inline.hbs

@@ -1,11 +1,10 @@
 {{~#with this.remainingPlaylistItems}}
 
   <div  class="flex flex-col col-span-12 gap-5 px-5"
-    x-data="playaudio()" 
+    x-data="podcastPlayer()" 
     x-init="listenToGlobalStop()" 
     ax-load 
-    x-ignore
-    ax-load-src={{resourceUrl "assets/js/vendor/podcast_player.alpine.js" }}>
+    x-ignore>
       {{#each this}}
         <div class="flex pb-5 {{#if @first}}pt-5 border-t border-white {{/if}}{{#unless @last}}border-white border-b{{/unless}}">
           {{> components/podcast/components/podcast_player_ui

package/dist/views/components/podcast/podcast_playlist_player.hbs

@@ -44,11 +44,10 @@
 
 {{!-- Player UI --}}
 <div  class="flex flex-col col-span-12 gap-5 px-5 {{#if _isArticlePlayer }}pt-5 {{/if}} "
-  x-data="playaudio()" 
+  x-data="podcastPlayer()" 
   x-init="listenToGlobalStop()" 
   ax-load 
-  x-ignore
-  ax-load-src={{resourceUrl "assets/js/vendor/podcast_player.alpine.js" }}>
+  x-ignore>
     {{#each this.playlistItems}}
       <div class="flex pb-5 {{#unless @last}}border-white border-b{{/unless}}">
         {{> components/podcast/components/podcast_player_ui

package/dist/views/components/podcast/podcast_playlist_player_all_episodes.hbs

@@ -46,11 +46,10 @@
 
 {{!-- Player UI --}}
 <div  class="flex flex-col col-span-12 gap-5 px-5"
-  x-data="playaudio()" 
+  x-data="podcastPlayer()" 
   x-init="listenToGlobalStop()" 
   ax-load 
-  x-ignore
-  ax-load-src={{resourceUrl "assets/js/vendor/podcast_player.alpine.js" }}>
+  x-ignore>
     {{#each this.allPlaylistItems}}
       <div class="flex pb-5 {{#unless @last}}border-white border-b{{/unless}}">
         {{> components/podcast/components/podcast_player_ui

package/dist/views_static/components/base/image/responsive_image.hbs

@@ -16,7 +16,7 @@
         <picture class="{{~#if ../_addClass}} {{../_addClass}}{{/if}}">
             {{#unless _disableNoScript}}
                 <noscript>
-                    <img class="{{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" src="{{this.fallback}}" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}">
+                    <img class="w-full{{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" src="{{this.fallback}}" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}">
                 </noscript>
             {{/unless}}
             {{#with this.sources}}
@@ -26,7 +26,7 @@
                            {{#with this.srcset}} srcset="{{this}}"{{/with}}>
                 {{/each}}
             {{/with}}
-                <img class="{{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" loading="{{#if ../_noDelay}}auto{{else}}lazy{{/if}}" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}" {{~#if ../_errorHandler }} onerror="this.onerror=null; {{../_errorHandler}}"{{/if}}>
+                <img class="w-full{{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" loading="{{#if ../_noDelay}}auto{{else}}lazy{{/if}}" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}" {{~#if ../_errorHandler }} onerror="this.onerror=null; {{../_errorHandler}}"{{/if}}>
         </picture>
     {{/if}}
 
@@ -35,14 +35,14 @@
             {{~#with ../../_addClass }}<div class="{{this}}">{{/with}}
             {{#unless ../../_disableNoScript}}
                 <noscript>
-                    <img class="{{~#if ../../_addClassImg}} {{../../_addClassImg}}{{/if}}" src="{{../this.fallback}}" alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}">
+                    <img class="w-full{{~#if ../../_addClassImg}} {{../../_addClassImg}}{{/if}}" src="{{../this.fallback}}" alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}">
                 </noscript>
             {{/unless}}
             <img {{#with this.sizes}}sizes="{{this}}" {{/with~}}
                     loading="{{#if ../../_noDelay}}auto{{else}}lazy{{/if}}"
                  {{#with this.srcset}} {{#if ../../../_noDelay}}srcset{{else}}data-srcset{{/if}}="{{this}}"{{/with}}
                 src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
-                alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}" class="{{~#with ../../_addClassImg }} {{this}}{{/with}}" {{~#if ../../_errorHandler}} onerror="this.onerror=null; {{../../_errorHandler}}" {{~/if}}>
+                alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}" class="w-full{{~#with ../../_addClassImg }} {{this}}{{/with}}" {{~#if ../../_errorHandler}} onerror="this.onerror=null; {{../../_errorHandler}}" {{~/if}}>
             {{~#with ../../_addClass }}</div>{{/with}}
         {{/with}}
 

package/dist/views_static/components/horizontal_scroll_container/horizontal_scroll_container.hbs

@@ -4,7 +4,6 @@
     class="relative w-full"
     ax-load 
     x-ignore
-    ax-load-src={{resourceUrl "assets/js/vendor/horizontal_scroll_container.alpine.js" }}
     >
     <template x-if="isScrollable && $screen('{{_viewport}}')">
         <div>

package/dist/views_static/components/podcast/podcast_player.hbs

@@ -52,11 +52,10 @@
 
     {{!-- Player UI --}}
     <div class="flex {{inline-switch this.realTeaserSize '["100","50"]' '["lg:pr-48 lg:-mt-14"," "]'}}" 
-      x-data="playaudio()"
+      x-data="podcastPlayer()"
       x-init="listenToGlobalStop()"
       ax-load
-      x-ignore
-      ax-load-src={{resourceUrl "assets/js/vendor/podcast_player.alpine.js" }}>
+      x-ignore>
       {{> components/podcast/components/podcast_player_ui 
         _isPlaylistPlayer=false
         _podcastDuration=duration

package/dist/views_static/components/podcast/podcast_playlist_player-inline.hbs

@@ -1,11 +1,10 @@
 {{~#with this.remainingPlaylistItems}}
 
   <div  class="flex flex-col col-span-12 gap-5 px-5"
-    x-data="playaudio()" 
+    x-data="podcastPlayer()" 
     x-init="listenToGlobalStop()" 
     ax-load 
-    x-ignore
-    ax-load-src={{resourceUrl "assets/js/vendor/podcast_player.alpine.js" }}>
+    x-ignore>
       {{#each this}}
         <div class="flex pb-5 {{#if @first}}pt-5 border-t border-white {{/if}}{{#unless @last}}border-white border-b{{/unless}}">
           {{> components/podcast/components/podcast_player_ui

package/dist/views_static/components/podcast/podcast_playlist_player.hbs

@@ -44,11 +44,10 @@
 
 {{!-- Player UI --}}
 <div  class="flex flex-col col-span-12 gap-5 px-5 {{#if _isArticlePlayer }}pt-5 {{/if}} "
-  x-data="playaudio()" 
+  x-data="podcastPlayer()" 
   x-init="listenToGlobalStop()" 
   ax-load 
-  x-ignore
-  ax-load-src={{resourceUrl "assets/js/vendor/podcast_player.alpine.js" }}>
+  x-ignore>
     {{#each this.playlistItems}}
       <div class="flex pb-5 {{#unless @last}}border-white border-b{{/unless}}">
         {{> components/podcast/components/podcast_player_ui

package/dist/views_static/components/podcast/podcast_playlist_player_all_episodes.hbs

@@ -46,11 +46,10 @@
 
 {{!-- Player UI --}}
 <div  class="flex flex-col col-span-12 gap-5 px-5"
-  x-data="playaudio()" 
+  x-data="podcastPlayer()" 
   x-init="listenToGlobalStop()" 
   ax-load 
-  x-ignore
-  ax-load-src={{resourceUrl "assets/js/vendor/podcast_player.alpine.js" }}>
+  x-ignore>
     {{#each this.allPlaylistItems}}
       <div class="flex pb-5 {{#unless @last}}border-white border-b{{/unless}}">
         {{> components/podcast/components/podcast_player_ui

package/package.json

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

package/src/assets/js/alpine.js

@@ -0,0 +1,47 @@
+import AsyncAlpine from 'async-alpine'
+import collapse from '@alpinejs/collapse'
+import Toolkit from '@alpine-collective/toolkit'
+import Alpine from 'alpinejs'
+import mainNavigationHandler from 'components/site_header/mainNavigationHandler.alpine'
+import flyoutHandler from 'components/site_header/flyoutHandler.alpine'
+import overlayHandler from 'components/site_header/overlayHandler.alpine'
+import dropdown from 'components/site_header/dropdown.alpine'
+
+AsyncAlpine.init(Alpine)
+    .data('podcastPlayer', () => import('components/podcast/podcast_player.alpine.js'))
+    .data('slider', () =>
+        import('components/horizontal_scroll_container/horizontal_scroll_container.alpine.js')
+    )
+    .start()
+
+window.Alpine = Alpine
+
+// Initialization of plugins, stores and data needs to be done before the call the Alpine.start()
+
+// Initialization of stores
+Alpine.store('clientHeight', document.documentElement.clientHeight || document.body.clientHeight)
+Alpine.store('clientWidth', document.documentElement.clientWidth || document.body.clientWidth)
+Alpine.store('burgeropen', false)
+Alpine.store('searchFieldOpen', false)
+Alpine.store('serviceNavIsOpen', false)
+Alpine.store('searchID', {
+    current: '{{nextRandom}}',
+})
+Alpine.store('serviceID', {
+    open: false,
+    current: '0',
+})
+Alpine.store('navIsVisible', true)
+Alpine.store('subNavIsVisible', false)
+
+// Initialization of data handlers
+Alpine.data('mainNavigationHandler', mainNavigationHandler)
+Alpine.data('overlayHandler', overlayHandler)
+Alpine.data('flyoutHandler', flyoutHandler)
+Alpine.data('dropdown', dropdown)
+
+// Initialization of plugins
+Alpine.plugin(Toolkit)
+Alpine.plugin(collapse)
+
+Alpine.start()

package/src/stories/views/components/base/image/responsive_image.hbs

@@ -16,7 +16,7 @@
         <picture class="{{~#if ../_addClass}} {{../_addClass}}{{/if}}">
             {{#unless _disableNoScript}}
                 <noscript>
-                    <img class="{{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" src="{{this.fallback}}" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}">
+                    <img class="w-full{{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" src="{{this.fallback}}" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}">
                 </noscript>
             {{/unless}}
             {{#with this.sources}}
@@ -26,7 +26,7 @@
                            {{#with this.srcset}} srcset="{{this}}"{{/with}}>
                 {{/each}}
             {{/with}}
-                <img class="{{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" loading="{{#if ../_noDelay}}auto{{else}}lazy{{/if}}" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}" {{~#if ../_errorHandler }} onerror="this.onerror=null; {{../_errorHandler}}"{{/if}}>
+                <img class="w-full{{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" loading="{{#if ../_noDelay}}auto{{else}}lazy{{/if}}" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}" {{~#if ../_errorHandler }} onerror="this.onerror=null; {{../_errorHandler}}"{{/if}}>
         </picture>
     {{/if}}
 
@@ -35,14 +35,14 @@
             {{~#with ../../_addClass }}<div class="{{this}}">{{/with}}
             {{#unless ../../_disableNoScript}}
                 <noscript>
-                    <img class="{{~#if ../../_addClassImg}} {{../../_addClassImg}}{{/if}}" src="{{../this.fallback}}" alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}">
+                    <img class="w-full{{~#if ../../_addClassImg}} {{../../_addClassImg}}{{/if}}" src="{{../this.fallback}}" alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}">
                 </noscript>
             {{/unless}}
             <img {{#with this.sizes}}sizes="{{this}}" {{/with~}}
                     loading="{{#if ../../_noDelay}}auto{{else}}lazy{{/if}}"
                  {{#with this.srcset}} {{#if ../../../_noDelay}}srcset{{else}}data-srcset{{/if}}="{{this}}"{{/with}}
                 src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
-                alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}" class="{{~#with ../../_addClassImg }} {{this}}{{/with}}" {{~#if ../../_errorHandler}} onerror="this.onerror=null; {{../../_errorHandler}}" {{~/if}}>
+                alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}" class="w-full{{~#with ../../_addClassImg }} {{this}}{{/with}}" {{~#if ../../_errorHandler}} onerror="this.onerror=null; {{../../_errorHandler}}" {{~/if}}>
             {{~#with ../../_addClass }}</div>{{/with}}
         {{/with}}
 

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

@@ -4,7 +4,6 @@
     class="relative w-full"
     ax-load 
     x-ignore
-    ax-load-src={{resourceUrl "assets/js/vendor/horizontal_scroll_container.alpine.js" }}
     >
     <template x-if="isScrollable && $screen('{{_viewport}}')">
         <div>

package/src/stories/views/components/podcast/podcast_player.alpine.js

@@ -0,0 +1,194 @@
+export default function playaudio() {
+    return {
+        dispatchCustomEvent(
+            eventName,
+            { data = undefined, element = document, handleIframe = false, id = undefined } = {}
+        ) {
+            let event
+
+            if (undefined != data) {
+                data = { detail: data }
+                event = new CustomEvent(eventName, data)
+            } else {
+                if (typeof Event === 'function') {
+                    event = new Event(eventName)
+                } else {
+                    event = document.createEvent('Event')
+                    event.initEvent(eventName, true, true)
+                }
+            }
+            if (undefined !== id) {
+                event.id = id
+            }
+
+            if (handleIframe) {
+                if (document.getElementById('js-iFrame')) {
+                    document.getElementById('js-iFrame').contentWindow.document.dispatchEvent(event)
+                }
+                if (this.inIframe()) {
+                    parent.document.dispatchEvent(event)
+                }
+            }
+
+            element.dispatchEvent(event)
+        },
+        inIframe() {
+            try {
+                return window.self !== window.top
+            } catch (e) {
+                return true
+            }
+        },
+        playerCount: 0,
+        playlist: {},
+        registerPlayer(duration, id) {
+            let _player = {}
+            _player.id = id
+            _player.button = document.querySelector('#playbutton' + id)
+            _player.playIcon = _player.button.querySelector('.js-playbutton')
+            _player.pauseIcon = _player.button.querySelector('.js-pausebutton')
+            _player.range = document.querySelector('#range' + id)
+            _player.timeDisplay = document.querySelector('#timedisplay' + id)
+            _player.audioElement = this.$el
+            _player.audioSrc = this.$el.querySelector('source').src
+            _player.duration = duration
+            _player.currentlyPlaying = false
+            _player.init = false
+            _player.firstPlay = true
+
+            // this.playerCount == 0 ? _player.range.parentNode.classList.remove('hidden') : _player.range.parentNode.classList.add('hidden')
+            this.playerCount++
+
+            this.playlist[id] = _player
+        },
+        listenToGlobalStop() {
+            console.log('global listener init')
+            document.addEventListener(
+                'hr:global:stopOtherAVs',
+                this.stopAllPlayersBecauseOfGlobalStop.bind(this)
+            )
+        },
+        rangeInput(id) {
+            if (this.playlist[id].init == false) {
+                this.playAndStop(id)
+                this.playAndStop(id)
+            }
+            this.playlist[id].audioElement.currentTime =
+                (this.playlist[id].range.value / 1000) * this.playlist[id].audioElement.duration
+        },
+        setTime(duration, id) {
+            console.log('time set: ' + duration)
+
+            let parts = duration.split(':')
+            if (parts.length < 3) {
+                let minutes = +parts[0]
+                let seconds = +parts[1]
+                var durationSeconds = (minutes * 60 + seconds).toFixed(3)
+            } else {
+                let hours = +parts[0]
+                let minutes = +parts[1]
+                let seconds = +parts[2]
+                var durationSeconds = (hours * 3600 + minutes * 60 + seconds).toFixed(3)
+            }
+
+            let range = document.getElementById('range' + id)
+            range.value = 0
+            this.$el.querySelector('.js-currentTime').innerHTML = this.fancyTimeFormat('0', false)
+            this.$el.querySelector('.js-audioDuration').innerHTML = this.fancyTimeFormat(
+                durationSeconds,
+                true
+            )
+        },
+
+        updateCurrentTime(range, timeDisplay, newTime, id) {
+            timeDisplay.querySelector('.js-currentTime').innerHTML = this.fancyTimeFormat(
+                newTime,
+                false
+            )
+            range.style.background =
+                'linear-gradient(to right, var(--color-podcast) ' +
+                range.value / 10 +
+                '%, white ' +
+                range.value / 10 +
+                '% )'
+            range.value = ((100 * newTime) / this.playlist[id].audioElement.duration) * 10
+        },
+
+        playAndStop(id) {
+            console.log('event target: ' + this.$event.currentTarget.id)
+            console.log('playlist: ', this.playlist)
+            if (this.playlist[id].init == true) {
+                this.stopAudio(id)
+            } else {
+                this.stopAllOtherPlayers(id, false)
+                this.startAudio(id)
+                this.playlist[id].range.parentNode.classList.remove('max-h-0')
+                this.playlist[id].range.parentNode.classList.add('max-h-9')
+                this.playlist[id].playIcon.classList.add('hidden')
+                this.playlist[id].pauseIcon.classList.remove('hidden')
+                this.dispatchCustomEvent('hr:global:stopOtherAVs', { handleIframe: true, id: id })
+            }
+        },
+
+        stopAllOtherPlayers(id, preventMinimize) {
+            for (const index in this.playlist) {
+                if (index != id) {
+                    console.log('STOP: ', index)
+                    this.stopAudio(index)
+                    if (!preventMinimize) {
+                        this.playlist[index].range.parentNode.classList.add('max-h-0')
+                        this.playlist[index].range.parentNode.classList.remove('max-h-9')
+                    }
+                }
+            }
+        },
+        stopAllPlayersBecauseOfGlobalStop(event) {
+            this.stopAllOtherPlayers(event.id, true)
+        },
+        startAudio(id) {
+            console.log('start audio ' + id)
+            if (this.playlist[id].init == false) {
+                this.initAudioEventListener(id)
+                this.playlist[id].init = true
+            }
+            this.playlist[id].audioElement.play()
+            this.playlist[id].currentlyPlaying = true
+        },
+
+        stopAudio(id) {
+            this.playlist[id].audioElement.pause()
+            this.playlist[id].init = false
+            this.playlist[id].currentlyPlaying = false
+            this.playlist[id].playIcon.classList.remove('hidden')
+            this.playlist[id].pauseIcon.classList.add('hidden')
+        },
+
+        initAudioEventListener(id) {
+            let _audioElement = this.playlist[id].audioElement
+            let _range = this.playlist[id].range
+            let _timeDisplay = this.playlist[id].timeDisplay
+            _audioElement.ontimeupdate = (event) => {
+                this.updateCurrentTime(_range, _timeDisplay, _audioElement.currentTime, id)
+            }
+        },
+
+        fancyTimeFormat(duration, measure) {
+            var hrs = ~~(duration / 3600)
+            var mins = ~~((duration % 3600) / 60)
+            var secs = ~~duration % 60
+
+            var ret = ''
+            if (hrs > 0) {
+                ret += '' + hrs + ':' + (mins < 10 ? '0' : '')
+            }
+
+            ret += '' + mins + ':' + (secs < 10 ? '0' : '')
+            ret += '' + secs
+
+            if (measure) {
+                hrs > 0 ? (ret += ' Std.') : (ret += ' Min.')
+            }
+            return ret
+        },
+    }
+}

package/src/stories/views/components/podcast/podcast_player.hbs

@@ -52,11 +52,10 @@
 
     {{!-- Player UI --}}
     <div class="flex {{inline-switch this.realTeaserSize '["100","50"]' '["lg:pr-48 lg:-mt-14"," "]'}}" 
-      x-data="playaudio()"
+      x-data="podcastPlayer()"
       x-init="listenToGlobalStop()"
       ax-load
-      x-ignore
-      ax-load-src={{resourceUrl "assets/js/vendor/podcast_player.alpine.js" }}>
+      x-ignore>
       {{> components/podcast/components/podcast_player_ui 
         _isPlaylistPlayer=false
         _podcastDuration=duration

package/src/stories/views/components/podcast/podcast_playlist_player-inline.hbs

@@ -1,11 +1,10 @@
 {{~#with this.remainingPlaylistItems}}
 
   <div  class="flex flex-col col-span-12 gap-5 px-5"
-    x-data="playaudio()" 
+    x-data="podcastPlayer()" 
     x-init="listenToGlobalStop()" 
     ax-load 
-    x-ignore
-    ax-load-src={{resourceUrl "assets/js/vendor/podcast_player.alpine.js" }}>
+    x-ignore>
       {{#each this}}
         <div class="flex pb-5 {{#if @first}}pt-5 border-t border-white {{/if}}{{#unless @last}}border-white border-b{{/unless}}">
           {{> components/podcast/components/podcast_player_ui

package/src/stories/views/components/podcast/podcast_playlist_player.hbs

@@ -44,11 +44,10 @@
 
 {{!-- Player UI --}}
 <div  class="flex flex-col col-span-12 gap-5 px-5 {{#if _isArticlePlayer }}pt-5 {{/if}} "
-  x-data="playaudio()" 
+  x-data="podcastPlayer()" 
   x-init="listenToGlobalStop()" 
   ax-load 
-  x-ignore
-  ax-load-src={{resourceUrl "assets/js/vendor/podcast_player.alpine.js" }}>
+  x-ignore>
     {{#each this.playlistItems}}
       <div class="flex pb-5 {{#unless @last}}border-white border-b{{/unless}}">
         {{> components/podcast/components/podcast_player_ui

package/src/stories/views/components/podcast/podcast_playlist_player_all_episodes.hbs

@@ -46,11 +46,10 @@
 
 {{!-- Player UI --}}
 <div  class="flex flex-col col-span-12 gap-5 px-5"
-  x-data="playaudio()" 
+  x-data="podcastPlayer()" 
   x-init="listenToGlobalStop()" 
   ax-load 
-  x-ignore
-  ax-load-src={{resourceUrl "assets/js/vendor/podcast_player.alpine.js" }}>
+  x-ignore>
     {{#each this.allPlaylistItems}}
       <div class="flex pb-5 {{#unless @last}}border-white border-b{{/unless}}">
         {{> components/podcast/components/podcast_player_ui

package/src/stories/views/components/site_header/dropdown.alpine.js

@@ -0,0 +1,77 @@
+export default () => ({
+    // state of the dropdown
+    dropped: false,
+    preventDefault(prevDefault, e) {
+        if (prevDefault) {
+            e.preventDefault()
+        }
+    },
+    isDesktopView() {
+        return this.$screen('lg')
+    },
+    // toggle() interpolates state
+    toggle() {
+        this.dropped = !this.dropped
+    },
+    correctFlyoutPos() {
+        if (this.$screen('lg')) {
+            let elementBoundingClientRec = this.$el.getBoundingClientRect()
+            let parentElementBoundingClientRec = this.$el
+                .closest('.relative')
+                .getBoundingClientRect()
+            this.$el.parentNode.querySelector('.sb-navigation-flyout').style.left =
+                elementBoundingClientRec.left - Math.abs(parentElementBoundingClientRec.left) + 'px'
+        } else {
+            this.$el.parentNode.querySelector('.sb-navigation-flyout').style.left = '0px'
+        }
+    },
+    // toggles visibility of service nav and sets global variables in stores
+    toggleServiceNav() {
+        this.dropped = !this.dropped
+
+        // close search if open
+        this.$store.searchFieldOpen = false
+
+        // if clicked element is not the current serviceID, leave the servicenav open, else interpolate servicenav state
+        this.$el.id != this.$store.serviceID.current
+            ? (this.$store.serviceNavIsOpen = true)
+            : this.$el.id == this.$store.serviceID.current
+            ? (this.$store.serviceNavIsOpen = !this.$store.serviceNavIsOpen)
+            : null
+
+        //if burger is open, dispatch event to close it
+        this.$store.burgeropen == true ? this.$dispatch('burger-close') : null
+
+        console.log('currentID: ' + this.$store.serviceID.current)
+        console.log('target-id: ' + this.$event.target.id)
+        console.log('element-id: ' + this.$el.id)
+        console.log('serviceNav is open:' + this.$store.serviceNavIsOpen)
+
+        //set the serviceID to the current element´s ID.
+        this.$store.serviceID.current = this.$el.id
+
+        //enable/disable scrolling
+        this.toggleScrolling(!this.$store.serviceNavIsOpen)
+
+        //defines behaviour for servicenav on mobile viewports, taking care of viewport sizes
+        let myFlyout = document.querySelector('#flyout-' + this.$el.id)
+        let brandNavHeight = this.percent > 0 ? 40 : 0
+
+        if (this.$store.serviceNavIsOpen == true && this.dropped == true) {
+            window.setTimeout(function () {
+                if (myFlyout.scrollHeight > window.innerHeight - myFlyout.offsetTop) {
+                    myFlyout.style.height = 'auto'
+                    window.innerWidth < 768
+                        ? (myFlyout.style.maxHeight =
+                              window.innerHeight - myFlyout.offsetTop - 80 + brandNavHeight + 'px')
+                        : (myFlyout.style.maxHeight =
+                              window.innerHeight - myFlyout.offsetTop - 40 + brandNavHeight + 'px')
+                    myFlyout.style.overflowY = 'scroll'
+                } else {
+                    myFlyout.style.maxHeight = ''
+                    //myFlyout.style.overflowY = 'hidden'
+                }
+            }, 150)
+        }
+    },
+})