[Announcement Bar] Auto-rotate fixes (Shopify#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>
Gravytrain-UK · Jul 11, 2023 · b771eb5 · b771eb5
1 parent 4545441
commit b771eb5
Show file tree

Hide file tree

Showing 25 changed files with 33 additions and 30 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -120,6 +120,9 @@
           </button>
         </div>
       </slideshow-component>
+      {%- if request.design_mode -%}
+        <script src="{{ 'theme-editor.js' | asset_url }}" defer="defer"></script>
+      {%- endif -%}
     {%- endif -%}
     <div class="localization-wrapper">
       {%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%}