Tab-Search-and-Manage/src/scripts/eventListeners.js

document.getElementById("searchBar").onkeyup = function () {
    searchTabs();
}

window.onload = async () => {
    getTabs();
}


// Set click events for tab blocks
document.addEventListener("click", (e) => {
    var target    = (!e.target.className.includes("pTagTitleText")) ? e.target : e.target.parentElement;
    var targetID  = target.id;
    var parentElm = target.parentElement;
    var id        = 0;

    if (targetID == "closeBttn") {
        if (hoverTarget) {
            closeBttnAction(hoverTarget, hoverTarget.id);
        }
    } else if (targetID == "hideTgglBttn") {
        if (hoverTarget) {
            hideSelectedTabAction(hoverTarget, hoverTarget.id);
        }
    } else if (targetID == "popoutBttn") {
        if (hoverTarget) {
            popoutSelectedTabAction(hoverTarget, hoverTarget.id);
        }
    } else if (targetID == "duplicateBttn") {
        if (hoverTarget) {
            duplicateTabAction(hoverTarget, hoverTarget.id);
        }
    } else if (targetID == "muteTgglBttn") {
        if (hoverTarget) {
            muteSelectedTabAction(hoverTarget, hoverTarget.id);
        }
    } else if (targetID == "iconElm") {
        setNewTabAction(target, targetID, parentElm, id);
    } else if (targetID == "goTop") {
        const elm = document.getElementById("listZone");
        elm.scrollTo(0,0);
    } else if (targetID == "goBottom") {
        const elm = document.getElementById("listZone");
        elm.scrollTo(0,elm.scrollHeight);
    } else if (targetID == "goToTab") {
        scrollToView();
    } else if (targetID == "newTab") {
        createTab();
    } else if (targetID == "newWin") {
        createWin();
    } else if (targetID == "hideAllBttn") {
        showHideTabsAction(0)
    } else if (targetID == "showAllBttn") {
        showHideTabsAction(1);
    } else if (targetID == "searchMode") {
        setSearchModeAction(target, targetID, parentElm, id);
    }
});

function closeBttnAction(target, targetID) {
    let parentElm = target.parentElement;

    if (target == oldElm) {
        var index = Array.from(parentElm.children).indexOf(target);
        (index - 1 < 0) ? index++ :  index-- ;  // Check what index to chose
        var newElm = parentElm.children[index];

        id = parseInt(newElm.getAttribute("tabID"));
        browser.tabs.update(id, { active: true });
        setOldElm(newElm);
    }

    id = parseInt(target.getAttribute("tabID"));
    browser.tabs.remove(id);
    parentElm.removeChild(target);
    hoverTarget = undefined;
    document.getElementById("tabControls").style.display = "none";
}

function setNewTabAction(target, targetID, parentElm, id) {
    id = parseInt(target.getAttribute("tabID"));
    tabsAction.get(id).then((tab) => {
        browser.windows.update(tab.windowId, {focused: true});
        browser.tabs.update(id, { active: true });
    },id);
    setOldElm(target);
    document.getElementById("tabControls").querySelector("#hideTgglBttn").src = "../icons/eyeOpen.png";
}

function popoutSelectedTabAction(target, targetID) {
    parentElm = target.parentElement;
    id        = parseInt(target.getAttribute("tabID"));
    popoutSelectedTab(id);
}

function duplicateTabAction(target, targetID) {
    parentElm = target.parentElement;
    id        = parseInt(target.getAttribute("tabID"));
    duplicateTab(id);
}

function hideSelectedTabAction(target, targetID) {
    parentElm = target.parentElement;
    id        = parseInt(target.getAttribute("tabID"));
    control   = document.getElementById("tabControls").querySelector("#hideTgglBttn");

    if (id != oldElm.getAttribute("tabID")) {
        if (control.src.includes("eyeClosed.png")) {
            target.setAttribute("class", "block");
            control.src  = "../icons/eyeOpen.png";
            // In generateview
            unhideSelectedTab(id);
        } else {
            target.setAttribute("class", "block hiddenBGColor");
            control.src  = "../icons/eyeClosed.png";
            hideSelectedTab(id);
        }
    }
}

function muteSelectedTabAction(target, targetID) {
    parentElm = target.parentElement;
    id        = parseInt(target.getAttribute("tabID"));
    control   = document.getElementById("tabControls").querySelector("#muteTgglBttn");

    if (control.src.includes("isMuted.png")) {
        control.src  = "../icons/isNotMuted.png";
        // In generateview
        unmuteSelectedTab(id);
    } else {
        control.src  = "../icons/isMuted.png";
        muteSelectedTab(id);
    }
}


function setSearchModeAction(target, targetID, parentElm, id) {
    var currentMode = target.getAttribute("searchwindowsmode");
    if (currentMode == "true") {
        // In generateview
        setSearchMode(target, "curent window", "window", false);
    } else {
        setSearchMode(target, "all windows", "windows", true);
    }
    clearNodes(listZone);
}

function setOldElm(target) {
    oldElm.setAttribute("class", "block");
    oldElm = target;
    target.setAttribute("class", "block block-focused");
}

function scrollToView(time = 400) {
    setTimeout(function () {
        // Go to selected and 100px up
        oldElm.scrollIntoView();
        window.scrollBy(0, -100);
    }, time);
}