Recount-Server/web/static/dropdowns.js

import {
    computePosition,
    flip,
    shift,
} from 'https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.5.4/+esm';

function update_position(button, dropdown_div) {
    const placement = button.dataset.dropdownDirection;
    computePosition(button, dropdown_div, {
        placement: placement,
        middleware: [
            flip(),
            shift()
        ],
    }).then(({x, y}) => {
        Object.assign(dropdown_div.style, {
            left: `${x}px`,
            top: `${y}px`,
        });
    })
}

function setup_dropdown(button) {
    const dropdown_div = document.querySelector("#" + button.dataset.dropdownTarget);
    update_position(button, dropdown_div);
    dropdown_div.style.display = "none";
    dropdown_div.style.maxHeight = "0px";
    return function () {
        if (dropdown_div.style.display == "none") {
            update_position(button, dropdown_div);
            button.style.borderBottomLeftRadius = "0px";
            button.style.borderBottomRightRadius = "0px";

            dropdown_div.style.overflow = "hidden";
            dropdown_div.style.display = "block";
            dropdown_div.style.maxHeight = "0px";


            setTimeout(function () {
                dropdown_div.style.maxHeight = "150px";
                dropdown_div.style.removeProperty("overflow");
            }, 200);
        } else {
            dropdown_div.style.overflow = "hidden";
            dropdown_div.style.maxHeight = "0px";
            setTimeout(function () {
                button.style.removeProperty("border-bottom-left-radius");
                button.style.removeProperty("border-bottom-right-radius");
                dropdown_div.style.display = "none";
                dropdown_div.style.removeProperty("overflow");
            }, 200);
        }
    };
}

function select_value_change(el) {
    return function () {
        var enable_div = el.options[el.selectedIndex].dataset.selectDiv;
        el.parentNode.querySelectorAll("div").forEach(function (div_el) {
            div_el.style.display = "none";
        });
        el.parentNode.querySelector("#" + enable_div).style.removeProperty("display");
    }
}

function register_dropdowns() {
    document.querySelectorAll(".dropdown-button").forEach(function (el) {
        el.addEventListener("click", setup_dropdown(el));
    });
    document.querySelectorAll(".select-swapout").forEach(function (el) {
        el.addEventListener("change", select_value_change(el));
    });
}

export {register_dropdowns}