From 22fca24daf2cb2207ce019f21ffeeb7b90ecc688 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 6 Mar 2018 00:21:06 +0100
Subject: [PATCH] Remove highlight on click outside of the highlighted area

---
 assets/scripts/src/overlay.js |  8 ++++++++
 assets/scripts/src/sholo.js   | 14 ++++++++++++++
 index.html                    |  3 ++-
 3 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/assets/scripts/src/overlay.js b/assets/scripts/src/overlay.js
index da1b5a1..e23fe71 100644
--- a/assets/scripts/src/overlay.js
+++ b/assets/scripts/src/overlay.js
@@ -79,6 +79,14 @@ export default class Overlay {
     this.draw();
   }
 
+  /**
+   * Returns the currently selected element
+   * @returns {null|*}
+   */
+  getHighlightedElement() {
+    return this.highlightedElement;
+  }
+
   /**
    * Removes the overlay and cancel any listeners
    */
diff --git a/assets/scripts/src/sholo.js b/assets/scripts/src/sholo.js
index e6b0c89..e166dd5 100644
--- a/assets/scripts/src/sholo.js
+++ b/assets/scripts/src/sholo.js
@@ -24,6 +24,7 @@ export default class Sholo {
     this.onScroll = this.onScroll.bind(this);
     this.onResize = this.onResize.bind(this);
     this.onKeyUp = this.onKeyUp.bind(this);
+    this.onMouseUp = this.onMouseUp.bind(this);
 
     // Event bindings
     this.bind();
@@ -38,6 +39,19 @@ export default class Sholo {
     this.document.addEventListener('DOMMouseScroll', this.onScroll, false);
     this.window.addEventListener('resize', this.onResize, false);
     this.window.addEventListener('keyup', this.onKeyUp, false);
+    this.window.addEventListener('mouseup', this.onMouseUp, false);
+  }
+
+  onMouseUp(e) {
+    const highlightedElement = this.overlay.getHighlightedElement();
+    if (!highlightedElement || !highlightedElement.node) {
+      return;
+    }
+
+    // Remove the overlay If clicked outside the highlighted element
+    if (!highlightedElement.node.contains(e.target)) {
+      this.overlay.clear();
+    }
   }
 
   /**
diff --git a/index.html b/index.html
index a271f70..e2b0cf3 100644
--- a/index.html
+++ b/index.html
@@ -46,7 +46,8 @@
 <script>
   const sholo = new Sholo({
     animate: true,
-    opacity: 0.8
+    opacity: 0.8,
+    padding: 0
   });
   sholo.highlight('.section__header');
 </script>