Announcements slideshow

assets/base.css

@@ -249,6 +249,10 @@ html.no-js .no-js-hidden {
   padding: 0 1.5rem;
 }
 
+body:has(.section-header .drawer-menu) .announcement-bar-section slideshow-component {
+  max-width: 100%;
+}
+
 .page-width.drawer-menu {
   max-width: 100%;
 }
@@ -2246,22 +2250,43 @@ product-info .loading-overlay:not(.hidden) ~ *,
   line-height: calc(1 + 0.1 / var(--font-body-scale));
 }
 
-/* section-announcement-bar */
-.announcement-bar {
+/* utility-bar */
+.utility-bar {
+  height: 100%;
+}
+
+.utility-bar--bottom-border {
   border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
+}
+
+.announcement-bar,
+.announcement-bar__announcement {
   color: rgb(var(--color-foreground));
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  align-content: center;
+}
+
+.announcement-bar-slider,
+.announcement-bar-slider .slider {
+  width: 100%;
 }
 
 .announcement-bar__link {
-  display: block;
+  display: flex;
   width: 100%;
   padding: 1rem 0;
   text-decoration: none;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
 }
 
 .announcement-bar__link:hover {
-  color: rgb(var(--color-foreground));
-  background-color: rgba(var(--color-card-hover), 0.06);
+  text-decoration: underline;
 }
 
 .announcement-bar__link .icon-arrow {
@@ -2276,7 +2301,9 @@ product-info .loading-overlay:not(.hidden) ~ *,
   padding: 0;
 }
 
-.announcement-bar__message {
+.announcement-bar__message,
+.announcement-bar-slider__message {
+  text-align: center;
   padding: 1rem 0;
   margin: 0;
   letter-spacing: 0.1rem;

assets/component-slider.css

@@ -135,6 +135,10 @@ slider-component.slider-component-full-width {
   scroll-snap-align: center;
 }
 
+.announcement-bar .slider--everywhere {
+  margin-bottom: 0;
+}
+
 @media screen and (min-width: 990px) {
   .slider-component-desktop.page-width {
     max-width: none;
@@ -359,6 +363,43 @@ slider-component.slider-component-full-width {
   justify-content: center;
 }
 
+.announcement-bar .slider-button--next {
+  margin-right: -1.6rem;
+  height: 100%;
+}
+
+.announcement-bar .slider-button--prev {
+  margin-left: -1.6rem;
+  height: 100%;
+}
+
+.announcement-bar .slider-button--next:focus-visible,
+.announcement-bar .slider-button--prev:focus-visible {
+  outline-offset: -0.3rem;
+  box-shadow: 0 0 0 -0.2rem rgb(var(--color-foreground));
+}
+
+@media screen and (min-width: 750px) {
+  .announcement-bar .slider-button--next {
+    margin-right: -3.8rem;
+  }
+
+  .announcement-bar .slider-button--prev {
+    margin-left: -3.8rem;
+  }
+}
+
+@media screen and (min-width: 990px) {
+  body:has(.section-header .header:not(.drawer-menu)) .announcement-bar-section .announcement-bar .slider-button--next {
+    margin-right: -1.8rem;
+  }
+
+  body:has(.section-header .header:not(.drawer-menu)) .announcement-bar-section .announcement-bar .slider-button--prev {
+    margin-left: -1.8rem;
+  }
+
+}
+
 .slider-button:not([disabled]):hover {
   color: rgb(var(--color-foreground));
 }

assets/global.js

@@ -675,21 +675,29 @@ class SlideshowComponent extends SliderComponent {
     this.slider.addEventListener('scroll', this.setSlideVisibility.bind(this));
     this.setSlideVisibility();
 
+    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.setAutoPlay();
   }
 
   setAutoPlay() {
-    this.sliderAutoplayButton = this.querySelector('.slideshow__autoplay');
     this.autoplaySpeed = this.slider.dataset.speed * 1000;
-
-    this.sliderAutoplayButton.addEventListener('click', this.autoPlayToggle.bind(this));
     this.addEventListener('mouseover', this.focusInHandling.bind(this));
     this.addEventListener('mouseleave', this.focusOutHandling.bind(this));
     this.addEventListener('focusin', this.focusInHandling.bind(this));
     this.addEventListener('focusout', this.focusOutHandling.bind(this));
 
-    this.play();
-    this.autoplayButtonIsSetToPlay = true;
+    if(this.querySelector('.slideshow__autoplay') !== null) {
+      this.sliderAutoplayButton = this.querySelector('.slideshow__autoplay');
+      this.sliderAutoplayButton.addEventListener('click', this.autoPlayToggle.bind(this));
+      this.autoplayButtonIsSetToPlay = true;
+      this.play();
+    } else {
+      !this.reducedMotion.matches ? this.play() : this.pause();
+    }
   }
 
   onButtonClick(event) {
@@ -731,16 +739,24 @@ class SlideshowComponent extends SliderComponent {
   }
 
   focusOutHandling(event) {
-    const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target);
-    if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return;
-    this.play();
+    if (this.sliderAutoplayButton !== undefined ) {
+      const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target);
+      if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return;
+      this.play();
+    } else if(!this.reducedMotion.matches) {
+      this.play();
+    }
   }
 
   focusInHandling(event) {
-    const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target);
-    if (focusedOnAutoplayButton && this.autoplayButtonIsSetToPlay) {
-      this.play();
-    } else if (this.autoplayButtonIsSetToPlay) {
+    if (this.sliderAutoplayButton !== undefined ) {
+      const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target);
+      if (focusedOnAutoplayButton && this.autoplayButtonIsSetToPlay) {
+        this.play();
+      } else if (this.autoplayButtonIsSetToPlay) {
+        this.pause();
+      }
+    } else if (this.querySelector('.announcement-bar-slider').contains(event.target)) {
       this.pause();
     }
   }

locales/bg-BG.json

@@ -322,6 +322,13 @@
     },
     "page": {
       "title": "Заглавие на страница"
+    },
+    "announcements": {
+      "previous_announcement": "Предишно известие",
+      "next_announcement": "Следващо известие",
+      "carousel": "Въртележка",
+      "announcement": "Известие",
+      "announcement_bar": "Лента с известия"
     }
   },
   "localization": {

locales/cs.json

@@ -342,6 +342,13 @@
     },
     "page": {
       "title": "Název stránky"
+    },
+    "announcements": {
+      "previous_announcement": "Předchozí oznámení",
+      "next_announcement": "Další oznámení",
+      "carousel": "Karusel",
+      "announcement": "Oznámení",
+      "announcement_bar": "Panel oznámení"
     }
   },
   "localization": {

locales/cs.schema.json

@@ -501,6 +501,14 @@
             }
           }
         }
+      },
+      "settings": {
+        "auto_rotate": {
+          "label": "Automaticky otočit snímky"
+        },
+        "change_slides_speed": {
+          "label": "Změnit snímek co"
+        }
       }
     },
     "collage": {

locales/da.json

@@ -322,6 +322,13 @@
     },
     "page": {
       "title": "Sidetitel"
+    },
+    "announcements": {
+      "previous_announcement": "Forrige meddelelse",
+      "next_announcement": "Næste meddelelse",
+      "carousel": "Karrusel",
+      "announcement": "Meddelelse",
+      "announcement_bar": "Meddelelseslinje"
     }
   },
   "localization": {

locales/da.schema.json

@@ -501,6 +501,14 @@
             }
           }
         }
+      },
+      "settings": {
+        "auto_rotate": {
+          "label": "Roter automatisk slides"
+        },
+        "change_slides_speed": {
+          "label": "Skift slide hver"
+        }
       }
     },
     "collage": {

locales/de.json

@@ -322,6 +322,13 @@
     },
     "page": {
       "title": "Seitentitel"
+    },
+    "announcements": {
+      "previous_announcement": "Vorherige Ankündigung",
+      "next_announcement": "Nächste Ankündigung",
+      "carousel": "Karussell",
+      "announcement": "Ankündigung",
+      "announcement_bar": "Ankündigungsleiste"
     }
   },
   "localization": {

locales/de.schema.json

@@ -501,6 +501,14 @@
             }
           }
         }
+      },
+      "settings": {
+        "auto_rotate": {
+          "label": "Autorotieren der Slides"
+        },
+        "change_slides_speed": {
+          "label": "Slides überall ändern"
+        }
       }
     },
     "collage": {

locales/el.json

@@ -322,6 +322,13 @@
     },
     "page": {
       "title": "Τίτλος σελίδας"
+    },
+    "announcements": {
+      "previous_announcement": "Προηγούμενη ανακοίνωση",
+      "next_announcement": "Επόμενη ανακοίνωση",
+      "carousel": "Καρουζέλ",
+      "announcement": "Ανακοίνωση",
+      "announcement_bar": "Γραμμή ανακοινώσεων"
     }
   },
   "localization": {

locales/en.default.json

@@ -252,6 +252,14 @@
     }
   },
   "sections": {
+    "announcements": {
+      "previous_announcement": "Previous announcement",
+      "next_announcement": "Next announcement",
+      "carousel": "Carousel",
+      "announcement": "Announcement",
+      "announcement_bar": "Announcement bar"
+    },
+
     "header": {
       "announcement": "Announcement",
       "menu": "Menu",

locales/en.default.schema.json

@@ -477,6 +477,14 @@
     },
     "announcement-bar": {
       "name": "Announcement bar",
+      "settings": {
+        "auto_rotate": {
+          "label": "Auto-rotate slides"
+        },
+        "change_slides_speed": {
+          "label": "Change slides every"
+        }
+      },
       "blocks": {
         "announcement": {
           "name": "Announcement",

locales/es.json

@@ -332,6 +332,13 @@
     },
     "page": {
       "title": "Título de la página"
+    },
+    "announcements": {
+      "previous_announcement": "Anuncio anterior",
+      "next_announcement": "Anuncio siguiente",
+      "carousel": "Carrusel",
+      "announcement": "Anuncio",
+      "announcement_bar": "Barra de anuncios"
     }
   },
   "localization": {

locales/es.schema.json

@@ -501,6 +501,14 @@
             }
           }
         }
+      },
+      "settings": {
+        "auto_rotate": {
+          "label": "Girar las diapositivas automáticamente"
+        },
+        "change_slides_speed": {
+          "label": "Cambiar de diapositiva cada"
+        }
       }
     },
     "collage": {

locales/fi.json

@@ -322,6 +322,13 @@
     },
     "page": {
       "title": "Sivun otsikko"
+    },
+    "announcements": {
+      "previous_announcement": "Edellinen ilmoitus",
+      "next_announcement": "Ilmoitus",
+      "carousel": "Karuselli",
+      "announcement": "Ilmoitus",
+      "announcement_bar": "Ilmoituspalkki"
     }
   },
   "localization": {

locales/fi.schema.json

@@ -501,6 +501,14 @@
             }
           }
         }
+      },
+      "settings": {
+        "auto_rotate": {
+          "label": "Käännä diat automaattisesti"
+        },
+        "change_slides_speed": {
+          "label": "Vaihda diat joka"
+        }
       }
     },
     "collage": {