v13.5.15

Author: boehlerlukas

build/cjs/index.js

@@ -1,6 +1,6 @@
 {
   "name": "gleap",
-  "version": "13.5.14",
+  "version": "13.5.15",
   "main": "build/cjs/index.js",
   "module": "build/esm/index.mjs",
   "exports": {
@@ -70,6 +70,7 @@
     }
   },
   "dependencies": {
-    "gleap-admin-helper": "^1.0.3"
+    "pick-dom-element": "^0.2.3",
+    "unique-selector": "^0.5.0"
   }
 }

build/esm/index.mjs

@@ -0,0 +1,49 @@
+import { ElementPicker } from "pick-dom-element";
+import unique from 'unique-selector';
+
+class GleapAdminHelper {
+  picker = null;
+  onElementPicked = null;
+
+  stopPicker = () => {
+    if (this.picker) {
+      this.picker.stop();
+      this.picker = null;
+      return;
+    }
+  }
+
+  startPicker = () => {
+    this.stopPicker();
+    var self = this;
+
+    const style = { borderColor: "#2142E7", background: "transparent", borderWidth: "4px", borderRadius: "5px" };
+    this.picker = new ElementPicker({ style });
+    this.picker.start({
+      onClick: (el) => {
+        try {
+          var selector = unique(el);
+          self.onElementPicked && self.onElementPicked(selector);
+        } catch (e) { }
+      },
+      elementFilter: (el) => {
+        if (el.classList.contains('gleap-admin-collapse-ui') || el.closest('.gleap-admin-collapse-ui')) {
+          return false;
+        }
+        return true;
+      }
+    });
+  };
+
+  setMode = (mode) => {
+    this.mode = mode;
+    if (mode === 'navigate') {
+      this.stopPicker();
+    }
+    if (mode === 'picker') {
+      this.startPicker();
+    }
+  }
+}
+
+export default GleapAdminHelper;

package-lock.json

@@ -1,5 +1,5 @@
 import { loadIcon } from "./UI";
-import { GleapHelper } from "gleap-admin-helper";
+import GleapAdminHelper from "./GleapAdminHelper";
 
 export default class GleapAdminManager {
   libraryInstance = null;
@@ -18,6 +18,7 @@ export default class GleapAdminManager {
     if (!this.instance) {
       this.instance = new GleapAdminManager();
     }
+
     return this.instance;
   }
 
@@ -45,15 +46,17 @@ export default class GleapAdminManager {
   initAdminHelper() {
     const self = this;
 
-    GleapHelper.onElementPicked = (selector) => {
-      self.toggleCollapseUI(true);
-      self.sendMessageToTourBuilder({
-        name: "element-picked",
-        data: {
-          selector
-        }
-      });
-    };
+    try {
+      GleapAdminHelper.onElementPicked = (selector) => {
+        self.toggleCollapseUI(true);
+        self.sendMessageToTourBuilder({
+          name: "element-picked",
+          data: {
+            selector
+          }
+        });
+      };
+    } catch (e) { }
 
     self.injectFrame();
     self.injectCollapseUI();
@@ -126,14 +129,16 @@ export default class GleapAdminManager {
           if (data.name === "status-changed") {
             self.status = data.data;
             this.setFrameHeight(self.status);
-            self.libraryInstance.stopPicker();
+            GleapAdminHelper.stopPicker();
 
             if (self.status === "picker") {
-              self.libraryInstance.startPicker();
+              GleapAdminHelper.startPicker();
             }
           }
         }
-      } catch (exp) { }
+      } catch (exp) {
+        console.log(exp);
+      }
     });
 
     this.sendMessage({