TerminalHomepage/js/main.js

const pretext = "root@baipyr.us:~# ";

// Initiating variables
const length = pretext.length+1;
let startPosition = length;
let cursorPosition = 0;
let cursorYOffset = 7;
let history = {index: 0, list: []};

// Initiating constants
const tbDiv = document.getElementById("textbox");
const textIn = document.getElementById("input");
const textCur = document.getElementById("current");
const cursor = document.getElementById("cursor");
// Initial cursor offset
cursor.style.transform = `translate(${length-1}ch,${2.222*7-0.4}ch)`;

// Handle user input
textIn.oninput = () => {
    const text = textCur.textContent;
    // If cursor at end of text
    if (cursorPosition === text.length)
        textCur.textContent += textIn.value;
    else {
        // Insert input at cursor position
        const left = text.substring(0, cursorPosition);
        const right = text.substring(cursorPosition, text.length);
        textCur.textContent = left + textIn.value + right;
    }
    // Increment by input length
    cursorPosition += textIn.value.length;
    textIn.value = "";
    updateCursor();
};
textIn.focus();

// If no ranged selection was made, focus on input field
document.addEventListener("selectionchange", e => {
    if (e.target !== textIn) {
        const selection = window.getSelection();
        if (selection.type === "Caret")
            textIn.focus();
    }
});

document.addEventListener("keydown", e => {
    const text = textCur.textContent;
    switch (e.key) {
        case "Backspace":
            // Ein Zeichen nach links löschen
            if (cursorPosition === 0)
                return;
            if (cursorPosition <= textCur.textContent.length-1) {
                const a = text.substring(0, cursorPosition-1);
                const b = text.substring(cursorPosition, text.length);
                textCur.textContent=a+b;
            } else
                textCur.textContent = text.substring(0,text.length-1);
            cursorPosition--;
            updateCursor();
            break;
        case "ArrowLeft":
            // Ein Zeichen nach links
            if (cursorPosition > 0) {
                cursorPosition--;
                updateCursor();
            }
            break;
        case "ArrowRight":
            // Ein Zeichen nach reckts
            if (cursorPosition < textCur.textContent.length) {
                cursorPosition++;
                updateCursor();
            }
            break;
        case "Delete":
            // Ein Zeichen nach rechts löschen
            if (cursorPosition >= textCur.textContent.length)
                return;
            if (cursorPosition === 0 && textCur.textContent.length === 0)
                return;
            const a = text.substring(0, cursorPosition);
            const b = text.substring(cursorPosition+1, text.length);
            textCur.textContent=a+b;
            break;
        case "Enter":
            // Befehl absenden / Zeilenumbruch
            tbDiv.removeChild(textIn);
            tbDiv.removeChild(textCur);

            const inputSet = new Set(text.split(''));
            if (text !== "" || inputSet.has(" ") && inputSet.size === 1) {
                history.list.push(text);
                history.index = history.list.length;
                console.log(history);
            }

            // Fix current input to page
            tbDiv.appendChild(createText(text));
            tbDiv.innerHTML += `<br>`;

            // Run command and return output
            let commandOutput = runCommand(text);
            if (commandOutput !== "") {
                // If output is given, display it as text with formatting
                tbDiv.append(createText(commandOutput, false))
                tbDiv.innerHTML += `<br>`;
                // Offset cursor by at least one line, and as many more as there are line breaks
                cursorYOffset += commandOutput.split("<br>").length;
            }
            // Add new pretext to terminal
            tbDiv.innerHTML += pretext;
            // Add elements on top of div
            tbDiv.appendChild(textCur);
            tbDiv.appendChild(textIn);
            // Reset variables
            textCur.textContent = "";
            cursorPosition = 0;
            cursorYOffset++;
            updateCursor();
            break;
        case "ArrowUp":
            // Einen Befehl zurück in der History
            if (history.index > 0) {
                history.index--;
                textCur.textContent = history.list[history.index];
                cursorPosition = textCur.textContent.length;
            }
            updateCursor();
            break;
        case "ArrowDown":
            // Einen Befehl nach vorne in der History
            if (history.index < history.list.length-1) {
                history.index++;
                textCur.textContent = history.list[history.index];
                cursorPosition = textCur.textContent.length;
            } else {
                history.index++;
                textCur.textContent = "";
                cursorPosition = 0;
            }
            updateCursor();
            break;
        case "Tab":
            // Autocomplete
            break;
    }
});

// Create an 'a' element with input string as its contents
function createText(str, safe=true) {
    const link = document.createElement("a");
    link.style.color = "lightgrey";
    // No "HTML injection"
    if (safe)
        link.textContent = str;
    // "Anything goes" and keep formatting
    else {
        link.style.whiteSpace = "pre";
        link.innerHTML = str;
    }
    return link;
}

// Run input as command if possible
function runCommand(input) {
    let output = "";

    // Go through properties of window
    for (const func in window) {
        const splits = func.split("cmd_");
        // If property is prefixed with 'cmd_' (a 'command', so an executable function)
        if (splits.length === 2) {
            const name = splits[1];
            // If command is called without parameters
            if (input.toLowerCase() === name.toLowerCase()) {
                output = window[func]();
                break;
            // If command is called with parameters
            } else if (input.startsWith(name + " ")) {
                // Parameters always follow the command name after first space
                const params = input.split(" ").filter((e,i)=>i!==0);
                output = window[func](params);
                break;
            }
        }
    }

    // Return command output
    return output;
}

// Update cursor position based on coordinates
function updateCursor() {
    let cursor = document.getElementById("cursor");
    cursor.style.transform = `translate(${startPosition+cursorPosition-1}ch, ${2.222*cursorYOffset-0.4}ch)`;
}

// Toggle cursor visibility
setInterval(()=>{
    cursor.style.opacity = !parseInt(cursor.style.opacity)+0;
},1000);