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

fixes and major changes for better inputs (including copy & paste)

Browse Source
This commit is contained in:
Baipyrus 2023-01-06 00:13:56 +01:00
parent c6b210aab3
commit b6953cb77c
5 changed files with 67 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
.idea/*

15
css/main.css
View File

@ -1,15 +1,20 @@
body { body {
background-color: black; background-color: black;
font-family: 'Lucida Console'; font-family: 'Lucida Console', serif;
font-size: large; font-size: large;
} }
#cursor { #cursor {
position: absolute;
z-index: -1;
background-color: white;
display: inline-block;
opacity: 1; opacity: 1;
border: none;
font-size: inherit;
max-width: 1ch;
text-align: center;
caret-color: transparent;
}
#cursor:focus {
outline: none;
} }
#textbox { #textbox {

BIN
images/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 144 KiB

17
index.html
View File

@ -1,14 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<title>Baipyr.US</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="icon" type="image/x-icon" href="images/favicon.png">
<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>
</head> </head>
<body onload="preload()"> <body>
<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>
<input type="text" id="cursor">
</div>
<script type="text/javascript" src="js/main.js"></script>
</body> </body>
</html> </html>

100
js/main.js
View File

@ -3,78 +3,84 @@ let startPosition = 0;
let cursorPosition = 0; let cursorPosition = 0;
let cursorYOffset = 0; let cursorYOffset = 0;
document.addEventListener("keypress", e=>{ const tbDiv = document.getElementById("textbox");
if ((e.key == "Enter") || (e.code == "KeyV" && e.ctrlKey)) tbDiv.innerHTML = pretext+tbDiv.innerHTML;
return; const length = tbDiv.innerText.length+1;
let textbox = document.getElementById("input"); startPosition = length;
const index = cursorPosition - startPosition; cursorPosition = length;
if (e.key == ' ' && (textbox.textContent[index-1] == ' ' || cursorPosition == startPosition)) const cursor = document.getElementById("cursor");
return; const textIn = document.getElementById("input");
if (index <= textbox.textContent.length-1) {
const text = textbox.textContent; cursor.oninput = () => {
const a = text.substring(0, index); textIn.textContent += cursor.value;
const b = text.substring(index, text.length); cursor.value = "";
textbox.textContent = a + e.key + b;
} else
textbox.textContent += e.key;
cursorPosition++; cursorPosition++;
updateCursor(); };
cursor.focus();
document.addEventListener("selectionchange", e => {
if (e.target !== cursor) {
const selection = window.getSelection();
if (selection.type === "Caret")
cursor.focus();
console.log(selection);
}
}); });
document.addEventListener("keydown", e => { document.addEventListener("keydown", e => {
let textbox = document.getElementById("input");
const index = cursorPosition - startPosition; const index = cursorPosition - startPosition;
const text = textbox.textContent; const text = textIn.textContent;
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.textContent.length-1) { if (index <= textIn.textContent.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.textContent=a+b; textIn.textContent=a+b;
} else } else
textbox.textContent = text.substring(0,text.length-1); textIn.textContent = text.substring(0,text.length-1);
cursorPosition--; cursorPosition--;
updateCursor();
break; break;
case "ArrowLeft": case "ArrowLeft":
// Ein Zeichen nach links // Ein Zeichen nach links
if (cursorPosition > startPosition) { if (cursorPosition > startPosition)
cursorPosition--; cursorPosition--;
updateCursor();
}
break; break;
case "ArrowRight": case "ArrowRight":
// Ein Zeichen nach reckts // Ein Zeichen nach reckts
if (index < textbox.textContent.length) { if (index < textIn.textContent.length)
cursorPosition++; cursorPosition++;
updateCursor();
}
break; break;
case "Delete": case "Delete":
// Ein Zeichen nach rechts löschen // Ein Zeichen nach rechts löschen
if (index == 0 || index >= textbox.textContent.length) if (index === 0 || index >= textIn.textContent.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.textContent=a+b; textIn.textContent=a+b;
break; break;
case "Enter": case "Enter":
// Befehl absenden / Zeilenumbruch // Befehl absenden / Zeilenumbruch
const parent = document.getElementById("textbox"); const cursor = document.getElementById("cursor");
parent.removeChild(textbox); tbDiv.removeChild(cursor);
tbDiv.removeChild(textIn);
// Run command and return output??? // Run command and return output???
const commandOutput = ""; let commandOutput = "";
parent.innerHTML += '<a style="color: lightgrey;">' + text + '</a><br>' + commandOutput + pretext; const aTag = str => `<a style="color: lightgrey;">${str}</a>`;
textbox.textContent = ""; if (commandOutput !== "") {
parent.appendChild(textbox); commandOutput = `${aTag(commandOutput)}<br>`;
cursorYOffset++;
}
tbDiv.innerHTML += `${aTag(text)}<br>${commandOutput}${pretext}`;
textIn.textContent = "";
tbDiv.appendChild(textIn);
tbDiv.appendChild(cursor);
cursorPosition = startPosition; cursorPosition = startPosition;
cursorYOffset++; cursorYOffset++;
updateCursor();
break; break;
case "ArrowUp": case "ArrowUp":
// Einen Befehl zurück in der History // Einen Befehl zurück in der History
@ -88,24 +94,6 @@ document.addEventListener("keydown", e=>{
} }
}); });
function updateCursor() {
let cursor = document.getElementById("cursor");
const transform = `translate(${cursorPosition}ch,${cursorYOffset}em)`;
cursor.style.transform = transform;
}
function preload() {
let cursor = document.getElementById("cursor");
let textbox = document.getElementById("textbox");
textbox.innerHTML = pretext+textbox.innerHTML;
const length = textbox.innerText.length+1;
const transform = `translate(${length}ch)`;
cursor.style.transform = transform;
startPosition = length;
cursorPosition = length;
}
setInterval(()=>{ setInterval(()=>{
let cursor = document.getElementById("cursor"); cursor.style.opacity = !parseInt(cursor.style.opacity)+0;
cursor.style.opacity = (cursor.style.opacity=="1")?"0":"1";
},1000); },1000);