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

revert to whitespace cursor, add input for copy & paste

Browse Source
This commit is contained in:
Baipyrus 2023-01-12 07:25:46 +01:00
parent b6953cb77c
commit b65b6c5cfd
3 changed files with 43 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
css/main.css
View File

@ -5,22 +5,21 @@ body {
} }
#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 { #input {
outline: none; opacity: 0;
} }
#textbox { #textbox {
color: lime; color: lime;
} }
#input { #current {
color: lightgrey; color: lightgrey;
} }

6
index.html
View File

@ -7,10 +7,10 @@
<link rel="stylesheet" type="text/css" href="css/main.css"> <link rel="stylesheet" type="text/css" href="css/main.css">
</head> </head>
<body> <body>
<!-- <div id="cursor">&nbsp;</div>--> <div id="cursor">&nbsp;</div>
<div id="textbox"> <div id="textbox">
<a id="input"></a> <a id="current"></a>
<input type="text" id="cursor"> <input type="text" id="input">
</div> </div>
<script type="text/javascript" src="js/main.js"></script> <script type="text/javascript" src="js/main.js"></script>
</body> </body>

53
js/main.js
View File

@ -8,64 +8,71 @@ tbDiv.innerHTML = pretext+tbDiv.innerHTML;
const length = tbDiv.innerText.length+1; const length = tbDiv.innerText.length+1;
startPosition = length; startPosition = length;
cursorPosition = length; cursorPosition = length;
const cursor = document.getElementById("cursor");
const textIn = document.getElementById("input"); const textIn = document.getElementById("input");
const textCur = document.getElementById("current");
const cursor = document.getElementById("cursor");
cursor.style.transform = `translate(${length-1}ch)`;
cursor.oninput = () => { textIn.oninput = () => {
textIn.textContent += cursor.value; textCur.textContent += textIn.value;
cursor.value = ""; textIn.value = "";
cursorPosition++; cursorPosition++;
updateCursor();
}; };
cursor.focus(); textIn.focus();
document.addEventListener("selectionchange", e => { document.addEventListener("selectionchange", e => {
if (e.target !== cursor) { if (e.target !== textIn) {
const selection = window.getSelection(); const selection = window.getSelection();
if (selection.type === "Caret") if (selection.type === "Caret")
cursor.focus(); textIn.focus();
console.log(selection);
} }
}); });
document.addEventListener("keydown", e => { document.addEventListener("keydown", e => {
const index = cursorPosition - startPosition; const index = cursorPosition - startPosition;
const text = textIn.textContent; const text = textCur.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 <= textIn.textContent.length-1) { if (index <= textCur.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);
textIn.textContent=a+b; textCur.textContent=a+b;
} else } else
textIn.textContent = text.substring(0,text.length-1); textCur.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 < textIn.textContent.length) if (index < textCur.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 >= textIn.textContent.length) if (index === 0 || index >= textCur.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);
textIn.textContent=a+b; textCur.textContent=a+b;
break; break;
case "Enter": case "Enter":
// Befehl absenden / Zeilenumbruch // Befehl absenden / Zeilenumbruch
const cursor = document.getElementById("cursor"); const textIn = document.getElementById("input");
tbDiv.removeChild(cursor);
tbDiv.removeChild(textIn); tbDiv.removeChild(textIn);
tbDiv.removeChild(textCur);
// Run command and return output??? // Run command and return output???
let commandOutput = ""; let commandOutput = "";
@ -76,11 +83,12 @@ document.addEventListener("keydown", e => {
cursorYOffset++; cursorYOffset++;
} }
tbDiv.innerHTML += `${aTag(text)}<br>${commandOutput}${pretext}`; tbDiv.innerHTML += `${aTag(text)}<br>${commandOutput}${pretext}`;
textIn.textContent = ""; textCur.textContent = "";
tbDiv.appendChild(textCur);
tbDiv.appendChild(textIn); 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
@ -94,6 +102,11 @@ document.addEventListener("keydown", e => {
} }
}); });
function updateCursor() {
let cursor = document.getElementById("cursor");
cursor.style.transform = `translate(${cursorPosition-1}ch, ${cursorYOffset}em)`;
}
setInterval(()=>{ setInterval(()=>{
cursor.style.opacity = !parseInt(cursor.style.opacity)+0; cursor.style.opacity = !parseInt(cursor.style.opacity)+0;
},1000); },1000);