draggable recording bar

Author: LucaB01

build/cjs/index.js

@@ -4,14 +4,34 @@ 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.initialize("BTmQRJBPvKrOErNQCmyPYPAzSsw3gPmw");
+// Gleap.setLanguage("en");
 
-Gleap.registerCustomAction((customAction) => {
-  console.log(customAction);
-});
+Gleap.initialize("VHKvTzWV8jKjms6mWWygiUDWlL8zs7an");
 
-Gleap.setTicketAttribute("test", "test");
+// const lastMonthDate = new Date();
+// lastMonthDate.setMonth(lastMonthDate.getMonth() - 1);
 
-Gleap.unsetTicketAttribute("test");
+Gleap.identify("94383829393", {
+    email: "luca@gleap.io",
+    name: "Luca Blaser",
+})
 
-Gleap.clearTicketAttributes();
+Gleap.open();
+
+// Gleap.showSurvey("c01abef016b8efb03a9a", "survey_full");
+
+
+// Gleap.startChecklist("677694a38779ab927064d967");
+
+// Gleap.trackEvent("Add New List");
+// Gleap.trackEvent("Step 2 resolved");
+// Gleap.trackEvent("Step 3 resolved");
+
+// setTimeout(() => {
+    // Gleap.trackEvent("Step 4 resolved");
+// }, 4000);
+// Gleap.setTicketAttribute("qwerrewq", "Custom value")
+// Gleap.attachCustomData({
+//     test: "dataaa",
+// })
+// Gleap.startBot("6789110e41e9869af7a2b6b8")

build/esm/index.mjs

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

demo/main.js

@@ -164,6 +164,17 @@ export default class GleapMarkerManager {
       this.touchMoveEventHandler
     );
 
+    // Clean up toolbar drag listeners
+    const dragHandle = document.querySelector(".bb-capture-toolbar-item[data-type='drag']");
+    if (dragHandle) {
+      dragHandle.removeEventListener("mousedown", this.dragStart);
+      dragHandle.removeEventListener("touchstart", this.dragStart);
+      document.removeEventListener("mousemove", this.drag);
+      document.removeEventListener("touchmove", this.drag);
+      document.removeEventListener("mouseup", this.dragEnd);
+      document.removeEventListener("touchend", this.dragEnd);
+    }
+
     if (this.dragCursor) {
       this.dragCursor.remove();
     }
@@ -179,6 +190,9 @@ export default class GleapMarkerManager {
           <div class="bb-capture-dismiss">${loadIcon("dismiss")}</div>
           <div class='bb-capture-editor-drag-info'>${loadIcon("rect")}</div>
           <div class="bb-capture-toolbar">
+            <div class="bb-capture-toolbar-item bb-capture-item-rec bb-capture-toolbar-item-tool drag-handle-item" data-type="drag">
+              ${loadIcon("drag")}
+            </div>
             ${this.type === "capture"
         ? `<div class="bb-capture-toolbar-item bb-capture-item-rec bb-capture-toolbar-item-recording" data-type="recording">
                   ${loadIcon("recorderon")}
@@ -397,6 +411,67 @@ export default class GleapMarkerManager {
 
   setupToolbar() {
     const self = this;
+    const toolbar = document.querySelector(".bb-capture-toolbar");
+    let isDragging = false;
+    let currentX;
+    let currentY;
+    let initialX;
+    let initialY;
+    let xOffset = 0;
+    let yOffset = 0;
+
+    const getTransformValues = () => {
+      const transform = window.getComputedStyle(toolbar).transform;
+      if (transform === 'none') return { x: 0, y: 0 };
+      const matrix = new DOMMatrix(transform);
+      return { x: matrix.m41, y: matrix.m42 };
+    };
+
+    this.dragStart = (e) => {
+      const { x, y } = getTransformValues();
+      xOffset = x;
+      yOffset = y;
+
+      if (e.type === "mousedown") {
+        initialX = e.clientX - xOffset;
+        initialY = e.clientY - yOffset;
+      } else {
+        initialX = e.touches[0].clientX - xOffset;
+        initialY = e.touches[0].clientY - yOffset;
+      }
+      isDragging = true;
+    };
+
+    this.dragEnd = () => {
+      isDragging = false;
+    };
+
+    this.drag = (e) => {
+      if (isDragging) {
+        e.preventDefault();
+        if (e.type === "mousemove") {
+          currentX = e.clientX - initialX;
+          currentY = e.clientY - initialY;
+        } else {
+          currentX = e.touches[0].clientX - initialX;
+          currentY = e.touches[0].clientY - initialY;
+        }
+
+        xOffset = currentX;
+        yOffset = currentY;
+
+        toolbar.style.transform = `translate(${currentX}px, ${currentY}px)`;
+      }
+    };
+
+    const dragHandle = document.querySelector(".bb-capture-toolbar-item[data-type='drag']");
+
+    dragHandle.addEventListener("mousedown", this.dragStart);
+    dragHandle.addEventListener("touchstart", this.dragStart);
+    document.addEventListener("mousemove", this.drag);
+    document.addEventListener("touchmove", this.drag);
+    document.addEventListener("mouseup", this.dragEnd);
+    document.addEventListener("touchend", this.dragEnd);
 
     // Hook up dismiss button
     const dismissButton = document.querySelector(".bb-capture-dismiss");

package.json

@@ -1284,6 +1284,17 @@ export const injectStyledCSS = (
       position: relative;
       margin-right: 5px;
     }
+
+    .drag-handle-item {
+      cursor: grab !important;
+      width: 34px;
+      min-width: 34px;
+    }
+
+    .drag-handle-item svg {
+      width: 18px !important;
+      height: 18px !important;
+    }
     
     .bb-capture-toolbar-item svg {
       width: 23px;
@@ -2305,6 +2316,10 @@ export const loadIcon = function (name, color) {
     </svg>`;
   }
 
+  if (name === "drag") {
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><!--!Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc.--><path d="M64 128a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm0 160a32 32 0 1 0 0-64 32 32 0 1 0 0 64zM96 416a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm96-288a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm32 128a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM192 448a32 32 0 1 0 0-64 32 32 0 1 0 0 64z"/></svg>`;
+  }
+
   if (name === "unmute") {
     return `<svg id="tooltip-svg-unmute" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path id="tooltip-svg-unmute-path" d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.1 386.2C556.7 352 576 306.3 576 256c0-60.1-27.7-113.8-70.9-149c-10.3-8.4-25.4-6.8-33.8 3.5s-6.8 25.4 3.5 33.8C507.3 170.7 528 210.9 528 256c0 39.1-15.6 74.5-40.9 100.5L449 326.6c19-17.5 31-42.7 31-70.6c0-30.1-13.9-56.9-35.4-74.5c-10.3-8.4-25.4-6.8-33.8 3.5s-6.8 25.4 3.5 33.8C425.1 227.6 432 241 432 256s-6.9 28.4-17.7 37.3c-1.3 1-2.4 2.2-3.4 3.4L352 250.6V64c0-12.6-7.4-24-18.9-29.2s-25-3.1-34.4 5.3L197.8 129.8 38.8 5.1zM352 373.3L82.9 161.3C53.8 167.4 32 193.1 32 224v64c0 35.3 28.7 64 64 64h67.8L298.7 471.9c9.4 8.4 22.9 10.4 34.4 5.3S352 460.6 352 448V373.3z"/></svg>`;
   }