From 1727d86a531b1c626dcd42c02aa3c28b9da53f4d Mon Sep 17 00:00:00 2001 From: Eugene Kasimov Date: Wed, 26 Apr 2023 19:09:00 -0700 Subject: [PATCH 1/8] Stop auto-rotation after first interaction with an arrow button. Prevent auto-rotation for mobile. Change settings for auto-rotation. --- assets/global.js | 21 +++++++++++++++++---- sections/announcement-bar.liquid | 6 +++--- 2 files changed, 20 insertions(+), 7 deletions(-) diff --git a/assets/global.js b/assets/global.js index 38423dc1867..f615bcafec0 100644 --- a/assets/global.js +++ b/assets/global.js @@ -701,6 +701,7 @@ class SlideshowComponent extends SliderComponent { super(); this.sliderControlWrapper = this.querySelector('.slider-buttons'); this.enableSliderLooping = true; + this.arrowButtonWasInteracted = false; if (!this.sliderControlWrapper) return; @@ -712,12 +713,17 @@ class SlideshowComponent extends SliderComponent { this.slider.addEventListener('scroll', this.setSlideVisibility.bind(this)); this.setSlideVisibility(); + this.mobileLayout = window.matchMedia('(max-width: 749px)'); this.reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)'); this.reducedMotion.addEventListener('change', () => { - if (this.slider.getAttribute('data-autoplay') === 'true') this.setAutoPlay(); + if (this.slider.getAttribute('data-autoplay') === 'true' && !this.mobileLayout.matches) this.setAutoPlay(); }); - if (this.slider.getAttribute('data-autoplay') === 'true') this.setAutoPlay(); + window.addEventListener('resize', () => { + this.mobileLayout.matches || this.arrowButtonWasInteracted || this.reducedMotion.matches ? this.pause() : this.play(); + }); + + if (this.slider.getAttribute('data-autoplay') === 'true' && !this.mobileLayout.matches) this.setAutoPlay(); } setAutoPlay() { @@ -727,13 +733,20 @@ class SlideshowComponent extends SliderComponent { this.addEventListener('focusin', this.focusInHandling.bind(this)); this.addEventListener('focusout', this.focusOutHandling.bind(this)); + this.sliderArrowButtons = this.querySelectorAll('.announcement-bar-slider .slider-button'); + this.sliderArrowButtons.forEach((button) => { + button.addEventListener('click', () => { + this.arrowButtonWasInteracted = true; + }, {once: true}); + }); + if (this.querySelector('.slideshow__autoplay')) { this.sliderAutoplayButton = this.querySelector('.slideshow__autoplay'); this.sliderAutoplayButton.addEventListener('click', this.autoPlayToggle.bind(this)); this.autoplayButtonIsSetToPlay = true; this.play(); } else { - this.reducedMotion.matches ? this.pause() : this.play(); + this.reducedMotion.matches || this.arrowButtonWasInteracted ? this.pause() : this.play(); } } @@ -782,7 +795,7 @@ class SlideshowComponent extends SliderComponent { event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play(); - } else if (!this.reducedMotion.matches) { + } else if (!this.reducedMotion.matches && !this.arrowButtonWasInteracted && !this.mobileLayout.matches) { this.play(); } } diff --git a/sections/announcement-bar.liquid b/sections/announcement-bar.liquid index 9b747f0fbe0..dd9f88a9ddf 100644 --- a/sections/announcement-bar.liquid +++ b/sections/announcement-bar.liquid @@ -141,9 +141,9 @@ { "type": "range", "id": "change_slides_speed", - "min": 3, - "max": 9, - "step": 2, + "min": 5, + "max": 10, + "step": 1, "unit": "s", "label": "t:sections.announcement-bar.settings.change_slides_speed.label", "default": 5 From 4dcf6806a7db3e37ecc9d0fa7a0cea024b328d35 Mon Sep 17 00:00:00 2001 From: Eugene Kasimov Date: Thu, 27 Apr 2023 09:20:39 -0700 Subject: [PATCH 2/8] Change 'resize' to 'change' and max-width to min-width. --- assets/global.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/assets/global.js b/assets/global.js index f615bcafec0..90f1f36ad98 100644 --- a/assets/global.js +++ b/assets/global.js @@ -713,17 +713,17 @@ class SlideshowComponent extends SliderComponent { this.slider.addEventListener('scroll', this.setSlideVisibility.bind(this)); this.setSlideVisibility(); - this.mobileLayout = window.matchMedia('(max-width: 749px)'); + this.desktopLayout = window.matchMedia('(min-width: 750px)'); this.reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)'); this.reducedMotion.addEventListener('change', () => { - if (this.slider.getAttribute('data-autoplay') === 'true' && !this.mobileLayout.matches) this.setAutoPlay(); + if (this.slider.getAttribute('data-autoplay') === 'true' && this.desktopLayout.matches) this.setAutoPlay(); }); - window.addEventListener('resize', () => { - this.mobileLayout.matches || this.arrowButtonWasInteracted || this.reducedMotion.matches ? this.pause() : this.play(); + this.desktopLayout.addEventListener('change', (event) => { + !event.matches || this.arrowButtonWasInteracted || this.reducedMotion.matches ? this.pause() : this.play(); }); - if (this.slider.getAttribute('data-autoplay') === 'true' && !this.mobileLayout.matches) this.setAutoPlay(); + if (this.slider.getAttribute('data-autoplay') === 'true' && this.desktopLayout.matches) this.setAutoPlay(); } setAutoPlay() { @@ -795,7 +795,7 @@ class SlideshowComponent extends SliderComponent { event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play(); - } else if (!this.reducedMotion.matches && !this.arrowButtonWasInteracted && !this.mobileLayout.matches) { + } else if (!this.reducedMotion.matches && !this.arrowButtonWasInteracted && this.desktopLayout.matches) { this.play(); } } From a89de563ebf0de06587d526ab8e4bedaaf2ccb89 Mon Sep 17 00:00:00 2001 From: Eugene Kasimov Date: Thu, 27 Apr 2023 10:39:19 -0700 Subject: [PATCH 3/8] Apply the current changes to the announcement bar only. --- assets/global.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/assets/global.js b/assets/global.js index 90f1f36ad98..f1eaa3adddf 100644 --- a/assets/global.js +++ b/assets/global.js @@ -715,15 +715,16 @@ class SlideshowComponent extends SliderComponent { this.desktopLayout = window.matchMedia('(min-width: 750px)'); this.reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)'); + this.reducedMotion.addEventListener('change', () => { - if (this.slider.getAttribute('data-autoplay') === 'true' && this.desktopLayout.matches) this.setAutoPlay(); + if (this.slider.getAttribute('data-autoplay') === 'true') this.setAutoPlay(); }); this.desktopLayout.addEventListener('change', (event) => { - !event.matches || this.arrowButtonWasInteracted || this.reducedMotion.matches ? this.pause() : this.play(); + if (this.slider.getAttribute('data-autoplay') === 'true') this.setAutoPlay(); }); - if (this.slider.getAttribute('data-autoplay') === 'true' && this.desktopLayout.matches) this.setAutoPlay(); + if (this.slider.getAttribute('data-autoplay') === 'true') this.setAutoPlay(); } setAutoPlay() { @@ -746,7 +747,7 @@ class SlideshowComponent extends SliderComponent { this.autoplayButtonIsSetToPlay = true; this.play(); } else { - this.reducedMotion.matches || this.arrowButtonWasInteracted ? this.pause() : this.play(); + this.reducedMotion.matches || this.arrowButtonWasInteracted || !this.desktopLayout.matches ? this.pause() : this.play(); } } From 9396596a85458a672cd1a3b28b2f1f9c1afe6e3f Mon Sep 17 00:00:00 2001 From: Eugene Kasimov Date: Fri, 28 Apr 2023 09:38:11 -0700 Subject: [PATCH 4/8] Renaming variables in JS. --- assets/global.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/assets/global.js b/assets/global.js index f1eaa3adddf..7f33ffddb1c 100644 --- a/assets/global.js +++ b/assets/global.js @@ -701,7 +701,7 @@ class SlideshowComponent extends SliderComponent { super(); this.sliderControlWrapper = this.querySelector('.slider-buttons'); this.enableSliderLooping = true; - this.arrowButtonWasInteracted = false; + this.announcementBarArrowButtonWasClicked = false; if (!this.sliderControlWrapper) return; @@ -734,10 +734,10 @@ class SlideshowComponent extends SliderComponent { this.addEventListener('focusin', this.focusInHandling.bind(this)); this.addEventListener('focusout', this.focusOutHandling.bind(this)); - this.sliderArrowButtons = this.querySelectorAll('.announcement-bar-slider .slider-button'); - this.sliderArrowButtons.forEach((button) => { + this.announcementSliderArrowButtons = this.querySelectorAll('.announcement-bar-slider .slider-button'); + this.announcementSliderArrowButtons.forEach((button) => { button.addEventListener('click', () => { - this.arrowButtonWasInteracted = true; + this.announcementBarArrowButtonWasClicked = true; }, {once: true}); }); @@ -747,7 +747,7 @@ class SlideshowComponent extends SliderComponent { this.autoplayButtonIsSetToPlay = true; this.play(); } else { - this.reducedMotion.matches || this.arrowButtonWasInteracted || !this.desktopLayout.matches ? this.pause() : this.play(); + this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked || !this.desktopLayout.matches ? this.pause() : this.play(); } } @@ -796,7 +796,7 @@ class SlideshowComponent extends SliderComponent { event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play(); - } else if (!this.reducedMotion.matches && !this.arrowButtonWasInteracted && this.desktopLayout.matches) { + } else if (!this.reducedMotion.matches && !this.announcementBarArrowButtonWasClicked && this.desktopLayout.matches) { this.play(); } } From 00d23e0bf98fe7beb6aa47d33c5b1e02699bd14c Mon Sep 17 00:00:00 2001 From: Eugene Kasimov Date: Fri, 28 Apr 2023 10:18:21 -0700 Subject: [PATCH 5/8] Add a condition for the announcement bar for JS. --- assets/global.js | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/assets/global.js b/assets/global.js index 7f33ffddb1c..b9ef34c408c 100644 --- a/assets/global.js +++ b/assets/global.js @@ -701,7 +701,6 @@ class SlideshowComponent extends SliderComponent { super(); this.sliderControlWrapper = this.querySelector('.slider-buttons'); this.enableSliderLooping = true; - this.announcementBarArrowButtonWasClicked = false; if (!this.sliderControlWrapper) return; @@ -713,16 +712,20 @@ class SlideshowComponent extends SliderComponent { this.slider.addEventListener('scroll', this.setSlideVisibility.bind(this)); this.setSlideVisibility(); - this.desktopLayout = window.matchMedia('(min-width: 750px)'); - this.reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)'); + if (this.querySelector('.announcement-bar-slider')) { + this.announcementBarArrowButtonWasClicked = false; - this.reducedMotion.addEventListener('change', () => { - if (this.slider.getAttribute('data-autoplay') === 'true') this.setAutoPlay(); - }); + this.desktopLayout = window.matchMedia('(min-width: 750px)'); + this.reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)'); - this.desktopLayout.addEventListener('change', (event) => { - if (this.slider.getAttribute('data-autoplay') === 'true') this.setAutoPlay(); - }); + this.reducedMotion.addEventListener('change', () => { + if (this.slider.getAttribute('data-autoplay') === 'true') this.setAutoPlay(); + }); + + this.desktopLayout.addEventListener('change', (event) => { + if (this.slider.getAttribute('data-autoplay') === 'true') this.setAutoPlay(); + }); + } if (this.slider.getAttribute('data-autoplay') === 'true') this.setAutoPlay(); } From 441ab20f7cef5df99591c506a16476957c8ee18d Mon Sep 17 00:00:00 2001 From: Eugene Kasimov Date: Fri, 28 Apr 2023 10:28:56 -0700 Subject: [PATCH 6/8] Refactoring JS code. --- assets/global.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/assets/global.js b/assets/global.js index b9ef34c408c..1f7b98f392d 100644 --- a/assets/global.js +++ b/assets/global.js @@ -725,6 +725,13 @@ class SlideshowComponent extends SliderComponent { this.desktopLayout.addEventListener('change', (event) => { if (this.slider.getAttribute('data-autoplay') === 'true') this.setAutoPlay(); }); + + this.announcementSliderArrowButtons = this.querySelectorAll('.announcement-bar-slider .slider-button'); + this.announcementSliderArrowButtons.forEach((button) => { + button.addEventListener('click', () => { + this.announcementBarArrowButtonWasClicked = true; + }, {once: true}); + }); } if (this.slider.getAttribute('data-autoplay') === 'true') this.setAutoPlay(); @@ -737,13 +744,6 @@ class SlideshowComponent extends SliderComponent { this.addEventListener('focusin', this.focusInHandling.bind(this)); this.addEventListener('focusout', this.focusOutHandling.bind(this)); - this.announcementSliderArrowButtons = this.querySelectorAll('.announcement-bar-slider .slider-button'); - this.announcementSliderArrowButtons.forEach((button) => { - button.addEventListener('click', () => { - this.announcementBarArrowButtonWasClicked = true; - }, {once: true}); - }); - if (this.querySelector('.slideshow__autoplay')) { this.sliderAutoplayButton = this.querySelector('.slideshow__autoplay'); this.sliderAutoplayButton.addEventListener('click', this.autoPlayToggle.bind(this)); From adefa39ef3dc7e748346b814bf94801ef393fddb Mon Sep 17 00:00:00 2001 From: Eugene Kasimov Date: Mon, 1 May 2023 10:28:13 -0700 Subject: [PATCH 7/8] Refactor JS. --- assets/global.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/assets/global.js b/assets/global.js index 1f7b98f392d..7c3479fe7c0 100644 --- a/assets/global.js +++ b/assets/global.js @@ -726,8 +726,7 @@ class SlideshowComponent extends SliderComponent { if (this.slider.getAttribute('data-autoplay') === 'true') this.setAutoPlay(); }); - this.announcementSliderArrowButtons = this.querySelectorAll('.announcement-bar-slider .slider-button'); - this.announcementSliderArrowButtons.forEach((button) => { + [this.prevButton, this.nextButton].forEach((button) => { button.addEventListener('click', () => { this.announcementBarArrowButtonWasClicked = true; }, {once: true}); From a92da33df3a1ed9cbf32f4585752b1adb2254d67 Mon Sep 17 00:00:00 2001 From: Eugene Kasimov Date: Tue, 2 May 2023 10:52:31 -0700 Subject: [PATCH 8/8] Combine mediaQuery into array. --- assets/global.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/assets/global.js b/assets/global.js index 7c3479fe7c0..2c5b2ef612e 100644 --- a/assets/global.js +++ b/assets/global.js @@ -718,12 +718,10 @@ class SlideshowComponent extends SliderComponent { this.desktopLayout = window.matchMedia('(min-width: 750px)'); this.reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)'); - this.reducedMotion.addEventListener('change', () => { - if (this.slider.getAttribute('data-autoplay') === 'true') this.setAutoPlay(); - }); - - this.desktopLayout.addEventListener('change', (event) => { - if (this.slider.getAttribute('data-autoplay') === 'true') this.setAutoPlay(); + [this.reducedMotion, this.desktopLayout].forEach((mediaQuery) => { + mediaQuery.addEventListener('change', () => { + if (this.slider.getAttribute('data-autoplay') === 'true') this.setAutoPlay(); + }); }); [this.prevButton, this.nextButton].forEach((button) => {