mirror of
https://github.com/PaddiM8/kalker.git
synced 2025-01-31 08:59:15 +01:00
Fixed kalk_web browser compatibility problems
This commit is contained in:
PaddiM8
parent
693a53ddc7
commit
e31f983c21
12
kalk_web/package-lock.json
generated
12
kalk_web/package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@paddim8/kalk-component",
|
||||
"version": "1.0.0",
|
||||
"version": "1.0.6",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
@ -7289,6 +7289,11 @@
|
||||
"safe-buffer": "^5.0.1"
|
||||
}
|
||||
},
|
||||
"shadow-selection-polyfill": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/shadow-selection-polyfill/-/shadow-selection-polyfill-1.1.0.tgz",
|
||||
"integrity": "sha512-ntz8P6DLEFpx7gikeXZ4gSi3APE2D+BP0rKnnaBzED+Lm8je8nkNcayy6kGWPEDWMFbtm+Yvd1ONFaXcsVWn2w=="
|
||||
},
|
||||
"shebang-command": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
|
||||
@ -7915,6 +7920,11 @@
|
||||
"strip-indent": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"svelte-tag": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/svelte-tag/-/svelte-tag-1.0.1.tgz",
|
||||
"integrity": "sha512-d3+bXGCZ/aSfFc1QBBGJFFeiQ+sukks+GrBQbk1YTYxA6OhlfFbWfFcyBaz7ONhspOBN9gbRq4+AZYhORALQ+A=="
|
||||
},
|
||||
"svgo": {
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@paddim8/kalk-component",
|
||||
"version": "1.0.6",
|
||||
"version": "1.0.7",
|
||||
"description": "A Svelte component for kalk, a calculator that supports user-defined functions and variables.",
|
||||
"svelte": "src/main.ts",
|
||||
"main": "public/build/bundle.js",
|
||||
@ -46,6 +46,7 @@
|
||||
"svelte-check": "^1.1.15",
|
||||
"svelte-loader-hot": "^0.3.1",
|
||||
"svelte-preprocess": "^4.6.1",
|
||||
"svelte-tag": "^1.0.1",
|
||||
"terser-webpack-plugin": "^4.2.3",
|
||||
"ts-loader": "^8.0.2",
|
||||
"ts-node": "^9.0.0",
|
||||
|
||||
@ -1,20 +1,19 @@
|
||||
<script lang="ts">
|
||||
export let byUser = false;
|
||||
export let byuser = false;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
p {
|
||||
<style lang="scss">
|
||||
.console-line-tg638d3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 5px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.result {
|
||||
.console-line-tg638d3.result {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:options tag="console-line" />
|
||||
<p class:result={!byUser}>
|
||||
<p class="console-line-tg638d3" class:result={!byuser}>
|
||||
<slot />
|
||||
</p>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { afterUpdate } from "svelte";
|
||||
import type { Context } from "@paddim8/kalk";
|
||||
import ConsoleLine from "./ConsoleLine.svelte";
|
||||
|
||||
// Props, HTML doesn't recognise them if they're not like this
|
||||
export let identifiercolor = "cornflowerblue";
|
||||
@ -57,7 +58,10 @@
|
||||
href="https://kalk.netlify.app/#usage"
|
||||
target="blank">Link to usage guide</a>`;
|
||||
} else {
|
||||
const [result, success] = calculate(kalk, input);
|
||||
const [result, success] = calculate(
|
||||
kalk,
|
||||
input.replace(/\s+/g, "") // Temporary fix, since it for some reason complains about spaces on chrome
|
||||
);
|
||||
output = success
|
||||
? highlight(result)[0]
|
||||
: `<span style="color: ${errorcolor}">${result}</span>`;
|
||||
@ -119,16 +123,13 @@
|
||||
}
|
||||
|
||||
function getCursorPos(element: HTMLInputElement): number {
|
||||
const selection = window.getSelection();
|
||||
if (selection.rangeCount !== 0) {
|
||||
const selection = document.getSelection();
|
||||
const range = selection.getRangeAt(0);
|
||||
const preCaretRange = range.cloneRange();
|
||||
preCaretRange.selectNodeContents(element);
|
||||
preCaretRange.setEnd(range.endContainer, range.endOffset);
|
||||
return preCaretRange.toString().length;
|
||||
}
|
||||
|
||||
return 0;
|
||||
return preCaretRange.toString().length;
|
||||
}
|
||||
|
||||
function setCursorPos(element: HTMLElement, indexToSelect: number) {
|
||||
@ -187,7 +188,7 @@
|
||||
if (!input) return ["", 0];
|
||||
let result = input;
|
||||
let offset = 0;
|
||||
result = result.replaceAll(
|
||||
result = result.replace(
|
||||
/(?<identifier>[^!-@\s_|^⌊⌋⌈⌉]+(_\d+)?)|(?<op>[+\-/*%^!])/g,
|
||||
(substring, identifier, _, op) => {
|
||||
if (identifier) {
|
||||
@ -239,7 +240,7 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.calculator {
|
||||
.calculator-tg638d3 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
@ -247,7 +248,6 @@
|
||||
box-sizing: border-box;
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.output {
|
||||
display: flex;
|
||||
@ -296,19 +296,19 @@
|
||||
color: gray;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:options tag="kalk-calculator" />
|
||||
<div class="calculator">
|
||||
<div class="calculator-tg638d3">
|
||||
<div class="output" bind:this={outputElement}>
|
||||
<slot />
|
||||
{#each outputLines as line}
|
||||
<console-line byUser={line[1]}>
|
||||
<ConsoleLine byuser={line[1]}>
|
||||
{#if line[1]}
|
||||
<span style="color: {promptcolor}">>></span>
|
||||
{/if}
|
||||
{@html line[0]}
|
||||
</console-line>
|
||||
</ConsoleLine>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="input-area">
|
||||
|
||||
@ -1,6 +1,29 @@
|
||||
import "./public-path.js";
|
||||
import KalkCalculator from './KalkCalculator.svelte';
|
||||
import ConsoleLine from './ConsoleLine.svelte';
|
||||
import component from "svelte-tag";
|
||||
|
||||
new component({
|
||||
component: KalkCalculator,
|
||||
tagname: "kalk-calculator",
|
||||
attributes: [
|
||||
"identifiercolor",
|
||||
"operatorcolor",
|
||||
"promptcolor",
|
||||
"errorcolor",
|
||||
"linkcolor",
|
||||
"hinttext",
|
||||
"autofocus"
|
||||
]
|
||||
});
|
||||
|
||||
new component({
|
||||
component: ConsoleLine,
|
||||
tagname: "console-line",
|
||||
attributes: ["byuser"]
|
||||
});
|
||||
|
||||
export {
|
||||
KalkCalculator,
|
||||
ConsoleLine,
|
||||
}
|
||||
@ -61,7 +61,7 @@ const config: webpack.Configuration & WebpackDevServer.Configuration = {
|
||||
use: {
|
||||
loader: 'svelte-loader-hot',
|
||||
options: {
|
||||
customElement: true,
|
||||
//customElement: true,
|
||||
dev: !prod,
|
||||
emitCss: prod,
|
||||
hotReload: !prod,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user