@openeuropa/bcl-theme-default 1.9.2 → 1.10.1

package/js/oe-bcl-default.umd.js

@@ -3369,7 +3369,7 @@
   const EVENT_SHOW$5 = `show${EVENT_KEY$8}`;
   const EVENT_SHOWN$5 = `shown${EVENT_KEY$8}`;
   const EVENT_CLICK_DATA_API$4 = `click${EVENT_KEY$8}${DATA_API_KEY$5}`;
-  const EVENT_KEYDOWN_DATA_API = `keydown${EVENT_KEY$8}${DATA_API_KEY$5}`;
+  const EVENT_KEYDOWN_DATA_API$1 = `keydown${EVENT_KEY$8}${DATA_API_KEY$5}`;
   const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY$8}${DATA_API_KEY$5}`;
   const CLASS_NAME_SHOW$6 = 'show';
   const CLASS_NAME_DROPUP = 'dropup';
@@ -3695,8 +3695,8 @@
    * Data API implementation
    */
 
-  EventHandler.on(document, EVENT_KEYDOWN_DATA_API, SELECTOR_DATA_TOGGLE$3, Dropdown.dataApiKeydownHandler);
-  EventHandler.on(document, EVENT_KEYDOWN_DATA_API, SELECTOR_MENU, Dropdown.dataApiKeydownHandler);
+  EventHandler.on(document, EVENT_KEYDOWN_DATA_API$1, SELECTOR_DATA_TOGGLE$3, Dropdown.dataApiKeydownHandler);
+  EventHandler.on(document, EVENT_KEYDOWN_DATA_API$1, SELECTOR_MENU, Dropdown.dataApiKeydownHandler);
   EventHandler.on(document, EVENT_CLICK_DATA_API$4, Dropdown.clearMenus);
   EventHandler.on(document, EVENT_KEYUP_DATA_API, Dropdown.clearMenus);
   EventHandler.on(document, EVENT_CLICK_DATA_API$4, SELECTOR_DATA_TOGGLE$3, function (event) {
@@ -6507,23 +6507,16 @@
 
   /**
    * --------------------------------------------------------------------------
-   * Bootstrap (v5.1.3): gallery.js
+   * Bootstrap (v5.1.3): gallery.js (Refactored)
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
    * --------------------------------------------------------------------------
    */
 
-
-  /**
-   * ------------------------------------------------------------------------
-   * Constants
-   * ------------------------------------------------------------------------
-   */
-
-  const Default = {};
   const NAME = 'gallery';
   const DATA_KEY = 'bs.gallery';
   const EVENT_KEY = `.${DATA_KEY}`;
   const DATA_API_KEY = '.data-api';
+  const Default = {};
   const CAROUSEL_SELECTOR = '.carousel';
   const CAROUSEL_PAGER_SELECTOR = '.carousel-pager span';
   const CAROUSEL_ACTIVE_SELECTOR = '.carousel-item.active';
@@ -6533,72 +6526,115 @@
   const EVENT_MODAL_HIDE = 'hide.bs.modal';
   const CAROUSEL_EVENT = 'slide.bs.carousel';
   const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`;
-
-  /**
-   * ------------------------------------------------------------------------
-   * Class Definition
-   * ------------------------------------------------------------------------
-   */
-
+  const EVENT_KEYDOWN_DATA_API = `keydown${EVENT_KEY}${DATA_API_KEY}`;
   class Gallery extends BaseComponent {
     constructor(element, config) {
       super(element, config);
-      /* eslint no-underscore-dangle: ["error", { "allow": ["_element"] }] */
       this.carousel = SelectorEngine.findOne(CAROUSEL_SELECTOR, this._element);
       this.carouselPager = SelectorEngine.findOne(CAROUSEL_PAGER_SELECTOR, this._element);
-      this.carouselStartIndex = element.getAttribute('data-gallery-start');
-      this.carouselActiveItem = SelectorEngine.find(CAROUSEL_ITEM_SELECTOR, this.carousel)[this.carouselStartIndex];
-      this.carouselPager.textContent = Number(this.carouselStartIndex) + 1;
       this.modal = SelectorEngine.findOne(MODAL_SELECTOR, this._element);
-      this.addEventListeners();
-      this.carouselLazyLoad(this.carouselActiveItem);
+      this.carouselStartIndex = element.getAttribute('data-gallery-start') || 0;
+      const allCarouselItems = SelectorEngine.find(CAROUSEL_ITEM_SELECTOR, this.carousel);
+      const startIndexNum = Math.max(0, Math.min(Number(this.carouselStartIndex), allCarouselItems.length - 1));
+      this.carouselPager.textContent = startIndexNum + 1;
+      this.carouselActiveItem = allCarouselItems[startIndexNum];
+      this._carouselLazyLoad(this.carouselActiveItem);
+      EventHandler.on(this.carousel, CAROUSEL_EVENT, event => this._handleCarouselSlide(event));
+      EventHandler.on(this.modal, EVENT_MODAL_HIDE, () => this._stopSlide());
     }
 
     // Getters
     static get NAME() {
       return NAME;
     }
+    static get Default() {
+      return Default;
+    }
 
-    // Public
-    setSlide(event) {
-      const slideFrom = SelectorEngine.findOne(CAROUSEL_ACTIVE_SELECTOR, this.carousel);
-      const slideTo = event.relatedTarget;
-      this.carouselLazyLoad(slideTo);
+    /**
+     * Handle the carousel "slide.bs.carousel" event
+     * @param {Event} event
+     */
+    _handleCarouselSlide(event) {
+      const previousSlide = SelectorEngine.findOne(CAROUSEL_ACTIVE_SELECTOR, this.carousel);
+      const currentSlide = event.relatedTarget;
+      this._carouselLazyLoad(currentSlide);
       this.carouselPager.textContent = event.to + 1;
-      this.stopVideo(slideFrom);
+      this._stopVideo(previousSlide);
     }
-    stopSlide() {
+
+    /**
+     * Stop the current carousel slide (when modal hides or component is disposed)
+     */
+    _stopSlide() {
       const currentSlide = SelectorEngine.findOne(CAROUSEL_ACTIVE_SELECTOR, this.carousel);
-      this.stopVideo(currentSlide);
+      this._stopVideo(currentSlide);
     }
-    stopVideo(slide) {
+
+    /**
+     * Stop any video or iframe in the given slide
+     * @param {HTMLElement} slide
+     */
+    _stopVideo(slide) {
+      if (!slide) {
+        return;
+      }
       const iframe = SelectorEngine.findOne('iframe', slide);
       const video = SelectorEngine.findOne('video', slide);
-      if (iframe) {
+      if (iframe && iframe.dataset.src) {
         iframe.src = iframe.dataset.src;
       } else if (video) {
         video.pause();
       }
     }
 
-    // Private
-    carouselLazyLoad(slide) {
+    /**
+     * Lazy load media (img, iframe, video, etc.) by copying data-src into src
+     * @param {HTMLElement} slide
+     */
+    _carouselLazyLoad(slide) {
+      if (!slide) {
+        return;
+      }
       const media = SelectorEngine.findOne('[data-src]', slide);
       if (media && !media.src) {
         media.src = media.dataset.src;
       }
     }
-    addEventListeners() {
-      EventHandler.on(this.carousel, CAROUSEL_EVENT, event => this.setSlide(event));
-      EventHandler.on(this.modal, EVENT_MODAL_HIDE, event => this.stopSlide(event));
-    }
 
-    // Static
-    static get Default() {
-      return Default;
+    /**
+     * Internal helper to open the modal and jump to a specific slide
+     * @param {HTMLElement} gallery
+     * @param {HTMLElement} targetLink
+     */
+    static _openModalAndShowSlide(gallery, targetLink) {
+      if (!gallery || !targetLink) {
+        return;
+      }
+      const firstSlide = Number(targetLink.getAttribute('data-bs-slide-to') || 0);
+      gallery.dataset.galleryStart = firstSlide;
+      const instance = Gallery.getOrCreateInstance(gallery);
+      const overlay = SelectorEngine.findOne('.bcl-gallery__item-overlay', targetLink);
+      if (overlay) {
+        const modalId = overlay.getAttribute('data-bs-target');
+        const modalElement = document.querySelector(modalId);
+        if (modalElement) {
+          const modal = bootstrap.Modal.getOrCreateInstance(modalElement);
+          modal.show();
+        }
+      }
+      setTimeout(() => {
+        const carousel = SelectorEngine.findOne(CAROUSEL_SELECTOR, instance._element);
+        const carouselInstance = bootstrap.Carousel.getOrCreateInstance(carousel);
+        carouselInstance.to(firstSlide);
+        const pager = SelectorEngine.findOne(CAROUSEL_PAGER_SELECTOR, instance._element);
+        if (pager) {
+          pager.textContent = firstSlide + 1;
+        }
+      }, 50);
     }
     static jQueryInterface(config) {
-      return this.each(function jInterface() {
+      return this.each(function () {
         const data = Gallery.getOrCreateInstance(this);
         if (typeof config !== 'string') {
           return;
@@ -6613,24 +6649,28 @@
 
   /**
    * ------------------------------------------------------------------------
-   * Data Api implementation
+   * Data API implementation
    * ------------------------------------------------------------------------
    */
 
+  const isEnterOrSpace = event => {
+    return event.key === 'Enter' || event.key === ' ';
+  };
   EventHandler.on(document, EVENT_CLICK_DATA_API, THUMBNAIL_SELECTOR, event => {
+    event.preventDefault();
+    const targetLink = event.target.closest('a');
     const gallery = event.target.closest('div.bcl-gallery');
-    const firstSlide = event.target.parentNode.getAttribute('data-bs-slide-to');
-    gallery.dataset.galleryStart = firstSlide;
-    Gallery.getOrCreateInstance(gallery);
+    Gallery._openModalAndShowSlide(gallery, targetLink);
+  });
+  EventHandler.on(document, EVENT_KEYDOWN_DATA_API, THUMBNAIL_SELECTOR, event => {
+    if (!isEnterOrSpace(event)) {
+      return;
+    }
+    event.preventDefault();
+    const targetLink = event.target.closest('a');
+    const gallery = event.target.closest('div.bcl-gallery');
+    Gallery._openModalAndShowSlide(gallery, targetLink);
   });
-
-  /**
-   * ------------------------------------------------------------------------
-   * jQuery
-   * ------------------------------------------------------------------------
-   * add .gallery to jQuery only if jQuery is present
-   */
-
   defineJQueryPlugin$1(Gallery);
 
   /**
@@ -6660,9 +6700,16 @@
       this.addEventListeners();
     }
     addAriaAttributes() {
-      if (this.triggerElement) {
-        this.triggerElement.setAttribute("aria-haspopup", "true");
-        this.triggerElement.setAttribute("aria-expanded", "false");
+      if (this.type === 'modal') {
+        if (this.triggerElement) {
+          this.triggerElement.setAttribute('aria-haspopup', 'dialog');
+        }
+      }
+      if (this.type === 'offcanvas') {
+        if (this.triggerElement) {
+          this.triggerElement.setAttribute('aria-haspopup', 'dialog');
+          this.triggerElement.setAttribute('aria-expanded', 'false');
+        }
       }
     }
     addEventListeners() {