product tour id refactor and nested element detection

Author: LucaB01

.DS_Store

@@ -1,6 +1,6 @@
 {
   "name": "gleap",
-  "version": "14.0.3",
+  "version": "14.0.4",
   "main": "build/cjs/index.js",
   "module": "build/esm/index.mjs",
   "exports": {

build/cjs/index.js

@@ -106,8 +106,12 @@ export default class GleapProductTours {
                 const element = gleapTourObj.getActiveElement();
 
                 if (step?.mode === "CLICK" && evnt?.target !== element) {
-                    // Ignore clicks outside of the actual element.
-                    return;
+                    const isInsideElement = element.contains(evnt?.target);
+
+                    if (!isInsideElement) {
+                        // Ignore clicks outside of the actual element.
+                        return;
+                    }
                 }
 
                 if ((element && element.tagName === 'INPUT') || step.mode === "INPUT" || evnt?.target?.id.includes("tooltip-svg")) {

build/esm/index.mjs

@@ -224,8 +224,18 @@ const GleapTours = function () {
     }
     function highlight(step, attemptTime = 2000) {
         const { element } = step;
-        let elemObj = typeof element === "string" ? document.querySelector(element) : element;
-
+        let elemObj = element;
+        if (typeof elemObj === "string") {
+            try {
+                elemObj = document.querySelector(element);
+            } catch (error) {
+                // This will escape colons within IDs but not affect pseudo-classes or other valid uses of colons
+                let refactoredElement = element.replace(/(#[^#\s]+)/g, function(match) {
+                    return match.replace(/:/g, '\\:');
+                });
+                elemObj = document.querySelector(refactoredElement);
+            }            
+        }
         if (element && !elemObj && attemptTime >= 0) {
             setTimeout(() => {
                 hidePopover();