v8.5.0

Author: boehlerlukas

build/index.js

@@ -10,6 +10,7 @@
       href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,500;0,700;0,800;1,400&display=swap"
       rel="stylesheet"
     />
+    <link rel="icon" type="image/x-icon" href="fav.png">
     <script
       src="https://kit.fontawesome.com/0a1af2edbf.js"
       crossorigin="anonymous"

demo/fav.png

@@ -1,8 +1,8 @@
 const Gleap = window.Gleap;
 
-// Gleap.setFrameUrl("http://0.0.0.0:3001");
-// Gleap.setApiUrl("http://0.0.0.0:9000");
-Gleap.initialize("ogWhNhuiZcGWrva5nlDS8l7a78OfaLlV");
+Gleap.setFrameUrl("http://0.0.0.0:3001");
+Gleap.setApiUrl("http://0.0.0.0:9000");
+Gleap.initialize("DUPaIr7s689BBblcFI4pc5aBgYJTm7Sc");
 //Gleap.setEnvironment("dev");
 
 Gleap.attachCustomData({
@@ -14,6 +14,8 @@ Gleap.attachCustomData({
   },
 });
 
+Gleap.showTabNotificationBadge(true);
+
 Gleap.log("Test log");
 Gleap.log("Test log info", "INFO");
 Gleap.log("Test log warn", "WARNING");

demo/index.html

@@ -61,6 +61,7 @@ export namespace Gleap {
   function enableShortcuts(enabled: boolean): void;
   function setLanguage(language: string): void;
   function preFillForm(data: object): void;
+  function showTabNotificationBadge(showNotificationBadge: boolean): void;
   function attachNetworkLogs(networkLogs: string): void;
   function clearIdentity(): void;
   function identify(

demo/main.js

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

index.d.ts

@@ -388,6 +388,17 @@ class Gleap {
     GleapCustomDataManager.getInstance().clearCustomData();
   }
 
+  /**
+   * Show or hide the notification badge count.
+   * @param {boolean} showNotificationBadge show or hide the notification badge
+   *
+   */
+  static showTabNotificationBadge(showNotificationBadge) {
+    const notificationInstance = GleapNotificationManager.getInstance();
+    notificationInstance.showNotificationBadge = showNotificationBadge;
+    notificationInstance.updateTabBarNotificationCount();
+  }
+
   /**
    * Override the browser language.
    * @param {string} language country code with two letters

package.json

@@ -0,0 +1,122 @@
+/**
+ * Add notification badge (pill) to favicon in browser tab
+ * @url stackoverflow.com/questions/65719387/
+ */
+export default class GleapNotificationBadge {
+    constructor(options) {
+        Object.assign(
+            this, {
+            backgroundColor: "#f00",
+            color: "#fff",
+            size: 0.6,
+            position: "se",
+            radius: 8,
+            src: "",
+            onChange() { },
+        },
+            options
+        );
+        this.canvas = document.createElement("canvas");
+        this.src = this.src || this.faviconEL.getAttribute("href");
+        this.ctx = this.canvas.getContext("2d");
+    }
+
+    faviconEL = document.querySelector("link[rel$=icon]");
+
+    _drawIcon() {
+        this.ctx.clearRect(0, 0, this.faviconSize, this.faviconSize);
+        this.ctx.drawImage(this.img, 0, 0, this.faviconSize, this.faviconSize);
+    }
+
+    _drawShape() {
+        const r = this.radius;
+        const xa = this.offset.x;
+        const ya = this.offset.y;
+        const xb = this.offset.x + this.badgeSize;
+        const yb = this.offset.y + this.badgeSize;
+        this.ctx.beginPath();
+        this.ctx.moveTo(xb - r, ya);
+        this.ctx.quadraticCurveTo(xb, ya, xb, ya + r);
+        this.ctx.lineTo(xb, yb - r);
+        this.ctx.quadraticCurveTo(xb, yb, xb - r, yb);
+        this.ctx.lineTo(xa + r, yb);
+        this.ctx.quadraticCurveTo(xa, yb, xa, yb - r);
+        this.ctx.lineTo(xa, ya + r);
+        this.ctx.quadraticCurveTo(xa, ya, xa + r, ya);
+        this.ctx.fillStyle = this.backgroundColor;
+        this.ctx.fill();
+        this.ctx.closePath();
+    }
+
+    _drawVal() {
+        const margin = (this.badgeSize * 0.18) / 2;
+        this.ctx.beginPath();
+        this.ctx.textBaseline = "middle";
+        this.ctx.textAlign = "center";
+        this.ctx.font = `bold ${this.badgeSize * 0.82}px Arial`;
+        this.ctx.fillStyle = this.color;
+        this.ctx.fillText(this.value, this.badgeSize / 2 + this.offset.x, this.badgeSize / 2 + this.offset.y + margin);
+        this.ctx.closePath();
+    }
+
+    _drawFavicon() {
+        this.faviconEL.setAttribute("href", this.dataURL);
+    }
+
+    _draw() {
+        this._drawIcon();
+        if (this.value) this._drawShape();
+        if (this.value) this._drawVal();
+        this._drawFavicon();
+    }
+
+    _setup() {
+        this.faviconSize = this.img.naturalWidth;
+        this.badgeSize = this.faviconSize * this.size;
+        this.canvas.width = this.faviconSize;
+        this.canvas.height = this.faviconSize;
+        const sd = this.faviconSize - this.badgeSize;
+        const sd2 = sd / 2;
+        this.offset = {
+            n: { x: sd2, y: 0 },
+            e: { x: sd, y: sd2 },
+            s: { x: sd2, y: sd },
+            w: { x: 0, y: sd2 },
+            nw: { x: 0, y: 0 },
+            ne: { x: sd, y: 0 },
+            sw: { x: 0, y: sd },
+            se: { x: sd, y: sd },
+        }[this.position];
+    }
+
+    // Public functions / methods:
+
+    update() {
+        this._value = Math.min(99, parseInt(this._value, 10));
+        if (this.img) {
+            this._draw();
+            if (this.onChange) this.onChange.call(this);
+        } else {
+            this.img = new Image();
+            this.img.addEventListener("load", () => {
+                this._setup();
+                this._draw();
+                if (this.onChange) this.onChange.call(this);
+            });
+            this.img.src = this.src;
+        }
+    }
+
+    get dataURL() {
+        return this.canvas.toDataURL();
+    }
+
+    get value() {
+        return this._value;
+    }
+
+    set value(val) {
+        this._value = val;
+        this.update();
+    }
+}