Add basic theme support.

docs/asset/style.css

@@ -1,22 +1,25 @@
 /* VARIABLES */
 :root {
   /* COLOR */
-  --color-main-bg-i: #ddd; /*idle*/
+  --color-main-bg-i: var(--background); /*#ddd;*/ /*idle*/
-  --color-main-bg-e: #ddd; /*enabled*/
+  --color-main-bg-e: var(--background); /*#ddd;*/ /*enabled*/
   
-  --color-menu-bg-i: #000; /*idle*/
+  --color-menu-bg-i: var(--b_low); /*#000;*/ /*idle*/
-  --color-menu-bg-e: #000; /*enabled*/
+  --color-menu-bg-e: var(--b_low); /*#000;*/ /*enabled*/
-  --color-menu-item-i: #333; /*idle*/
+  --color-menu-item-i: var(--b_med); /*#333;*/ /*idle*/
-  --color-menu-item-e: #999; /*enabled*/
+  --color-menu-item-e: var(--b_med); /*#999;*/ /*enabled*/
-  --color-menu-item-a: #ddd; /*ascent*/
+  --color-menu-item-a: var(--b_inv); /*#ddd;*/ /*ascent*/
+  --alpha-i: 0.6;
+  --alpha-e: 0.8;
+  --alpha-a: 1.0;
 
-  --color-content-bg-i: #ccc; /*idle*/
+  --color-content-bg-i: var(--b_low); /*#ccc;*/ /*idle*/
-  --color-content-bg-e: #bbb; /*enabled*/
+  --color-content-bg-e: var(--b_low); /*#bbb;*/ /*enabled*/
-  --color-content-item-s: #bbb; /*sub*/
+  --color-content-item-s: var(--f_high); /*#bbb;*/ /*sub*/
-  --color-content-item-i: #999; /*idle*/
+  --color-content-item-i: var(--f_high); /*#999;*/ /*idle*/
-  --color-content-item-e: #666; /*enabled*/
+  --color-content-item-e: var(--f_high); /*#666;*/ /*enabled*/
-  --color-content-item-t: #000; /*title*/
+  --color-content-item-t: var(--f_high); /*#000;*/ /*title*/
-  --color-content-item-a: #000; /*ascent*/
+  --color-content-item-a: var(--b_inv); /*#000;*/ /*ascent*/
   --color-content-image-s: rgba(255, 255, 255, .1); /*sub*/
   --color-content-image-i: rgba(255, 255, 255, .3); /*idle*/
   --color-content-image-e: rgba(255, 255, 255, .5); /*enabled*/
@@ -85,12 +88,15 @@ body {
   background: var(--color-menu-bg-e);
 }
 .menu a {
+  opacity: var(--alpha-i);
 	color: var(--color-menu-item-i);
 }
 .menu:hover a {
+  opacity: var(--alpha-e);
 	color: var(--color-menu-item-e);
 }
-.menu:hover a:hover {
+.menu a:hover {
+  opacity: var(--alpha-a);
 	color: var(--color-menu-item-a);
 }
 .menu-spacer {
@@ -131,6 +137,7 @@ body {
 	display: table;
 }
 .menu-tag-container i {
+  opacity: var(--alpha-i);
 	padding-bottom: calc(var(--menu-item-vert-sep) / 2);
 	padding-top: calc(var(--menu-item-vert-sep) / 2);
 	font-size: var(--type-icon-size);
@@ -141,8 +148,19 @@ body {
 	float: left;
 }
 .menu:hover .menu-tag-container i {
+  opacity: var(--alpha-e);
 	color: var(--color-menu-item-e);
 }
+.menu-tag-container i:hover {
+  opacity: var(--alpha-a);
+}
+.menu .menu-tag-container a {
+}
+.menu:hover .menu-tag-container a {
+}
+.menu .menu-tag-container a:hover {
+  opacity: var(--alpha-a);
+}
 .menu-tag {
 	padding-bottom: calc(var(--menu-tag-sep) / 2);
 	padding-top: calc(var(--menu-tag-sep) / 2);
@@ -333,6 +351,10 @@ body {
 	float: left;
   padding-bottom: var(--size-gutter);
   position: relative;
+  opacity: var(--alpha-i);
+}
+.grid-item:hover, .grid-item--width2:hover {
+  opacity: var(--alpha-a);
 }
 @media screen and (min-width: 886px) {
 	.grid-item--width2 { 
@@ -414,13 +436,17 @@ body {
   display: initial;
   text-shadow: 0 0 3em #000;
 }
-.grid-item .link .title { 
+.grid-item .title { 
+  opacity: var(--alpha-e);
   color: var(--color-content-item-t);
   font-size: var(--size-font-title);
   text-decoration: none;
   float: left;
   clear: both;
 }
+.grid-item:hover .title {
+  opacity: var(--alpha-a);
+}
 .grid-item-image .title {
   display: none;
 }
@@ -452,6 +478,7 @@ body {
 
 /* TYPE */
 .grid-item .type {
+  opacity: var(--alpha-i);
   width: calc(var(--type-icon-size)*2 + var(--size-gutter));
   color: var(--color-content-item-s);
   padding-bottom: var(--size-gutter);
@@ -475,29 +502,55 @@ body {
   color: var(--color-content-image-a);
 }
 .grid-item:hover .type {
+  opacity: var(--alpha-e);
   color: var(--color-content-item-i);
 }
 .grid-item:hover .type:hover {
+  opacity: var(--alpha-a);
   color: var(--color-content-item-a);
 }
 
+.grid-item .link-title {
+  opacity: var(--alpha-i);
+}
+.grid-item .fas {
+  opacity: var(--alpha-i);
+}
+.grid-item:hover .link-title {
+  opacity: var(--alpha-e);
+}
+.grid-item:hover a:hover .link-title {
+  opacity: var(--alpha-a);
+}
+.grid-item:hover a:hover .fas {
+  opacity: var(--alpha-a);
+}
+.grid-item:hover .fas {
+  opacity: var(--alpha-e);
+}
+
+
 /* LINK, NOTE, QUOTE, TERM, TAGS */
 .note, .quote, .term, .tags, .auth, .prog {
+  opacity: var(--alpha-i);
 	padding-top: var(--size-item-elem-padding);
   color: var(--color-content-item-i); 
 	font-size: var(--size-font-body);
   float: left;
   clear: both;
 }
-.grid-item:hover .link, 
 .grid-item:hover .note, 
 .grid-item:hover .quote, 
 .grid-item:hover .term, 
 .grid-item:hover .tags,
 .grid-item:hover .auth,
 .grid-item:hover .prog {
+  opacity: var(--alpha-e);
 	color: var(--color-content-item-e);
 }
+.grid-item:hover .tags:hover {
+  opacity: var(--alpha-a);
+}
 .grid-item-image .grid-item-lower-content .link, 
 .grid-item-image .grid-item-lower-content .note, 
 .grid-item-image .grid-item-lower-content .quote, 

docs/index.html

@@ -4,12 +4,14 @@
   <meta charset="utf-8">
   <title>memex</title>
   <link rel="stylesheet" href="asset/style.css">
+  <link rel="stylesheet" href="asset/theme.css"/>
   <link rel="stylesheet" href="asset/fontawesome/css/all.css">
 
   <script src="logic/lib/imagesloaded.js"></script>
   <script src="logic/lib/masonry.js"></script>
   <script src="logic/lib/runic.js"></script>
   <script src="logic/lib/indental.js"></script>
+  <script src="logic/lib/theme.js"></script>
 
   <script src="logic/wrap.js"></script>
   <script src="logic/view.js"></script>

docs/logic/add.js

@@ -89,6 +89,12 @@ if (window.showAdd != undefined && window.showAdd)
 
       this.overlay.innerHTML += content;
 
+      document.getElementById("escape").onclick = function()
+      {
+        console.log('escape onclick');
+        main.add.close();
+      }
+
       this.display = document.getElementById("display");
 
       document.getElementById("enter").addEventListener('click', 
@@ -228,6 +234,8 @@ if (window.showAdd != undefined && window.showAdd)
 
     this.show = function()
     {
+      console.log('add.show');
+
       this.setOverlay(true);
 
       var date = new Date();
@@ -244,18 +252,29 @@ if (window.showAdd != undefined && window.showAdd)
       }, 100);
     }
 
+    this.close = function()
+    {
+      console.log('close. prev: ' + main.queryPrev);
+      main.load(main.queryPrev);
+      this.grid.style.display = "block";
+      this.setOverlay(false);
+    }
+
     this.setOverlay = function(value)
     {
+      console.log('add.setOverlay ' + value);
+
       if (value && !this.enabledOverlay)
       {
         overlay.style.opacity = '1';
         overlay.style.zIndex  = '1000';
         this.enabledOverlay = true;
-        setTimeout(function()
+        // setTimeout(function()
-        {
+        // {
-          this.grid.innerHTML = '';
+        //   this.grid.innerHTML = '';
-          this.grid.style.height = 0;
+        //   this.grid.style.height = 0;
-        }, 200);
+        // }, 200);
+        this.grid.style.display = "none";
       }
       else if (!value && this.enabledOverlay)
       {
@@ -269,12 +288,16 @@ if (window.showAdd != undefined && window.showAdd)
     }
   }
 
-  String.prototype.toProperCase = function () {
+  String.prototype.toProperCase = function ()
+  {
       return this.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
   };
 
   document.onkeydown = function(evt) 
   {
+    console.log('onkeydown');
+    console.log(evt);
+
     evt = evt || window.event;
     if (!evt.ctrlKey)
     {
@@ -295,7 +318,8 @@ if (window.showAdd != undefined && window.showAdd)
       {
         if (main.queryCur == 'add')
         {
-          main.load(main.queryPrev);
+          console.log('did it');
+          this.close();
         }
       }
       else if (isA && main.queryCur != 'add')

docs/logic/lib/theme.js

@@ -0,0 +1,114 @@
+'use strict';
+
+function Theme()
+{
+  let theme = this;
+
+  this.el = document.createElement("style");
+  this.el.type = 'text/css';
+  this.callback = null;
+
+  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" }}
+  }
+
+  this.active = this.collection.noir;
+
+  this.install = function(host = document.body,callback)
+  {
+    host.appendChild(this.el)
+    this.callback = callback;
+  }
+
+  this.start = function()
+  {
+    this.load(localStorage.theme ? localStorage.theme : this.collection.noir, this.collection.noir);
+  }
+
+  this.load = function(t, fall_back = this.collection.noir)
+  {
+    let theme = is_json(t) ? JSON.parse(t).data : t.data;
+
+    if(!theme || !theme.background){
+      if(fall_back) {
+        theme = fall_back.data;
+      } else {
+        return;
+      }
+    }
+
+    let 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.innerHTML = css;
+    localStorage.setItem("theme", JSON.stringify({data: theme}));
+
+    if(this.callback){
+      this.callback();  
+    }
+  }
+
+  this.reset = function()
+  {
+    this.load(this.collection.noir);
+  }
+
+  // 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_enter = function(e)
+  {
+    e.stopPropagation();
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'copy';
+  }
+
+  this.drag = 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; }
+
+    let reader = new FileReader();
+    reader.onload = function(e){
+      theme.load(e.target.result);
+    };
+    reader.readAsText(file);
+  }
+
+  window.addEventListener('dragover',this.drag_enter);
+  window.addEventListener('drop', this.drag);
+
+  function is_json(text){ try{ JSON.parse(text); return true; } catch (error){ return false; } }
+}

docs/logic/main.js

@@ -4,13 +4,17 @@ function Main()
   this.view = null;
   this.add = null;
   this.write = null;
-  this.queryPrev = '';
   this.queryCur = '';
+  this.queryPrev = '';
+  this.queryPrevAdd = '';
+  this.theme = new Theme();
   var parent = this;
   const FILELOCATION = 'content/data.ndtl';
 
   this.install = function()
   {
+    this.theme.install();
+
     var oReq = new XMLHttpRequest();
     oReq.open('GET', FILELOCATION);
     oReq.overrideMimeType("text/plain");
@@ -29,11 +33,11 @@ function Main()
     {
       this.add = new Add();
       this.add.install();
-      var escape = document.getElementById("escape");
+      // var escape = document.getElementById("escape");
-      escape.onclick = function()
+      // escape.onclick = function()
-      {
+      // {
-        main.load(main.queryPrev);
+      //   main.add.close();
-      }
+      // }
     }
 
     this.start();
@@ -41,12 +45,15 @@ function Main()
 
   this.start = function()
   {
+    this.theme.start();
     this.load(window.document.location.hash);
     this.view.stats(this.db.stats());
   }
 
   this.load = function(target)
   {
+    console.log('main.load: ' + target)
+
     document.activeElement.blur();
     if (this.queryCur != 'add')
     {

docs/logic/view.js

@@ -50,6 +50,7 @@ function View()
 
   this.display = function(db)
   {
+    console.log('display ' + db)
 
     if (window.showAdd != undefined && window.showAdd)
     {