vlakoff · November 29, 2024 15:29
diff --git a/media-controller-extension-issue-14.html b/media-controller-extension-issue-14.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>media-controller-extension issue #14</title>
 	<style>
 		#container {
 			display: flex;
 			flex-wrap: wrap;
 		}
 		.box {
 			width: 200px;
 			height: 100px;
 			margin: 10px;
 			display: flex;
 			align-items: center;
 			justify-content: center;
 			font-weight: bold;
 		}
 	</style>
 </head>
 <body>
 	<div id="container"></div>

 	<script>
 		function onDocumentReady(callback) {
 			if (document.readyState === 'loading') {
 				document.addEventListener('DOMContentLoaded', callback);
 			} else {
 				callback();
 			}
 		}

 		function randomColors(count) {
 			return Array.from({length: count}, () =>
 				'#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0')
 			);
 		}

 		function hexToRgb(hex) {
 			hex = hex.replace(/^#/, '');
 			return [
 				parseInt(hex.substring(0, 2), 16),
 				parseInt(hex.substring(2, 4), 16),
 				parseInt(hex.substring(4, 6), 16)
 			];
 		}

 		function rgbToHex(rgb) {
 			return '#' + rgb.map(value => value.toString(16).padStart(2, '0')).join('');
 		}

 		function brightness(color) {
 			return ((299 * color[0]) + (587 * color[1]) + (114 * color[2])) / 1000;
 		}

 		function luminance(rgb) {
 			const a = rgb.map(v => {
 				v /= 255;
 				return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
 			});
 			return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
 		}

 		function contrast(rgb1, rgb2) {
 			const lum1 = luminance(rgb1);
 			const lum2 = luminance(rgb2);
 			const brightest = Math.max(lum1, lum2);
 			const darkest = Math.min(lum1, lum2);
 			return (brightest + 0.05) / (darkest + 0.05);
 		}

 		function complementaryColor(rgb) {
 			return [255 - rgb[0], 255 - rgb[1], 255 - rgb[2]];
 		}

 		function textColorV1(backgroundHex) {
 			const background = hexToRgb(backgroundHex);
 			const complement = complementaryColor(background);
 			return rgbToHex(complement);
 		}

 		function textColorV2(backgroundHex) {
 			const background = hexToRgb(backgroundHex);
 			const complement = complementaryColor(background);
 			const isDarkBg = (brightness(background) <= 125);
 			let complementV2;
 			if (isDarkBg) {
 				const diff = 255 - Math.max(...complement);
 				complementV2 = complement.map(c => c + diff);
 			} else {
 				const diff = Math.min(...complement);
 				complementV2 = complement.map(c => c - diff);
 			}
 			return rgbToHex(complementV2);
 		}

 		function textColorV3(backgroundHex) {
 			const background = hexToRgb(backgroundHex);
 			const white = [255, 255, 255];
 			const black = [0, 0, 0];

 			const whiteContrast = contrast(background, white);
 			const blackContrast = contrast(background, black);

 			return whiteContrast > blackContrast ? rgbToHex(white) : rgbToHex(black);
 		}

 		function textColorV4(backgroundHex) {
 			const background = hexToRgb(backgroundHex);
 			const complementV1 = hexToRgb(textColorV1(backgroundHex));
 			const complementV2 = hexToRgb(textColorV2(backgroundHex));

 			const contrastV1 = contrast(background, complementV1);
 			const contrastV2 = contrast(background, complementV2);

 			return contrastV1 > contrastV2 ? rgbToHex(complementV1) : rgbToHex(complementV2);
 		}

 		function textColorV5(backgroundHex) {
 			const background = hexToRgb(backgroundHex);
 			const complement = complementaryColor(background);

 			const diffTo255 = 255 - Math.max(...complement);
 			const complementV2A = complement.map(c => c + diffTo255);

 			const diffTo0 = Math.min(...complement);
 			const complementV2B = complement.map(c => c - diffTo0);

 			const contrastV2A = contrast(background, complementV2A);
 			const contrastV2B = contrast(background, complementV2B);

 			return contrastV2A > contrastV2B ? rgbToHex(complementV2A) : rgbToHex(complementV2B);
 		}

 		onDocumentReady(function () {
 			const container = document.getElementById('container');
 			randomColors(50).forEach(bgColor => {
 				const box = document.createElement('div');
 				box.className = 'box';
 				box.style.backgroundColor = bgColor;
 				box.style.color = textColorV5(bgColor);
 				box.textContent = 'Lorem ipsum';
 				container.appendChild(box);
 			});
 		});
 	</script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>media-controller-extension issue #14</title>
	<style>
	#container {
	display: flex;
	flex-wrap: wrap;
	}
	.box {
	width: 200px;
	height: 100px;
	margin: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	}
	</style>
	</head>
	<body>
	<div id="container"></div>

	<script>
	function onDocumentReady(callback) {
	if (document.readyState === 'loading') {
	document.addEventListener('DOMContentLoaded', callback);
	} else {
	callback();
	}
	}

	function randomColors(count) {
	return Array.from({length: count}, () =>
	'#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0')
	);
	}

	function hexToRgb(hex) {
	hex = hex.replace(/^#/, '');
	return [
	parseInt(hex.substring(0, 2), 16),
	parseInt(hex.substring(2, 4), 16),
	parseInt(hex.substring(4, 6), 16)
	];
	}

	function rgbToHex(rgb) {
	return '#' + rgb.map(value => value.toString(16).padStart(2, '0')).join('');
	}

	function brightness(color) {
	return ((299 * color[0]) + (587 * color[1]) + (114 * color[2])) / 1000;
	}

	function luminance(rgb) {
	const a = rgb.map(v => {
	v /= 255;
	return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
	});
	return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
	}

	function contrast(rgb1, rgb2) {
	const lum1 = luminance(rgb1);
	const lum2 = luminance(rgb2);
	const brightest = Math.max(lum1, lum2);
	const darkest = Math.min(lum1, lum2);
	return (brightest + 0.05) / (darkest + 0.05);
	}

	function complementaryColor(rgb) {
	return [255 - rgb[0], 255 - rgb[1], 255 - rgb[2]];
	}

	function textColorV1(backgroundHex) {
	const background = hexToRgb(backgroundHex);
	const complement = complementaryColor(background);
	return rgbToHex(complement);
	}

	function textColorV2(backgroundHex) {
	const background = hexToRgb(backgroundHex);
	const complement = complementaryColor(background);
	const isDarkBg = (brightness(background) <= 125);
	let complementV2;
	if (isDarkBg) {
	const diff = 255 - Math.max(...complement);
	complementV2 = complement.map(c => c + diff);
	} else {
	const diff = Math.min(...complement);
	complementV2 = complement.map(c => c - diff);
	}
	return rgbToHex(complementV2);
	}

	function textColorV3(backgroundHex) {
	const background = hexToRgb(backgroundHex);
	const white = [255, 255, 255];
	const black = [0, 0, 0];

	const whiteContrast = contrast(background, white);
	const blackContrast = contrast(background, black);

	return whiteContrast > blackContrast ? rgbToHex(white) : rgbToHex(black);
	}

	function textColorV4(backgroundHex) {
	const background = hexToRgb(backgroundHex);
	const complementV1 = hexToRgb(textColorV1(backgroundHex));
	const complementV2 = hexToRgb(textColorV2(backgroundHex));

	const contrastV1 = contrast(background, complementV1);
	const contrastV2 = contrast(background, complementV2);

	return contrastV1 > contrastV2 ? rgbToHex(complementV1) : rgbToHex(complementV2);
	}

	function textColorV5(backgroundHex) {
	const background = hexToRgb(backgroundHex);
	const complement = complementaryColor(background);

	const diffTo255 = 255 - Math.max(...complement);
	const complementV2A = complement.map(c => c + diffTo255);

	const diffTo0 = Math.min(...complement);
	const complementV2B = complement.map(c => c - diffTo0);

	const contrastV2A = contrast(background, complementV2A);
	const contrastV2B = contrast(background, complementV2B);

	return contrastV2A > contrastV2B ? rgbToHex(complementV2A) : rgbToHex(complementV2B);
	}

	onDocumentReady(function () {
	const container = document.getElementById('container');
	randomColors(50).forEach(bgColor => {
	const box = document.createElement('div');
	box.className = 'box';
	box.style.backgroundColor = bgColor;
	box.style.color = textColorV5(bgColor);
	box.textContent = 'Lorem ipsum';
	container.appendChild(box);
	});
	});
	</script>
	</body>
	</html>