extern/kalker
1
0
Fork 0
mirror of https://github.com/PaddiM8/kalker.git synced 2025-03-05 00:31:10 +01:00
Code Issues Packages Projects Releases Wiki Activity

Scroll to bottom after input

Browse Source
This commit is contained in:
PaddiM8 2021-01-02 18:45:07 +01:00
parent 44153bb8b6
commit 66950779de
1 changed files with 23 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
kalk_web/src/Calculator.svelte
View File

@ -1,7 +1,19 @@
<script lang="ts"> <script lang="ts">
import { afterUpdate } from "svelte";
import helpText from "../../kalk_cli/help.txt"; import helpText from "../../kalk_cli/help.txt";
let outputLines: string[] = []; let outputLines: string[] = [];
let outputElement: HTMLElement;
let kalkContext; let kalkContext;
afterUpdate(() => {
// Scroll to bottom
outputElement.children[
outputElement.children.length - 1
].scrollIntoView(false);
});
function handleKeyDown(event: KeyboardEvent, kalk) { function handleKeyDown(event: KeyboardEvent, kalk) {
if (event.key == "Enter") { if (event.key == "Enter") {
const target = event.target as HTMLInputElement; const target = event.target as HTMLInputElement;
@ -11,8 +23,8 @@
if (input.trim() == "help") { if (input.trim() == "help") {
output = helpText; output = helpText;
} else { } else {
// Calculate // Calculate
if (!kalkContext) kalkContext = new kalk.Context(); if (!kalkContext) kalkContext = new kalk.Context();
try { try {
const result = kalkContext.evaluate(input); const result = kalkContext.evaluate(input);
if (result) output = result.toString(); if (result) output = result.toString();
@ -25,6 +37,7 @@
outputLines = output outputLines = output
? [...outputLines, inputHTML, output] ? [...outputLines, inputHTML, output]
: [...outputLines, inputHTML]; : [...outputLines, inputHTML];
target.innerHTML = ""; target.innerHTML = "";
} }
} }
@ -147,8 +160,10 @@
} }
</script> </script>
<style lang="scss">
$background-color: #424242; $background-color: #424242;
$font: "Hack", monospace, Consolas, sans-serif; /* TODO: import font */ $font: "Hack", monospace, Consolas, sans-serif; /* TODO: import font */
.calculator { .calculator {
width: 600px; width: 600px;
height: 350px; height: 350px;
@ -157,8 +172,6 @@
.output { .output {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end;
width: 100%;
height: 100%; height: 100%;
background-color: #424242; background-color: #424242;
padding: 10px; padding: 10px;
@ -167,6 +180,11 @@
font-size: 1.4em; font-size: 1.4em;
font-family: $font; font-family: $font;
color: white; color: white;
overflow: auto;
}
.output > :first-child {
margin-top: auto;
} }
.consoleLine { .consoleLine {
@ -196,13 +214,13 @@
</style> </style>
<div class="calculator"> <div class="calculator">
<div class="output" bind:this={outputElement}>
<p class="consoleLine">kalk</p> <p class="consoleLine">kalk</p>
<p class="consoleLine"> <p class="consoleLine">
<span class="hint">Type 'help' for instructions.</span> <span class="hint">Type 'help' for instructions.</span>
</p> </p>
{#each outputLines as line} {#each outputLines as line}
<p class="consoleLine"> <p class="consoleLine">
<span class="prompt">&gt;&gt;</span>
{@html line} {@html line}
</p> </p>
{/each} {/each}