hr-design-system-handlebars 1.114.131 → 1.114.132

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v1.114.132 (Mon Mar 24 2025)
+
+#### 🐛 Bug Fix
+
+- Enhance social sharing functionality with browser detection and impro… [#1273](https://github.com/mumprod/hr-design-system-handlebars/pull/1273) ([@vascoeduardo](https://github.com/vascoeduardo) [@eduardo-hr](https://github.com/eduardo-hr))
+
+#### Authors: 2
+
+- [@eduardo-hr](https://github.com/eduardo-hr)
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.114.131 (Thu Mar 20 2025)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -3857,7 +3857,7 @@ article #commentList {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1742479634253;
+  counter-reset: cnt1742821545333;
 }
 .animate-delay-100 {
   --tw-animate-delay: 100ms;
@@ -4302,7 +4302,7 @@ html { scroll-behavior: smooth; }
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1742479634253 1;
+  counter-increment: cnt1742821545333 1;
 }
 .-ordered::before {
   position: absolute;
@@ -4320,7 +4320,7 @@ html { scroll-behavior: smooth; }
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, 1);
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1742479634253);
+  content: counter(cnt1742821545333);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

package/dist/assets/js/components/social_sharing/socialSharingHandler.alpine.js

@@ -1,4 +1,5 @@
 import { uxAction } from 'base/tracking/pianoHelper.subfeature'
+import { fireEvent, getJSONCookie } from 'hrQuery'
 
 export default (module) => ({
     open: false,
@@ -7,31 +8,80 @@ export default (module) => ({
     sharingModuleWasNeverShown: true,
     desktopSharingModuleWasNeverShown: true,
     copySuccess: false,
-    toggle() {
-        
-        var isMobileApple = /^iP/.test(navigator.platform) || /^Mac/.test(navigator.platform) && navigator.maxTouchPoints > 4;
-        var isMobileOther= navigator.userAgent.match(/(Android)|(webOS)|(Blackberry)|(Windows Phone)/i);
-        var isMobile= isMobileApple || isMobileOther;
-        
-        if (navigator.share && isMobile) {
-            navigator.share({
-                title: document.title,
-                url: window.location.href,
+    cookie: {},
+    isMobileApple: false,
+    isMobileOther: false,
+    isMobile: false,
+    isWebview: false, 
+    initBrowserDetection(){
+        console.log('Pre initBrowserDetection', this.isMobileApple,this.isMobileOther,this.isMobile,this.isWebview);
+        this.isMobileApple = /iP/.test(navigator.userAgent) || /Mac/.test(navigator.userAgent) && navigator.maxTouchPoints > 4;
+        this.isMobileOther = /(Android|webOS|BlackBerry|Windows Phone)/i.test(navigator.userAgent);
+        this.isMobile = this.isMobileApple || this.isMobileOther;
+
+        try {
+            this.isWebview = window.parent.document.documentElement.classList.contains('webview');
+        } catch (e) {
+            this.isWebview = false;
+            console.warn("Could not access window.parent.document due to cross-origin restrictions", e);
+        }
+        console.log('initBrowserDetection', this.isMobileApple,this.isMobileOther,this.isMobile,this.isWebview);
+    },
+    readAppVersionCookie() {
+        this.cookie = getJSONCookie('appSettings') || {}
+    },
+    nativeShare(title, url, uxActionValue) {
+        console.log("Native Share", title, url, uxActionValue);
+        navigator
+            .share({
+                title,
+                url,
             })
-            .then(() => {
-                console.log('Shared successfully');
-                uxAction('socialShareClick::'+module+'::nativeShare');
-                console.log('tracked: socialShareClick::'+module+'::nativeShare');
+            .then(function () {
+                console.log('Native Shared successfully');
+                if (uxActionValue) {
+                    uxAction(uxActionValue);
+                }
+                console.log('tracked: '+ uxActionValue);
             })
             .catch((error) => console.error('Sharing failed:', error));
-        } else {
-            if (this.$store.sharingIsOpen[module]) {
-                return this.close(true)
+    },
+    shareInWebview(title, url) {
+        this.readAppVersionCookie();
+        if(this.isMobileApple){
+            console.log('apple mobile browser')
+            this.nativeShare(title, url, 'socialShareClick::webview::nativeShareApple');
+        } else if (this.isMobileOther) {
+            console.log('non-apple mobile browser')
+            /*Check Build Version of App*/
+            if (this.cookie['fireCustomJsShareEvent'] === true) {
+                /*Custom Event für App unter Android*/
+                fireEvent('hr:global:shareCompactClickAndroidApp', {
+                    title: title,
+                    url: url,
+                })
+                uxAction('socialShareClick::webview::nativeShareAndroid::customEvent');
+                console.log('Custom-Event für Android')
+            } else {
+                this.nativeShare(title, url, 'socialShareClick::webview::nativeShareAndroid::noCustomEventCookie');
             }
-            this.$refs.button.focus()
-            this.$store.sharingIsOpen[module] = true
-            uxAction('socialShareClick::'+module+'::sharingIconOpen');
-        }               
+        }
+    },
+    toggle(title, url) {
+        if (this.isWebview) {
+            this.shareInWebview(title,url)
+        }  else {  
+            if (navigator.share && this.isMobile) {
+                this.nativeShare(document.title, window.location.href,'socialShareClick::'+module+'::nativeShare')
+            } else {
+                if (this.$store.sharingIsOpen[module]) {
+                    return this.close(true)
+                }
+                this.$refs.button.focus()
+                this.$store.sharingIsOpen[module] = true
+                uxAction('socialShareClick::'+module+'::sharingIconOpen');
+            }    
+        }           
     },
     close(trackClick) {
         if (!this.$store.sharingIsOpen[module]) return

package/dist/views/components/social_sharing/social_sharing_horizontal.hbs

@@ -1,7 +1,7 @@
 {{~#with this.socialSharing ~}}
     <div 
         x-data="socialSharingHandler('metadatabox')"
-        x-init="$watch('$store.sharingIsVisible', () => {$store.sharingIsOpen.metadatabox = false; $store.sharingIsOpen.mobilesticky = false})"
+        x-init="initBrowserDetection(); $watch('$store.sharingIsVisible', () => {$store.sharingIsOpen.metadatabox = false; $store.sharingIsOpen.mobilesticky = false})"
         class="flex self-center justify-end ml-3 print:hidden grow"
         x-intersect:leave="$store.sharingIsVisible=false"
         x-intersect:enter="$store.sharingIsVisible=true"

package/dist/views/components/social_sharing/social_sharing_mobile.hbs

@@ -1,6 +1,7 @@
 
 {{~#with this.socialSharing ~}}    
 <div x-data="socialSharingHandler('mobilesticky')"
+    x-init="initBrowserDetection();"    
     class=" relative ml-5 z-100 h-9.5 w-9.5"
     :class="$store.footerIsVisible ? '-mt-6' : '-mt-12'"  
     x-on:resize.window="$store.sharingIsOpen.mobilesticky = false"    

package/dist/views/components/social_sharing/social_sharing_ticker_item.hbs

@@ -2,6 +2,7 @@
     <div 
         x-data="socialSharingHandler('tickerItem{{nextRandom}}')"
         class="flex self-center justify-end ml-3 print:hidden grow"
+        x-init="initBrowserDetection();"
         x-on:resize.window="$store.sharingIsOpen.ticker = false"       
         x-on:keydown.escape.prevent.stop="close()"
         @click.outside="close()"
@@ -13,7 +14,7 @@
             <button 
                 class="order-2 p-2 text-white border border-button bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group lg:hidden"
                 x-ref="button"
-                x-on:click="toggle()"
+                x-on:click="toggle('{{../this.escapedTitle}}','{{../this.socialSharingUrl}}')"
                 :aria-expanded="open"
                 :aria-controls="$id('dropdown-button')"
                 aria-label="{{loca "share_linktitle" }}"

package/dist/views_static/components/social_sharing/social_sharing_horizontal.hbs

@@ -1,7 +1,7 @@
 {{~#with this.socialSharing ~}}
     <div 
         x-data="socialSharingHandler('metadatabox')"
-        x-init="$watch('$store.sharingIsVisible', () => {$store.sharingIsOpen.metadatabox = false; $store.sharingIsOpen.mobilesticky = false})"
+        x-init="initBrowserDetection(); $watch('$store.sharingIsVisible', () => {$store.sharingIsOpen.metadatabox = false; $store.sharingIsOpen.mobilesticky = false})"
         class="flex self-center justify-end ml-3 print:hidden grow"
         x-intersect:leave="$store.sharingIsVisible=false"
         x-intersect:enter="$store.sharingIsVisible=true"

package/dist/views_static/components/social_sharing/social_sharing_mobile.hbs

@@ -1,6 +1,7 @@
 
 {{~#with this.socialSharing ~}}    
 <div x-data="socialSharingHandler('mobilesticky')"
+    x-init="initBrowserDetection();"    
     class=" relative ml-5 z-100 h-9.5 w-9.5"
     :class="$store.footerIsVisible ? '-mt-6' : '-mt-12'"  
     x-on:resize.window="$store.sharingIsOpen.mobilesticky = false"    

package/dist/views_static/components/social_sharing/social_sharing_ticker_item.hbs

@@ -2,6 +2,7 @@
     <div 
         x-data="socialSharingHandler('tickerItem{{nextRandom}}')"
         class="flex self-center justify-end ml-3 print:hidden grow"
+        x-init="initBrowserDetection();"
         x-on:resize.window="$store.sharingIsOpen.ticker = false"       
         x-on:keydown.escape.prevent.stop="close()"
         @click.outside="close()"
@@ -13,7 +14,7 @@
             <button 
                 class="order-2 p-2 text-white border border-button bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group lg:hidden"
                 x-ref="button"
-                x-on:click="toggle()"
+                x-on:click="toggle('{{../this.escapedTitle}}','{{../this.socialSharingUrl}}')"
                 :aria-expanded="open"
                 :aria-controls="$id('dropdown-button')"
                 aria-label="{{loca "share_linktitle" }}"

package/package.json

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

package/src/stories/views/components/social_sharing/socialSharingHandler.alpine.js

@@ -1,4 +1,5 @@
 import { uxAction } from 'base/tracking/pianoHelper.subfeature'
+import { fireEvent, getJSONCookie } from 'hrQuery'
 
 export default (module) => ({
     open: false,
@@ -7,31 +8,80 @@ export default (module) => ({
     sharingModuleWasNeverShown: true,
     desktopSharingModuleWasNeverShown: true,
     copySuccess: false,
-    toggle() {
-        
-        var isMobileApple = /^iP/.test(navigator.platform) || /^Mac/.test(navigator.platform) && navigator.maxTouchPoints > 4;
-        var isMobileOther= navigator.userAgent.match(/(Android)|(webOS)|(Blackberry)|(Windows Phone)/i);
-        var isMobile= isMobileApple || isMobileOther;
-        
-        if (navigator.share && isMobile) {
-            navigator.share({
-                title: document.title,
-                url: window.location.href,
+    cookie: {},
+    isMobileApple: false,
+    isMobileOther: false,
+    isMobile: false,
+    isWebview: false, 
+    initBrowserDetection(){
+        console.log('Pre initBrowserDetection', this.isMobileApple,this.isMobileOther,this.isMobile,this.isWebview);
+        this.isMobileApple = /iP/.test(navigator.userAgent) || /Mac/.test(navigator.userAgent) && navigator.maxTouchPoints > 4;
+        this.isMobileOther = /(Android|webOS|BlackBerry|Windows Phone)/i.test(navigator.userAgent);
+        this.isMobile = this.isMobileApple || this.isMobileOther;
+
+        try {
+            this.isWebview = window.parent.document.documentElement.classList.contains('webview');
+        } catch (e) {
+            this.isWebview = false;
+            console.warn("Could not access window.parent.document due to cross-origin restrictions", e);
+        }
+        console.log('initBrowserDetection', this.isMobileApple,this.isMobileOther,this.isMobile,this.isWebview);
+    },
+    readAppVersionCookie() {
+        this.cookie = getJSONCookie('appSettings') || {}
+    },
+    nativeShare(title, url, uxActionValue) {
+        console.log("Native Share", title, url, uxActionValue);
+        navigator
+            .share({
+                title,
+                url,
             })
-            .then(() => {
-                console.log('Shared successfully');
-                uxAction('socialShareClick::'+module+'::nativeShare');
-                console.log('tracked: socialShareClick::'+module+'::nativeShare');
+            .then(function () {
+                console.log('Native Shared successfully');
+                if (uxActionValue) {
+                    uxAction(uxActionValue);
+                }
+                console.log('tracked: '+ uxActionValue);
             })
             .catch((error) => console.error('Sharing failed:', error));
-        } else {
-            if (this.$store.sharingIsOpen[module]) {
-                return this.close(true)
+    },
+    shareInWebview(title, url) {
+        this.readAppVersionCookie();
+        if(this.isMobileApple){
+            console.log('apple mobile browser')
+            this.nativeShare(title, url, 'socialShareClick::webview::nativeShareApple');
+        } else if (this.isMobileOther) {
+            console.log('non-apple mobile browser')
+            /*Check Build Version of App*/
+            if (this.cookie['fireCustomJsShareEvent'] === true) {
+                /*Custom Event für App unter Android*/
+                fireEvent('hr:global:shareCompactClickAndroidApp', {
+                    title: title,
+                    url: url,
+                })
+                uxAction('socialShareClick::webview::nativeShareAndroid::customEvent');
+                console.log('Custom-Event für Android')
+            } else {
+                this.nativeShare(title, url, 'socialShareClick::webview::nativeShareAndroid::noCustomEventCookie');
             }
-            this.$refs.button.focus()
-            this.$store.sharingIsOpen[module] = true
-            uxAction('socialShareClick::'+module+'::sharingIconOpen');
-        }               
+        }
+    },
+    toggle(title, url) {
+        if (this.isWebview) {
+            this.shareInWebview(title,url)
+        }  else {  
+            if (navigator.share && this.isMobile) {
+                this.nativeShare(document.title, window.location.href,'socialShareClick::'+module+'::nativeShare')
+            } else {
+                if (this.$store.sharingIsOpen[module]) {
+                    return this.close(true)
+                }
+                this.$refs.button.focus()
+                this.$store.sharingIsOpen[module] = true
+                uxAction('socialShareClick::'+module+'::sharingIconOpen');
+            }    
+        }           
     },
     close(trackClick) {
         if (!this.$store.sharingIsOpen[module]) return

package/src/stories/views/components/social_sharing/social_sharing_horizontal.hbs

@@ -1,7 +1,7 @@
 {{~#with this.socialSharing ~}}
     <div 
         x-data="socialSharingHandler('metadatabox')"
-        x-init="$watch('$store.sharingIsVisible', () => {$store.sharingIsOpen.metadatabox = false; $store.sharingIsOpen.mobilesticky = false})"
+        x-init="initBrowserDetection(); $watch('$store.sharingIsVisible', () => {$store.sharingIsOpen.metadatabox = false; $store.sharingIsOpen.mobilesticky = false})"
         class="flex self-center justify-end ml-3 print:hidden grow"
         x-intersect:leave="$store.sharingIsVisible=false"
         x-intersect:enter="$store.sharingIsVisible=true"

package/src/stories/views/components/social_sharing/social_sharing_mobile.hbs

@@ -1,6 +1,7 @@
 
 {{~#with this.socialSharing ~}}    
 <div x-data="socialSharingHandler('mobilesticky')"
+    x-init="initBrowserDetection();"    
     class=" relative ml-5 z-100 h-9.5 w-9.5"
     :class="$store.footerIsVisible ? '-mt-6' : '-mt-12'"  
     x-on:resize.window="$store.sharingIsOpen.mobilesticky = false"    

package/src/stories/views/components/social_sharing/social_sharing_ticker_item.hbs

@@ -2,6 +2,7 @@
     <div 
         x-data="socialSharingHandler('tickerItem{{nextRandom}}')"
         class="flex self-center justify-end ml-3 print:hidden grow"
+        x-init="initBrowserDetection();"
         x-on:resize.window="$store.sharingIsOpen.ticker = false"       
         x-on:keydown.escape.prevent.stop="close()"
         @click.outside="close()"
@@ -13,7 +14,7 @@
             <button 
                 class="order-2 p-2 text-white border border-button bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group lg:hidden"
                 x-ref="button"
-                x-on:click="toggle()"
+                x-on:click="toggle('{{../this.escapedTitle}}','{{../this.socialSharingUrl}}')"
                 :aria-expanded="open"
                 :aria-controls="$id('dropdown-button')"
                 aria-label="{{loca "share_linktitle" }}"