Backend-Api/ServiceHost/wwwroot/AssetsClient/js/dropdown.js

$(document).ready(function () {

    $(document).on('click', '.btn-dropdown', function () {
        const boxesBox = $(this).find('.boxes');
        const scrollBox = $(this).find('.scroll');
        const scrollMax = boxesBox[0].scrollHeight - boxesBox[0].clientHeight;
        const scrollThumbHeigth = Math.round(getScrollThumbHeigth(boxesBox[0]));

        scrollBox.css('--dasharray', scrollThumbHeigth + 1);
        scrollBox.css('--dashoffset', getNewPosition(0));

        boxesBox.scroll(function () {
            const scroll = boxesBox.scrollTop();
            scrollBox.css('--dashoffset', getNewPosition(scroll));
        });

        function getNewPosition(scroll) {
            const min = scrollThumbHeigth;
            const max = -242;

            if (scroll === 0) { return min; }

            if (scroll === scrollMax) { return max; }

            const proportionalValue = min + ((max - min) * scroll) / scrollMax;
            return proportionalValue;
        }

        function getScrollThumbHeigth(element) {
            const visibleHeigth = element.clientHeight;
            const totalHeigth = element.scrollHeight;
            const proportion = visibleHeigth / totalHeigth;
            const scrollThumbHeigth = proportion * visibleHeigth;

            return scrollThumbHeigth;
        }
    });

    /* --------------------------------------------------------------------------------Normal-------------------------------------------------------------------------------------- */

    // dropdown normal
    const selectedAllNormal = document.querySelectorAll(".wrapper-dropdown-normal");

    selectedAllNormal.forEach((selected) => {
        const optionsContainer = selected.children[2];
        const optionsList = selected.querySelectorAll("div.wrapper-dropdown-normal ul li");

        selected.addEventListener("click", () => {
            let arrow = selected.children[1];

            //if (selected.classList.contains("active")) {
            //    handleDropdown(selected, arrow, false);
            //} else {
            let currentActive = document.querySelector(".wrapper-dropdown-normal.active");

            if (currentActive) {
                let anotherArrow = currentActive.children[1];
                handleDropdown(currentActive, anotherArrow, false);
            }

            handleDropdown(selected, arrow, true);

            //}
        });

        // update the display of the dropdown normal
        for (let o of optionsList) {
            o.addEventListener("click", () => {
                selected.querySelector(".selected-display").innerHTML = o.innerHTML;
            });
        }

        $(document).on("click", '.dropdown-normal .item', function (e) {
            $('.dropdown-normal .item').removeClass("active");
            $(this).addClass("active");
            closeAllDropdownsNormal();
        });
    });

    // check if anything else ofther than the dropdown normal is clicked
    window.addEventListener("click", function (e) {
        if (e.target.closest(".wrapper-dropdown-normal") === null) {
            closeAllDropdownsNormal();
        }
    });

    // close all the dropdowns normal
    function closeAllDropdownsNormal() {
        const selectedNormal = document.querySelectorAll(".wrapper-dropdown-normal");
        selectedNormal.forEach((selected) => {
            const optionsContainer = selected.children[2];
            let arrow = selected.children[1];

            handleDropdown(selected, arrow, false);
        });
    }

    /* --------------------------------------------------------------------------------Year-------------------------------------------------------------------------------------- */

    // dropdown year
    const selectedAllYear = document.querySelectorAll(".wrapper-dropdown-year");

    selectedAllYear.forEach( (selected) => {
        const optionsContainer = selected.children[2];
        const optionsList = selected.querySelectorAll("div.wrapper-dropdown-year ul li");

        selected.addEventListener("click", () => {
            let arrow = selected.children[1];

            //if (selected.classList.contains("active")) {
            //    handleDropdown(selected, arrow, false);
            //} else {
                let currentActive = document.querySelector(".wrapper-dropdown-year.active");

                if (currentActive) {
                    let anotherArrow = currentActive.children[1];
                    handleDropdown(currentActive, anotherArrow, false);
                }

                handleDropdown(selected, arrow, true);

            //}
        });

        // update the display of the dropdown year
        for (let o of optionsList) {
            o.addEventListener("click", () => {
                selected.querySelector(".selected-display").innerHTML = o.innerHTML;
            });
        }

        $(document).on("click", '.dropdown-year .item', function (e) {
            $('.dropdown-year .item').removeClass("active");
            $(this).addClass("active");
            closeAllDropdownsYesr();
        });
    });

    // check if anything else ofther than the dropdown year is clicked
    window.addEventListener("click", function (e) {
        if (e.target.closest(".wrapper-dropdown-year") === null) {
            closeAllDropdownsYesr();
        }
    });

    // close all the dropdowns year
    function closeAllDropdownsYesr() {
        const selectedYear = document.querySelectorAll(".wrapper-dropdown-year");
        selectedYear.forEach((selected) => {
            const optionsContainer = selected.children[2];
            let arrow = selected.children[1];

            handleDropdown(selected, arrow, false);
        });
    }


    /* --------------------------------------------------------------------------------Month-------------------------------------------------------------------------------------- */

    // dropdown month
    const selectedAllMonth = document.querySelectorAll(".wrapper-dropdown-month");

    selectedAllMonth.forEach((selected) => {
        const optionsContainer = selected.children[2];
        const optionsList = selected.querySelectorAll("div.wrapper-dropdown-month li");

        selected.addEventListener("click", () => {
            let arrow = selected.children[1];

            //if (selected.classList.contains("active")) {
            //    handleDropdown(selected, arrow, false);
            //} else {
                let currentActive = document.querySelector(".wrapper-dropdown-month.active");

                if (currentActive) {
                    let anotherArrow = currentActive.children[1];
                    handleDropdown(currentActive, anotherArrow, false);
                }

                handleDropdown(selected, arrow, true);
            //}
        });

        // update the display of the dropdown month
        for (let o of optionsList) {
            o.addEventListener("click", () => {
                selected.querySelector(".selected-display").innerHTML = o.innerHTML;
            });
        }

        $(document).on("click", '.dropdown-month .item', function (e) {
            $('.dropdown-month .item').removeClass("active");
            $(this).addClass("active");
            closeAllDropdownsMonth();
        });
    });

    // check if anything else ofther than the dropdown month is clicked
    window.addEventListener("click", function (e) {
        if (e.target.closest(".wrapper-dropdown-month") === null) {
            closeAllDropdownsMonth();
        }
    });


    // close all the dropdowns month
    function closeAllDropdownsMonth() {
        const selectedYear = document.querySelectorAll(".wrapper-dropdown-month");
        selectedYear.forEach((selected) => {
            const optionsContainer = selected.children[2];
            let arrow = selected.children[1];

            handleDropdown(selected, arrow, false);
        });
    }


    // open all the dropdowns
    function handleDropdown(dropdown, arrow, open) {
        if (open) {
            arrow.classList.add("rotated");
            dropdown.classList.add("active");
        } else {
            arrow.classList.remove("rotated");
            dropdown.classList.remove("active");
        }
    }
});