wikipedia

wikipedia.user.js

// ==UserScript==
// @name         wikipedia
// @namespace    http://tampermonkey.net/
// @version      0.1
// @author       You
// @match        https://*.wikipedia.org/wiki/*
// @match        https://*.wikiquote.org/wiki/*
// @match        https://*.wiktionary.org/wiki/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function undo() {
        removeClass(document.getElementsByTagName('body')[0], 'toggle');
        // document.querySelector(".post").style.fontFamily = '';
        // document.querySelector(".post-title").style.fontFamily = '';
        // document.querySelector(".date-header").style.fontFamily = '';

        toggle.src = showNavIcon;
    }

    function apply() {
        addClass(document.getElementsByTagName('body')[0], 'toggle');
        // document.querySelector(".post").style.fontFamily = 'Crimson Pro Light';
        // document.querySelector(".post-title").style.fontFamily = 'Crimson Pro Medium';
        // document.querySelector(".date-header").style.fontFamily = 'Crimson Pro ExtraLight';
        toggle.src = hideNavIcon;
    }

    var showing = false;
    var hideNavIcon = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnDQogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciDQogICB3aWR0aD0iMTAwJSINCiAgIGhlaWdodD0iMTAwJSINCiAgIHZpZXdCb3g9IjAgMCAyMDQ4IDE3OTIiPg0KICA8cGF0aA0KICAgICBkPSJNMCA4OTZxMC0xMzAgNTEtMjQ4LjV0MTM2LjUtMjA0IDIwNC0xMzYuNSAyNDguNS01MWg3NjhxMTMwIDAgMjQ4LjUgNTF0MjA0IDEzNi41IDEzNi41IDIwNCA1MSAyNDguNS01MSAyNDguNS0xMzYuNSAyMDQtMjA0IDEzNi41LTI0OC41IDUxaC03NjhxLTEzMCAwLTI0OC41LTUxdC0yMDQtMTM2LjUtMTM2LjUtMjA0LTUxLTI0OC41ek0xNDA4IDE0MDhxMTA0IDAgMTk4LjUtNDAuNXQxNjMuNS0xMDkuNSAxMDkuNS0xNjMuNSA0MC41LTE5OC41LTQwLjUtMTk4LjUtMTA5LjUtMTYzLjUtMTYzLjUtMTA5LjUtMTk4LjUtNDAuNS0xOTguNSA0MC41LTE2My41IDEwOS41LTEwOS41IDE2My41LTQwLjUgMTk4LjUgNDAuNSAxOTguNSAxMDkuNSAxNjMuNSAxNjMuNSAxMDkuNSAxOTguNSA0MC41eiINCiAgICAgaWQ9InBhdGgyIg0KICAgICBzdHlsZT0iZmlsbDojZmZhYTc1O2ZpbGwtb3BhY2l0eToxIiAvPg0KPC9zdmc+';
    var showNavIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAyMDQ4IDE3OTIiPjxwYXRoIGZpbGw9InJnYigxODksMTg5LDE4OSkiIGQ9Ik0xMTUyIDg5NnEwLTEwNC00MC41LTE5OC41dC0xMDkuNS0xNjMuNS0xNjMuNS0xMDkuNS0xOTguNS00MC41LTE5OC41IDQwLjUtMTYzLjUgMTA5LjUtMTA5LjUgMTYzLjUtNDAuNSAxOTguNSA0MC41IDE5OC41IDEwOS41IDE2My41IDE2My41IDEwOS41IDE5OC41IDQwLjUgMTk4LjUtNDAuNSAxNjMuNS0xMDkuNSAxMDkuNS0xNjMuNSA0MC41LTE5OC41ek0xOTIwIDg5NnEwLTEwNC00MC41LTE5OC41dC0xMDkuNS0xNjMuNS0xNjMuNS0xMDkuNS0xOTguNS00MC41aC0zODZxMTE5IDkwIDE4OC41IDIyNHQ2OS41IDI4OC02OS41IDI4OC0xODguNSAyMjRoMzg2cTEwNCAwIDE5OC41LTQwLjV0MTYzLjUtMTA5LjUgMTA5LjUtMTYzLjUgNDAuNS0xOTguNXpNMjA0OCA4OTZxMCAxMzAtNTEgMjQ4LjV0LTEzNi41IDIwNC0yMDQgMTM2LjUtMjQ4LjUgNTFoLTc2OHEtMTMwIDAtMjQ4LjUtNTF0LTIwNC0xMzYuNS0xMzYuNS0yMDQtNTEtMjQ4LjUgNTEtMjQ4LjUgMTM2LjUtMjA0IDIwNC0xMzYuNSAyNDguNS01MWg3NjhxMTMwIDAgMjQ4LjUgNTF0MjA0IDEzNi41IDEzNi41IDIwNCA1MSAyNDguNXoiLz48L3N2Zz4=';

    var toggle = document.createElement('img');
    toggle.src = hideNavIcon;
    toggle.style.position = 'fixed';
    toggle.style.bottom = "10px";
    toggle.style.right = "10px";
    toggle.style.width = "20px";
    toggle.style.height = "20px";
    toggle.style.cursor = "pointer";
    toggle.style.zIndex = "9999";

    toggle.addEventListener("click", function() {
        if (!showing) {
            apply();
        } else {
            undo();
        }
        showing = !showing;
    });

    document.getElementsByTagName('body')[0].appendChild(toggle);

    var newStyleToBeApplied = document.createElement('style');
    newStyleToBeApplied.type= 'text/css';
    newStyleToBeApplied.innerHTML = `
    .toggle #mw-page-base {
      display: none;
    }

    .toggle #mw-head-base {
      display: none;
    }

    .toggle #content {
      margin-left: 0;
    }

    .toggle #mw-navigation {
      display: none;
    }

    .toggle #footer {
      display: none;
    }

    .toggle, .toggle [id='bodyContent'] {
      margin: 0 auto!important;
      width: 1200px!important;
      font-family: "PT Serif"!important;
      line-height: 28px!important;
      font-size: 17px!important;
      letter-spacing: .5px!important;
      color: rgba(0,0,0,.95)!important;
    }

    .toggle .mw-body {
      padding: 20px 80px;
      border: 0px!important;
    }

    .toggle .mw-body, .toggle [id='bodyContent'] {
      width: 800px!important;
      margin: 0 auto!important;
    }

    .toggle .mw-body h1 {
      font-family: 'PT Sans', sans-serif;
      font-size: 2.5rem;
      font-weight: bold;
    }

    .toggle .mw-body-content h2 {
      font-family: 'PT Sans', sans-serif;
      font-size: 2rem;
      font-weight: bold;
    }

    .toggle .mwe-popups {
      font-size: 1.1rem;
      font-weight: 300;
    }

    .toggle p {
      margin: 20px 0;
    }
    `;
    document.getElementsByTagName('head')[0].appendChild(newStyleToBeApplied);

    // add heading font
    var headingFont = document.createElement('link');
    headingFont.href= 'https://fonts.googleapis.com/css?family=Titillium+Web:400,400i,600,600i,700,700i&display=swap';
    headingFont.rel= 'stylesheet';
    document.getElementsByTagName('head')[0].appendChild(headingFont);

    // add heading font
    var bodyFont = document.createElement('link');
    bodyFont.href= 'https://fonts.googleapis.com/css?family=Crimson+Pro:200,200i,300,300i,400,400i,500,500i,700,700i&display=swap&subset=latin-ext';
    bodyFont.rel= 'stylesheet';
    document.getElementsByTagName('head')[0].appendChild(bodyFont);

    apply();
    showing = !showing;

    function hasClass(el, className) {
        if (el.classList) {
            return el.classList.contains(className);
        } else {
            return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
        }
    }

    function addClass(el, className) {
        if (el.classList) {
            el.classList.add(className);
        }
        else if (!hasClass(el, className)) {
            el.className += " " + className;
        }
    }

    function removeClass(el, className) {
        if (el.classList) {
            el.classList.remove(className);
        } else if (hasClass(el, className)) {
            var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
            el.className=el.className.replace(reg, ' ');
        }
    }

    // lets focus on table of contents so that we can space it to close it when need be
    document.querySelector('.toctogglelabel').focus();
})();