Cleanup.

Author: boehlerlukas

src/GleapNotificationBadge.js

@@ -3,117 +3,36 @@
  * @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]");
+    _value = 0;
 
-    _drawIcon() {
-        this.ctx.clearRect(0, 0, this.faviconSize, this.faviconSize);
-        this.ctx.drawImage(this.img, 0, 0, this.faviconSize, this.faviconSize);
-    }
+    constructor() {
 
-    _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() {
+    getCleanTitle() {
+        var title = "";
         try {
-            this.faviconEL.setAttribute("href", this.dataURL);
-        } catch (e) {
-            console.log(e);
-        }
-    }
+            title = document.title;
 
-    _draw() {
-        this._drawIcon();
-        if (this.value) this._drawShape();
-        if (this.value) this._drawVal();
-        this._drawFavicon();
-    }
+            // Remove last value in title.
+            if (title.indexOf("(") === 0 && title.indexOf(")") > 0) {
+                title = title.substring(title.indexOf(") ") + 2, title.length);
+            }
+        } catch (e) { }
 
-    _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];
+        console.log("title", title);
+
+        return title;
     }
 
-    // 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);
+        if (this.value === 0) {
+            document.title = this.getCleanTitle();
         } 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;
+            document.title = `(${this._value}) ${this.getCleanTitle()}`;
         }
     }
 
-    get dataURL() {
-        return this.canvas.toDataURL();
-    }
-
     get value() {
         return this._value;
     }

src/GleapNotificationManager.js

@@ -29,10 +29,9 @@ export default class GleapNotificationManager {
   constructor() {
     if (typeof window !== "undefined") {
       try {
-        this.badgeManager = new GleapNotificationBadge({});
+        this.badgeManager = new GleapNotificationBadge();
         this.badgeManager.value = 0;
       } catch (exp) {
-        console.log(exp);
         this.badgeManager = null;
       }
     }