stylescape/ts/elements/ExclusiveDetails.ts

Stylescape is a visual identity framework developed by Scape Agency.

export class ExclusiveDetails {
    private detailsElements: NodeListOf<HTMLDetailsElement>

    constructor(selector: string) {
        this.detailsElements = document.querySelectorAll(selector)

        // Bind event listeners
        this.bindEvents()
    }

    private bindEvents(): void {
        // Handle click on each details element
        this.detailsElements.forEach((details) => {
            details.addEventListener('click', (e) => this.handleDetailsClick(e, details))
        })

        // Handle click outside details elements
        document.addEventListener('click', (e) => this.handleClickOutside(e))
    }

    private handleDetailsClick(event: MouseEvent, details: HTMLDetailsElement): void {
        event.stopPropagation() // Prevent event from bubbling to document

        // Close other details elements
        this.detailsElements.forEach((otherDetails) => {
            if (otherDetails !== details) {
                otherDetails.removeAttribute('open')
            }
        })
    }

    private handleClickOutside(event: MouseEvent): void {
        const target = event.target as HTMLElement
        const isClickInside = Array.from(this.detailsElements).some((details) =>
            details.contains(target),
        )

        // If click is outside all details elements, close them
        if (!isClickInside) {
            this.closeAll()
        }
    }

    private closeAll(): void {
        this.detailsElements.forEach((details) => {
            details.removeAttribute('open')
        })
    }
}

// Usage