hr-design-system-handlebars 1.114.66 → 1.114.68
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 +26 -0
- package/dist/assets/index.css +88 -19
- package/dist/assets/js/components/social_sharing/socialSharingHandler.alpine.js +2 -2
- package/dist/views/components/mediaplayer/mediaPlayer_stickyWrapper.hbs +87 -78
- package/dist/views_static/components/mediaplayer/mediaPlayer_stickyWrapper.hbs +87 -78
- package/package.json +2 -1
- package/src/stories/views/components/mediaplayer/mediaPlayer_stickyWrapper.hbs +87 -78
- package/src/stories/views/components/social_sharing/socialSharingHandler.alpine.js +2 -2
- package/tailwind.config.js +2 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,29 @@
|
|
|
1
|
+
# v1.114.68 (Tue Jan 21 2025)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- DPE-1087 - Ticker: Livestreams ohne Unterbrechung (Enhancements) [#1217](https://github.com/mumprod/hr-design-system-handlebars/pull/1217) ([@vascoeduardo](https://github.com/vascoeduardo) [@eduardo-hr](https://github.com/eduardo-hr))
|
|
6
|
+
|
|
7
|
+
#### Authors: 2
|
|
8
|
+
|
|
9
|
+
- [@eduardo-hr](https://github.com/eduardo-hr)
|
|
10
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
# v1.114.67 (Mon Jan 20 2025)
|
|
15
|
+
|
|
16
|
+
#### 🐛 Bug Fix
|
|
17
|
+
|
|
18
|
+
- Disable uxAction logging for first-time sharing module display, becau… [#1216](https://github.com/mumprod/hr-design-system-handlebars/pull/1216) ([@vascoeduardo](https://github.com/vascoeduardo) [@eduardo-hr](https://github.com/eduardo-hr))
|
|
19
|
+
|
|
20
|
+
#### Authors: 2
|
|
21
|
+
|
|
22
|
+
- [@eduardo-hr](https://github.com/eduardo-hr)
|
|
23
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
1
27
|
# v1.114.66 (Mon Jan 20 2025)
|
|
2
28
|
|
|
3
29
|
#### 🐛 Bug Fix
|
package/dist/assets/index.css
CHANGED
|
@@ -1136,27 +1136,18 @@ article #commentList {
|
|
|
1136
1136
|
bottom: 0px;
|
|
1137
1137
|
left: 0px;
|
|
1138
1138
|
}
|
|
1139
|
-
.-bottom-20 {
|
|
1140
|
-
bottom: -5rem;
|
|
1141
|
-
}
|
|
1142
1139
|
.-left-4 {
|
|
1143
1140
|
left: -1rem;
|
|
1144
1141
|
}
|
|
1145
1142
|
.-left-5 {
|
|
1146
1143
|
left: -1.25rem;
|
|
1147
1144
|
}
|
|
1148
|
-
.-right-80 {
|
|
1149
|
-
right: -20rem;
|
|
1150
|
-
}
|
|
1151
1145
|
.bottom-0 {
|
|
1152
1146
|
bottom: 0px;
|
|
1153
1147
|
}
|
|
1154
1148
|
.bottom-11 {
|
|
1155
1149
|
bottom: 2.75rem;
|
|
1156
1150
|
}
|
|
1157
|
-
.bottom-12 {
|
|
1158
|
-
bottom: 3rem;
|
|
1159
|
-
}
|
|
1160
1151
|
.bottom-15 {
|
|
1161
1152
|
bottom: 3.75rem;
|
|
1162
1153
|
}
|
|
@@ -1188,9 +1179,6 @@ article #commentList {
|
|
|
1188
1179
|
.right-11 {
|
|
1189
1180
|
right: 2.75rem;
|
|
1190
1181
|
}
|
|
1191
|
-
.right-12 {
|
|
1192
|
-
right: 3rem;
|
|
1193
|
-
}
|
|
1194
1182
|
.right-4 {
|
|
1195
1183
|
right: 1rem;
|
|
1196
1184
|
}
|
|
@@ -1218,6 +1206,18 @@ article #commentList {
|
|
|
1218
1206
|
.top-10 {
|
|
1219
1207
|
top: 2.5rem;
|
|
1220
1208
|
}
|
|
1209
|
+
.top-14 {
|
|
1210
|
+
top: 3.5rem;
|
|
1211
|
+
}
|
|
1212
|
+
.top-20 {
|
|
1213
|
+
top: 5rem;
|
|
1214
|
+
}
|
|
1215
|
+
.top-31 {
|
|
1216
|
+
top: 7.75rem;
|
|
1217
|
+
}
|
|
1218
|
+
.top-4 {
|
|
1219
|
+
top: 1rem;
|
|
1220
|
+
}
|
|
1221
1221
|
.top-8 {
|
|
1222
1222
|
top: 2rem;
|
|
1223
1223
|
}
|
|
@@ -1794,6 +1794,9 @@ article #commentList {
|
|
|
1794
1794
|
.w-0 {
|
|
1795
1795
|
width: 0px;
|
|
1796
1796
|
}
|
|
1797
|
+
.w-1\/2 {
|
|
1798
|
+
width: 50%;
|
|
1799
|
+
}
|
|
1797
1800
|
.w-10 {
|
|
1798
1801
|
width: 2.5rem;
|
|
1799
1802
|
}
|
|
@@ -1860,9 +1863,6 @@ article #commentList {
|
|
|
1860
1863
|
.w-9\.5 {
|
|
1861
1864
|
width: 2.375rem;
|
|
1862
1865
|
}
|
|
1863
|
-
.w-96 {
|
|
1864
|
-
width: 24rem;
|
|
1865
|
-
}
|
|
1866
1866
|
.w-\[19px\] {
|
|
1867
1867
|
width: 19px;
|
|
1868
1868
|
}
|
|
@@ -1929,6 +1929,9 @@ article #commentList {
|
|
|
1929
1929
|
.max-w-3\/4 {
|
|
1930
1930
|
max-width: 75%;
|
|
1931
1931
|
}
|
|
1932
|
+
.max-w-70 {
|
|
1933
|
+
max-width: 17.5rem;
|
|
1934
|
+
}
|
|
1932
1935
|
.max-w-\[480px\] {
|
|
1933
1936
|
max-width: 480px;
|
|
1934
1937
|
}
|
|
@@ -2101,6 +2104,36 @@ article #commentList {
|
|
|
2101
2104
|
.transform {
|
|
2102
2105
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
2103
2106
|
}
|
|
2107
|
+
@keyframes fade {
|
|
2108
|
+
|
|
2109
|
+
0% {
|
|
2110
|
+
opacity: 0;
|
|
2111
|
+
}
|
|
2112
|
+
|
|
2113
|
+
100% {
|
|
2114
|
+
opacity: 1;
|
|
2115
|
+
}
|
|
2116
|
+
}
|
|
2117
|
+
.animate-fade {
|
|
2118
|
+
animation: fade 1s ease 0s 1 both;
|
|
2119
|
+
animation: fade var(--tw-animate-duration, 1s) var(--tw-animate-easing, ease) var(--tw-animate-delay, 0s) var(--tw-animate-iteration, 1) var(--tw-animate-fill, both);
|
|
2120
|
+
}
|
|
2121
|
+
@keyframes fade-right {
|
|
2122
|
+
|
|
2123
|
+
0% {
|
|
2124
|
+
opacity: 0;
|
|
2125
|
+
transform: translateX(-2rem);
|
|
2126
|
+
}
|
|
2127
|
+
|
|
2128
|
+
100% {
|
|
2129
|
+
opacity: 1;
|
|
2130
|
+
transform: translateX(0);
|
|
2131
|
+
}
|
|
2132
|
+
}
|
|
2133
|
+
.animate-fade-right {
|
|
2134
|
+
animation: fade-right 1s ease 0s 1 both;
|
|
2135
|
+
animation: fade-right var(--tw-animate-duration, 1s) var(--tw-animate-easing, ease) var(--tw-animate-delay, 0s) var(--tw-animate-iteration, 1) var(--tw-animate-fill, both);
|
|
2136
|
+
}
|
|
2104
2137
|
.animate-none {
|
|
2105
2138
|
animation: none;
|
|
2106
2139
|
}
|
|
@@ -2111,7 +2144,8 @@ article #commentList {
|
|
|
2111
2144
|
}
|
|
2112
2145
|
}
|
|
2113
2146
|
.animate-spin {
|
|
2114
|
-
animation: spin 1s linear infinite;
|
|
2147
|
+
animation: spin 1s linear 0s infinite none;
|
|
2148
|
+
animation: spin var(--tw-animate-duration, 1s) var(--tw-animate-easing, linear) var(--tw-animate-delay, 0s) var(--tw-animate-iteration, infinite) var(--tw-animate-fill, none);
|
|
2115
2149
|
}
|
|
2116
2150
|
.\!cursor-not-allowed {
|
|
2117
2151
|
cursor: not-allowed !important;
|
|
@@ -3737,7 +3771,22 @@ article #commentList {
|
|
|
3737
3771
|
border-bottom-color: var(--color-secondary-ds);
|
|
3738
3772
|
}
|
|
3739
3773
|
.counter-reset {
|
|
3740
|
-
counter-reset:
|
|
3774
|
+
counter-reset: cnt1737470359520;
|
|
3775
|
+
}
|
|
3776
|
+
.animate-duration-1000 {
|
|
3777
|
+
--tw-animate-duration: 1000ms;
|
|
3778
|
+
animation-duration: 1000ms;
|
|
3779
|
+
animation-duration: var(--tw-animate-duration);
|
|
3780
|
+
}
|
|
3781
|
+
.animate-once {
|
|
3782
|
+
--tw-animate-iteration: 1;
|
|
3783
|
+
animation-iteration-count: 1;
|
|
3784
|
+
animation-iteration-count: var(--tw-animate-iteration);
|
|
3785
|
+
}
|
|
3786
|
+
.animate-ease-in-out {
|
|
3787
|
+
--tw-animate-easing: cubic-bezier(0.4, 0, 0.2, 1);
|
|
3788
|
+
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
3789
|
+
animation-timing-function: var(--tw-animate-easing);
|
|
3741
3790
|
}
|
|
3742
3791
|
html { scroll-behavior: smooth; }
|
|
3743
3792
|
.placeholder-text-xs::-webkit-input-placeholder {
|
|
@@ -4152,7 +4201,7 @@ html { scroll-behavior: smooth; }
|
|
|
4152
4201
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
4153
4202
|
}
|
|
4154
4203
|
.-ordered {
|
|
4155
|
-
counter-increment:
|
|
4204
|
+
counter-increment: cnt1737470359520 1;
|
|
4156
4205
|
}
|
|
4157
4206
|
.-ordered::before {
|
|
4158
4207
|
position: absolute;
|
|
@@ -4170,7 +4219,7 @@ html { scroll-behavior: smooth; }
|
|
|
4170
4219
|
--tw-text-opacity: 1;
|
|
4171
4220
|
color: rgba(0, 0, 0, 1);
|
|
4172
4221
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
4173
|
-
content: counter(
|
|
4222
|
+
content: counter(cnt1737470359520);
|
|
4174
4223
|
}
|
|
4175
4224
|
/*! ****************************/
|
|
4176
4225
|
/*! DataPolicy stuff */
|
|
@@ -6929,6 +6978,10 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
|
|
|
6929
6978
|
width: 58.333333%;
|
|
6930
6979
|
}
|
|
6931
6980
|
|
|
6981
|
+
.sm\:w-70 {
|
|
6982
|
+
width: 17.5rem;
|
|
6983
|
+
}
|
|
6984
|
+
|
|
6932
6985
|
.sm\:w-\[220px\] {
|
|
6933
6986
|
width: 220px;
|
|
6934
6987
|
}
|
|
@@ -7223,6 +7276,10 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
|
|
|
7223
7276
|
top: 3rem;
|
|
7224
7277
|
}
|
|
7225
7278
|
|
|
7279
|
+
.md\:top-16 {
|
|
7280
|
+
top: 4rem;
|
|
7281
|
+
}
|
|
7282
|
+
|
|
7226
7283
|
.md\:top-auto {
|
|
7227
7284
|
top: auto;
|
|
7228
7285
|
}
|
|
@@ -7982,6 +8039,14 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
|
|
|
7982
8039
|
top: 3.75rem;
|
|
7983
8040
|
}
|
|
7984
8041
|
|
|
8042
|
+
.lg\:top-20 {
|
|
8043
|
+
top: 5rem;
|
|
8044
|
+
}
|
|
8045
|
+
|
|
8046
|
+
.lg\:top-31 {
|
|
8047
|
+
top: 7.75rem;
|
|
8048
|
+
}
|
|
8049
|
+
|
|
7985
8050
|
.lg\:z-50 {
|
|
7986
8051
|
z-index: 50;
|
|
7987
8052
|
}
|
|
@@ -8407,6 +8472,10 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
|
|
|
8407
8472
|
filter: none;
|
|
8408
8473
|
}
|
|
8409
8474
|
|
|
8475
|
+
.lg\:transition-none {
|
|
8476
|
+
transition-property: none;
|
|
8477
|
+
}
|
|
8478
|
+
|
|
8410
8479
|
.lg\:duration-0 {
|
|
8411
8480
|
transition-duration: 0ms;
|
|
8412
8481
|
}
|
|
@@ -44,12 +44,12 @@ export default (module) => ({
|
|
|
44
44
|
|
|
45
45
|
if(this.sharingModuleWasNeverShown && !desktop){
|
|
46
46
|
console.log('Sharing Module '+module+' was shown for the first time!!!');
|
|
47
|
-
uxAction('socialShareClick::'+module+'::shown');
|
|
47
|
+
//uxAction('socialShareClick::'+module+'::shown');
|
|
48
48
|
this.sharingModuleWasNeverShown = false;
|
|
49
49
|
}
|
|
50
50
|
if(this.desktopSharingModuleWasNeverShown && desktop){
|
|
51
51
|
console.log('Sharing Module '+module+'Desktop was shown for the first time!!!');
|
|
52
|
-
uxAction('socialShareClick::'+module+'Desktop::shown');
|
|
52
|
+
//uxAction('socialShareClick::'+module+'Desktop::shown');
|
|
53
53
|
this.desktopSharingModuleWasNeverShown = false;
|
|
54
54
|
}
|
|
55
55
|
},
|
|
@@ -1,82 +1,91 @@
|
|
|
1
1
|
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
2
|
+
<div x-data="stickyPlayer" class="relative ar-16-9 bg-slate-400" x-intersect:leave.threshold.45="inViewport = false" x-intersect:enter.threshold.45="inViewport = true; videoWasStopedWhenSticky = false">
|
|
3
|
+
<div x-ref="videoElementWrapper"
|
|
4
|
+
class="transition-all lg:transition-none right-4"
|
|
5
|
+
:class="{ 'ar-16-9 w-1/2 max-w-70 sm:w-70 fixed z-300 animate-fade-right animate-once animate-duration-1000': shouldVideoBeFixed(),
|
|
6
|
+
'animate-fade animate-duration-1000 animate-ease-in-out': !shouldVideoBeFixed(),
|
|
7
|
+
'top-14 md:top-16 lg:top-31': $store.navIsVisible,
|
|
8
|
+
'top-4 lg:top-20': !$store.navIsVisible}">
|
|
9
|
+
{{> @partial-block }}
|
|
10
|
+
<button @click="closeVideo()" class="absolute top-0 right-0 flex items-center justify-center w-12 h-12 z-300 hover:scale-105"
|
|
11
|
+
:class="{'hidden': !shouldVideoBeFixed(),
|
|
12
|
+
'flex': shouldVideoBeFixed()}">
|
|
13
|
+
<div class="flex items-center justify-center w-8 h-8 {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant="primary"}}">
|
|
14
|
+
{{> components/button/components/button_icon _icon="close" _iconmap="icons" _css="" }}
|
|
15
|
+
</div>
|
|
16
|
+
</button>
|
|
17
|
+
</div>
|
|
18
|
+
|
|
19
|
+
<script>
|
|
20
|
+
var stickyPlayer = () => {
|
|
21
|
+
return {
|
|
22
|
+
eventListenerInitialized: false,
|
|
23
|
+
inViewport: true,
|
|
24
|
+
videoStarted: false,
|
|
25
|
+
videoStoped: true,
|
|
26
|
+
videoPlaying: false,
|
|
27
|
+
videoWasStopedWhenSticky: false,
|
|
28
|
+
videoWasStopedByUser: false,
|
|
29
|
+
videoElement: null,
|
|
16
30
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
this.videoStarted = true;
|
|
38
|
-
this.videoPlaying = true;
|
|
39
|
-
this.videoStoped = false;
|
|
40
|
-
});
|
|
41
|
-
this.videoElement.addEventListener("pause", () => {
|
|
42
|
-
console.log("video:pause");
|
|
43
|
-
this.videoPlaying = false;
|
|
44
|
-
this.videoStoped = true;
|
|
45
|
-
if (!this.inViewport) {
|
|
31
|
+
shouldVideoBeFixed: function () {
|
|
32
|
+
return (!this.inViewport && this.videoPlaying) || (!this.inViewport && this.videoWasStopedWhenSticky)
|
|
33
|
+
},
|
|
34
|
+
setupVideoEventListeners: function () {
|
|
35
|
+
console.log("setupVideoEventListeners");
|
|
36
|
+
if(!this.eventListenerInitialized) {
|
|
37
|
+
this.videoElement.addEventListener("play", () => {
|
|
38
|
+
console.log("video:play");
|
|
39
|
+
this.videoStarted = true;
|
|
40
|
+
this.videoPlaying = true;
|
|
41
|
+
this.videoStoped = false;
|
|
42
|
+
});
|
|
43
|
+
this.videoElement.addEventListener("pause", () => {
|
|
44
|
+
console.log("video:pause");
|
|
45
|
+
this.videoPlaying = false;
|
|
46
|
+
this.videoStoped = true;
|
|
47
|
+
if (!this.inViewport ) {
|
|
48
|
+
if(this.videoWasStopedByUser){
|
|
49
|
+
this.videoWasStopedByUser = false
|
|
50
|
+
} else {
|
|
46
51
|
this.videoWasStopedWhenSticky = true;
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
this.eventListenerInitialized = true;
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
closeVideo: function () {
|
|
59
|
+
this.videoElement.pause();
|
|
60
|
+
this.videoWasStopedByUser = true;
|
|
61
|
+
},
|
|
62
|
+
init: function () {
|
|
63
|
+
this.videoElement = this.$refs.videoElementWrapper.querySelector("video");
|
|
64
|
+
if(this.videoElement) {
|
|
65
|
+
this.setupVideoEventListeners();
|
|
66
|
+
} else {
|
|
67
|
+
console.log("No video element found in sticky player.");
|
|
68
|
+
const self = this; // Save a reference to the Alpine instance
|
|
69
|
+
const observer = new MutationObserver(function() {
|
|
70
|
+
console.log("MutationObserver: Mutation observed in sticky player.");
|
|
71
|
+
|
|
72
|
+
// Re-check for the video element
|
|
73
|
+
self.videoElement = self.$refs.videoElementWrapper.querySelector("video");
|
|
74
|
+
if (self.videoElement) {
|
|
75
|
+
console.log(self.videoElement)
|
|
76
|
+
self.setupVideoEventListeners();
|
|
77
|
+
observer.disconnect(); // Stop observing after the video is found
|
|
78
|
+
}
|
|
79
|
+
});
|
|
70
80
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
</div>
|
|
81
|
+
observer.observe(this.$refs.videoElementWrapper, {
|
|
82
|
+
subtree: true,
|
|
83
|
+
childList: true
|
|
84
|
+
});
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
},
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
</script>
|
|
91
|
+
</div>
|
|
@@ -1,82 +1,91 @@
|
|
|
1
1
|
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
2
|
+
<div x-data="stickyPlayer" class="relative ar-16-9 bg-slate-400" x-intersect:leave.threshold.45="inViewport = false" x-intersect:enter.threshold.45="inViewport = true; videoWasStopedWhenSticky = false">
|
|
3
|
+
<div x-ref="videoElementWrapper"
|
|
4
|
+
class="transition-all lg:transition-none right-4"
|
|
5
|
+
:class="{ 'ar-16-9 w-1/2 max-w-70 sm:w-70 fixed z-300 animate-fade-right animate-once animate-duration-1000': shouldVideoBeFixed(),
|
|
6
|
+
'animate-fade animate-duration-1000 animate-ease-in-out': !shouldVideoBeFixed(),
|
|
7
|
+
'top-14 md:top-16 lg:top-31': $store.navIsVisible,
|
|
8
|
+
'top-4 lg:top-20': !$store.navIsVisible}">
|
|
9
|
+
{{> @partial-block }}
|
|
10
|
+
<button @click="closeVideo()" class="absolute top-0 right-0 flex items-center justify-center w-12 h-12 z-300 hover:scale-105"
|
|
11
|
+
:class="{'hidden': !shouldVideoBeFixed(),
|
|
12
|
+
'flex': shouldVideoBeFixed()}">
|
|
13
|
+
<div class="flex items-center justify-center w-8 h-8 {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant="primary"}}">
|
|
14
|
+
{{> components/button/components/button_icon _icon="close" _iconmap="icons" _css="" }}
|
|
15
|
+
</div>
|
|
16
|
+
</button>
|
|
17
|
+
</div>
|
|
18
|
+
|
|
19
|
+
<script>
|
|
20
|
+
var stickyPlayer = () => {
|
|
21
|
+
return {
|
|
22
|
+
eventListenerInitialized: false,
|
|
23
|
+
inViewport: true,
|
|
24
|
+
videoStarted: false,
|
|
25
|
+
videoStoped: true,
|
|
26
|
+
videoPlaying: false,
|
|
27
|
+
videoWasStopedWhenSticky: false,
|
|
28
|
+
videoWasStopedByUser: false,
|
|
29
|
+
videoElement: null,
|
|
16
30
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
this.videoStarted = true;
|
|
38
|
-
this.videoPlaying = true;
|
|
39
|
-
this.videoStoped = false;
|
|
40
|
-
});
|
|
41
|
-
this.videoElement.addEventListener("pause", () => {
|
|
42
|
-
console.log("video:pause");
|
|
43
|
-
this.videoPlaying = false;
|
|
44
|
-
this.videoStoped = true;
|
|
45
|
-
if (!this.inViewport) {
|
|
31
|
+
shouldVideoBeFixed: function () {
|
|
32
|
+
return (!this.inViewport && this.videoPlaying) || (!this.inViewport && this.videoWasStopedWhenSticky)
|
|
33
|
+
},
|
|
34
|
+
setupVideoEventListeners: function () {
|
|
35
|
+
console.log("setupVideoEventListeners");
|
|
36
|
+
if(!this.eventListenerInitialized) {
|
|
37
|
+
this.videoElement.addEventListener("play", () => {
|
|
38
|
+
console.log("video:play");
|
|
39
|
+
this.videoStarted = true;
|
|
40
|
+
this.videoPlaying = true;
|
|
41
|
+
this.videoStoped = false;
|
|
42
|
+
});
|
|
43
|
+
this.videoElement.addEventListener("pause", () => {
|
|
44
|
+
console.log("video:pause");
|
|
45
|
+
this.videoPlaying = false;
|
|
46
|
+
this.videoStoped = true;
|
|
47
|
+
if (!this.inViewport ) {
|
|
48
|
+
if(this.videoWasStopedByUser){
|
|
49
|
+
this.videoWasStopedByUser = false
|
|
50
|
+
} else {
|
|
46
51
|
this.videoWasStopedWhenSticky = true;
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
this.eventListenerInitialized = true;
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
closeVideo: function () {
|
|
59
|
+
this.videoElement.pause();
|
|
60
|
+
this.videoWasStopedByUser = true;
|
|
61
|
+
},
|
|
62
|
+
init: function () {
|
|
63
|
+
this.videoElement = this.$refs.videoElementWrapper.querySelector("video");
|
|
64
|
+
if(this.videoElement) {
|
|
65
|
+
this.setupVideoEventListeners();
|
|
66
|
+
} else {
|
|
67
|
+
console.log("No video element found in sticky player.");
|
|
68
|
+
const self = this; // Save a reference to the Alpine instance
|
|
69
|
+
const observer = new MutationObserver(function() {
|
|
70
|
+
console.log("MutationObserver: Mutation observed in sticky player.");
|
|
71
|
+
|
|
72
|
+
// Re-check for the video element
|
|
73
|
+
self.videoElement = self.$refs.videoElementWrapper.querySelector("video");
|
|
74
|
+
if (self.videoElement) {
|
|
75
|
+
console.log(self.videoElement)
|
|
76
|
+
self.setupVideoEventListeners();
|
|
77
|
+
observer.disconnect(); // Stop observing after the video is found
|
|
78
|
+
}
|
|
79
|
+
});
|
|
70
80
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
</div>
|
|
81
|
+
observer.observe(this.$refs.videoElementWrapper, {
|
|
82
|
+
subtree: true,
|
|
83
|
+
childList: true
|
|
84
|
+
});
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
},
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
</script>
|
|
91
|
+
</div>
|
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.114.
|
|
9
|
+
"version": "1.114.68",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
|
@@ -121,6 +121,7 @@
|
|
|
121
121
|
"checkcss": "^2.0.9",
|
|
122
122
|
"dialog-polyfill": "^0.5.6",
|
|
123
123
|
"storybook-addon-pseudo-states": "^4.0.2",
|
|
124
|
+
"tailwindcss-animated": "^1.1.2",
|
|
124
125
|
"tailwindcss-counter": "^1.1.3"
|
|
125
126
|
},
|
|
126
127
|
"prettier": {
|
|
@@ -1,82 +1,91 @@
|
|
|
1
1
|
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
2
|
+
<div x-data="stickyPlayer" class="relative ar-16-9 bg-slate-400" x-intersect:leave.threshold.45="inViewport = false" x-intersect:enter.threshold.45="inViewport = true; videoWasStopedWhenSticky = false">
|
|
3
|
+
<div x-ref="videoElementWrapper"
|
|
4
|
+
class="transition-all lg:transition-none right-4"
|
|
5
|
+
:class="{ 'ar-16-9 w-1/2 max-w-70 sm:w-70 fixed z-300 animate-fade-right animate-once animate-duration-1000': shouldVideoBeFixed(),
|
|
6
|
+
'animate-fade animate-duration-1000 animate-ease-in-out': !shouldVideoBeFixed(),
|
|
7
|
+
'top-14 md:top-16 lg:top-31': $store.navIsVisible,
|
|
8
|
+
'top-4 lg:top-20': !$store.navIsVisible}">
|
|
9
|
+
{{> @partial-block }}
|
|
10
|
+
<button @click="closeVideo()" class="absolute top-0 right-0 flex items-center justify-center w-12 h-12 z-300 hover:scale-105"
|
|
11
|
+
:class="{'hidden': !shouldVideoBeFixed(),
|
|
12
|
+
'flex': shouldVideoBeFixed()}">
|
|
13
|
+
<div class="flex items-center justify-center w-8 h-8 {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant="primary"}}">
|
|
14
|
+
{{> components/button/components/button_icon _icon="close" _iconmap="icons" _css="" }}
|
|
15
|
+
</div>
|
|
16
|
+
</button>
|
|
17
|
+
</div>
|
|
18
|
+
|
|
19
|
+
<script>
|
|
20
|
+
var stickyPlayer = () => {
|
|
21
|
+
return {
|
|
22
|
+
eventListenerInitialized: false,
|
|
23
|
+
inViewport: true,
|
|
24
|
+
videoStarted: false,
|
|
25
|
+
videoStoped: true,
|
|
26
|
+
videoPlaying: false,
|
|
27
|
+
videoWasStopedWhenSticky: false,
|
|
28
|
+
videoWasStopedByUser: false,
|
|
29
|
+
videoElement: null,
|
|
16
30
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
this.videoStarted = true;
|
|
38
|
-
this.videoPlaying = true;
|
|
39
|
-
this.videoStoped = false;
|
|
40
|
-
});
|
|
41
|
-
this.videoElement.addEventListener("pause", () => {
|
|
42
|
-
console.log("video:pause");
|
|
43
|
-
this.videoPlaying = false;
|
|
44
|
-
this.videoStoped = true;
|
|
45
|
-
if (!this.inViewport) {
|
|
31
|
+
shouldVideoBeFixed: function () {
|
|
32
|
+
return (!this.inViewport && this.videoPlaying) || (!this.inViewport && this.videoWasStopedWhenSticky)
|
|
33
|
+
},
|
|
34
|
+
setupVideoEventListeners: function () {
|
|
35
|
+
console.log("setupVideoEventListeners");
|
|
36
|
+
if(!this.eventListenerInitialized) {
|
|
37
|
+
this.videoElement.addEventListener("play", () => {
|
|
38
|
+
console.log("video:play");
|
|
39
|
+
this.videoStarted = true;
|
|
40
|
+
this.videoPlaying = true;
|
|
41
|
+
this.videoStoped = false;
|
|
42
|
+
});
|
|
43
|
+
this.videoElement.addEventListener("pause", () => {
|
|
44
|
+
console.log("video:pause");
|
|
45
|
+
this.videoPlaying = false;
|
|
46
|
+
this.videoStoped = true;
|
|
47
|
+
if (!this.inViewport ) {
|
|
48
|
+
if(this.videoWasStopedByUser){
|
|
49
|
+
this.videoWasStopedByUser = false
|
|
50
|
+
} else {
|
|
46
51
|
this.videoWasStopedWhenSticky = true;
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
this.eventListenerInitialized = true;
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
closeVideo: function () {
|
|
59
|
+
this.videoElement.pause();
|
|
60
|
+
this.videoWasStopedByUser = true;
|
|
61
|
+
},
|
|
62
|
+
init: function () {
|
|
63
|
+
this.videoElement = this.$refs.videoElementWrapper.querySelector("video");
|
|
64
|
+
if(this.videoElement) {
|
|
65
|
+
this.setupVideoEventListeners();
|
|
66
|
+
} else {
|
|
67
|
+
console.log("No video element found in sticky player.");
|
|
68
|
+
const self = this; // Save a reference to the Alpine instance
|
|
69
|
+
const observer = new MutationObserver(function() {
|
|
70
|
+
console.log("MutationObserver: Mutation observed in sticky player.");
|
|
71
|
+
|
|
72
|
+
// Re-check for the video element
|
|
73
|
+
self.videoElement = self.$refs.videoElementWrapper.querySelector("video");
|
|
74
|
+
if (self.videoElement) {
|
|
75
|
+
console.log(self.videoElement)
|
|
76
|
+
self.setupVideoEventListeners();
|
|
77
|
+
observer.disconnect(); // Stop observing after the video is found
|
|
78
|
+
}
|
|
79
|
+
});
|
|
70
80
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
</div>
|
|
81
|
+
observer.observe(this.$refs.videoElementWrapper, {
|
|
82
|
+
subtree: true,
|
|
83
|
+
childList: true
|
|
84
|
+
});
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
},
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
</script>
|
|
91
|
+
</div>
|
|
@@ -44,12 +44,12 @@ export default (module) => ({
|
|
|
44
44
|
|
|
45
45
|
if(this.sharingModuleWasNeverShown && !desktop){
|
|
46
46
|
console.log('Sharing Module '+module+' was shown for the first time!!!');
|
|
47
|
-
uxAction('socialShareClick::'+module+'::shown');
|
|
47
|
+
//uxAction('socialShareClick::'+module+'::shown');
|
|
48
48
|
this.sharingModuleWasNeverShown = false;
|
|
49
49
|
}
|
|
50
50
|
if(this.desktopSharingModuleWasNeverShown && desktop){
|
|
51
51
|
console.log('Sharing Module '+module+'Desktop was shown for the first time!!!');
|
|
52
|
-
uxAction('socialShareClick::'+module+'Desktop::shown');
|
|
52
|
+
//uxAction('socialShareClick::'+module+'Desktop::shown');
|
|
53
53
|
this.desktopSharingModuleWasNeverShown = false;
|
|
54
54
|
}
|
|
55
55
|
},
|
package/tailwind.config.js
CHANGED
|
@@ -154,6 +154,7 @@ module.exports = {
|
|
|
154
154
|
'22': '5.5rem',
|
|
155
155
|
'26': '6.5rem',
|
|
156
156
|
'30': '7.5rem',
|
|
157
|
+
'31': '7.75rem',
|
|
157
158
|
'35': '8.75rem',
|
|
158
159
|
'37': '9.25rem',
|
|
159
160
|
'-37': '-9.25rem',
|
|
@@ -452,5 +453,6 @@ module.exports = {
|
|
|
452
453
|
addUtilities(utilities, variants('borderColor'))
|
|
453
454
|
},
|
|
454
455
|
require('tailwindcss-counter')(),
|
|
456
|
+
require('tailwindcss-animated')
|
|
455
457
|
],
|
|
456
458
|
}
|