fw_accesskeys_beta.js

// ==UserScript==
// @name         Accesskeys ftw beta
// @version      1.3
// @description  Accesskeyoverhaul
// @author       Flummi
// @namespace    Flummi
// @match        http*://*.freewar.de/freewar/internal/*.php*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    let options = {
        akey: sessionStorage.getItem("opt_akey") || "altKey",
        asect: sessionStorage.getItem("opt_asect") || "Digit" // Digit/Numpad
    };

    const saveStorage = () => Object.keys(options).forEach(e => sessionStorage.setItem(`opt_${e}`, options[e]));

    if(["frset.php", "friset.php"].includes(document.location.pathname.split(/\//).pop())) {
        console.log(options);

        let infodiv = document.createElement("div");
        infodiv.setAttribute("id", "info");
        infodiv.setAttribute("style", "display: block; z-index: 9999; position:absolute; top: 0; left: 0");
        infodiv.innerText = `Accesskey: ${options.akey} | Section: ${options.asect} (Options: ${options.akey} + 0 on ${options.asect})`;

        let optdiv = document.createElement("div");
        optdiv.setAttribute("id", "options");
        optdiv.setAttribute("style", "display: none; z-index: 9999; height: 300px; width: 300px; border: 2px solid #000; background-color: #fff; position:absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0");
        let head = document.createElement("h2");
        head.innerHTML = "Optionen";

        // <opt_akey>
        let label = [
            document.createElement("label"),
            document.createElement("label"),
            document.createElement("label"),
            document.createElement("label")
        ];
        label[0].setAttribute("for", "opt_akey_none");
        label[1].setAttribute("for", "opt_akey_alt");
        label[2].setAttribute("for", "opt_akey_shift");
        label[3].setAttribute("for", "opt_akey_ctrl");
        label[0].innerHTML = "none";
        label[1].innerHTML = "altKey";
        label[2].innerHTML = "shiftKey";
        label[3].innerHTML = "ctrlKey";

        let opts = [
            document.createElement("input"),
            document.createElement("input"),
            document.createElement("input"),
            document.createElement("input")
        ];
        opts[0].setAttribute("id", "opt_akey_none");
        opts[0].setAttribute("name", "opt_akey");
        opts[0].setAttribute("value", "none");
        opts[0].setAttribute("type", "radio");
        opts[1].setAttribute("id", "opt_akey_alt");
        opts[1].setAttribute("name", "opt_akey");
        opts[1].setAttribute("value", "altKey");
        opts[1].setAttribute("type", "radio");
        opts[2].setAttribute("id", "opt_akey_shift");
        opts[2].setAttribute("name", "opt_akey");
        opts[2].setAttribute("value", "shiftKey");
        opts[2].setAttribute("type", "radio");
        opts[3].setAttribute("id", "opt_akey_ctrl");
        opts[3].setAttribute("name", "opt_akey");
        opts[3].setAttribute("value", "ctrlKey");
        opts[3].setAttribute("type", "radio");

        let buttons = [
            document.createElement("button"),
            document.createElement("button")
        ];
        buttons[0].setAttribute("id", "opt_submitbutton");
        buttons[0].innerHTML = "speichern";
        buttons[1].setAttribute("id", "opt_closebutton");
        buttons[1].innerHTML = "schließen";

        optdiv.appendChild(head);

        let fset = document.createElement("fieldset");
        let flegend = document.createElement("legend");
        flegend.innerHTML = "Accesskey:";
        fset.appendChild(flegend);
        for(let i = 0; i < label.length; i++) {
            if(options.akey === opts[i].value)
                opts[i].setAttribute("checked", "checked");
            fset.appendChild(opts[i]);
            fset.appendChild(label[i]);
            fset.appendChild(document.createElement("br"));
        }
        optdiv.appendChild(fset);
        // </opt_akey>

        // <opt_asect>
        label = [
            document.createElement("label"),
            document.createElement("label")
        ];
        label[0].setAttribute("for", "opt_asect_digit");
        label[0].innerHTML = "Digits";
        label[1].setAttribute("for", "opt_asect_numpad");
        label[1].innerHTML = "Numpad";

        opts = [
            document.createElement("input"),
            document.createElement("input")
        ];
        opts[0].setAttribute("id", "opt_asect_digit");
        opts[0].setAttribute("name", "opt_asect");
        opts[0].setAttribute("value", "Digit");
        opts[0].setAttribute("type", "radio");
        opts[1].setAttribute("id", "opt_asect_numpad");
        opts[1].setAttribute("name", "opt_asect");
        opts[1].setAttribute("value", "Numpad");
        opts[1].setAttribute("type", "radio");

        fset = document.createElement("fieldset");
        flegend = document.createElement("legend");
        flegend.innerHTML = "Section:";
        fset.appendChild(flegend);

        for(let i = 0; i < label.length; i++) {
            if(options.asect === opts[i].value)
                opts[i].setAttribute("checked", "checked");
            fset.appendChild(opts[i]);
            fset.appendChild(label[i]);
            fset.appendChild(document.createElement("br"));
        }
        optdiv.appendChild(fset);
        // </opt_asect>

        optdiv.appendChild(document.createElement("br"));
        for(let i = 0; i < buttons.length; i++) { // insert Buttons
            optdiv.appendChild(buttons[i]);
        }

        // die ganze Rotze einfügen
        document.body.parentNode.appendChild(infodiv);
        document.body.parentNode.appendChild(optdiv);

        // eventlistener für buttons
        document.querySelector("button#opt_submitbutton").addEventListener("click", e => {
            let items = {
                akey: document.querySelector("input[name='opt_akey']:checked").value,
                asect: document.querySelector("input[name='opt_asect']:checked").value
            };
            options.akey = items.akey;
            options.asect = items.asect;
            saveStorage();

            parent.location.reload();
        });

        document.querySelector("button#opt_closebutton").addEventListener("click", e => {
            document.querySelector("div#options").style.display = "none";
        });

    }

    window.addEventListener("keydown", e => {
        if((options.akey !== "none" && !e[options.akey]) || (options.akey === "none" && (e.altKey || e.shiftKey || e.ctrlKey)))
            return false;
        if(document.querySelectorAll(":focus").length !== 0)
            return false;
        if(!e.code.includes(options.asect))
            return false;

        const key = e.code.replace(/^(Digit|Numpad)/, "");
        if(key >= 1 && key <= 9) {
            parent.itemFrame.document.querySelector(`a#accessfast${key}`).click();
            parent.itemFrame.focus();
            e.preventDefault();
        }
        else if(key == 0) { // toggle options
            let optdiv = parent.document.querySelector("div#options");
            optdiv.style.display = optdiv.style.display === "block" ? "none" : "block";
        }
    });
})();