diff --git a/desktop/sources/index.html b/desktop/sources/index.html
index 69b73f9..583223d 100644
--- a/desktop/sources/index.html
+++ b/desktop/sources/index.html
@@ -78,8 +78,9 @@
dotgrid.controller.add("default","View","Tools",() => { dotgrid.interface.toggle(); },"U");
dotgrid.controller.add("default","View","Grid",() => { dotgrid.guide.toggle(); },"H");
- dotgrid.controller.add("default","Theme","Noir",() => { dotgrid.theme.noir(); },"CmdOrCtrl+Shift+1");
- dotgrid.controller.add("default","Theme","Pale",() => { dotgrid.theme.pale(); },"CmdOrCtrl+Shift+2");
+ dotgrid.controller.add("default","Theme","Default",() => { dotgrid.theme.default(); },"CmdOrCtrl+Shift+1");
+ dotgrid.controller.add("default","Theme","Noir",() => { dotgrid.theme.noir(); },"CmdOrCtrl+Shift+2");
+ dotgrid.controller.add("default","Theme","Pale",() => { dotgrid.theme.pale(); },"CmdOrCtrl+Shift+3");
dotgrid.controller.add("default","Theme","Invert",() => { dotgrid.theme.invert(); },"CmdOrCtrl+Shift+I");
dotgrid.controller.add("default","Theme","Install",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Themes'); });
diff --git a/desktop/sources/scripts/lib/theme.js b/desktop/sources/scripts/lib/theme.js
index 25ed35c..d9d75a6 100644
--- a/desktop/sources/scripts/lib/theme.js
+++ b/desktop/sources/scripts/lib/theme.js
@@ -1,44 +1,62 @@
'use strict';
-function Theme()
+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 theme = this;
+ let themer = this;
- this.el = document.createElement("style");
- this.el.type = 'text/css';
- this.callback = null;
+ this.el = document.createElement("style")
+ this.el.type = 'text/css'
+ this.callback;
+ this.active;
this.collection = {
- noir: {meta:{}, data: { 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: {meta:{}, data: { 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" }}
+ 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.active = this.collection.noir;
-
this.install = function(host = document.body,callback)
{
host.appendChild(this.el)
- this.callback = callback;
+ this.callback = callback
}
this.start = function()
{
- this.load(localStorage.theme ? localStorage.theme : this.collection.noir, this.collection.noir);
+ this.restore();
}
- this.load = function(t, fall_back = this.collection.noir)
+ this.restore = function()
{
- let theme = is_json(t) ? JSON.parse(t).data : t.data;
+ let storage = is_json(localStorage.theme) ? JSON.parse(localStorage.theme) : this.collection.default;
- if(!theme || !theme.background){
- if(fall_back) {
- theme = fall_back.data;
- } else {
- return;
- }
- }
+ this.load(!storage.background ? this.collection.default : storage)
+ }
- let css = `
+ this.parse = function(any)
+ {
+ let theme;
+
+ if(any && any.data){ return any; }
+ else if(any && is_json(any)){ return JSON.parse(any); }
+ else if(any && is_html(any)){ return this.extract(any); }
+
+ return null;
+ }
+
+ this.unwrap = function(t)
+ {
+ return t.data ? t.data : t;
+ }
+
+ this.load = function(theme, fall_back = this.collection.noir)
+ {
+ if(!theme || !theme.background){ console.warn("Theme","Not a theme",theme); return; }
+
+ this.active = theme;
+ localStorage.setItem("theme", JSON.stringify(theme));
+
+ this.el.innerHTML = `
:root {
--background: ${theme.background};
--f_high: ${theme.f_high};
@@ -51,10 +69,6 @@ function Theme()
--b_inv: ${theme.b_inv};
}`;
- this.active = theme;
- this.el.innerHTML = css;
- localStorage.setItem("theme", JSON.stringify({data: theme}));
-
if(this.callback){
this.callback();
}
@@ -62,11 +76,16 @@ function Theme()
this.reset = function()
{
- this.load(this.collection.noir);
+ this.load(this.collection.default);
}
// Defaults
+ this.default = function()
+ {
+ this.load(this.collection.default)
+ }
+
this.pale = function()
{
this.load(this.collection.pale)
@@ -82,33 +101,61 @@ function Theme()
this.load(this.active.background == this.collection.noir.data.background ? this.collection.pale : this.collection.noir)
}
+ // Parser
+
+ 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)
+ }
+ }
+
// Drag
- this.drag_enter = function(e)
+ this.drag = function(e)
{
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
}
- this.drag = function(e)
+ this.drop = function(e)
{
e.preventDefault();
e.stopPropagation();
let file = e.dataTransfer.files[0];
- if(!file.name || !file.name.indexOf(".thm") < 0){ console.log("Theme","Not a theme"); return; }
+ if(!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){
- theme.load(e.target.result);
+ let theme = themer.parse(e.target.result);
+ themer.load(theme);
};
reader.readAsText(file);
}
- window.addEventListener('dragover',this.drag_enter);
- window.addEventListener('drop', this.drag);
+ 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; } }
+ function is_embed(text){ return text.indexOf("") > -1; }
}
\ No newline at end of file