fix: handle strictClickHandling visa CSS + pointer-events instead o…

…f complex/unstable JS
josias-r · Nov 4, 2022 · 8f86bbe · 8f86bbe
1 parent 377fcf5
commit 8f86bbe
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 11 deletions.
diff --git a/src/lib/boarding.ts b/src/lib/boarding.ts
@@ -7,6 +7,8 @@ import {
   SHOULD_OUTSIDE_CLICK_NEXT,
   ALLOW_KEYBOARD_CONTROL,
   SHOULD_STRICT_CLICK_HANDLE,
+  CLASS_NO_CLICK_BODY,
+  CLASS_STRICT_CLICK_BODY,
 } from "./common/constants";
 import { assertIsElement } from "./common/utils";
 import HighlightElement from "./core/highlight-element";
@@ -102,12 +104,8 @@ class Boarding {
       );
     }
 
-    // attach eventListeners BEFORE setting highlighting element
-    this.attachEventListeners();
-
-    this.isActivated = true;
     this.currentStep = index;
-    this.overlay.highlight(element);
+    this.activateBoarding(element);
   }
 
   /**
@@ -125,11 +123,8 @@ class Boarding {
     if (!element) {
       return;
     }
-    // attach eventListeners BEFORE setting highlighting element
-    this.attachEventListeners();
 
-    this.isActivated = true;
-    this.overlay.highlight(element);
+    this.activateBoarding(element);
   }
 
   /**
@@ -193,6 +188,11 @@ class Boarding {
     this.isActivated = false;
     this.overlay.clear(immediate);
     this.removeEventListeners();
+    // remove strict click handling classes, in case they got added
+    document.body.classList.remove(
+      CLASS_NO_CLICK_BODY,
+      CLASS_STRICT_CLICK_BODY
+    );
   }
 
   /**
@@ -230,6 +230,23 @@ class Boarding {
     return this.steps;
   }
 
+  /**
+   * Everything that needs to happen everytime boarding is activated (started tour, or highlighted specific element)
+   */
+  private activateBoarding(element: HighlightElement) {
+    // attach eventListeners BEFORE setting highlighting element
+    this.attachEventListeners();
+
+    this.isActivated = true;
+    this.overlay.highlight(element);
+
+    if (this.options.strictClickHandling === "block-all") {
+      document.body.classList.add(CLASS_NO_CLICK_BODY);
+    } else if (this.options.strictClickHandling) {
+      document.body.classList.add(CLASS_STRICT_CLICK_BODY);
+    }
+  }
+
   /**
    * Binds any DOM events listeners
    * @todo: add throttling in all the listeners

diff --git a/src/lib/common/constants.ts b/src/lib/common/constants.ts
@@ -3,7 +3,6 @@ export const OVERLAY_PADDING = 10;
 export const POPOVER_OFFSET = 10;
 
 export const SHOULD_ANIMATE_OVERLAY = true;
-export const SHOULD_STRICT_CLICK_HANDLE = true;
 export const SHOULD_OUTSIDE_CLICK_CLOSE = true;
 export const ALLOW_KEYBOARD_CONTROL = true;
 export const SHOULD_OUTSIDE_CLICK_NEXT = false;
@@ -24,6 +23,10 @@ const CLASS_NAVIGATION_BTNS = "boarding-navigation-btns";
 export const CLASS_CUTOUT = "boarding-coutout-svg";
 export const CLASS_ACTIVE_HIGHLIGHTED_ELEMENT = "boarding-highlighted-element";
 
+export const SHOULD_STRICT_CLICK_HANDLE = true;
+export const CLASS_NO_CLICK_BODY = "boarding-no-pointer-events";
+export const CLASS_STRICT_CLICK_BODY = "boarding-strict-pointer-events";
+
 export const CLASS_BTN_DISABLED = "boarding-disabled";
 export const CLASS_CLOSE_ONLY_BTN = "boarding-close-only-btn";
 

diff --git a/styles/main.css b/styles/main.css
@@ -12,6 +12,28 @@ div#boarding-popover-item.boarding-popover-item-animated {
   animation: boardingFadeIn 0.4s;
 }
 
+/* strict or disabled pointer events */
+body.boarding-strict-pointer-events,
+body.boarding-strict-pointer-events
+  *:not(.boarding-highlighted-element *):not(#boarding-popover-item
+    *):not(.boarding-coutout-svg
+    p
+    *):not(.boarding-highlighted-element):not(#boarding-popover-item):not(.boarding-coutout-svg
+    p),
+body.boarding-no-pointer-events,
+body.boarding-no-pointer-events
+  *:not(#boarding-popover-item *):not(.boarding-coutout-svg
+    p
+    *):not(#boarding-popover-item):not(.boarding-coutout-svg p) {
+  pointer-events: none !important;
+}
+/* enable pointer-events where it makes sense */
+div#boarding-popover-item,
+.boarding-coutout-svg p,
+body.boarding-strict-pointer-events .boarding-highlighted-element {
+  pointer-events: auto !important;
+}
+
 /* popover */
 div#boarding-popover-item {
   --boarding-popover-padding: 15px;
@@ -21,7 +43,6 @@ div#boarding-popover-item {
   z-index: 1000000000;
   background: #fff;
   color: #000;
-  pointer-events: auto;
 }
 
 /* tip */