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

kalk_web autofocus prop

Browse Source
This commit is contained in:
PaddiM8 2021-01-05 15:09:08 +01:00
parent aed5ba531c
commit 693a53ddc7
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 ```html
<kalk-calculator <kalk-calculator
hinttext="Type something..." hinttext="Type something..."
autofocus="true"
identifiercolor="cornflowerblue" identifiercolor="cornflowerblue"
operatorcolor="darkorange" operatorcolor="darkorange"
promptcolor="mediumseagreen" promptcolor="mediumseagreen"

2
kalk_web/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@paddim8/kalk-component", "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.", "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 hinttext="test"> <kalk-calculator hinttext="test" autofocus="true">
<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>

7
kalk_web/src/KalkCalculator.svelte
View File

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