@orangesk/orange-design-system 2.0.0-beta.2 → 2.0.0-beta.21

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

@@ -183,25 +183,130 @@ describe("rendering Carousel", () => {
       ).toBeInTheDocument();
     });
   });
-  describe("colorScheme prop", () => {
-    const items = [<p key="item1">item1</p>];
-    it("adds is-dark class when colorScheme is dark", () => {
+
+  describe("external controls integration", () => {
+    const items = [
+      <p key="item1">item1</p>,
+      <p key="item2">item2</p>,
+      <p key="item3">item3</p>,
+    ];
+
+    it("should render with data-carousel-id when id is provided", () => {
       const { container } = render(
-        <Carousel items={items} colorScheme="dark" />,
+        <Carousel id="test-carousel" items={items} />,
       );
-      expect(container.querySelector(".carousel")).toHaveClass("is-dark");
+      const carousel = container.querySelector(".carousel");
+      expect(carousel).toHaveAttribute("id", "test-carousel");
     });
-    it("adds is-light class when colorScheme is light", () => {
+
+    it("should support external controls via data attributes", () => {
       const { container } = render(
-        <Carousel items={items} colorScheme="light" />,
+        <div>
+          <Carousel id="external-carousel" items={items} />
+          <button
+            data-carousel-controls="external-carousel"
+            data-carousel-action="prev"
+            data-testid="external-prev"
+          >
+            Previous
+          </button>
+          <button
+            data-carousel-controls="external-carousel"
+            data-carousel-action="next"
+            data-testid="external-next"
+          >
+            Next
+          </button>
+        </div>,
+      );
+
+      const carousel = container.querySelector(".carousel");
+      const prevButton = container.querySelector(
+        '[data-testid="external-prev"]',
+      );
+      const nextButton = container.querySelector(
+        '[data-testid="external-next"]',
       );
-      expect(container.querySelector(".carousel")).toHaveClass("is-light");
+
+      expect(carousel).toHaveAttribute("id", "external-carousel");
+      expect(prevButton).toHaveAttribute(
+        "data-carousel-controls",
+        "external-carousel",
+      );
+      expect(prevButton).toHaveAttribute("data-carousel-action", "prev");
+      expect(nextButton).toHaveAttribute(
+        "data-carousel-controls",
+        "external-carousel",
+      );
+      expect(nextButton).toHaveAttribute("data-carousel-action", "next");
     });
-    it("does not add color scheme classes when colorScheme is not provided", () => {
-      const { container } = render(<Carousel items={items} />);
+
+    it("should work with both id and data-carousel-id", () => {
+      const { container } = render(
+        <Carousel id="test-id" data-carousel-id="test-data-id" items={items} />,
+      );
+
       const carousel = container.querySelector(".carousel");
-      expect(carousel).not.toHaveClass("is-dark");
-      expect(carousel).not.toHaveClass("is-light");
+      expect(carousel).toHaveAttribute("id", "test-id");
+      expect(carousel).toHaveAttribute("data-carousel-id", "test-data-id");
+    });
+  });
+
+  describe("Auto-disable feature", () => {
+    const items = [
+      <p key="item1">item1</p>,
+      <p key="item2">item2</p>,
+      <p key="item3">item3</p>,
+    ];
+
+    it("should render carousel element with id for auto-disable feature", () => {
+      const { container } = render(
+        <Carousel id="auto-disable-test" items={items} />,
+      );
+      const carousel = container.querySelector(".carousel");
+      expect(carousel).toHaveAttribute("id", "auto-disable-test");
+    });
+
+    it("should support swiperOptions with slidesPerView for auto-disable", () => {
+      const swiperOptions = {
+        slidesPerView: 2,
+        breakpoints: {
+          1240: {
+            slidesPerView: 3,
+          },
+        },
+      };
+      const { container } = render(
+        <Carousel items={items} swiperOptions={swiperOptions} />,
+      );
+      const carousel = container.querySelector(".carousel");
+      expect(carousel.getAttribute("data-swiper-options")).toContain(
+        "slidesPerView",
+      );
+    });
+
+    it("should work with bleedRight carousel and auto-disable", () => {
+      const { container } = render(
+        <Carousel items={items} bleedRight showScrollbar />,
+      );
+      const carousel = container.querySelector(".carousel");
+      expect(carousel).toHaveClass("carousel--bleed-right");
+    });
+
+    it("should support minimal slides for testing auto-disable", () => {
+      const minimalItems = [<p key="item1">item1</p>];
+      const { container } = render(<Carousel items={minimalItems} />);
+      const slides = container.getElementsByClassName("carousel__slide");
+      expect(slides.length).toBe(1);
+    });
+
+    it("should support many slides for testing auto-disable with high slidesPerView", () => {
+      const manyItems = Array.from({ length: 10 }, (_, i) => (
+        <p key={`item${i}`}>item{i}</p>
+      ));
+      const { container } = render(<Carousel items={manyItems} />);
+      const slides = container.getElementsByClassName("carousel__slide");
+      expect(slides.length).toBe(10);
     });
   });
 });

package/src/components/CarouselHero/CarouselHero.static.ts

@@ -0,0 +1,528 @@
+import type { SwiperOptions } from "swiper/types";
+import {
+  Navigation,
+  Pagination,
+  A11y,
+  Keyboard,
+  Autoplay,
+} from "swiper/modules";
+import { Swiper } from "swiper";
+
+import {
+  CLASS_SLIDE,
+  CLASS_TRACK,
+  CLASS_ACTIVE,
+  CLASS_PLAYING,
+  CLASS_PAUSED,
+  SELECTOR_VIEWPORT,
+  SELECTOR_PREV,
+  SELECTOR_NEXT,
+  SELECTOR_PLAY_PAUSE,
+  SELECTOR_TABS,
+  SELECTOR_TAB,
+  SELECTOR_PAGINATION,
+  CLASS_PAGINATION_ITEM,
+  CLASS_PAGINATION_SVG,
+  CLASS_PAGINATION_CIRCLE,
+} from "./constants";
+
+export const defaultConfig: SwiperOptions = {
+  pagination: {
+    clickable: true,
+    bulletClass: CLASS_PAGINATION_ITEM,
+    bulletActiveClass: "is-active",
+    renderBullet: function (index: number, className: string) {
+      return `<button type="button" class="${className}" aria-label="Prejsť na snímok ${index + 1}"></button>`;
+    },
+  },
+  slidesPerView: 1,
+  loop: false,
+  a11y: {
+    enabled: true,
+    prevSlideMessage: "Predchádzajúci snímok",
+    nextSlideMessage: "Nasledujúci snímok",
+    containerMessage: "Hero carousel so snímkami",
+    containerRoleDescriptionMessage: "carousel",
+    itemRoleDescriptionMessage: "snímok",
+    firstSlideMessage: "Prvý snímok",
+    lastSlideMessage: "Posledný snímok",
+    slideLabelMessage: "Snímok",
+  },
+  wrapperClass: CLASS_TRACK,
+  slideClass: CLASS_SLIDE,
+  slideActiveClass: CLASS_ACTIVE,
+};
+
+export default class CarouselHero {
+  element: HTMLElement;
+  config: SwiperOptions;
+  viewport!: HTMLElement;
+  instance!: Swiper;
+  tabs: HTMLElement[] = [];
+  _dotAnimationJustStarted: boolean = false;
+  _isDragging: boolean = false;
+
+  private _boundTabClick!: (e: Event) => void;
+  private _boundPrevClick!: () => void;
+  private _boundNextClick!: () => void;
+  private _boundPlayPauseClick!: () => void;
+
+  constructor(element: HTMLElement, config?: Partial<SwiperOptions>) {
+    this.element = element;
+    this.config = { ...defaultConfig, ...config };
+    (this.element as any).ODS_CarouselHero = this;
+    this._boundTabClick = this._onTabClick.bind(this);
+    this._boundPrevClick = this._onUserNavigation.bind(this);
+    this._boundNextClick = this._onUserNavigation.bind(this);
+    this._boundPlayPauseClick = this._onPlayPauseClick.bind(this);
+    this.init();
+    return this;
+  }
+
+  init() {
+    this.getElements();
+    this.setupConfig();
+    this.createSwiper();
+    this.setupEventListeners();
+    this.renderPaginationDots();
+    this.updateStates();
+    this.updatePlayPauseIcon();
+
+    if (this.hasAutoplay() && this.isAutoplayRunning()) {
+      this.startDotAnimation();
+    }
+  }
+  getElements() {
+    this.viewport = this.element.querySelector(SELECTOR_VIEWPORT)!;
+    const tabsContainer = this.element.querySelector(SELECTOR_TABS);
+    if (tabsContainer) {
+      this.tabs = Array.from(tabsContainer.querySelectorAll(SELECTOR_TAB));
+    }
+  }
+
+  setupConfig() {
+    const interval = this.element.hasAttribute("data-interval")
+      ? parseInt(this.element.getAttribute("data-interval")!) || 0
+      : 0;
+
+    if (this.element.hasAttribute("data-swiper-options")) {
+      try {
+        const customOptions = JSON.parse(
+          this.element.getAttribute("data-swiper-options")!,
+        );
+        this.config = { ...this.config, ...customOptions };
+      } catch (error) {
+        console.warn("Invalid swiper options:", error);
+      }
+    }
+
+    // Enable loop for smoother autoplay behavior
+    this.config.loop = true;
+
+    // Setup autoplay if interval is specified
+    if (interval >= 1000) {
+      this.config.autoplay = {
+        delay: interval,
+        disableOnInteraction: false,
+        pauseOnMouseEnter: false,
+        waitForTransition: true,
+        stopOnLastSlide: false,
+      } as NonNullable<SwiperOptions["autoplay"]>;
+      this.element.classList.add(CLASS_PLAYING);
+    }
+  }
+
+  createSwiper() {
+    const slides = this.viewport.querySelectorAll(`.${CLASS_SLIDE}`);
+    const hasPagination = slides.length > 1;
+
+    this.instance = new Swiper(this.viewport, {
+      ...this.config,
+      modules: [Navigation, Pagination, A11y, Keyboard, Autoplay],
+      navigation: {
+        nextEl: this.element.querySelector(SELECTOR_NEXT) as HTMLElement,
+        prevEl: this.element.querySelector(SELECTOR_PREV) as HTMLElement,
+      },
+      pagination: hasPagination
+        ? {
+            ...(this.config.pagination as object),
+            el: this.element.querySelector(SELECTOR_PAGINATION) as HTMLElement,
+          }
+        : false,
+      on: {
+        slideChange: () => {
+          this.updateStates();
+          if (this.isAutoplayRunning()) {
+            this.restartDotAnimation();
+          } else {
+            this.stopDotAnimation();
+          }
+        },
+        autoplayStart: () => {
+          this._onAutoplayStart();
+        },
+        autoplayStop: () => {
+          this._onAutoplayStop();
+        },
+        touchStart: () => {
+          this._isDragging = true;
+          this._stopAutoplayIfRunning();
+        },
+        touchEnd: () => {
+          this._isDragging = false;
+        },
+      },
+    });
+
+    this.updatePlayPauseIcon();
+  }
+
+  setupEventListeners() {
+    this.tabs.forEach((tab) => {
+      tab.removeEventListener("click", this._boundTabClick);
+      tab.addEventListener("click", this._boundTabClick);
+    });
+
+    const playPauseButton = this.element.querySelector(SELECTOR_PLAY_PAUSE);
+    if (playPauseButton) {
+      playPauseButton.removeEventListener("click", this._boundPlayPauseClick);
+      playPauseButton.addEventListener("click", this._boundPlayPauseClick);
+    }
+
+    const prevButton = this.element.querySelector(SELECTOR_PREV);
+    const nextButton = this.element.querySelector(SELECTOR_NEXT);
+    if (prevButton) {
+      prevButton.removeEventListener("click", this._boundPrevClick);
+      prevButton.addEventListener("click", this._boundPrevClick);
+    }
+    if (nextButton) {
+      nextButton.removeEventListener("click", this._boundNextClick);
+      nextButton.addEventListener("click", this._boundNextClick);
+    }
+  }
+
+  private _onUserNavigation() {
+    this._stopAutoplayIfRunning();
+    this.stopDotAnimation();
+  }
+
+  _onTabClick(e: Event) {
+    e.preventDefault();
+    const tab = e.currentTarget as HTMLElement;
+    const index = this.tabs.indexOf(tab);
+    if (index !== -1 && index !== this.instance?.activeIndex) {
+      this._onUserNavigation();
+      this.goToSlide(index);
+    }
+  }
+
+  private _onPlayPauseClick() {
+    this.toggleAutoplay();
+  }
+
+  // ====== Autoplay helpers ======
+  private isAutoplayRunning(): boolean {
+    return !!(this.instance?.autoplay && this.instance.autoplay.running);
+  }
+
+  private _stopAutoplayIfRunning() {
+    if (this.isAutoplayRunning()) {
+      this.instance.autoplay.stop();
+    }
+  }
+
+  private _onAutoplayStart() {
+    this.element.classList.add(CLASS_PLAYING);
+    this.element.classList.remove(CLASS_PAUSED);
+    this.updatePlayPauseIcon();
+    this.startDotAnimation();
+  }
+
+  private _onAutoplayStop() {
+    this.element.classList.remove(CLASS_PLAYING);
+    this.element.classList.add(CLASS_PAUSED);
+    this.updatePlayPauseIcon();
+    this.stopDotAnimation();
+  }
+
+  toggleAutoplay() {
+    if (!this.instance || !this.instance.autoplay) return;
+
+    if (this.isAutoplayRunning()) {
+      this.instance.autoplay.stop();
+    } else {
+      // Force Swiper to be on the correct slide before starting autoplay
+      const currentRealIndex = this.instance.realIndex;
+
+      // Ensure we're on the right slide (accounting for loop mode)
+      if (
+        this.instance.activeIndex !==
+        this.instance.slides.length + currentRealIndex
+      ) {
+        this.instance.slideTo(
+          this.instance.slides.length + currentRealIndex,
+          0,
+        );
+      }
+
+      // Small delay to ensure slide position is stable before starting autoplay
+      setTimeout(() => {
+        if (this.instance && this.instance.autoplay) {
+          this.instance.autoplay.start();
+        }
+      }, 10);
+    }
+  }
+
+  goToSlide(index: number) {
+    if (!this.instance || this.instance.activeIndex === index) return;
+    this.instance.slideTo(index);
+  }
+
+  updateStates() {
+    if (!this.instance) return;
+
+    // Use realIndex for loop mode, fallback to activeIndex
+    const realIndex = this.instance.realIndex ?? this.instance.activeIndex;
+
+    // Update tab states
+    this.tabs.forEach((tab, index) => {
+      const isActive = index === realIndex;
+      tab.classList.toggle(CLASS_ACTIVE, isActive);
+      tab.setAttribute("aria-selected", String(isActive));
+      tab.setAttribute("tabindex", isActive ? "0" : "-1");
+    });
+
+    this.scrollActiveTabIntoView(realIndex);
+
+    // Manually update pagination bullets
+    this.updatePaginationBullets(realIndex);
+  }
+
+  private updatePaginationBullets(activeIndex: number) {
+    const paginationEl = this.element.querySelector(SELECTOR_PAGINATION);
+    if (!paginationEl) return;
+
+    const bullets = paginationEl.querySelectorAll(`.${CLASS_PAGINATION_ITEM}`);
+
+    // With loop enabled, we need to get the real slide index
+    const realIndex = this.instance?.realIndex ?? activeIndex;
+
+    bullets.forEach((bullet, index) => {
+      const isActive = index === realIndex;
+      bullet.classList.toggle("is-active", isActive);
+
+      // For carousels without autoplay, manually show/hide the SVG
+      if (!this.hasAutoplay()) {
+        const svg = bullet.querySelector(
+          `.${CLASS_PAGINATION_SVG}`,
+        ) as HTMLElement;
+        if (svg) {
+          svg.style.display = isActive ? "block" : "none";
+        }
+      }
+    });
+  }
+  scrollActiveTabIntoView(activeIndex: number) {
+    if (!this.tabs.length || activeIndex < 0 || activeIndex >= this.tabs.length)
+      return;
+
+    const activeTab = this.tabs[activeIndex];
+    const tabsContainer = this.element.querySelector(
+      SELECTOR_TABS,
+    ) as HTMLElement;
+    if (!tabsContainer || !activeTab) return;
+
+    const containerRect = tabsContainer.getBoundingClientRect();
+    const tabRect = activeTab.getBoundingClientRect();
+    const fadeWidth = 56;
+    const containerVisibleWidth = containerRect.width - fadeWidth;
+
+    if (
+      tabRect.right > containerRect.left + containerVisibleWidth ||
+      tabRect.left < containerRect.left
+    ) {
+      const scrollLeft =
+        tabRect.left -
+        containerRect.left -
+        containerVisibleWidth / 2 +
+        tabRect.width / 2;
+      tabsContainer.scrollBy({ left: scrollLeft, behavior: "smooth" });
+    }
+  }
+
+  updatePlayPauseIcon() {
+    const playPauseButton = this.element.querySelector(SELECTOR_PLAY_PAUSE);
+    if (!playPauseButton) return;
+
+    const useElement = playPauseButton.querySelector("use");
+    if (useElement) {
+      const isPlaying = this.isAutoplayRunning();
+      const newIcon = isPlaying ? "pause" : "play";
+      const currentHref = useElement.getAttribute("xlink:href") || "";
+      if (!currentHref.endsWith(`#${newIcon}`)) {
+        const newHref = currentHref.replace(/#[\w-]+$/, `#${newIcon}`);
+        useElement.setAttribute("xlink:href", newHref);
+      }
+    }
+  }
+
+  renderPaginationDots() {
+    const paginationButtons = this._getPaginationButtons();
+
+    paginationButtons.forEach((button) => {
+      const svg = this.createSvgDot();
+      button.innerHTML = "";
+      button.appendChild(svg);
+    });
+  }
+
+  startDotAnimation(force: boolean = false) {
+    if (!this.hasAutoplay()) return;
+    if (!force && !this.isAutoplayRunning()) return;
+    if (this._dotAnimationJustStarted) return;
+
+    this._dotAnimationJustStarted = true;
+
+    const activeButton = this._getActiveBulletButton();
+    if (!activeButton) {
+      this._dotAnimationJustStarted = false;
+      return;
+    }
+
+    const svg = activeButton.querySelector(
+      `.${CLASS_PAGINATION_SVG}`,
+    ) as SVGSVGElement | null;
+    if (!svg) {
+      this._dotAnimationJustStarted = false;
+      return;
+    }
+
+    const circle = svg.querySelector("circle") as SVGCircleElement | null;
+    if (!circle) {
+      this._dotAnimationJustStarted = false;
+      return;
+    }
+
+    const duration = this.getAnimationDuration();
+    circle.style.animation = "none";
+    // Force reflow
+    void activeButton.offsetHeight;
+    circle.style.animation = `countdown linear ${duration}ms 1 forwards`;
+    this._dotAnimationJustStarted = false;
+  }
+  restartDotAnimation() {
+    this.stopDotAnimation();
+    setTimeout(() => {
+      this.startDotAnimation();
+    }, 50);
+  }
+
+  stopDotAnimation() {
+    const paginationButtons = this._getPaginationButtons();
+    paginationButtons.forEach((button) => {
+      const svg = button.querySelector(
+        `.${CLASS_PAGINATION_SVG}`,
+      ) as SVGSVGElement | null;
+      if (!svg) return;
+      const circle = svg.querySelector("circle") as SVGCircleElement | null;
+      if (!circle) return;
+      circle.style.animation = "none";
+    });
+    this._dotAnimationJustStarted = false;
+  }
+
+  private _getPaginationButtons(): HTMLElement[] {
+    return Array.from(
+      this.element.querySelectorAll(`${SELECTOR_PAGINATION} > *`),
+    ) as HTMLElement[];
+  }
+
+  private _getActiveBulletClass(): string {
+    const pagination = (this.instance?.params as any)?.pagination;
+    if (
+      pagination &&
+      typeof pagination === "object" &&
+      pagination.bulletActiveClass
+    ) {
+      return String(pagination.bulletActiveClass);
+    }
+    const cfgPagination = this.config.pagination as any;
+    if (
+      cfgPagination &&
+      typeof cfgPagination === "object" &&
+      cfgPagination.bulletActiveClass
+    ) {
+      return String(cfgPagination.bulletActiveClass);
+    }
+    return CLASS_ACTIVE;
+  }
+
+  private _getActiveBulletButton(): HTMLElement | null {
+    const activeClass = this._getActiveBulletClass();
+    return this.element.querySelector(
+      `${SELECTOR_PAGINATION} .${activeClass}`,
+    ) as HTMLElement | null;
+  }
+
+  createSvgDot(): SVGSVGElement {
+    const svgNS = "http://www.w3.org/2000/svg";
+    const svg = document.createElementNS(svgNS, "svg");
+    svg.setAttribute("class", CLASS_PAGINATION_SVG);
+    svg.setAttribute("width", "12");
+    svg.setAttribute("height", "12");
+    svg.setAttribute("viewBox", "0 0 12 12");
+
+    const circle = document.createElementNS(svgNS, "circle");
+    circle.setAttribute("class", CLASS_PAGINATION_CIRCLE);
+    circle.setAttribute("r", "5");
+    circle.setAttribute("cx", "6");
+    circle.setAttribute("cy", "6");
+
+    svg.appendChild(circle);
+    return svg;
+  }
+
+  // ====== Autoplay config helpers ======
+  hasAutoplay(): boolean {
+    return !!(
+      this.config.autoplay &&
+      typeof this.config.autoplay === "object" &&
+      (this.config.autoplay as any).delay >= 1000
+    );
+  }
+
+  getAnimationDuration(): number {
+    return (this.config.autoplay as any)?.delay || 0;
+  }
+
+  destroy() {
+    this.tabs.forEach((tab) => {
+      tab.removeEventListener("click", this._boundTabClick);
+    });
+
+    const playPauseButton = this.element.querySelector(SELECTOR_PLAY_PAUSE);
+    if (playPauseButton) {
+      playPauseButton.removeEventListener("click", this._boundPlayPauseClick);
+    }
+
+    const prevButton = this.element.querySelector(SELECTOR_PREV);
+    const nextButton = this.element.querySelector(SELECTOR_NEXT);
+    if (prevButton) {
+      prevButton.removeEventListener("click", this._boundPrevClick);
+    }
+    if (nextButton) {
+      nextButton.removeEventListener("click", this._boundNextClick);
+    }
+
+    if (this.instance) {
+      this.instance.destroy(true, true);
+    }
+
+    delete (this.element as any).ODS_CarouselHero;
+  }
+
+  static getInstance(el: HTMLElement): CarouselHero | null {
+    return (el as any).ODS_CarouselHero || null;
+  }
+}