From 59d43ba294e49cbb46ea4d2d0ddb0d22bbc7ba6e Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Tue, 4 Oct 2022 20:28:29 -0700
Subject: tipping fixes

---
 src/components/Qr.svelte | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

(limited to 'src/components/Qr.svelte')

diff --git a/src/components/Qr.svelte b/src/components/Qr.svelte
index 099d5fa5..23282589 100644
--- a/src/components/Qr.svelte
+++ b/src/components/Qr.svelte
@@ -1,4 +1,5 @@
 <script>
+	import { fly, fade } from 'svelte/transition';
 	import screenfull from 'screenfull';
 	import { browser } from '$app/environment';
 	import { onMount, tick } from 'svelte';
@@ -7,16 +8,14 @@
 	export let image, text, qr, fullQr, full;
 
 	let toggle = async () => {
+		console.log('FULL', full);
 		full = !full;
 		await tick();
 		screenfull.toggle(fullQr.firstChild);
 	};
 
 	let opts = {
-		height: 300,
-		width: 300,
 		type: 'canvas',
-		data: text,
 		backgroundOptions: {
 			color: 'rgba(0, 0, 0, 0)'
 		},
@@ -33,26 +32,33 @@
 		}
 	};
 
+	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 = Math.min(window.innerWidth, window.innerHeight);
-		opts.width = opts.height;
+		opts.height = opts.width = Math.min(window.innerWidth, window.innerHeight);
 		const fullQrCode = new QRCodeStyling(opts);
 
-		while (qr.firstChild) qr.removeChild(qr.lastChild);
+		while (qr && qr.firstChild) qr.removeChild(qr.lastChild);
 		qrCode.append(qr);
 
-		while (fullQr.firstChild) fullQr.removeChild(fullQr.lastChild);
+		while (fullQr && fullQr.firstChild) fullQr.removeChild(fullQr.lastChild);
 		fullQrCode.append(fullQr);
+		mask = false;
 	};
 </script>
 
-<div bind:this={qr} on:click={toggle} class:hidden={full} />
+{#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} class:hidden={full} class="relative overflow-visible" />
 <div bind:this={fullQr} on:click={toggle} class:hidden={!full} />
 
 <style>
-- 
cgit v1.2.3