From 45daefd9da449749516e8d3216f773c73dd01da7 Mon Sep 17 00:00:00 2001
From: Nayan Gautam <50981692+698969@users.noreply.github.com>
Date: Sat, 27 Nov 2021 15:42:20 +0545
Subject: [PATCH] Add new tutorial to examples

---
 .../examples/13-actions/00-actions/App.svelte | 33 +++++++++++++++++++
 .../13-actions/00-actions/click_outside.js    | 15 +++++++++
 .../examples/13-actions/00-actions/meta.json  |  3 ++
 3 files changed, 51 insertions(+)
 create mode 100644 site/content/examples/13-actions/00-actions/App.svelte
 create mode 100644 site/content/examples/13-actions/00-actions/click_outside.js
 create mode 100644 site/content/examples/13-actions/00-actions/meta.json

diff --git a/site/content/examples/13-actions/00-actions/App.svelte b/site/content/examples/13-actions/00-actions/App.svelte
new file mode 100644
index 0000000000..4b1660c97a
--- /dev/null
+++ b/site/content/examples/13-actions/00-actions/App.svelte
@@ -0,0 +1,33 @@
+<script>
+	import { clickOutside } from "./click_outside.js";
+
+	let showModal = true;
+
+	function handleOutclick(){
+		showModal = false;
+	}
+</script>
+
+<style>
+	.box {
+		--width: 100px;
+		--height: 100px;
+		position: absolute;
+		width: var(--width);
+		height: var(--height);
+		left: calc(50% - var(--width) / 2);
+		top: calc(50% - var(--height) / 2);
+		border-radius: 4px;
+		background-color: #ff3e00;
+		color: #fff;
+		text-align: center;
+		font-style: bold;
+	}
+</style>
+
+<button on:click={() => (showModal = true)}>Show Modal</button>
+{#if showModal}
+	<div class="box" use:clickOutside on:outclick={handleOutclick}>
+		Click outside me!
+	</div>
+{/if}
\ No newline at end of file
diff --git a/site/content/examples/13-actions/00-actions/click_outside.js b/site/content/examples/13-actions/00-actions/click_outside.js
new file mode 100644
index 0000000000..f275a0d001
--- /dev/null
+++ b/site/content/examples/13-actions/00-actions/click_outside.js
@@ -0,0 +1,15 @@
+export function clickOutside(node) {
+	const handleClick = (event) => {
+		if (!node.contains(event.target)) {
+			node.dispatchEvent(new CustomEvent("outclick"));
+		}
+	};
+
+	document.addEventListener("click", handleClick, true);
+
+	return {
+		destroy() {
+			document.removeEventListener("click", handleClick, true);
+		},
+	};
+};
diff --git a/site/content/examples/13-actions/00-actions/meta.json b/site/content/examples/13-actions/00-actions/meta.json
new file mode 100644
index 0000000000..463fc963af
--- /dev/null
+++ b/site/content/examples/13-actions/00-actions/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "The use directive"
+}
\ No newline at end of file