Improved themes

README.md

@@ -14,7 +14,7 @@ npm start
 
 ## Extras
 
-- Download additional [themes](https://github.com/hundredrabbits/Themes).
+- This application supports the [Ecosystem Theme](https://github.com/hundredrabbits/Themes).
 - Support this project through [Patreon](https://patreon.com/100).
 - See the [License](LICENSE.md) file for license rights and limitations (MIT).
 - Pull Requests are welcome!

desktop/sources/index.html

@@ -78,9 +78,8 @@
         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","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","Noir",() => { dotgrid.theme.noir(); },"CmdOrCtrl+Shift+1");
+        dotgrid.controller.add("default","Theme","Pale",() => { dotgrid.theme.pale(); },"CmdOrCtrl+Shift+2");
         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'); });
 

desktop/sources/scripts/lib/theme.js

@@ -6,6 +6,7 @@ function Theme(default_theme = {background: "#222", f_high: "#fff", f_med: "#777
 
   this.el = document.createElement("style")
   this.el.type = 'text/css'
+
   this.callback;
   this.active;
 
@@ -22,40 +23,31 @@ function Theme(default_theme = {background: "#222", f_high: "#fff", f_med: "#777
   }
 
   this.start = function()
-  {
-    this.restore();
-  }
-
-  this.restore = function()
   {
     let storage = is_json(localStorage.theme) ? JSON.parse(localStorage.theme) : this.collection.default;
-
     this.load(!storage.background ? this.collection.default : storage)
   }
 
-  this.parse = function(any)
+  this.save = function(theme)
   {
-    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.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.active = theme;
-    localStorage.setItem("theme", JSON.stringify(theme));
+    this.save(theme);
+    this.apply(theme);
 
+    if(this.callback){
+      this.callback();  
+    }
+  }
+
+  this.apply = function(theme)
+  {
     this.el.innerHTML = `
     :root {
       --background: ${theme.background};
@@ -68,41 +60,19 @@ function Theme(default_theme = {background: "#222", f_high: "#fff", f_med: "#777
       --b_low: ${theme.b_low};
       --b_inv: ${theme.b_inv};
     }`;
-
-    if(this.callback){
-      this.callback();  
-    }
   }
 
-  this.reset = function()
+  this.parse = function(any)
   {
-    this.load(this.collection.default);
+    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;
   }
 
-  // Defaults
-
-  this.default = function()
-  {
-    this.load(this.collection.default)
-  }
-
-  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.data.background ? this.collection.pale : this.collection.noir)
-  }
-
-  // Parser
-
   this.extract = function(text)
   {
     let svg = new DOMParser().parseFromString(text,"text/xml")
@@ -125,6 +95,28 @@ function Theme(default_theme = {background: "#222", f_high: "#fff", f_med: "#777
     }
   }
 
+  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.data.background ? this.collection.pale : this.collection.noir)
+  }
+
   // Drag
 
   this.drag = function(e)
@@ -146,8 +138,7 @@ function Theme(default_theme = {background: "#222", f_high: "#fff", f_med: "#777
 
     let reader = new FileReader();
     reader.onload = function(e){
-      let theme = themer.parse(e.target.result);
-      themer.load(theme);
+      themer.load(themer.parse(e.target.result));
     };
     reader.readAsText(file);
   }
@@ -157,5 +148,4 @@ function Theme(default_theme = {background: "#222", f_high: "#fff", f_med: "#777
 
   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("<!-- THEME") > -1 && text.indexOf("-->") > -1; }
 }