diff --git a/kalk_web/package.json b/kalk_web/package.json index c09b19d..d990716 100644 --- a/kalk_web/package.json +++ b/kalk_web/package.json @@ -1,6 +1,6 @@ { "name": "@paddim8/kalk-component", - "version": "1.0.8", + "version": "1.0.9", "description": "A Svelte component for kalk, a calculator that supports user-defined functions and variables.", "svelte": "src/main.ts", "main": "public/build/bundle.js", @@ -61,4 +61,4 @@ "browserslist": [ "defaults" ] -} +} \ No newline at end of file diff --git a/kalk_web/public/index.html b/kalk_web/public/index.html index fe33f6c..1445316 100644 --- a/kalk_web/public/index.html +++ b/kalk_web/public/index.html @@ -31,13 +31,35 @@ border-radius: 7px; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4) inset; } + + @media screen and (max-width: 850px) { + body { + width: 100%; + height: 100%; + margin: 0; + padding: 0; + } + + #wrapper { + padding: 0; + } + + .calculator { + width: 100vw; + height: 100vh; + box-sizing: border-box; + border-radius: 0; + box-shadow: 0; + padding: 0; + } + }
- + kalk Type 'help' for instructions. diff --git a/kalk_web/src/KalkCalculator.svelte b/kalk_web/src/KalkCalculator.svelte index 305af1b..94a82d3 100644 --- a/kalk_web/src/KalkCalculator.svelte +++ b/kalk_web/src/KalkCalculator.svelte @@ -12,14 +12,36 @@ export let linkcolor = "cornflowerblue"; export let hinttext = ""; export let autofocus = false; + export let buttonpanel = false; + export let numberrow = false; type Kalk = typeof import("@paddim8/kalk"); let outputLines: [value: string, byUser: boolean][] = []; + let buttonRowValues = [ + "+", + "-", + "*", + "/", + "^", + "=", + ".", + "(", + "√", + "π", + ",", + "%", + "Σ", + "⌊", + "⌈", + "ϕ", + ]; + let numberRowValues = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]; let outputElement: HTMLElement; let kalkContext: Context; let selectedLineOffset: number = 0; let calculatorElement: HTMLElement; + let inputElement: HTMLInputElement; afterUpdate(() => { // Scroll to bottom @@ -120,6 +142,52 @@ setCursorPos(target, cursorPos - offset); } + function handleButtonClick(event: Event) { + const target = event.target as HTMLElement; + target.blur(); + insertText(target.textContent); + } + + function handleArrowClick(event: Event, left: boolean) { + const target = event.target as HTMLElement; + const cursorPos = getCursorPos(inputElement); + target.blur(); + setCursorPos(inputElement, cursorPos + (left ? -1 : 1)); + } + + function insertText(input: string) { + let cursorPos = getCursorPos(inputElement); + const textContent = inputElement.textContent; + let movementOffset = input.length; + + if (input == "(") { + input += ")"; + } else if (input == "=") { + input = " = "; + movementOffset = 3; + } else if (input == "Σ") { + input += "()"; + movementOffset = 2; + } else if (input == "⌊") { + input += "⌋"; + } else if (input == "⌈") { + input += "⌉"; + } else if (input == ",") { + input = ", "; + movementOffset = 2; + } + + const newString = + textContent.slice(0, cursorPos) + + input + + textContent.slice(cursorPos); + const [highlighted, offset] = highlight(newString); + + inputElement.innerHTML = highlighted; + inputElement.focus(); + setCursorPos(inputElement, cursorPos - offset + movementOffset); + } + function focus(element: HTMLInputElement) { if (autofocus) element.focus(); } @@ -210,6 +278,10 @@ newSubstring = "π"; break; } + case "phi": { + newSubstring = "ϕ"; + break; + } case "gamma": { newSubstring = "Γ"; break; @@ -300,6 +372,59 @@ color: gray; background-color: transparent; } + + .button-panel { + display: grid; + grid-template-columns: repeat(4, auto); + padding-right: 1.82vw; + } + + .arrow { + .left { + grid-area: left-arrow; + } + + .right { + grid-area: right-arrow; + } + } + + .number-row, + .button-panel { + button { + $margin: 2px; + margin-bottom: $margin; + position: relative; + border: 0; + border-right: $margin solid transparent; + $padding: 2.5vw; + $font-size: 8vw; + padding: calc(#{$padding} - #{$margin} / 2); + font-size: $font-size; + line-height: 1.2; + background-color: inherit; + font-family: inherit; + color: inherit; + cursor: pointer; + } + + @media screen and (min-width: 768px) { + button { + padding: 12px; + font-size: 1.4em; + } + } + + button:after { + content: ""; + position: absolute; + left: 0px; + top: 0px; + right: 0px; + bottom: 0px; + background-color: rgba(0, 0, 0, 0.2); + } + } } @@ -331,6 +456,7 @@ autocapitalize="off" spellcheck="false" use:focus + bind:this={inputElement} on:keydown={(event) => handleKeyDown(event, kalk)} on:keyup={handleKeyUp} on:input={handleInput} @@ -339,12 +465,26 @@ {error} {/await}
-
- - - - - - -
+ {#if buttonpanel} +
+ +
+ {#each buttonRowValues as value} + + {/each} +
+ +
+ {/if} + {#if numberrow} +
+ {#each numberRowValues as value} + + {/each} +
+ {/if}