User:J6d012b29/hide sidebar on page shrink.js

/*This was originally written as a greasemonkey-style userscript*/

// ==UserScript== // @name       Wikipedia hide sidebar on page shrink // @namespace  Violentmonkey Scripts // @match      https://en.wikipedia.org/wiki/* // @grant      none // @version    0.3 // @author     - // @description 4/16/2021, 3:50:29 PM // @icon       https://wikipedia.org/favicon.ico // @run-at		 document-idle // ==/UserScript==

/*Aim: if I have wikipedia open in a shrunken window, hide the right-hand navigation bar - I never use it anyway! And, while its not an issue during full-screen usage, it *is* when the screen shrinks! */

/*Update 2022-02-16: This script really doesn't 'kick in' early enough. Having a static pixel count as the threshold probably isn't the best way to do this.*/ var pixel_threshold = 800;

//'experimentally determined'. The sidebar is of a fixed width. When makes up more than 1/ratio's width in the page, nuke it. var sidebar_article_width_ratio_threshold = 7.5;

var sidebar_width_when_shown = -1;

var sidebar_selector = "div#mw-panel"; /* Hiding: document.getElementById('mw-navigation').style.visibility = "hidden"; null document.getElementById('content').style.marginLeft = 0;; 0 Unhiding: Set both of the above to null - class-set-, or, element- defaults will take back over (margin-left is '10em' by defualt due to the stylesheet. Setting it for the element in particular will override this, unsetting it, will, well, undo that.) */

function main{ setupRemoveSidebarOnShrink; recordSidebarSize; //Keep/toss the sidebar based on width upon page load as well window.setTimeout(decideSideBarFollowingResize,500) }

function recordSidebarSize{ if(sidebar_width_when_shown == -1){ var sidebar_elem = document.querySelector(sidebar_selector); if(sidebar_elem != null){ sidebar_width_when_shown = sidebar_elem.clientWidth; }	} }

function setupRemoveSidebarOnShrink{ //Per https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event window.onresize=decideSideBarFollowingResize; }

function decideSideBarFollowingResize{ recordSidebarSize; var sidebar_ratio = window.innerWidth/sidebar_width_when_shown; console.log(`VM/wikipedia-hide-navbar: Window resized, new width=${window.innerWidth}; ratio=${sidebar_ratio}`) /*We don't need to know the existing state, can just run these naively */ if(window.innerWidth < 800 || sidebar_ratio < sidebar_article_width_ratio_threshold){ hideSideNavBar; }else{ showSideNavBar; } }

function hideSideNavBar{ //was getElementById('mw-navigation'), but, that ate the header as well - talk/history/edit links. sticking with QuerySelector, cos thats what I used up above. document.querySelector(sidebar_selector).style.visibility = "hidden"; document.getElementById('content').style.marginLeft = 0; }

function showSideNavBar{ document.querySelector(sidebar_selector).style.visibility = null; document.getElementById('content').style.marginLeft = null; }

main;