
//\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\//
// Mini Html Tree View
//\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\//


/**
 * Mini Tree: uses <ul> and <li> html tags to build a tree list
 * This function sets event listeners for all tree parents so they can collapse and expand children
 * Click caret image to collapse and expand parent items in tree
 * The "click" event toggles classes for parent items, which makes children visible
 * Call this function once, after filling html data with something like this: ContainerDiv.html(treedata);
 * https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_treeview
 * @param {any} ContainerDiv
 */
function SetupMiniHtmlTreeView(ContainerDiv) {

    if (!ContainerDiv || ContainerDiv.length == 0)
        return;

    var togglers = ContainerDiv[0].getElementsByClassName("MiniHtmlTreeViewCaret");
    var i;

    for (i = 0; i < togglers.length; i++) {
        togglers[i].addEventListener("click", function () {
            this.parentElement.querySelector(".MiniHtmlTreeViewNested").classList.toggle("MiniHtmlTreeViewActive");
            this.classList.toggle("MiniHtmlTreeViewCaretDown");
        });
    }
}


function ExpandAllMiniHtmlTreeView(ContainerDiv) {

    if (!ContainerDiv || ContainerDiv.length == 0)
        return;

    var togglers = ContainerDiv[0].getElementsByClassName("MiniHtmlTreeViewCaret");
    var i;

    for (i = 0; i < togglers.length; i++) {
        togglers[i].parentElement.querySelector(".MiniHtmlTreeViewNested").classList.toggle("MiniHtmlTreeViewActive");
        togglers[i].classList.toggle("MiniHtmlTreeViewCaretDown");
    }
}


function RemoveCaretsMiniHtmlTreeView(ContainerDiv) {

    if (!ContainerDiv || ContainerDiv.length == 0)
        return;

    var togglers = ContainerDiv[0].getElementsByClassName("MiniHtmlTreeViewCaret");
    var i;

    for (i = 0; i < togglers.length; i++) {
        togglers[i].parentElement.querySelector(".MiniHtmlTreeViewCaret").classList.toggle("MiniHtmlTreeViewNoCaret");
        togglers[i].classList.toggle("MiniHtmlTreeViewCaretDown");
    }
}



