Wikipedia layout improvement userscript

tampermonkey-wikipedia-userscript.js

// ==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";
    });
})();