javascript/inputAccordion.js

function inputAccordionChecked(id, checked) {
    var accordion = gradioApp().getElementById(id);
    accordion.visibleCheckbox.checked = checked;
    accordion.onVisibleCheckboxChange();
}

function setupAccordion(accordion) {
    var labelWrap = accordion.querySelector('.label-wrap');
    var gradioCheckbox = gradioApp().querySelector('#' + accordion.id + "-checkbox input");
    var extra = gradioApp().querySelector('#' + accordion.id + "-extra");
    var span = labelWrap.querySelector('span');
    var linked = true;

    var isOpen = function() {
        return labelWrap.classList.contains('open');
    };

    var observerAccordionOpen = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutationRecord) {
            accordion.classList.toggle('input-accordion-open', isOpen());

            if (linked) {
                accordion.visibleCheckbox.checked = isOpen();
                accordion.onVisibleCheckboxChange();
            }
        });
    });
    observerAccordionOpen.observe(labelWrap, {attributes: true, attributeFilter: ['class']});

    if (extra) {
        labelWrap.insertBefore(extra, labelWrap.lastElementChild);
    }

    accordion.onChecked = function(checked) {
        if (isOpen() != checked) {
            labelWrap.click();
        }
    };

    var visibleCheckbox = document.createElement('INPUT');
    visibleCheckbox.type = 'checkbox';
    visibleCheckbox.checked = isOpen();
    visibleCheckbox.id = accordion.id + "-visible-checkbox";
    visibleCheckbox.className = gradioCheckbox.className + " input-accordion-checkbox";
    span.insertBefore(visibleCheckbox, span.firstChild);

    accordion.visibleCheckbox = visibleCheckbox;
    accordion.onVisibleCheckboxChange = function() {
        if (linked && isOpen() != visibleCheckbox.checked) {
            labelWrap.click();
        }

        gradioCheckbox.checked = visibleCheckbox.checked;
        updateInput(gradioCheckbox);
    };

    visibleCheckbox.addEventListener('click', function(event) {
        linked = false;
        event.stopPropagation();
    });
    visibleCheckbox.addEventListener('input', accordion.onVisibleCheckboxChange);
}

onUiLoaded(function() {
    for (var accordion of gradioApp().querySelectorAll('.input-accordion')) {
        setupAccordion(accordion);
    }
});