v13.1.4

demo/index.html

@@ -193,6 +193,54 @@
       width: 100%;
       background-color: #eee;
     }
+
+    /* The Modal (background) */
+    .modal {
+      display: none;
+      /* Hidden by default */
+      position: fixed;
+      /* Stay in place */
+      z-index: 1;
+      /* Sit on top */
+      left: 0;
+      top: 0;
+      width: 100%;
+      /* Full width */
+      height: 100%;
+      /* Full height */
+      overflow: auto;
+      /* Enable scroll if needed */
+      background-color: rgb(0, 0, 0);
+      /* Fallback color */
+      background-color: rgba(0, 0, 0, 0.4);
+      /* Black w/ opacity */
+    }
+
+    /* Modal Content */
+    .modal-content {
+      background-color: #fefefe;
+      margin: 15% auto;
+      /* 15% from the top and centered */
+      padding: 20px;
+      border: 1px solid #888;
+      width: 80%;
+      /* Could be more or less, depending on screen size */
+    }
+
+    /* The Close Button */
+    .close {
+      color: #aaa;
+      float: right;
+      font-size: 28px;
+      font-weight: bold;
+    }
+
+    .close:hover,
+    .close:focus {
+      color: black;
+      text-decoration: none;
+      cursor: pointer;
+    }
   </style>
 </head>
 
@@ -223,7 +271,20 @@ <h2 class="sub-headline">
     ctx.fill();
     ctx.stroke();
   </script>
+
+  <!-- The Modal -->
+  <div id="myModal" class="modal">
+
+    <!-- Modal content -->
+    <div class="modal-content">
+      <span class="close">&times;</span>
+      <p>Some text in the Modal..</p>
+    </div>
+
+  </div>
+
   <div class="content" id="haha">
+    <button id="myBtn">Open Modal</button>
     <a href="https://www.google.com">asdf asfasdfasfdasdf</a>
     <div class="skeleton-text"></div>
     <div class="skeleton-text"></div>
@@ -234,6 +295,35 @@ <h2 class="sub-headline">
     <div class="skeleton-text"></div>
   </div>
 
+  <script>
+    // Get the modal
+    var modal = document.getElementById("myModal");
+
+    // Get the button that opens the modal
+    var btn = document.getElementById("myBtn");
+
+    // Get the <span> element that closes the modal
+    var span = document.getElementsByClassName("close")[0];
+
+    // When the user clicks the button, open the modal 
+    btn.onclick = function () {
+      modal.style.display = "block";
+    }
+
+    // When the user clicks on <span> (x), close the modal
+    span.onclick = function () {
+      modal.style.display = "none";
+    }
+
+    // When the user clicks anywhere outside of the modal, close it
+    window.onclick = function (event) {
+      if (event.target == modal) {
+        modal.style.display = "none";
+      }
+    }
+
+  </script>
+
 </body>
 
 </html>

demo/main.js

@@ -4,7 +4,7 @@ Gleap.setFrameUrl("http://0.0.0.0:3001");
 Gleap.setApiUrl("http://0.0.0.0:9000");
 Gleap.setWSApiUrl("ws://0.0.0.0:8080");
 
-Gleap.initialize("rinrKZAvjqOheSjpdUjFnp01tSOF3WTd");
+Gleap.initialize("vcxExo94dQQv7KIXd1BnMgN2bzpwZnoj");
 
 /*Gleap.setUrlHandler((url, newTab) => {
   alert("URL: " + url + " newTab: " + newTab);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gleap",
-  "version": "13.1.3",
+  "version": "13.1.4",
   "main": "build/index.js",
   "scripts": {
     "start": "webpack serve",

src/GleapAdminManager.js

@@ -140,6 +140,14 @@ export default class GleapAdminManager {
             });
           }
 
+          if (data.name === "click") {
+            try {
+              document.querySelector(data.data.selector).click();
+            } catch (e) {
+              console.log(e);
+            }
+          }
+
           if (data.name === "status-changed") {
             self.status = data.data;
             this.setFrameHeight(self.status);

src/GleapProductTours.js

@@ -43,6 +43,8 @@ export default class GleapProductTours {
         for (let i = 0; i < steps.length; i++) {
             const step = steps[i];
 
+            const isClickMode = step.mode === "CLICK";
+
             var message = "";
             var hasSender = false;
 
@@ -68,10 +70,13 @@ export default class GleapProductTours {
             }
 
             var driverStep = {
-                disableActiveInteraction: !(step.allowClick ?? true),
+                disableActiveInteraction: !isClickMode,
                 popover: {
                     description: message,
                     popoverClass: `gleap-tour-popover-${step.type} ${!hasSender && 'gleap-tour-popover-no-sender'} ${config.allowClose && 'gleap-tour-popover-can-close'}`,
+                    ...(isClickMode ? {
+                        showButtons: [],
+                    } : {})
                 },
             }
             if (step.selector && step.selector.length > 0) {
@@ -85,11 +90,17 @@ export default class GleapProductTours {
             'close'
         ];
 
-        console.log("config.backButton", config);
         if (config.backButton) {
             buttons.push('previous');
         }
 
+        function onDocumentClick(evnt) {
+            var gleapTourPopover = document.querySelector('.gleap-tour-popover');
+            if (!gleapTourPopover.contains(evnt.target)) {
+                gleapTourObj.moveNext();
+            }
+        }
+
         const gleapTourObj = GleapTours({
             showProgress: true,
             steps: driverSteps,
@@ -111,6 +122,8 @@ export default class GleapProductTours {
                 } else {
                     gleapTourObj.destroy();
                 }
+
+                document.removeEventListener("click", onDocumentClick);
             },
             onPopoverRender: (popoverElement) => {
                 // Fix for images and videos.
@@ -197,5 +210,7 @@ export default class GleapProductTours {
             }
         });
         gleapTourObj.drive();
+
+        document.addEventListener("click", onDocumentClick);
     }
 }