Homestuck Pesterlog Simulator.user.js

// ==UserScript==
// @name         Homestuck Pesterlog Simulatior
// @namespace    http://tampermonkey.net/
// @version      2.0
// @description  Simulates the scrolling pesterlog.
// @author       Cal Kalum
// @match        https://www.homestuck.com/story/*
// @grant        none
// ==/UserScript==

let editingMode = false;
let currentlyEditing = false;
let currentNode = undefined;
let ePressedInsideInput = false;
let spans = [];
let editingColor = "#ff6464";

(function() {
    'use strict';
    let pElements = document.getElementsByTagName('p');
    console.log(pElements);
    for(let i = 0; i < pElements.length; i++){
        let spancheck = pElements[i].children;
        for(let j = 0; j < spancheck.length; j++){
            console.log(spancheck[j]);
            if(spancheck[j].tagName === "SPAN"){
                spans.push(spancheck[j]);
                spancheck[j].style.transition = "0.3s";
                spancheck[j].onclick = function(){edit(this)};
            }
        }
    }
    // Your code here...
    let spanIndex = 0;
    document.addEventListener("keyup", function (e) {
        if(e.key ==='a' && !editingMode){
            spans[spanIndex].style.opacity = 1;
            spanIndex++;
        };
        if(e.key ==='e'){
            if(editingMode && currentlyEditing){
                if(!ePressedInsideInput){
                    if(confirm("You have unsaved changes. Are you sure you want to exit editing mode anyway?")){
                        currentlyEditing = false;
                        editingMode = !editingMode;
                        stopEdit(currentNode, false);
                        document.getElementsByClassName("pos-r")[0].style.backgroundColor = [editingColor, editingColor=document.getElementsByClassName("pos-r")[0].style.backgroundColor][0];
                    }
                }
            } else {
                currentlyEditing = false;
                editingMode = !editingMode;
                runOnSpans(function(spanIn){spanIn.style.opacity = 1;});
                document.getElementsByClassName("pos-r")[0].style.backgroundColor = [editingColor, editingColor=document.getElementsByClassName("pos-r")[0].style.backgroundColor][0];
            }
            ePressedInsideInput = false;
        }
        if(e.key ==='r' && !editingMode){
            runOnSpans(function(spanIn){spanIn.style.opacity = 0;});
            spanIndex = 0;
        };
    });
})();

function edit (elementIn) {
    console.log("test");
    if(!currentlyEditing && editingMode){
        elementIn.style.display = "none";
        currentlyEditing = true;
        let inputBox = document.createElement("input");
        inputBox.value = elementIn.innerHTML;
        inputBox.style.color = elementIn.style.color;
        inputBox.style.width = "100%";
        inputBox.addEventListener("keydown", function(event) {
            if (event.key === "Enter") {
                stopEdit(this, true);
            }
            if (event.key === "e") {
                ePressedInsideInput = true;
            }
        });
        console.log(elementIn.parentNode.offsetWidth);
        elementIn.parentNode.insertBefore(inputBox, elementIn);
        currentNode = elementIn.previousSibling;
        console.log(inputBox);
    }
}

function stopEdit (elementIn, save) {
    currentlyEditing = false;
    elementIn.nextSibling.style.display = "inline";
    if(save){elementIn.nextSibling.innerHTML = elementIn.value;}
    elementIn.parentNode.removeChild(elementIn);
}

function runOnSpans (functionToRun) {
    for(let i = 0; i < spans.length; i++){
        functionToRun(spans[i]);
    }
}