diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Footer.svelte | 2 | ||||
| -rw-r--r-- | src/components/Numpad.svelte | 149 | ||||
| -rw-r--r-- | src/components/Password.svelte | 6 | ||||
| -rw-r--r-- | src/components/Pin.svelte | 3 | ||||
| -rw-r--r-- | src/components/Qr.svelte | 2 |
5 files changed, 77 insertions, 85 deletions
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte index 82282465..a33716d4 100644 --- a/src/components/Footer.svelte +++ b/src/components/Footer.svelte @@ -9,7 +9,7 @@ ]; const companyLinks = [ - { url: '/news', titleID: 'news' }, + { url: '/docs', titleID: 'documentation' }, { url: '/support', titleID: 'support' }, { url: '/jobs', titleID: 'jobs' } ]; diff --git a/src/components/Numpad.svelte b/src/components/Numpad.svelte index 74844b71..d74255e0 100644 --- a/src/components/Numpad.svelte +++ b/src/components/Numpad.svelte @@ -6,7 +6,8 @@ export let amount, currency, - fiat = !amount; + fiat = !amount, + submit = undefined; export let amountFiat = amount ? amount * ($selectedRate / sats) : 0; @@ -88,44 +89,12 @@ } }; - function getCaretPosition(editableDiv) { - var caretPos = 0, - sel, - range; - if (window.getSelection) { - sel = window.getSelection(); - if (sel.rangeCount) { - range = sel.getRangeAt(0); - if (range.commonAncestorContainer.parentNode == editableDiv) { - caretPos = range.endOffset; - } - } - } else if (document.selection && document.selection.createRange) { - range = document.selection.createRange(); - if (range.parentElement() == editableDiv) { - var tempEl = document.createElement('span'); - editableDiv.insertBefore(tempEl, editableDiv.firstChild); - var tempRange = range.duplicate(); - tempRange.moveToElementText(tempEl); - tempRange.setEndPoint('EndToEnd', range); - caretPos = tempRange.text.length; - } - } - return caretPos; - } - - $: html = fiat ? f(amountFiat, currency) : s(amountSats); + $: html = fiat ? amountFiat : s(amountSats); let prev = ''; let input = (e) => { - if (amount > sats) { - if (fiat) amountFiat = (Math.round(sats * ($selectedRate / sats))).toString(); - else amountSats = sats; - return warning($t('user.receive.lessThan1BTCWarning')); - } - - if (prev === '0' && html.length === 2) { + if (prev === '0') { prev = ''; html = html.replace('0', ''); } @@ -133,25 +102,53 @@ let sel = getSelection(); let i = sel.focusOffset; - if (!fiat) amountSats = parseInt(html.replace(/,/g, '')); + let clean = html.substr(0,15) + .replace(/[^0-9.,]+/g, '') + .replace('.', 'F') + .replace(/\./g, '') + .replace('F', '.'); + + if (fiat) clean = clean.replace(',', ''); + if (clean !== html) { + html = clean; + i = html.length; + } + + if (amount > sats && html.length > prev.length) { + html = prev; + warning($t('user.receive.lessThan1BTCWarning')); + i--; + } + + if (fiat) { + amountFiat = html; + } else { + amountSats = parseInt(html.replace(/,/g, '')); + } + if (!amountSats) amountSats = null; setTimeout(() => { - let p = prev.split(',')[0].length; - if (html.length > prev.length && p === 3) i++; - if (html.length < prev.length && p === 1 && i > 1) i--; + if (!fiat) { + let p = prev.split(',')[0].length; + if (html.length > prev.length && p === 3) i++; + if (html.length < prev.length && p === 1 && i > 1) i--; + } let node = e.target.childNodes[0]; let range = document.createRange(); - range.setStart(node, i); - range.setEnd(node, i); + console.log('NODE', node, i); + if (node) { + range.setStart(node, i); + range.setEnd(node, i); - let sel = getSelection(); - sel.removeAllRanges(); - sel.addRange(range); + let sel = getSelection(); + sel.removeAllRanges(); + sel.addRange(range); + } - prev = html; + prev = html.toString(); }, 0); }; @@ -162,47 +159,41 @@ sel.removeAllRanges(); sel.addRange(range); }; + + let keydown = (e) => e.key === 'Enter' && (e.preventDefault() || submit.click()); </script> <div class="flex justify-center items-center mb-3 px-3"> <div class="space-y-5"> <div class="text-center"> <div class="text-5xl md:text-6xl font-semibold tracking-widest flex justify-center"> - {#if fiat} - <div class="my-auto">{symbol}</div> - <div - contenteditable - bind:innerHTML={amountFiat} - on:focus={focus} - on:input={input} - class="outline-none" - /> - {:else} - <div>⚡️</div> - <div - contenteditable - bind:innerHTML={html} - on:focus={focus} - on:input={input} - class="outline-none" - /> - {/if} + <div class="my-auto" class:text-5xl={!fiat}>{fiat ? symbol : '⚡️'}</div> + <div + contenteditable + bind:innerHTML={html} + on:focus={focus} + on:input={input} + on:keydown={keydown} + class="outline-none my-auto" + /> + </div> + <div class="mt-2"> + <span class="text-secondary mr-1">{fiat ? amountSatsConverted : amountFiatConverted}</span> + <button + type="button" + on:click={() => { + if (fiat) { + amountSats = parseInt((amountFiat / ($selectedRate / sats)).toFixed(0)); + } else { + amountFiat = + (amountSats * ($selectedRate / sats)).toFixed(2) > 0.0 + ? (amountSats * ($selectedRate / sats)).toFixed(2) + : 0; + } + fiat = !fiat; + }}><Icon icon="swap" style="inline hover:opacity-80" /></button + > </div> - <span class="text-secondary mr-1">{fiat ? amountSatsConverted : amountFiatConverted}</span> - <button - type="button" - on:click={() => { - if (fiat) { - amountSats = parseInt((amountFiat / ($selectedRate / sats)).toFixed(0)); - } else { - amountFiat = - (amountSats * ($selectedRate / sats)).toFixed(2) > 0.0 - ? (amountSats * ($selectedRate / sats)).toFixed(2) - : 0; - } - fiat = !fiat; - }}><Icon icon="swap" style="inline hover:opacity-80" /></button - > </div> <div class="grid grid-cols-3 gap-2 w-[300px] mx-auto"> diff --git a/src/components/Password.svelte b/src/components/Password.svelte index e21bdad1..95a52cac 100644 --- a/src/components/Password.svelte +++ b/src/components/Password.svelte @@ -1,6 +1,6 @@ <script> import { Icon } from '$comp'; - import { failure, post } from '$lib/utils'; + import { focus, failure, post } from '$lib/utils'; import { password as pw, passwordPrompt } from '$lib/store'; export let user; @@ -35,7 +35,7 @@ class="bg-primary" bind:value={password} autocapitalize="none" - autofocus + use:focus /> {:else} <input @@ -45,7 +45,7 @@ class="bg-primary" bind:value={password} autocapitalize="none" - autofocus + use:focus /> {/if} <button diff --git a/src/components/Pin.svelte b/src/components/Pin.svelte index efc1e81b..c7889aa9 100644 --- a/src/components/Pin.svelte +++ b/src/components/Pin.svelte @@ -1,4 +1,5 @@ <script> + import { focus } from "$lib/utils"; import { pin } from '$lib/store'; let pinCode = ''; @@ -12,7 +13,7 @@ <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-20"> <div class="relative top-1/3 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white space-y-5"> <h1 class="text-center text-2xl font-semibold">Please enter your PIN</h1> - <input bind:value={pinCode} autofocus /> + <input bind:value={pinCode} use:focus /> <div class="w-full flex"> <button type="submit" diff --git a/src/components/Qr.svelte b/src/components/Qr.svelte index 31cbe1b3..5fea7cbd 100644 --- a/src/components/Qr.svelte +++ b/src/components/Qr.svelte @@ -10,5 +10,5 @@ on:click={() => screenfull.toggle(qr)} on:keydown={() => screenfull.toggle(qr)} > - <img {src} class="mx-auto" /> +<img {src} class="mx-auto" alt="QR Code" /> </div> |
