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

Added @paddim8/kalk to kalk_web

Browse Source
This commit is contained in:
PaddiM8 2021-01-02 17:20:13 +01:00
parent 9600e96461
commit 232cda93b4
1 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
kalk_web/src/Calculator.svelte
View File

@ -1,9 +1,16 @@
<script lang="ts"> <script lang="ts">
let outputLines: string[] = []; let outputLines: string[] = [];
function handleKeyDown(event: KeyboardEvent) { let kalkContext;
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;
outputLines = [...outputLines, target.innerHTML]; const input = target.textContent;
// Calculate
if (!kalkContext) kalkContext = new kalk.Context();
const output = kalkContext.evaluate(input).toString();
outputLines = [...outputLines, input, output];
target.innerHTML = ""; target.innerHTML = "";
} }
} }
@ -12,7 +19,6 @@
const target = event.target as HTMLInputElement; const target = event.target as HTMLInputElement;
const cursorPos = getCursorPos(target); const cursorPos = getCursorPos(target);
const [highlighted, offset] = highlight(target.textContent); const [highlighted, offset] = highlight(target.textContent);
console.log(highlighted);
target.innerHTML = highlighted; target.innerHTML = highlighted;
setCursorPos(target, cursorPos - offset); setCursorPos(target, cursorPos - offset);
} }
@ -188,11 +194,13 @@
</div> </div>
<div class="input-area"> <div class="input-area">
<span class="prompt">&gt;&gt;&nbsp;</span> <span class="prompt">&gt;&gt;&nbsp;</span>
<div {#await import('@paddim8/kalk') then kalk}
contenteditable="true" <div
class="input" contenteditable="true"
on:keydown={handleKeyDown} class="input"
on:input={handleInput} on:keydown={(event) => handleKeyDown(event, kalk)}
role="textbox" /> on:input={handleInput}
role="textbox" />
{/await}
</div> </div>
</div> </div>