Miroirs/waforth
1
0
Fork 0
mirror of https://github.com/remko/waforth synced 2025-01-19 22:26:17 +01:00
Code Issues Projects Releases Packages Wiki Activity

shell: styling tweaks

Browse source
This commit is contained in:
Remko Tronçon 2022-04-18 14:20:41 +02:00
parent 48dfdd00aa
commit ea97e51644
2 changed files with 15 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/web/shell/shell.css
View file

@ -17,14 +17,17 @@ body {
.console {
position: absolute;
width: 100%;
height: 100vh;
overflow-y: scroll;
background-color: black;
font-family: monospace;
padding: 1em;
white-space: pre-wrap;
word-wrap: break-word;
margin: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.console .header {
@ -55,4 +58,5 @@ body {
input {
width: 100%;
opacity: 0;
visibility: hidden;
}

17
src/web/shell/shell.js
View file

@ -10,10 +10,8 @@ const consoleEl = document.createElement("pre");
consoleEl.className = "console";
document.body.appendChild(consoleEl);
const inputEl = document.createElement("input");
inputEl.style = "position: fixed; bottom: 0; left: 0;";
inputEl.style.visibility = "hidden";
document.body.appendChild(inputEl);
let inputEl;
let cursorEl;
consoleEl.addEventListener("click", () => {
inputEl.style.visibility = "visible";
@ -28,10 +26,10 @@ function output(s, isInput) {
currentConsoleEl = document.createElement("span");
currentConsoleEl.className = isInput ? "in" : "out";
currentConsoleElIsInput = isInput;
consoleEl.insertBefore(currentConsoleEl, consoleEl.lastChild);
consoleEl.insertBefore(currentConsoleEl, cursorEl);
}
currentConsoleEl.appendChild(document.createTextNode(s));
document.querySelector(".cursor").scrollIntoView();
document.querySelector(".cursor").scrollIntoView(false);
}
function unoutput(isInput) {
if (
@ -89,7 +87,9 @@ function startConsole() {
}
function clearConsole() {
consoleEl.innerHTML =
"<span class='header'><a target='_blank' href='https://github.com/remko/waforth'>WAForth</a>\n</span><span class=\"cursor\"> </span>";
"<span class='header'><a target='_blank' href='https://github.com/remko/waforth'>WAForth</a>\n</span><span class=\"cursor\"> </span><input type=\"text\">";
inputEl = document.querySelector("input");
cursorEl = document.querySelector(".cursor");
}
forth.onEmit = (c) => {
@ -110,7 +110,8 @@ forth.start().then(
const errorEl = document.createElement("span");
errorEl.className = "error";
errorEl.innerText = "error";
consoleEl.lastChild.remove();
cursorEl.remove();
inputEl.remove();
consoleEl.appendChild(errorEl);
}
);