hr-design-system-handlebars 1.114.98 → 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.
Files changed (10) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/assets/index.css +3 -3
  3. package/dist/assets/js/alpine.js +1 -2
  4. package/dist/assets/js/components/mediaplayer/stickyPlayer.alpine.js +71 -0
  5. package/dist/views/components/mediaplayer/mediaPlayer_stickyWrapper.hbs +1 -75
  6. package/dist/views_static/components/mediaplayer/mediaPlayer_stickyWrapper.hbs +1 -75
  7. package/package.json +1 -1
  8. package/src/assets/js/alpine.js +1 -2
  9. package/src/stories/views/components/mediaplayer/mediaPlayer_stickyWrapper.hbs +1 -75
  10. package/src/stories/views/components/mediaplayer/stickyPlayer.alpine.js +71 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
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
+
1
13
  # v1.114.98 (Wed Feb 19 2025)
2
14
 
3
15
  #### ⚠️ Pushed to `main`
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: cnt1739964042450;
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: cnt1739964042450 1;
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(cnt1739964042450);
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'))
package/dist/assets/js/components/mediaplayer/stickyPlayer.alpine.js ADDED
@@ -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
+ }
package/dist/views/components/mediaplayer/mediaPlayer_stickyWrapper.hbs CHANGED
@@ -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/dist/views_static/components/mediaplayer/mediaPlayer_stickyWrapper.hbs CHANGED
@@ -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.98",
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'))
package/src/stories/views/components/mediaplayer/mediaPlayer_stickyWrapper.hbs CHANGED
@@ -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/src/stories/views/components/mediaplayer/stickyPlayer.alpine.js ADDED
@@ -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
+ }