Fix bug with tooltip colour

open-innovations · Oct 24, 2024 · 4ebefdf · 4ebefdf
1 parent 756eb39
commit 4ebefdf
Showing 1 changed file with 9 additions and 39 deletions.
diff --git a/assets/js/tooltip.js b/assets/js/tooltip.js
@@ -1,5 +1,5 @@
 /*
-	Open Innovations Tooltip v0.5.1
+	Open Innovations Tooltip v0.5.2
 	Helper function to add tooltips. A suitable candidate must:
 		- be in an SVG
 		- have a <title> child
@@ -311,7 +311,7 @@
 				box.style.border = "0px";
 			}
 
-			tip.style.color = (fill && root.OI.contrastColour ? root.OI.contrastColour(fill) : "black");
+			box.style.color = (fill && root.OI.contrastColour ? root.OI.contrastColour(fill) : "black");
 
 			this.position();
 
@@ -483,52 +483,22 @@
 		if(OI.Tooltips && OI.Tooltips.active) OI.Tooltips.active.position();
 	});
 
-	// Convert to sRGB colorspace
-	// https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
-	function sRGBToLinear(v){ v /= 255; if (v <= 0.03928){ return v/12.92; }else{ return Math.pow((v+0.055)/1.055,2.4); } }
 	function h2d(h) {return parseInt(h,16);}
-	// https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
-	function relativeLuminance(rgb){ return 0.2126 * sRGBToLinear(rgb[0]) + 0.7152 * sRGBToLinear(rgb[1]) + 0.0722 * sRGBToLinear(rgb[2]); }
-	// https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#contrast-ratiodef
-	function contrastRatio(a, b){
-		var L1 = relativeLuminance(a);
-		var L2 = relativeLuminance(b);
-		if(L1 < L2){
-			var temp = L2;
-			L2 = L1;
-			L1 = temp;
-		}
-		return (L1 + 0.05) / (L2 + 0.05);
-	}
+	function toLin(v){ v /= 255; if (v <= 0.03928){ return v/12.92; }else{ return Math.pow((v+0.055)/1.055,2.4); }}
+	function rLum(rgb){ return 0.2126 * toLin(rgb[0]) + 0.7152 * toLin(rgb[1]) + 0.0722 * toLin(rgb[2]); }
+	function contrastRatio(a, b){ let L1 = rLum(a); let L2 = rLum(b); if(L1 < L2){ let temp = L2; L2 = L1; L1 = temp; } return (L1 + 0.05) / (L2 + 0.05); }
 	function colour2RGB(c){
-		var rgb = [];
+		var rgb = [],bits;
 		if(c.indexOf('#')==0){
 			rgb = [h2d(c.substring(1,3)),h2d(c.substring(3,5)),h2d(c.substring(5,7))];
 		}else if(c.indexOf('rgb')==0){
-			var bits = c.match(/[0-9\.]+/g);
+			bits = c.match(/[0-9\.]+/g);
 			if(bits.length == 4) this.alpha = parseFloat(bits[3]);
 			rgb = [parseInt(bits[0]),parseInt(bits[1]),parseInt(bits[2])];
 		}
 		return rgb;
 	}
-	function contrastColour(c){
-		var rgb = colour2RGB(c);
-		var cols = { "black": [0, 0, 0], "white": [255, 255, 255] };
-		var maxRatio = 0;
-		var contrast = "white";
-		for(var col in cols){
-			if(cols[col]){
-				var contr = contrastRatio(rgb, cols[col]);
-				if(contr > maxRatio){
-					maxRatio = contr;
-					contrast = col;
-				}
-			}
-		}
-		if(maxRatio < 4.5){
-			console.warn('Text contrast poor ('+maxRatio.toFixed(1)+') for %c'+c+'%c','background:'+c+';color:'+contrast,'background:none;color:inherit;');
-		}
-		return contrast;
-	}
+	function contrastColour(c){ let rgb = colour2RGB(c); return (contrastRatio(rgb,[0, 0, 0]) > contrastRatio(rgb,[255, 255, 255]) ? "black" : "white"); }
 	if(!root.OI.contrastColour) root.OI.contrastColour = contrastColour;
+
 })(window || this);