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 {
background-color: black;
font-family: 'Lucida Console';
font-family: 'Lucida Console', serif;
font-size: large;
}
#cursor {
position: absolute;
z-index: -1;
background-color: white;
display: inline-block;
opacity: 1;
border: none;
font-size: inherit;
max-width: 1ch;
text-align: center;
caret-color: transparent;
}
#cursor:focus {
outline: none;
}
#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>
<html>
<html lang="en">
<head>
<title>Baipyr.US</title>
<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="icon" type="image/x-icon" href="images/favicon.png">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="js/main.js"></script>
</head>
<body onload="preload()">
<div id="cursor">&nbsp;</div>
<div id="textbox"><a id="input"></a></div>
<body>
<!-- <div id="cursor">&nbsp;</div>-->
<div id="textbox">
<a id="input"></a>
<input type="text" id="cursor">
</div>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>

104
js/main.js
View File

@ -3,78 +3,84 @@ let startPosition = 0;
let cursorPosition = 0;
let cursorYOffset = 0;
document.addEventListener("keypress", e=>{
if ((e.key == "Enter") || (e.code == "KeyV" && e.ctrlKey))
return;
let textbox = document.getElementById("input");
const index = cursorPosition - startPosition;
if (e.key == ' ' && (textbox.textContent[index-1] == ' ' || cursorPosition == startPosition))
return;
if (index <= textbox.textContent.length-1) {
const text = textbox.textContent;
const a = text.substring(0, index);
const b = text.substring(index, text.length);
textbox.textContent = a + e.key + b;
} else
textbox.textContent += e.key;
const tbDiv = document.getElementById("textbox");
tbDiv.innerHTML = pretext+tbDiv.innerHTML;
const length = tbDiv.innerText.length+1;
startPosition = length;
cursorPosition = length;
const cursor = document.getElementById("cursor");
const textIn = document.getElementById("input");
cursor.oninput = () => {
textIn.textContent += cursor.value;
cursor.value = "";
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=>{
let textbox = document.getElementById("input");
document.addEventListener("keydown", e => {
const index = cursorPosition - startPosition;
const text = textbox.textContent;
const text = textIn.textContent;
switch (e.key) {
case "Backspace":
// Ein Zeichen nach links löschen
if (index == 0)
if (index === 0)
return;
if (index <= textbox.textContent.length-1) {
if (index <= textIn.textContent.length-1) {
const a = text.substring(0, index-1);
const b = text.substring(index, text.length);
textbox.textContent=a+b;
textIn.textContent=a+b;
} else
textbox.textContent = text.substring(0,text.length-1);
textIn.textContent = text.substring(0,text.length-1);
cursorPosition--;
updateCursor();
break;
case "ArrowLeft":
// Ein Zeichen nach links
if (cursorPosition > startPosition) {
if (cursorPosition > startPosition)
cursorPosition--;
updateCursor();
}
break;
case "ArrowRight":
// Ein Zeichen nach reckts
if (index < textbox.textContent.length) {
if (index < textIn.textContent.length)
cursorPosition++;
updateCursor();
}
break;
case "Delete":
// Ein Zeichen nach rechts löschen
if (index == 0 || index >= textbox.textContent.length)
if (index === 0 || index >= textIn.textContent.length)
return;
const a = text.substring(0, index);
const b = text.substring(index+1, text.length);
textbox.textContent=a+b;
textIn.textContent=a+b;
break;
case "Enter":
// Befehl absenden / Zeilenumbruch
const parent = document.getElementById("textbox");
parent.removeChild(textbox);
const cursor = document.getElementById("cursor");
tbDiv.removeChild(cursor);
tbDiv.removeChild(textIn);
// Run command and return output???
const commandOutput = "";
parent.innerHTML += '<a style="color: lightgrey;">' + text + '</a><br>' + commandOutput + pretext;
textbox.textContent = "";
parent.appendChild(textbox);
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}`;
textIn.textContent = "";
tbDiv.appendChild(textIn);
tbDiv.appendChild(cursor);
cursorPosition = startPosition;
cursorYOffset++;
updateCursor();
break;
case "ArrowUp":
// 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(()=>{
let cursor = document.getElementById("cursor");
cursor.style.opacity = (cursor.style.opacity=="1")?"0":"1";
cursor.style.opacity = !parseInt(cursor.style.opacity)+0;
},1000);