diff options
| author | Adam Soltys <[email protected]> | 2022-11-03 14:00:14 -0700 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2022-11-03 14:00:18 -0700 |
| commit | d608c466c30019c4cc7d038f2308ac0e5b204841 (patch) | |
| tree | 1b9e230702431fd4cde777c4b242703b067dc12e /src/components | |
| parent | aa1f1cf0832c70c66b84cfe5e1bb2912a704fea3 (diff) | |
| download | coinos-ui-d608c466c30019c4cc7d038f2308ac0e5b204841.tar.gz coinos-ui-d608c466c30019c4cc7d038f2308ac0e5b204841.zip | |
invoice requests
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Qr.svelte | 73 |
1 files changed, 5 insertions, 68 deletions
diff --git a/src/components/Qr.svelte b/src/components/Qr.svelte index e07906a5..952a905f 100644 --- a/src/components/Qr.svelte +++ b/src/components/Qr.svelte @@ -1,72 +1,9 @@ <script> - import { fade } from 'svelte/transition'; import screenfull from 'screenfull'; - import { browser } from '$app/environment'; - import { onMount, tick } from 'svelte'; - import { copy } from '$lib/utils'; - - export let image, text, qr, fullQr, full; - - let toggle = async () => { - full = !full; - await tick(); - screenfull.toggle(fullQr.firstChild); - }; - - let opts = { - type: 'canvas', - backgroundOptions: { - color: 'rgba(0, 0, 0, 0)' - }, - imageOptions: { - hideBackgroundDots: false - } - }; - - let mask = false; - $: update(text); - let update = async (text, fullscreen) => { - mask = true; - if (!(browser && text)) return; - let { default: QRCodeStyling } = await import('qr-code-styling'); - - opts.data = text; - opts.height = opts.width = 300; - const qrCode = new QRCodeStyling(opts); - - opts.height = opts.width = Math.min(window.innerWidth, window.innerHeight); - const fullQrCode = new QRCodeStyling(opts); - - while (qr && qr.firstChild) qr.removeChild(qr.lastChild); - qrCode.append(qr); - - while (fullQr && fullQr.firstChild) fullQr.removeChild(fullQr.lastChild); - fullQrCode.append(fullQr); - mask = false; - }; + export let src; + let qr; </script> -{#if mask} - <div class="absolute bg-white w-[300px] h-[300px] t-0 l-0 z-10" out:fade /> -{/if} - -<div - bind:this={qr} - on:click={toggle} - on:keydown={toggle} - class:hidden={full} - class="relative overflow-visible" -/> -<div bind:this={fullQr} on:click={toggle} on:keydown={toggle} class:hidden={!full} /> - -<style> - div { - @apply w-[300px] - h-[300px] - rounded-3xl - justify-center - items-center - cursor-pointer - mx-auto; - } -</style> +<div class="w-80 mx-auto my-5 cursor-pointer" bind:this={qr} on:click={() => screenfull.toggle(qr)} on:keydown={() => screenfull.toggle(qr)}> + <img {src} class="mx-auto" /> +</div> |
