diff --git a/src/favicon.ts b/src/favicon.ts index 9bc42bb713..f6cdea7c7f 100644 --- a/src/favicon.ts +++ b/src/favicon.ts @@ -89,7 +89,7 @@ export default class Favicon { this.context.drawImage(this.baseImage, 0, 0, this.canvas.width, this.canvas.height); } - private options(n: number | string) { + private options(n: number | string, params: IParams) { const opt = { n: ((typeof n) === "number") ? Math.abs(n as number | 0) : n, len: ("" + n).length, @@ -101,14 +101,14 @@ export default class Favicon { }; // apply positional transformations - if (this.params.isUp) { + if (params.isUp) { if (opt.y < 0.6) { opt.y = opt.y - 0.4; } else { opt.y = opt.y - 2 * opt.y + (1 - opt.w); } } - if (this.params.isLeft) { + if (params.isLeft) { if (opt.x < 0.6) { opt.x = opt.x - 0.4; } else { @@ -124,8 +124,9 @@ export default class Favicon { return opt; } - private circle(n: number | string) { - const opt = this.options(n); + private circle(n: number | string, opts?: Partial) { + const params = {...this.params, ...opts}; + const opt = this.options(n, params); let more = false; if (opt.len === 2) { @@ -142,7 +143,7 @@ export default class Favicon { this.context.drawImage(this.baseImage, 0, 0, this.canvas.width, this.canvas.height); this.context.beginPath(); const fontSize = Math.floor(opt.h * (opt.n > 99 ? 0.85 : 1)) + "px"; - this.context.font = `${this.params.fontWeight} ${fontSize} ${this.params.fontFamily}`; + this.context.font = `${params.fontWeight} ${fontSize} ${params.fontFamily}`; this.context.textAlign = "center"; if (more) { @@ -159,12 +160,12 @@ export default class Favicon { this.context.arc(opt.x + opt.w / 2, opt.y + opt.h / 2, opt.h / 2, 0, 2 * Math.PI); } - this.context.fillStyle = this.params.bgColor; + this.context.fillStyle = params.bgColor; this.context.fill(); this.context.closePath(); this.context.beginPath(); this.context.stroke(); - this.context.fillStyle = this.params.textColor; + this.context.fillStyle = params.textColor; if ((typeof opt.n) === "number" && opt.n > 999) { const count = ((opt.n > 9999) ? 9 : Math.floor(opt.n as number / 1000)) + "k+"; @@ -209,16 +210,16 @@ export default class Favicon { } } - public badge(content: number | string) { + public badge(content: number | string, opts?: Partial) { if (!this.isReady) { this.readyCb = () => { - this.badge(content); + this.badge(content, opts); } return; } if (typeof content === "string" || content > 0) { - this.circle(content); + this.circle(content, opts); } else { this.reset(); } diff --git a/src/vector/platform/VectorBasePlatform.js b/src/vector/platform/VectorBasePlatform.js index 3050fef9ad..b6b25236ab 100644 --- a/src/vector/platform/VectorBasePlatform.js +++ b/src/vector/platform/VectorBasePlatform.js @@ -85,9 +85,7 @@ export default class VectorBasePlatform extends BasePlatform { bgColor = "#f00"; } - this.favicon.badge(notif, { - bgColor: bgColor, - }); + this.favicon.badge(notif, { bgColor }); } catch (e) { console.warn(`Failed to set badge count: ${e.message}`); }