@shohojdhara/atomix 0.1.17 → 0.1.18

package/src/components/Popover/scripts/componentInteractions.ts

@@ -0,0 +1,299 @@
+import { POPOVER } from '../../../lib/constants/components';
+
+/**
+ * Type for popover position
+ */
+export type PopoverPosition = 'top' | 'bottom' | 'left' | 'right';
+
+/**
+ * Interface for popover options
+ */
+export interface PopoverOptions {
+  position?: PopoverPosition | 'auto';
+  trigger?: 'hover' | 'click';
+  offset?: number;
+  delay?: number;
+}
+
+/**
+ * Handle trigger click event
+ */
+export const handleTriggerClick = (
+  isOpen: boolean,
+  open: () => void,
+  close: () => void,
+  event?: Event
+): void => {
+  if (event) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
+  if (isOpen) {
+    close();
+  } else {
+    open();
+  }
+};
+
+/**
+ * Handle document click for closing popover
+ */
+export const handleDocumentClick = (
+  element: HTMLElement,
+  trigger: HTMLElement | null,
+  isOpen: boolean,
+  close: () => void,
+  event: MouseEvent
+): void => {
+  if (!isOpen) return;
+
+  const target = event.target as Node;
+  if (!element.contains(target) && trigger && !trigger.contains(target)) {
+    close();
+  }
+};
+
+/**
+ * Handle mouseenter on trigger
+ */
+export const handleTriggerMouseEnter = (
+  open: () => void,
+  delay: number,
+  timeoutRef: { current: number | null }
+): void => {
+  if (timeoutRef.current !== null) {
+    window.clearTimeout(timeoutRef.current);
+    timeoutRef.current = null;
+  }
+
+  if (delay > 0) {
+    timeoutRef.current = window.setTimeout(() => {
+      open();
+    }, delay);
+  } else {
+    open();
+  }
+};
+
+/**
+ * Handle mouseleave on trigger
+ */
+export const handleTriggerMouseLeave = (
+  element: HTMLElement,
+  close: () => void,
+  timeoutRef: { current: number | null }
+): void => {
+  if (timeoutRef.current !== null) {
+    window.clearTimeout(timeoutRef.current);
+    timeoutRef.current = null;
+  }
+
+  timeoutRef.current = window.setTimeout(() => {
+    if (!element.matches(':hover')) {
+      close();
+    }
+  }, 100);
+};
+
+/**
+ * Handle escape key to close popover
+ */
+export const handleEscapeKey = (isOpen: boolean, close: () => void, event: KeyboardEvent): void => {
+  if (isOpen && event.key === 'Escape') {
+    close();
+  }
+};
+
+/**
+ * Determine the best position based on available space
+ */
+export const determineBestPosition = (triggerRect: DOMRect): PopoverPosition => {
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+
+  // Calculate space available in each direction
+  const spaceTop = triggerRect.top;
+  const spaceBottom = viewportHeight - triggerRect.bottom;
+  const spaceLeft = triggerRect.left;
+  const spaceRight = viewportWidth - triggerRect.right;
+
+  // Find position with most space
+  const spaces = [
+    { position: 'top', space: spaceTop },
+    { position: 'right', space: spaceRight },
+    { position: 'bottom', space: spaceBottom },
+    { position: 'left', space: spaceLeft },
+  ];
+
+  // Sort by available space (descending)
+  spaces.sort((a, b) => b.space - a.space);
+
+  // Select position with most space
+  return spaces[0].position as PopoverPosition;
+};
+
+/**
+ * Check if there's enough space in the preferred position and determine if it needs to flip
+ */
+export const checkAndFlipPosition = (
+  triggerRect: DOMRect,
+  popoverRect: DOMRect,
+  position: PopoverPosition | 'auto',
+  offset: number
+): PopoverPosition => {
+  if (position === 'auto') return 'top';
+
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+
+  // Space available in each direction
+  const spaceTop = triggerRect.top;
+  const spaceBottom = viewportHeight - triggerRect.bottom;
+  const spaceLeft = triggerRect.left;
+  const spaceRight = viewportWidth - triggerRect.right;
+
+  // Check if preferred position has enough space, flip if not
+  switch (position) {
+    case 'top':
+      if (spaceTop < popoverRect.height + offset && spaceBottom >= popoverRect.height + offset) {
+        return 'bottom';
+      }
+      return 'top';
+    case 'bottom':
+      if (spaceBottom < popoverRect.height + offset && spaceTop >= popoverRect.height + offset) {
+        return 'top';
+      }
+      return 'bottom';
+    case 'left':
+      if (spaceLeft < popoverRect.width + offset && spaceRight >= popoverRect.width + offset) {
+        return 'right';
+      }
+      return 'left';
+    case 'right':
+      if (spaceRight < popoverRect.width + offset && spaceLeft >= popoverRect.width + offset) {
+        return 'left';
+      }
+      return 'right';
+  }
+};
+
+/**
+ * Calculate popover position based on trigger position and specified placement
+ */
+export const calculatePopoverPosition = (
+  triggerRect: DOMRect,
+  popoverRect: DOMRect,
+  position: PopoverPosition,
+  offset: number
+): { top: number; left: number } => {
+  let top = 0;
+  let left = 0;
+
+  // Calculate position based on the determined position
+  switch (position) {
+    case 'top':
+      top = triggerRect.top - popoverRect.height - offset;
+      left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;
+      break;
+    case 'bottom':
+      top = triggerRect.bottom + offset;
+      left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;
+      break;
+    case 'left':
+      top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;
+      left = triggerRect.left - popoverRect.width - offset;
+      break;
+    case 'right':
+      top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;
+      left = triggerRect.right + offset;
+      break;
+  }
+
+  // Constrain to viewport boundaries
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+
+  if (left < 0) {
+    left = 5;
+  } else if (left + popoverRect.width > viewportWidth) {
+    left = viewportWidth - popoverRect.width - 5;
+  }
+
+  if (top < 0) {
+    top = 5;
+  } else if (top + popoverRect.height > viewportHeight) {
+    top = viewportHeight - popoverRect.height - 5;
+  }
+
+  // Add scroll position to convert viewport coordinates to absolute position
+  return {
+    top: top + window.scrollY,
+    left: left + window.scrollX,
+  };
+};
+
+/**
+ * Position the arrow based on current position
+ */
+export const positionArrow = (arrow: HTMLElement, position: PopoverPosition): void => {
+  if (!arrow) return;
+
+  // Reset arrow position
+  arrow.style.top = '';
+  arrow.style.right = '';
+  arrow.style.bottom = '';
+  arrow.style.left = '';
+  arrow.style.transform = '';
+
+  // Position arrow based on current position
+  switch (position) {
+    case 'top':
+      arrow.style.bottom = '-6px';
+      arrow.style.left = '50%';
+      arrow.style.transform = 'translateX(-50%) rotate(45deg)';
+      break;
+    case 'bottom':
+      arrow.style.top = '-6px';
+      arrow.style.left = '50%';
+      arrow.style.transform = 'translateX(-50%) rotate(45deg)';
+      break;
+    case 'left':
+      arrow.style.top = '50%';
+      arrow.style.right = '-6px';
+      arrow.style.transform = 'translateY(-50%) rotate(45deg)';
+      break;
+    case 'right':
+      arrow.style.top = '50%';
+      arrow.style.left = '-6px';
+      arrow.style.transform = 'translateY(-50%) rotate(45deg)';
+      break;
+  }
+};
+
+/**
+ * Set the position class on the element
+ */
+export const setPositionClass = (
+  element: HTMLElement,
+  position: PopoverPosition,
+  isAuto: boolean
+): void => {
+  // Remove all position classes first
+  Object.values(POPOVER.CLASSES).forEach(className => {
+    if (className.startsWith('c-popover--') && className !== POPOVER.CLASSES.IS_OPEN) {
+      element.classList.remove(className);
+    }
+  });
+
+  // Add the current position class
+  const positionClass = POPOVER.CLASSES[position.toUpperCase() as keyof typeof POPOVER.CLASSES];
+  if (positionClass) {
+    element.classList.add(positionClass);
+  }
+
+  // Add auto class if auto positioning is enabled
+  if (isAuto) {
+    element.classList.add(POPOVER.CLASSES.AUTO);
+  }
+};

package/src/components/Popover/scripts/index.ts

@@ -0,0 +1,342 @@
+import { POPOVER } from '../../../lib/constants/components';
+import {
+  PopoverPosition,
+  PopoverOptions,
+  handleTriggerClick,
+  handleDocumentClick,
+  handleTriggerMouseEnter,
+  handleTriggerMouseLeave,
+  handleEscapeKey,
+  determineBestPosition,
+  checkAndFlipPosition,
+  calculatePopoverPosition,
+  positionArrow,
+  setPositionClass,
+} from './componentInteractions';
+
+/**
+ * Class representing a Popover component
+ */
+class Popover {
+  private element: HTMLElement;
+  private trigger: HTMLElement | null;
+  private content: HTMLElement | null;
+  private contentInner: HTMLElement | null;
+  private arrow: HTMLElement | null;
+  private options: PopoverOptions;
+  private isOpen: boolean;
+  private timeout: number | null;
+  private currentPosition: PopoverPosition;
+  private updateInterval: number | null;
+  private timeoutRef: { current: number | null };
+
+  /**
+   * Creates an instance of Popover
+   * @param element - The popover container element
+   * @param options - Configuration options
+   */
+  constructor(element: HTMLElement, options: PopoverOptions = {}) {
+    this.element = element;
+    this.trigger = null;
+    this.content = null;
+    this.contentInner = null;
+    this.arrow = null;
+    this.isOpen = false;
+    this.timeout = null;
+    this.updateInterval = null;
+    this.timeoutRef = { current: null };
+    this.options = {
+      position: options.position || (POPOVER.DEFAULTS.POSITION as PopoverPosition | 'auto'),
+      trigger: options.trigger || (POPOVER.DEFAULTS.TRIGGER as 'hover' | 'click'),
+      offset: options.offset !== undefined ? options.offset : POPOVER.DEFAULTS.OFFSET,
+      delay: options.delay !== undefined ? options.delay : POPOVER.DEFAULTS.DELAY,
+    };
+
+    // Initialize current position from options (will be recalculated if auto)
+    this.currentPosition =
+      this.options.position === 'auto'
+        ? 'top' // default fallback
+        : (this.options.position as PopoverPosition);
+
+    this._initialize();
+  }
+
+  /**
+   * Initialize the popover component
+   */
+  private _initialize(): void {
+    // Find elements
+    this.trigger = document.querySelector(`[data-popover-id="${this.element.id}"]`);
+    this.content = this.element.querySelector(POPOVER.SELECTORS.CONTENT);
+    this.contentInner = this.element.querySelector(POPOVER.SELECTORS.CONTENT_INNER);
+
+    // Create arrow element if needed
+    this.arrow = document.createElement('div');
+    this.arrow.className = POPOVER.SELECTORS.ARROW.slice(1); // Remove leading dot
+    this.content?.appendChild(this.arrow);
+
+    // Set initial position class
+    this._setPositionClass();
+
+    // Bind events
+    this._bindEvents();
+  }
+
+  /**
+   * Set the position class on the element
+   */
+  private _setPositionClass(): void {
+    setPositionClass(this.element, this.currentPosition, this.options.position === 'auto');
+  }
+
+  /**
+   * Bind event listeners
+   */
+  private _bindEvents(): void {
+    if (!this.trigger) return;
+
+    if (this.options.trigger === 'click') {
+      this.trigger.addEventListener('click', this._handleTriggerClick.bind(this));
+      document.addEventListener('click', this._handleDocumentClick.bind(this));
+      document.addEventListener('keydown', this._handleEscapeKey.bind(this));
+    } else if (this.options.trigger === 'hover') {
+      this.trigger.addEventListener('mouseenter', this._handleTriggerMouseEnter.bind(this));
+      this.trigger.addEventListener('mouseleave', this._handleTriggerMouseLeave.bind(this));
+      this.element.addEventListener('mouseenter', this._handlePopoverMouseEnter.bind(this));
+      this.element.addEventListener('mouseleave', this._handlePopoverMouseLeave.bind(this));
+    }
+
+    window.addEventListener('resize', this._updatePosition.bind(this));
+    window.addEventListener('scroll', this._updatePosition.bind(this), { passive: true });
+
+    // Also update position periodically to handle any dynamic content changes
+    this.updateInterval = window.setInterval(this._updatePosition.bind(this), 200);
+  }
+
+  /**
+   * Handle click on trigger
+   */
+  private _handleTriggerClick(event: Event): void {
+    handleTriggerClick(this.isOpen, this.open.bind(this), this.close.bind(this), event);
+  }
+
+  /**
+   * Handle document click for closing popover
+   */
+  private _handleDocumentClick(event: MouseEvent): void {
+    handleDocumentClick(this.element, this.trigger, this.isOpen, this.close.bind(this), event);
+  }
+
+  /**
+   * Handle mouseenter on trigger
+   */
+  private _handleTriggerMouseEnter(): void {
+    handleTriggerMouseEnter(this.open.bind(this), this.options.delay || 0, this.timeoutRef);
+  }
+
+  /**
+   * Handle mouseleave on trigger
+   */
+  private _handleTriggerMouseLeave(): void {
+    handleTriggerMouseLeave(this.element, this.close.bind(this), this.timeoutRef);
+  }
+
+  /**
+   * Handle mouseenter on popover
+   */
+  private _handlePopoverMouseEnter(): void {
+    if (this.timeoutRef.current !== null) {
+      window.clearTimeout(this.timeoutRef.current);
+      this.timeoutRef.current = null;
+    }
+  }
+
+  /**
+   * Handle mouseleave on popover
+   */
+  private _handlePopoverMouseLeave(): void {
+    this.close();
+  }
+
+  /**
+   * Handle escape key
+   */
+  private _handleEscapeKey(event: KeyboardEvent): void {
+    handleEscapeKey(this.isOpen, this.close.bind(this), event);
+  }
+
+  /**
+   * Update popover position
+   */
+  private _updatePosition(): void {
+    if (!this.isOpen || !this.trigger) return;
+
+    const triggerRect = this.trigger.getBoundingClientRect();
+    const popoverRect = this.element.getBoundingClientRect();
+    const offset = this.options.offset || 0;
+
+    // If auto positioning is enabled, determine best position
+    if (this.options.position === 'auto') {
+      this.currentPosition = determineBestPosition(triggerRect);
+    } else {
+      // Check if there's enough space in the current position,
+      // flip to opposite side if needed
+      this.currentPosition = checkAndFlipPosition(
+        triggerRect,
+        popoverRect,
+        this.options.position as PopoverPosition | 'auto',
+        offset
+      );
+    }
+
+    // Calculate position
+    const { top, left } = calculatePopoverPosition(
+      triggerRect,
+      popoverRect,
+      this.currentPosition,
+      offset
+    );
+
+    // Apply position using absolute positioning to follow when scrolling
+    this.element.style.position = 'absolute';
+    this.element.style.top = `${top}px`;
+    this.element.style.left = `${left}px`;
+
+    // Update position class and arrow
+    this._setPositionClass();
+
+    // Position arrow
+    if (this.arrow) {
+      positionArrow(this.arrow, this.currentPosition);
+    }
+  }
+
+  /**
+   * Open the popover
+   */
+  public open(): void {
+    if (this.isOpen) return;
+
+    this.element.classList.add(POPOVER.CLASSES.IS_OPEN);
+    this.isOpen = true;
+
+    // Update position right away
+    this._updatePosition();
+
+    // Dispatch custom event
+    this.element.dispatchEvent(
+      new CustomEvent('popover:open', {
+        bubbles: true,
+      })
+    );
+  }
+
+  /**
+   * Close the popover
+   */
+  public close(): void {
+    if (!this.isOpen) return;
+
+    this.element.classList.remove(POPOVER.CLASSES.IS_OPEN);
+    this.isOpen = false;
+
+    // Dispatch custom event
+    this.element.dispatchEvent(
+      new CustomEvent('popover:close', {
+        bubbles: true,
+      })
+    );
+  }
+
+  /**
+   * Toggle popover open/closed state
+   */
+  public toggle(): void {
+    if (this.isOpen) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+
+  /**
+   * Clean up event listeners
+   */
+  public destroy(): void {
+    if (this.trigger) {
+      if (this.options.trigger === 'click') {
+        this.trigger.removeEventListener('click', this._handleTriggerClick);
+      } else if (this.options.trigger === 'hover') {
+        this.trigger.removeEventListener('mouseenter', this._handleTriggerMouseEnter);
+        this.trigger.removeEventListener('mouseleave', this._handleTriggerMouseLeave);
+      }
+    }
+
+    document.removeEventListener('click', this._handleDocumentClick);
+    document.removeEventListener('keydown', this._handleEscapeKey);
+
+    this.element.removeEventListener('mouseenter', this._handlePopoverMouseEnter);
+    this.element.removeEventListener('mouseleave', this._handlePopoverMouseLeave);
+
+    window.removeEventListener('resize', this._updatePosition);
+    window.removeEventListener('scroll', this._updatePosition);
+
+    if (this.timeout !== null) {
+      window.clearTimeout(this.timeout);
+    }
+
+    if (this.timeoutRef.current !== null) {
+      window.clearTimeout(this.timeoutRef.current);
+    }
+
+    if (this.updateInterval !== null) {
+      window.clearInterval(this.updateInterval);
+    }
+  }
+}
+
+/**
+ * Initialize all popovers on the page
+ */
+const initPopovers = (): void => {
+  const popovers = document.querySelectorAll(POPOVER.SELECTORS.POPOVER);
+
+  popovers.forEach((element: Element) => {
+    const popover = element as HTMLElement;
+    // Get configuration from data attributes
+    const position =
+      (popover.getAttribute(POPOVER.ATTRIBUTES.POSITION) as PopoverPosition | 'auto') ||
+      POPOVER.DEFAULTS.POSITION;
+    const trigger =
+      (popover.getAttribute(POPOVER.ATTRIBUTES.TRIGGER) as 'hover' | 'click') ||
+      POPOVER.DEFAULTS.TRIGGER;
+    const offset = parseInt(
+      popover.getAttribute('data-popover-offset') || String(POPOVER.DEFAULTS.OFFSET),
+      10
+    );
+    const delay = parseInt(
+      popover.getAttribute('data-popover-delay') || String(POPOVER.DEFAULTS.DELAY),
+      10
+    );
+
+    // Initialize popover
+    new Popover(popover, {
+      position: position as PopoverPosition | 'auto',
+      trigger: trigger as 'hover' | 'click',
+      offset,
+      delay,
+    });
+  });
+};
+
+// Initialize on DOMContentLoaded
+if (typeof document !== 'undefined') {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initPopovers);
+  } else {
+    initPopovers();
+  }
+}
+
+export default Popover;
+export { initPopovers };