mirror of
https://github.com/PaddiM8/kalker.git
synced 2024-12-13 10:00:51 +01:00
kalk_web button panel
This commit is contained in:
PaddiM8
parent
36742abf5a
commit
d2e460f229
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@paddim8/kalk-component",
|
"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.",
|
"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",
|
||||||
|
|||||||
@ -31,13 +31,35 @@
|
|||||||
border-radius: 7px;
|
border-radius: 7px;
|
||||||
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<section id="wrapper">
|
<section id="wrapper">
|
||||||
<div class="calculator">
|
<div class="calculator">
|
||||||
<kalk-calculator hinttext="test" autofocus="true">
|
<kalk-calculator hinttext="test" autofocus="true" buttonpanel="true" numberrow="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>
|
||||||
|
|||||||
@ -12,14 +12,36 @@
|
|||||||
export let linkcolor = "cornflowerblue";
|
export let linkcolor = "cornflowerblue";
|
||||||
export let hinttext = "";
|
export let hinttext = "";
|
||||||
export let autofocus = false;
|
export let autofocus = false;
|
||||||
|
export let buttonpanel = false;
|
||||||
|
export let numberrow = false;
|
||||||
|
|
||||||
type Kalk = typeof import("@paddim8/kalk");
|
type Kalk = typeof import("@paddim8/kalk");
|
||||||
|
|
||||||
let outputLines: [value: string, byUser: boolean][] = [];
|
let outputLines: [value: string, byUser: boolean][] = [];
|
||||||
|
let buttonRowValues = [
|
||||||
|
"+",
|
||||||
|
"-",
|
||||||
|
"*",
|
||||||
|
"/",
|
||||||
|
"^",
|
||||||
|
"=",
|
||||||
|
".",
|
||||||
|
"(",
|
||||||
|
"√",
|
||||||
|
"π",
|
||||||
|
",",
|
||||||
|
"%",
|
||||||
|
"Σ",
|
||||||
|
"⌊",
|
||||||
|
"⌈",
|
||||||
|
"ϕ",
|
||||||
|
];
|
||||||
|
let numberRowValues = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
|
||||||
let outputElement: HTMLElement;
|
let outputElement: HTMLElement;
|
||||||
let kalkContext: Context;
|
let kalkContext: Context;
|
||||||
let selectedLineOffset: number = 0;
|
let selectedLineOffset: number = 0;
|
||||||
let calculatorElement: HTMLElement;
|
let calculatorElement: HTMLElement;
|
||||||
|
let inputElement: HTMLInputElement;
|
||||||
|
|
||||||
afterUpdate(() => {
|
afterUpdate(() => {
|
||||||
// Scroll to bottom
|
// Scroll to bottom
|
||||||
@ -120,6 +142,52 @@
|
|||||||
setCursorPos(target, cursorPos - offset);
|
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) {
|
function focus(element: HTMLInputElement) {
|
||||||
if (autofocus) element.focus();
|
if (autofocus) element.focus();
|
||||||
}
|
}
|
||||||
@ -210,6 +278,10 @@
|
|||||||
newSubstring = "π";
|
newSubstring = "π";
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
case "phi": {
|
||||||
|
newSubstring = "ϕ";
|
||||||
|
break;
|
||||||
|
}
|
||||||
case "gamma": {
|
case "gamma": {
|
||||||
newSubstring = "Γ";
|
newSubstring = "Γ";
|
||||||
break;
|
break;
|
||||||
@ -300,6 +372,59 @@
|
|||||||
color: gray;
|
color: gray;
|
||||||
background-color: transparent;
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
@ -331,6 +456,7 @@
|
|||||||
autocapitalize="off"
|
autocapitalize="off"
|
||||||
spellcheck="false"
|
spellcheck="false"
|
||||||
use:focus
|
use:focus
|
||||||
|
bind:this={inputElement}
|
||||||
on:keydown={(event) => handleKeyDown(event, kalk)}
|
on:keydown={(event) => handleKeyDown(event, kalk)}
|
||||||
on:keyup={handleKeyUp}
|
on:keyup={handleKeyUp}
|
||||||
on:input={handleInput}
|
on:input={handleInput}
|
||||||
@ -339,12 +465,26 @@
|
|||||||
<span style="color: {errorcolor}">{error}</span>
|
<span style="color: {errorcolor}">{error}</span>
|
||||||
{/await}
|
{/await}
|
||||||
</section>
|
</section>
|
||||||
<section class="input-buttons">
|
{#if buttonpanel}
|
||||||
<button>+</button>
|
<section class="button-panel">
|
||||||
<button>-</button>
|
<button
|
||||||
<button>*</button>
|
class="arrow left"
|
||||||
<button>/</button>
|
on:click={(e) => handleArrowClick(e, true)}>←</button>
|
||||||
<button>^</button>
|
<div class="text-input-buttons">
|
||||||
<button>(</button>
|
{#each buttonRowValues as value}
|
||||||
</section>
|
<button on:click={handleButtonClick}>{value}</button>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
class="arrow right"
|
||||||
|
on:click={(e) => handleArrowClick(e, false)}>→</button>
|
||||||
|
</section>
|
||||||
|
{/if}
|
||||||
|
{#if numberrow}
|
||||||
|
<section class="number-row">
|
||||||
|
{#each numberRowValues as value}
|
||||||
|
<button on:click={handleButtonClick}>{value}</button>
|
||||||
|
{/each}
|
||||||
|
</section>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user