From 37f5ac4896f505595bd79e283c81276bd9747c34 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sun, 4 Mar 2018 15:49:15 +0100
Subject: [PATCH] Handle non-existing elements

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

diff --git a/assets/scripts/src/overlay.js b/assets/scripts/src/overlay.js
index a97ad0e..0a03025 100644
--- a/assets/scripts/src/overlay.js
+++ b/assets/scripts/src/overlay.js
@@ -11,6 +11,7 @@ export default class Overlay {
     this.lastSelectedPosition = new Position({});
 
     this.window = window;
+    this.document = document;
 
     this.prepareContext();
     this.setSize();
@@ -18,7 +19,7 @@ export default class Overlay {
 
   // Prepares the overlay
   prepareContext() {
-    const overlay = document.createElement('canvas');
+    const overlay = this.document.createElement('canvas');
 
     this.overlay = overlay;
     this.context = overlay.getContext('2d');
@@ -34,7 +35,6 @@ export default class Overlay {
   // Highlights the dom element on the screen
   highlight(element) {
     if (!element) {
-      // @todo - clearing the overlay
       return;
     }
 
@@ -48,6 +48,10 @@ export default class Overlay {
     this.draw();
   }
 
+  clear() {
+    this.document.body.removeChild(this.overlay);
+  }
+
   draw() {
     // Reset the overlay
     this.context.clearRect(0, 0, this.overlay.width, this.overlay.height);
@@ -56,15 +60,15 @@ export default class Overlay {
 
     // Cut out the cleared region
     this.context.clearRect(
-      this.selectedPosition.left - window.scrollX,
-      this.selectedPosition.top - window.scrollY,
+      this.selectedPosition.left - this.window.scrollX,
+      this.selectedPosition.top - this.window.scrollY,
       (this.selectedPosition.right - this.selectedPosition.left),
       (this.selectedPosition.bottom - this.selectedPosition.top),
     );
 
     // Append the overlay if not there already
     if (!this.overlay.parentNode) {
-      document.body.appendChild(this.overlay);
+      this.document.body.appendChild(this.overlay);
     }
   }
 
diff --git a/assets/scripts/src/sholo.js b/assets/scripts/src/sholo.js
index 235df89..4136a09 100644
--- a/assets/scripts/src/sholo.js
+++ b/assets/scripts/src/sholo.js
@@ -21,7 +21,11 @@ export default class Sholo {
       throw new Error('Element can only be string or the dom element');
     }
 
-    const element = new Element(domElement);
-    this.overlay.highlight(element);
+    if (domElement) {
+      const element = new Element(domElement);
+      this.overlay.highlight(element);
+    } else {
+      this.overlay.clear();
+    }
   }
 }
diff --git a/index.html b/index.html
index 06bf7d2..3c7b4cd 100644
--- a/index.html
+++ b/index.html
@@ -46,6 +46,7 @@
 <script>
   const nodesToSelect = [
     '.section__header',
+    'asdfsfd',
     '.section__how',
     '.section__examples'
   ];
-- 
GitLab