Started Live version

web/scripts/lib/history.js

@@ -0,0 +1,50 @@
+function History()
+{
+  this.index = 0;
+  this.a = [];
+
+  this.clear = function()
+  {
+    this.a = [];
+    this.index = 0;
+  }
+
+  this.push = function(data)
+  {
+    if(this.index < this.a.length-1){
+      this.fork();
+    }
+    this.index = this.a.length;
+    this.a = this.a.slice(0,this.index);
+    this.a.push(copy(data));
+
+    if(this.a.length > 20){
+      this.a.shift();
+    }
+  }
+
+  this.fork = function()
+  {
+    this.a = this.a.slice(0,this.index+1);
+  }
+
+  this.pop = function()
+  {
+    return this.a.pop();
+  }
+
+  this.prev = function()
+  {
+    this.index = clamp(this.index-1,0,this.a.length-1);
+    return copy(this.a[this.index]);
+  }
+
+  this.next = function()
+  {
+    this.index = clamp(this.index+1,0,this.a.length-1);
+    return copy(this.a[this.index]);
+  }
+
+  function copy(data){ return data ? JSON.parse(JSON.stringify(data)) : []; }
+  function clamp(v, min, max) { return v < min ? min : v > max ? max : v; }
+}

web/scripts/lib/theme.js

@@ -0,0 +1,86 @@
+function Theme()
+{
+  var app = this;
+
+  this.el = document.createElement("style");
+  this.el.type = 'text/css';
+  this.default = {meta:{}, data: { background: "#222", f_high: "#fff", f_med: "#777", f_low: "#444", f_inv: "#000", b_high: "#000", b_med: "#affec7", b_low: "#000", b_inv: "#affec7" }}
+  this.active = this.default;
+
+  this.start = function()
+  {
+    this.load(localStorage.theme ? localStorage.theme : this.default, this.default);
+    window.addEventListener('dragover',this.drag_enter);
+    window.addEventListener('drop', this.drag);
+    document.head.appendChild(this.el)
+  }
+
+  this.load = function(t, fall_back)
+  {
+    var theme = is_json(t) ? JSON.parse(t).data : t.data;
+
+    if(!theme || !theme.background){
+      if(fall_back) {
+        theme = fall_back.data;
+      } else {
+        return;
+      }
+    }
+
+    var css = `
+    :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.active = theme;
+    this.el.textContent = css;
+    localStorage.setItem("theme", JSON.stringify({data: theme}));
+  }
+
+  this.reset = function()
+  {
+    this.load(this.default);
+  }
+
+  this.drag_enter = function(e)
+  {
+    e.stopPropagation();
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'copy';
+  }
+
+  this.drag = function(e)
+  {
+    e.preventDefault();
+    e.stopPropagation();
+
+    var file = e.dataTransfer.files[0];
+
+    if(!file.name || !file.name.indexOf(".thm") < 0){ console.log("Theme","Not a theme"); return; }
+
+    var reader = new FileReader();
+    reader.onload = function(e){
+      app.load(e.target.result);
+    };
+    reader.readAsText(file);
+  }
+
+  function is_json(text)
+  {
+    try{
+      JSON.parse(text);
+      return true;
+    }
+    catch (error){
+      return false;
+    }
+  }
+}