hr-design-system-handlebars 1.38.0 → 1.38.2

package/dist/views_static/components/socialmedia/socialmedia.hbs

@@ -0,0 +1,78 @@
+<div class="w-full flex px-3 first:border-t last:pb-6 border-[#797979] -socialsharing">
+    <div class="flex flex-wrap justify-start p-0 m-0 -mx-3">
+        <span class="inline-flex text-2xl font-heading">{{loca "share_headline" }}</span><!--
+        -->
+        <ul class="flex flex-wrap w-full px-5 lg:px-0 -socialsharing">
+            {{~#with this.twitterLink ~}}
+                <li class="inline-flex pl-10 mr-6 lg:ml-0">
+                    <a class="link--shareIcon touchArea{{#with ../../this.content.trackingData}} js-load{{/with}}"
+                       href="{{this}}"
+                       target="_blank"
+                       rel="noopener noreferrer"
+                       title="{{loca "share_twitter_linktitle" }}"
+                        {{#with ../../this.content.trackingData}}
+                       data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::twitter"}]}'
+                        {{/with}}
+                    >
+                        {{~> components/base/image/icon _addClass="w-8 h-8 rounded-lg fill-[#55acee]" _icon="twitter" _iconmap="icons" ~}}
+                    </a>
+                </li>
+            {{~/with~}}
+            {{~#with this.facebookLink ~}}
+                <li class="inline-flex pl-10 mr-6 lg:ml-0">
+                    <a class="link--shareIcon touchArea{{#with ../../this.content.trackingData}} js-load{{/with}}"
+                       href="{{this}}"
+                       target="_blank"
+                       rel="noopener noreferrer"
+                       title="{{loca "share_facebook_linktitle" }}"
+                        {{#with ../../this.content.trackingData}}
+                       data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::facebook"}]}'
+                        {{/with}}
+                    >
+                        {{~> components/base/image/icon _addClass="icon--facebook" _icon="facebook-ds" _iconmap="icons" ~}}
+                    </a>
+                </li>
+            {{~/with~}}
+            {{~#with this.whatsappLink ~}}
+                <li class="inline-flex pl-10 mr-6 lg:ml-0 list__item--whatsapp">
+                    <a class="link--shareIcon touchArea{{#with ../../this.content.trackingData}} js-load{{/with}}"
+                       href="{{this}}"
+                       target="_blank"
+                       rel="noopener noreferrer"
+                       title="{{loca "share_whatsapp_linktitle" }}"
+                        {{#with ../../this.content.trackingData}}
+                       data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::whatsapp"}]}'
+                        {{/with}}
+                    >
+                        {{~> components/base/image/icon _addClass="icon--whatsapp" _icon="whatsapp-ds" _iconmap="icons" ~}}
+                    </a>
+                </li>
+            {{~/with~}}
+            {{~#with this.mailtoLink ~}}
+                <li class="inline-flex pl-10 mr-6 lg:ml-0">
+                    <a class="link--shareIcon touchArea{{#with ../../this.content.trackingData}} js-load{{/with}}"
+                       href="{{this}}"
+                       title="{{loca "share_mail_linktitle" }}"
+                        {{#with ../../this.content.trackingData}}
+                       data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::mailto"}]}'
+                        {{/with}}
+                    >
+                        {{~> components/base/image/icon _addClass="icon--mailto" _icon="mail-ds" _iconmap="icons" ~}}
+                    </a>
+                </li>
+            {{~/with~}}
+
+            <li class="inline-flex pl-10 mr-6 lg:ml-0">
+                <a class="link--shareIcon touchArea{{#with ../this.content.trackingData}} js-load{{/with}}"
+                   href="javascript:window.print()"
+                   title="{{loca "share_print_linktitle" }}"
+                    {{#with ../this.content.trackingData}}
+                   data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::printbutton"}]}'
+                    {{/with}}
+                >
+                    {{~> components/base/image/icon _addClass="icon--print" _icon="print" _iconmap="icons" ~}}
+                </a>
+            </li>
+        </ul>
+    </div>
+</div>

package/dist/views_static/components/socialmedia/socialmedia_compact.hbs

@@ -0,0 +1,25 @@
+<div class="c-shareCompact">
+    <div class="c-shareCompact__wrapper -isClosed js-share-compact-wrapper js-load"
+         data-hr-share-compact='{"title":"{{../this.escapedTitle}}", "url":"{{../this.socialSharingUrl}}" }'>
+        <div class="c-shareCompact__mainButton">
+            <button class="link--shareIcon touchArea "
+                    id="{{../this.anchor}}-s"
+                    rel="noopener noreferrer"
+                    title="{{loca "share_headline" }}"
+            >
+                {{~> base/image/icon _addClass="icon--teilen-button" _icon="teilen-button" _iconmap="icons" ~}}
+            </button>
+
+        </div>
+        <div class="c-shareCompact__shareButtons hide">
+            <ul>
+                {{~> modules/socialmedia/shareCompact-icons ~}}
+            </ul>
+        </div>
+        <div class="c-shareCompact__message hide">
+            {{~> base/image/icon _addClass="" _icon="status-done" _iconmap="icons" ~}}
+            {{loca "ticker_sharing_message" }}
+        </div>
+    </div>
+
+</div>

package/dist/views_static/components/socialmedia/socialmedia_compact_icons.hbs

@@ -0,0 +1,61 @@
+{{~#with this.twitterLink ~}}
+    <li class="c-shareCompact__item">
+        <a class="c-shareCompact__link touchArea js-shareLinkTwitter"
+           href="{{this}}"
+           target="_blank"
+           rel="noopener noreferrer"
+           title="{{loca "share_twitter_linktitle" }}"
+        >
+            {{~> base/image/icon _addClass="icon--twitter" _icon="twitter" _iconmap="icons" ~}}
+        </a>
+    </li>
+{{~/with~}}
+{{~#with this.facebookLink ~}}
+    <li class="c-shareCompact__item">
+        <a class="c-shareCompact__link touchArea js-shareLinkFacebook"
+           href="{{this}}"
+           target="_blank"
+           rel="noopener noreferrer"
+           title="{{loca "share_facebook_linktitle" }}"
+        >
+            {{~> base/image/icon _addClass="icon--facebook" _icon="facebook" _iconmap="icons" ~}}
+        </a>
+    </li>
+{{~/with~}}
+{{~#with this.whatsappLink ~}}
+    <li class="c-shareCompact__item -whatsapp">
+        <a class="c-shareCompact__link touchArea js-shareLinkWhatsapp"
+           href="{{this}}"
+           target="_blank"
+           rel="noopener noreferrer"
+           title="{{loca "share_whatsapp_linktitle" }}"
+        >
+            {{~> base/image/icon _addClass="icon--whatsapp" _icon="whatsapp" _iconmap="icons" ~}}
+        </a>
+    </li>
+{{~/with~}}
+{{~#with this.mailtoLink ~}}
+    <li class="c-shareCompact__item ">
+        <a class="c-shareCompact__link touchArea js-shareLinkMail"
+           href="{{this}}"
+           title="{{loca "share_mail_linktitle" }}"
+            {{#with ../../this.content.trackingData}}
+           data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "newSocialShareClick::compact-mailto"}]}'
+            {{/with}}
+        >
+            {{~> base/image/icon _addClass="icon--mailto" _icon="mail" _iconmap="icons" ~}}
+        </a>
+    </li>
+{{~/with~}}
+
+<li class="c-shareCompact__item -copy">
+    <button class="c-shareCompact__link touchArea js-shareLinkCopy"
+
+            title="{{loca "share_copy_linktitle" }}"
+        {{#with ../../this.content.trackingData}}
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "newSocialShareClick::compact-copy"}]}'
+        {{/with}}
+    >
+        {{~> base/image/icon _addClass="icon--mailto" _icon="copy" _iconmap="icons" ~}}
+    </button>
+</li>

package/package.json

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

package/src/assets/vendor/js/podcast_player.alpine.js

@@ -56,12 +56,103 @@ export default function playaudio() {
             _player.init = false
             _player.firstPlay = true
 
+            _player.audioElement.addEventListener('play', handlePlay.bind(this))
+            _player.audioElement.addEventListener('playing', handlePlaying.bind(this))
+            _player.audioElement.addEventListener('pause', handlePause.bind(this))
+            _player.audioElement.addEventListener('waiting', handleWaiting.bind(this))
+            _player.audioElement.addEventListener('ended', handleStopped.bind(this))
+
             // this.playerCount == 0 ? _player.range.parentNode.classList.remove('hidden') : _player.range.parentNode.classList.add('hidden')
             this.playerCount++
 
             this.playlist[id] = _player
 
+            const settings = JSON.parse(this.playlist[id].audioElement.dataset.propMediaMetadata)
+            const avContent = {
+                av_content_id: settings.piano.av_content_id,
+                av_content: settings.piano.av_content,
+                av_content_type: settings.piano.av_content_type,
+                av_content_duration: settings.piano.av_content_duration,
+                av_broadcasting_type: settings.piano.av_broadcasting_type,
+                av_content_theme1: settings.piano.av_content_theme1,
+                hr_document_type: settings.piano.hr_document_type,
+                site_level2_id: settings.piano.site_level2_id,
+            }
+
+            if (settings.piano.av_content_theme2) {
+                avContent.av_content_theme2 = settings.piano.av_content_theme2
+            }
+            if (settings.piano.av_content_theme3) {
+                avContent.av_content_theme3 = settings.piano.av_content_theme3
+            }
+
+            function handlePlay(event) {
+                this.dispatchCustomEvent('hr-avInsights:play', {
+                    data: {
+                        playerId: getPlayerIdForAvInsights(),
+                        cursorPosition: _player.audioElement.currentTime * 1000,
+                        avContent: avContent,
+                    },
+                })
+            }
+
+            function handlePlaying(event) {
+                if (_player.firstPlay) {
+                    this.dispatchCustomEvent('hr-avInsights:playback-start', {
+                        data: {
+                            playerId: getPlayerIdForAvInsights(),
+                            cursorPosition: _player.audioElement.currentTime * 1000,
+                            avContent: avContent,
+                        },
+                    })
+                    _player.firstPlay = false
+                } else {
+                    this.dispatchCustomEvent('hr-avInsights:playback-resumed', {
+                        data: {
+                            playerId: getPlayerIdForAvInsights(),
+                            cursorPosition: _player.audioElement.currentTime * 1000,
+                            avContent: avContent,
+                        },
+                    })
+                }
+            }
+
+            function handleWaiting(event) {
+                this.dispatchCustomEvent('hr-avInsights:buffer-start', {
+                    data: {
+                        playerId: getPlayerIdForAvInsights(),
+                        cursorPosition: _player.audioElement.currentTime * 1000,
+                        avContent: avContent,
+                    },
+                })
+            }
+
+            function handlePause(event) {
+                this.dispatchCustomEvent('hr-avInsights:playback-paused', {
+                    data: {
+                        playerId: getPlayerIdForAvInsights(),
+                        cursorPosition: _player.audioElement.currentTime * 1000,
+                        avContent: avContent,
+                    },
+                })
+            }
+
+            function handleStopped(event) {
+                this.dispatchCustomEvent('hr-avInsights:playback-stopped', {
+                    data: {
+                        playerId: getPlayerIdForAvInsights(),
+                        cursorPosition: _player.audioElement.currentTime * 1000,
+                        avContent: avContent,
+                    },
+                })
+                _player.firstPlay = true
+            }
+
+            function getPlayerIdForAvInsights() {
+                return _player.id + '-' + avContent.av_content_id
+            }
         },
+
         listenToGlobalStop() {
             console.log('global listener init')
             document.addEventListener(

package/src/stories/views/components/article/components/podcast/podcast_episode_article.hbs

@@ -19,7 +19,7 @@
     aria-label='{{loca "appendix_title"}}'>
     <div class="c-appendix">
         {{#unless _webview}}
-            {{~#with this.backLinkUrl ~}}
+           {{!--  {{~#with this.backLinkUrl ~}}
                 {{~> components/base/link/backlink _addClass="appendix__backlink" ~}}
             {{~/with~}}
 
@@ -29,10 +29,10 @@
 
             {{~#with this.topictags ~}}
                 {{~> modules/topictag/topictag-list ~}}
-            {{~/with~}}
+            {{~/with~}} --}}
 
             {{~#with this.socialSharing ~}}
-                {{~> modules/socialmedia/shareit ~}}
+                {{~> components/socialmedia/socialmedia ~}}
             {{~/with~}}
         {{/unless}}
     </div>

package/src/stories/views/components/article/components/podcast/podcast_playlist_all_episodes.hbs

@@ -11,7 +11,7 @@
                 {{~/with~}}
 
                 {{~#with this.socialSharing ~}}
-                    {{~> modules/socialmedia/shareit ~}}
+                    {{~> components/socialmedia/socialmedia ~}}
                 {{~/with~}}
             {{/unless}}
             {{~#with this.programReference~}}

package/src/stories/views/components/article/components/podcast/podcast_playlist_article.hbs

@@ -21,12 +21,12 @@
     <aside class="grid order-2 col-span-3 py-6" aria-label='{{loca "appendix_title"}}'>
         <div class="c-appendix">
             {{#unless _webview}}
-                {{~#with this.backLinkUrl ~}}
+                {{!-- {{~#with this.backLinkUrl ~}}
                     {{~> base/link/backlink _addClass="appendix__backlink" ~}}
-                {{~/with~}}
+                {{~/with~}} --}}
 
                 {{~#with this.socialSharing ~}}
-                    {{~> modules/socialmedia/shareit ~}}
+                    {{~> components/socialmedia/socialmedia ~}}
                 {{~/with~}}
             {{/unless}}
             {{~#with this.programReference~}}

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

@@ -0,0 +1,78 @@
+<div class="w-full flex px-3 first:border-t last:pb-6 border-[#797979] -socialsharing">
+    <div class="flex flex-wrap justify-start p-0 m-0 -mx-3">
+        <span class="inline-flex text-2xl font-heading">{{loca "share_headline" }}</span><!--
+        -->
+        <ul class="flex flex-wrap w-full px-5 lg:px-0 -socialsharing">
+            {{~#with this.twitterLink ~}}
+                <li class="inline-flex pl-10 mr-6 lg:ml-0">
+                    <a class="link--shareIcon touchArea{{#with ../../this.content.trackingData}} js-load{{/with}}"
+                       href="{{this}}"
+                       target="_blank"
+                       rel="noopener noreferrer"
+                       title="{{loca "share_twitter_linktitle" }}"
+                        {{#with ../../this.content.trackingData}}
+                       data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::twitter"}]}'
+                        {{/with}}
+                    >
+                        {{~> components/base/image/icon _addClass="w-8 h-8 rounded-lg fill-[#55acee]" _icon="twitter" _iconmap="icons" ~}}
+                    </a>
+                </li>
+            {{~/with~}}
+            {{~#with this.facebookLink ~}}
+                <li class="inline-flex pl-10 mr-6 lg:ml-0">
+                    <a class="link--shareIcon touchArea{{#with ../../this.content.trackingData}} js-load{{/with}}"
+                       href="{{this}}"
+                       target="_blank"
+                       rel="noopener noreferrer"
+                       title="{{loca "share_facebook_linktitle" }}"
+                        {{#with ../../this.content.trackingData}}
+                       data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::facebook"}]}'
+                        {{/with}}
+                    >
+                        {{~> components/base/image/icon _addClass="icon--facebook" _icon="facebook-ds" _iconmap="icons" ~}}
+                    </a>
+                </li>
+            {{~/with~}}
+            {{~#with this.whatsappLink ~}}
+                <li class="inline-flex pl-10 mr-6 lg:ml-0 list__item--whatsapp">
+                    <a class="link--shareIcon touchArea{{#with ../../this.content.trackingData}} js-load{{/with}}"
+                       href="{{this}}"
+                       target="_blank"
+                       rel="noopener noreferrer"
+                       title="{{loca "share_whatsapp_linktitle" }}"
+                        {{#with ../../this.content.trackingData}}
+                       data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::whatsapp"}]}'
+                        {{/with}}
+                    >
+                        {{~> components/base/image/icon _addClass="icon--whatsapp" _icon="whatsapp-ds" _iconmap="icons" ~}}
+                    </a>
+                </li>
+            {{~/with~}}
+            {{~#with this.mailtoLink ~}}
+                <li class="inline-flex pl-10 mr-6 lg:ml-0">
+                    <a class="link--shareIcon touchArea{{#with ../../this.content.trackingData}} js-load{{/with}}"
+                       href="{{this}}"
+                       title="{{loca "share_mail_linktitle" }}"
+                        {{#with ../../this.content.trackingData}}
+                       data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::mailto"}]}'
+                        {{/with}}
+                    >
+                        {{~> components/base/image/icon _addClass="icon--mailto" _icon="mail-ds" _iconmap="icons" ~}}
+                    </a>
+                </li>
+            {{~/with~}}
+
+            <li class="inline-flex pl-10 mr-6 lg:ml-0">
+                <a class="link--shareIcon touchArea{{#with ../this.content.trackingData}} js-load{{/with}}"
+                   href="javascript:window.print()"
+                   title="{{loca "share_print_linktitle" }}"
+                    {{#with ../this.content.trackingData}}
+                   data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::printbutton"}]}'
+                    {{/with}}
+                >
+                    {{~> components/base/image/icon _addClass="icon--print" _icon="print" _iconmap="icons" ~}}
+                </a>
+            </li>
+        </ul>
+    </div>
+</div>

package/src/stories/views/components/socialmedia/socialmediaCompact.feature.js

@@ -0,0 +1,187 @@
+import { fireEvent, getJSONCookie, hr$, listen, setJSONCookie, unlisten } from 'hrQuery'
+import { uxAction } from 'base/tracking/atiHelper.subfeature'
+
+const ShareCompact = (context) => {
+    const { options } = context
+    const { element: rootElement } = context
+    const isClosedClass = '-isClosed'
+    const mainButton = hr$('.c-shareCompact__mainButton', rootElement)[0]
+    const shareButtons = hr$('.c-shareCompact__shareButtons', rootElement)[0]
+    const messageDiv = hr$('.c-shareCompact__message', rootElement)[0]
+    const { url, title } = options
+    const isMobileApple = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)/i)
+    const isMobileOther = navigator.userAgent.match(
+        /(Android)|(webOS)|(Blackberry)|(Windows Phone)/i
+    )
+    const isWebview = window.parent.document.documentElement.classList.contains('webview')
+    //const isWebview = window.location.href.match(/(app)(\.[a-zA-Z]*)(\.de)/i) //App URL ...app.hr.de
+    //const isWebview = window.location.href.match(/(app)/i)
+    let cookie = {}
+    const trackingCookieLifetime = 1000 * 60 * 60 * 24 * 365 * 10
+
+    const shareLinks = {
+        twitter: hr$('.js-shareLinkTwitter', rootElement)[0],
+        facebook: hr$('.js-shareLinkFacebook', rootElement)[0],
+        whatsapp: hr$('.js-shareLinkWhatsapp', rootElement)[0],
+        mail: hr$('.js-shareLinkMail', rootElement)[0],
+        copy2clip: hr$('.js-shareLinkCopy', rootElement)[0],
+    }
+
+    let isClosed = true
+    const readAppVersionCookie = function () {
+        cookie = getJSONCookie('appSettings') || {}
+    }
+    const writeAppVersionCookie = function () {
+        cookie = '209'
+        setJSONCookie('hsAppBuildNumber', cookie, trackingCookieLifetime)
+    }
+    const closeMenu = () => {
+        console.log('closeMenu')
+        rootElement.classList.add(isClosedClass)
+        shareButtons.classList.add('hide')
+        isClosed = true
+    }
+    const openMenu = () => {
+        console.log('openMenu')
+        rootElement.classList.remove(isClosedClass)
+        shareButtons.classList.remove('hide')
+        isClosed = false
+    }
+    const nativeShare = () => {
+        navigator
+            .share({
+                title,
+                url,
+            })
+            .then(function () {
+                console.log('Danke fürs Teilen!')
+            })
+            .catch(console.error)
+        uxAction('newSocialShareClick::mainButton-nativeShare')
+    }
+    const handleClickOnMainButton = (event) => {
+        event.stopPropagation()
+        if (isWebview) {
+            readAppVersionCookie()
+            if (isMobileApple) {
+                console.log('apple mobile browser')
+                nativeShare()
+            } else if (isMobileOther) {
+                console.log('non-apple mobile browser')
+                /*Check Build Version of App*/
+                if (cookie['fireCustomJsShareEvent'] === true) {
+                    /*Custom Event für App unter Android*/
+                    fireEvent('hr:global:shareCompactClickAndroidApp', {
+                        title: title,
+                        url: url,
+                    })
+                    console.log('Custom-Event für Android')
+                } else {
+                    fireEvent('hr:global:shareCompactClick', {
+                        origin: rootElement,
+                        currentTarget: event.currentTarget,
+                    })
+                }
+            }
+            console.log('sharing - for app channel')
+        } else {
+            if ((navigator.share && isMobileApple) || (navigator.share && isMobileOther)) {
+                console.log('native share in mobile view supported')
+                nativeShare()
+            } else {
+                fireEvent('hr:global:shareCompactClick', {
+                    origin: rootElement,
+                    currentTarget: event.currentTarget,
+                })
+            }
+            console.log('sharing - no app channel')
+        }
+    }
+
+    const copyToClipboard = (event) => {
+        const el = document.createElement('textarea')
+        el.value = url
+        el.setAttribute('readonly', '')
+        el.style.position = 'absolute'
+        el.style.left = '-9999px'
+        document.body.appendChild(el)
+        el.select()
+        document.execCommand('copy')
+        document.body.removeChild(el)
+
+        messageDiv.classList.remove('hide')
+
+        window.setTimeout(() => {
+            messageDiv.classList.add('hide')
+        }, 2000)
+    }
+
+    const checkIfCloseOrOpen = (event) => {
+        if (isClosed) {
+            if (event.detail.origin === rootElement) {
+                uxAction('newSocialShareClick::mainButton-open')
+                openMenu()
+                listen('click', handleClickOnMainButton, document)
+            }
+        } else {
+            if (event.detail.currentTarget === mainButton) {
+                uxAction('newSocialShareClick::mainButton-close')
+            } else {
+                uxAction('newSocialShareClick::mainButton-close-outside')
+            }
+            closeMenu()
+            unlisten('click', handleClickOnMainButton, document)
+        }
+    }
+    const initializeShareLinksTracking = () => {
+        listen(
+            'click',
+            function () {
+                console.log('twitter')
+                uxAction('newSocialShareClick::twitter')
+            },
+            shareLinks.twitter
+        )
+        listen(
+            'click',
+            function () {
+                console.log('facebook')
+                uxAction('newSocialShareClick::facebook')
+            },
+            shareLinks.facebook
+        )
+        listen(
+            'click',
+            function () {
+                console.log('whatsapp')
+                uxAction('newSocialShareClick::whatsapp')
+            },
+            shareLinks.whatsapp
+        )
+        listen(
+            'click',
+            function () {
+                console.log('mail')
+                uxAction('newSocialShareClick::mail')
+            },
+            shareLinks.mail
+        )
+        listen(
+            'click',
+            function () {
+                console.log('copy2clipboard')
+                uxAction('newSocialShareClick::copy2clipboard')
+            },
+            shareLinks.copy2clip
+        )
+    }
+
+    listen('hr:global:shareCompactClick', checkIfCloseOrOpen)
+    listen('click', handleClickOnMainButton, mainButton)
+    listen('click', copyToClipboard, shareLinks.copy2clip)
+    initializeShareLinksTracking()
+    /*if (isWebview) {
+        writeAppVersionCookie()
+    }*/
+}
+export default ShareCompact

package/src/stories/views/components/socialmedia/socialmedia_compact.hbs

@@ -0,0 +1,25 @@
+<div class="c-shareCompact">
+    <div class="c-shareCompact__wrapper -isClosed js-share-compact-wrapper js-load"
+         data-hr-share-compact='{"title":"{{../this.escapedTitle}}", "url":"{{../this.socialSharingUrl}}" }'>
+        <div class="c-shareCompact__mainButton">
+            <button class="link--shareIcon touchArea "
+                    id="{{../this.anchor}}-s"
+                    rel="noopener noreferrer"
+                    title="{{loca "share_headline" }}"
+            >
+                {{~> base/image/icon _addClass="icon--teilen-button" _icon="teilen-button" _iconmap="icons" ~}}
+            </button>
+
+        </div>
+        <div class="c-shareCompact__shareButtons hide">
+            <ul>
+                {{~> modules/socialmedia/shareCompact-icons ~}}
+            </ul>
+        </div>
+        <div class="c-shareCompact__message hide">
+            {{~> base/image/icon _addClass="" _icon="status-done" _iconmap="icons" ~}}
+            {{loca "ticker_sharing_message" }}
+        </div>
+    </div>
+
+</div>