panelset 0.5.0 → 0.5.2

package/src/lib/index.ts

@@ -1,685 +0,0 @@
-import './styles/panelset.scss';
-
-// Configuration types
-export interface PanelSetConfig {
-	transitions?: boolean | {
-		panels?: boolean;
-		height?: boolean;
-	};
-	closable?: boolean;
-	emptyPanelHeight?: number;
-	loadingDelay?: number;
-	debug?: boolean;
-	selector?: string;
-}
-
-// Event detail types
-export interface ReadyEventDetail {
-	container: HTMLElement;
-	instance: PanelSet;
-}
-
-export interface BeforeActivateEventDetail {
-	panelId: string;
-	targetPanel: HTMLElement;
-	outgoingPanel: HTMLElement | null;
-	signal: AbortSignal;
-	promise: Promise<void> | null;
-}
-
-export interface ActivationEventDetail {
-	panelId: string;
-	trigger: string | null;
-}
-
-export interface ActivationAbortedEventDetail {
-	panelId: string;
-	trigger: string | null;
-}
-
-// Handler options
-export interface HandlerOptions {
-	once?: boolean;
-}
-
-// Show options
-export interface ShowOptions {
-	trigger?: string;
-}
-
-// Async content handler type
-export type AsyncContentHandler = (
-	targetPanel: HTMLElement,
-	signal: AbortSignal
-) => Promise<void> | void;
-
-// Extend HTMLElement to include panelSet property
-declare global {
-	interface HTMLElement {
-		panelSet?: PanelSet;
-	}
-}
-
-export class PanelSet {
-	// Default configuration
-	static defaults: Required<Omit<PanelSetConfig, 'selector'>> = {
-		transitions: true,
-		closable: false,
-		emptyPanelHeight: 200,
-		loadingDelay: 300,
-		debug: false
-	};
-
-	// Instance properties
-	element!: HTMLElement;
-	config!: Required<Omit<PanelSetConfig, 'selector'>>;
-	panels!: HTMLElement[];
-	activePanel!: HTMLElement;
-	panelWrapper!: HTMLElement;
-	pendingPanel!: HTMLElement;
-
-	private _openCloseGeneration: number = 0;
-	private _isLoadingAsync: boolean = false;
-	// private _isTransitioning: boolean = false;
-	private _currentAbortController?: AbortController;
-
-	// Parse data attributes from element
-	static _getDataConfig(element: HTMLElement): Partial<PanelSetConfig> {
-		const data = element.dataset;
-		const config: Partial<PanelSetConfig> = {};
-
-		// Define attribute types
-		const attrs: Record<string, 'json' | 'boolean' | 'number'> = {
-			transitions: 'json',
-			closable: 'boolean',
-			emptyPanelHeight: 'number',
-			loadingDelay: 'number',
-			debug: 'boolean'
-		};
-
-		// Parse each attribute
-		for (const [key, type] of Object.entries(attrs)) {
-			if (!(key in data)) continue;
-
-			const value = data[key];
-			if (value === undefined) continue;
-
-			switch (type) {
-				case 'boolean':
-					(config as any)[key] = value !== 'false';
-					break;
-				case 'number':
-					(config as any)[key] = parseInt(value, 10);
-					break;
-				case 'json':
-					try {
-						(config as any)[key] = JSON.parse(value);
-					} catch {
-						// Fall back to boolean parsing
-						(config as any)[key] = value !== 'false';
-					}
-					break;
-			}
-		}
-
-		return config;
-	}
-
-	// Merge configurations
-	static _mergeConfig(
-		defaults: Required<Omit<PanelSetConfig, 'selector'>>,
-		dataConfig: Partial<PanelSetConfig>,
-		options: Partial<PanelSetConfig>
-	): Required<Omit<PanelSetConfig, 'selector'>> {
-		return {
-			...defaults,
-			...dataConfig,
-			...options
-		} as Required<Omit<PanelSetConfig, 'selector'>>;
-	}
-
-	/**
-	 * Initialize PanelSet instances
-	 * @param selectorOrOptions - CSS selector string or config object
-	 * @param options - Additional config options (when first param is selector)
-	 * @returns Array of PanelSet instances
-	 */
-	static init(selectorOrOptions: string | PanelSetConfig = {}, options: PanelSetConfig = {}): PanelSet[] {
-		// Handle different call signatures
-		let selector: string;
-		let config: PanelSetConfig;
-
-		if (typeof selectorOrOptions === 'string') {
-			// init('#demo') or init('#demo', {debug: true})
-			selector = selectorOrOptions;
-			config = options;
-		} else {
-			// init() or init({selector: '#demo', debug: true})
-			config = selectorOrOptions;
-			selector = config.selector || '[data-panelset]';
-		}
-
-		const elements = document.querySelectorAll<HTMLElement>(selector);
-		const instances: PanelSet[] = [];
-
-		elements.forEach(el => {
-			// Skip if already initialized
-			if (el.panelSet || el.dataset.panelset === 'true') {
-				if (el.panelSet) instances.push(el.panelSet);
-				return;
-			}
-
-			const instance = new PanelSet(el, config);
-			instances.push(instance);
-		});
-
-		return instances;
-	}
-
-	constructor(elementOrSelector: HTMLElement | string, options: PanelSetConfig = {}) {
-		// Handle both element and selector
-		let element: HTMLElement | null;
-		if (typeof elementOrSelector === 'string') {
-			element = document.querySelector<HTMLElement>(elementOrSelector);
-			if (!element) {
-				throw new Error(`PanelSet: No element found for selector "${elementOrSelector}"`);
-			}
-		} else {
-			element = elementOrSelector;
-		}
-
-		this.element = element;
-
-		// Check if already initialized
-		if (element.panelSet || element.dataset.panelset === 'true') {
-			console.warn('PanelSet: Element already initialized, returning existing instance');
-			return element.panelSet!;
-		}
-
-		// Store instance on element
-		element.panelSet = this;
-
-		const dataConfig = PanelSet._getDataConfig(element);
-		this.config = PanelSet._mergeConfig(
-			PanelSet.defaults,
-			dataConfig,
-			options
-		);
-
-		this.panels = Array.from(element.querySelectorAll<HTMLElement>('[role="tabpanel"]'));
-		this.activePanel =
-			this.panels.find(p => p.classList.contains('active')) || this.panels[0];
-		this.panelWrapper =
-			this.element.querySelector<HTMLElement>('.panel-wrapper') || this._autoWrapPanels();
-
-		this.pendingPanel = this.activePanel;
-
-		this._internalInit();
-
-		// Mark as initialized, can be used in CSS selectors for visual confirmation
-		this.element.dataset.panelset = 'true';
-
-		this._log(`Initialized (${this.panels.length} panels)`);
-		this._dispatch<ReadyEventDetail>('ps:ready', { container: this.element, instance: this });
-	}
-
-	// Debug logging helper
-	private _log(message: string): void {
-		if (!this.config.debug) return;
-		const id = this.element.id || 'no id';
-		console.log(`[PanelSet] - "${id}" -`, message);
-	}
-
-	private _autoWrapPanels(): HTMLElement {
-		const wrapper = document.createElement('div');
-		wrapper.className = 'panel-wrapper';
-		this.panels.forEach(panel => wrapper.appendChild(panel));
-		this.element.appendChild(wrapper);
-		return wrapper;
-	}
-
-	private _internalInit(): void {
-		this.panels.forEach(panel => {
-			panel.classList.remove('fade', 'incoming');
-			if (panel !== this.activePanel) {
-				panel.hidden = true;
-				panel.classList.remove('active');
-			} else {
-				panel.hidden = false;
-				panel.classList.add('active');
-			}
-		});
-		this.element.style.height = '';
-	}
-
-	// Dispatch custom event helper
-	private _dispatch<T = unknown>(eventName: string, detail: T): void {
-		this.element.dispatchEvent(
-			new CustomEvent(eventName, {
-				detail,
-				bubbles: true,
-				cancelable: false
-			})
-		);
-	}
-
-	/* --- Modular helpers --- */
-
-	private _getVerticalMetrics(el: HTMLElement | null): number {
-		if (!el) return 0;
-		const s = getComputedStyle(el);
-		return ['paddingTop', 'paddingBottom', 'borderTopWidth', 'borderBottomWidth']
-			.reduce((sum, prop) => sum + (parseFloat(s[prop as keyof CSSStyleDeclaration] as string) || 0), 0);
-	}
-
-	private _measureHeight(panel: HTMLElement): number {
-		let total = panel.offsetHeight;
-		total += this._getVerticalMetrics(this.panelWrapper);
-		total += this._getVerticalMetrics(this.element);
-		return total;
-	}
-
-	private _cleanupPanels(newPanel: HTMLElement): void {
-		this.panels.forEach(panel => {
-			panel.classList.remove('fade', 'incoming');
-			if (panel !== newPanel) {
-				panel.classList.remove('active');
-				panel.hidden = true;
-			} else {
-				panel.classList.add('active');
-				panel.hidden = false;
-			}
-		});
-		this.element.style.height = '';
-		this.element.classList.remove('is-transitioning');
-		this.activePanel = newPanel;
-	}
-
-	private _waitForTransition(element: HTMLElement): Promise<void> {
-		return new Promise(resolve => {
-			const styles = getComputedStyle(element);
-			const duration = parseFloat(styles.transitionDuration) || 0;
-			const delay = parseFloat(styles.transitionDelay) || 0;
-			if (duration + delay === 0) {
-				resolve();
-				return;
-			}
-			const handler = (e: TransitionEvent) => {
-				if (e.target !== element) return;
-				element.removeEventListener('transitionend', handler);
-				resolve();
-			};
-			element.addEventListener('transitionend', handler);
-		});
-	}
-
-	// Shared helper for open/close
-	private _animateOpenClose(isOpening: boolean, withTransition: boolean): void {
-		const action = isOpening ? 'opening' : 'closing';
-		const oppositeAction = isOpening ? 'closing' : 'opening';
-		const oppositeClass = `is-${oppositeAction}`;
-		const actionClass = `is-${action}`;
-
-		this._log(isOpening ? 'Opening' : 'Closing');
-
-		this._openCloseGeneration++;
-		const myGeneration = this._openCloseGeneration;
-
-		// Remove opposite state if interrupting
-		if (this.element.classList.contains(oppositeClass)) {
-			this.element.classList.remove(oppositeClass);
-		}
-
-		const targetHeight = isOpening ? this._measureHeight(this.pendingPanel) : 0;
-
-		if (withTransition && this.config.transitions) {
-			this.element.classList.add(actionClass);
-
-			const currentHeight = this.element.offsetHeight;
-			this.element.style.height = `${currentHeight}px`;
-
-			if (isOpening) this.element.classList.remove('is-closed');
-
-			requestAnimationFrame(() => {
-				this.element.style.height = `${targetHeight}px`;
-
-				this._waitForTransition(this.element).then(() => {
-					if (this._openCloseGeneration === myGeneration) {
-						this.element.style.height = '';
-						this.element.classList.remove(actionClass);
-						if (!isOpening) this.element.classList.add('is-closed');
-					}
-				});
-			});
-		} else {
-			if (isOpening) {
-				this.element.classList.remove('is-closed');
-			} else {
-				this.element.classList.add('is-closed');
-			}
-			this.element.style.height = '';
-		}
-	}
-
-	/**
-	 * Get the ID of the currently active panel
-	 * @returns Panel ID or null if no panel is active
-	 */
-	getActive(): string | null {
-		return this.pendingPanel?.id || null;
-	}
-
-	/**
-	 * Open a closable panelset
-	 * @param withTransition - Whether to animate
-	 */
-	open(withTransition: boolean = true): void {
-		if (!this.config.closable) {
-			this._log('Cannot open: closable is false');
-			return;
-		}
-
-		const isClosed = this.element.classList.contains('is-closed');
-		const isClosing = this.element.classList.contains('is-closing');
-
-		if (!isClosed && !isClosing) return;
-
-		this._animateOpenClose(true, withTransition);
-	}
-
-	/**
-	 * Close a closable panelset
-	 * @param withTransition - Whether to animate
-	 */
-	close(withTransition: boolean = true): void {
-		if (!this.config.closable) {
-			this._log('Cannot close: closable is false');
-			return;
-		}
-
-		const isClosed = this.element.classList.contains('is-closed');
-		const isOpening = this.element.classList.contains('is-opening');
-
-		if (isClosed && !isOpening) return;
-
-		this._animateOpenClose(false, withTransition);
-	}
-
-	/**
-	 * Toggle a closable panelset between open and closed
-	 * @param withTransition - Whether to animate
-	 */
-	toggle(withTransition: boolean = true): void {
-		const isClosed = this.element.classList.contains('is-closed');
-		const isClosing = this.element.classList.contains('is-closing');
-
-		// If closed or closing, open it
-		if (isClosed || isClosing) {
-			this.open(withTransition);
-		} else {
-			this.close(withTransition);
-		}
-	}
-
-	/**
-	 * Register a handler for async content loading
-	 * @param handler - Async content handler function
-	 * @param options - Handler options (once: whether to load only once)
-	 */
-	onBeforeActivate(handler: AsyncContentHandler, options: HandlerOptions = {}): void {
-		const once = options.once === true; // Default: false (always reload)
-
-		this.element.addEventListener('ps:beforeactivate', (e) => {
-			const event = e as CustomEvent<BeforeActivateEventDetail>;
-			const { targetPanel, signal } = event.detail;
-
-			// Skip if already loaded and once=true
-			if (once && targetPanel.dataset.loaded === 'true') {
-				if (this.config.debug) {
-					this._log(`Skipping ${targetPanel.id} (already loaded)`);
-				}
-				return;
-			}
-
-			// Call user handler
-			const result = handler(targetPanel, signal);
-
-			// If handler returns a promise, attach it to the event
-			if (result && typeof result.then === 'function') {
-				event.detail.promise = result
-					.then(() => {
-						// Auto-mark as loaded on success if once=true
-						if (once) {
-							targetPanel.dataset.loaded = 'true';
-						}
-					})
-					.catch(error => {
-						if (error.name === 'AbortError') {
-							if (this.config.debug) {
-								this._log(`Load aborted: ${targetPanel.id}`);
-							}
-							throw error;
-						} else {
-							this._log(`Load failed: ${error.message}`);
-							throw error;
-						}
-					});
-			}
-		});
-	}
-
-	/* --- Main logic --- */
-
-	/**
-	 * Show a panel by ID
-	 * @param panelId - ID of the panel to show
-	 * @param withTransition - Whether to animate the transition
-	 * @param options - Additional options (trigger name)
-	 */
-	async show(panelId: string, withTransition: boolean = true, options: ShowOptions = {}): Promise<void> {
-		const newPanel = this.panels.find(p => p.id === panelId);
-
-		if (!newPanel) {
-			this._log(`Panel not found: ${panelId}`);
-			return;
-		}
-
-		if (newPanel === this.pendingPanel) return;
-
-		const prevPanel = this.pendingPanel;
-		const prevPanelId = prevPanel?.id;
-		this.pendingPanel = newPanel;
-
-		this.element.classList.remove('is-loading');
-
-		if (prevPanel && prevPanel !== this.activePanel && prevPanel !== newPanel) {
-			prevPanel.classList.remove('incoming');
-			if (prevPanel.hidden) {
-				// Was never visible, keep hidden
-			} else {
-				prevPanel.classList.remove('active');
-			}
-		}
-
-		const wasLoadingAsync = this._isLoadingAsync;
-
-		if (this._currentAbortController) {
-			this._currentAbortController.abort();
-
-			// Only fire abort if we're cancelling an async operation
-			if (wasLoadingAsync && prevPanelId && prevPanelId !== panelId) {
-				this._dispatch<ActivationAbortedEventDetail>('ps:activationaborted', {
-					panelId: prevPanelId,
-					trigger: null
-				});
-			}
-		}
-
-		const abortController = new AbortController();
-		this._currentAbortController = abortController;
-		this._isLoadingAsync = false;
-
-		this._log(`${prevPanel?.id || 'none'} → ${panelId}`);
-
-		const beforeActivateDetail: BeforeActivateEventDetail = {
-			panelId,
-			targetPanel: newPanel,
-			outgoingPanel: prevPanel,
-			signal: abortController.signal,
-			promise: null
-		};
-
-		const beforeActivateEvent = new CustomEvent('ps:beforeactivate', {
-			detail: beforeActivateDetail,
-			bubbles: true,
-			cancelable: false
-		});
-
-		this.element.dispatchEvent(beforeActivateEvent);
-
-		const userPromise = beforeActivateDetail.promise;
-
-		if (userPromise) {
-			this._isLoadingAsync = true;
-			this._log('Waiting for content...');
-
-			let spinnerTimeout: ReturnType<typeof setTimeout> | undefined;
-			let loadingShown = false;
-
-			if (this.config.loadingDelay > 0) {
-				spinnerTimeout = setTimeout(() => {
-					this.element.classList.add('is-loading');
-					loadingShown = true;
-				}, this.config.loadingDelay);
-			} else {
-				this.element.classList.add('is-loading');
-				loadingShown = true;
-			}
-
-			const hasPreviousPanel = this.activePanel && this.activePanel !== newPanel;
-
-			if (!hasPreviousPanel) {
-				const shouldTransition = withTransition !== false && this.config.transitions !== false;
-				let heightTransition = shouldTransition;
-				if (typeof this.config.transitions === 'object') {
-					heightTransition = shouldTransition && this.config.transitions.height !== false;
-				}
-
-				if (heightTransition) {
-					const currentHeight = this.element.offsetHeight;
-					this.element.style.height = `${currentHeight}px`;
-
-					requestAnimationFrame(() => {
-						this.element.style.height = `${this.config.emptyPanelHeight}px`;
-					});
-				}
-			}
-
-			try {
-				await userPromise;
-
-				if (spinnerTimeout) clearTimeout(spinnerTimeout);
-
-				if (abortController.signal.aborted) {
-					this._log(`Aborted during load: ${panelId}`);
-					if (loadingShown) this.element.classList.remove('is-loading');
-					return;
-				}
-
-				this._log('Content loaded');
-			} catch (error) {
-				if (spinnerTimeout) clearTimeout(spinnerTimeout);
-
-				const err = error as Error;
-				this._log(`Load failed: ${err.message}`);
-				if (loadingShown) this.element.classList.remove('is-loading');
-
-				if (err.name !== 'AbortError') {
-					console.error('Panel load error:', error);
-				}
-
-				return;
-			}
-
-			if (loadingShown) this.element.classList.remove('is-loading');
-		}
-
-		if (abortController.signal.aborted) {
-			this._log(`Aborted: ${panelId}`);
-			return;
-		}
-
-		this._dispatch<ActivationEventDetail>('ps:activationstart', {
-			panelId,
-			trigger: options.trigger || null
-		});
-
-		const shouldTransition = withTransition !== false && this.config.transitions !== false;
-
-		let panelTransition = shouldTransition;
-		let heightTransition = shouldTransition;
-
-		if (typeof this.config.transitions === 'object') {
-			panelTransition = shouldTransition && this.config.transitions.panels !== false;
-			heightTransition = shouldTransition && this.config.transitions.height !== false;
-		}
-
-		this.panels.forEach(panel => panel.classList.toggle('fade', panelTransition));
-
-		const startHeight = this.element.offsetHeight;
-		if (heightTransition) {
-			this.element.style.height = `${startHeight}px`;
-		}
-
-		const outgoingPanel = this.activePanel;
-
-		newPanel.hidden = false;
-		newPanel.classList.add('incoming');
-		if (panelTransition) {
-			// Apply general transitioning class for overflow: hidden
-			this.element.classList.add('is-transitioning');
-		}
-		if (outgoingPanel && outgoingPanel !== newPanel) {
-			outgoingPanel.classList.remove('active', 'incoming');
-			outgoingPanel.hidden = false;
-		}
-
-		requestAnimationFrame(() => {
-			newPanel.classList.add('active');
-			if (outgoingPanel && outgoingPanel !== newPanel) {
-				outgoingPanel.classList.remove('incoming');
-			}
-
-			const targetHeight = this._measureHeight(newPanel);
-			const heightChanged = startHeight !== targetHeight;
-
-			if (heightTransition) {
-				this.element.style.height = `${targetHeight}px`;
-			}
-
-			const promises: Promise<void>[] = [];
-			if (panelTransition) {
-				promises.push(this._waitForTransition(newPanel));
-			}
-			if (heightTransition && heightChanged) {
-				promises.push(this._waitForTransition(this.element));
-			}
-			if (!promises.length) promises.push(Promise.resolve());
-
-			Promise.all(promises).then(() => {
-				// Check if interrupted by another activation
-				if (this.pendingPanel !== newPanel) {
-					this._log(`Interrupted: ${panelId}`);
-					return;
-				}
-
-				this._cleanupPanels(newPanel);
-				this._log(`✓ ${panelId}`);
-				this._dispatch<ActivationEventDetail>('ps:activationcomplete', {
-					panelId,
-					trigger: options.trigger || null
-				});
-			});
-		});
-	}
-}