Skip to content

Instantly share code, notes, and snippets.

@mast4461
Created November 29, 2021 14:48
Show Gist options
  • Save mast4461/54cb7632baac55832767c59d4c4d1710 to your computer and use it in GitHub Desktop.
Save mast4461/54cb7632baac55832767c59d4c4d1710 to your computer and use it in GitHub Desktop.
Wikipedia layout improvement userscript
// ==UserScript==
// @name Wikipedia re-layout
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Add a reasonable max width to Wikipedia page content, with a handlebar on the right for adjustments.
// @author You
// @match https://en.wikipedia.org/*
// @icon https://www.google.com/s2/favicons?domain=wikipedia.org
// @grant none
// ==/UserScript==
(function() {
'use strict';
const styleElement = document.createElement("style");
const minWidth = 200;
const defaultMaxWidth = 800;
styleElement.innerHTML = `
#content {
max-width: ${defaultMaxWidth}px;
margin: auto;
position: relative
}
#resizing-strip {
position: absolute;
height: calc(100% + 2px);
width: 6px;
border: 1px solid #ccc;
outline: 1px solid #ddd;
box-sizing: border-box;
right: -6px;
top: -1px;
cursor: ew-resize;
}
`;
document.head.appendChild(styleElement);
const contentElement = document.getElementById("content");
const resizingStripElement = document.createElement("div");
resizingStripElement.id = "resizing-strip";
resizingStripElement.setAttribute("draggable", "true");
contentElement.appendChild(resizingStripElement);
function clamp(x, a, b) {
return Math.max(a, Math.min(b, x));
};
let xDragStart;
let startWidth;
resizingStripElement.addEventListener("dragstart", (event) => {
startWidth = parseInt(contentElement.style.maxWidth) || defaultMaxWidth;
xDragStart = event.screenX;
});
resizingStripElement.addEventListener("drag", (event) => {
event.preventDefault();
// Multiply by two because it resizes both to the left and to the right, because margin auto
const width = startWidth + 2 * (event.screenX - xDragStart);
if (width <= 0) return;
contentElement.style.maxWidth = clamp(width, minWidth, document.body.clientWidth) + "px";
});
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment