☰

GrimTool Map Full Page

Adds a button on map toolbar to expand the map to full page.

// ==UserScript==
// @name         GrimTool Map Full Page
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Adds a button on map toolbar to expand the map to full page.
// @author       Anthony Jiang
// @match        https://www.grimtools.com/map/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=grimtools.com
// @grant        none
// @license      MIT
// ==/UserScript==

function setFullPage() {
    document.getElementsByClassName('nav-menu-container')[0].setAttribute('style','visibility:hidden');
    document.getElementsByClassName('main-container web')[0].setAttribute('style','margin: 0; top: 0;');
}

function revert() {
    document.getElementsByClassName('nav-menu-container')[0].setAttribute('style','');
    document.getElementsByClassName('main-container web')[0].setAttribute('style','');
}

function setPage() {
    var btn = document.getElementById('btn-fullpage');
    if (btn.getAttribute('title') == 'Set Full Page')
    {
        setFullPage();
        btn.setAttribute('title', 'Revert');
        useRevertSVG();
    }
    else
    {
        revert();
        btn.setAttribute('title', 'Set Full Page');
        useSetFullSVG();
    }
}

function addButton() {
    var button_text = '<a id="btn-fullpage" class="btn fullpage" title="Set Full Page">';
    var nav_bar = document.getElementsByClassName('buttons nav')[0].innerHTML += button_text;
    document.getElementById('btn-fullpage').addEventListener('click', setPage);
    useSetFullSVG();
}

function useSetFullSVG() {
    var btn = document.getElementById('btn-fullpage');
    btn.innerHTML = '<svg height="100%" version="1.1" viewBox="5 5 28 28" width="100%" style="fill: #8c8c82;"><g class="ytp-fullscreen-button-corner-0"><use class="ytp-svg-shadow" xlink:href="#ytp-id-6"></use><path class="ytp-svg-fill" d="m 10,16 2,0 0,-4 4,0 0,-2 L 10,10 l 0,6 0,0 z" id="ytp-id-6"></path></g><g class="ytp-fullscreen-button-corner-1"><use class="ytp-svg-shadow" xlink:href="#ytp-id-7"></use><path class="ytp-svg-fill" d="m 20,10 0,2 4,0 0,4 2,0 L 26,10 l -6,0 0,0 z" id="ytp-id-7"></path></g><g class="ytp-fullscreen-button-corner-2"><use class="ytp-svg-shadow" xlink:href="#ytp-id-8"></use><path class="ytp-svg-fill" d="m 24,24 -4,0 0,2 L 26,26 l 0,-6 -2,0 0,4 0,0 z" id="ytp-id-8"></path></g><g class="ytp-fullscreen-button-corner-3"><use class="ytp-svg-shadow" xlink:href="#ytp-id-9"></use><path class="ytp-svg-fill" d="M 12,20 10,20 10,26 l 6,0 0,-2 -4,0 0,-4 0,0 z" id="ytp-id-9"></path></g></svg></a>';
}

function useRevertSVG() {
    var btn = document.getElementById('btn-fullpage');
    btn.innerHTML = '<svg height="100%" version="1.1" viewBox="5 5 28 28" width="100%" style="fill: #8c8c82;"><g class="ytp-fullscreen-button-corner-2"><use class="ytp-svg-shadow" xlink:href="#ytp-id-50"></use><path class="ytp-svg-fill" d="m 14,14 -4,0 0,2 6,0 0,-6 -2,0 0,4 0,0 z" id="ytp-id-50"></path></g><g class="ytp-fullscreen-button-corner-3"><use class="ytp-svg-shadow" xlink:href="#ytp-id-51"></use><path class="ytp-svg-fill" d="m 22,14 0,-4 -2,0 0,6 6,0 0,-2 -4,0 0,0 z" id="ytp-id-51"></path></g><g class="ytp-fullscreen-button-corner-0"><use class="ytp-svg-shadow" xlink:href="#ytp-id-52"></use><path class="ytp-svg-fill" d="m 20,26 2,0 0,-4 4,0 0,-2 -6,0 0,6 0,0 z" id="ytp-id-52"></path></g><g class="ytp-fullscreen-button-corner-1"><use class="ytp-svg-shadow" xlink:href="#ytp-id-53"></use><path class="ytp-svg-fill" d="m 10,22 4,0 0,4 2,0 0,-6 -6,0 0,2 0,0 z" id="ytp-id-53"></path></g></svg>';
}

(function() {
    'use strict';
    addButton();
    // Your code here...
})();