LDAPManager/public/javascripts/tree.js

const CLASSNAME_EXPANDED = "bi bi-chevron-down";
const CLASSNAME_COLLAPSED = "bi bi-chevron-up";

window["makeTree"] = function (ulRoot) {
	let makeTree = (li) => {
		let button = li.children[0];
		let list = li.children[1];
		if (button && list && button.nodeName == 'SPAN' && list.nodeName == 'UL') {
			button.className = CLASSNAME_COLLAPSED;
			list.style.display = 'block';
			button.addEventListener("click", (e) => {
				let visible = list.style.display === 'block';
				if (visible) {
					button.className = CLASSNAME_EXPANDED;
					list.style.display = "none";
				} else {
					button.className = CLASSNAME_COLLAPSED;
					list.style.display = "block";
				}
			});

			for (var i = 0; i < list.children.length; ++i)
				makeTree(list.children[i]);
		}
	};
	for (var i = 0; i < ulRoot.children.length; ++i)
		makeTree(ulRoot.children[i]);
}

$(() => {
    var FILTER = "";

    function treeChildren(root) {
        let result = [];
        if (root.classList.contains("treeroot"))
            return root.children;
        for (var i of root.children)
            if (i.classList.contains("treebranch"))
                for (var j of i.children)
                    if (j.classList.contains("treeitem"))
                        result.push(j);
        return result;
    }

    function updateUiFilter(filterText, treeNode) {
        if (isFiltered(filterText, treeNode)) {
            treeNode.classList.add("hidden");
        } else {
            setChildVisibility(treeNode);
            if ((treeNode.dataset?.fullname?.toLowerCase() || "").indexOf(filterText) >= 0)
                return;
            for (var treeBranch of treeChildren(treeNode))
                updateUiFilter(filterText, treeBranch);
        }
    }

    function setChildVisibility(treeNode) {
        treeNode.classList.remove("hidden");
        for (var i of treeNode.querySelectorAll(".treeitem.hidden"))
            i.classList.remove("hidden");
    }

    function isFiltered(filterText, node) {
        return node.textContent.toLowerCase().indexOf(filterText) < 0;
    }

    function filterUpdated() {
        updateUiFilter(FILTER.toLowerCase(), document.querySelector(".treeroot"));
    }

    const searchInput = document.getElementById("searchinput");

    function onSearchInputChanged() {
        if (FILTER === searchInput.value)
            return;
        FILTER = searchInput.value;
        filterUpdated();
    }
    searchInput.addEventListener('input', onSearchInputChanged);
    onSearchInputChanged();
});