diff options
| author | neauoire <aliceffekt@gmail.com> | 2019-11-09 11:53:24 -0500 |
|---|---|---|
| committer | neauoire <aliceffekt@gmail.com> | 2019-11-09 11:53:24 -0500 |
| commit | 3962b96ad69f830caaddc45e5c7a9e0c09a7b1f0 (patch) | |
| tree | 7727ca6733608d00cba55f575941b47684091f8b | |
| parent | ba1303d34d624ecfb8a1738cc7818e35e3b4d319 (diff) | |
*
| -rw-r--r-- | benchmark/index.html | 29 | ||||
| -rw-r--r-- | benchmark/links/main.css | 6 | ||||
| -rw-r--r-- | benchmark/links/reset.css | 1 | ||||
| -rw-r--r-- | benchmark/links/theme.css | 15 | ||||
| -rw-r--r-- | benchmark/scripts/benchmark.js | 47 | ||||
| -rw-r--r-- | benchmark/scripts/color.js | 39 | ||||
| -rw-r--r-- | benchmark/scripts/lib/theme.js | 155 |
7 files changed, 0 insertions, 292 deletions
diff --git a/benchmark/index.html b/benchmark/index.html deleted file mode 100644 index 4a4fad2..0000000 --- a/benchmark/index.html +++ /dev/null @@ -1,29 +0,0 @@ -<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"/> - <link rel="stylesheet" type="text/css" href="links/main.css"/> - <link rel="stylesheet" type="text/css" href="links/theme.css"/> - <title>Theme Benchmark</title> - </head> - <body> - <div id='benchmark'> - <table> - <tr><td class='bg f_high'>bg:f_high</td><td class='b_low f_high'>b_low:f_high</td><td class='b_med f_high'>b_med:f_high</td><td class='b_high f_high'>b_high:f_high</td></tr> - <tr><td class='bg f_med'>bg:f_med</td> <td class='b_low f_med'>b_low:f_med</td> <td class='b_med f_med'>b_med:f_med</td> <td class='b_high f_med'>b_high:f_med</td></tr> - <tr><td class='bg f_low'>bg:f_low</td> <td class='b_low f_low'>b_low:f_low</td> <td class='b_med f_low'>b_med:f_low</td> <td class='b_high f_low'>b_high:f_low</td></tr> - <tr><td class='b_inv f_inv'>b_inv:f_inv</td></tr> - </table> - </div> - <pre id='print'></pre> - <script type="text/javascript"> - let bench = new Benchmark(); - let theme = new Theme() - theme.install(document.body,bench.refresh) - theme.start() - </script> - </body> -</html> diff --git a/benchmark/links/main.css b/benchmark/links/main.css deleted file mode 100644 index dd5cbf7..0000000 --- a/benchmark/links/main.css +++ /dev/null @@ -1,6 +0,0 @@ -body { font-size:14px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding:30px; transition: background-color 500ms;} -table { margin-bottom:30px; } -table tr td { padding:5px 10px; transition: background-color 250ms, color 250ms; font-weight: bold; font-size:12px; } - -#print { font-family: courier; font-size:12px; padding:5px 10px; } -#print b { font-weight: bold }
\ No newline at end of file diff --git a/benchmark/links/reset.css b/benchmark/links/reset.css deleted file mode 100644 index 9f57584..0000000 --- a/benchmark/links/reset.css +++ /dev/null @@ -1 +0,0 @@ -* { margin:0;padding:0;border:0;outline:0;text-decoration:none;font-weight:inherit;font-style:inherit;color:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;list-style:none;border-collapse:collapse;border-spacing:0; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
\ No newline at end of file diff --git a/benchmark/links/theme.css b/benchmark/links/theme.css deleted file mode 100644 index 5cd3594..0000000 --- a/benchmark/links/theme.css +++ /dev/null @@ -1,15 +0,0 @@ -body { background:var(--background) !important } -.bg { background:var(--background) !important } -.f_high { color:var(--f_high) !important; stroke:var(--f_high) !important } -.f_med { color:var(--f_med) !important ; stroke:var(--f_med) !important } -.f_low { color:var(--f_low) !important ; stroke:var(--f_low) !important } -.f_inv { color:var(--f_inv) !important ; stroke:var(--f_inv) !important } -.b_high { background:var(--b_high) !important; fill:var(--b_high) !important } -.b_med { background:var(--b_med) !important ; fill:var(--b_med) !important } -.b_low { background:var(--b_low) !important ; fill:var(--b_low) !important } -.b_inv { background:var(--b_inv) !important ; fill:var(--b_inv) !important } - -table tr th { color:var(--f_high) !important; } -pre { color:var(--f_high) !important; } -pre b { color:var(--f_med) !important; } -pre i { color:var(--f_low) !important; }
\ No newline at end of file diff --git a/benchmark/scripts/benchmark.js b/benchmark/scripts/benchmark.js deleted file mode 100644 index 14246b9..0000000 --- a/benchmark/scripts/benchmark.js +++ /dev/null @@ -1,47 +0,0 @@ -function Benchmark() -{ - this.matches = function() - { - var a = [{id:`b_inv:f_inv`,fc:theme.active.f_inv,bc:theme.active.b_inv}] - 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] - a.push({id:`${bid}:${fid}`,fc:fc,bc:bc}) - } - } - return a; - } - - this.refresh = function() - { - let el = document.getElementById("print") - let html = "" - let count = 0 - let matches = bench.matches(); - - for(let id in matches){ - html += bench.log(matches[id].id,matches[id].fc,matches[id].bc) - } - - el.innerHTML = html - } - - this.log = function(id,fc,bc) - { - let html = "" - - let rating = new Color(fc).contrast(new Color(bc)); - - if(rating == 1){ - html += `Overlap: <b>${id}</b> <i>${bc}</i>\n` - } - else if(rating < 1.5){ - html += `Low contrast(${rating.toFixed(2)}): <b>${id}</b> <i>${bc}</i>\n` - } - - return html - } -} diff --git a/benchmark/scripts/color.js b/benchmark/scripts/color.js deleted file mode 100644 index 074c963..0000000 --- a/benchmark/scripts/color.js +++ /dev/null @@ -1,39 +0,0 @@ -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 diff --git a/benchmark/scripts/lib/theme.js b/benchmark/scripts/lib/theme.js deleted file mode 100644 index c094aaa..0000000 --- a/benchmark/scripts/lib/theme.js +++ /dev/null @@ -1,155 +0,0 @@ -'use strict'; - -function Theme(default_theme = {background: "#222", f_high: "#fff", f_med: "#777", f_low: "#444", f_inv: "#fff", b_high: "#000", b_med: "#aaa", b_low: "#000", b_inv: "#000"}) -{ - let themer = this; - - this.el = document.createElement("style") - this.el.type = 'text/css' - - this.callback; - this.active; - - this.collection = { - default: default_theme, - noir: {background: "#222", f_high: "#fff", f_med: "#777", f_low: "#444", f_inv: "#fff", b_high: "#000", b_med: "#aaa", b_low: "#000", b_inv: "#000" }, - pale: {background: "#e1e1e1", f_high: "#000", f_med: "#777", f_low: "#aaa", f_inv: "#000", b_high: "#000", b_med: "#aaa", b_low: "#ccc", b_inv: "#fff" } - } - - this.install = function(host = document.body,callback) - { - console.log("Theme","Installing..") - host.appendChild(this.el) - this.callback = callback - } - - this.start = function() - { - console.log("Theme","Starting..") - let storage = is_json(localStorage.theme) ? JSON.parse(localStorage.theme) : this.collection.default; - this.load(!storage.background ? this.collection.default : storage) - } - - this.save = function(theme) - { - console.log("Theme","Saving..") - this.active = theme; - localStorage.setItem("theme", JSON.stringify(theme)); - } - - this.load = function(theme, fall_back = this.collection.noir) - { - if(!theme || !theme.background){ console.warn("Theme","Not a theme",theme); return; } - - this.save(theme); - this.apply(theme); - - if(this.callback){ - this.callback(); - } - } - - this.apply = function(theme) - { - this.el.innerHTML = ` - :root { - --background: ${theme.background}; - --f_high: ${theme.f_high}; - --f_med: ${theme.f_med}; - --f_low: ${theme.f_low}; - --f_inv: ${theme.f_inv}; - --b_high: ${theme.b_high}; - --b_med: ${theme.b_med}; - --b_low: ${theme.b_low}; - --b_inv: ${theme.b_inv}; - }`; - } - - this.parse = function(any) - { - let theme; - - if(any && any.background){ return any; } - else if(any && any.data){ return any.data; } - else if(any && is_json(any)){ return JSON.parse(any); } - else if(any && is_html(any)){ return this.extract(any); } - - return null; - } - - this.extract = function(text) - { - let svg = new DOMParser().parseFromString(text,"text/xml") - - try{ - return { - "background": svg.getElementById("background").getAttribute("fill"), - "f_high": svg.getElementById("f_high").getAttribute("fill"), - "f_med": svg.getElementById("f_med").getAttribute("fill"), - "f_low": svg.getElementById("f_low").getAttribute("fill"), - "f_inv": svg.getElementById("f_inv").getAttribute("fill"), - "b_high": svg.getElementById("b_high").getAttribute("fill"), - "b_med": svg.getElementById("b_med").getAttribute("fill"), - "b_low": svg.getElementById("b_low").getAttribute("fill"), - "b_inv": svg.getElementById("b_inv").getAttribute("fill") - }; - } - catch(err){ - console.warn("Theme","Incomplete SVG Theme", err) - } - } - - this.reset = function() - { - this.load(this.collection.default); - } - - // Defaults - - this.pale = function() - { - this.load(this.collection.pale) - } - - this.noir = function() - { - this.load(this.collection.noir) - } - - this.invert = function() - { - this.load(this.active.background == this.collection.noir.background ? this.collection.pale : this.collection.noir) - } - - // Drag - - this.drag = function(e) - { - e.stopPropagation(); - e.preventDefault(); - e.dataTransfer.dropEffect = 'copy'; - } - - this.drop = function(e) - { - e.preventDefault(); - e.stopPropagation(); - - let file = e.dataTransfer.files[0]; - - if(!file || !file.name){ console.warn("Theme","Unnamed file."); return; } - if(file.name.indexOf(".thm") < 0 && file.name.indexOf(".svg") < 0){ console.warn("Theme","Skipped, not a theme"); return; } - - let reader = new FileReader(); - reader.onload = function(e){ - themer.load(themer.parse(e.target.result)); - }; - reader.readAsText(file); - } - - window.addEventListener('dragover',this.drag); - window.addEventListener('drop', this.drop); - - function is_json(text){ try{ JSON.parse(text); return true; } catch (error){ return false; } } - function is_html(text){ try{ new DOMParser().parseFromString(text,"text/xml"); return true; } catch (error){ return false; } } -}
\ No newline at end of file |
