☰

Hide Discord sidebars

Give the chat more screen space

  1. // ==UserScript==
  2. // @name         Hide Discord sidebars
  3. // @namespace    https://github.com/Dragosarus/Userscripts/
  4. // @version      2.4
  5. // @description  Give the chat more screen space
  6. // @author       Dragosarus
  7. // @match        http://discord.com/*
  8. // @match        https://discord.com/*
  9. // @grant        GM_registerMenuCommand
  10. // @grant        GM_unregisterMenuCommand
  11. // @require      http://code.jquery.com/jquery-latest.js
  12. // ==/UserScript==
  13.  
  14. // NOTE: Does not work with Greasemonkey as it neither supports GM_registerMenuCommand nor GM_unregisterMenuCommand.
  15. // Use Tampermonkey or Violentmonkey instead.
  16.  
  17. (function() {
  18.     'use strict';
  19.     var hide = {
  20.         serverSidebar : true,
  21.         channelSidebar: true,
  22.         memberSidebar : true // note: there is a "Member List" button in the top-right corner
  23.     };
  24.  
  25.     // Can't use 'aria-label' to identify the Members List button as its value depends on your language settings,
  26.     // so (part of) the icon will have to be used instead
  27.     var memberIconPath = "M14 8.00598C14 10.211 12.206 12.006 10 12.006C7.795 12.006 6 10.211 6 8.00598C6 5.80098 7.794 4.00598 10 4.00598C12.206 4.00598 14 5.80098 14 8.00598ZM2 19.006C2 15.473 5.29 13.006 10 13.006C14.711 13.006 18 15.473 18 19.006V20.006H2V19.006Z";
  28.  
  29.     var serverSelector = "nav[class*='guilds']";
  30.     var channelSelector = "div[class*='sidebar']";
  31.     var memberSelector = "div[class*='membersWrap']";
  32.     var memberIconSelector = "div[class*='clickable']:has(svg > path[d='" + memberIconPath + "'])"
  33.     var baseSelector = "div[class*='base']"; // needed when hiding server sidebar
  34.  
  35.     var hideMenu = "Hide sidebars";
  36.     var showMenu = "Show sidebars";
  37.     var memberToggleMenu = "Toggle member sidebar"; // + " [current: (in)visible]"
  38.     var hideSidebarMenuShortcut = 's';
  39.  
  40.     var hideSidebarMenuId;
  41.     var memberToggleMenuId;
  42.     var baseOffset; // e.g. "72px"
  43.  
  44.     var sidebarsHidden = false;
  45.     var memberSidebarHidden; // from the "Member List" button
  46.     var selectors = {
  47.         serverSidebar: serverSelector,
  48.         channelSidebar: channelSelector,
  49.         memberSidebar: memberSelector
  50.     };
  51.  
  52.     init();
  53.  
  54.     function init() {
  55.         updateHideSidebarMenu();
  56.     }
  57.  
  58.     function onHideSidebarMenuClick() {
  59.         // Read state of "Member List" button
  60.         memberSidebarHidden = $(memberIconSelector).filter("div[class *= 'selected']").length == 0;
  61.  
  62.         // Toggle visibility of sidebars
  63.         for (var sidebar in selectors) {
  64.             // hideMemberSidebar = memberSidebarHidden || sidebarsHidden
  65.             if (sidebar == "memberSidebar" && memberSidebarHidden) {continue;}
  66.  
  67.             if (hide[sidebar]) {
  68.                 setSidebar(selectors[sidebar], sidebarsHidden);
  69.             }
  70.         }
  71.  
  72.         // Extra work is needed to properly hide the server sidebar
  73.         if (hide.serverSidebar) {
  74.             var base = $(baseSelector);
  75.             if (sidebarsHidden) {
  76.                 base.css("left", baseOffset);
  77.             } else {
  78.                 baseOffset = base[0].style.left;
  79.                 base.css("left", "0px");
  80.             }
  81.         }
  82.         sidebarsHidden ^= true;
  83.  
  84.         // Update menu
  85.         updateHideSidebarMenu();
  86.     }
  87.  
  88.     function updateHideSidebarMenu() {
  89.         GM_unregisterMenuCommand(hideSidebarMenuId);
  90.         var menu = sidebarsHidden ? showMenu : hideMenu;
  91.         hideSidebarMenuId = GM_registerMenuCommand(menu, onHideSidebarMenuClick, hideSidebarMenuShortcut);
  92.     }
  93.  
  94.     function setSidebar(selector, boolValue) {
  95.         if (boolValue) {
  96.             showSidebar(selector);
  97.         } else {
  98.             hideSidebar(selector);
  99.         }
  100.     }
  101.  
  102.     function hideSidebar(selector) {
  103.         var node = $(selector)[0];
  104.         node.style.display = "none";
  105.     }
  106.  
  107.     function showSidebar(selector) {
  108.         var node = $(selector)[0];
  109.         node.style.removeProperty("display");
  110.     }
  111.  
  112. })();
  113. /*eslint-env jquery*/ // stop eslint from showing "'$' is not defined" warnings