hr-design-system-handlebars 1.41.0 → 1.42.0

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/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.41.0",
+    "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/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)
+        }
+    },
+})

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

@@ -0,0 +1,54 @@
+export default () => ({
+    init() {
+        //Initial: x-collapse only on mobile/tablet
+        if (window.innerWidth < 1024) {
+            this.$el.setAttribute('x-collapse', '')
+        }
+    },
+
+    //Adds scrollheight of the flyout to sectionNav container to make sure all following items stay visible
+    sectionNavFlyoutWatcher() {
+        this.$watch('dropped', (value) => {
+            let a = this.$refs.sectionnavigation.scrollHeight + this.$el.scrollHeight
+            let brandNavHeight = this.percent > 0 ? 40 : 0
+            if (window.innerWidth < 1024) {
+                if (value == true) {
+                    if (a < window.innerHeight - this.$refs.sectionnavigation.offsetTop) {
+                        this.$refs.sectionnavigation.style.maxHeight = a + 'px'
+                        this.$refs.sectionnavigation.style.overflowY = 'hidden'
+                    } else {
+                        this.$refs.sectionnavigation.style.maxHeight =
+                            window.innerHeight -
+                            this.$refs.sectionnavigation.offsetTop +
+                            brandNavHeight +
+                            'px'
+                        this.$refs.sectionnavigation.style.overflowY = 'scroll'
+                    }
+                } else {
+                    if (a < window.innerHeight - this.$refs.sectionnavigation.offsetTop) {
+                        this.$refs.sectionnavigation.style.overflowY = 'hidden'
+                    } else {
+                        this.$refs.sectionnavigation.style.overflowY = 'scroll'
+                    }
+                }
+            }
+        })
+    },
+
+    //sets/cleansup the x-collapse attributes depending on window.innerWidth, gets fired @resize.window in NavigationFlyout.hbs
+    setFlyoutAnimationStyle() {
+        if (window.innerWidth > 1023) {
+            if (this.$el.hasAttribute('x-collapse.duration.500ms')) {
+                this.$el.removeAttribute('x-collapse.duration.500ms')
+                delete this.$el._x_transition
+                this.$el.style.removeProperty('overflow')
+                this.$el.style.removeProperty('height')
+                if (!this.$el._x_isShown) this.$el.style.display = 'none'
+                if (this.$el.hasAttribute('hidden')) this.$el.removeAttribute('hidden')
+            }
+        } else {
+            if (!this.$el.hasAttribute('x-collapse.duration.500ms'))
+                this.$el.setAttribute('x-collapse.duration.500ms', '')
+        }
+    },
+})