v6.7.5

Author: boehlerlukas

package.json

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

src/Gleap.js

@@ -95,6 +95,7 @@ class Gleap {
   customTranslation = {};
   networkIntercepter = new GleapNetworkIntercepter();
   replay = null;
+  escListener = null;
   feedbackButton = null;
   fakeLoading = null;
   fakeLoadingProgress = 0;
@@ -230,6 +231,29 @@ class Gleap {
     }
   }
 
+  unregisterEscListener() {
+    if (this.escListener) {
+      document.removeEventListener("keydown", this.escListener);
+    }
+  }
+
+  registerEscListener() {
+    const self = this;
+    this.escListener = function (evt) {
+      evt = evt || window.event;
+      var isEscape = false;
+      if ("key" in evt) {
+        isEscape = evt.key === "Escape" || evt.key === "Esc";
+      } else {
+        isEscape = evt.keyCode === 27;
+      }
+      if (isEscape) {
+        self.closeGleap(true);
+      }
+    };
+    document.addEventListener("keydown", this.escListener);
+  }
+
   /**
    * Indentifies the user session
    * @param {string} userId
@@ -1351,6 +1375,7 @@ class Gleap {
     this.overwriteConsoleLog();
     this.startCrashDetection();
     this.registerKeyboardListener();
+    this.registerEscListener();
 
     // Initially check network
     if (isLocalNetwork()) {
@@ -1376,8 +1401,8 @@ class Gleap {
       return code;
     };
 
-    document.onkeyup = function (e) {
-      var char = charForEvent(e);
+    document.addEventListener("keyup", function (e) {
+      const char = charForEvent(e);
       if (
         e.ctrlKey &&
         (char === "i" || char === "I" || char === 73) &&
@@ -1386,7 +1411,7 @@ class Gleap {
         self.autostartDrawing = true;
         Gleap.startFeedbackFlow();
       }
-    };
+    });
   }
 
   checkForInitType() {

src/MarkerManager.js

@@ -198,6 +198,9 @@ export default class MarkerManager {
             <div class="bb-capture-toolbar-item bb-capture-toolbar-drawingitem bb-capture-toolbar-item-tool" data-type="rect">
               ${loadIcon("rect")}
             </div>
+            <div class="bb-capture-toolbar-item bb-capture-toolbar-drawingitem bb-capture-toolbar-item-tool" data-type="blur">
+              ${loadIcon("blur")}
+            </div>
             <div class="bb-capture-toolbar-item bb-capture-toolbar-drawingitem" data-type="colorpicker">
               <div class="bb-capture-toolbar-item-selectedcolor"></div>
               <span class="bb-tooltip">${translateText(
@@ -266,6 +269,9 @@ export default class MarkerManager {
     if (this.pageLeaveListener) {
       window.removeEventListener("beforeunload", this.pageLeaveListener);
     }
+
+    // Register Gleap listener.
+    Gleap.getInstance().registerEscListener();
   }
 
   registerListeners() {
@@ -292,6 +298,9 @@ export default class MarkerManager {
       event.returnValue = "";
     };
     window.addEventListener("beforeunload", this.pageLeaveListener);
+
+    // Unregister Gleap listener.
+    Gleap.getInstance().unregisterEscListener();
   }
 
   show(callback) {
@@ -432,7 +441,7 @@ export default class MarkerManager {
           // Inactivate buttons.
           return;
         }
-        if (type === "pen" || type === "rect" || type === "pointer") {
+        if (type === "pen" || type === "blur" || type === "rect" || type === "pointer") {
           const toolbarTools = document.querySelectorAll(
             ".bb-capture-toolbar-item-tool"
           );

src/ScreenDrawer.js

@@ -41,7 +41,7 @@ export class ScreenDrawer {
       }
 
       self.fadeOutToolbar();
-      if (self.tool === "pen") {
+      if (self.tool === "pen" || self.tool === "blur") {
         self.mouseDownPen(e);
       }
       if (self.tool === "rect") {
@@ -51,7 +51,7 @@ export class ScreenDrawer {
 
     this.mouseMove = function (e) {
       e.preventDefault();
-      if (self.tool === "pen") {
+      if (self.tool === "pen" || self.tool === "blur") {
         self.mouseMovePen(e);
       }
       if (self.tool === "rect") {
@@ -62,7 +62,7 @@ export class ScreenDrawer {
     this.mouseUp = function (e) {
       e.preventDefault();
       self.fadeInToolbar();
-      if (self.tool === "pen") {
+      if (self.tool === "pen" || self.tool === "blur") {
         self.mouseUpPen(e);
       }
       if (self.tool === "rect") {
@@ -152,11 +152,19 @@ export class ScreenDrawer {
   }
 
   mouseDownPen(e) {
+    var color = this.color + "AA";
+    var strokeWidth = this.strokeWidth;
+
+    if (this.tool === "blur") {
+      color = "#000000";
+      strokeWidth = 40;
+    }
+
     this.path = document.createElementNS("http://www.w3.org/2000/svg", "path");
     this.path.setAttribute("fill", "none");
-    this.path.setAttribute("stroke", this.color + "AA");
+    this.path.setAttribute("stroke", color);
     this.path.setAttribute("stroke-linecap", "round");
-    this.path.setAttribute("stroke-width", this.strokeWidth);
+    this.path.setAttribute("stroke-width", strokeWidth);
     this.buffer = [];
     var pt = this.getMousePosition(e);
     this.appendToBuffer(pt);