hr-design-system-handlebars 1.114.97 → 1.114.99
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 +24 -0
- package/dist/assets/index.css +3 -3
- package/dist/assets/js/alpine.js +1 -2
- package/dist/assets/js/components/mediaplayer/stickyPlayer.alpine.js +71 -0
- package/dist/views/components/forms/pages/webform_error.hbs +1 -1
- package/dist/views/components/forms/pages/webform_invalid.hbs +1 -1
- package/dist/views/components/forms/pages/webform_success.hbs +2 -2
- package/dist/views/components/mediaplayer/mediaPlayer_stickyWrapper.hbs +1 -75
- package/dist/views_static/components/forms/pages/webform_error.hbs +1 -1
- package/dist/views_static/components/forms/pages/webform_invalid.hbs +1 -1
- package/dist/views_static/components/forms/pages/webform_success.hbs +2 -2
- package/dist/views_static/components/mediaplayer/mediaPlayer_stickyWrapper.hbs +1 -75
- package/package.json +1 -1
- package/src/assets/js/alpine.js +1 -2
- package/src/stories/views/components/forms/pages/webform_error.hbs +1 -1
- package/src/stories/views/components/forms/pages/webform_invalid.hbs +1 -1
- package/src/stories/views/components/forms/pages/webform_success.hbs +2 -2
- package/src/stories/views/components/mediaplayer/mediaPlayer_stickyWrapper.hbs +1 -75
- package/src/stories/views/components/mediaplayer/stickyPlayer.alpine.js +71 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,27 @@
|
|
|
1
|
+
# v1.114.99 (Wed Feb 19 2025)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- move sticky player script to main alpine.js script and load it async [#1246](https://github.com/mumprod/hr-design-system-handlebars/pull/1246) ([@StefanVesper](https://github.com/StefanVesper))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v1.114.98 (Wed Feb 19 2025)
|
|
14
|
+
|
|
15
|
+
#### ⚠️ Pushed to `main`
|
|
16
|
+
|
|
17
|
+
- No JS-Form Layout changed ([@Paul-Atreidis](https://github.com/Paul-Atreidis))
|
|
18
|
+
|
|
19
|
+
#### Authors: 1
|
|
20
|
+
|
|
21
|
+
- [@Paul-Atreidis](https://github.com/Paul-Atreidis)
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
1
25
|
# v1.114.97 (Wed Feb 19 2025)
|
|
2
26
|
|
|
3
27
|
#### 🐛 Bug Fix
|
package/dist/assets/index.css
CHANGED
|
@@ -3846,7 +3846,7 @@ article #commentList {
|
|
|
3846
3846
|
border-bottom-color: var(--color-secondary-ds);
|
|
3847
3847
|
}
|
|
3848
3848
|
.counter-reset {
|
|
3849
|
-
counter-reset:
|
|
3849
|
+
counter-reset: cnt1739964571636;
|
|
3850
3850
|
}
|
|
3851
3851
|
.animate-delay-100 {
|
|
3852
3852
|
--tw-animate-delay: 100ms;
|
|
@@ -4291,7 +4291,7 @@ html { scroll-behavior: smooth; }
|
|
|
4291
4291
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
4292
4292
|
}
|
|
4293
4293
|
.-ordered {
|
|
4294
|
-
counter-increment:
|
|
4294
|
+
counter-increment: cnt1739964571636 1;
|
|
4295
4295
|
}
|
|
4296
4296
|
.-ordered::before {
|
|
4297
4297
|
position: absolute;
|
|
@@ -4309,7 +4309,7 @@ html { scroll-behavior: smooth; }
|
|
|
4309
4309
|
--tw-text-opacity: 1;
|
|
4310
4310
|
color: rgba(0, 0, 0, 1);
|
|
4311
4311
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
4312
|
-
content: counter(
|
|
4312
|
+
content: counter(cnt1739964571636);
|
|
4313
4313
|
}
|
|
4314
4314
|
/*! ****************************/
|
|
4315
4315
|
/*! DataPolicy stuff */
|
package/dist/assets/js/alpine.js
CHANGED
|
@@ -10,14 +10,13 @@ import mainNavigationHandler from 'components/site_header/mainNavigationHandler.
|
|
|
10
10
|
import flyoutHandler from 'components/site_header/flyoutHandler.alpine'
|
|
11
11
|
import overlayHandler from 'components/site_header/overlayHandler.alpine'
|
|
12
12
|
import dropdown from 'components/site_header/dropdown.alpine'
|
|
13
|
-
|
|
14
13
|
|
|
15
14
|
AsyncAlpine.init(Alpine)
|
|
16
15
|
.data('podcastPlayer', () => import('components/podcast/podcast_player.alpine.js'))
|
|
17
16
|
.data('slider', () =>
|
|
18
17
|
import('components/horizontal_scroll_container/horizontal_scroll_container.alpine.js')
|
|
19
18
|
)
|
|
20
|
-
|
|
19
|
+
.data('stickyPlayer', () => import('components/mediaplayer/stickyPlayer.alpine.js'))
|
|
21
20
|
.data('socialSharingHandler', ()=> import('components/social_sharing/socialSharingHandler.alpine.js'))
|
|
22
21
|
.data('inputHandler', ()=> import('components/forms/js/inputHandler.alpine.js'))
|
|
23
22
|
.data('contactForm', ()=> import('components/forms/js/contactForm.alpine.js'))
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
export default function stickyPlayer() {
|
|
2
|
+
return {
|
|
3
|
+
eventListenerInitialized: false,
|
|
4
|
+
inViewport: true,
|
|
5
|
+
videoStarted: false,
|
|
6
|
+
videoStoped: true,
|
|
7
|
+
videoPlaying: false,
|
|
8
|
+
videoWasStopedWhenSticky: false,
|
|
9
|
+
videoWasClosedByUser: false,
|
|
10
|
+
videoElement: null,
|
|
11
|
+
|
|
12
|
+
shouldVideoBeFixed: function () {
|
|
13
|
+
return (!this.inViewport && this.videoPlaying) || (!this.inViewport && this.videoWasStopedWhenSticky)
|
|
14
|
+
},
|
|
15
|
+
setupVideoEventListeners: function () {
|
|
16
|
+
console.log("setupVideoEventListeners");
|
|
17
|
+
if(!this.eventListenerInitialized) {
|
|
18
|
+
this.videoElement.addEventListener("play", () => {
|
|
19
|
+
console.log("video:play");
|
|
20
|
+
this.videoStarted = true;
|
|
21
|
+
this.videoPlaying = true;
|
|
22
|
+
this.videoStoped = false;
|
|
23
|
+
});
|
|
24
|
+
this.videoElement.addEventListener("pause", () => {
|
|
25
|
+
console.log("video:pause");
|
|
26
|
+
this.videoPlaying = false;
|
|
27
|
+
this.videoStoped = true;
|
|
28
|
+
if (!this.inViewport ) {
|
|
29
|
+
if(this.videoWasClosedByUser){
|
|
30
|
+
this.videoWasClosedByUser = false
|
|
31
|
+
} else {
|
|
32
|
+
this.videoWasStopedWhenSticky = true;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
this.eventListenerInitialized = true;
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
closeVideo: function () {
|
|
40
|
+
this.videoWasStopedWhenSticky = false;
|
|
41
|
+
this.videoWasClosedByUser = true;
|
|
42
|
+
this.videoElement.pause();
|
|
43
|
+
},
|
|
44
|
+
init: function () {
|
|
45
|
+
this.videoElement = this.$refs.videoElementWrapper.querySelector("video");
|
|
46
|
+
if(this.videoElement) {
|
|
47
|
+
this.setupVideoEventListeners();
|
|
48
|
+
} else {
|
|
49
|
+
console.log("No video element found in sticky player.");
|
|
50
|
+
const self = this; // Save a reference to the Alpine instance
|
|
51
|
+
const observer = new MutationObserver(function() {
|
|
52
|
+
console.log("MutationObserver: Mutation observed in sticky player.");
|
|
53
|
+
|
|
54
|
+
// Re-check for the video element
|
|
55
|
+
self.videoElement = self.$refs.videoElementWrapper.querySelector("video");
|
|
56
|
+
if (self.videoElement) {
|
|
57
|
+
console.log(self.videoElement)
|
|
58
|
+
self.setupVideoEventListeners();
|
|
59
|
+
observer.disconnect(); // Stop observing after the video is found
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
observer.observe(this.$refs.videoElementWrapper, {
|
|
64
|
+
subtree: true,
|
|
65
|
+
childList: true
|
|
66
|
+
});
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{{~#partial "body"~}}
|
|
2
2
|
<article class="grid grid-page">
|
|
3
|
-
<div class="grid
|
|
3
|
+
<div class="grid col-main grid-article">
|
|
4
4
|
{{#>components/forms/components/backgroundBox }}
|
|
5
5
|
{{> components/forms/components/message _success=false _messageText="Das Formular konnte nicht versendet werden." }}
|
|
6
6
|
{{/components/forms/components/backgroundBox }}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{{~#partial "body"~}}
|
|
2
2
|
<article class="grid grid-page">
|
|
3
|
-
<div class="grid
|
|
3
|
+
<div class="grid col-main grid-article">
|
|
4
4
|
{{#>components/forms/components/backgroundBox }}
|
|
5
|
-
{{> components/forms/components/message _success=true _messageText="Das Formular wurde
|
|
5
|
+
{{> components/forms/components/message _success=true _messageText="Das Formular wurde erfolgreich versendet." }}
|
|
6
6
|
{{/components/forms/components/backgroundBox }}
|
|
7
7
|
|
|
8
8
|
{{{ this.relatedContentSsi }}}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
<div x-data="stickyPlayer" class="relative ar-16-9" x-intersect:leave.threshold.45="inViewport = false" x-intersect:enter.threshold.45="inViewport = true; videoWasStopedWhenSticky = false">
|
|
1
|
+
<div x-data="stickyPlayer" ax-load x-ignore class="relative ar-16-9" x-intersect:leave.threshold.45="inViewport = false" x-intersect:enter.threshold.45="inViewport = true; videoWasStopedWhenSticky = false">
|
|
3
2
|
<div x-ref="videoElementWrapper"
|
|
4
3
|
class="transition-all lg:transition-none right-4"
|
|
5
4
|
: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(),
|
|
@@ -17,77 +16,4 @@
|
|
|
17
16
|
</div>
|
|
18
17
|
</button>
|
|
19
18
|
</div>
|
|
20
|
-
<script>
|
|
21
|
-
var stickyPlayer = () => {
|
|
22
|
-
return {
|
|
23
|
-
eventListenerInitialized: false,
|
|
24
|
-
inViewport: true,
|
|
25
|
-
videoStarted: false,
|
|
26
|
-
videoStoped: true,
|
|
27
|
-
videoPlaying: false,
|
|
28
|
-
videoWasStopedWhenSticky: false,
|
|
29
|
-
videoWasClosedByUser: false,
|
|
30
|
-
videoElement: null,
|
|
31
|
-
|
|
32
|
-
shouldVideoBeFixed: function () {
|
|
33
|
-
return (!this.inViewport && this.videoPlaying) || (!this.inViewport && this.videoWasStopedWhenSticky)
|
|
34
|
-
},
|
|
35
|
-
setupVideoEventListeners: function () {
|
|
36
|
-
console.log("setupVideoEventListeners");
|
|
37
|
-
if(!this.eventListenerInitialized) {
|
|
38
|
-
this.videoElement.addEventListener("play", () => {
|
|
39
|
-
console.log("video:play");
|
|
40
|
-
this.videoStarted = true;
|
|
41
|
-
this.videoPlaying = true;
|
|
42
|
-
this.videoStoped = false;
|
|
43
|
-
});
|
|
44
|
-
this.videoElement.addEventListener("pause", () => {
|
|
45
|
-
console.log("video:pause");
|
|
46
|
-
this.videoPlaying = false;
|
|
47
|
-
this.videoStoped = true;
|
|
48
|
-
if (!this.inViewport ) {
|
|
49
|
-
if(this.videoWasClosedByUser){
|
|
50
|
-
this.videoWasClosedByUser = false
|
|
51
|
-
} else {
|
|
52
|
-
this.videoWasStopedWhenSticky = true;
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
});
|
|
56
|
-
this.eventListenerInitialized = true;
|
|
57
|
-
}
|
|
58
|
-
},
|
|
59
|
-
closeVideo: function () {
|
|
60
|
-
this.videoWasStopedWhenSticky = false;
|
|
61
|
-
this.videoWasClosedByUser = true;
|
|
62
|
-
this.videoElement.pause();
|
|
63
|
-
},
|
|
64
|
-
init: function () {
|
|
65
|
-
this.videoElement = this.$refs.videoElementWrapper.querySelector("video");
|
|
66
|
-
if(this.videoElement) {
|
|
67
|
-
this.setupVideoEventListeners();
|
|
68
|
-
} else {
|
|
69
|
-
console.log("No video element found in sticky player.");
|
|
70
|
-
const self = this; // Save a reference to the Alpine instance
|
|
71
|
-
const observer = new MutationObserver(function() {
|
|
72
|
-
console.log("MutationObserver: Mutation observed in sticky player.");
|
|
73
|
-
|
|
74
|
-
// Re-check for the video element
|
|
75
|
-
self.videoElement = self.$refs.videoElementWrapper.querySelector("video");
|
|
76
|
-
if (self.videoElement) {
|
|
77
|
-
console.log(self.videoElement)
|
|
78
|
-
self.setupVideoEventListeners();
|
|
79
|
-
observer.disconnect(); // Stop observing after the video is found
|
|
80
|
-
}
|
|
81
|
-
});
|
|
82
|
-
|
|
83
|
-
observer.observe(this.$refs.videoElementWrapper, {
|
|
84
|
-
subtree: true,
|
|
85
|
-
childList: true
|
|
86
|
-
});
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
},
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
</script>
|
|
93
19
|
</div>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{{~#partial "body"~}}
|
|
2
2
|
<article class="grid grid-page">
|
|
3
|
-
<div class="grid
|
|
3
|
+
<div class="grid col-main grid-article">
|
|
4
4
|
{{#>components/forms/components/backgroundBox }}
|
|
5
5
|
{{> components/forms/components/message _success=false _messageText="Das Formular konnte nicht versendet werden." }}
|
|
6
6
|
{{/components/forms/components/backgroundBox }}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{{~#partial "body"~}}
|
|
2
2
|
<article class="grid grid-page">
|
|
3
|
-
<div class="grid
|
|
3
|
+
<div class="grid col-main grid-article">
|
|
4
4
|
{{#>components/forms/components/backgroundBox }}
|
|
5
|
-
{{> components/forms/components/message _success=true _messageText="Das Formular wurde
|
|
5
|
+
{{> components/forms/components/message _success=true _messageText="Das Formular wurde erfolgreich versendet." }}
|
|
6
6
|
{{/components/forms/components/backgroundBox }}
|
|
7
7
|
|
|
8
8
|
{{{ this.relatedContentSsi }}}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
<div x-data="stickyPlayer" class="relative ar-16-9" x-intersect:leave.threshold.45="inViewport = false" x-intersect:enter.threshold.45="inViewport = true; videoWasStopedWhenSticky = false">
|
|
1
|
+
<div x-data="stickyPlayer" ax-load x-ignore class="relative ar-16-9" x-intersect:leave.threshold.45="inViewport = false" x-intersect:enter.threshold.45="inViewport = true; videoWasStopedWhenSticky = false">
|
|
3
2
|
<div x-ref="videoElementWrapper"
|
|
4
3
|
class="transition-all lg:transition-none right-4"
|
|
5
4
|
: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(),
|
|
@@ -17,77 +16,4 @@
|
|
|
17
16
|
</div>
|
|
18
17
|
</button>
|
|
19
18
|
</div>
|
|
20
|
-
<script>
|
|
21
|
-
var stickyPlayer = () => {
|
|
22
|
-
return {
|
|
23
|
-
eventListenerInitialized: false,
|
|
24
|
-
inViewport: true,
|
|
25
|
-
videoStarted: false,
|
|
26
|
-
videoStoped: true,
|
|
27
|
-
videoPlaying: false,
|
|
28
|
-
videoWasStopedWhenSticky: false,
|
|
29
|
-
videoWasClosedByUser: false,
|
|
30
|
-
videoElement: null,
|
|
31
|
-
|
|
32
|
-
shouldVideoBeFixed: function () {
|
|
33
|
-
return (!this.inViewport && this.videoPlaying) || (!this.inViewport && this.videoWasStopedWhenSticky)
|
|
34
|
-
},
|
|
35
|
-
setupVideoEventListeners: function () {
|
|
36
|
-
console.log("setupVideoEventListeners");
|
|
37
|
-
if(!this.eventListenerInitialized) {
|
|
38
|
-
this.videoElement.addEventListener("play", () => {
|
|
39
|
-
console.log("video:play");
|
|
40
|
-
this.videoStarted = true;
|
|
41
|
-
this.videoPlaying = true;
|
|
42
|
-
this.videoStoped = false;
|
|
43
|
-
});
|
|
44
|
-
this.videoElement.addEventListener("pause", () => {
|
|
45
|
-
console.log("video:pause");
|
|
46
|
-
this.videoPlaying = false;
|
|
47
|
-
this.videoStoped = true;
|
|
48
|
-
if (!this.inViewport ) {
|
|
49
|
-
if(this.videoWasClosedByUser){
|
|
50
|
-
this.videoWasClosedByUser = false
|
|
51
|
-
} else {
|
|
52
|
-
this.videoWasStopedWhenSticky = true;
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
});
|
|
56
|
-
this.eventListenerInitialized = true;
|
|
57
|
-
}
|
|
58
|
-
},
|
|
59
|
-
closeVideo: function () {
|
|
60
|
-
this.videoWasStopedWhenSticky = false;
|
|
61
|
-
this.videoWasClosedByUser = true;
|
|
62
|
-
this.videoElement.pause();
|
|
63
|
-
},
|
|
64
|
-
init: function () {
|
|
65
|
-
this.videoElement = this.$refs.videoElementWrapper.querySelector("video");
|
|
66
|
-
if(this.videoElement) {
|
|
67
|
-
this.setupVideoEventListeners();
|
|
68
|
-
} else {
|
|
69
|
-
console.log("No video element found in sticky player.");
|
|
70
|
-
const self = this; // Save a reference to the Alpine instance
|
|
71
|
-
const observer = new MutationObserver(function() {
|
|
72
|
-
console.log("MutationObserver: Mutation observed in sticky player.");
|
|
73
|
-
|
|
74
|
-
// Re-check for the video element
|
|
75
|
-
self.videoElement = self.$refs.videoElementWrapper.querySelector("video");
|
|
76
|
-
if (self.videoElement) {
|
|
77
|
-
console.log(self.videoElement)
|
|
78
|
-
self.setupVideoEventListeners();
|
|
79
|
-
observer.disconnect(); // Stop observing after the video is found
|
|
80
|
-
}
|
|
81
|
-
});
|
|
82
|
-
|
|
83
|
-
observer.observe(this.$refs.videoElementWrapper, {
|
|
84
|
-
subtree: true,
|
|
85
|
-
childList: true
|
|
86
|
-
});
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
},
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
</script>
|
|
93
19
|
</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.99",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
package/src/assets/js/alpine.js
CHANGED
|
@@ -10,14 +10,13 @@ import mainNavigationHandler from 'components/site_header/mainNavigationHandler.
|
|
|
10
10
|
import flyoutHandler from 'components/site_header/flyoutHandler.alpine'
|
|
11
11
|
import overlayHandler from 'components/site_header/overlayHandler.alpine'
|
|
12
12
|
import dropdown from 'components/site_header/dropdown.alpine'
|
|
13
|
-
|
|
14
13
|
|
|
15
14
|
AsyncAlpine.init(Alpine)
|
|
16
15
|
.data('podcastPlayer', () => import('components/podcast/podcast_player.alpine.js'))
|
|
17
16
|
.data('slider', () =>
|
|
18
17
|
import('components/horizontal_scroll_container/horizontal_scroll_container.alpine.js')
|
|
19
18
|
)
|
|
20
|
-
|
|
19
|
+
.data('stickyPlayer', () => import('components/mediaplayer/stickyPlayer.alpine.js'))
|
|
21
20
|
.data('socialSharingHandler', ()=> import('components/social_sharing/socialSharingHandler.alpine.js'))
|
|
22
21
|
.data('inputHandler', ()=> import('components/forms/js/inputHandler.alpine.js'))
|
|
23
22
|
.data('contactForm', ()=> import('components/forms/js/contactForm.alpine.js'))
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{{~#partial "body"~}}
|
|
2
2
|
<article class="grid grid-page">
|
|
3
|
-
<div class="grid
|
|
3
|
+
<div class="grid col-main grid-article">
|
|
4
4
|
{{#>components/forms/components/backgroundBox }}
|
|
5
5
|
{{> components/forms/components/message _success=false _messageText="Das Formular konnte nicht versendet werden." }}
|
|
6
6
|
{{/components/forms/components/backgroundBox }}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{{~#partial "body"~}}
|
|
2
2
|
<article class="grid grid-page">
|
|
3
|
-
<div class="grid
|
|
3
|
+
<div class="grid col-main grid-article">
|
|
4
4
|
{{#>components/forms/components/backgroundBox }}
|
|
5
|
-
{{> components/forms/components/message _success=true _messageText="Das Formular wurde
|
|
5
|
+
{{> components/forms/components/message _success=true _messageText="Das Formular wurde erfolgreich versendet." }}
|
|
6
6
|
{{/components/forms/components/backgroundBox }}
|
|
7
7
|
|
|
8
8
|
{{{ this.relatedContentSsi }}}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
<div x-data="stickyPlayer" class="relative ar-16-9" x-intersect:leave.threshold.45="inViewport = false" x-intersect:enter.threshold.45="inViewport = true; videoWasStopedWhenSticky = false">
|
|
1
|
+
<div x-data="stickyPlayer" ax-load x-ignore class="relative ar-16-9" x-intersect:leave.threshold.45="inViewport = false" x-intersect:enter.threshold.45="inViewport = true; videoWasStopedWhenSticky = false">
|
|
3
2
|
<div x-ref="videoElementWrapper"
|
|
4
3
|
class="transition-all lg:transition-none right-4"
|
|
5
4
|
: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(),
|
|
@@ -17,77 +16,4 @@
|
|
|
17
16
|
</div>
|
|
18
17
|
</button>
|
|
19
18
|
</div>
|
|
20
|
-
<script>
|
|
21
|
-
var stickyPlayer = () => {
|
|
22
|
-
return {
|
|
23
|
-
eventListenerInitialized: false,
|
|
24
|
-
inViewport: true,
|
|
25
|
-
videoStarted: false,
|
|
26
|
-
videoStoped: true,
|
|
27
|
-
videoPlaying: false,
|
|
28
|
-
videoWasStopedWhenSticky: false,
|
|
29
|
-
videoWasClosedByUser: false,
|
|
30
|
-
videoElement: null,
|
|
31
|
-
|
|
32
|
-
shouldVideoBeFixed: function () {
|
|
33
|
-
return (!this.inViewport && this.videoPlaying) || (!this.inViewport && this.videoWasStopedWhenSticky)
|
|
34
|
-
},
|
|
35
|
-
setupVideoEventListeners: function () {
|
|
36
|
-
console.log("setupVideoEventListeners");
|
|
37
|
-
if(!this.eventListenerInitialized) {
|
|
38
|
-
this.videoElement.addEventListener("play", () => {
|
|
39
|
-
console.log("video:play");
|
|
40
|
-
this.videoStarted = true;
|
|
41
|
-
this.videoPlaying = true;
|
|
42
|
-
this.videoStoped = false;
|
|
43
|
-
});
|
|
44
|
-
this.videoElement.addEventListener("pause", () => {
|
|
45
|
-
console.log("video:pause");
|
|
46
|
-
this.videoPlaying = false;
|
|
47
|
-
this.videoStoped = true;
|
|
48
|
-
if (!this.inViewport ) {
|
|
49
|
-
if(this.videoWasClosedByUser){
|
|
50
|
-
this.videoWasClosedByUser = false
|
|
51
|
-
} else {
|
|
52
|
-
this.videoWasStopedWhenSticky = true;
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
});
|
|
56
|
-
this.eventListenerInitialized = true;
|
|
57
|
-
}
|
|
58
|
-
},
|
|
59
|
-
closeVideo: function () {
|
|
60
|
-
this.videoWasStopedWhenSticky = false;
|
|
61
|
-
this.videoWasClosedByUser = true;
|
|
62
|
-
this.videoElement.pause();
|
|
63
|
-
},
|
|
64
|
-
init: function () {
|
|
65
|
-
this.videoElement = this.$refs.videoElementWrapper.querySelector("video");
|
|
66
|
-
if(this.videoElement) {
|
|
67
|
-
this.setupVideoEventListeners();
|
|
68
|
-
} else {
|
|
69
|
-
console.log("No video element found in sticky player.");
|
|
70
|
-
const self = this; // Save a reference to the Alpine instance
|
|
71
|
-
const observer = new MutationObserver(function() {
|
|
72
|
-
console.log("MutationObserver: Mutation observed in sticky player.");
|
|
73
|
-
|
|
74
|
-
// Re-check for the video element
|
|
75
|
-
self.videoElement = self.$refs.videoElementWrapper.querySelector("video");
|
|
76
|
-
if (self.videoElement) {
|
|
77
|
-
console.log(self.videoElement)
|
|
78
|
-
self.setupVideoEventListeners();
|
|
79
|
-
observer.disconnect(); // Stop observing after the video is found
|
|
80
|
-
}
|
|
81
|
-
});
|
|
82
|
-
|
|
83
|
-
observer.observe(this.$refs.videoElementWrapper, {
|
|
84
|
-
subtree: true,
|
|
85
|
-
childList: true
|
|
86
|
-
});
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
},
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
</script>
|
|
93
19
|
</div>
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
export default function stickyPlayer() {
|
|
2
|
+
return {
|
|
3
|
+
eventListenerInitialized: false,
|
|
4
|
+
inViewport: true,
|
|
5
|
+
videoStarted: false,
|
|
6
|
+
videoStoped: true,
|
|
7
|
+
videoPlaying: false,
|
|
8
|
+
videoWasStopedWhenSticky: false,
|
|
9
|
+
videoWasClosedByUser: false,
|
|
10
|
+
videoElement: null,
|
|
11
|
+
|
|
12
|
+
shouldVideoBeFixed: function () {
|
|
13
|
+
return (!this.inViewport && this.videoPlaying) || (!this.inViewport && this.videoWasStopedWhenSticky)
|
|
14
|
+
},
|
|
15
|
+
setupVideoEventListeners: function () {
|
|
16
|
+
console.log("setupVideoEventListeners");
|
|
17
|
+
if(!this.eventListenerInitialized) {
|
|
18
|
+
this.videoElement.addEventListener("play", () => {
|
|
19
|
+
console.log("video:play");
|
|
20
|
+
this.videoStarted = true;
|
|
21
|
+
this.videoPlaying = true;
|
|
22
|
+
this.videoStoped = false;
|
|
23
|
+
});
|
|
24
|
+
this.videoElement.addEventListener("pause", () => {
|
|
25
|
+
console.log("video:pause");
|
|
26
|
+
this.videoPlaying = false;
|
|
27
|
+
this.videoStoped = true;
|
|
28
|
+
if (!this.inViewport ) {
|
|
29
|
+
if(this.videoWasClosedByUser){
|
|
30
|
+
this.videoWasClosedByUser = false
|
|
31
|
+
} else {
|
|
32
|
+
this.videoWasStopedWhenSticky = true;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
this.eventListenerInitialized = true;
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
closeVideo: function () {
|
|
40
|
+
this.videoWasStopedWhenSticky = false;
|
|
41
|
+
this.videoWasClosedByUser = true;
|
|
42
|
+
this.videoElement.pause();
|
|
43
|
+
},
|
|
44
|
+
init: function () {
|
|
45
|
+
this.videoElement = this.$refs.videoElementWrapper.querySelector("video");
|
|
46
|
+
if(this.videoElement) {
|
|
47
|
+
this.setupVideoEventListeners();
|
|
48
|
+
} else {
|
|
49
|
+
console.log("No video element found in sticky player.");
|
|
50
|
+
const self = this; // Save a reference to the Alpine instance
|
|
51
|
+
const observer = new MutationObserver(function() {
|
|
52
|
+
console.log("MutationObserver: Mutation observed in sticky player.");
|
|
53
|
+
|
|
54
|
+
// Re-check for the video element
|
|
55
|
+
self.videoElement = self.$refs.videoElementWrapper.querySelector("video");
|
|
56
|
+
if (self.videoElement) {
|
|
57
|
+
console.log(self.videoElement)
|
|
58
|
+
self.setupVideoEventListeners();
|
|
59
|
+
observer.disconnect(); // Stop observing after the video is found
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
observer.observe(this.$refs.videoElementWrapper, {
|
|
64
|
+
subtree: true,
|
|
65
|
+
childList: true
|
|
66
|
+
});
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|