toggle-microsoft-docs-sidebars.js

// ==UserScript==
// @name         Toggle Microsoft Docs Sidebars
// @namespace    MSDN Sidebar
// @version      0.1
// @description  Enhance readability of Microsoft Docs via hiding the sidebars.
// @author       Winston (winny) Weinert https://winny.tech/
// @include      https://docs.microsoft.com/*
// @grant        none
// ==/UserScript==

(function() {
  'use strict';
  const leftContainer = document.getElementById('left-container');
  const [rightContainer] = document.getElementsByClassName('right-container');
  const [primaryHolder] = document.getElementsByClassName('primary-holder');
  const mainColumn = document.getElementById('main-column');
  const [body] = document.getElementsByTagName('body');
  const [head] = document.getElementsByTagName('head');
  const [mainContainer] = document.getElementsByClassName('mainContainer'); // Yes it uses a different naming convention than everything else.
  const toggleParent = mainContainer || body;
  if (leftContainer === null || primaryHolder === null || mainColumn == null) {
    console.log(`leftContainer:${leftContainer} primaryHolder:${primaryHolder} mainColumn:${mainColumn} something is null, bailing out.`);
    return;
  }
  function toggleSidebars() {
    if (leftContainer.style.display === 'none') {
      leftContainer.style.display = null;
      primaryHolder.style.width = null;
      mainColumn.style.width = null;
      if (rightContainer !== null) {
        rightContainer.style.display = null;
      }
    } else {
      leftContainer.style.display = 'none';
      primaryHolder.style.width = '100%';
      mainColumn.style.width = '100%';
      if (rightContainer !== null) {
        rightContainer.style.display = 'none';
      }
    }
  }
  /* Add a stylesheet. */
  const css = `
.toggle-sidebar {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;

  opacity: .30;
  padding: .2em;
  background: darkgray;

  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.toggle-sidebar:hover {
  opacity: 1;
}
`;
  const style = document.createElement('style');
  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
  head.appendChild(style);

  /* Add the clickable toggle. */
  const toggleElement = document.createElement('div');
  toggleElement.classList.add('toggle-sidebar');
  const a = document.createElement('a');
  a.addEventListener('click', toggleSidebars);
  a.innerText = 'Toggle sidebar';
  toggleElement.appendChild(a);
  toggleParent.appendChild(toggleElement);

  /* Add the Control-' binding. */
  body.addEventListener('keydown', (e) => {
    // Check modifiers.
    if (!e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return;
    // Check the key itself.
    if (e.key !== "'") return;

    toggleSidebars();
  });
})();