☰

Greasy Fork is available in English.

Discord Toggle Channels List

Adds show/hide channels sidebar button to Discord Web App

// ==UserScript==
// @name         Discord Toggle Channels List
// @namespace    https://discordapp.com
// @version      1.12.1
// @description  Adds show/hide channels sidebar button to Discord Web App
// @author       Github mindovermiles262
// @match        https://discord.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Classes of DIVs you want to be able to toggle sidebar 
    const toggleButtons = [
        "children-3xh0VB",
        "toggleChannelsBtn"
    ];
    const columnToHide = "sidebar-1tnWFu"                       // Sidebar column that will be hidden
    const showHideSidebarButtonParentClass = "scroller-3X7KbA"; // Small sidebar with all your Discords
    const roomDivClass = "channelName-3KPsGw";                  // The class of the room names, used to autohide sidebar
    const unreadClass = "unread-36eUEm";                        // Unread messages are assigned a class, used in chevron colorization
    const channelsWidth = "240px";

    function sleep(ms) {
        // Sets timeout for inital page elements to load
        return new Promise(resolve => setTimeout(resolve, ms));
    }

    async function pageload() {
        // Wait 5 seconds for page to load
        await sleep(5000);
        main()
    }

    const toggleVisibility = function() {
        // Changes the width of the rooms sidebar
        let sidebar = document.getElementsByClassName(columnToHide)[0];
        if (sidebar.style.width == "1px") {
            sidebar.style.width = channelsWidth;
        } else {
            sidebar.style.width = "1px";
        }
    }

    let cheveronDirection = function() {
        const sidebar = document.getElementsByClassName(columnToHide)[0]
        const btn = document.getElementById("dtcb-cheverons")
        if (sidebar.style.width == "1px") {
            btn.innerText = ">>";
        } else {
            btn.innerText = "<<";
        }
    }

    const createSidebarButton = function() {
        let btnDiv = document.createElement("div")
        btnDiv.setAttribute("class", "toggleChannelsBtn")
        btnDiv.setAttribute("id", "toggleChannelsBtn")
        btnDiv.style.width = "70px"
        btnDiv.style.textAlign = "center"
        btnDiv.style.color = "#43b581" // Discord Green
        btnDiv.style.position = "absolute"
        btnDiv.style.bottom = "25px"
        let btn = document.createElement("p")
        btn.setAttribute("id", "dtcb-cheverons")
        btn.innerText = "<<"
        btn.style.margin = "0"
        btn.style.fontWeight = "bold"
        btn.style.fontSize = "200%"
        btnDiv.appendChild(btn)
        return btnDiv
    }

    const addListenersToToggleButtons = function() {
        toggleButtons.forEach(function(elem) {
            document.getElementsByClassName(elem)[0].addEventListener('click', function() {
                toggleVisibility();
                cheveronDirection();
            })
        });
    } 

    const autohideSidebar = function() {
      	// Auto-colapses sidebar when you click on a room
        const roomDivs = document.getElementsByClassName(roomDivClass)
        Array.from(roomDivs).forEach(function(room) {
            room.addEventListener('click', function() {
                toggleVisibility();
                cheveronDirection();
            })
        })
    }

    const colorizeButtonIfUnread = function() {
        const btn = document.getElementById("toggleChannelsBtn");
        const interval = setInterval(function() {
            const unreads = document.getElementsByClassName(unreadClass).length
            if (unreads > 0) {
                btn.style.color = "#f04747"; // Discord Red
            } else {
                btn.style.color = "#43b581"; // Discord Green
            }
        }, 1000)
    }

    const main = function() {
        console.log("[*] Loading Discord Toggle Channenels Bar Userscript");
        const newBtn = createSidebarButton()
        document.getElementsByClassName(showHideSidebarButtonParentClass)[0].appendChild(newBtn)
        addListenersToToggleButtons();
        autohideSidebar();
        colorizeButtonIfUnread();
    }

    pageload();
})();