@orangesk/orange-design-system 2.0.0-beta.0 → 2.0.0-beta.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;
+  }
+}

package/src/components/CarouselHero/CarouselHero.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import React, { ReactNode } from "react";
+import cx from "classnames";
+
+import { Controls } from "../Controls";
+import { Container } from "../Container";
+import { CarouselHeroItem } from "./CarouselHeroItem";
+import CarouselHeroStatic from "./CarouselHero.static";
+import {
+  CLASS_ROOT,
+  CLASS_VIEWPORT_WRAPPER,
+  CLASS_VIEWPORT,
+  CLASS_PREV,
+  CLASS_NEXT,
+  CLASS_PLAY_PAUSE,
+  CLASS_TABS,
+  CLASS_TAB,
+  CLASS_PAGINATION,
+  CLASS_TRACK,
+  CLASS_NAVIGATION,
+} from "./constants";
+import { useStatic } from "@/utils/hooks";
+
+interface TabItem {
+  label: string;
+  [key: string]: any;
+}
+
+interface CarouselHeroProps {
+  className?: string;
+  swiperOptions?: Record<string, any>;
+  colorScheme?: "light" | "dark";
+  children?: ReactNode;
+  tabs?: TabItem[];
+  interval?: number;
+  [key: string]: any;
+}
+
+const CarouselHero: React.FC<CarouselHeroProps> = ({
+  className,
+  swiperOptions,
+  colorScheme,
+  children,
+  tabs = [],
+  interval,
+  ...other
+}) => {
+  const [carouselRef] = useStatic(CarouselHeroStatic);
+
+  const classes = cx(CLASS_ROOT, className, {
+    "is-light": colorScheme === "light",
+    "is-dark": colorScheme === "dark",
+  });
+
+  const elementClasses = {
+    prev: CLASS_PREV,
+    next: CLASS_NEXT,
+    playPause: CLASS_PLAY_PAUSE,
+    tabs: CLASS_TABS,
+    tab: CLASS_TAB,
+    pagination: CLASS_PAGINATION,
+  };
+
+  const hasAutoplay =
+    (swiperOptions?.autoplay &&
+      typeof swiperOptions.autoplay === "object" &&
+      (swiperOptions.autoplay as any).delay >= 1000) ||
+    (interval && interval >= 1000);
+
+  const playPauseIcon = "pause";
+
+  return (
+    <div
+      className={classes}
+      ref={carouselRef}
+      data-carousel-hero
+      {...(interval && interval >= 1000 ? { "data-interval": interval } : {})}
+      {...(swiperOptions
+        ? { "data-swiper-options": JSON.stringify(swiperOptions) }
+        : {})}
+      {...other}
+    >
+      <div className={CLASS_VIEWPORT_WRAPPER}>
+        <div className={CLASS_VIEWPORT}>
+          <div className={CLASS_TRACK}>{children}</div>
+        </div>
+      </div>
+
+      {/* Controls container */}
+      <Container className="d-flex">
+        {/* Tab navigation */}
+        {tabs.length > 0 && (
+          <div className={elementClasses.tabs} role="tablist">
+            {tabs.map((tab, index) => (
+              <button
+                key={index}
+                type="button"
+                className={elementClasses.tab}
+                role="tab"
+                aria-selected={index === 0 ? "true" : "false"}
+                tabIndex={index === 0 ? 0 : -1}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+        )}
+
+        {/* Pagination dots for mobile */}
+        <div role="tablist" className={elementClasses.pagination} />
+
+        {/* Navigation controls */}
+        <div className={CLASS_NAVIGATION}>
+          <Controls
+            className={elementClasses.prev}
+            icon="chevron-left"
+            colorScheme={colorScheme}
+            aria-label="Predchádzajúci snímok"
+          />
+
+          <Controls
+            className={elementClasses.next}
+            icon="chevron-right"
+            colorScheme={colorScheme}
+            aria-label="Nasledujúci snímok"
+          />
+
+          {/* Only show play/pause button if autoplay is configured */}
+          {hasAutoplay && (
+            <Controls
+              className={elementClasses.playPause}
+              icon={playPauseIcon}
+              colorScheme={colorScheme}
+              aria-label="Pozastaviť/Spustiť automatické prehrávanie"
+            />
+          )}
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+CarouselHero.displayName = "CarouselHero";
+
+export { CarouselHero, CarouselHeroItem };
+export type { CarouselHeroProps, TabItem };

package/src/components/CarouselHero/CarouselHeroItem.tsx

@@ -0,0 +1,40 @@
+import React, { ReactNode, HTMLAttributes } from "react";
+import cx from "classnames";
+import { Image } from "@/components/Image";
+import {
+  CLASS_SLIDE,
+  CLASS_SLIDE_CONTAINER,
+  CLASS_SLIDE_CONTENT,
+  CLASS_SLIDE_IMAGE,
+} from "./constants";
+import { Container } from "../Container";
+
+const CLASS_ROOT = CLASS_SLIDE;
+
+interface CarouselHeroItemProps extends HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  children?: ReactNode;
+  image: string;
+}
+
+const CarouselHeroItem: React.FC<CarouselHeroItemProps> = ({
+  className,
+  children,
+  image,
+  ...other
+}) => {
+  const classes = cx(CLASS_ROOT, className);
+
+  return (
+    <div className={classes} {...other}>
+      <Container className={CLASS_SLIDE_CONTAINER}>
+        <div className={CLASS_SLIDE_CONTENT}>{children}</div>
+        <Image className={CLASS_SLIDE_IMAGE} src={image} alt="Obrázok" />
+      </Container>
+    </div>
+  );
+};
+
+CarouselHeroItem.displayName = "CarouselHeroItem";
+
+export { CarouselHeroItem };