hide_gh_issues_script.js

// ==UserScript==
// @name         Hide github issues
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Hide checked github issues
// @author       Jacopo Beschi
// @match        https://github.com/*issues*
// @grant        none
// ==/UserScript==

(function() {
    const extensionName = "hide_gh_issues";
    const header = document.querySelector("div.js-header-wrapper");

    //---------- ENABLE/DISABLE feature
    const enabledField = `${extensionName}.enabled`;
    function isEnabled() {
        return localStorage.getItem(enabledField) === "true";
    }

    function enableBtnText() {
        return `${isEnabled() ? 'Disable' : 'Enable' } issues hide`;
    }

    let toggleBtn = document.createElement("button");
    function toggleEnabled(element) {
        localStorage.setItem(enabledField, !isEnabled());
        toggleBtn.innerHTML = enableBtnText();
        updateVisibility();
    }

    //---------- HIDE/SHOW Issue
    const issueStateField = `${extensionName}.issueState`;
    function issueState() {
        return JSON.parse(localStorage.getItem(issueStateField) || "{}");
    }

    function saveIssueState(state) {
        if (state) {
            localStorage.setItem(issueStateField, JSON.stringify(state));
        } else {
            localStorage.removeItem(issueStateField);
        }
    }

    function toggleIssueEnabled(event) {
        const el = event.currentTarget;
        const id = el.getAttribute("data-id");
        let state = issueState();

        state[id] = el.checked;
        toggleVisibility(id, state[id]);
        saveIssueState(state);
    }

    function toggleVisibility(id, show) {
        let el = document.getElementById(`issue_${id}`);
        if (!el) return;

        if (!show && isEnabled()) {
            el.style.display = "none";
        } else {
            el.style.display = "block";
        }
    }

    function loadChecked(el, id) {
        el.checked = issueState()[id] !== false;
    }

    function resetState() {
        if (window.confirm("Are you sure?")) {
            saveIssueState(false);
            location.reload();
        }
    }

    function init(triggered = false) {
        if (!triggered) {
            // enable/disable BTN
            toggleBtn.innerHTML = enableBtnText();
            toggleBtn.classList.add("btn", "btn-primary")
            toggleBtn.style.position = "relative";
            toggleBtn.style.margin = "8px";
            toggleBtn.addEventListener("click", toggleEnabled);
            header.appendChild(toggleBtn);

            // reset BTN
            let resetBtn = document.createElement("button");
            resetBtn.innerHTML = "Reset";
            resetBtn.classList.add("btn", "btn-danger")
            resetBtn.style.position = "relative";
            resetBtn.style.margin = "8px";
            resetBtn.addEventListener("click", resetState);
            header.appendChild(resetBtn);

            let currentPage = location.href;
            // hack to check on page change
            setInterval(function() {
                if (currentPage != location.href) {
                    currentPage = location.href;
                    setTimeout(function() {
                        init(true)}, 1000);
                }}, 500);
        }

        // issue Checkbox
        const issueRows = Array.prototype.forEach.call(document.querySelectorAll('.js-issue-row'), function(el) {
            let toggleIssue = document.createElement("INPUT");
            toggleIssue.setAttribute("type", "checkbox");
            toggleIssue.style.position = "relative";
            toggleIssue.style.left = "16px";
            const issueId = el.getAttribute("id").split("_")[1];
            toggleIssue.setAttribute("data-id", issueId);
            loadChecked(toggleIssue, issueId);
            toggleIssue.addEventListener("click", toggleIssueEnabled);
            el.appendChild(toggleIssue);
        });
        updateVisibility();
    }

    function updateVisibility() {
        let state = issueState();
        for (const id in state) {
            toggleVisibility(id, state[id]);
        }
    }

    init();
})();