Skip to content

Instantly share code, notes, and snippets.

@winny-

winny-/mediawiki-sidebar-toggle.user.js

Last active September 22, 2020 18:36
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save winny-/876206e328fda0f7f6d074aee7ef1d52 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save winny-/876206e328fda0f7f6d074aee7ef1d52 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. winny- renamed this gist Sep 22, 2020. 1 changed file with 0 additions and 0 deletions.
    0 mediawiki-sidebar-toggle.js → mediawiki-sidebar-toggle.user.js
    View file
    File renamed without changes.
  2. winny- created this gist Sep 22, 2020.
    105 changes: 105 additions & 0 deletions mediawiki-sidebar-toggle.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,105 @@
    // ==UserScript==
    // @name MediaWiki Sidebar Toggle
    // @description Toggle the Mediawiki Side Bar with Control-Apostrophe
    // @version 1.0
    // @minGMVer 1.14
    // @minFFVer 26
    // @namespace Mediawiki-Sidebar-Toggle
    // @license MIT; https://unlicense.org/
    // @include http://*.wikipedia.org/*
    // @include https://*.wikipedia.org/*
    // @include https://wiki.alpinelinux.org/*
    // @include https://wiki.archlinux.org/*
    // @include http://nethackwiki.com/*
    // @include https://nethackwiki.com/*
    // @include https://wiki.greasespot.net/*
    // @include https://wiki.roll20.net/*
    // ==/UserScript==

    /*
    * Example of this script in action:
    * https://u.winny.tech/pub/mediawiki-sidebar-toggle.webm
    */

    /* jshint esversion: 6 */


    (function() {
    'use strict';
    const panel = document.getElementById('mw-panel') ||
    document.getElementById('sidebar') ||
    document.getElementById('wiki-tools'); // wiki.roll20.net
    const content = document.getElementById('content') ||
    document.getElementById('main-content'); // wiki.roll20.net
    const [body] = document.getElementsByTagName('body');
    const [head] = document.getElementsByTagName('head');
    const toggleParent = document.getElementById('mw-head') || body;
    if (panel == null || content == null || head === null || body == null) {
    console.log(`mediawiki-hide-bar.js: panel:${panel} content:${content} body:${body} head:${head} something is null, returning.`);
    return;
    }

    /* The sidebar toggle function. */
    function toggleSidebar() {
    if (panel.style.display !== 'none') {
    panel.style.display = 'none';
    content.style.marginLeft = '0';
    content.style.borderLeftWidth = '0';
    } else {
    panel.style.display = null;
    content.style.marginLeft = null;
    content.style.borderLeftWidth = null;
    }
    }

    /* 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', toggleSidebar);
    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;

    toggleSidebar();
    });
    })();