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