From 1600d59327258fd011fcd1a7c50cd4b6f7be129f Mon Sep 17 00:00:00 2001
From: swyx <wanshawn@amazon.com>
Date: Sun, 1 Nov 2020 23:04:28 +0800
Subject: [PATCH] add onclickoutside

---
 CHANGELOG.md |  2 ++
 README.md    | 35 ++++++++++++++++++++++++++++++-----
 package.json |  1 +
 src/index.ts | 37 +++++++++++++++++++++++++++++++++----
 4 files changed, 66 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 95c73dc..951650c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,3 +8,5 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 ## 0.0.1
+
+hello world
\ No newline at end of file
diff --git a/README.md b/README.md
index 4a69f0b..70c769f 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,29 @@ do not rely on this library yet!
 
 ### `clickOutside`
 
-to be completed
+`export function clickOutside(node: HTMLElement, params: {enabled: boolean, cb: Function }): ReturnType<Action>`
+
+Call callback when user clicks outside a given element.
+
+Demo: https://svelte.dev/repl/dae848c2157e48ab932106779960f5d5?version=3.19.2
+
+
+```svelte
+<script>
+  import {clickOutside} from 'svelte-actions'
+  let open = true;
+</script>
+
+
+<div use:clickOutside={{ enabled: open, cb: () => open = false }}>
+   <button on:click={() => open = true}>Open</button>
+   {#if open}
+    <span>
+      Opened
+    </span>
+  {/if}
+</div>
+```
 
 ### `longpress`
 
@@ -22,10 +44,13 @@ Demo: https://svelte.dev/tutorial/adding-parameters-to-actions
 
 ```svelte
 <script>
-  import {lazyLoad} from 'svelte-actions'
+  import {longpress} from 'svelte-actions'
 </script>
 
-<img use:lazyLoad={{src:"/myimage"}} alt="">
+<button use:longpress={duration}
+    on:longpress="{() => pressed = true}"
+    on:mouseenter="{() => pressed = false}"
+  >press and hold</button>
 ```
 
 ### `pannable`
@@ -34,7 +59,7 @@ Demo: https://svelte.dev/tutorial/adding-parameters-to-actions
 
 Creates `panStart`, `panMove`, `panEnd` events so you can drag elements. Demo: https://svelte.dev/tutorial/actions
 
-### `lazyLoad`
+### `lazyload`
 
 `export function lazyLoad(node: HTMLElement, attributes: Object): ReturnType<Action>`
 
@@ -44,7 +69,7 @@ Demo: https://svelte.dev/repl/f12988de576b4bf9b541a2a59eb838f6?version=3.23.2
 
 ```svelte
 <script>
-  import {lazyLoad} from 'svelte-actions'
+  import {lazyload} from 'svelte-actions'
 </script>
 
 <img use:lazyLoad={{src:"/myimage"}} alt="">
diff --git a/package.json b/package.json
index 143f22a..5f08cc7 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "tsc",
+    "preversion": "npm run build",
     "version": "auto-changelog -p --template keepachangelog && git add CHANGELOG.md",
     "prepublishOnly": "git push && git push --tags && gh-release"
   },
diff --git a/src/index.ts b/src/index.ts
index 56eb6d4..fc12e40 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -3,10 +3,39 @@ type Action = (node: HTMLElement, parameters: any) => {
 	destroy?: () => void
 }
 
+/**
+ * 
+ * Call callback when user clicks outside a given element
+ * 
+ * Usage:
+ * <div use:clickOutside={{ enabled: open, cb: () => open = false }}>
+ * 
+ * Demo: https://svelte.dev/repl/dae848c2157e48ab932106779960f5d5?version=3.19.2
+ * 
+ */
+export function clickOutside(node: HTMLElement, params: {enabled: boolean, cb: Function }): ReturnType<Action> {
+  const { enabled: initialEnabled, cb } = params
+
+    const handleOutsideClick = ({ target }: MouseEvent) => {
+      if (!node.contains(target as Node)) cb(); // typescript hack, not sure how to solve without asserting as Node
+    };
+
+    function update({enabled}: {enabled: boolean}) {
+      if (enabled) {
+        window.addEventListener('click', handleOutsideClick);
+      } else {
+        window.removeEventListener('click', handleOutsideClick);
+      }
+    }
+    update({ enabled: initialEnabled });
+    return {
+      update,
+      destroy() {
+        window.removeEventListener( 'click', handleOutsideClick );
+      }
+    };
 
-// export function clickOutside(): ReturnType<Action> {
-
-// }
+}
 
 
 /**
@@ -113,7 +142,7 @@ export function pannable(node: HTMLElement): ReturnType<Action> {
  * Demo: https://svelte.dev/repl/f12988de576b4bf9b541a2a59eb838f6?version=3.23.2
  * 
  */
-export function lazyLoad(node: HTMLElement, attributes: Object): ReturnType<Action> { 
+export function lazyload(node: HTMLElement, attributes: Object): ReturnType<Action> { 
 	let intersecting = false;
 
 	const handleIntersection: IntersectionObserverCallback = (entries) => {