Baipyrus/TerminalHomepage
1
0
Fork 0
Code Issues 4 Pull Requests Projects Releases Wiki Activity

bugfixes and cursor y-movement

Browse Source
This commit is contained in:
Baipyrus 2022-06-06 16:56:20 +02:00
parent 1aa39fd1b8
commit ba21919972
3 changed files with 23 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
css/main.css
View File

@ -2,6 +2,7 @@ body {
background-color: black; background-color: black;
font-family: 'Lucida Console'; font-family: 'Lucida Console';
font-size: large; font-size: large;
/* white-space: pre; */
} }
#cursor { #cursor {

6
index.html
View File

@ -1,5 +1,9 @@
<!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/main.css"> <link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="js/main.js"></script> <script type="text/javascript" src="js/main.js"></script>
</head> </head>
@ -7,4 +11,4 @@
<div id="cursor">&nbsp;</div> <div id="cursor">&nbsp;</div>
<div id="textbox"><a id="input"></a></div> <div id="textbox"><a id="input"></a></div>
</body> </body>
</htm </html>

32
js/main.js
View File

@ -1,21 +1,22 @@
const pretext = "root@baipyr.us:~# "; const pretext = "root@baipyr.us:~# ";
let startPosition = 0; let startPosition = 0;
let cursorPosition = 0; let cursorPosition = 0;
let cursorYOffset = 0;
document.addEventListener("keypress", e=>{ document.addEventListener("keypress", e=>{
if ((e.key == "Enter") || (e.code == "KeyV" && e.ctrlKey)) if ((e.key == "Enter") || (e.code == "KeyV" && e.ctrlKey))
return; return;
let textbox = document.getElementById("input"); let textbox = document.getElementById("input");
const index = cursorPosition - startPosition; const index = cursorPosition - startPosition;
if (e.key == ' ' && (textbox.innerHTML[index-1] == ' ' || cursorPosition == startPosition)) if (e.key == ' ' && (textbox.innerText[index-1] == ' ' || cursorPosition == startPosition))
return; return;
if (index <= textbox.innerHTML.length-1) { if (index <= textbox.innerText.length-1) {
const text = textbox.innerHTML; const text = textbox.innerText;
const a = text.substring(0, index); const a = text.substring(0, index);
const b = text.substring(index, text.length); const b = text.substring(index, text.length);
textbox.innerHTML=a+e.key+b; textbox.innerText = a + e.key + b;
} else } else
textbox.innerHTML += e.key; textbox.innerText += e.key;
cursorPosition++; cursorPosition++;
updateCursor(); updateCursor();
}); });
@ -23,18 +24,18 @@ document.addEventListener("keypress", e=>{
document.addEventListener("keydown", e=>{ document.addEventListener("keydown", e=>{
let textbox = document.getElementById("input"); let textbox = document.getElementById("input");
const index = cursorPosition - startPosition; const index = cursorPosition - startPosition;
const text = textbox.innerHTML; const text = textbox.innerText;
switch (e.key) { switch (e.key) {
case "Backspace": case "Backspace":
// Ein Zeichen nach links löschen // Ein Zeichen nach links löschen
if (index == 0) if (index == 0)
return; return;
if (index <= textbox.innerHTML.length-1) { if (index <= textbox.innerText.length-1) {
const a = text.substring(0, index-1); const a = text.substring(0, index-1);
const b = text.substring(index, text.length); const b = text.substring(index, text.length);
textbox.innerHTML=a+b; textbox.innerText=a+b;
} else } else
textbox.innerHTML = text.substring(0,text.length-1); textbox.innerText = text.substring(0,text.length-1);
cursorPosition--; cursorPosition--;
updateCursor(); updateCursor();
break; break;
@ -47,18 +48,18 @@ document.addEventListener("keydown", e=>{
break; break;
case "ArrowRight": case "ArrowRight":
// Ein Zeichen nach reckts // Ein Zeichen nach reckts
if (index < textbox.innerHTML.length) { if (index < textbox.innerText.length) {
cursorPosition++; cursorPosition++;
updateCursor(); updateCursor();
} }
break; break;
case "Delete": case "Delete":
// Ein Zeichen nach rechts löschen // Ein Zeichen nach rechts löschen
if (index == 0 || index >= textbox.innerHTML.length) if (index == 0 || index >= textbox.innerText.length)
return; return;
const a = text.substring(0, index); const a = text.substring(0, index);
const b = text.substring(index+1, text.length); const b = text.substring(index+1, text.length);
textbox.innerHTML=a+b; textbox.innerText=a+b;
break; break;
case "Enter": case "Enter":
// Befehl absenden / Zeilenumbruch // Befehl absenden / Zeilenumbruch
@ -68,10 +69,11 @@ document.addEventListener("keydown", e=>{
// Run command and return output??? // Run command and return output???
const commandOutput = ""; const commandOutput = "";
parent.innerHTML += '<a style="color: white;">' + text + '</a><br>' + commandOutput + pretext; parent.innerHTML += '<a style="color: lightgrey;">' + text + '</a><br>' + commandOutput + pretext;
textbox.innerHTML = ""; textbox.innerText = "";
parent.appendChild(textbox); parent.appendChild(textbox);
cursorPosition = startPosition; cursorPosition = startPosition;
cursorYOffset++;
updateCursor(); updateCursor();
break; break;
case "ArrowUp": case "ArrowUp":
@ -88,7 +90,7 @@ document.addEventListener("keydown", e=>{
function updateCursor() { function updateCursor() {
let cursor = document.getElementById("cursor"); let cursor = document.getElementById("cursor");
const transform = `translate(${cursorPosition}ch)`; const transform = `translate(${cursorPosition}ch,${cursorYOffset}em)`;
cursor.style.transform = transform; cursor.style.transform = transform;
} }