2022-05-27 16:13:33 +00:00
|
|
|
const pretext = "root@baipyr.us:~# ";
|
|
|
|
let startPosition = 0;
|
|
|
|
let cursorPosition = 0;
|
2022-06-06 14:56:20 +00:00
|
|
|
let cursorYOffset = 0;
|
2022-05-27 16:13:33 +00:00
|
|
|
|
2023-01-05 23:13:56 +00:00
|
|
|
const tbDiv = document.getElementById("textbox");
|
|
|
|
tbDiv.innerHTML = pretext+tbDiv.innerHTML;
|
|
|
|
const length = tbDiv.innerText.length+1;
|
|
|
|
startPosition = length;
|
|
|
|
cursorPosition = length;
|
|
|
|
const textIn = document.getElementById("input");
|
2023-01-12 06:25:46 +00:00
|
|
|
const textCur = document.getElementById("current");
|
|
|
|
const cursor = document.getElementById("cursor");
|
|
|
|
cursor.style.transform = `translate(${length-1}ch)`;
|
2023-01-05 23:13:56 +00:00
|
|
|
|
2023-01-12 06:25:46 +00:00
|
|
|
textIn.oninput = () => {
|
|
|
|
textCur.textContent += textIn.value;
|
|
|
|
textIn.value = "";
|
2022-05-27 16:13:33 +00:00
|
|
|
cursorPosition++;
|
2023-01-12 06:25:46 +00:00
|
|
|
updateCursor();
|
2023-01-05 23:13:56 +00:00
|
|
|
};
|
2023-01-12 06:25:46 +00:00
|
|
|
textIn.focus();
|
2023-01-05 23:13:56 +00:00
|
|
|
|
|
|
|
document.addEventListener("selectionchange", e => {
|
2023-01-12 06:25:46 +00:00
|
|
|
if (e.target !== textIn) {
|
2023-01-05 23:13:56 +00:00
|
|
|
const selection = window.getSelection();
|
|
|
|
if (selection.type === "Caret")
|
2023-01-12 06:25:46 +00:00
|
|
|
textIn.focus();
|
2023-01-05 23:13:56 +00:00
|
|
|
}
|
2022-05-27 16:13:33 +00:00
|
|
|
});
|
|
|
|
|
2023-01-05 23:13:56 +00:00
|
|
|
document.addEventListener("keydown", e => {
|
2022-05-27 16:13:33 +00:00
|
|
|
const index = cursorPosition - startPosition;
|
2023-01-12 06:25:46 +00:00
|
|
|
const text = textCur.textContent;
|
2022-05-27 16:13:33 +00:00
|
|
|
switch (e.key) {
|
|
|
|
case "Backspace":
|
|
|
|
// Ein Zeichen nach links löschen
|
2023-01-05 23:13:56 +00:00
|
|
|
if (index === 0)
|
2022-05-27 16:13:33 +00:00
|
|
|
return;
|
2023-01-12 06:25:46 +00:00
|
|
|
if (index <= textCur.textContent.length-1) {
|
2022-05-27 16:13:33 +00:00
|
|
|
const a = text.substring(0, index-1);
|
|
|
|
const b = text.substring(index, text.length);
|
2023-01-12 06:25:46 +00:00
|
|
|
textCur.textContent=a+b;
|
2022-05-27 16:13:33 +00:00
|
|
|
} else
|
2023-01-12 06:25:46 +00:00
|
|
|
textCur.textContent = text.substring(0,text.length-1);
|
2022-05-27 16:13:33 +00:00
|
|
|
cursorPosition--;
|
2023-01-12 06:25:46 +00:00
|
|
|
updateCursor();
|
2022-05-27 16:13:33 +00:00
|
|
|
break;
|
|
|
|
case "ArrowLeft":
|
|
|
|
// Ein Zeichen nach links
|
2023-01-12 06:25:46 +00:00
|
|
|
if (cursorPosition > startPosition) {
|
2022-05-27 16:13:33 +00:00
|
|
|
cursorPosition--;
|
2023-01-12 06:25:46 +00:00
|
|
|
updateCursor();
|
|
|
|
}
|
2022-05-27 16:13:33 +00:00
|
|
|
break;
|
|
|
|
case "ArrowRight":
|
|
|
|
// Ein Zeichen nach reckts
|
2023-01-12 06:25:46 +00:00
|
|
|
if (index < textCur.textContent.length) {
|
2022-05-27 16:13:33 +00:00
|
|
|
cursorPosition++;
|
2023-01-12 06:25:46 +00:00
|
|
|
updateCursor();
|
|
|
|
}
|
2022-05-27 16:13:33 +00:00
|
|
|
break;
|
|
|
|
case "Delete":
|
|
|
|
// Ein Zeichen nach rechts löschen
|
2023-01-12 06:25:46 +00:00
|
|
|
if (index === 0 || index >= textCur.textContent.length)
|
2022-05-27 16:13:33 +00:00
|
|
|
return;
|
|
|
|
const a = text.substring(0, index);
|
|
|
|
const b = text.substring(index+1, text.length);
|
2023-01-12 06:25:46 +00:00
|
|
|
textCur.textContent=a+b;
|
2022-05-27 16:13:33 +00:00
|
|
|
break;
|
|
|
|
case "Enter":
|
|
|
|
// Befehl absenden / Zeilenumbruch
|
2023-01-12 06:25:46 +00:00
|
|
|
const textIn = document.getElementById("input");
|
2023-01-05 23:13:56 +00:00
|
|
|
tbDiv.removeChild(textIn);
|
2023-01-12 06:25:46 +00:00
|
|
|
tbDiv.removeChild(textCur);
|
2022-05-27 16:13:33 +00:00
|
|
|
|
|
|
|
// Run command and return output???
|
2023-01-05 23:13:56 +00:00
|
|
|
let commandOutput = "";
|
|
|
|
|
|
|
|
const aTag = str => `<a style="color: lightgrey;">${str}</a>`;
|
|
|
|
if (commandOutput !== "") {
|
|
|
|
commandOutput = `${aTag(commandOutput)}<br>`;
|
|
|
|
cursorYOffset++;
|
|
|
|
}
|
|
|
|
tbDiv.innerHTML += `${aTag(text)}<br>${commandOutput}${pretext}`;
|
2023-01-12 06:25:46 +00:00
|
|
|
textCur.textContent = "";
|
|
|
|
tbDiv.appendChild(textCur);
|
2023-01-05 23:13:56 +00:00
|
|
|
tbDiv.appendChild(textIn);
|
2022-05-27 16:13:33 +00:00
|
|
|
cursorPosition = startPosition;
|
2022-06-06 14:56:20 +00:00
|
|
|
cursorYOffset++;
|
2023-01-12 06:25:46 +00:00
|
|
|
updateCursor();
|
2022-05-27 16:13:33 +00:00
|
|
|
break;
|
|
|
|
case "ArrowUp":
|
|
|
|
// Einen Befehl zurück in der History
|
|
|
|
break;
|
|
|
|
case "ArrowDown":
|
|
|
|
// Einen Befehl nach vorne in der History
|
|
|
|
break;
|
|
|
|
case "Tab":
|
|
|
|
// Autocomplete
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2023-01-12 06:25:46 +00:00
|
|
|
function updateCursor() {
|
|
|
|
let cursor = document.getElementById("cursor");
|
|
|
|
cursor.style.transform = `translate(${cursorPosition-1}ch, ${cursorYOffset}em)`;
|
|
|
|
}
|
|
|
|
|
2022-05-27 16:13:33 +00:00
|
|
|
setInterval(()=>{
|
2023-01-05 23:13:56 +00:00
|
|
|
cursor.style.opacity = !parseInt(cursor.style.opacity)+0;
|
2022-05-27 16:13:33 +00:00
|
|
|
},1000);
|