@shohojdhara/atomix 0.1.16 → 0.1.17

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

@@ -1,311 +0,0 @@
-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

@@ -1,331 +0,0 @@
-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 };