Minor cleanup

author: Devine Lu Linvega <aliceffekt@gmail.com> 2018-09-15 15:08:49 +1200
committer: Devine Lu Linvega <aliceffekt@gmail.com> 2018-09-15 15:08:49 +1200
commit: ef19f4e562cfca7d5eca50e22283d94ff890a1d7 (patch)
tree: 1c3d817f53f9017b24384029a72101a0afd0866e /benchmark
parent: 84faf74d2198378c760c57696bd1f36bc3ee4603 (diff)
3 files changed, 43 insertions, 96 deletions
diff --git a/benchmark/index.html b/benchmark/index.html
index 680eec4..eee1d2f 100644
--- a/benchmark/index.html
+++ b/benchmark/index.html
@@ -1,6 +1,7 @@
 <html>
   <head>
     <meta charset="utf-8"/>
+    <script type="text/javascript" src="scripts/color.js"></script>
     <script type="text/javascript" src="scripts/benchmark.js"></script>
     <script type="text/javascript" src="scripts/lib/theme.js"></script>
     <link rel="stylesheet" type="text/css" href="links/reset.css"/>
diff --git a/benchmark/scripts/benchmark.js b/benchmark/scripts/benchmark.js
index 6d9aec1..d62ae33 100644
--- a/benchmark/scripts/benchmark.js
+++ b/benchmark/scripts/benchmark.js
@@ -1,116 +1,23 @@
 function Benchmark()
 {
-  function hex_to_rgb(c)
-  {
-    let rgb
-    if(c.length === 4 || c.length === 7){ c = c.slice(1) }
-    if(c.length === 3){
-      rgb = [ parseInt(c.slice(0, 1), 16) * 17, parseInt(c.slice(1, 2), 16) * 17, parseInt(c.slice(2, 3), 16) * 17 ]
-    }
-    else if(c.length === 6){
-      rgb = [ parseInt(c.slice(0, 2), 16), parseInt(c.slice(2, 4), 16), parseInt(c.slice(4, 6), 16) ]
-    }
-    return (!rgb || isNaN(rgb[0]) || isNaN(rgb[1]) || isNaN(rgb[2])) ? null : rgb
-  }
-
-  function wcag_contrast(c0, c1)
-  {
-    function _linear(v){ return (v <= 0.03928) ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4) }
-    function _relative_luminance(rgb)
-    {
-      let r = _linear(rgb[0] / 256)
-      let g = _linear(rgb[1] / 256)
-      let b = _linear(rgb[2] / 256)
-      return 0.2126 * r + 0.7152 * g + 0.0722 * b
-    }
-    function _contrast(c0, c1)
-    {
-      let l0 = _relative_luminance(c0)
-      let l1 = _relative_luminance(c1)
-      return l0 > l1 ? (l0 + 0.05) / (l1 + 0.05) : (l1 + 0.05) / (l0 + 0.05)
-    }
-    let Contrast = function(r)
-    {
-      this.ratio = r.toFixed(1)
-      this.aa = r > 4.5
-      this.aaa = r > 7.0
-      this.large = {
-        aa: r > 3.0,
-        aaa: r > 4.5
-      }
-    }
-    Contrast.prototype.toString = function()
-    {
-      let str = this.ratio.toString()
-      if(this.aaa){ str += " ✓✓✓" }
-      else if(this.aa && this.large.aaa){ str += " ✓✓~" }
-      else if(this.large.aaa){ str += " ~~~" }
-      else if(this.aa){ str += " ✓✓" }
-      else if(this.large.aa){ str += " ~~" }
-      else { str += " ✗" }
-      return str
-    }
-    return new Contrast(_contrast(c0, c1))
-  }
-
   this.refresh = function(theme = this)
   {
     let el = document.getElementById("print")
     let html = ""
     let count = 0
-    let contrast = {}
-    let contrast_html = ""
-    let contrast_count = 0
     for(let fid in theme.active){
       if(fid.substr(0,1) != "f" || fid.indexOf("_inv") > -1){ continue; }
       let fc = theme.active[fid]
       for(let bid in theme.active){
         if(bid.substr(0,1) != "b" || bid.indexOf("_inv") > -1){ continue; }
         let bc = theme.active[bid]
-        if(fc != bc){
-          let frgb = hex_to_rgb(fc)
-          let brgb = hex_to_rgb(bc)
-          if(frgb && brgb){
-            let c = wcag_contrast(frgb, brgb)
-            if(!c.aa)
-            {
-              contrast_html += `<b>${fid}</b> ${bid} <i>has low contrast (${c.toString()})</i>\n`
-              contrast_count += 1
-            }
-            contrast[fid] = { [bid]: c.toString(), ...contrast[fid] }
-          }
-          else{
-            console.warn(`Unable to evaluate against WCAG 2.0: ${frgb} ${brgb}`)
-          }
-          
-          continue; 
+        let rating = new Color(fc).contrast(new Color(bc));
+        if(rating < 3){
+          html += `Low contrast(${rating.toFixed(2)}): <b>${fid}</b> ${bid} <i>${bc}</i>\n`  
         }
-        html += `<b>${fid}</b> ${bid} <i>${bc}</i>\n`
         count += 1
       }
     }
-    if(theme.active.f_inv == theme.active.b_inv){
-      html += `<b>f_inv</b> b_inv <i>${theme.active.f_inv}</i>\n`
-      count += 1
-    }
-    else{
-      let frgb = hex_to_rgb(theme.active.f_inv)
-      let brgb = hex_to_rgb(theme.active.b_inv)
-      if(frgb && brgb){
-        let c = wcag_contrast(frgb, brgb)
-        if(!c.aa){
-          contrast_html += `<b>f_inv</b> b_inv <i>has low contrast (${c.toString()})</i>\n`
-          contrast_count += 1
-        }
-        contrast["f_inv"] = {"b_inv": wcag_contrast(frgb, brgb).toString() }
-      }
-      else{
-        console.warn(`Unable to evaluate against WCAG 2.0: ${frgb} ${brgb}`)
-      }
-    }
-    console.info("WCAG 2.0 contrast:")
-    console.table(contrast)
     el.innerHTML = count > 0 ? `${html}\n<i>${count} conflicts</i>\n\n` : ""
-    el.innerHTML += contrast_count > 0 ? `${contrast_html}\n<i>${contrast_count} contrast warnings</i>` : ""
   }
 }
diff --git a/benchmark/scripts/color.js b/benchmark/scripts/color.js
new file mode 100644
index 0000000..074c963
--- /dev/null
+++ b/benchmark/scripts/color.js
@@ -0,0 +1,39 @@
+function Color(hex = '#000000')
+{  
+  this.hex = hex;
+
+  var r = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(this.hex);
+
+  this.rgb = {r: parseInt(r[1], 16),g: parseInt(r[2], 16),b: parseInt(r[3], 16)}
+
+  this.r = this.rgb.r;
+  this.g = this.rgb.g;
+  this.b = this.rgb.b;
+
+  this.average = parseInt((this.rgb.r + this.rgb.g + this.rgb.b)/3)
+  this.invert = {r:255-this.rgb.r, g:255-this.rgb.g, b:255-this.rgb.b};
+
+  this.contrast = function(b)
+  {
+    let a_lum = 0.2126 * _linear(this.r / 256) + 0.7152 * _linear(this.g / 256) + 0.0722 * _linear(this.b / 256)
+    let b_lum = 0.2126 * _linear(b.r / 256) + 0.7152 * _linear(b.g / 256) + 0.0722 * _linear(b.b / 256)
+    return a_lum > b_lum ? (a_lum + 0.05) / (b_lum + 0.05) : (b_lum + 0.05) / (a_lum + 0.05);
+  }
+
+  this.rgba = function()
+  {
+    return "rgba("+this.rgb().r+","+this.rgb().g+","+this.rgb().b+",1)";
+  }
+
+  this.floats = function()
+  {
+    return { r:this.rgb.r/255, g:this.rgb.g/255, b:this.rgb.b/255 }
+  }
+
+  this.toString = function()
+  {
+    return this.hex;
+  }
+
+  function _linear(v){ return (v <= 0.03928) ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); }
+}
+\ No newline at end of file
author	Devine Lu Linvega <aliceffekt@gmail.com>	2018-09-15 15:08:49 +1200
committer	Devine Lu Linvega <aliceffekt@gmail.com>	2018-09-15 15:08:49 +1200
commit	ef19f4e562cfca7d5eca50e22283d94ff890a1d7 (patch)
tree	1c3d817f53f9017b24384029a72101a0afd0866e /benchmark
parent	84faf74d2198378c760c57696bd1f36bc3ee4603 (diff)