hr-design-system-handlebars 1.114.15 → 1.114.16

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v1.114.16 (Tue Nov 19 2024)
+
+#### 🐛 Bug Fix
+
+- Seo/optimize copy to clipboard [#1162](https://github.com/mumprod/hr-design-system-handlebars/pull/1162) ([@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.15 (Tue Nov 19 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/brand/hr4/conf/locatags.merged.json

@@ -162,8 +162,8 @@
 	"ext_service_datapolicy_accept_permanently_text": "Externe Inhalte von <b>{0}</b> zukünftig immer anzeigen.",
 	"ext_service_datapolicy_accept_button_text": "Inhalt anzeigen",
 	"ext_service_datapolicy_headline": "Externen Inhalt von {0} anzeigen?",
-	"ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhältst du in unseren ",
-	"ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da du in deinem Browser Javascript deaktiviert hast, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
+	"ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhalten Sie in unseren ",
+	"ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da Sie in Ihrem Browser Javascript deaktiviert haben, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
 	"ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
 	"story_infobox_intro_sr": "Weitere Informationen",
 	"story_infobox_outro_sr": "Ende der weiteren Informationen",

package/dist/assets/index.css

@@ -3678,7 +3678,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1732025534722;
+  counter-reset: cnt1732026418051;
 }
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
@@ -4092,7 +4092,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1732025534722 1;
+  counter-increment: cnt1732026418051 1;
 }
 .-ordered::before {
   position: absolute;
@@ -4110,7 +4110,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, 1);
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1732025534722);
+  content: counter(cnt1732026418051);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

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

@@ -6,6 +6,7 @@ export default (module) => ({
     isDesktop: true,
     sharingModuleWasNeverShown: true,
     desktopSharingModuleWasNeverShown: true,
+    copySuccess: false,
     toggle() {
         
         var isMobileApple = /^iP/.test(navigator.platform) || /^Mac/.test(navigator.platform) && navigator.maxTouchPoints > 4;
@@ -51,6 +52,21 @@ export default (module) => ({
             uxAction('socialShareClick::'+module+'Desktop::shown');
             this.desktopSharingModuleWasNeverShown = false;
         }
+    },
+    copyToClipboard(url) {
+
+        navigator.clipboard
+        .writeText(url)
+        .then(() => {
+            console.log("successfully copied");
+            this.copySuccess = true
+            window.setTimeout(() => {
+                this.copySuccess = false
+            }, 2000)
+        })
+        .catch(() => {
+            console.log("something went wrong with copy");
+        });
     }
     
 })

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

@@ -1,6 +1,8 @@
 {{~#with this.copyToClipboardLink}}
-<li x-data="copyHandler()" x-on:click="copyToClipboard" class="relative">
-    <button class="{{#with ../_trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
+<li class="relative">
+    <button
+        x-on:click="copyToClipboard('{{this}}')"
+        class="{{#with ../_trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
         title="{{loca "share_copy_linktitle" }}"
         data-url="{{this}}"
         {{#with ../_trackingData}}
@@ -14,30 +16,6 @@
         {{loca "share_copy_message" }}
     </div>
 </li>
-<script>
-    function copyHandler(){
-        return  {  
-            copySuccess: false,
-            copyToClipboard(event) {
-                const clickedContainer = event.currentTarget.parentNode
-                const url = clickedContainer.querySelector ("button:first-of-type").getAttribute('data-url');
-                //TODO: maby do this with a magical helper in alpine
-                navigator.clipboard
-                .writeText(url)
-                .then(() => {
-                    console.log("successfully copied");
-                    this.copySuccess = true
-                    window.setTimeout(() => {
-                        this.copySuccess = false
-                    }, 2000)
-                })
-                .catch(() => {
-                    console.log("something went wrong with copy");
-                });
-            }
-        }
-    }
-</script>
 {{/with}}
 {{~#with this.twitterLink ~}}
 <li>

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

@@ -1,6 +1,8 @@
 {{~#with this.copyToClipboardLink}}
-<li x-data="copyHandler()" x-on:click="copyToClipboard" class="relative">
-    <button class="{{#with ../_trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
+<li class="relative">
+    <button
+        x-on:click="copyToClipboard('{{this}}')"
+        class="{{#with ../_trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
         title="{{loca "share_copy_linktitle" }}"
         data-url="{{this}}"
         {{#with ../_trackingData}}
@@ -14,30 +16,6 @@
         {{loca "share_copy_message" }}
     </div>
 </li>
-<script>
-    function copyHandler(){
-        return  {  
-            copySuccess: false,
-            copyToClipboard(event) {
-                const clickedContainer = event.currentTarget.parentNode
-                const url = clickedContainer.querySelector ("button:first-of-type").getAttribute('data-url');
-                //TODO: maby do this with a magical helper in alpine
-                navigator.clipboard
-                .writeText(url)
-                .then(() => {
-                    console.log("successfully copied");
-                    this.copySuccess = true
-                    window.setTimeout(() => {
-                        this.copySuccess = false
-                    }, 2000)
-                })
-                .catch(() => {
-                    console.log("something went wrong with copy");
-                });
-            }
-        }
-    }
-</script>
 {{/with}}
 {{~#with this.twitterLink ~}}
 <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.114.15",
+  "version": "1.114.16",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006 public",

package/src/assets/brand/hr4/conf/locatags.merged.json

@@ -162,8 +162,8 @@
 	"ext_service_datapolicy_accept_permanently_text": "Externe Inhalte von <b>{0}</b> zukünftig immer anzeigen.",
 	"ext_service_datapolicy_accept_button_text": "Inhalt anzeigen",
 	"ext_service_datapolicy_headline": "Externen Inhalt von {0} anzeigen?",
-	"ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhältst du in unseren ",
-	"ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da du in deinem Browser Javascript deaktiviert hast, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
+	"ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhalten Sie in unseren ",
+	"ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da Sie in Ihrem Browser Javascript deaktiviert haben, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
 	"ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
 	"story_infobox_intro_sr": "Weitere Informationen",
 	"story_infobox_outro_sr": "Ende der weiteren Informationen",

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

@@ -6,6 +6,7 @@ export default (module) => ({
     isDesktop: true,
     sharingModuleWasNeverShown: true,
     desktopSharingModuleWasNeverShown: true,
+    copySuccess: false,
     toggle() {
         
         var isMobileApple = /^iP/.test(navigator.platform) || /^Mac/.test(navigator.platform) && navigator.maxTouchPoints > 4;
@@ -51,6 +52,21 @@ export default (module) => ({
             uxAction('socialShareClick::'+module+'Desktop::shown');
             this.desktopSharingModuleWasNeverShown = false;
         }
+    },
+    copyToClipboard(url) {
+
+        navigator.clipboard
+        .writeText(url)
+        .then(() => {
+            console.log("successfully copied");
+            this.copySuccess = true
+            window.setTimeout(() => {
+                this.copySuccess = false
+            }, 2000)
+        })
+        .catch(() => {
+            console.log("something went wrong with copy");
+        });
     }
     
 })

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

@@ -1,6 +1,8 @@
 {{~#with this.copyToClipboardLink}}
-<li x-data="copyHandler()" x-on:click="copyToClipboard" class="relative">
-    <button class="{{#with ../_trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
+<li class="relative">
+    <button
+        x-on:click="copyToClipboard('{{this}}')"
+        class="{{#with ../_trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
         title="{{loca "share_copy_linktitle" }}"
         data-url="{{this}}"
         {{#with ../_trackingData}}
@@ -14,30 +16,6 @@
         {{loca "share_copy_message" }}
     </div>
 </li>
-<script>
-    function copyHandler(){
-        return  {  
-            copySuccess: false,
-            copyToClipboard(event) {
-                const clickedContainer = event.currentTarget.parentNode
-                const url = clickedContainer.querySelector ("button:first-of-type").getAttribute('data-url');
-                //TODO: maby do this with a magical helper in alpine
-                navigator.clipboard
-                .writeText(url)
-                .then(() => {
-                    console.log("successfully copied");
-                    this.copySuccess = true
-                    window.setTimeout(() => {
-                        this.copySuccess = false
-                    }, 2000)
-                })
-                .catch(() => {
-                    console.log("something went wrong with copy");
-                });
-            }
-        }
-    }
-</script>
 {{/with}}
 {{~#with this.twitterLink ~}}
 <li>