Initial Release

Author: onyx-nxt

.eslintrc.json

@@ -0,0 +1,62 @@
+{
+	"extends": ["eslint:recommended"],
+	"env": {
+		"node": true,
+		"browser": true,
+		"es6": true
+	},
+	"globals": {
+		"globalThis": "writable"
+	},
+	"parserOptions": {
+		"ecmaVersion": 2023,
+		"sourceType": "module"
+	},
+	"rules": {
+		"no-unused-vars": "error",
+		"arrow-spacing": ["warn", { "before": true, "after": true }],
+		"brace-style": ["error", "1tbs", { "allowSingleLine": true }],
+		"comma-dangle": ["error", "always-multiline"],
+		"comma-spacing": "error",
+		"comma-style": "error",
+		"curly": ["error", "multi-line", "consistent"],
+		"dot-location": ["error", "property"],
+		"handle-callback-err": "off",
+		"indent": ["error", "tab"],
+		"keyword-spacing": "error",
+		"max-nested-callbacks": ["error", { "max": 5 }],
+		"max-statements-per-line": ["error", { "max": 3 }],
+		"no-console": "off",
+		"no-empty-function": "error",
+		"no-floating-decimal": "error",
+		"no-inline-comments": "error",
+		"no-lonely-if": "error",
+		"no-multi-spaces": "error",
+		"no-multiple-empty-lines": [
+			"error",
+			{ "max": 2, "maxEOF": 1, "maxBOF": 0 }
+		],
+		"no-shadow": ["error", { "allow": ["err", "resolve", "reject"] }],
+		"no-trailing-spaces": ["error"],
+		"no-var": "error",
+		"object-curly-spacing": ["error", "always"],
+		"prefer-const": "error",
+		"quotes": ["error", "single"],
+		"semi": ["error", "always"],
+		"no-control-regex": "off",
+		"space-before-blocks": "error",
+		"space-before-function-paren": [
+			"error",
+			{
+				"anonymous": "never",
+				"named": "never",
+				"asyncArrow": "always"
+			}
+		],
+		"space-in-parens": "error",
+		"space-infix-ops": "error",
+		"space-unary-ops": "error",
+		"spaced-comment": "error",
+		"yoda": "error"
+	}
+}

.gitignore

@@ -0,0 +1,5 @@
+# Local history
+.history/
+
+# Dependency directories
+node_modules/

.npmignore

@@ -0,0 +1,8 @@
+# Local history
+.history/
+
+# Github assets
+assets/
+
+# ESlint config
+.eslintrc.json

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Viktor Shmigol
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,142 @@
+[![version](https://img.shields.io/npm/v/electron-taskbar-badge?color=blueviolet&style=for-the-badge "Version")](https://github.com/KK-Designs/electron-taskbar-badge/releases/tag/v1.4.1)
+‎
+[![weekly_downloads](https://img.shields.io/npm/dw/electron-taskbar-badge?color=blue&style=for-the-badge "Weekly Downloads")](https://www.npmjs.com/package/electron-taskbar-badge#:~:text=Weekly%20Downloads)
+‎
+![downloads](https://badgen.net/npm/dt/electron-taskbar-badge "Downloads")
+‎
+[![issues](https://img.shields.io/github/issues/KK-Designs/KK-Designs/electron-taskbar-badge?style=for-the-badge "Issues")](https://github.com/KK-Designs/electron-taskbar-badge/issues)
+‎
+[![license](https://img.shields.io/github/license/KK-Designs/electron-taskbar-badge?color=important&style=for-the-badge "License")](https://github.com/KK-Designs/electron-taskbar-badge/blob/master/LICENSE)
+‎
+[![electron-taskbar-badge](https://nodei.co/npm/electron-taskbar-badge.png "electron-taskbar-badge on NPM")](https://www.npmjs.com/package/electron-taskbar-badge)
+---
+
+# Electron Taskbar Badge
+An easy way for electron apps to add app badges to the taskbar to indicate notifications and other countable things, with maximum compatibility and customizability.
+
+---
+
+# Changelog (`v1.0.0`)
+
+• This release is the first release of Electron Taskbar Badge
+
+---
+
+# Installation
+
+```sh-session
+npm i electron-taskbar-badge
+```
+
+---
+
+# Basic Usage
+
+> ⚠ **This library is ONLY compatible with node version 14 and above**
+
+First you must import the library using the following code:
+```javascript
+const Badge = require('electron-taskbar-badge');
+// or `import * as Badge from 'electron-taskbar-badge';` for ESM users
+```
+\
+For basic usage, all you have to do is call the function with the options:
+```javascript
+const Badge = require('electron-taskbar-badge');
+// or `import * as Badge from 'electron-taskbar-badge';` for ESM users
+
+// NOTE: Although the font size 62px seems large, it is not. It is relative the the radius. Lowering both of these values can decrease quality significantly. Increasing them can reduce performance. Leave the font size as is for basic usage
+const badgeOptions = {
+	fontColor: '#FFFFFF', // The font color
+	font: '62px Microsoft Yahei', // The font and its size. You shouldn't have to change this at all
+	color: '#FF0000', // The background color
+	radius: 48, // The radius for the badge circle. You shouldn't have to change this at all
+	updateBadgeEvent: 'notificationCount', // The IPC event name to listen on
+	badgeDescription: 'Unread Notifications', // The badge description
+	invokeType: 'handle', // The IPC event type
+	max: 9, // The maximum integer allowed for the badge. Anything above this will have "+" added to the end of it.
+	fit: false, // Useful for multi-digit numbers. For single digit keep this set to false
+	additionalFunc: (count) => {
+		// An additional function to run whenever the IPC event fires. It has a count parameter which is the number that the badge was set to.
+		console.log(`Received ${count} new notifications!`);
+	},
+};
+
+// "win" would be your Electron BrowserWindow object
+new Badge(win, badgeOptions);
+```
+**Thats it! Now you have it running!**
+
+## More examples
+### Native look
+If you want your badge to look native to the operating system, which means that it follows the default OS's font and color, you can use the `useSystemAccentTheme` option. Here's an example:
+
+```javascript
+// DO NOT change the font or the radius
+// fontColor and color will be overridden. The background color would be the system accent color, and the font color would be automatically chosen between black or white, whichever looks best.
+const badgeOptions = {
+	fontColor: '#000000',
+	font: '62px Microsoft Yahei',
+	color: '#000000',
+	radius: 48,
+	updateBadgeEvent: 'notificationCount',
+	badgeDescription: 'Unread Notifications',
+	invokeType: 'handle',
+	max: 9,
+	fit: false,
+	useSystemAccentTheme: true,
+	additionalFunc: (count) => {
+		console.log(`Received ${count} new notifications!`);
+	},
+};
+
+new Badge(win, badgeOptions);
+```
+
+**Examples**
+
+![Taskbar Badge Purple](assets/taskbarBadgePurple.gif?raw=true) \
+![Taskbar Badge Blue](assets/taskbarBadgeBlue.gif?raw=true) \
+![Taskbar Badge Green](assets/taskbarBadgeGreen.gif?raw=true)
+
+### Auto font color
+If you want your badge's font color to be automatically chosen, simply set `fontColor` to `auto`. This will chose the font color between black or white, whichever looks best. Here's an example:
+
+```javascript
+const badgeOptions = {
+	fontColor: 'auto',
+	font: '62px Microsoft Yahei',
+	color: '#00FF00',
+	radius: 48,
+	updateBadgeEvent: 'notificationCount',
+	badgeDescription: 'Unread Notifications',
+	invokeType: 'handle',
+	max: 9,
+	fit: false,
+	additionalFunc: (count) => {
+		console.log(`Received ${count} new notifications!`);
+	},
+};
+
+new Badge(win, badgeOptions);
+```
+
+# Options
+### Options info for `Badge(options)`
+
+| Parameters    | Type    | Description                            | Default    |
+|---------------|---------|----------------------------------------|---------|
+| `fontColor`    | string (required) | The font color. Pretty self explanatory.  | auto |
+| `font`    | string | The font for the badge icon. The format is [size]px [Font family name] **ALWAYS SET THE FONT SIZE TO 62px FOR BEST QUALITY** | 62px Microsoft Yahei |
+| `color` | string (required) | The background color for the badge icon | `null` |
+| `radius` | number | The radius for the badge icon **ALWAYS SET TO 48 FOR BEST QUALITY** | 48 |
+| `updateBadgeEvent` | string (required) | The IPC event name to listen on | `null` |
+| `badgeDescription` | string | A description that will be provided to Accessibility screen readers | `this.updateBadgeEvent` |
+| `invokeType` | string | The IPC event type. Can be `send` or `handle`. | send |
+| `max` | number | The maximum integer allowed for the badge. Anything above this will have "+" added to the end of it. | 99 |
+| `fit` | boolean | The maximum integer allowed for the badge. Anything above this will have "+" added to the end of it. | `false` |
+| `useSystemAccentTheme` | boolean | Whether to use the system accent color for the background color. fontColor and color will be overridden. It would be automatically chosen between black or white, whichever looks best. | `false` |
+| `additionalFunc` | function(count) | An additional function to run whenever the IPC event fires. It has a count parameter which is the number that the badge was set to. | `null` |
+
+#
+[![](assets/backToTop.png?raw=true "Back to top")](#readme)

assets/backToTop.png

@@ -0,0 +1,124 @@
+'use strict';
+module.exports = class BadgeGenerator {
+	constructor(win, opts = {}, systemAccentTheme) {
+		const defaultStyle = {
+			decimals: 0,
+			systemAccentTheme,
+		};
+		this.win = win;
+		this.style = Object.assign(defaultStyle, opts);
+	}
+
+	generate(number) {
+		const opts = JSON.stringify(this.style);
+		return this.win.webContents.executeJavaScript(`window.drawBadge = function ${this.drawBadge}; window.drawBadge(${number}, ${opts});`);
+	}
+
+	drawBadge(number, style) {
+		if (typeof style?.color !== 'string') {
+			throw new TypeError(`Invalid color specified\nExpected: string\nGot: ${typeof style?.color}`);
+		}
+		if (!/^#[0-9A-F]{6}$/i.test(style?.fontColor)) {
+			style.fontColor = 'auto';
+		}
+		style.font = style?.font ?? '62px Microsoft Yahei';
+		style.fontColor = style?.fontColor ?? 'auto';
+		style.radius = style?.radius ?? 48;
+		style.fit = style?.fit ?? false;
+		style.useSystemAccentTheme = style?.useSystemAccentTheme ?? false;
+		style.decimals = style?.decimals === undefined || isNaN(style.decimals) ? 0 : style.decimals;
+		style.max = style?.max ?? 99;
+
+		const radius = style.radius;
+		const img = document.createElement('canvas');
+		img.width = Math.ceil(radius * 2);
+		img.height = Math.ceil(radius * 2);
+		img.ctx = img.getContext('2d');
+		img.radius = radius;
+		img.number = number;
+
+		const accentColor = style.systemAccentTheme;
+		const accentColorLight = lightenColor(`#${accentColor.slice(0, -2)}`, 35);
+
+		if (style?.useSystemAccentTheme) {
+			style.color = accentColorLight;
+			style.fontColor = getTextColor(accentColorLight);
+		}
+
+		if (style.fontColor === 'auto') {
+			style.fontColor = getTextColor(accentColorLight);
+		}
+
+		img.displayStyle = style;
+
+		img.draw = function() {
+			let fontScale, fontWidth, fontSize, integer;
+			this.width = Math.ceil(this.radius * 2);
+			this.height = Math.ceil(this.radius * 2);
+			this.ctx.clearRect(0, 0, this.width, this.height);
+			this.ctx.fillStyle = this.displayStyle.color;
+			this.ctx.beginPath();
+			this.ctx.arc(radius, radius, radius, 0, Math.PI * 2);
+			this.ctx.fill();
+			this.ctx.font = this.displayStyle.font;
+			this.ctx.textAlign = 'center';
+			this.ctx.textBaseline = 'middle';
+			this.ctx.fillStyle = this.displayStyle.fontColor;
+			integer = this.number.toFixed(this.displayStyle.decimals);
+
+			fontSize = Number(/[0-9.]+/.exec(this.ctx.font)[0]);
+
+			if (integer > style.max) {
+				if (this.displayStyle.fit) {
+					fontSize = fontSize * 1.175;
+					integer = `${style.max}+`;
+				} else {
+					this.ctx.font = this.ctx.font.replace(/\d+/, Number(this.ctx.font.match(/\d+/)[0]) / 1.175);
+					integer = `${style.max}+`;
+				}
+			}
+
+			if (!this.displayStyle.fit || isNaN(fontSize)) {
+				this.ctx.fillText(integer, radius, radius);
+			} else {
+				fontWidth = this.ctx.measureText(integer).width;
+				fontScale = (Math.cos(Math.atan(fontSize / fontWidth)) * this.radius * 2 / fontWidth);
+				this.ctx.setTransform(fontScale, 0, 0, fontScale, this.radius, this.radius);
+				this.ctx.fillText(integer, 0, 0);
+				this.ctx.setTransform(1, 0, 0, 1, 0, 0);
+			}
+
+			return this;
+		};
+
+		function getTextColor(bgColor) {
+			// Convert hex color to RGB values
+			const red = parseInt(bgColor.substr(1, 2), 16);
+			const green = parseInt(bgColor.substr(3, 2), 16);
+			const blue = parseInt(bgColor.substr(5, 2), 16);
+
+			// Calculate perceived brightness using the luminosity algorithm
+			const brightness = (0.2126 * red) + (0.7152 * green) + (0.0722 * blue);
+
+			// Return white or black based on the perceived brightness
+			return (brightness > 128) ? '#000000' : '#FFFFFF';
+		}
+
+		function lightenColor(hex, percent) {
+			let red = parseInt(hex.substring(1, 3), 16);
+			let green = parseInt(hex.substring(3, 5), 16);
+			let blue = parseInt(hex.substring(5, 7), 16);
+
+			const amt = Math.round(2.55 * percent);
+			red = Math.min(255, Math.round(red + amt));
+			green = Math.min(255, Math.round(green + amt));
+			blue = Math.min(255, Math.round(blue + amt));
+
+			const newHex = ((red << 16) | (green << 8) | blue).toString(16);
+			return '#' + ('000000' + newHex).slice(-6);
+		}
+
+		img.draw();
+		return img.toDataURL();
+	}
+};