BookStack/resources/assets/js/components/chapter-toggle.js

class ChapterToggle {

    constructor(elem) {
        this.elem = elem;
        this.isOpen = elem.classList.contains('open');
        elem.addEventListener('click', this.click.bind(this));
    }

    open() {
        const list = this.elem.parentNode.querySelector('.inset-list');

        this.elem.classList.add('open');
        list.style.display = 'block';
        list.style.maxHeight = '';
        const maxHeight = list.getBoundingClientRect().height + 10;
        list.style.maxHeight = '0px';
        list.style.overflow = 'hidden';
        list.style.transition = 'max-height ease-in-out 240ms';

        let transitionEndBound = onTransitionEnd.bind(this);
        function onTransitionEnd() {
            list.style.overflow = '';
            list.style.maxHeight = '';
            list.style.transition = '';
            list.style.display = `block`;
            list.removeEventListener('transitionend', transitionEndBound);
        }

        setTimeout(() => {
            requestAnimationFrame(() => {
                list.style.maxHeight = `${maxHeight}px`;
                list.addEventListener('transitionend', transitionEndBound)
            });
        }, 1);
    }

    close() {
        const list = this.elem.parentNode.querySelector('.inset-list');

        list.style.display =  'block';
        this.elem.classList.remove('open');
        list.style.maxHeight = list.getBoundingClientRect().height + 'px';
        list.style.overflow = 'hidden';
        list.style.transition = 'max-height ease-in-out 240ms';

        const transitionEndBound = onTransitionEnd.bind(this);
        function onTransitionEnd() {
            list.style.overflow = '';
            list.style.maxHeight = '';
            list.style.transition = '';
            list.style.display =  'none';
            list.removeEventListener('transitionend', transitionEndBound);
        }

        setTimeout(() => {
            requestAnimationFrame(() => {
                list.style.maxHeight = `0px`;
                list.addEventListener('transitionend', transitionEndBound)
            });
        }, 1);
    }

    click(event) {
        event.preventDefault();
        this.isOpen ?  this.close() : this.open();
        this.isOpen = !this.isOpen;
    }

}

export default ChapterToggle;