v14.2.5

Author: boehlerlukas

build/cjs/index.js

@@ -161,6 +161,7 @@
 
       <!-- Main content wireframe blocks -->
       <main class="main-placeholder" id="main1">
+        <input placeholder="Name" type="text" id="input1" />
         <div class="wireframe-block"></div>
         <div class="wireframe-block"></div>
         <div class="wireframe-block"></div>
@@ -169,7 +170,7 @@
         <div class="wireframe-block"></div>
       </main>
 
-      <main class="main-placeholder-2" id="main2" style="display: none;">
+      <main class="main-placeholder-2" id="main2" style="display: none">
         <div class="wireframe-block--title"></div>
         <div class="wireframe-block-2">
           <div class="wireframe-block--text" style="width: 80%"></div>

build/esm/index.mjs

@@ -1,22 +1,14 @@
 const Gleap = window.Gleap;
 
-Gleap.setFrameUrl("http://0.0.0.0:3001");
-Gleap.setApiUrl("http://0.0.0.0:9000");
-Gleap.setWSApiUrl("ws://0.0.0.0:9000");
+// Gleap.setFrameUrl("http://0.0.0.0:3001");
+// Gleap.setApiUrl("http://0.0.0.0:9000");
+// Gleap.setWSApiUrl("ws://0.0.0.0:9000");
 
-Gleap.setLanguage("ar-DZ");
-
-Gleap.initialize("VHKvTzWV8jKjms6mWWygiUDWlL8zs7an");
+Gleap.initialize("ng6GlnVz6BEUyxFu9nVCg1dlrfHz8tTK");
 
 // const lastMonthDate = new Date();
 // lastMonthDate.setMonth(lastMonthDate.getMonth() - 1);
 
-Gleap.identify("94383829393", {
-    email: "luca@gleap.io",
-    name: "Luca Blaser",
-})
-
-Gleap.open();
 // Gleap.showSurvey("c01abef016b8efb03a9a", "survey_full");
 
 

demo/index.html

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

demo/main.js

@@ -1,3 +1,4 @@
+import { GleapTranslationManager } from "./Gleap";
 import { loadIcon } from "./UI";
 
 const localStorageKey = "gleap-tour-data";
@@ -6,6 +7,8 @@ const styleId = "copilot-tour-styles";
 const copilotJoinedContainerId = "copilot-joined-container";
 const copilotInfoBubbleId = "copilot-info-bubble";
 
+const arrowRightIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>`;
+
 function estimateReadTime(text) {
   const wordsPerSecond = 3.6; // Average reading speed
   const wordCount = text.split(/\s+/).filter((word) => word.length > 0).length;
@@ -138,7 +141,8 @@ export default class GleapCopilotTours {
         ) {
           // Wait for the element to be rendered.
           self.updatePointerPosition(
-            document.querySelector(currentStep.selector)
+            document.querySelector(currentStep.selector),
+            currentStep
           );
         }
       }
@@ -186,7 +190,7 @@ export default class GleapCopilotTours {
     }
   }
 
-  updatePointerPosition(anchor) {
+  updatePointerPosition(anchor, currentStep) {
     try {
       const container = document.getElementById(pointerContainerId);
       if (!container) {
@@ -221,6 +225,11 @@ export default class GleapCopilotTours {
       let anchorCenterY =
         anchorRect.top + anchorRect.height / 2 + window.scrollY;
 
+      if (currentStep?.mode === "INPUT") {
+        anchorCenterX -= anchorRect.width / 2 - 10;
+        anchorCenterY += anchorRect.height / 2 - 5;
+      }
+
       let containerWidthSpace = 350;
       if (containerWidthSpace > window.innerWidth - 40) {
         containerWidthSpace = window.innerWidth - 40;
@@ -286,8 +295,21 @@ export default class GleapCopilotTours {
           display: flex;
           align-items: flex-start;
           pointer-events: none;
-          z-index: 9999;
-          transition: all 0.5s ease;;
+          z-index: 2147483610;
+          transition: all 0.5s ease;
+        }
+
+        .${pointerContainerId}-clickmode {
+          cursor: pointer;
+          pointer-events: all !important;
+        }
+
+        .${pointerContainerId}-clickmode #${copilotInfoBubbleId}-content {
+          display: flex !important;
+        }
+
+        .${pointerContainerId}-clickmode svg {
+          display: none !important;
         }
   
         #${pointerContainerId} svg {
@@ -315,6 +337,13 @@ export default class GleapCopilotTours {
           align-items: flex-start;
         }
 
+        #${copilotInfoBubbleId}-content svg {
+          width: 16px;
+          height: 16px;
+          display: inline-block !important;
+          margin-left: 5px;
+        }
+
         #${copilotInfoBubbleId}-content {
           margin-top: 18px;
           margin-left: 5px;
@@ -605,6 +634,7 @@ export default class GleapCopilotTours {
       return;
     }
 
+    const self = this;
     const config = this.productTourData;
     const steps = config.steps;
 
@@ -619,13 +649,69 @@ export default class GleapCopilotTours {
     const currentStep = steps[this.currentActiveIndex];
 
     const handleStep = (element) => {
+      document.getElementById(pointerContainerId).style.display = "flex";
+
       // If we have a selector but the element was null, close the tour.
       if (currentStep.selector && currentStep.selector.length > 0 && !element) {
         this.completeTour(false);
         return;
       }
 
       const gotToNextStep = () => {
+        if (currentStep.mode === "INPUT" && element) {
+          // Wait for text to be entered. Continue tour on enter. element is the input.
+          function handleClick() {
+            document
+              .querySelector(`#${pointerContainerId}`)
+              .classList.remove("copilot-pointer-container-clickmode");
+
+            // Remove the highlight from the input fields.
+            element.classList.remove("gleap-input-highlight");
+
+            // Hide the info bubble.
+            document.getElementById(pointerContainerId).style.display = "none";
+
+            self.currentActiveIndex++;
+            self.storeUncompletedTour();
+            self.renderNextStep();
+          }
+
+          function handleInputEvent(e) {
+            if (e.target.value.length === 0) return;
+
+            const cursor = document.getElementById(
+              `${copilotInfoBubbleId}-content`
+            );
+            if (!cursor) return;
+
+            cursor.innerHTML = `${GleapTranslationManager.translateText(
+              `next`
+            )} ${arrowRightIcon}`;
+            cursor.addEventListener("click", handleClick, { once: true });
+
+            // Add highlight to the input fields. red shadow glow.
+            element.classList.add("gleap-input-highlight");
+
+            document
+              .querySelector(`#${pointerContainerId}`)
+              .classList.add("copilot-pointer-container-clickmode");
+
+            // Remove the input event listener after execution
+            element.removeEventListener("input", handleInputEvent);
+          }
+
+          element.addEventListener("input", handleInputEvent);
+
+          // Focus on the input.
+          element.addEventListener("blur", () => {
+            element.focus();
+          });
+
+          element.focus();
+
+          return;
+        }
+
         this.currentActiveIndex++;
         this.storeUncompletedTour();
 
@@ -648,7 +734,7 @@ export default class GleapCopilotTours {
       };
 
       // Update pointer position, even if element is null.
-      this.updatePointerPosition(element);
+      this.updatePointerPosition(element, currentStep);
 
       const message = currentStep?.message
         ? htmlToPlainText(currentStep.message)

package.json

@@ -70,7 +70,6 @@ export default class GleapProductTours {
     GleapSession.getInstance()
       .validateProductTour(tourId)
       .then(() => {
-        console.log("Product tour is live.");
         if (delay > 0) {
           return setTimeout(() => {
             self.start();

published/14.2.5/index.js

@@ -94,6 +94,9 @@ export const injectStyledCSS = (
       line-height: 1;
       font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     }
+    .gleap-input-highlight {
+      box-shadow: 0 0 0 3px ${primaryColor} !important;
+    }
     .gleap-frame-container {
       right: ${buttonX}px;
       bottom: ${61 + buttonY}px;