Luckycall/ReportWebCore/SuperAdmin/wwwroot/js/tree.js

var toggler = document.getElementsByClassName("caret");
var i;

for (i = 0; i < toggler.length; i++) {
    toggler[i].addEventListener("click", function () {
        this.parentElement.querySelector(".nested").classList.toggle("active");
        this.classList.toggle("caret-down");
    });
}

const menu = document.getElementById('menu');
//const outClick = document.getElementById('out-click');

var div_list = document.querySelectorAll('.clickable'); // returns NodeList
var div_array = [...div_list]; // converts NodeList to Array
div_array.forEach(div => {
    // do something awesome with each div
    //div.addEventListener('contextmenu', e => {
    //    e.preventDefault();
    //    var itemID = e.target.getAttribute("value");
    //    $("#itemID").val(itemID);

    //    var w = $(window);
    //    if (window.scrollY + e.clientY - w.scrollTop() < 700) {
    //        menu.style.top = `${window.scrollY + e.clientY - 100}px`;
    //        menu.style.left = `${window.scrollX + e.clientX - 200}px`;
    //        menu.classList.add('show-top');
    //    } else {
    //        menu.style.top = `${window.scrollY + e.clientY - 200}px`;
    //        menu.style.left = `${window.scrollX + e.clientX - 200}px`;
    //        menu.classList.add('show-bottom');
    //    }
    //    console.log($("#itemID").val());
    //    //outClick.style.display = "block";
    //});
});

//outClick.addEventListener('click', () => {
//    menu.classList.remove('show-top');
//    menu.classList.remove('show-bottom');
//    outClick.style.display = "none";
//})

$(".tree-box").contextmenu(function (e) {
    e.preventDefault();
    var itemID = e.target.getAttribute("value");
    $("#itemID").val(itemID);
    var w = $(window);
    if (window.scrollY + e.clientY - w.scrollTop() < 700) {
        menu.style.top = `${window.scrollY + e.clientY - 100}px`;
        menu.style.left = `${window.scrollX + e.clientX - 200}px`;
        menu.classList.add('show-top');
    } else {
        menu.style.top = `${window.scrollY + e.clientY - 200}px`;
        menu.style.left = `${window.scrollX + e.clientX - 200}px`;
        menu.classList.add('show-bottom');
    }
    console.log($("#itemID").val());
});

$(".tree-container").on('click', () => {
    menu.classList.remove('show-top');
    menu.classList.remove('show-bottom');
    //outClick.style.display = "none";
})



function clickableOutClick() {
    const menu = document.getElementById('menu');
    //const outClick = document.getElementById('out-click');

    menu.classList.remove('show-top');
    menu.classList.remove('show-bottom');
    //outClick.style.display = "none";

}