hr-design-system-handlebars 1.59.10 → 1.59.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/dist/assets/index.css +27 -3
- package/dist/views/components/page/components/metadatabox.hbs +1 -1
- package/dist/views/components/social_sharing/social_sharing_compact.hbs +73 -0
- package/dist/views/components/social_sharing/social_sharing_compact_icons.hbs +66 -0
- package/dist/views_static/components/page/components/metadatabox.hbs +1 -1
- package/dist/views_static/components/social_sharing/social_sharing_compact.hbs +73 -0
- package/dist/views_static/components/social_sharing/social_sharing_compact_icons.hbs +66 -0
- package/package.json +1 -1
- package/src/stories/views/components/page/components/metadatabox.hbs +1 -1
- package/src/stories/views/components/social_sharing/social_sharing_compact.hbs +73 -0
- package/src/stories/views/components/social_sharing/social_sharing_compact.mdx +16 -0
- package/src/stories/views/components/social_sharing/social_sharing_compact.stories.js +25 -0
- package/src/stories/views/components/social_sharing/social_sharing_compact_icons.hbs +66 -0
- package/dist/views/components/socialmedia/socialmedia_compact.hbs +0 -25
- package/dist/views/components/socialmedia/socialmedia_compact_icons.hbs +0 -61
- package/dist/views_static/components/socialmedia/socialmedia_compact.hbs +0 -25
- package/dist/views_static/components/socialmedia/socialmedia_compact_icons.hbs +0 -61
- package/src/stories/views/components/socialmedia/socialmedia_compact.hbs +0 -25
- package/src/stories/views/components/socialmedia/socialmedia_compact_icons.hbs +0 -61
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v1.59.11 (Tue Feb 27 2024)
|
|
2
|
+
|
|
3
|
+
#### ⚠️ Pushed to `main`
|
|
4
|
+
|
|
5
|
+
- :sparkles: DPE-2816 Sticky sharing ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v1.59.10 (Mon Feb 26 2024)
|
|
2
14
|
|
|
3
15
|
#### 🐛 Bug Fix
|
package/dist/assets/index.css
CHANGED
|
@@ -1004,6 +1004,9 @@ article.indexText ul {
|
|
|
1004
1004
|
.bottom-15 {
|
|
1005
1005
|
bottom: 3.75rem;
|
|
1006
1006
|
}
|
|
1007
|
+
.bottom-5 {
|
|
1008
|
+
bottom: 1.25rem;
|
|
1009
|
+
}
|
|
1007
1010
|
.bottom-feature-box-height {
|
|
1008
1011
|
bottom: 0;
|
|
1009
1012
|
bottom: var(--feature-box-height);
|
|
@@ -1011,12 +1014,18 @@ article.indexText ul {
|
|
|
1011
1014
|
.left-0 {
|
|
1012
1015
|
left: 0px;
|
|
1013
1016
|
}
|
|
1017
|
+
.left-1 {
|
|
1018
|
+
left: 0.25rem;
|
|
1019
|
+
}
|
|
1014
1020
|
.left-1\/2 {
|
|
1015
1021
|
left: 50%;
|
|
1016
1022
|
}
|
|
1017
1023
|
.left-2\/4 {
|
|
1018
1024
|
left: 50%;
|
|
1019
1025
|
}
|
|
1026
|
+
.left-5 {
|
|
1027
|
+
left: 1.25rem;
|
|
1028
|
+
}
|
|
1020
1029
|
.left-\[4px\] {
|
|
1021
1030
|
left: 4px;
|
|
1022
1031
|
}
|
|
@@ -1044,6 +1053,9 @@ article.indexText ul {
|
|
|
1044
1053
|
.top-0\.5 {
|
|
1045
1054
|
top: 0.125rem;
|
|
1046
1055
|
}
|
|
1056
|
+
.top-1 {
|
|
1057
|
+
top: 0.25rem;
|
|
1058
|
+
}
|
|
1047
1059
|
.top-1\/2 {
|
|
1048
1060
|
top: 50%;
|
|
1049
1061
|
}
|
|
@@ -1516,6 +1528,9 @@ article.indexText ul {
|
|
|
1516
1528
|
.h-\[25px\] {
|
|
1517
1529
|
height: 25px;
|
|
1518
1530
|
}
|
|
1531
|
+
.h-\[500rem\] {
|
|
1532
|
+
height: 500rem;
|
|
1533
|
+
}
|
|
1519
1534
|
.h-\[9px\] {
|
|
1520
1535
|
height: 9px;
|
|
1521
1536
|
}
|
|
@@ -1880,6 +1895,9 @@ article.indexText ul {
|
|
|
1880
1895
|
.justify-around {
|
|
1881
1896
|
justify-content: space-around;
|
|
1882
1897
|
}
|
|
1898
|
+
.gap-3 {
|
|
1899
|
+
gap: 0.75rem;
|
|
1900
|
+
}
|
|
1883
1901
|
.gap-5 {
|
|
1884
1902
|
gap: 1.25rem;
|
|
1885
1903
|
}
|
|
@@ -2446,6 +2464,9 @@ article.indexText ul {
|
|
|
2446
2464
|
.fill-blue-midnight {
|
|
2447
2465
|
fill: #023770;
|
|
2448
2466
|
}
|
|
2467
|
+
.fill-button {
|
|
2468
|
+
fill: var(--color-button);
|
|
2469
|
+
}
|
|
2449
2470
|
.fill-content-nav {
|
|
2450
2471
|
fill: #005293;
|
|
2451
2472
|
fill: var(--color-content-nav);
|
|
@@ -3244,7 +3265,7 @@ article.indexText ul {
|
|
|
3244
3265
|
border-bottom-color: var(--color-secondary-ds);
|
|
3245
3266
|
}
|
|
3246
3267
|
.counter-reset {
|
|
3247
|
-
counter-reset:
|
|
3268
|
+
counter-reset: cnt1709051505711;
|
|
3248
3269
|
}
|
|
3249
3270
|
.hyphens-auto {
|
|
3250
3271
|
-webkit-hyphens: auto;
|
|
@@ -3567,7 +3588,7 @@ article.indexText ul {
|
|
|
3567
3588
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
3568
3589
|
}
|
|
3569
3590
|
.-ordered {
|
|
3570
|
-
counter-increment:
|
|
3591
|
+
counter-increment: cnt1709051505711 1;
|
|
3571
3592
|
}
|
|
3572
3593
|
.-ordered::before {
|
|
3573
3594
|
position: absolute;
|
|
@@ -3583,7 +3604,7 @@ article.indexText ul {
|
|
|
3583
3604
|
letter-spacing: .0125em;
|
|
3584
3605
|
--tw-text-opacity: 1;
|
|
3585
3606
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
3586
|
-
content: counter(
|
|
3607
|
+
content: counter(cnt1709051505711);
|
|
3587
3608
|
}
|
|
3588
3609
|
/*! ****************************/
|
|
3589
3610
|
/*! DataPolicy stuff */
|
|
@@ -5166,6 +5187,9 @@ article.indexText ul {
|
|
|
5166
5187
|
.group:hover .group-hover\:static {
|
|
5167
5188
|
position: static;
|
|
5168
5189
|
}
|
|
5190
|
+
.group:hover .group-hover\:fill-button--dark {
|
|
5191
|
+
fill: var(--color-button--dark);
|
|
5192
|
+
}
|
|
5169
5193
|
.group:hover .group-hover\:fill-media-button {
|
|
5170
5194
|
fill: #276b9e;
|
|
5171
5195
|
fill: var(--color-media-button);
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
<div x-data="{
|
|
2
|
+
open: false,
|
|
3
|
+
sharingIsVisible: true,
|
|
4
|
+
toggle() {
|
|
5
|
+
var isMobileApple = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)/i);
|
|
6
|
+
var isMobileOther= navigator.userAgent.match(/(Android)|(webOS)|(Blackberry)|(Windows Phone)/i);
|
|
7
|
+
var isMobile= isMobileApple || isMobileOther;
|
|
8
|
+
if (navigator.share && isMobile) {
|
|
9
|
+
navigator.share({
|
|
10
|
+
title: 'Awesome Content',
|
|
11
|
+
text: 'Check out this awesome content!',
|
|
12
|
+
url: 'https://example.com',
|
|
13
|
+
})
|
|
14
|
+
.then(() => console.log('Shared successfully'))
|
|
15
|
+
.catch((error) => console.error('Sharing failed:', error));
|
|
16
|
+
} else {
|
|
17
|
+
if (this.open) {
|
|
18
|
+
return this.close()
|
|
19
|
+
}
|
|
20
|
+
this.$refs.button.focus()
|
|
21
|
+
this.open = true
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
},
|
|
25
|
+
close(focusAfter) {
|
|
26
|
+
if (! this.open) return
|
|
27
|
+
|
|
28
|
+
this.open = false
|
|
29
|
+
|
|
30
|
+
focusAfter && focusAfter.focus()
|
|
31
|
+
}
|
|
32
|
+
}"
|
|
33
|
+
x-on:keydown.escape.prevent.stop="close($refs.button)"
|
|
34
|
+
x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
|
|
35
|
+
x-id="['dropdown-button']"
|
|
36
|
+
class="flex self-center justify-end grow "
|
|
37
|
+
x-intersect:leave="sharingIsVisible = false"
|
|
38
|
+
x-intersect:enter="sharingIsVisible = true"
|
|
39
|
+
>
|
|
40
|
+
<div x-text="sharingIsVisible" class="fixed left-1 top-1"></div>
|
|
41
|
+
<div :class="{ 'grid grid-page z-100 fixed bottom-feature-box-height left-0 w-full': !sharingIsVisible }">
|
|
42
|
+
<div class="" :class="{ 'flex justify-start col-full sm:col-main relative': !sharingIsVisible }">
|
|
43
|
+
<div class="flex gap-3" :class="{ 'bottom-5 left-5 flex-col absolute bg-white': !sharingIsVisible }">
|
|
44
|
+
<button
|
|
45
|
+
class="order-2 w-8 h-8 ds-button font-heading active:scale-95 hover:scale-105 group"
|
|
46
|
+
:class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
|
|
47
|
+
x-ref="button"
|
|
48
|
+
x-on:click="toggle()"
|
|
49
|
+
:aria-expanded="open"
|
|
50
|
+
:aria-controls="$id('dropdown-button')">
|
|
51
|
+
{{> components/base/image/icon _addClass="w-full h-full fill-button group-hover:fill-button--dark" _icon="teilen-button" _iconmap="icons" }}
|
|
52
|
+
</button>
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
<!-- Panel -->
|
|
56
|
+
<div
|
|
57
|
+
x-ref="panel"
|
|
58
|
+
x-show="open"
|
|
59
|
+
x-transition.origin.right
|
|
60
|
+
x-on:click.outside="close($refs.button)"
|
|
61
|
+
:id="$id('dropdown-button')"
|
|
62
|
+
style="display: none;"
|
|
63
|
+
class="bg-white"
|
|
64
|
+
>
|
|
65
|
+
<ul class="flex gap-3" :class="{ 'flex-col': ! sharingIsVisible }">
|
|
66
|
+
|
|
67
|
+
{{> components/social_sharing/social_sharing_compact_icons }}
|
|
68
|
+
</ul>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
<li>
|
|
2
|
+
<a class="{{#with ../../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
|
|
3
|
+
:class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
|
|
4
|
+
href="{{this}}"
|
|
5
|
+
target="_blank"
|
|
6
|
+
rel="noopener noreferrer"
|
|
7
|
+
title="{{loca "share_x_linktitle" }}"
|
|
8
|
+
{{#with ../../this.content.trackingData}}
|
|
9
|
+
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::X"}]}'
|
|
10
|
+
{{/with}}
|
|
11
|
+
>
|
|
12
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-[#0f1419] " _icon="x" _iconmap="icons" ~}}
|
|
13
|
+
</a>
|
|
14
|
+
</li>
|
|
15
|
+
<li class="">
|
|
16
|
+
<a class="{{#with ../../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
|
|
17
|
+
:class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
|
|
18
|
+
href="{{this}}"
|
|
19
|
+
target="_blank"
|
|
20
|
+
rel="noopener noreferrer"
|
|
21
|
+
title="{{loca "share_facebook_linktitle" }}"
|
|
22
|
+
{{#with ../../this.content.trackingData}}
|
|
23
|
+
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::facebook"}]}'
|
|
24
|
+
{{/with}}
|
|
25
|
+
>
|
|
26
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-[#3b5999] " _icon="facebook" _iconmap="icons" ~}}
|
|
27
|
+
</a>
|
|
28
|
+
</li>
|
|
29
|
+
<li class="">
|
|
30
|
+
<a class="{{#with ../../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
|
|
31
|
+
:class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
|
|
32
|
+
href="{{this}}"
|
|
33
|
+
target="_blank"
|
|
34
|
+
rel="noopener noreferrer"
|
|
35
|
+
title="{{loca "share_whatsapp_linktitle" }}"
|
|
36
|
+
{{#with ../../this.content.trackingData}}
|
|
37
|
+
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::whatsapp"}]}'
|
|
38
|
+
{{/with}}
|
|
39
|
+
>
|
|
40
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-[#4dc247] " _icon="whatsapp" _iconmap="icons" ~}}
|
|
41
|
+
</a>
|
|
42
|
+
</li>
|
|
43
|
+
<li class="">
|
|
44
|
+
<a class="{{#with ../../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
|
|
45
|
+
:class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
|
|
46
|
+
href="{{this}}"
|
|
47
|
+
title="{{loca "share_mail_linktitle" }}"
|
|
48
|
+
{{#with ../../this.content.trackingData}}
|
|
49
|
+
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::mailto"}]}'
|
|
50
|
+
{{/with}}
|
|
51
|
+
>
|
|
52
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-[#006dc1] " _icon="mail" _iconmap="icons" ~}}
|
|
53
|
+
</a>
|
|
54
|
+
</li>
|
|
55
|
+
<li class="">
|
|
56
|
+
<a class="{{#with ../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
|
|
57
|
+
:class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
|
|
58
|
+
href="javascript:window.print()"
|
|
59
|
+
title="{{loca "share_print_linktitle" }}"
|
|
60
|
+
{{#with ../this.content.trackingData}}
|
|
61
|
+
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::printbutton"}]}'
|
|
62
|
+
{{/with}}
|
|
63
|
+
>
|
|
64
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-[#606060] " _icon="print" _iconmap="icons" ~}}
|
|
65
|
+
</a>
|
|
66
|
+
</li>
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
<div x-data="{
|
|
2
|
+
open: false,
|
|
3
|
+
sharingIsVisible: true,
|
|
4
|
+
toggle() {
|
|
5
|
+
var isMobileApple = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)/i);
|
|
6
|
+
var isMobileOther= navigator.userAgent.match(/(Android)|(webOS)|(Blackberry)|(Windows Phone)/i);
|
|
7
|
+
var isMobile= isMobileApple || isMobileOther;
|
|
8
|
+
if (navigator.share && isMobile) {
|
|
9
|
+
navigator.share({
|
|
10
|
+
title: 'Awesome Content',
|
|
11
|
+
text: 'Check out this awesome content!',
|
|
12
|
+
url: 'https://example.com',
|
|
13
|
+
})
|
|
14
|
+
.then(() => console.log('Shared successfully'))
|
|
15
|
+
.catch((error) => console.error('Sharing failed:', error));
|
|
16
|
+
} else {
|
|
17
|
+
if (this.open) {
|
|
18
|
+
return this.close()
|
|
19
|
+
}
|
|
20
|
+
this.$refs.button.focus()
|
|
21
|
+
this.open = true
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
},
|
|
25
|
+
close(focusAfter) {
|
|
26
|
+
if (! this.open) return
|
|
27
|
+
|
|
28
|
+
this.open = false
|
|
29
|
+
|
|
30
|
+
focusAfter && focusAfter.focus()
|
|
31
|
+
}
|
|
32
|
+
}"
|
|
33
|
+
x-on:keydown.escape.prevent.stop="close($refs.button)"
|
|
34
|
+
x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
|
|
35
|
+
x-id="['dropdown-button']"
|
|
36
|
+
class="flex self-center justify-end grow "
|
|
37
|
+
x-intersect:leave="sharingIsVisible = false"
|
|
38
|
+
x-intersect:enter="sharingIsVisible = true"
|
|
39
|
+
>
|
|
40
|
+
<div x-text="sharingIsVisible" class="fixed left-1 top-1"></div>
|
|
41
|
+
<div :class="{ 'grid grid-page z-100 fixed bottom-feature-box-height left-0 w-full': !sharingIsVisible }">
|
|
42
|
+
<div class="" :class="{ 'flex justify-start col-full sm:col-main relative': !sharingIsVisible }">
|
|
43
|
+
<div class="flex gap-3" :class="{ 'bottom-5 left-5 flex-col absolute bg-white': !sharingIsVisible }">
|
|
44
|
+
<button
|
|
45
|
+
class="order-2 w-8 h-8 ds-button font-heading active:scale-95 hover:scale-105 group"
|
|
46
|
+
:class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
|
|
47
|
+
x-ref="button"
|
|
48
|
+
x-on:click="toggle()"
|
|
49
|
+
:aria-expanded="open"
|
|
50
|
+
:aria-controls="$id('dropdown-button')">
|
|
51
|
+
{{> components/base/image/icon _addClass="w-full h-full fill-button group-hover:fill-button--dark" _icon="teilen-button" _iconmap="icons" }}
|
|
52
|
+
</button>
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
<!-- Panel -->
|
|
56
|
+
<div
|
|
57
|
+
x-ref="panel"
|
|
58
|
+
x-show="open"
|
|
59
|
+
x-transition.origin.right
|
|
60
|
+
x-on:click.outside="close($refs.button)"
|
|
61
|
+
:id="$id('dropdown-button')"
|
|
62
|
+
style="display: none;"
|
|
63
|
+
class="bg-white"
|
|
64
|
+
>
|
|
65
|
+
<ul class="flex gap-3" :class="{ 'flex-col': ! sharingIsVisible }">
|
|
66
|
+
|
|
67
|
+
{{> components/social_sharing/social_sharing_compact_icons }}
|
|
68
|
+
</ul>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
<li>
|
|
2
|
+
<a class="{{#with ../../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
|
|
3
|
+
:class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
|
|
4
|
+
href="{{this}}"
|
|
5
|
+
target="_blank"
|
|
6
|
+
rel="noopener noreferrer"
|
|
7
|
+
title="{{loca "share_x_linktitle" }}"
|
|
8
|
+
{{#with ../../this.content.trackingData}}
|
|
9
|
+
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::X"}]}'
|
|
10
|
+
{{/with}}
|
|
11
|
+
>
|
|
12
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-[#0f1419] " _icon="x" _iconmap="icons" ~}}
|
|
13
|
+
</a>
|
|
14
|
+
</li>
|
|
15
|
+
<li class="">
|
|
16
|
+
<a class="{{#with ../../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
|
|
17
|
+
:class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
|
|
18
|
+
href="{{this}}"
|
|
19
|
+
target="_blank"
|
|
20
|
+
rel="noopener noreferrer"
|
|
21
|
+
title="{{loca "share_facebook_linktitle" }}"
|
|
22
|
+
{{#with ../../this.content.trackingData}}
|
|
23
|
+
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::facebook"}]}'
|
|
24
|
+
{{/with}}
|
|
25
|
+
>
|
|
26
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-[#3b5999] " _icon="facebook" _iconmap="icons" ~}}
|
|
27
|
+
</a>
|
|
28
|
+
</li>
|
|
29
|
+
<li class="">
|
|
30
|
+
<a class="{{#with ../../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
|
|
31
|
+
:class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
|
|
32
|
+
href="{{this}}"
|
|
33
|
+
target="_blank"
|
|
34
|
+
rel="noopener noreferrer"
|
|
35
|
+
title="{{loca "share_whatsapp_linktitle" }}"
|
|
36
|
+
{{#with ../../this.content.trackingData}}
|
|
37
|
+
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::whatsapp"}]}'
|
|
38
|
+
{{/with}}
|
|
39
|
+
>
|
|
40
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-[#4dc247] " _icon="whatsapp" _iconmap="icons" ~}}
|
|
41
|
+
</a>
|
|
42
|
+
</li>
|
|
43
|
+
<li class="">
|
|
44
|
+
<a class="{{#with ../../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
|
|
45
|
+
:class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
|
|
46
|
+
href="{{this}}"
|
|
47
|
+
title="{{loca "share_mail_linktitle" }}"
|
|
48
|
+
{{#with ../../this.content.trackingData}}
|
|
49
|
+
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::mailto"}]}'
|
|
50
|
+
{{/with}}
|
|
51
|
+
>
|
|
52
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-[#006dc1] " _icon="mail" _iconmap="icons" ~}}
|
|
53
|
+
</a>
|
|
54
|
+
</li>
|
|
55
|
+
<li class="">
|
|
56
|
+
<a class="{{#with ../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
|
|
57
|
+
:class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
|
|
58
|
+
href="javascript:window.print()"
|
|
59
|
+
title="{{loca "share_print_linktitle" }}"
|
|
60
|
+
{{#with ../this.content.trackingData}}
|
|
61
|
+
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::printbutton"}]}'
|
|
62
|
+
{{/with}}
|
|
63
|
+
>
|
|
64
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-[#606060] " _icon="print" _iconmap="icons" ~}}
|
|
65
|
+
</a>
|
|
66
|
+
</li>
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"repository": "https://github.com/szuelch/hr-design-system-handlebars",
|
|
9
|
-
"version": "1.59.
|
|
9
|
+
"version": "1.59.11",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
<div x-data="{
|
|
2
|
+
open: false,
|
|
3
|
+
sharingIsVisible: true,
|
|
4
|
+
toggle() {
|
|
5
|
+
var isMobileApple = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)/i);
|
|
6
|
+
var isMobileOther= navigator.userAgent.match(/(Android)|(webOS)|(Blackberry)|(Windows Phone)/i);
|
|
7
|
+
var isMobile= isMobileApple || isMobileOther;
|
|
8
|
+
if (navigator.share && isMobile) {
|
|
9
|
+
navigator.share({
|
|
10
|
+
title: 'Awesome Content',
|
|
11
|
+
text: 'Check out this awesome content!',
|
|
12
|
+
url: 'https://example.com',
|
|
13
|
+
})
|
|
14
|
+
.then(() => console.log('Shared successfully'))
|
|
15
|
+
.catch((error) => console.error('Sharing failed:', error));
|
|
16
|
+
} else {
|
|
17
|
+
if (this.open) {
|
|
18
|
+
return this.close()
|
|
19
|
+
}
|
|
20
|
+
this.$refs.button.focus()
|
|
21
|
+
this.open = true
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
},
|
|
25
|
+
close(focusAfter) {
|
|
26
|
+
if (! this.open) return
|
|
27
|
+
|
|
28
|
+
this.open = false
|
|
29
|
+
|
|
30
|
+
focusAfter && focusAfter.focus()
|
|
31
|
+
}
|
|
32
|
+
}"
|
|
33
|
+
x-on:keydown.escape.prevent.stop="close($refs.button)"
|
|
34
|
+
x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
|
|
35
|
+
x-id="['dropdown-button']"
|
|
36
|
+
class="flex self-center justify-end grow "
|
|
37
|
+
x-intersect:leave="sharingIsVisible = false"
|
|
38
|
+
x-intersect:enter="sharingIsVisible = true"
|
|
39
|
+
>
|
|
40
|
+
<div x-text="sharingIsVisible" class="fixed left-1 top-1"></div>
|
|
41
|
+
<div :class="{ 'grid grid-page z-100 fixed bottom-feature-box-height left-0 w-full': !sharingIsVisible }">
|
|
42
|
+
<div class="" :class="{ 'flex justify-start col-full sm:col-main relative': !sharingIsVisible }">
|
|
43
|
+
<div class="flex gap-3" :class="{ 'bottom-5 left-5 flex-col absolute bg-white': !sharingIsVisible }">
|
|
44
|
+
<button
|
|
45
|
+
class="order-2 w-8 h-8 ds-button font-heading active:scale-95 hover:scale-105 group"
|
|
46
|
+
:class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
|
|
47
|
+
x-ref="button"
|
|
48
|
+
x-on:click="toggle()"
|
|
49
|
+
:aria-expanded="open"
|
|
50
|
+
:aria-controls="$id('dropdown-button')">
|
|
51
|
+
{{> components/base/image/icon _addClass="w-full h-full fill-button group-hover:fill-button--dark" _icon="teilen-button" _iconmap="icons" }}
|
|
52
|
+
</button>
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
<!-- Panel -->
|
|
56
|
+
<div
|
|
57
|
+
x-ref="panel"
|
|
58
|
+
x-show="open"
|
|
59
|
+
x-transition.origin.right
|
|
60
|
+
x-on:click.outside="close($refs.button)"
|
|
61
|
+
:id="$id('dropdown-button')"
|
|
62
|
+
style="display: none;"
|
|
63
|
+
class="bg-white"
|
|
64
|
+
>
|
|
65
|
+
<ul class="flex gap-3" :class="{ 'flex-col': ! sharingIsVisible }">
|
|
66
|
+
|
|
67
|
+
{{> components/social_sharing/social_sharing_compact_icons }}
|
|
68
|
+
</ul>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
|
|
2
|
+
import * as SocialSharingStories from './social_sharing_compact.stories'
|
|
3
|
+
|
|
4
|
+
<Meta of={SocialSharingStories} />
|
|
5
|
+
|
|
6
|
+
# Podcast Player Playlist (Channel)
|
|
7
|
+
|
|
8
|
+
## Beschreibung
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
## Verwendung
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
<Canvas withToolbar>
|
|
15
|
+
<Story of={SocialSharingStories.Default} />
|
|
16
|
+
</Canvas>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import story_template from './social_sharing_compact.hbs'
|
|
2
|
+
|
|
3
|
+
const Template = ({ ...args }) => {
|
|
4
|
+
// You can either use a function to create DOM elements or use a plain html string!
|
|
5
|
+
// return `<span>${topline}</span>`;
|
|
6
|
+
return story_template({ ...args })
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
export default {
|
|
10
|
+
title: 'Komponenten/Social Sharing',
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export const Default = {
|
|
14
|
+
render: Template.bind({}),
|
|
15
|
+
name: 'Social Sharing Kompakt',
|
|
16
|
+
parameters: {
|
|
17
|
+
},
|
|
18
|
+
decorators: [
|
|
19
|
+
(Story) => {
|
|
20
|
+
return `<div class="w-full h-[500rem]">
|
|
21
|
+
${Story()}
|
|
22
|
+
</div>`
|
|
23
|
+
},
|
|
24
|
+
],
|
|
25
|
+
}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
<li>
|
|
2
|
+
<a class="{{#with ../../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
|
|
3
|
+
:class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
|
|
4
|
+
href="{{this}}"
|
|
5
|
+
target="_blank"
|
|
6
|
+
rel="noopener noreferrer"
|
|
7
|
+
title="{{loca "share_x_linktitle" }}"
|
|
8
|
+
{{#with ../../this.content.trackingData}}
|
|
9
|
+
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::X"}]}'
|
|
10
|
+
{{/with}}
|
|
11
|
+
>
|
|
12
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-[#0f1419] " _icon="x" _iconmap="icons" ~}}
|
|
13
|
+
</a>
|
|
14
|
+
</li>
|
|
15
|
+
<li class="">
|
|
16
|
+
<a class="{{#with ../../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
|
|
17
|
+
:class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
|
|
18
|
+
href="{{this}}"
|
|
19
|
+
target="_blank"
|
|
20
|
+
rel="noopener noreferrer"
|
|
21
|
+
title="{{loca "share_facebook_linktitle" }}"
|
|
22
|
+
{{#with ../../this.content.trackingData}}
|
|
23
|
+
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::facebook"}]}'
|
|
24
|
+
{{/with}}
|
|
25
|
+
>
|
|
26
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-[#3b5999] " _icon="facebook" _iconmap="icons" ~}}
|
|
27
|
+
</a>
|
|
28
|
+
</li>
|
|
29
|
+
<li class="">
|
|
30
|
+
<a class="{{#with ../../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
|
|
31
|
+
:class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
|
|
32
|
+
href="{{this}}"
|
|
33
|
+
target="_blank"
|
|
34
|
+
rel="noopener noreferrer"
|
|
35
|
+
title="{{loca "share_whatsapp_linktitle" }}"
|
|
36
|
+
{{#with ../../this.content.trackingData}}
|
|
37
|
+
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::whatsapp"}]}'
|
|
38
|
+
{{/with}}
|
|
39
|
+
>
|
|
40
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-[#4dc247] " _icon="whatsapp" _iconmap="icons" ~}}
|
|
41
|
+
</a>
|
|
42
|
+
</li>
|
|
43
|
+
<li class="">
|
|
44
|
+
<a class="{{#with ../../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
|
|
45
|
+
:class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
|
|
46
|
+
href="{{this}}"
|
|
47
|
+
title="{{loca "share_mail_linktitle" }}"
|
|
48
|
+
{{#with ../../this.content.trackingData}}
|
|
49
|
+
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::mailto"}]}'
|
|
50
|
+
{{/with}}
|
|
51
|
+
>
|
|
52
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-[#006dc1] " _icon="mail" _iconmap="icons" ~}}
|
|
53
|
+
</a>
|
|
54
|
+
</li>
|
|
55
|
+
<li class="">
|
|
56
|
+
<a class="{{#with ../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
|
|
57
|
+
:class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
|
|
58
|
+
href="javascript:window.print()"
|
|
59
|
+
title="{{loca "share_print_linktitle" }}"
|
|
60
|
+
{{#with ../this.content.trackingData}}
|
|
61
|
+
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::printbutton"}]}'
|
|
62
|
+
{{/with}}
|
|
63
|
+
>
|
|
64
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-[#606060] " _icon="print" _iconmap="icons" ~}}
|
|
65
|
+
</a>
|
|
66
|
+
</li>
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
<div class="c-shareCompact">
|
|
2
|
-
<div class="c-shareCompact__wrapper -isClosed js-share-compact-wrapper js-load"
|
|
3
|
-
data-hr-share-compact='{"title":"{{../this.escapedTitle}}", "url":"{{../this.socialSharingUrl}}" }'>
|
|
4
|
-
<div class="c-shareCompact__mainButton">
|
|
5
|
-
<button class="link--shareIcon touchArea "
|
|
6
|
-
id="{{../this.anchor}}-s"
|
|
7
|
-
rel="noopener noreferrer"
|
|
8
|
-
title="{{loca "share_headline" }}"
|
|
9
|
-
>
|
|
10
|
-
{{~> base/image/icon _addClass="icon--teilen-button" _icon="teilen-button" _iconmap="icons" ~}}
|
|
11
|
-
</button>
|
|
12
|
-
|
|
13
|
-
</div>
|
|
14
|
-
<div class="c-shareCompact__shareButtons hide">
|
|
15
|
-
<ul>
|
|
16
|
-
{{~> modules/socialmedia/shareCompact-icons ~}}
|
|
17
|
-
</ul>
|
|
18
|
-
</div>
|
|
19
|
-
<div class="c-shareCompact__message hide">
|
|
20
|
-
{{~> base/image/icon _addClass="" _icon="status-done" _iconmap="icons" ~}}
|
|
21
|
-
{{loca "ticker_sharing_message" }}
|
|
22
|
-
</div>
|
|
23
|
-
</div>
|
|
24
|
-
|
|
25
|
-
</div>
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
{{~#with this.twitterLink ~}}
|
|
2
|
-
<li class="c-shareCompact__item">
|
|
3
|
-
<a class="c-shareCompact__link touchArea js-shareLinkTwitter"
|
|
4
|
-
href="{{this}}"
|
|
5
|
-
target="_blank"
|
|
6
|
-
rel="noopener noreferrer"
|
|
7
|
-
title="{{loca "share_x_linktitle" }}"
|
|
8
|
-
>
|
|
9
|
-
{{~> base/image/icon _addClass="icon--twitter" _icon="x" _iconmap="icons" ~}}
|
|
10
|
-
</a>
|
|
11
|
-
</li>
|
|
12
|
-
{{~/with~}}
|
|
13
|
-
{{~#with this.facebookLink ~}}
|
|
14
|
-
<li class="c-shareCompact__item">
|
|
15
|
-
<a class="c-shareCompact__link touchArea js-shareLinkFacebook"
|
|
16
|
-
href="{{this}}"
|
|
17
|
-
target="_blank"
|
|
18
|
-
rel="noopener noreferrer"
|
|
19
|
-
title="{{loca "share_facebook_linktitle" }}"
|
|
20
|
-
>
|
|
21
|
-
{{~> base/image/icon _addClass="icon--facebook" _icon="facebook" _iconmap="icons" ~}}
|
|
22
|
-
</a>
|
|
23
|
-
</li>
|
|
24
|
-
{{~/with~}}
|
|
25
|
-
{{~#with this.whatsappLink ~}}
|
|
26
|
-
<li class="c-shareCompact__item -whatsapp">
|
|
27
|
-
<a class="c-shareCompact__link touchArea js-shareLinkWhatsapp"
|
|
28
|
-
href="{{this}}"
|
|
29
|
-
target="_blank"
|
|
30
|
-
rel="noopener noreferrer"
|
|
31
|
-
title="{{loca "share_whatsapp_linktitle" }}"
|
|
32
|
-
>
|
|
33
|
-
{{~> base/image/icon _addClass="icon--whatsapp" _icon="whatsapp" _iconmap="icons" ~}}
|
|
34
|
-
</a>
|
|
35
|
-
</li>
|
|
36
|
-
{{~/with~}}
|
|
37
|
-
{{~#with this.mailtoLink ~}}
|
|
38
|
-
<li class="c-shareCompact__item ">
|
|
39
|
-
<a class="c-shareCompact__link touchArea js-shareLinkMail"
|
|
40
|
-
href="{{this}}"
|
|
41
|
-
title="{{loca "share_mail_linktitle" }}"
|
|
42
|
-
{{#with ../../this.content.trackingData}}
|
|
43
|
-
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": {{this.secondLevelId}},"clickLabel": "newSocialShareClick::compact-mailto"}]}'
|
|
44
|
-
{{/with}}
|
|
45
|
-
>
|
|
46
|
-
{{~> base/image/icon _addClass="icon--mailto" _icon="mail" _iconmap="icons" ~}}
|
|
47
|
-
</a>
|
|
48
|
-
</li>
|
|
49
|
-
{{~/with~}}
|
|
50
|
-
|
|
51
|
-
<li class="c-shareCompact__item -copy">
|
|
52
|
-
<button class="c-shareCompact__link touchArea js-shareLinkCopy"
|
|
53
|
-
|
|
54
|
-
title="{{loca "share_copy_linktitle" }}"
|
|
55
|
-
{{#with ../../this.content.trackingData}}
|
|
56
|
-
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": {{this.secondLevelId}},"clickLabel": "newSocialShareClick::compact-copy"}]}'
|
|
57
|
-
{{/with}}
|
|
58
|
-
>
|
|
59
|
-
{{~> base/image/icon _addClass="icon--mailto" _icon="copy" _iconmap="icons" ~}}
|
|
60
|
-
</button>
|
|
61
|
-
</li>
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
<div class="c-shareCompact">
|
|
2
|
-
<div class="c-shareCompact__wrapper -isClosed js-share-compact-wrapper js-load"
|
|
3
|
-
data-hr-share-compact='{"title":"{{../this.escapedTitle}}", "url":"{{../this.socialSharingUrl}}" }'>
|
|
4
|
-
<div class="c-shareCompact__mainButton">
|
|
5
|
-
<button class="link--shareIcon touchArea "
|
|
6
|
-
id="{{../this.anchor}}-s"
|
|
7
|
-
rel="noopener noreferrer"
|
|
8
|
-
title="{{loca "share_headline" }}"
|
|
9
|
-
>
|
|
10
|
-
{{~> base/image/icon _addClass="icon--teilen-button" _icon="teilen-button" _iconmap="icons" ~}}
|
|
11
|
-
</button>
|
|
12
|
-
|
|
13
|
-
</div>
|
|
14
|
-
<div class="c-shareCompact__shareButtons hide">
|
|
15
|
-
<ul>
|
|
16
|
-
{{~> modules/socialmedia/shareCompact-icons ~}}
|
|
17
|
-
</ul>
|
|
18
|
-
</div>
|
|
19
|
-
<div class="c-shareCompact__message hide">
|
|
20
|
-
{{~> base/image/icon _addClass="" _icon="status-done" _iconmap="icons" ~}}
|
|
21
|
-
{{loca "ticker_sharing_message" }}
|
|
22
|
-
</div>
|
|
23
|
-
</div>
|
|
24
|
-
|
|
25
|
-
</div>
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
{{~#with this.twitterLink ~}}
|
|
2
|
-
<li class="c-shareCompact__item">
|
|
3
|
-
<a class="c-shareCompact__link touchArea js-shareLinkTwitter"
|
|
4
|
-
href="{{this}}"
|
|
5
|
-
target="_blank"
|
|
6
|
-
rel="noopener noreferrer"
|
|
7
|
-
title="{{loca "share_x_linktitle" }}"
|
|
8
|
-
>
|
|
9
|
-
{{~> base/image/icon _addClass="icon--twitter" _icon="x" _iconmap="icons" ~}}
|
|
10
|
-
</a>
|
|
11
|
-
</li>
|
|
12
|
-
{{~/with~}}
|
|
13
|
-
{{~#with this.facebookLink ~}}
|
|
14
|
-
<li class="c-shareCompact__item">
|
|
15
|
-
<a class="c-shareCompact__link touchArea js-shareLinkFacebook"
|
|
16
|
-
href="{{this}}"
|
|
17
|
-
target="_blank"
|
|
18
|
-
rel="noopener noreferrer"
|
|
19
|
-
title="{{loca "share_facebook_linktitle" }}"
|
|
20
|
-
>
|
|
21
|
-
{{~> base/image/icon _addClass="icon--facebook" _icon="facebook" _iconmap="icons" ~}}
|
|
22
|
-
</a>
|
|
23
|
-
</li>
|
|
24
|
-
{{~/with~}}
|
|
25
|
-
{{~#with this.whatsappLink ~}}
|
|
26
|
-
<li class="c-shareCompact__item -whatsapp">
|
|
27
|
-
<a class="c-shareCompact__link touchArea js-shareLinkWhatsapp"
|
|
28
|
-
href="{{this}}"
|
|
29
|
-
target="_blank"
|
|
30
|
-
rel="noopener noreferrer"
|
|
31
|
-
title="{{loca "share_whatsapp_linktitle" }}"
|
|
32
|
-
>
|
|
33
|
-
{{~> base/image/icon _addClass="icon--whatsapp" _icon="whatsapp" _iconmap="icons" ~}}
|
|
34
|
-
</a>
|
|
35
|
-
</li>
|
|
36
|
-
{{~/with~}}
|
|
37
|
-
{{~#with this.mailtoLink ~}}
|
|
38
|
-
<li class="c-shareCompact__item ">
|
|
39
|
-
<a class="c-shareCompact__link touchArea js-shareLinkMail"
|
|
40
|
-
href="{{this}}"
|
|
41
|
-
title="{{loca "share_mail_linktitle" }}"
|
|
42
|
-
{{#with ../../this.content.trackingData}}
|
|
43
|
-
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": {{this.secondLevelId}},"clickLabel": "newSocialShareClick::compact-mailto"}]}'
|
|
44
|
-
{{/with}}
|
|
45
|
-
>
|
|
46
|
-
{{~> base/image/icon _addClass="icon--mailto" _icon="mail" _iconmap="icons" ~}}
|
|
47
|
-
</a>
|
|
48
|
-
</li>
|
|
49
|
-
{{~/with~}}
|
|
50
|
-
|
|
51
|
-
<li class="c-shareCompact__item -copy">
|
|
52
|
-
<button class="c-shareCompact__link touchArea js-shareLinkCopy"
|
|
53
|
-
|
|
54
|
-
title="{{loca "share_copy_linktitle" }}"
|
|
55
|
-
{{#with ../../this.content.trackingData}}
|
|
56
|
-
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": {{this.secondLevelId}},"clickLabel": "newSocialShareClick::compact-copy"}]}'
|
|
57
|
-
{{/with}}
|
|
58
|
-
>
|
|
59
|
-
{{~> base/image/icon _addClass="icon--mailto" _icon="copy" _iconmap="icons" ~}}
|
|
60
|
-
</button>
|
|
61
|
-
</li>
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
<div class="c-shareCompact">
|
|
2
|
-
<div class="c-shareCompact__wrapper -isClosed js-share-compact-wrapper js-load"
|
|
3
|
-
data-hr-share-compact='{"title":"{{../this.escapedTitle}}", "url":"{{../this.socialSharingUrl}}" }'>
|
|
4
|
-
<div class="c-shareCompact__mainButton">
|
|
5
|
-
<button class="link--shareIcon touchArea "
|
|
6
|
-
id="{{../this.anchor}}-s"
|
|
7
|
-
rel="noopener noreferrer"
|
|
8
|
-
title="{{loca "share_headline" }}"
|
|
9
|
-
>
|
|
10
|
-
{{~> base/image/icon _addClass="icon--teilen-button" _icon="teilen-button" _iconmap="icons" ~}}
|
|
11
|
-
</button>
|
|
12
|
-
|
|
13
|
-
</div>
|
|
14
|
-
<div class="c-shareCompact__shareButtons hide">
|
|
15
|
-
<ul>
|
|
16
|
-
{{~> modules/socialmedia/shareCompact-icons ~}}
|
|
17
|
-
</ul>
|
|
18
|
-
</div>
|
|
19
|
-
<div class="c-shareCompact__message hide">
|
|
20
|
-
{{~> base/image/icon _addClass="" _icon="status-done" _iconmap="icons" ~}}
|
|
21
|
-
{{loca "ticker_sharing_message" }}
|
|
22
|
-
</div>
|
|
23
|
-
</div>
|
|
24
|
-
|
|
25
|
-
</div>
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
{{~#with this.twitterLink ~}}
|
|
2
|
-
<li class="c-shareCompact__item">
|
|
3
|
-
<a class="c-shareCompact__link touchArea js-shareLinkTwitter"
|
|
4
|
-
href="{{this}}"
|
|
5
|
-
target="_blank"
|
|
6
|
-
rel="noopener noreferrer"
|
|
7
|
-
title="{{loca "share_x_linktitle" }}"
|
|
8
|
-
>
|
|
9
|
-
{{~> base/image/icon _addClass="icon--twitter" _icon="x" _iconmap="icons" ~}}
|
|
10
|
-
</a>
|
|
11
|
-
</li>
|
|
12
|
-
{{~/with~}}
|
|
13
|
-
{{~#with this.facebookLink ~}}
|
|
14
|
-
<li class="c-shareCompact__item">
|
|
15
|
-
<a class="c-shareCompact__link touchArea js-shareLinkFacebook"
|
|
16
|
-
href="{{this}}"
|
|
17
|
-
target="_blank"
|
|
18
|
-
rel="noopener noreferrer"
|
|
19
|
-
title="{{loca "share_facebook_linktitle" }}"
|
|
20
|
-
>
|
|
21
|
-
{{~> base/image/icon _addClass="icon--facebook" _icon="facebook" _iconmap="icons" ~}}
|
|
22
|
-
</a>
|
|
23
|
-
</li>
|
|
24
|
-
{{~/with~}}
|
|
25
|
-
{{~#with this.whatsappLink ~}}
|
|
26
|
-
<li class="c-shareCompact__item -whatsapp">
|
|
27
|
-
<a class="c-shareCompact__link touchArea js-shareLinkWhatsapp"
|
|
28
|
-
href="{{this}}"
|
|
29
|
-
target="_blank"
|
|
30
|
-
rel="noopener noreferrer"
|
|
31
|
-
title="{{loca "share_whatsapp_linktitle" }}"
|
|
32
|
-
>
|
|
33
|
-
{{~> base/image/icon _addClass="icon--whatsapp" _icon="whatsapp" _iconmap="icons" ~}}
|
|
34
|
-
</a>
|
|
35
|
-
</li>
|
|
36
|
-
{{~/with~}}
|
|
37
|
-
{{~#with this.mailtoLink ~}}
|
|
38
|
-
<li class="c-shareCompact__item ">
|
|
39
|
-
<a class="c-shareCompact__link touchArea js-shareLinkMail"
|
|
40
|
-
href="{{this}}"
|
|
41
|
-
title="{{loca "share_mail_linktitle" }}"
|
|
42
|
-
{{#with ../../this.content.trackingData}}
|
|
43
|
-
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": {{this.secondLevelId}},"clickLabel": "newSocialShareClick::compact-mailto"}]}'
|
|
44
|
-
{{/with}}
|
|
45
|
-
>
|
|
46
|
-
{{~> base/image/icon _addClass="icon--mailto" _icon="mail" _iconmap="icons" ~}}
|
|
47
|
-
</a>
|
|
48
|
-
</li>
|
|
49
|
-
{{~/with~}}
|
|
50
|
-
|
|
51
|
-
<li class="c-shareCompact__item -copy">
|
|
52
|
-
<button class="c-shareCompact__link touchArea js-shareLinkCopy"
|
|
53
|
-
|
|
54
|
-
title="{{loca "share_copy_linktitle" }}"
|
|
55
|
-
{{#with ../../this.content.trackingData}}
|
|
56
|
-
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": {{this.secondLevelId}},"clickLabel": "newSocialShareClick::compact-copy"}]}'
|
|
57
|
-
{{/with}}
|
|
58
|
-
>
|
|
59
|
-
{{~> base/image/icon _addClass="icon--mailto" _icon="copy" _iconmap="icons" ~}}
|
|
60
|
-
</button>
|
|
61
|
-
</li>
|