@orangesk/orange-design-system 2.0.0-beta.10 → 2.0.0-beta.12

package/src/components/Carousel/Carousel.static.ts

@@ -84,6 +84,7 @@ export default class Carousel {
   viewport!: HTMLElement;
   track!: HTMLElement;
   instance!: Swiper;
+  carouselId?: string;
 
   constructor(element: HTMLElement, config?: Partial<SwiperOptions>) {
     this.element = element;
@@ -123,6 +124,10 @@ export default class Carousel {
       modules: [Navigation, Pagination, Scrollbar, A11y, Keyboard],
       on: {
         slideChange: this.handleSlideChange,
+        slideChangeTransitionEnd: () => {
+          // Update external controls after transition completes
+          this.updateExternalControlsState();
+        },
       },
     });
 
@@ -130,6 +135,9 @@ export default class Carousel {
     if (this.element.classList.contains(CLASS_BLEED_RIGHT)) {
       this.adjustConfigForBleedRight();
     }
+
+    // Initialize external controls
+    this.initExternalControls();
   }
 
   getElements() {
@@ -241,7 +249,7 @@ export default class Carousel {
   /**
    * Handles the slide change event on the carousel.
    * Updates the tooltip position for the active slide and hides tooltips for non-active slides.
-   * Also updates accessibility attributes for pagination buttons.
+   * Also updates accessibility attributes for pagination buttons and external controls state.
    */
   handleSlideChange() {
     const activeSlide = this.track.querySelector(SELECTOR_ACTIVE);
@@ -256,6 +264,9 @@ export default class Carousel {
     if (nonActiveSlides.length > 0) {
       this.hideAllTooltips(nonActiveSlides);
     }
+
+    // Update external controls state based on current position
+    this.updateExternalControlsState();
   }
 
   /**
@@ -309,7 +320,187 @@ export default class Carousel {
     });
   }
 
+  /**
+   * Initialize external controls that reference this carousel
+   */
+  initExternalControls() {
+    // Get carousel ID from data-carousel-id or element id
+    const carouselId = this.element.dataset.carouselId || this.element.id;
+
+    if (!carouselId) {
+      return; // No ID to reference, skip external controls
+    }
+
+    // Store carousel ID for later use
+    this.carouselId = carouselId;
+
+    // Find all elements with data-carousel-controls matching this carousel's ID
+    const controlElements = document.querySelectorAll(
+      `[data-carousel-controls="${carouselId}"]`,
+    );
+
+    controlElements.forEach((control) => {
+      const htmlControl = control as HTMLElement;
+
+      // Skip if already initialized to avoid duplicate event listeners
+      if (htmlControl.hasAttribute("data-carousel-initialized")) {
+        return;
+      }
+
+      // Remove any existing event listener first (just in case)
+      if ((htmlControl as any)._carouselClickHandler) {
+        htmlControl.removeEventListener(
+          "click",
+          (htmlControl as any)._carouselClickHandler,
+        );
+      }
+
+      const action = htmlControl.dataset.carouselAction;
+
+      // Create bound event handler to avoid multiple listeners
+      const clickHandler = (e: Event) => {
+        e.preventDefault();
+        if (htmlControl.hasAttribute("disabled")) {
+          return;
+        }
+        if (action === "next") {
+          this.slideNext();
+        } else if (action === "prev") {
+          this.slidePrev();
+        }
+      };
+
+      if (action === "next" || action === "prev") {
+        htmlControl.addEventListener("click", clickHandler);
+
+        // Add ARIA attributes for accessibility
+        htmlControl.setAttribute(
+          "aria-label",
+          action === "next"
+            ? this.config.a11y?.nextSlideMessage || "Nasledujúci snímok"
+            : this.config.a11y?.prevSlideMessage || "Predchádzajúci snímok",
+        );
+        htmlControl.setAttribute("type", "button");
+
+        // Store the handler reference for potential cleanup
+        (htmlControl as any)._carouselClickHandler = clickHandler;
+      }
+
+      // Mark as initialized to avoid duplicate event listeners
+      htmlControl.setAttribute("data-carousel-initialized", "true");
+    });
+
+    // Update initial state of external controls
+    this.updateExternalControlsState();
+  }
+
+  /**
+   * Update the disabled state of external controls based on current slide position
+   */
+  updateExternalControlsState() {
+    if (!this.carouselId || !this.instance) {
+      return;
+    }
+
+    const isAtStart = this.instance.isBeginning;
+    const isAtEnd = this.instance.isEnd;
+
+    // Find all prev controls for this carousel
+    const prevControls = document.querySelectorAll(
+      `[data-carousel-controls="${this.carouselId}"][data-carousel-action="prev"]`,
+    );
+
+    // Find all next controls for this carousel
+    const nextControls = document.querySelectorAll(
+      `[data-carousel-controls="${this.carouselId}"][data-carousel-action="next"]`,
+    );
+
+    // Update prev controls
+    prevControls.forEach((control) => {
+      const htmlControl = control as HTMLElement;
+      if (isAtStart) {
+        htmlControl.setAttribute("disabled", "true");
+        htmlControl.setAttribute("aria-disabled", "true");
+        htmlControl.style.cursor = "not-allowed";
+      } else {
+        htmlControl.removeAttribute("disabled");
+        htmlControl.setAttribute("aria-disabled", "false");
+        htmlControl.style.cursor = "pointer";
+      }
+    });
+
+    // Update next controls
+    nextControls.forEach((control) => {
+      const htmlControl = control as HTMLElement;
+      if (isAtEnd) {
+        htmlControl.setAttribute("disabled", "true");
+        htmlControl.setAttribute("aria-disabled", "true");
+        htmlControl.style.cursor = "not-allowed";
+      } else {
+        htmlControl.removeAttribute("disabled");
+        htmlControl.setAttribute("aria-disabled", "false");
+        htmlControl.style.cursor = "pointer";
+      }
+    });
+  }
+
+  /**
+   * Go to the next slide
+   */
+  slideNext() {
+    if (this.instance) {
+      this.instance.slideNext();
+    }
+  }
+
+  /**
+   * Go to the previous slide
+   */
+  slidePrev() {
+    if (this.instance) {
+      this.instance.slidePrev();
+    }
+  }
+
+  /**
+   * Get the current active slide index
+   * @returns {number} The current slide index
+   */
+  getActiveIndex(): number {
+    return this.instance ? this.instance.activeIndex : 0;
+  }
+
+  /**
+   * Add event listener for slide changes
+   * @param {Function} callback - Callback function to execute on slide change
+   */
+  onSlideChange(callback: (activeIndex: number) => void) {
+    if (this.instance) {
+      this.instance.on("slideChange", () => {
+        callback(this.instance.activeIndex);
+      });
+    }
+  }
+
   destroy() {
+    // Clean up external controls
+    if (this.carouselId) {
+      const controlElements = document.querySelectorAll(
+        `[data-carousel-controls="${this.carouselId}"]`,
+      );
+      controlElements.forEach((control) => {
+        const htmlControl = control as HTMLElement;
+        if ((htmlControl as any)._carouselClickHandler) {
+          htmlControl.removeEventListener(
+            "click",
+            (htmlControl as any)._carouselClickHandler,
+          );
+          delete (htmlControl as any)._carouselClickHandler;
+        }
+        htmlControl.removeAttribute("data-carousel-initialized");
+      });
+    }
+
     if (this.instance) {
       this.instance.destroy();
     }
@@ -324,4 +515,16 @@ export default class Carousel {
   static getInstance(el: HTMLElement): Carousel | null {
     return el && (el as any).ODS_Carousel ? (el as any).ODS_Carousel : null;
   }
+
+  /**
+   * Find carousel instance by ID or data attribute
+   * @param {string} carouselId - The ID or data attribute value of the carousel
+   * @returns {Carousel | null} The carousel instance or null
+   */
+  static getInstanceById(carouselId: string): Carousel | null {
+    const element =
+      document.querySelector(`[data-carousel-id="${carouselId}"]`) ||
+      document.getElementById(carouselId);
+    return element ? this.getInstance(element as HTMLElement) : null;
+  }
 }

package/src/components/Carousel/tests/Carousel.static.test.js

@@ -0,0 +1,403 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { Swiper } from "swiper";
+import Carousel from "../Carousel.static";
+
+// Mock Swiper
+jest.mock("swiper", () => ({
+  Swiper: jest.fn().mockImplementation(() => ({
+    slideNext: jest.fn(),
+    slidePrev: jest.fn(),
+    destroy: jest.fn(),
+    update: jest.fn(),
+    on: jest.fn(),
+    activeIndex: 0,
+    isBeginning: true,
+    isEnd: false,
+  })),
+}));
+
+// Mock Swiper modules
+jest.mock("swiper/modules", () => ({
+  Navigation: {},
+  Pagination: {},
+  Scrollbar: {},
+  A11y: {},
+  Keyboard: {},
+}));
+
+describe("Carousel Static - External Controls", () => {
+  let carouselElement;
+  let carouselInstance;
+  let mockSwiperInstance;
+
+  beforeEach(() => {
+    // Clear all mocks
+    jest.clearAllMocks();
+
+    // Create mock Swiper instance
+    mockSwiperInstance = {
+      slideNext: jest.fn(),
+      slidePrev: jest.fn(),
+      destroy: jest.fn(),
+      update: jest.fn(),
+      on: jest.fn(),
+      activeIndex: 0,
+      isBeginning: true,
+      isEnd: false,
+    };
+
+    Swiper.mockImplementation(() => mockSwiperInstance);
+
+    // Set up DOM
+    document.body.innerHTML = `
+      <div class="carousel" data-carousel-id="test-carousel" id="test-carousel">
+        <div class="carousel__viewport">
+          <div class="carousel__track">
+            <div class="carousel__slide">Slide 1</div>
+            <div class="carousel__slide">Slide 2</div>
+            <div class="carousel__slide">Slide 3</div>
+          </div>
+        </div>
+        <div class="carousel__pagination"></div>
+      </div>
+      <button data-carousel-controls="test-carousel" data-carousel-action="prev" id="prev-btn">Previous</button>
+      <button data-carousel-controls="test-carousel" data-carousel-action="next" id="next-btn">Next</button>
+    `;
+
+    carouselElement = document.querySelector(".carousel");
+
+    // Mock requestAnimationFrame to execute synchronously
+    global.requestAnimationFrame = jest.fn((cb) => cb());
+
+    carouselInstance = new Carousel(carouselElement);
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+    // Restore requestAnimationFrame
+    global.requestAnimationFrame = undefined;
+  });
+
+  describe("External Controls Initialization", () => {
+    it("should find and initialize external controls", () => {
+      const prevButton = document.getElementById("prev-btn");
+      const nextButton = document.getElementById("next-btn");
+
+      expect(prevButton.hasAttribute("data-carousel-initialized")).toBe(true);
+      expect(nextButton.hasAttribute("data-carousel-initialized")).toBe(true);
+      expect(prevButton.getAttribute("aria-label")).toBe(
+        "Predchádzajúci snímok",
+      );
+      expect(nextButton.getAttribute("aria-label")).toBe("Nasledujúci snímok");
+      expect(prevButton.getAttribute("type")).toBe("button");
+      expect(nextButton.getAttribute("type")).toBe("button");
+    });
+
+    it("should not initialize controls without carousel ID", () => {
+      // Create carousel without ID
+      document.body.innerHTML = `
+        <div class="carousel">
+          <div class="carousel__viewport">
+            <div class="carousel__track">
+              <div class="carousel__slide">Slide 1</div>
+            </div>
+          </div>
+        </div>
+        <button data-carousel-controls="missing-carousel" data-carousel-action="next">Next</button>
+      `;
+
+      const element = document.querySelector(".carousel");
+      new Carousel(element);
+      const button = document.querySelector("button");
+
+      expect(button.hasAttribute("data-carousel-initialized")).toBe(false);
+    });
+
+    it("should skip already initialized controls", () => {
+      // Mark button as already initialized
+      const prevButton = document.getElementById("prev-btn");
+      prevButton.setAttribute("data-carousel-initialized", "true");
+
+      // Create new carousel instance
+      new Carousel(carouselElement);
+
+      // Should not double-initialize
+      expect(prevButton.getAttribute("data-carousel-initialized")).toBe("true");
+    });
+  });
+
+  describe("External Controls Navigation", () => {
+    it("should call slideNext when next button is clicked", () => {
+      const nextButton = document.getElementById("next-btn");
+      nextButton.click();
+
+      expect(mockSwiperInstance.slideNext).toHaveBeenCalledTimes(1);
+    });
+
+    it("should call slidePrev when prev button is clicked", () => {
+      // Ensure button is not disabled by setting carousel state
+      mockSwiperInstance.isBeginning = false;
+      mockSwiperInstance.isEnd = false;
+      carouselInstance.updateExternalControlsState();
+
+      const prevButton = document.getElementById("prev-btn");
+      prevButton.click();
+
+      expect(mockSwiperInstance.slidePrev).toHaveBeenCalledTimes(1);
+    });
+
+    it("should prevent default behavior on button click", () => {
+      const nextButton = document.getElementById("next-btn");
+      const mockEvent = new Event("click");
+      mockEvent.preventDefault = jest.fn();
+
+      nextButton.dispatchEvent(mockEvent);
+
+      expect(mockEvent.preventDefault).toHaveBeenCalled();
+    });
+
+    it("should not navigate when button is disabled", () => {
+      const nextButton = document.getElementById("next-btn");
+      nextButton.setAttribute("disabled", "true");
+
+      nextButton.click();
+
+      expect(mockSwiperInstance.slideNext).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("External Controls State Management", () => {
+    it("should disable prev button when at beginning", () => {
+      mockSwiperInstance.isBeginning = true;
+      mockSwiperInstance.isEnd = false;
+
+      carouselInstance.updateExternalControlsState();
+
+      const prevButton = document.getElementById("prev-btn");
+      const nextButton = document.getElementById("next-btn");
+
+      expect(prevButton.hasAttribute("disabled")).toBe(true);
+      expect(prevButton.getAttribute("aria-disabled")).toBe("true");
+
+      expect(nextButton.hasAttribute("disabled")).toBe(false);
+      expect(nextButton.getAttribute("aria-disabled")).toBe("false");
+    });
+
+    it("should disable next button when at end", () => {
+      mockSwiperInstance.isBeginning = false;
+      mockSwiperInstance.isEnd = true;
+
+      carouselInstance.updateExternalControlsState();
+
+      const prevButton = document.getElementById("prev-btn");
+      const nextButton = document.getElementById("next-btn");
+
+      expect(nextButton.hasAttribute("disabled")).toBe(true);
+      expect(nextButton.getAttribute("aria-disabled")).toBe("true");
+
+      expect(prevButton.hasAttribute("disabled")).toBe(false);
+      expect(prevButton.getAttribute("aria-disabled")).toBe("false");
+    });
+
+    it("should enable both buttons when in middle", () => {
+      mockSwiperInstance.isBeginning = false;
+      mockSwiperInstance.isEnd = false;
+
+      carouselInstance.updateExternalControlsState();
+
+      const prevButton = document.getElementById("prev-btn");
+      const nextButton = document.getElementById("next-btn");
+
+      expect(prevButton.hasAttribute("disabled")).toBe(false);
+      expect(nextButton.hasAttribute("disabled")).toBe(false);
+      expect(prevButton.getAttribute("aria-disabled")).toBe("false");
+      expect(nextButton.getAttribute("aria-disabled")).toBe("false");
+    });
+
+    it("should update controls state on slide change transition end", () => {
+      const updateStatesSpy = jest.spyOn(
+        carouselInstance,
+        "updateExternalControlsState",
+      );
+
+      // Get the slideChangeTransitionEnd callback from Swiper initialization
+      const swiperOnCallArgs = mockSwiperInstance.on.mock.calls.find(
+        (call) => call[0] === "slideChangeTransitionEnd",
+      );
+
+      if (swiperOnCallArgs) {
+        const callback = swiperOnCallArgs[1];
+        callback();
+        expect(updateStatesSpy).toHaveBeenCalled();
+      }
+    });
+  });
+
+  describe("Multiple Control Sets", () => {
+    beforeEach(() => {
+      document.body.innerHTML = `
+        <div class="carousel" data-carousel-id="test-carousel">
+          <div class="carousel__viewport">
+            <div class="carousel__track">
+              <div class="carousel__slide">Slide 1</div>
+              <div class="carousel__slide">Slide 2</div>
+            </div>
+          </div>
+        </div>
+        <button data-carousel-controls="test-carousel" data-carousel-action="prev" id="prev-btn-1">Prev 1</button>
+        <button data-carousel-controls="test-carousel" data-carousel-action="next" id="next-btn-1">Next 1</button>
+        <button data-carousel-controls="test-carousel" data-carousel-action="prev" id="prev-btn-2">Prev 2</button>
+        <button data-carousel-controls="test-carousel" data-carousel-action="next" id="next-btn-2">Next 2</button>
+      `;
+
+      carouselElement = document.querySelector(".carousel");
+
+      // Mock requestAnimationFrame to execute synchronously
+      global.requestAnimationFrame = jest.fn((cb) => cb());
+
+      carouselInstance = new Carousel(carouselElement);
+    });
+
+    it("should initialize multiple control sets", () => {
+      const buttons = document.querySelectorAll(
+        '[data-carousel-controls="test-carousel"]',
+      );
+
+      buttons.forEach((button) => {
+        expect(button.hasAttribute("data-carousel-initialized")).toBe(true);
+      });
+    });
+
+    it("should update state for all control sets", () => {
+      mockSwiperInstance.isBeginning = true;
+      mockSwiperInstance.isEnd = false;
+
+      carouselInstance.updateExternalControlsState();
+
+      const prevButtons = document.querySelectorAll(
+        '[data-carousel-action="prev"]',
+      );
+      const nextButtons = document.querySelectorAll(
+        '[data-carousel-action="next"]',
+      );
+
+      prevButtons.forEach((button) => {
+        expect(button.hasAttribute("disabled")).toBe(true);
+        expect(button.getAttribute("aria-disabled")).toBe("true");
+      });
+
+      nextButtons.forEach((button) => {
+        expect(button.hasAttribute("disabled")).toBe(false);
+        expect(button.getAttribute("aria-disabled")).toBe("false");
+      });
+    });
+  });
+
+  describe("Cleanup", () => {
+    it("should clean up external controls on destroy", () => {
+      const prevButton = document.getElementById("prev-btn");
+      const nextButton = document.getElementById("next-btn");
+
+      // Verify controls are initialized
+      expect(prevButton.hasAttribute("data-carousel-initialized")).toBe(true);
+      expect(nextButton.hasAttribute("data-carousel-initialized")).toBe(true);
+
+      // Destroy carousel
+      carouselInstance.destroy();
+
+      // Verify cleanup
+      expect(prevButton.hasAttribute("data-carousel-initialized")).toBe(false);
+      expect(nextButton.hasAttribute("data-carousel-initialized")).toBe(false);
+      expect(mockSwiperInstance.destroy).toHaveBeenCalled();
+    });
+
+    it("should remove event listeners on destroy", () => {
+      const nextButton = document.getElementById("next-btn");
+
+      // Store reference to click handler
+      const clickHandler = nextButton._carouselClickHandler;
+      expect(clickHandler).toBeDefined();
+
+      carouselInstance.destroy();
+
+      // Handler reference should be removed
+      expect(nextButton._carouselClickHandler).toBeUndefined();
+    });
+  });
+
+  describe("Static Methods", () => {
+    it("should get instance by ID", () => {
+      const foundInstance = Carousel.getInstanceById("test-carousel");
+      expect(foundInstance).toBe(carouselInstance);
+    });
+
+    it("should get instance by data-carousel-id", () => {
+      document.body.innerHTML = `
+        <div class="carousel" data-carousel-id="data-id-carousel">
+          <div class="carousel__viewport">
+            <div class="carousel__track">
+              <div class="carousel__slide">Slide 1</div>
+            </div>
+          </div>
+        </div>
+      `;
+
+      const element = document.querySelector(".carousel");
+      const instance = new Carousel(element);
+      const foundInstance = Carousel.getInstanceById("data-id-carousel");
+
+      expect(foundInstance).toBe(instance);
+    });
+
+    it("should return null for non-existent carousel", () => {
+      const foundInstance = Carousel.getInstanceById("non-existent");
+      expect(foundInstance).toBe(null);
+    });
+  });
+
+  describe("Edge Cases", () => {
+    it("should handle controls without valid action", () => {
+      document.body.innerHTML = `
+        <div class="carousel" data-carousel-id="test-carousel">
+          <div class="carousel__viewport">
+            <div class="carousel__track">
+              <div class="carousel__slide">Slide 1</div>
+            </div>
+          </div>
+        </div>
+        <button data-carousel-controls="test-carousel" data-carousel-action="invalid">Invalid</button>
+      `;
+
+      const element = document.querySelector(".carousel");
+      new Carousel(element);
+
+      const button = document.querySelector("button");
+      button.click();
+
+      // Should not crash and should not call slideNext/slidePrev
+      expect(mockSwiperInstance.slideNext).not.toHaveBeenCalled();
+      expect(mockSwiperInstance.slidePrev).not.toHaveBeenCalled();
+    });
+
+    it("should handle updateExternalControlsState without instance", () => {
+      carouselInstance.instance = null;
+
+      // Should not crash
+      expect(() => {
+        carouselInstance.updateExternalControlsState();
+      }).not.toThrow();
+    });
+
+    it("should handle updateExternalControlsState without carouselId", () => {
+      carouselInstance.carouselId = null;
+
+      // Should not crash
+      expect(() => {
+        carouselInstance.updateExternalControlsState();
+      }).not.toThrow();
+    });
+  });
+});