From a53db9c8a17084e8b31e6f146c517e035a01ee04 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Tue, 11 Jul 2023 12:03:57 -0400 Subject: [PATCH] [Announcement Bar] Auto-rotate fixes (#2810) * Update auto-rotate for the announcement bar * Simplify the visibility rule. * Update 20 translation files * Auto-advance to the selected message when block is selected. --------- Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> --- assets/component-slider.css | 4 ++++ assets/component-slideshow.css | 1 + assets/global.js | 13 ++++--------- locales/cs.schema.json | 2 +- locales/da.schema.json | 2 +- locales/de.schema.json | 2 +- locales/en.default.schema.json | 2 +- locales/es.schema.json | 2 +- locales/fi.schema.json | 2 +- locales/fr.schema.json | 2 +- locales/it.schema.json | 2 +- locales/ja.schema.json | 2 +- locales/ko.schema.json | 2 +- locales/nb.schema.json | 2 +- locales/nl.schema.json | 2 +- locales/pl.schema.json | 2 +- locales/pt-BR.schema.json | 2 +- locales/pt-PT.schema.json | 2 +- locales/sv.schema.json | 2 +- locales/th.schema.json | 2 +- locales/tr.schema.json | 2 +- locales/vi.schema.json | 2 +- locales/zh-CN.schema.json | 2 +- locales/zh-TW.schema.json | 2 +- sections/announcement-bar.liquid | 3 +++ 25 files changed, 33 insertions(+), 30 deletions(-) diff --git a/assets/component-slider.css b/assets/component-slider.css index a9c911827fb..536fe288bfd 100644 --- a/assets/component-slider.css +++ b/assets/component-slider.css @@ -38,6 +38,10 @@ slider-component.slider-component-full-width { padding-bottom: 0; } +.slider__slide[aria-hidden="true"] { + visibility: hidden; +} + @media screen and (max-width: 749px) { .slider.slider--mobile { position: relative; diff --git a/assets/component-slideshow.css b/assets/component-slideshow.css index c117cd131ee..2438c9d3aef 100644 --- a/assets/component-slideshow.css +++ b/assets/component-slideshow.css @@ -22,6 +22,7 @@ slideshow-component .slideshow.banner { position: relative; display: flex; flex-direction: column; + visibility: visible; } @media screen and (max-width: 749px) { diff --git a/assets/global.js b/assets/global.js index 2023d91e01d..57580f56b55 100644 --- a/assets/global.js +++ b/assets/global.js @@ -735,13 +735,9 @@ class SlideshowComponent extends SliderComponent { if (this.announcementBarSlider) { this.announcementBarArrowButtonWasClicked = false; - this.desktopLayout = window.matchMedia('(min-width: 750px)'); this.reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)'); - - [this.reducedMotion, this.desktopLayout].forEach((mediaQuery) => { - mediaQuery.addEventListener('change', () => { - if (this.slider.getAttribute('data-autoplay') === 'true') this.setAutoPlay(); - }); + this.reducedMotion.addEventListener('change', () => { + if (this.slider.getAttribute('data-autoplay') === 'true') this.setAutoPlay(); }); [this.prevButton, this.nextButton].forEach((button) => { @@ -771,7 +767,7 @@ class SlideshowComponent extends SliderComponent { this.autoplayButtonIsSetToPlay = true; this.play(); } else { - this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked || !this.desktopLayout.matches + this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play(); } @@ -839,8 +835,7 @@ class SlideshowComponent extends SliderComponent { this.play(); } else if ( !this.reducedMotion.matches && - !this.announcementBarArrowButtonWasClicked && - this.desktopLayout.matches + !this.announcementBarArrowButtonWasClicked ) { this.play(); } diff --git a/locales/cs.schema.json b/locales/cs.schema.json index 34352350b95..a831b32cb11 100644 --- a/locales/cs.schema.json +++ b/locales/cs.schema.json @@ -473,7 +473,7 @@ }, "settings": { "auto_rotate": { - "label": "Automaticky střídat na ploše" + "label": "Automaticky střídat oznámení" }, "change_slides_speed": { "label": "Změnit co" diff --git a/locales/da.schema.json b/locales/da.schema.json index d6e1c32f343..4c216957353 100644 --- a/locales/da.schema.json +++ b/locales/da.schema.json @@ -473,7 +473,7 @@ }, "settings": { "auto_rotate": { - "label": "Automatisk rotation på computer" + "label": "Roter meddelelser automatisk" }, "change_slides_speed": { "label": "Skift hver" diff --git a/locales/de.schema.json b/locales/de.schema.json index ef6df1556c6..05327595a14 100644 --- a/locales/de.schema.json +++ b/locales/de.schema.json @@ -473,7 +473,7 @@ }, "settings": { "auto_rotate": { - "label": "Autorotieren auf Desktop-Gerät" + "label": "Autorotieren der Ankündigungen" }, "change_slides_speed": { "label": "Ändern alle" diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json index 406c948826a..792210bc1b5 100644 --- a/locales/en.default.schema.json +++ b/locales/en.default.schema.json @@ -448,7 +448,7 @@ "name": "Announcement bar", "settings": { "auto_rotate": { - "label": "Auto-rotate on desktop" + "label": "Auto-rotate announcements" }, "change_slides_speed": { "label": "Change every" diff --git a/locales/es.schema.json b/locales/es.schema.json index a789ce8ff98..855eebbafba 100644 --- a/locales/es.schema.json +++ b/locales/es.schema.json @@ -473,7 +473,7 @@ }, "settings": { "auto_rotate": { - "label": "Girar automáticamente en el escritorio" + "label": "Rotar anuncios automáticamente" }, "change_slides_speed": { "label": "Cambiar cada" diff --git a/locales/fi.schema.json b/locales/fi.schema.json index 6008e29bac0..bda9739a5eb 100644 --- a/locales/fi.schema.json +++ b/locales/fi.schema.json @@ -473,7 +473,7 @@ }, "settings": { "auto_rotate": { - "label": "Käännä automaattisesti työpöydällä" + "label": "Kierrä ilmoituksia automaattisesti" }, "change_slides_speed": { "label": "Vaihda joka" diff --git a/locales/fr.schema.json b/locales/fr.schema.json index 05ce736b6a8..e5c0f968307 100644 --- a/locales/fr.schema.json +++ b/locales/fr.schema.json @@ -473,7 +473,7 @@ }, "settings": { "auto_rotate": { - "label": "Rotation automatique sur le bureau" + "label": "Rotation automatique des annonces" }, "change_slides_speed": { "label": "Changer toutes les" diff --git a/locales/it.schema.json b/locales/it.schema.json index 6edb8fc0c56..26821fbce8e 100644 --- a/locales/it.schema.json +++ b/locales/it.schema.json @@ -473,7 +473,7 @@ }, "settings": { "auto_rotate": { - "label": "Ruota automaticamente su desktop" + "label": "Ruota annunci automaticamente" }, "change_slides_speed": { "label": "Cambio" diff --git a/locales/ja.schema.json b/locales/ja.schema.json index a9a56643a3e..8fd74702f20 100644 --- a/locales/ja.schema.json +++ b/locales/ja.schema.json @@ -473,7 +473,7 @@ }, "settings": { "auto_rotate": { - "label": "デスクトップ上の自動切り替え" + "label": "自動切り替えのお知らせ" }, "change_slides_speed": { "label": "変更する間隔" diff --git a/locales/ko.schema.json b/locales/ko.schema.json index c70992078e7..03ed1a2d459 100644 --- a/locales/ko.schema.json +++ b/locales/ko.schema.json @@ -473,7 +473,7 @@ }, "settings": { "auto_rotate": { - "label": "데스크톱에서 자동 회전" + "label": "공지 사항 자동 회전" }, "change_slides_speed": { "label": "변경 간격" diff --git a/locales/nb.schema.json b/locales/nb.schema.json index e49f4f7b468..f475835416e 100644 --- a/locales/nb.schema.json +++ b/locales/nb.schema.json @@ -473,7 +473,7 @@ }, "settings": { "auto_rotate": { - "label": "Roter automatisk på stasjonære datamaskiner" + "label": "Roter kunngjøringer automatisk" }, "change_slides_speed": { "label": "Endre hver" diff --git a/locales/nl.schema.json b/locales/nl.schema.json index 8e2aa91f230..e2c7e992f78 100644 --- a/locales/nl.schema.json +++ b/locales/nl.schema.json @@ -473,7 +473,7 @@ }, "settings": { "auto_rotate": { - "label": "Automatisch draaien op desktop" + "label": "Aankondigingen automatisch draaien" }, "change_slides_speed": { "label": "Wijzig elke" diff --git a/locales/pl.schema.json b/locales/pl.schema.json index bbacc7b8280..56cc59f56d8 100644 --- a/locales/pl.schema.json +++ b/locales/pl.schema.json @@ -473,7 +473,7 @@ }, "settings": { "auto_rotate": { - "label": "Automatyczna zmiana na pulpicie" + "label": "Automatyczna zmiana ogłoszeń" }, "change_slides_speed": { "label": "Zmieniaj co" diff --git a/locales/pt-BR.schema.json b/locales/pt-BR.schema.json index b45d4ae079d..648de15ec9d 100644 --- a/locales/pt-BR.schema.json +++ b/locales/pt-BR.schema.json @@ -473,7 +473,7 @@ }, "settings": { "auto_rotate": { - "label": "Girar automaticamente no desktop" + "label": "Girar automaticamente os comunicados" }, "change_slides_speed": { "label": "Mudar a cada" diff --git a/locales/pt-PT.schema.json b/locales/pt-PT.schema.json index f83891995f6..db9805e33c2 100644 --- a/locales/pt-PT.schema.json +++ b/locales/pt-PT.schema.json @@ -473,7 +473,7 @@ }, "settings": { "auto_rotate": { - "label": "Rotação automática no computador" + "label": "Rotação automática de comunicados" }, "change_slides_speed": { "label": "Mudar a cada" diff --git a/locales/sv.schema.json b/locales/sv.schema.json index ee00f894fd0..d3bf4a81e0f 100644 --- a/locales/sv.schema.json +++ b/locales/sv.schema.json @@ -473,7 +473,7 @@ }, "settings": { "auto_rotate": { - "label": "Rotera automatiskt på skrivbordet" + "label": "Rotera meddelanden automatiskt" }, "change_slides_speed": { "label": "Byt varje" diff --git a/locales/th.schema.json b/locales/th.schema.json index e4563f89a65..2cf208a0fbd 100644 --- a/locales/th.schema.json +++ b/locales/th.schema.json @@ -473,7 +473,7 @@ }, "settings": { "auto_rotate": { - "label": "เปลี่ยนอัตโนมัติบนเดสก์ท็อป" + "label": "เปลี่ยนประกาศอัตโนมัติ" }, "change_slides_speed": { "label": "เปลี่ยนทุก" diff --git a/locales/tr.schema.json b/locales/tr.schema.json index d426a3ba49a..db86a4a3a82 100644 --- a/locales/tr.schema.json +++ b/locales/tr.schema.json @@ -473,7 +473,7 @@ }, "settings": { "auto_rotate": { - "label": "Masaüstünde otomatik olarak döndür" + "label": "Duyuruları otomatik olarak döndür" }, "change_slides_speed": { "label": "Şu zaman aralığında değiştir:" diff --git a/locales/vi.schema.json b/locales/vi.schema.json index a151b79318f..ed32ac67d8c 100644 --- a/locales/vi.schema.json +++ b/locales/vi.schema.json @@ -473,7 +473,7 @@ }, "settings": { "auto_rotate": { - "label": "Tự động xoay trên màn hình nền" + "label": "Tự động xoay vòng thông báo" }, "change_slides_speed": { "label": "Thay đổi sau mỗi" diff --git a/locales/zh-CN.schema.json b/locales/zh-CN.schema.json index 8e239ca2a40..0071b86ed3a 100644 --- a/locales/zh-CN.schema.json +++ b/locales/zh-CN.schema.json @@ -473,7 +473,7 @@ }, "settings": { "auto_rotate": { - "label": "在桌面上自动轮换" + "label": "自动循环展示公告" }, "change_slides_speed": { "label": "更换时间间隔" diff --git a/locales/zh-TW.schema.json b/locales/zh-TW.schema.json index 718afc68042..eb037ee7189 100644 --- a/locales/zh-TW.schema.json +++ b/locales/zh-TW.schema.json @@ -473,7 +473,7 @@ }, "settings": { "auto_rotate": { - "label": "在桌上型裝置自動旋轉" + "label": "自動輪播公告" }, "change_slides_speed": { "label": "變更頻率" diff --git a/sections/announcement-bar.liquid b/sections/announcement-bar.liquid index f0a34d87f4c..2dd6f21fa9d 100644 --- a/sections/announcement-bar.liquid +++ b/sections/announcement-bar.liquid @@ -120,6 +120,9 @@ + {%- if request.design_mode -%} + + {%- endif -%} {%- endif -%}
{%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%}