HTML : details

const RE_HEADINGS = /^h\d$/;
    
const RE_PARENT = /^(article|section|div)$/;
    
const CLASS = 'expander';
    
const CLASS_TARGET = 'expander-target';
    
/**
 *  Flag to know if 'details' elements are supported by the browser.
 *
 *  @private
 *  @type Boolean
 */
const detailsSupported = ('open' in document.createElement('details'));

// /**
//  *  Listen to mutation events.
//  *
//  * @protected
//  * @param {MutationRecord[]} mutations Liste de mutations
//  * @returns {void}
//  */
// const onPropertyMutation = mutations => render(mutations[0].target);

const onHashChange = () => {
    const id = globalThis.location.hash ? globalThis.location.hash.substring(1) : null;
    const el = id ? globalThis.document.getElementById(id) : null;
    if (el) {
        if (el.classList.contains(CLASS)) {
            el.open = true;
        } else if (el.parentElement && el.parentElement.classList.contains(CLASS)) {
            el.parentElement.open = true;
        }
    }
};

/**
 *  Listen click events on element to open / close.
 *
 *  @protected
 *  @param {Event} e Object DOM Event
 */
const onTargetClick = function (e) {
    let target = /** @type {HTMLElement} */ (e.target),
        targetName = target.nodeName.toLowerCase();
    if (target.htmlFor || targetName === 'input' || targetName === 'button') {
        // Ne pas agir sur un label avec un for, un input, un button
        return;
    }
    if (targetName === 'a' && target !== e.currentTarget) {
        // Ne pas agir si c'est un lien qui n'est pas l'élément cible.
        return;
    }
    e.preventDefault();
    toggle(e.currentTarget.parentNode);
};

// /**
//  *  Mutation observer.
//  *
//  *  @private
//  *  @type MutationObserver
//  */
// const observer = new MutationObserver(onPropertyMutation);

// /**
//  *  Configuration de l'observateur de mutations.
//  *
//  *  @private
//  *  @type MutationObserverInit
//  */
// const observerConfig = {
//     attributes: true,
//     attributeFilter: ['open'],
// };

/**
 *  Descripteur de la propriété 'open' pour les details.
 *
 *  @private
 *  @type Object
 */
const openProperty = {
    enumerable: true,
    configurable: false,
    get: function () {
        return this.hasAttribute('open') ? true : undefined;
    },
    set: function (newValue) {
        if (newValue === this.open) {
            return;
        }
        if (newValue) {
            this.setAttribute('open', 'open');
            this.setAttribute('aria-expanded', 'true');
        } else {
            this.removeAttribute('open');
            this.setAttribute('aria-expanded', 'false');
        }
        render(this);
    },
};

/**
 *  Méthode de switch de l'état ouvert / fermé d'un élément.
 * 
 * @private
 * @param {HTMLElement} el Elément
 * @returns {boolean}
 */
const toggle = el => el.open = !el.open;

/**
 * Rendu graphique de l'état ouvert / fermé d'un élément.
 *
 * @private
 * @param {HTMLElement} el Élément
 */
const render = function (el) {
    // el.style.height = el.getAttribute('data-height-' + (el.open ? 'open' : 'close')) + 'px';
    el.style.height = el.open ? '' : `${el.dataset.heightClose}px`;
};

/**
 * @param {HTMLElement} el 
 * @param {HTMLElement} target 
 * @returns {void}
 */
const init = function (el, target) {
    
    const nodeName = el.nodeName.toLowerCase();
        
    if ((nodeName === 'details' && detailsSupported) || el.classList.contains('nojs') 
            || el.getAttribute('data-expander-initialized') === 'true') {
        return;
    }
        
    // Manage target
    if (!target) {
        // first target with offset
        let n = el.children.length,
            i = 0;
        for (i = 0; i < n; i += 1) {
            if (el.children[i].offsetHeight) {
                target = el.children[i];
                break;
            }
        }
    }
    if (!target) {
        console.warn('[rnb/ui/expander] No target for click'); // eslint-disable-line no-console
        console.log(el); // eslint-disable-line no-console
        return;
    }
        
    // Create sumlamry for details if it does not exist
    if (nodeName === 'details' && target.nodeName.toLowerCase() !== 'summary') {
        target = document.createElement('summary');
        target.appendChild(document.createTextNode('Details'));
        el.insertBefore(target, el.firstChild);
    }
    target.classList.add(CLASS_TARGET);

    // Find heights
    const styles = globalThis.getComputedStyle(el, null);
    const pTop = styles.paddingTop;
    const pBottom = styles.paddingBottom;
    let hOpen = el.clientHeight;
    if (pTop) {
        hOpen -= parseInt(pTop, 10);
    }
    if (pBottom) {
        hOpen -= parseInt(pBottom, 10);
    }
        
    if (!el.hasAttribute('data-height-close')) {
        el.setAttribute('data-height-close', target.offsetHeight);
    }
    el.setAttribute('data-height-open', hOpen);
    el.setAttribute('data-expander-initialized', 'true');
    el.classList.add(CLASS);
        
    // Définir la propriété 'open' mappée sur l'attribut 'open'
    Object.defineProperty(el, 'open', openProperty);
        
    let state = el.getAttribute('aria-expanded') === 'true';
    el.open = state;

    // observer.observe(el, observerConfig);
        
    target.addEventListener('click', onTargetClick, false);
};

const expanders = {
    /**
     * Manage a specific element
     *
     * @param {HTMLElement} el
     * @param {HTMLElement} [target]
     */
    initElement (el, target) {
        init(el, target);
    },

    /**
     * Initialize all available components in the current document.
     */
    initDocument () {
        let listen = false;
        document.querySelectorAll('detail, .expander').forEach(element => {
            listen = true;
            /** @type {HTMLElement} */
            let target = null;
            // Cas particulier si class portée par un titre et parent est un
            // article, section, div, alors expander est ce parent
            if (element.nodeName.toLowerCase().search(RE_HEADINGS) > -1
                    && element.parentNode.nodeName.toLowerCase().search(RE_PARENT) > -1) {
                target = element;
                target.classList.remove('expander');
                element = element.parentNode;
                element.classList.add('expander');
            }
            init(element, target);
        });
        if (listen && globalThis instanceof EventTarget) {
            globalThis.removeEventListener('hashchange', onHashChange);
            globalThis.addEventListener('hashchange', onHashChange);
            onHashChange();
        }
    },
};

export default expanders;

/*

expander
======================================

Gérer un comportement plier / déplier.

example:
    
    <!-- Avec l'attribut 'aria-expanded' à 'true', 
    tous les enfants de l'enfant sont affichés. -->
    
    <div class="expander" aria-expanded="true">
        <p>First child</p>
        <p>Content paragraph One.</p>
        <p>Content paragraph two.</p>
    </div>
    
    <!-- Avec l'attribut 'aria-expanded' à 'false',
    les enfants suivant le premier enfant seront masqué. -->
    
    <div class="expander" aria-expanded="false">
        <p>First child</p>
        <p>Content paragraph One.</p>
        <p>Content paragraph two.</p>
    </div>
*/

.expander {
    transition: height 0.2s;
    overflow: hidden;
}
.expander[data-expander-initialized="true"] {
    
}

/* Icône d'état plier/ déplier pour le premier enfant  */
.expander > .expander-target:before {
    content: "\25b6";
    font-family: var(--ff-sans-serif);
    font-size: 1rem;
    display: inline-block;
    width: 1rem;
    margin: 0 0.25rem 0 -1.25rem;
    text-align: center;
    vertical-align: text-top;
}

/* Type d'icône du premier enfant pour un expander ouvert. */
.expander[open] > .expander-target:before,
.expander[aria-expanded="true"] > .expander-target:before {
    content: "\25bc";
}

/* Taille limitée pour un expander fermé. */
details.expander,
.expander[aria-expanded="false"] {
    height: 1.5em;
}

/* Enfants invisibles pour un expander fermé. */
details.expander > *,
.expander[aria-expanded="false"] > * {
    visibility: hidden;
    transition: visibility 0.2s;
}
/* Enfants visible pour un expander avec attribut open */
.expander[open] > * {
    visibility: visible;
}

/* Forcer la visibilité pour le premier enfant. */
.expander > .expander-target {
    cursor: pointer;
    visibility: visible;
    padding-left: 1em;
    margin-top: 0;
}
.expander > dd {
    padding: 0;
    margin: 0;
}