Merge pull request #524 from marcelklehr/master

Dynamic text color (adding dynamic link text color)
ether · Feb 29, 2012 · 6fd73ec · 6fd73ec
2 parents b148a42 + f5f82a7
commit 6fd73ec
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 7 deletions.
diff --git a/static/js/ace2_inner.js b/static/js/ace2_inner.js
@@ -229,18 +229,34 @@ function Ace2Inner(){
             bgcolor = fadeColor(bgcolor, info.fade);
           }
 
-          // Text color
-          var txtcolor = (colorutils.luminosity(colorutils.css2triple(bgcolor)) < 0.5) ? '#ffffff' : '#000000';
-
           var authorStyle = dynamicCSS.selectorStyle(getAuthorColorClassSelector(
           getAuthorClassName(author)));
-          authorStyle.backgroundColor = bgcolor;
-          authorStyle.color = txtcolor;
-
           var authorStyleTop = dynamicCSSTop.selectorStyle(getAuthorColorClassSelector(
           getAuthorClassName(author)));
+          var anchorStyle = dynamicCSS.selectorStyle(getAuthorColorClassSelector(
+          getAuthorClassName(author))+' > a')
+
+          // author color
+          authorStyle.backgroundColor = bgcolor;
           authorStyleTop.backgroundColor = bgcolor;
-          authorStyleTop.color = txtcolor;
+
+          // text contrast
+          if(colorutils.luminosity(colorutils.css2triple(bgcolor)) < 0.5)
+          {
+            authorStyle.color = '#ffffff';
+            authorStyleTop.color = '#ffffff';
+          }else{
+            authorStyle.color = null;
+            authorStyleTop.color = null;
+          }
+
+          // anchor text contrast
+          if(colorutils.luminosity(colorutils.css2triple(bgcolor)) < 0.55)
+          {
+            anchorStyle.color = colorutils.triple2css(colorutils.complementary(colorutils.css2triple(bgcolor)));
+          }else{
+            anchorStyle.color = null;
+          }
         }
       }
     }

diff --git a/static/js/colorutils.js b/static/js/colorutils.js
@@ -120,4 +120,19 @@ colorutils.blend = function(c1, c2, t)
   return [colorutils.scale(t, c1[0], c2[0]), colorutils.scale(t, c1[1], c2[1]), colorutils.scale(t, c1[2], c2[2])];
 }
 
+colorutils.invert = function(c)
+{
+  return [1 - c[0], 1 - c[1], 1- c[2]];
+}
+
+colorutils.complementary = function(c)
+{
+  var inv = colorutils.invert(c);
+  return [
+    (inv[0] >= c[0]) ? Math.min(inv[0] * 1.30, 1) : (c[0] * 0.30),
+    (inv[1] >= c[1]) ? Math.min(inv[1] * 1.59, 1) : (c[1] * 0.59),
+    (inv[2] >= c[2]) ? Math.min(inv[2] * 1.11, 1) : (c[2] * 0.11)
+  ];
+}
+
 exports.colorutils = colorutils;