From 98165212917843a0823f33d77f9cefb3cd57da27 Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Tue, 28 Jan 2025 13:01:24 +0100
Subject: [PATCH] directive(text color contrast): adds a directive that
 determines a suitable font color based on the background color of the element
 through a directive

---
 public/js/directives/contrast.js | 35 ++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 public/js/directives/contrast.js

diff --git a/public/js/directives/contrast.js b/public/js/directives/contrast.js
new file mode 100644
index 000000000..9210aad57
--- /dev/null
+++ b/public/js/directives/contrast.js
@@ -0,0 +1,35 @@
+const rgbToHex = (value) => {
+	const hex = value.toString(16);
+	return hex.length === 1 ? '0' + hex : hex;
+};
+
+function getContrastYIQ(hexcolor) {
+	
+	var r = parseInt(hexcolor.substring(1, 3), 16);
+	var g = parseInt(hexcolor.substring(3, 5), 16);
+	var b = parseInt(hexcolor.substring(5, 7), 16);
+	var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
+	return (yiq >= 128) ? 'black' : 'white';
+}
+
+export default {
+	mounted(element, binding){
+		const bgColor = window.getComputedStyle(element).backgroundColor;
+		let rgbRegEx = new RegExp(/^rgba?\s*\(([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)\s*,?\s*([0-9]+.?[0-9]?)?\s*\)/);
+		let isRgb = bgColor.match(rgbRegEx);
+		if (isRgb) {
+			if (isRgb.length < 3) {
+				console.error("Invalid RGB color format");
+			}
+			let r = parseInt(isRgb[1], 10);
+			let g = parseInt(isRgb[2], 10);
+			let b = parseInt(isRgb[3], 10);
+			let hexColor = `#${rgbToHex(r)}${rgbToHex(g)}${rgbToHex(b)}`;
+			element.style.color = getContrastYIQ(hexColor);
+		}
+		else
+		{
+			element.style.color = getContrastYIQ(bgColor);
+		}
+	},
+}
\ No newline at end of file