@shohojdhara/atomix 0.1.16 → 0.1.17

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

@@ -1,392 +0,0 @@
-import { TOOLTIP } from '../../../lib/constants/components';
-
-/**
- * Default options for the tooltip component
- */
-const DEFAULT_OPTIONS = {
-  trigger: TOOLTIP.DEFAULTS.TRIGGER,
-  position: TOOLTIP.DEFAULTS.POSITION,
-  offset: TOOLTIP.DEFAULTS.OFFSET,
-  delay: TOOLTIP.DEFAULTS.DELAY,
-  activeClass: TOOLTIP.CLASSES.IS_ACTIVE,
-  contentIdAttr: TOOLTIP.ATTRIBUTES.CONTENT_ID,
-  positionAttr: TOOLTIP.ATTRIBUTES.POSITION,
-  triggerAttr: TOOLTIP.ATTRIBUTES.TRIGGER
-};
-
-/**
- * Interface for Tooltip options
- */
-export interface TooltipOptions {
-  trigger: string;
-  position: string;
-  offset: number;
-  delay: number;
-  activeClass: string;
-  contentIdAttr: string;
-  positionAttr: string;
-  triggerAttr: string;
-  [key: string]: any;
-}
-
-/**
- * Interface for Tooltip instance
- */
-export interface TooltipInstance {
-  show: () => void;
-  hide: () => void;
-  destroy: () => void;
-  isInitialized: () => boolean;
-  isVisible: () => boolean;
-  getElement: () => HTMLElement | null;
-  getTriggerElement: () => HTMLElement | null;
-  getPosition: () => string;
-  setPosition: (position: string) => void;
-}
-
-/**
- * Class representing a Tooltip component
- */
-export class Tooltip implements TooltipInstance {
-  private selector: string | Element;
-  private $element: HTMLElement | null;
-  private $trigger: HTMLElement | null;
-  private $content: HTMLElement | null;
-  private options: TooltipOptions;
-  private timeout: number | null;
-  private hideTimeout: number | null;
-  private isActive: boolean = false;
-
-  /**
-   * Creates an instance of Tooltip
-   * @param selector - CSS selector string or DOM Element
-   * @param options - Custom options to override defaults
-   */
-  constructor(selector: string | Element, options = {}) {
-    this.selector = selector || TOOLTIP.SELECTORS.TOOLTIP;
-    this.$element = 
-      typeof selector === 'string' 
-        ? document.querySelector<HTMLElement>(selector)
-        : selector as HTMLElement;
-    this.options = { ...DEFAULT_OPTIONS, ...options } as TooltipOptions;
-    this.timeout = null;
-    this.hideTimeout = null;
-    this.$trigger = null;
-    this.$content = null;
-    this._initialize();
-  }
-
-  /**
-   * Initialize the tooltip component
-   */
-  private _initialize(): void {
-    if (!this.$element) return;
-
-    this._initializeElements();
-    this._setPosition();
-    this._bindEvents();
-  }
-
-  /**
-   * Initialize DOM elements
-   */
-  private _initializeElements(): void {
-    if (!this.$element) return;
-    
-    // Find the parent container that wraps both trigger and tooltip
-    const parentContainer = this.$element.parentElement;
-    if (!parentContainer) return;
-    
-    // Find the trigger as a sibling or within the same parent container
-    this.$trigger = parentContainer.querySelector<HTMLElement>(TOOLTIP.SELECTORS.TRIGGER);
-    this.$content = this.$element.querySelector<HTMLElement>(TOOLTIP.SELECTORS.CONTENT);
-    
-    // Check for custom position from data attribute
-    const customPosition = this.$element.getAttribute(this.options.positionAttr);
-    if (customPosition) {
-      this.options.position = customPosition;
-    }
-    
-    // Check for custom trigger from data attribute
-    const customTrigger = this.$element.getAttribute(this.options.triggerAttr);
-    if (customTrigger) {
-      this.options.trigger = customTrigger;
-    }
-  }
-
-  /**
-   * Set tooltip position
-   */
-  private _setPosition(): void {
-    if (!this.$content || !this.$element) return;
-    
-    // Reset any existing position classes
-    this.$element.classList.remove(
-      TOOLTIP.CLASSES.TOP, 
-      TOOLTIP.CLASSES.BOTTOM, 
-      TOOLTIP.CLASSES.LEFT, 
-      TOOLTIP.CLASSES.RIGHT, 
-      TOOLTIP.CLASSES.TOP_LEFT, 
-      TOOLTIP.CLASSES.TOP_RIGHT, 
-      TOOLTIP.CLASSES.BOTTOM_LEFT, 
-      TOOLTIP.CLASSES.BOTTOM_RIGHT
-    );
-    
-    // Add the appropriate position class
-    switch (this.options.position) {
-      case 'top':
-        this.$element.classList.add(TOOLTIP.CLASSES.TOP);
-        break;
-      case 'bottom':
-        this.$element.classList.add(TOOLTIP.CLASSES.BOTTOM);
-        break;
-      case 'left':
-        this.$element.classList.add(TOOLTIP.CLASSES.LEFT);
-        break;
-      case 'right':
-        this.$element.classList.add(TOOLTIP.CLASSES.RIGHT);
-        break;
-      case 'top-left':
-        this.$element.classList.add(TOOLTIP.CLASSES.TOP_LEFT);
-        break;
-      case 'top-right':
-        this.$element.classList.add(TOOLTIP.CLASSES.TOP_RIGHT);
-        break;
-      case 'bottom-left':
-        this.$element.classList.add(TOOLTIP.CLASSES.BOTTOM_LEFT);
-        break;
-      case 'bottom-right':
-        this.$element.classList.add(TOOLTIP.CLASSES.BOTTOM_RIGHT);
-        break;
-      default:
-        this.$element.classList.add(TOOLTIP.CLASSES.TOP);
-    }
-    
-    // Calculate offset based on position
-    const offset = this.options.offset;
-    
-    switch (this.options.position) {
-      case 'top':
-      case 'top-left':
-      case 'top-right':
-        this.$element.style.bottom = `${offset}px`;
-        break;
-      case 'bottom':
-      case 'bottom-left':
-      case 'bottom-right':
-        this.$element.style.top = `${offset}px`;
-        break;
-      case 'left':
-        this.$element.style.right = `${offset}px`;
-        break;
-      case 'right':
-        this.$element.style.left = `${offset}px`;
-        break;
-      default:
-        this.$element.style.bottom = `${offset}px`;
-    }
-  }
-
-  /**
-   * Bind event listeners
-   */
-  private _bindEvents(): void {
-    if (!this.$trigger) return;
-    
-    if (this.options.trigger === 'hover') {
-      this.$trigger.addEventListener('mouseenter', this._handleTriggerEnter.bind(this));
-      this.$trigger.addEventListener('mouseleave', this._handleTriggerLeave.bind(this));
-    } else if (this.options.trigger === 'click') {
-      this.$trigger.addEventListener('click', this._handleTriggerClick.bind(this));
-    }
-    
-    // Handle focus for accessibility
-    this.$trigger.addEventListener('focus', this._handleTriggerEnter.bind(this));
-    this.$trigger.addEventListener('blur', this._handleTriggerLeave.bind(this));
-  }
-
-  /**
-   * Handle trigger mouseenter or focus event
-   */
-  private _handleTriggerEnter(): void {
-    if (this.hideTimeout) {
-      clearTimeout(this.hideTimeout);
-      this.hideTimeout = null;
-    }
-    
-    if (this.timeout) return;
-    
-    this.timeout = window.setTimeout(() => {
-      this.show();
-      this.timeout = null;
-    }, this.options.delay);
-  }
-
-  /**
-   * Handle trigger mouseleave or blur event
-   */
-  private _handleTriggerLeave(): void {
-    if (this.timeout) {
-      clearTimeout(this.timeout);
-      this.timeout = null;
-    }
-    
-    this.hideTimeout = window.setTimeout(() => {
-      this.hide();
-      this.hideTimeout = null;
-    }, this.options.delay);
-  }
-
-  /**
-   * Handle trigger click event
-   */
-  private _handleTriggerClick(): void {
-    if (this.$element && this.$element.classList.contains(this.options.activeClass)) {
-      this.hide();
-    } else {
-      this.show();
-    }
-  }
-
-  /**
-   * Check if tooltip is initialized
-   */
-  public isInitialized(): boolean {
-    return !!this.$element && !!this.$trigger;
-  }
-
-  /**
-   * Check if tooltip is currently visible
-   */
-  public isVisible(): boolean {
-    return this.isActive;
-  }
-
-  /**
-   * Get tooltip element
-   */
-  public getElement(): HTMLElement | null {
-    return this.$element;
-  }
-
-  /**
-   * Get trigger element
-   */
-  public getTriggerElement(): HTMLElement | null {
-    return this.$trigger;
-  }
-
-  /**
-   * Get current position
-   */
-  public getPosition(): string {
-    return this.options.position;
-  }
-
-  /**
-   * Set tooltip position
-   */
-  public setPosition(position: string): void {
-    if (this.options.position !== position) {
-      this.options.position = position;
-      this._setPosition();
-    }
-  }
-
-  /**
-   * Show the tooltip
-   */
-  public show(): void {
-    if (!this.$element) return;
-    
-    // Dispatch custom event before showing
-    const showEvent = new CustomEvent('tooltip:show', {
-      bubbles: true,
-      cancelable: true,
-      detail: { tooltip: this }
-    });
-    
-    this.$element.dispatchEvent(showEvent);
-    
-    // If event was canceled, don't show
-    if (showEvent.defaultPrevented) return;
-    
-    this.$element.classList.add(this.options.activeClass);
-    this.isActive = true;
-  }
-
-  /**
-   * Hide the tooltip
-   */
-  public hide(): void {
-    if (!this.$element) return;
-    
-    // Dispatch custom event before hiding
-    const hideEvent = new CustomEvent('tooltip:hide', {
-      bubbles: true,
-      cancelable: true,
-      detail: { tooltip: this }
-    });
-    
-    this.$element.dispatchEvent(hideEvent);
-    
-    // If event was canceled, don't hide
-    if (hideEvent.defaultPrevented) return;
-    
-    this.$element.classList.remove(this.options.activeClass);
-    this.isActive = false;
-  }
-
-  /**
-   * Destroy the tooltip
-   */
-  public destroy(): void {
-    if (!this.$trigger) return;
-    
-    // Remove event listeners
-    if (this.options.trigger === 'hover') {
-      this.$trigger.removeEventListener('mouseenter', this._handleTriggerEnter.bind(this));
-      this.$trigger.removeEventListener('mouseleave', this._handleTriggerLeave.bind(this));
-    } else if (this.options.trigger === 'click') {
-      this.$trigger.removeEventListener('click', this._handleTriggerClick.bind(this));
-    }
-    
-    this.$trigger.removeEventListener('focus', this._handleTriggerEnter.bind(this));
-    this.$trigger.removeEventListener('blur', this._handleTriggerLeave.bind(this));
-    
-    // Clear timeouts
-    if (this.timeout) {
-      clearTimeout(this.timeout);
-      this.timeout = null;
-    }
-    
-    if (this.hideTimeout) {
-      clearTimeout(this.hideTimeout);
-      this.hideTimeout = null;
-    }
-    
-    // Hide tooltip
-    if (this.$element) {
-      this.$element.classList.remove(this.options.activeClass);
-    }
-  }
-
-  /**
-   * Initialize all tooltips in the document
-   * @param selector - CSS selector for tooltip elements
-   * @param options - Custom options
-   */
-  public static initializeAll(selector = TOOLTIP.SELECTORS.TOOLTIP, options = {}): Tooltip[] {
-    const elements = document.querySelectorAll(selector);
-    return Array.from(elements).map(element => new Tooltip(element, options));
-  }
-}
-
-/**
- * Initialize all tooltips in the document
- * @param selector - CSS selector for tooltip elements
- * @param options - Custom options
- */
-export function initializeTooltips(selector = TOOLTIP.SELECTORS.TOOLTIP, options = {}): TooltipInstance[] {
-  return Tooltip.initializeAll(selector, options);
-} 

package/src/components/Tooltip/scripts/tooltipInteractions.ts

@@ -1,165 +0,0 @@
-import { TOOLTIP } from '../../../lib/constants/components';
-import { Tooltip } from './index';
-
-/**
- * Calculate the best position for a tooltip based on available space
- * @param triggerElement - The trigger element
- * @param tooltipElement - The tooltip element
- * @param preferredPosition - The preferred position
- * @returns The best position to use
- */
-export function calculateBestPosition(
-  triggerElement: HTMLElement,
-  tooltipElement: HTMLElement,
-  preferredPosition: string = 'top'
-): string {
-  if (!triggerElement || !tooltipElement) return preferredPosition;
-  
-  // Get element dimensions and positions
-  const triggerRect = triggerElement.getBoundingClientRect();
-  const tooltipRect = tooltipElement.getBoundingClientRect();
-  
-  // Get viewport dimensions
-  const viewportHeight = window.innerHeight;
-  const viewportWidth = window.innerWidth;
-  
-  // Calculate available space in each direction
-  const spaceAbove = triggerRect.top;
-  const spaceBelow = viewportHeight - triggerRect.bottom;
-  const spaceLeft = triggerRect.left;
-  const spaceRight = viewportWidth - triggerRect.right;
-  
-  // Check if preferred position has enough space
-  switch (preferredPosition) {
-    case 'top':
-      if (spaceAbove >= tooltipRect.height) return 'top';
-      break;
-    case 'bottom':
-      if (spaceBelow >= tooltipRect.height) return 'bottom';
-      break;
-    case 'left':
-      if (spaceLeft >= tooltipRect.width) return 'left';
-      break;
-    case 'right':
-      if (spaceRight >= tooltipRect.width) return 'right';
-      break;
-    default:
-      break;
-  }
-  
-  // Find the best alternative position
-  const spaces = [
-    { position: 'top', space: spaceAbove },
-    { position: 'bottom', space: spaceBelow },
-    { position: 'left', space: spaceLeft },
-    { position: 'right', space: spaceRight }
-  ];
-  
-  // Sort by available space (descending)
-  spaces.sort((a, b) => b.space - a.space);
-  
-  // Return the position with the most space
-  return spaces[0].position;
-}
-
-/**
- * Position the tooltip relative to its trigger with smart positioning
- * @param tooltipElement - The tooltip element
- * @param triggerElement - The trigger element
- * @param position - The desired position
- * @param offset - Distance from trigger in pixels
- */
-export function positionTooltip(
-  tooltipElement: HTMLElement,
-  triggerElement: HTMLElement,
-  position: string = 'top',
-  offset: number = 8
-): void {
-  if (!tooltipElement || !triggerElement) return;
-  
-  // Get element dimensions
-  const triggerRect = triggerElement.getBoundingClientRect();
-  const tooltipRect = tooltipElement.getBoundingClientRect();
-  
-  // Calculate position based on the trigger and tooltip dimensions
-  let top = 0;
-  let left = 0;
-  
-  switch (position) {
-    case 'top':
-      top = triggerRect.top - tooltipRect.height - offset;
-      left = triggerRect.left + (triggerRect.width / 2) - (tooltipRect.width / 2);
-      break;
-    case 'bottom':
-      top = triggerRect.bottom + offset;
-      left = triggerRect.left + (triggerRect.width / 2) - (tooltipRect.width / 2);
-      break;
-    case 'left':
-      top = triggerRect.top + (triggerRect.height / 2) - (tooltipRect.height / 2);
-      left = triggerRect.left - tooltipRect.width - offset;
-      break;
-    case 'right':
-      top = triggerRect.top + (triggerRect.height / 2) - (tooltipRect.height / 2);
-      left = triggerRect.right + offset;
-      break;
-    case 'top-left':
-      top = triggerRect.top - tooltipRect.height - offset;
-      left = triggerRect.left;
-      break;
-    case 'top-right':
-      top = triggerRect.top - tooltipRect.height - offset;
-      left = triggerRect.right - tooltipRect.width;
-      break;
-    case 'bottom-left':
-      top = triggerRect.bottom + offset;
-      left = triggerRect.left;
-      break;
-    case 'bottom-right':
-      top = triggerRect.bottom + offset;
-      left = triggerRect.right - tooltipRect.width;
-      break;
-    default:
-      // Default to top
-      top = triggerRect.top - tooltipRect.height - offset;
-      left = triggerRect.left + (triggerRect.width / 2) - (tooltipRect.width / 2);
-  }
-  
-  // Apply position
-  tooltipElement.style.top = `${top}px`;
-  tooltipElement.style.left = `${left}px`;
-}
-
-/**
- * Initialize tooltips with custom behavior
- * @param selector - CSS selector for tooltip elements
- * @param options - Custom options
- */
-export function initializeTooltipsWithCustomBehavior(
-  selector = TOOLTIP.SELECTORS.TOOLTIP,
-  options = {}
-): Tooltip[] {
-  const tooltips = Tooltip.initializeAll(selector, options);
-  
-  // Apply smart positioning to each tooltip
-  tooltips.forEach((tooltip: Tooltip) => {
-    const triggerElement = tooltip.getTriggerElement();
-    const tooltipElement = tooltip.getElement();
-    
-    if (triggerElement && tooltipElement) {
-      // Update position on window resize
-      window.addEventListener('resize', () => {
-        if (tooltip.isVisible()) {
-          const bestPosition = calculateBestPosition(
-            triggerElement,
-            tooltipElement,
-            tooltip.getPosition()
-          );
-          
-          tooltip.setPosition(bestPosition);
-        }
-      });
-    }
-  });
-  
-  return tooltips;
-}