Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
greasemonkey userscript to toggle the side bars on Microsoft Docs
// ==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();
});
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment