From b90a76ebc86e257e719b7a069a80e28680e806c7 Mon Sep 17 00:00:00 2001 From: Chris Wanstrath Date: Thu, 2 Oct 2025 19:29:10 -0700 Subject: [PATCH] statusbar message --- public/bundle.js | 28 +++++++++++++++++++++++++--- src/css/terminal.css | 21 +++++++++++++++++++-- src/html/terminal.tsx | 5 ++++- src/js/hyperlink.ts | 4 ++++ src/js/statusbar.ts | 27 +++++++++++++++++++++++++++ 5 files changed, 79 insertions(+), 6 deletions(-) create mode 100644 src/js/statusbar.ts diff --git a/public/bundle.js b/public/bundle.js index 36dd52f..6af5f8b 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -1,5 +1,5 @@ //// -// version: 66c75ff +// version: 7d7febe // src/js/dom.ts var content2 = $("content"); @@ -1058,6 +1058,25 @@ async function runCommand(input) { } } +// src/js/statusbar.ts +var STATUS_MSG_LENGTH = 3000; +var statusbar = $("statusbar"); +var statusbarMsg = $("statusbar-msg"); +var timer; +function status(msg) { + showStatusMsg(); + statusbarMsg.textContent = msg; + if (timer) + clearTimeout(timer); + timer = setTimeout(hideStatusMsg, STATUS_MSG_LENGTH); +} +function showStatusMsg() { + statusbar.classList.add("showing-msg"); +} +function hideStatusMsg() { + statusbar.className = ""; +} + // src/js/hyperlink.ts function initHyperlink() { window.addEventListener("click", handleClick); @@ -1076,6 +1095,9 @@ async function handleClick(e) { e.preventDefault(); await runCommand(href.slice(1)); focusInput(); + } else { + e.preventDefault(); + status(href); } } @@ -1133,7 +1155,7 @@ function clearInput() { // src/js/vram.ts var vramCounter = $("vram-size"); var startVramCounter = () => { - const timer = setInterval(() => { + const timer2 = setInterval(() => { const count = parseInt(vramCounter.textContent) + 1; let val = count + "KB"; if (count < 10) @@ -1141,7 +1163,7 @@ var startVramCounter = () => { vramCounter.textContent = val; if (count >= 64) { vramCounter.textContent += " OK"; - clearInterval(timer); + clearInterval(timer2); } }, 15); }; diff --git a/src/css/terminal.css b/src/css/terminal.css index 17e1072..6fd4cd1 100644 --- a/src/css/terminal.css +++ b/src/css/terminal.css @@ -162,7 +162,7 @@ white-space: pre-wrap; } -#statusline { +#statusbar { position: absolute; bottom: 0; left: 0; @@ -177,7 +177,24 @@ justify-content: space-between; } -#statusline a { +#statusbar .line-msg { + display: none; +} + +#statusbar.showing-msg .line-cwd { + display: none; +} + +#statusbar.showing-msg { + background: var(--purple); +} + +#statusbar.showing-msg .line-msg { + color: var(--cyan); + display: inherit; +} + +#statusbar a { color: inherit; text-decoration: none; } \ No newline at end of file diff --git a/src/html/terminal.tsx b/src/html/terminal.tsx index d1f1644..9908d68 100644 --- a/src/html/terminal.tsx +++ b/src/html/terminal.tsx @@ -35,6 +35,9 @@ export const Terminal: FC = async () => (
  • VRAM 000KB
  • -
    root: /
    +
    + +
    +
    ) \ No newline at end of file diff --git a/src/js/hyperlink.ts b/src/js/hyperlink.ts index 9208306..61024f1 100644 --- a/src/js/hyperlink.ts +++ b/src/js/hyperlink.ts @@ -1,5 +1,6 @@ import { runCommand } from "./shell" import { focusInput } from "./focus" +import { status } from "./statusbar" export function initHyperlink() { window.addEventListener("click", handleClick) @@ -20,5 +21,8 @@ async function handleClick(e: MouseEvent) { e.preventDefault() await runCommand(href.slice(1)) focusInput() + } else { + e.preventDefault() + status(href) } } \ No newline at end of file diff --git a/src/js/statusbar.ts b/src/js/statusbar.ts new file mode 100644 index 0000000..49c8fb9 --- /dev/null +++ b/src/js/statusbar.ts @@ -0,0 +1,27 @@ +//// +// Temporarily display a message to the user in the status bar. + +import { $ } from "./dom" + +const STATUS_MSG_LENGTH = 3000 + +const statusbar = $("statusbar") as HTMLDivElement +const statusbarMsg = $("statusbar-msg") as HTMLSpanElement + +let timer: NodeJS.Timeout + +export function status(msg: string) { + showStatusMsg() + statusbarMsg.textContent = msg + + if (timer) clearTimeout(timer) + timer = setTimeout(hideStatusMsg, STATUS_MSG_LENGTH) +} + +function showStatusMsg() { + statusbar.classList.add("showing-msg") +} + +function hideStatusMsg() { + statusbar.className = "" +} \ No newline at end of file