Accessible Accordion: Custom Accordion Element

accessible-accordion-accordion.js

import { getAbsoluteHeight } from './utils.js';

class Curtain extends HTMLDetailsElement {
    #summary = this.querySelector('summary');

    #content = this.querySelector('.curtain__content');

    #animation = null;
    
    connectedCallback() {
        this.#summary.addEventListener('click', this.#handleClick);
    }

    disconnectedCallback() {
        this.#summary.removeEventListener('click', this.#handleClick);
    }
    
    #handleClick = (event) => {
        event.preventDefault();

        if (this.open === false) {
            this.#open();
            return;
        }

        this.close();
    };

    toggle() {
        if (this.open === true) {
            this.close();
            return;
        }

        this.#open();
    }

    #open() {
        this.style.height = `${this.offsetHeight}px`;

        if (!this.open) {
            this.open = true;
        }

        window.requestAnimationFrame(() => {
            const startHeight = `${this.offsetHeight}px`;
            const endHeight = `${this.#summary.offsetHeight + getAbsoluteHeight(this.#content)}px`;

            if (this.#animation) {
                this.#animation.cancel();
            }

            this.classList.add('nh-curtain-new--open');
            this.#animation = this.animate(
                {
                    height: [startHeight, endHeight]
                },
                {
                    duration: 400,
                    easing: 'ease-out'
                }
            );

            this.#animation.onfinish = () => this.#onAnimationFinish(true);
        });
    }

    close() {
        const startHeight = `${this.offsetHeight}px`;
        const endHeight = `${this.#summary.offsetHeight}px`;

        if (this.#animation) {
            this.#animation.cancel();
        }

        this.classList.remove('nh-curtain-new--open');
        this.#animation = this.animate(
            {
                height: [startHeight, endHeight]
            },
            {
                duration: 400,
                easing: 'ease-out'
            }
        );

        this.#animation.onfinish = () => this.#onAnimationFinish(false);
    }


    #onAnimationFinish(open) {
        this.open = open;
        this.#animation = null;
        this.style.height = '';
    }
}

customElements.define('curtain-component', Curtain, { extends: 'details' });