mesareportingservices/ReportingServices/wwwroot/js/site.js

// Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
// for details on configuring this project to bundle and minify static web assets.

// Write your JavaScript code.
window.onload = (event) => {
    initMultiselect();
};

function displayBusyIndicator() {
    document.getElementById("LoadingDisplay").style.display = "block";
}

function initMultiselect() {
    allCheckboxStatusCheck();

    document.addEventListener("click", function (evt) {
        var flyoutElement = document.getElementsByClassName("myMultiselect");
        var yieldElement = document.getElementById("expandYield");
        var targetElement = evt.target; // clicked element
        var myMultiselect = false;
        var clickedYield = false;

        var count = 0;

        if (flyoutElement.length != 0)
            count = flyoutElement.length
        else
            count = 1

        do {
            for (let i = 0; i < count; i++) {

                if (targetElement == flyoutElement[i] && flyoutElement.length > 0) {
                    myMultiselect = true;
                    break;
                }

                if (targetElement == yieldElement) {
                    clickedYield = true;
                    break;
                }
            }

            if (myMultiselect || clickedYield)
                break;

            // Go up the DOM
            targetElement = targetElement.parentNode;
        } while (targetElement);

        // This is a click outside
        if (!myMultiselect) {
            toggleCheckboxArea(true);
        }
            

        if (clickedYield)
            expandYield();
    });
}

function checkboxStatusChange() {

    var parentNodeId = event.target.parentNode.parentNode.parentNode.parentNode.id;

    var multiselect = document.getElementById(parentNodeId).getElementsByClassName("mySelectLabel")[0];
    var multiselectOption = multiselect.getElementsByTagName('option')[0];

    var values = [];
    var checkboxes = document.getElementById(parentNodeId).getElementsByClassName("mySelectOptions")[0];
    var checkedCheckboxes = checkboxes.querySelectorAll('input[type=checkbox]:checked');

    for (const item of checkedCheckboxes) {
        var checkboxValue = item.getAttribute('value');
        values.push(checkboxValue);
    }

    var dropdownText = "Nothing is selected";
    var dropdownValue = "Nothing is selected";
    if (values.length > 0) {
        dropdownText = values.join(', ');
        dropdownValue = values.join(',');
    }

    multiselectOption.innerText = dropdownText;
    multiselectOption.value = dropdownValue;
}

function allCheckboxStatusCheck() {

    var multiselects = document.getElementsByClassName("myMultiselect");

    for (let i = 0; i < multiselects.length; i++) {
        var multiselectOption = multiselects[i].getElementsByTagName('option')[0];

        var values = [];
        var checkboxes = multiselects[i].getElementsByClassName("mySelectOptions")[0];
        var checkedCheckboxes = checkboxes.querySelectorAll('input[type=checkbox]:checked');

        for (const item of checkedCheckboxes) {
            var checkboxValue = item.getAttribute('value');
            values.push(checkboxValue);
        }

        var dropdownText = "Nothing is selected";
        var dropdownValue = "Nothing is selected";
        if (values.length > 0) {
            dropdownText = values.join(', ');
            dropdownValue = values.join(',');
        }

        multiselectOption.innerText = dropdownText;
        multiselectOption.value = dropdownValue;
    }
}

function clearList() {
    var parentNodeId = event.target.parentNode.parentNode.id;

    var checkboxes = document.getElementById(parentNodeId).getElementsByClassName("mySelectOptions")[0].getElementsByTagName("input");

    for (let j = 0; j < checkboxes.length; j++) {
        if (checkboxes[j].checked)
            checkboxes[j].click();
    }
}

function toggleCheckboxArea(onlyHide = false) {
    var parentNodeId = "";

    if (event.target.parentNode.parentNode.parentNode != null)
        parentNodeId = event.target.parentNode.parentNode.parentNode.id;

    if (parentNodeId != "") {
        var checkboxes = document.getElementById(parentNodeId).getElementsByClassName("mySelectOptions")[0];
        var displayValue = checkboxes.style.display;
    }

    if (displayValue != "block" && parentNodeId != "") {
        if (onlyHide == false) {
            checkboxes.style.display = "block";
        }
    } else {
        var htmlElements = document.getElementsByClassName("mySelectOptions");
        for (let j = 0; j < htmlElements.length; j++) {
            htmlElements[j].style.display = "none";
        }
    }
}

function expandYield() {
    var yieldDivs = document.getElementsByClassName("yield");

    for (let i = 0; i < yieldDivs.length; i++) {
        yieldDivs[i].classList.toggle("hidden");
    }
}