extern/kalker
1
0
Fork 0
mirror of https://github.com/PaddiM8/kalker.git synced 2025-06-28 05:32:00 +02: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 79facb1bd8
commit a550e3e1c7
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", "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.", "description": "A Svelte component for kalk, a calculator that supports user-defined functions and variables.",
"svelte": "src/main.ts", "svelte": "src/main.ts",
"main": "public/build/bundle.js", "main": "public/build/bundle.js",

2
kalk_web/public/index.html
View File

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