fixes and major changes for better inputs (including copy & paste)
This commit is contained in:
parent
c6b210aab3
commit
b6953cb77c
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
.idea/*
|
15
css/main.css
15
css/main.css
@ -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
BIN
images/favicon.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 144 KiB |
17
index.html
17
index.html
@ -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"> </div>
|
||||
<div id="textbox"><a id="input"></a></div>
|
||||
<body>
|
||||
<!-- <div id="cursor"> </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>
|
100
js/main.js
100
js/main.js
@ -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");
|
||||
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 = "";
|
||||
let commandOutput = "";
|
||||
|
||||
parent.innerHTML += '<a style="color: lightgrey;">' + text + '</a><br>' + commandOutput + pretext;
|
||||
textbox.textContent = "";
|
||||
parent.appendChild(textbox);
|
||||
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);
|
Loading…
Reference in New Issue
Block a user