revert to whitespace cursor, add input for copy & paste
This commit is contained in:
parent
b6953cb77c
commit
b65b6c5cfd
15
css/main.css
15
css/main.css
|
@ -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;
|
||||||
}
|
}
|
|
@ -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"> </div>-->
|
<div id="cursor"> </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
53
js/main.js
|
@ -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);
|
Loading…
Reference in New Issue
Block a user