extern/kalker
1
0
Fork 0
mirror of https://github.com/PaddiM8/kalker.git synced 2024-12-12 17:40:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fixed kalk_web properties for non-svelte usage

Browse Source
This commit is contained in:
PaddiM8 2021-01-05 01:33:35 +01:00
parent a169049fe4
commit 51ef0d8e8f
3 changed files with 17 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
kalk_web/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@paddim8/kalk-component",
"version": "1.0.1",
"version": "1.0.2",
"description": "A Svelte component for kalk, a calculator that supports user-defined functions and variables.",
"svelte": "src/main.ts",
"main": "public/build/bundle.js",

2
kalk_web/public/index.html
View File

@ -37,7 +37,7 @@
<body>
<section id="wrapper">
<div class="calculator">
<kalk-calculator>
<kalk-calculator hinttext="test">
<console-line>kalk</console-line>
<console-line>
<span class="hint">Type 'help' for instructions.</span>

29
kalk_web/src/KalkCalculator.svelte
View File

@ -3,12 +3,13 @@
import ConsoleLine from "./ConsoleLine.svelte";
import type { Context } from "@paddim8/kalk";
export let identifierColor = "cornflowerblue";
export let operatorColor = "darkorange";
export let promptColor = "mediumseagreen";
export let errorColor = "tomato";
export let linkColor = "cornflowerblue";
export let hintText = "";
// Props, HTML doesn't recognise them if they're not like this
export let identifiercolor = "cornflowerblue";
export let operatorcolor = "darkorange";
export let promptcolor = "mediumseagreen";
export let errorcolor = "tomato";
export let linkcolor = "cornflowerblue";
export let hinttext = "";
type Kalk = typeof import("@paddim8/kalk");
@ -52,14 +53,14 @@
let output: string;
if (input.trim() == "help") {
output = `<a style="color: ${linkColor}"
output = `<a style="color: ${linkcolor}"
href="https://kalk.netlify.app/#usage"
target="blank">Link to usage guide</a>`;
} else {
const [result, success] = calculate(kalk, input);
output = success
? highlight(result)[0]
: `<span style="color: ${errorColor}">${result}</span>`;
: `<span style="color: ${errorcolor}">${result}</span>`;
}
outputLines = output
@ -216,11 +217,11 @@
offset += substring.length - newSubstring.length;
return `<span style="color: ${identifierColor}">${newSubstring}</span>`;
return `<span style="color: ${identifiercolor}">${newSubstring}</span>`;
}
if (op) {
return `<span style="color: ${operatorColor}">${substring}</span>`;
return `<span style="color: ${operatorcolor}">${substring}</span>`;
}
return substring;
@ -299,27 +300,27 @@
{#each outputLines as line}
<console-line byUser={line[1]}>
{#if line[1]}
<span style="color: {promptColor}">&gt;&gt;</span>
<span style="color: {promptcolor}">&gt;&gt;</span>
{/if}
{@html line[0]}
</console-line>
{/each}
</div>
<div class="input-area">
<span class="prompt" style="color: {promptColor}">&gt;&gt;&nbsp;</span>
<span class="prompt" style="color: {promptcolor}">&gt;&gt;&nbsp;</span>
{#await import('@paddim8/kalk')}
<span>Loading...</span>
{:then kalk}
<div
contenteditable="true"
class="input"
placeholder={hintText}
placeholder={hinttext}
on:keydown={(event) => handleKeyDown(event, kalk)}
on:keyup={handleKeyUp}
on:input={handleInput}
role="textbox" />
{:catch error}
<span style="color: {errorColor}">{error}</span>
<span style="color: {errorcolor}">{error}</span>
{/await}
</div>
</div>