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

kalk_web autofocus prop

Browse Source
This commit is contained in:
PaddiM8 2021-01-05 15:09:08 +01:00
parent 8b8ebec500
commit 57d82207ed
4 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
kalk_web/README.md
View File

@ -39,6 +39,7 @@ The colours in the component can be changed by using these attributes.
```html
<kalk-calculator
hinttext="Type something..."
autofocus="true"
identifiercolor="cornflowerblue"
operatorcolor="darkorange"
promptcolor="mediumseagreen"

2
kalk_web/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@paddim8/kalk-component",
"version": "1.0.4",
"version": "1.0.6",
"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 hinttext="test">
<kalk-calculator hinttext="test" autofocus="true">
<console-line>kalk</console-line>
<console-line>
<span class="hint">Type 'help' for instructions.</span>

7
kalk_web/src/KalkCalculator.svelte
View File

@ -1,6 +1,5 @@
<script lang="ts">
import { afterUpdate } from "svelte";
import ConsoleLine from "./ConsoleLine.svelte";
import type { Context } from "@paddim8/kalk";
// Props, HTML doesn't recognise them if they're not like this
@ -10,6 +9,7 @@
export let errorcolor = "tomato";
export let linkcolor = "cornflowerblue";
export let hinttext = "";
export let autofocus = false;
type Kalk = typeof import("@paddim8/kalk");
@ -114,6 +114,10 @@
setCursorPos(target, cursorPos - offset);
}
function focus(element: HTMLInputElement) {
if (autofocus) element.focus();
}
function getCursorPos(element: HTMLInputElement): number {
const selection = window.getSelection();
if (selection.rangeCount !== 0) {
@ -316,6 +320,7 @@
contenteditable="true"
class="input"
placeholder={hinttext}
use:focus
on:keydown={(event) => handleKeyDown(event, kalk)}
on:keyup={handleKeyUp}
on:input={handleInput}