v14.2.13

Author: boehlerlukas

build/cjs/index.js

@@ -91,7 +91,7 @@
         flex: 1;
         padding: 3rem;
         display: grid;
-        grid-template-columns: repeat(1, 1fr);
+        grid-template-columns: repeat(3, 1fr);
         grid-gap: 2rem;
         align-items: start;
         justify-content: start;
@@ -161,31 +161,6 @@
 
       <!-- Main content wireframe blocks -->
       <main class="main-placeholder" id="main1">
-        <div
-          style="
-            width: 100%;
-            height: 400px;
-            overflow: auto;
-            background-color: red;
-          "
-        >
-          <div class="wireframe-block" style="margin-top: 20px;"></div>
-          <div class="wireframe-block" style="margin-top: 20px;">2</div>
-          <div class="wireframe-block" style="margin-top: 20px;"></div>
-          <div class="wireframe-block" style="margin-top: 20px;">3</div>
-          <div class="wireframe-block" style="margin-top: 20px;"></div>
-
-          <div class="wireframe-block" style="margin-top: 20px;"></div>
-          <div class="wireframe-block" style="margin-top: 20px;"></div>
-          <div class="wireframe-block" style="margin-top: 20px;"></div>
-          <div class="wireframe-block" style="margin-top: 20px;"></div>
-          <div class="wireframe-block" style="margin-top: 20px;">4</div>
-          <div class="wireframe-block" style="margin-top: 20px;"></div>
-          <div class="wireframe-block" style="margin-top: 20px;"></div>
-          <div class="wireframe-block" style="margin-top: 20px;"></div>
-          <div class="wireframe-block" style="margin-top: 20px;"></div>
-          <div class="wireframe-block" style="margin-top: 20px;"></div>
-        </div>
         <div class="wireframe-block"></div>
         <div class="wireframe-block"></div>
         <div class="wireframe-block"></div>

build/esm/index.mjs

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

demo/index.html

@@ -1,5 +1,5 @@
 import { ElementPicker } from "pick-dom-element";
-import unique from 'unique-selector';
+import unique from "unique-selector";
 
 class GleapAdminHelper {
   picker = null;
@@ -11,42 +11,57 @@ class GleapAdminHelper {
       this.picker = null;
       return;
     }
-  }
+  };
 
   startPicker = () => {
     this.stopPicker();
     var self = this;
 
-    const style = { borderColor: "#2142E7", background: "transparent", borderWidth: "4px", borderRadius: "5px" };
+    const style = {
+      borderColor: "#2142E7",
+      background: "transparent",
+      borderWidth: "4px",
+      borderRadius: "5px",
+    };
     this.picker = new ElementPicker({ style });
     this.picker.start({
       useShadowDOM: false,
       onClick: (el) => {
         try {
-          var selector = unique(el);
+          let selector;
+          const tourId = el.getAttribute("data-gleap-tour");
+          if (tourId) {
+            selector = `[data-gleap-tour="${tourId}"]`;
+          } else {
+            selector = unique(el);
+          }
+
           self.onElementPicked && self.onElementPicked(selector);
         } catch (e) {
-          console.error('Error while getting unique selector', e);
+          console.error("Error while getting unique selector", e);
         }
       },
       elementFilter: (el) => {
-        if (el.classList.contains('gleap-admin-collapse-ui') || el.closest('.gleap-admin-collapse-ui')) {
+        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') {
+    if (mode === "navigate") {
       this.stopPicker();
     }
-    if (mode === 'picker') {
+    if (mode === "picker") {
       this.startPicker();
     }
-  }
+  };
 }
 
 export default GleapAdminHelper;