From da1eaf278ac1eeda044f881ebef29a8fc0fd444d Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Sun, 1 Aug 2021 14:16:27 -0700
Subject: [PATCH] Created click outside action event.

---
 src/lib/Modal.svelte    | 21 ++++++++++++++++++---
 src/lib/clickOutside.js | 16 ++++++++++++++++
 src/routes/index.svelte |  4 ++--
 3 files changed, 36 insertions(+), 5 deletions(-)
 create mode 100644 src/lib/clickOutside.js

diff --git a/src/lib/Modal.svelte b/src/lib/Modal.svelte
index a5f5631..152ca07 100644
--- a/src/lib/Modal.svelte
+++ b/src/lib/Modal.svelte
@@ -1,8 +1,10 @@
 <script>
 	import { fly, fade } from 'svelte/transition';
 	import Portal from './Portal.svelte';
+	import { clickOutside } from './clickOutside';
 
 	export let isModalOpen = false;
+	export let background = true;
 
 	function closeModal() {
 		isModalOpen = false;
@@ -11,11 +13,18 @@
 
 {#if isModalOpen}
 	<Portal>
-		<div class="modal-wrapper" transition:fly={{ opacity: 0, y: 100 }}>
-			<button on:click={closeModal} aria-label="Close Modal Box">Close</button>
+		<div
+			use:clickOutside
+			on:click-outside={closeModal}
+			class="modal-wrapper"
+			transition:fly={{ opacity: 0, y: 100 }}
+		>
+			<button class="close-btn" on:click={closeModal} aria-label="Close Modal Box">Close</button>
 			<slot />
 		</div>
-		<div on:click={closeModal} transition:fade class="background" />
+		{#if background}
+			<div on:click={closeModal} transition:fade class="background" />
+		{/if}
 	</Portal>
 {/if}
 
@@ -37,4 +46,10 @@
 		position: fixed;
 		z-index: 100;
 	}
+
+	.close-btn {
+		position: absolute;
+		top: -10px;
+		right: -10px;
+	}
 </style>
diff --git a/src/lib/clickOutside.js b/src/lib/clickOutside.js
new file mode 100644
index 0000000..2e3033a
--- /dev/null
+++ b/src/lib/clickOutside.js
@@ -0,0 +1,16 @@
+export function clickOutside(node) {
+  function handleClick(event) {
+    if(node && !node.contains(event.target) && !event.defaultPrevented) {
+      node.dispatchEvent(
+        new CustomEvent('click-outside')
+      )
+    }
+  }
+  document.addEventListener('click', handleClick, true);
+
+  return {
+    destroy() {
+      document.removeEventListener('click', handleClick, true);
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index ce719ce..23e67fd 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -19,7 +19,7 @@
 
 <h1>Welcome to Level Up UI {search}</h1>
 
-<Modal {isModalOpen}>
+<Modal bind:isModalOpen background={true}>
 	<div style="background: white; box-shadow: 1px 1px 4px rgba(0,0,0,0.3);">
 		<Field bind:value={search} label="Search" insrustions="Type to search" placeholder="Joe" />
 		<Field value={0} label="Number" type="number" />
@@ -34,7 +34,7 @@
 	>Error Message</button
 >
 
-<!-- <button on:click={() => (isModalOpen = true)}>Open Modal Form</button> -->
+<button on:click={() => (isModalOpen = true)}>Open Modal Form</button>
 
 <SearchFilter {items} bind:search />