hr-design-system-handlebars 1.38.1 → 1.38.3

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>

package/src/stories/views/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>