aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorneauoire <aliceffekt@gmail.com>2019-11-09 11:53:24 -0500
committerneauoire <aliceffekt@gmail.com>2019-11-09 11:53:24 -0500
commit3962b96ad69f830caaddc45e5c7a9e0c09a7b1f0 (patch)
tree7727ca6733608d00cba55f575941b47684091f8b
parentba1303d34d624ecfb8a1738cc7818e35e3b4d319 (diff)
*
-rw-r--r--benchmark/index.html29
-rw-r--r--benchmark/links/main.css6
-rw-r--r--benchmark/links/reset.css1
-rw-r--r--benchmark/links/theme.css15
-rw-r--r--benchmark/scripts/benchmark.js47
-rw-r--r--benchmark/scripts/color.js39
-rw-r--r--benchmark/scripts/lib/theme.js155
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