Added a theme tester.

author: Devine Lu Linvega <aliceffekt@gmail.com> 2018-09-15 06:53:19 +1200
committer: Devine Lu Linvega <aliceffekt@gmail.com> 2018-09-15 06:53:19 +1200
commit: 10b8f55b923b3f86d7a70a0bef0f8047348ae062 (patch)
tree: abc7289fe4056d1ba9ad30ffe43b7e657bf5b734
parent: 0d5f9a0f5c9d70645a7911f3ef2c7bc17460ccbf (diff)
5 files changed, 215 insertions, 0 deletions
diff --git a/benchmark/index.html b/benchmark/index.html
new file mode 100644
index 0000000..e944121
--- /dev/null
+++ b/benchmark/index.html
@@ -0,0 +1,44 @@
+<html>
+  <head>    
+    <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 class='wrapper'>
+      <table>
+        <tr><td class='f_high'>hello</td><td class='b_low f_high'>hello</td><td class='b_med f_high'>hello</td><td class='b_high f_high'>hello</td></tr>
+        <tr><td class='f_med'>hello</td> <td class='b_low f_med'>hello</td> <td class='b_med f_med'>hello</td> <td class='b_high f_med'>hello</td></tr>
+        <tr><td class='f_low'>hello</td> <td class='b_low f_low'>hello</td> <td class='b_med f_low'>hello</td> <td class='b_high f_low'>hello</td></tr>
+        <tr><td class='f_inv'>hello</td> <td class='b_low f_inv'>hello</td> <td class='b_med f_inv'>hello</td> <td class='b_high f_inv'>hello</td></tr>
+      </table>
+    </div>
+    <pre id='print'></pre>
+    <script type="text/javascript">
+      let theme = new Theme()
+      theme.install(document.body,refresh)
+      theme.start()
+
+      function refresh()
+      {
+        let el = document.getElementById('print')
+        let html = ""
+        let count = 0
+        for(let fid in theme.active){
+          if(fid.substr(0,1) != "f"){ continue; }
+          let fc = theme.active[fid]
+          for(let bid in theme.active){
+            if(bid.substr(0,1) != "b"){ continue; }
+            let bc = theme.active[bid]
+            if(fc != bc){ continue; }
+            html += `<b>${fid}</b>(${fc}) -> ${bid}(${bc})\n`
+            count += 1
+          }
+        }
+        el.innerHTML = html+`\n${count} conflicts`;
+      }
+    </script>
+  </body>
+</html>
diff --git a/benchmark/links/main.css b/benchmark/links/main.css
new file mode 100644
index 0000000..f55bb79
--- /dev/null
+++ b/benchmark/links/main.css
@@ -0,0 +1,6 @@
+body { font-size:14px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding:30px;}
+table { margin-bottom:30px; }
+table tr td { padding:5px; }
+
+#print { font-family: courier; font-size:12px; }
+#print b { font-weight: bold }
+\ No newline at end of file
diff --git a/benchmark/links/reset.css b/benchmark/links/reset.css
new file mode 100644
index 0000000..9f57584
--- /dev/null
+++ b/benchmark/links/reset.css
@@ -0,0 +1 @@
+* { 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
new file mode 100644
index 0000000..df65d7d
--- /dev/null
+++ b/benchmark/links/theme.css
@@ -0,0 +1,9 @@
+body { background:var(--background) !important }
+.f_high { font-weight:bold; 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 }
+\ No newline at end of file
diff --git a/benchmark/scripts/lib/theme.js b/benchmark/scripts/lib/theme.js
new file mode 100644
index 0000000..c094aaa
--- /dev/null
+++ b/benchmark/scripts/lib/theme.js
@@ -0,0 +1,155 @@
+'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
author	Devine Lu Linvega <aliceffekt@gmail.com>	2018-09-15 06:53:19 +1200
committer	Devine Lu Linvega <aliceffekt@gmail.com>	2018-09-15 06:53:19 +1200
commit	10b8f55b923b3f86d7a70a0bef0f8047348ae062 (patch)
tree	abc7289fe4056d1ba9ad30ffe43b7e657bf5b734
parent	0d5f9a0f5c9d70645a7911f3ef2c7bc17460ccbf (diff)