Miroirs/waforth
1
0
Fork 0
mirror of https://github.com/remko/waforth synced 2025-01-31 19:57:43 +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 { .console {
position: absolute; position: absolute;
width: 100%; overflow-y: scroll;
height: 100vh;
background-color: black; background-color: black;
font-family: monospace; font-family: monospace;
padding: 1em; padding: 1em;
white-space: pre-wrap; white-space: pre-wrap;
word-wrap: break-word; word-wrap: break-word;
margin: 0; margin: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
} }
.console .header { .console .header {
@ -55,4 +58,5 @@ body {
input { input {
width: 100%; width: 100%;
opacity: 0; opacity: 0;
visibility: hidden;
} }

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

@ -10,10 +10,8 @@ const consoleEl = document.createElement("pre");
consoleEl.className = "console"; consoleEl.className = "console";
document.body.appendChild(consoleEl); document.body.appendChild(consoleEl);
const inputEl = document.createElement("input"); let inputEl;
inputEl.style = "position: fixed; bottom: 0; left: 0;"; let cursorEl;
inputEl.style.visibility = "hidden";
document.body.appendChild(inputEl);
consoleEl.addEventListener("click", () => { consoleEl.addEventListener("click", () => {
inputEl.style.visibility = "visible"; inputEl.style.visibility = "visible";
@ -28,10 +26,10 @@ function output(s, isInput) {
currentConsoleEl = document.createElement("span"); currentConsoleEl = document.createElement("span");
currentConsoleEl.className = isInput ? "in" : "out"; currentConsoleEl.className = isInput ? "in" : "out";
currentConsoleElIsInput = isInput; currentConsoleElIsInput = isInput;
consoleEl.insertBefore(currentConsoleEl, consoleEl.lastChild); consoleEl.insertBefore(currentConsoleEl, cursorEl);
} }
currentConsoleEl.appendChild(document.createTextNode(s)); currentConsoleEl.appendChild(document.createTextNode(s));
document.querySelector(".cursor").scrollIntoView(); document.querySelector(".cursor").scrollIntoView(false);
} }
function unoutput(isInput) { function unoutput(isInput) {
if ( if (
@ -89,7 +87,9 @@ function startConsole() {
} }
function clearConsole() { function clearConsole() {
consoleEl.innerHTML = 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) => { forth.onEmit = (c) => {
@ -110,7 +110,8 @@ forth.start().then(
const errorEl = document.createElement("span"); const errorEl = document.createElement("span");
errorEl.className = "error"; errorEl.className = "error";
errorEl.innerText = "error"; errorEl.innerText = "error";
consoleEl.lastChild.remove(); cursorEl.remove();
inputEl.remove();
consoleEl.appendChild(errorEl); consoleEl.appendChild(errorEl);
} }
); );