Merge branch 'add'

README.md

@@ -40,7 +40,7 @@ npm start
 - Template parser: [Runic](https://wiki.xxiivv.com/#runic)
 - Grid layout: [Masonry](https://masonry.desandro.com/)
 
-Thanks to Devine Lu Linvega ([Oscean](https://github.com/XXIIVV/Oscean)), Josh Avanier ([Log](https://github.com/joshavanier/log)), Rekka Bell ([kokorobot](https://github.com/rekkabell/kokorobot)) and Alexey Botkov ([Legacy](https://github.com/nomand/Legacy))
+Thanks to Devine Lu Linvega ([Oscean](https://github.com/XXIIVV/Oscean)), Josh Avanier ([Log](https://github.com/joshavanier/log)), Rekka Bell ([kokorobot](https://github.com/rekkabell/kokorobot)), Alexey Botkov ([Legacy](https://github.com/nomand/Legacy)), Seena Burns ([Isolate](https://github.com/seenaburns/isolate))
 
 ---
 

docs/asset/style.css

@@ -4,27 +4,31 @@
   --color-main-bg-i: #ddd; /*idle*/
   --color-main-bg-e: #ddd; /*enabled*/
   
-  --color-content-bg-i: #ccc; /*idle*/
-  --color-content-bg-e: #bbb; /*enabled*/
-
   --color-menu-bg-i: #000; /*idle*/
   --color-menu-bg-e: #000; /*enabled*/
+  --color-menu-item-i: #333; /*idle*/
+  --color-menu-item-e: #999; /*enabled*/
+  --color-menu-item-a: #ddd; /*ascent*/
 
+  --color-content-bg-i: #ccc; /*idle*/
+  --color-content-bg-e: #bbb; /*enabled*/
   --color-content-item-s: #bbb; /*sub*/
   --color-content-item-i: #999; /*idle*/
   --color-content-item-e: #666; /*enabled*/
   --color-content-item-t: #000; /*title*/
   --color-content-item-a: #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*/
   --color-content-image-t: #fff; /*title*/
   --color-content-image-a: #fff; /*ascent*/
 
-  --color-menu-item-i: #333; /*idle*/
+  --color-overlay-bg-i: #000; /*idle*/
-  --color-menu-item-e: #999; /*enabled*/
+  --color-overlay-bg-e: #111; /*enabled*/
-  --color-menu-item-a: #ddd; /*ascent*/
+  --color-overlay-item-s: #111; /*sub*/
+  --color-overlay-item-i: #222; /*idle*/
+  --color-overlay-item-e: #333; /*enabled*/
+  --color-overlay-item-a: #666; /*ascent*/
 
   /* SIZE */
   --menu-width: 150px;
@@ -43,6 +47,8 @@
   --size-font-title: 1em;
   --size-font-body: 0.8em;
   --type-icon-size: 24px; /*font size of type icon/count*/
+
+  --animation-time: 200ms;
 }
 
 * {
@@ -53,6 +59,7 @@ html {
 	background: var(--color-main-bg-i); 
 	padding: 0em;
 	margin: 0; 
+  overflow-y: scroll; 
 }
 body {
 	padding: 0em;
@@ -96,6 +103,7 @@ body {
 	margin: 0px auto;
 	width: 100%;
 	float: left;
+  text-align: center;
 }
 .menu-item .count {
 	padding-right: calc(var(--menu-item-elem-sep) / 2);
@@ -150,6 +158,145 @@ body {
 	float: left;
 }
 
+.noselect {
+  -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+     -khtml-user-select: none; /* Konqueror HTML */
+       -moz-user-select: none; /* Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome and Opera */
+}
+
+/* PAGE */
+.page-overlay {
+  /* visual */
+  background-color: var(--color-overlay-bg-i);
+  opacity: 0;
+  /*-webkit-transition: opacity var(--animation-time) linear;
+  transition: opacity var(--animation-time) linear;*/
+  width: 100%;
+  height: 100%;
+  /* position */
+  position: absolute;
+  z-index: -100;
+  left: 0;
+  top: 0;
+  /* content */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+}
+.page-overlay .content-menu {
+  width: 100px;
+  float: left;
+  text-align: center;
+  height: 100%;
+  padding-top: auto;
+  padding-bottom: auto;
+  margin-right: 50px;
+  border-radius: var(--size-item-corner);
+}
+.page-overlay .content-menu:hover {
+  background-color: var(--color-overlay-item-i);
+}
+.page-overlay .content-menu:hover a {
+  color: var(--color-overlay-item-a);
+}
+.page-overlay .content-menu a {
+  color: var(--color-overlay-item-e);
+  text-decoration: none;
+}
+
+.page-overlay .content-menu .content-menu-option {
+  height: 100px;
+  width: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.page-overlay .content form {
+  float: left;
+}
+.page-overlay .content .row .key {
+  width: 100px;
+  color: var(--color-overlay-item-a);
+  visibility: hidden;
+  float: left;
+  padding: 9px 7px 10px 0;
+  text-align: right;
+  margin-right: 0px;
+}
+.page-overlay .content .row input {
+  padding: 10px;
+  width: 400px;
+  margin-bottom: 10px;
+  /*background-color: transparent;*/
+  background-color: var(--color-overlay-bg-e);
+  color: #fff;
+  border-width: 0px;
+  /*border-width: 1px;
+  border-style: solid;
+  border-color: var(--color-menu-item-i);*/
+  border-radius: var(--size-item-corner);
+}
+.page-overlay .content .row input::placeholder {
+  opacity: 1;
+  color: var(--color-menu-item-i);
+}
+.page-overlay .content .row input:hover {
+  /*background-color: var(--color-content-item-a);*/
+  background-color: var(--color-overlay-item-i);
+}
+.page-overlay .content .row input:focus {
+  /*background-color: var(--color-content-item-a);*/
+  background-color: var(--color-overlay-item-e);
+}
+.page-overlay .content .display {
+  float: left;
+  height: 100%;
+  width: 400px;
+  padding: 10px;
+  margin-left: 50px;
+  color: var(--color-overlay-item-e);
+}
+.page-overlay .content-enter {
+  margin-top: 50px;
+  float: left;
+  width: 100%;
+  height: 100px;
+  clear: both;
+  text-align: center;
+  padding-top: auto;
+  padding-bottom: auto;
+  vertical-align: center;
+  border-radius: var(--size-item-corner);
+}
+.page-overlay .content-enter .content-menu-option {
+  height: 100%;
+  vertical-align: center;
+  padding-top: auto;
+  padding-bottom: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.page-overlay .content-enter:hover {
+  background-color: var(--color-overlay-item-i);
+}
+.page-overlay .content-enter:hover a {
+  color: var(--color-overlay-item-a);
+}
+.page-overlay .content-enter a {
+  color: var(--color-overlay-item-e);
+  text-decoration: none;
+}
+
+
+
+
+
 /* CONTENT */
 .container {
   background: var(--color-main-bg-i); 
@@ -161,6 +308,9 @@ body {
 }
 .grid {
   margin: var(--size-gutter) auto;
+  opacity: 1;
+  -webkit-transition: opacity 1000ms linear;
+  transition: opacity 1000ms linear;
 }
 .grid:after {
   /* clearfix */

docs/content/data.ndtl

@@ -1,5 +1,3 @@
-let DATABASE = `
-
 AGAINST BEAUTY IN PHYSICS
   PERS : faun
   SRCE : Merveilles
@@ -2153,4 +2151,179 @@ DAY EVAL
   LINK : https://medium.com/@NikitaVoloboev/day-evaluations-5706f31c9c5e
   TYPE : article
   TAGS : productivity
-`
+
+SAPIENS
+  TYPE : book
+  NOTE : 'Sapiens: A Brief History of Humankind' - Yuval Noah Harari
+  PERS : faun
+  SRCE : Merveilles
+  DATE : 12018-07-18
+
+AESTHETICS
+  DATE : 12018-07-26
+  TYPE : video
+  PERS : theneko
+  SRCE : Merveilles
+  LINK : https://www.youtube.com/watch?v=HCHFjj_qr5Q
+  TAGS : design
+
+TYPEFACE PAIRING
+  DATE : 12018-07-27
+  PERS : rutherford
+  SRCE : Merveilles
+  TYPE : article
+  LINK : https://craze.co.uk/typeface+pairing
+  TAGS : design
+
+DECISIONS
+  DATE : 12018-07-28
+  QOTE : 'Personal decisions are the leading cause of death'
+  TYPE : quote
+  LINK : https://pdfs.semanticscholar.org/375e/8c9e3df49a7962d12bb186a4ec7dc7d2b3ab.pdf
+  FILE : 12018-07-28_PersonalDecisionsAreTheLeading.pdf
+
+MICROMORT
+  DATE : 12018-07-28
+  TYPE : term
+  TERM 
+    > Micromort: 'a unit of risk defined as one-in-a-million chance of death.'
+  LINK : https://en.wikipedia.org/wiki/Micromort
+
+ARTISTS
+  DATE : 12018-07-28
+  TYPE : quote
+  QOTE 
+    > Alan Moore: “In latter times, I think that artists and writers have allowed themselves to be sold down the river. They have accepted the prevailing belief that art and writing are merely forms of entertainment. They are not seen as transformative forces that can change a human being, that can change a society. They are seen as simple entertainment. Things with which to fill 20 minutes, half an hour while we are waiting to die.
+    & It is not the job of artists to give the audience what the audience wants. If the audience knew what they needed then they wouldn’t be audience, they would be the artists. It is the job of artists to give the audience what they need.”
+  LINK : http://intellectual-thoughts.com/Alan%20Moore%20Quote.htm
+  TAGS : philosophy
+
+ELECTRON MEMORY
+  DATE : 12018-08-05
+  TYPE : article
+  LINK : http://seenaburns.com/debugging-electron-memory-usage/
+  PERS : nnkd
+  SRCE : Merveilles
+  PROJ : Memex
+
+ISOLATE
+  DATE : 12018-08-05
+  TYPE : tool
+  LINK : https://github.com/seenaburns/isolate
+  TAGS : gallery, masonry, web, code, inspiration
+  PROJ : Memex
+
+CHEMICAL IMBALANCE
+  DATE : 12018-08-05
+  TYPE : article
+  LINK : https://www.anxietycentre.com/anxiety/chemical-imbalance.shtml
+  TAGS : psychology
+  PERS : Adam Strauss
+  SRCE : DTFH
+  DONE : true
+
+SSL EXPLAINED
+  DATE : 12018-08-05
+  TYPE : article
+  LINK : http://seenaburns.com/archive/
+  TAGS : code
+
+ON ICONS
+  DATE : 12018-08-05
+  TYPE : article
+  LINK : https://ia.net/topics/on-icons
+  PERS : rutherford
+  SRCE : Merveilles
+  TAGS : design
+
+TURBO
+  DATE : 12018-08-05
+  TYPE : term
+  TAGS : car
+  TERM
+    > Turbo: compressor forcing additional air into an engine to allow for increased fuel ignition and thus increased power output. A turbo has two halves, one is driven by the exhaust from the engine the other forces air into the engine. Negative 'turbo lag' time until the engine can provide enough exhaust to spin up the turbo compressor. 
+    > Supercharger: Like a turbo but instead of being driven by exhaust gas it is driven mechanically (belt to engine). Negative  Takes power/efficiency away from driving engine output in order to drive the compressor.
+    > Electic supercharger: fully electronically driven turbo (generally powered by a higher voltage (48v) seperate from car 12v). Negative  high electricity use.
+    > Electic turbo: a hybrid electric-assisted turbo (generally powered by a higher voltage (48v) seperate from car 12v) using a DC motor to start the turbo spinning sooner to remove turbo lag or at low revs when not enough exhaust to produced. Once the engine is providing enough exhaust to spin the turbo the motor will stop output. It can also be a seperate electric supercharger working in conjunction with a standard turbo. Negative complexity.
+
+ELECTRON IPC
+  DATE : 12018-08-06
+  LINK : https://ourcodeworld.com/articles/read/537/how-to-execute-a-function-of-the-main-process-inside-the-renderer-process-in-electron-framework
+  PROJ : Memex
+  TAGS : web, code
+
+IROHA
+  DATE : 12018-08-06
+  PERS : james
+  SRCE : Merveilles
+  TYPE : quote
+  QOTE 
+    > Even the blossoming flowers
+    & Will eventually scatter
+    & Who in our world
+    & Is unchanging?
+    & The deep mountains of karma—
+    & We cross them today
+    & And we shall not have superficial dreams
+    & Nor be deluded
+  LINK : http://rendakud.tumblr.com/post/156991025541/iroha-poem
+
+THE WAY
+  DATE : 12018-08-06
+  PERS : ypm
+  SRCE : Merveilles
+  TYPE : quote
+  QOTE 
+    > Therefore the wise go about doing nothing, teaching no-talking.
+    & The ten thousand things rise and fall without cease,
+    & Creating, yet not possessing,
+    & Working, yet not taking credit.
+    & Working, yet not taking credit.
+    & Work i_____HERE_____orgotten.
+    & Therefore it lasts forever. 
+  LINK : http://peacefulrivers.homestead.com/laotzu.html
+
+COMMON GROUND
+  DATE : 12018-08-09
+  TYPE : podcast
+  LINK : http://rationallyspeakingpodcast.org/show/rs-214-anthony-aguirre-on-predicting-the-future-of-science-a.html
+  QOTE 
+    > "When we're exchanging individual sound bites or one paragraph arguments it's really easy to find ways to disagree with people and have lots of contention where as if you take the time to sort of engage in a little bit more a full way with a book or with a person or with multi paragraphs - the common ground is there if you look for it at all... I think looking for that common ground and then working your way back from there to see... now that we have that common ground where are the places that we disagree and can we identify why? Its just a so much more pleasent way of interacting with different ideas and different people than... saying OK my premise is that they think this and I think that and so we are in disagreement, now how am I going to defend my point of view..." - Anthony Aguirre on Rationally Speaking podcast #214 @ 44:30+
+  SEEN : true
+
+CLEAR TAMEI
+  DATE : 12018-08-09
+  LINK : https://iglooghost.bandcamp.com/album/clear-tamei
+  TYPE : music
+  SEEN : true
+
+STEEL MOGU
+  DATE : 12018-08-09
+  LINK : https://iglooghost.bandcamp.com/album/steel-mogu
+  TYPE : music
+  SEEN : false
+
+WATER WARS
+  DATE : 12018-08-09
+  PERS : neauoire
+  SRCE : Merveilles
+  LINK : https://www.thenation.com/article/the-future-of-climate-change-is-widespread-civil-war/
+  TYPE : article
+  SEEN : true
+  TAGS : env
+
+BROWSER TIMELINE
+  DATE : 12018-08-09
+  PERS : neauoire
+  SRCE : Merveilles
+  LINK : https://en.wikipedia.org/wiki/Timeline_of_web_browsers
+  TYPE : article
+  TAGS : web
+
+DARPA WEB
+  DATE : 12018-08-09
+  PERS : neauoire
+  SRCE : Merveilles
+  LINK : https://medium.com/@giacomo_59737/the-web-is-still-a-darpa-weapon-31e3c3b032b8
+  TYPE : article
+  TAGS : web

docs/index.html

@@ -5,19 +5,19 @@
   <title>memex</title>
   <link rel="stylesheet" href="asset/style.css">
   <link rel="stylesheet" href="asset/fontawesome/css/all.css">
-  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
 
   <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="content/data.ndtl"></script>
   <script src="logic/wrap.js"></script>
   <script src="logic/view.js"></script>
   <script src="logic/main.js"></script>
+  <script src="logic/add.js"></script>
 </head>
 <body>
+  <div class="page-overlay noselect" id="overlay"></div>
   <div class="menu" id="menu"></div>
   <div class="container" id="container">
     <div class="grid" id="grid"></div>
@@ -25,7 +25,6 @@
   <script>
     var main = new Main();
     main.install();
-    main.start();
   </script>
 </body>
 </html>

docs/logic/add.js

@@ -0,0 +1,297 @@
+if (window.showAdd != undefined && window.showAdd)
+{
+  const { ipcRenderer } = nodeRequire('electron');
+
+  function Add()
+  {
+    this.overlay = null;
+    this.display = null;
+    this.grid = null;
+
+    this.elementList = [];
+    this.keys = null;
+    var parent = this;
+
+    // STATE
+    this.enabledOverlay = false;
+    this.addedTitle = false
+    this.addedDate = false
+    this.addedPerson = false
+    this.addedSource = false
+    this.addedProject = false
+    this.addedType = false
+    this.addedLink = false
+    this.addedTags = false
+    this.addedNote = false
+    this.addedQuote = false
+    this.addedTerms = false
+    this.addedProgress = false
+
+    this.install = function()
+    {
+      this.grid = document.getElementById("grid");
+      this.overlay = document.getElementById("overlay");
+        
+      this.setupElement('Title', 'TITLE', 'upper');
+      this.setupElement('Date', 'DATE', 'lower');
+      this.setupElement('Type', 'TYPE', 'lower');
+      this.setupElement('Link', 'LINK', 'url');
+      this.setupElement('Person', 'PERS', 'text');
+      this.setupElement('Source', 'SRCE', 'title');
+      this.setupElement('Project', 'PROJ', 'text');
+      this.setupElement('Tags', 'TAGS', 'tags');
+      this.setupElement('Progress', 'PROG', 'text');
+      this.setupElement('Note', 'NOTE', 'text'); // long
+      this.setupElement('Quote', 'QOTE', 'quote'); // long
+      this.setupElement('Terms', 'TERM', 'quote'); // long
+      // DONE
+      // REVI
+      this.keys = Object.keys(this.elementList);
+
+      // SETUP
+      this.overlay.innerHTML = '';
+      let content = `<div class="content">`
+
+      // ESCAPE
+      content += `<div class="content-menu">`;
+      content += `<a href="javascript:void(0);" id="escape">`;
+      content += `<div class="content-menu-option">`;
+      content += `<b>Esc</b>`;
+      content += `</div>`;
+      content += `</a>`;
+      content += `</div>`;
+
+      // FORM
+      content += `<form>`;
+      for (var i = 0; i < this.keys.length; i++)
+      {
+        content += `<div class="row">
+                      <div class="key" id="key${this.elementList[this.keys[i]].key}">${this.elementList[this.keys[i]].desc}</div>
+                      <input placeholder="${this.elementList[this.keys[i]].key}" id="${this.elementList[this.keys[i]].key}">
+                    </div>`;
+      }
+      content += `</form>`;
+
+      // DISPLAY
+      content += `<div class="display" id="display">`;
+      content += `</div>`;
+
+      // ENTER
+      content += `<div class="content-enter">`;
+      content += `<a href="javascript:void(0);" id="enter">`;
+      content += `<div class="content-menu-option">`;
+      content += `<b>Enter</b>`;
+      content += `</div>`;
+      content += `</a>`;
+      content += `</div>`;
+      
+      content += `</div>`;
+
+      this.overlay.innerHTML += content;
+
+      this.display = document.getElementById("display");
+
+      document.getElementById("enter").addEventListener('click', 
+      () => 
+      {
+        console.log('called write');
+        let content = this.display.innerHTML.replace(/\s?(<br\s?\/?>)\s?/g, "\r\n"); // replace line breaks
+        content = content.replace(/&nbsp;/g, ' '); // replace tabs/spaces
+        // var content = content.replace(/\u00a0/g, ' ');
+        ipcRenderer.send('write', "\r\n" + "\r\n" + content);
+      });
+
+      for (var i = 0; i < this.keys.length; i++)
+      {
+        this.elementList[this.keys[i]].elem = document.getElementById(this.elementList[this.keys[i]].key);
+        this.elementList[this.keys[i]].elem.oninput = this.onElemChanged;
+        this.elementList[this.keys[i]].elem.onfocus = this.onElemFocus;
+        this.elementList[this.keys[i]].elem.onblur = this.onElemBlur;
+        this.elementList[this.keys[i]].elemKey = document.getElementById("key" + this.elementList[this.keys[i]].key);
+      }
+      setTimeout(function()
+      { 
+        parent.setupData();
+      }, 100);
+    }
+
+    this.setupElement = function(key, desc, type)
+    {
+      this.elementList[key] = { key: key, desc: desc, type: type, added: false};
+    }
+
+    this.onElemChanged = function(e)
+    {
+      // TODO: Autocomplete tags, type 
+      parent.setupData();
+    }
+
+    this.onElemFocus = function(e)
+    {
+      for (var i = 0; i < parent.keys.length; i++)
+      {
+        if (e.target.id == parent.elementList[parent.keys[i]].key)
+        {
+          if (!parent.elementList[parent.keys[i]].added)
+          {
+            parent.elementList[parent.keys[i]].added = true;
+            parent.elementList[parent.keys[i]].elemKey.style.visibility = "visible";
+          }
+          break;
+        }
+      }
+    }
+
+    this.onElemBlur = function(e)
+    {
+      for (var i = 0; i < parent.keys.length; i++)
+      {
+        if (e.target.id == parent.elementList[parent.keys[i]].key)
+        {
+          if (parent.elementList[parent.keys[i]].elem.value == '' && parent.elementList[parent.keys[i]].added)
+          {
+            parent.elementList[parent.keys[i]].added = false;
+            parent.elementList[parent.keys[i]].elemKey.style.visibility = "hidden";
+          }
+          break;
+        }
+      }
+    }
+
+    this.setupData = function()
+    {
+      let value = '';
+      for (var i = 0; i < parent.keys.length; i++)
+      {
+        if (parent.elementList[parent.keys[i]].key == 'Title')
+        {
+          if (parent.elementList[parent.keys[i]].elem.value != '')
+          {
+            value += parent.elementList[parent.keys[i]].elem.value.toUpperCase();
+          }
+          else
+          {
+            value += 'TITLE';
+          }
+        }
+        else if (parent.elementList[parent.keys[i]].elem.value != '')
+        {
+          value += '<br>';
+          value += '&nbsp;&nbsp;';
+          value += parent.elementList[parent.keys[i]].desc.toUpperCase() + ' : ';
+
+          if (parent.elementList[parent.keys[i]].type == 'lower')
+          {
+            value += parent.elementList[parent.keys[i]].elem.value.toLowerCase();
+          }
+          else if (parent.elementList[parent.keys[i]].type == 'text')
+          {
+            value += parent.elementList[parent.keys[i]].elem.value;
+          }
+          else if (parent.elementList[parent.keys[i]].type == 'url')
+          {
+            // TODO: validate
+            value += parent.elementList[parent.keys[i]].elem.value;
+          }
+          else if (parent.elementList[parent.keys[i]].type == 'tags')
+          {
+            // TODO: Format
+            value += parent.elementList[parent.keys[i]].elem.value;
+          }
+          else if (parent.elementList[parent.keys[i]].type == 'quote')
+          {
+            // TODO: Format
+            value += parent.elementList[parent.keys[i]].elem.value;
+          }
+          else if (parent.elementList[parent.keys[i]].type == 'title')
+          {
+            value += parent.elementList[parent.keys[i]].elem.value.toProperCase();
+          }
+          else if (parent.elementList[parent.keys[i]].type == 'upper')
+          {
+            value += parent.elementList[parent.keys[i]].elem.value.toLowerCase();
+          }
+        }
+      }
+      parent.display.innerHTML = value;
+    }
+
+    this.show = function()
+    {
+      this.setOverlay(true);
+
+      var date = new Date();
+      var dateString = "1" + date.getFullYear()
+                      + "-" + ("0"+(date.getMonth()+1)).slice(-2) 
+                      + "-" + ("0" + date.getDate()).slice(-2);
+      this.elementList['Date'].elem.value = dateString;
+      this.elementList['Date'].added = true;
+      this.elementList['Date'].elemKey.style.visibility = "visible";
+
+      setTimeout(function()
+      { 
+        parent.elementList['Title'].elem.focus();
+      }, 100);
+    }
+
+    this.setOverlay = function(value)
+    {
+      if (value && !this.enabledOverlay)
+      {
+        overlay.style.opacity = '1';
+        overlay.style.zIndex  = '1000';
+        this.enabledOverlay = true;
+        setTimeout(function()
+        {
+          this.grid.innerHTML = '';
+          this.grid.style.height = 0;
+        }, 200);
+      }
+      else if (!value && this.enabledOverlay)
+      {
+        overlay.style.opacity = '0';
+        setTimeout(function()
+        {
+          overlay.style.zIndex  = '-100';
+        }, 200);
+        this.enabledOverlay = false;
+      }
+    }
+  }
+
+  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) 
+  {
+    evt = evt || window.event;
+    if (!evt.ctrlKey)
+    {
+      var isEscape = false;
+      var isA = false;
+      
+      if ("key" in evt)
+      {
+        isEscape = (evt.key == "Escape" || evt.key == "Esc");
+      }
+      else
+      {
+        isEscape = (evt.keyCode == 27);
+      }
+      isA = (evt.keyCode == 65);
+      
+      if (isEscape)
+      {
+        if (main.queryCur == 'add')
+        {
+          main.load(main.queryPrev);
+        }
+      }
+      else if (isA && main.queryCur != 'add')
+      {
+        main.load('add');
+      }
+    }
+  };
+}

docs/logic/main.js

@@ -2,13 +2,48 @@ function Main()
 {
   this.db = null;
   this.view = null;
+  this.add = null;
+  this.write = null;
+  this.queryPrev = '';
+  this.queryCur = '';
+  var parent = this;
+  const FILELOCATION = 'content/data.ndtl';
 
   this.install = function()
   {
-    this.db = new Wrap(DATABASE);
+    var client = new XMLHttpRequest();
-    this.db.install();
+    client.open('GET', FILELOCATION);
+    client.overrideMimeType("text/plain");
+    client.onreadystatechange = function(req, res) 
+    {
+      if (client.responseText.trim() != '')
+      {
+        client.onreadystatechange = null;
+        parent.setup(client.responseText);
+      }
+    }
+    client.send();
+  }
+
+  this.setup = function(data)
+  {
+    this.db = new Wrap();
+    this.db.install(data);
     this.view = new View();
     this.view.install();
+
+    if (window.showAdd != undefined && window.showAdd)
+    {
+      this.add = new Add();
+      this.add.install();
+      var escape = document.getElementById("escape");
+      escape.onclick = function()
+      {
+        main.load(main.queryPrev);
+      }
+    }
+
+    this.start();
   }
 
   this.start = function()
@@ -19,10 +54,28 @@ function Main()
 
   this.load = function(target)
   {
+    document.activeElement.blur();
+    if (this.queryCur != 'add')
+    {
+      this.queryPrev = this.queryCur;
+    }
+    
     target = target.substr(0,1) == "#" ? target.substr(1,target.length-1) : target;
-    target = target.trim();
+    this.queryCur = target.trim();
-    var entries = this.db.filter(target);
+
-    this.view.display(entries);
+    if (window.location.hash != this.queryCur)
+    {
+      window.location.hash = this.queryCur;
+    }
+
+    if (this.queryCur == 'add')
+    {
+      this.add.show();
+    }
+    else
+    {
+      this.view.display(this.db.filter(this.queryCur));
+    }
   }
 }
 

docs/logic/view.js

@@ -1,6 +1,8 @@
 function View()
 {
   this.msnry = null;
+  this.overlay = null;
+  this.container = null;
   this.grid = null;
   this.menu = null;
   var parent = this;
@@ -8,7 +10,7 @@ function View()
   const SETTINGS = {
     STATSNUMTAGS: 5,
     STATSNUMTYPE: 10,
-    WIDEGRIDITEM: false,
+    WIDEGRIDITEM: true,
     USEMASONRY: true,
     GRIDITEMIDBASE: 'item',
     SHOWUPPER: true,
@@ -27,6 +29,8 @@ function View()
 
   this.install = function()
   {
+    this.overlay = document.getElementById("overlay");
+    this.container = document.getElementById("container");
     this.grid = document.getElementById("grid");
     this.menu = document.getElementById("menu");
 
@@ -45,6 +49,11 @@ function View()
 
   this.display = function(db)
   {
+    if (window.showAdd != undefined && window.showAdd)
+    {
+      main.add.setOverlay(false);
+    }
+
     // BUILD
     this.grid.innerHTML = '';
     this.grid.innerHTML += "<div class='grid-sizer'></div>"; 
@@ -302,6 +311,13 @@ function View()
   {
     let menuContent = ``;
     
+    // ADD
+    menuContent += `<a href='#add'>`;
+    menuContent += `<div class="menu-item"><b>a</b>dd</div>`;
+    menuContent += `</a>`;
+
+    menuContent += `<div class="menu-spacer"></div>`;
+
     // TYPE
     menuContent += `<a href='#'>`;
     menuContent += `<div class="menu-item">`;

docs/logic/wrap.js

@@ -3,9 +3,9 @@ function Wrap()
   this.database = null;
   this.keys = null;
 
-  this.install = function()
+  this.install = function(data)
   {
-    this.database = new Indental(DATABASE).parse();
+    this.database = new Indental(data).parse();
     this.keys = Object.keys(this.database);
     this.process();
   }

main.js

@@ -2,6 +2,9 @@ const {app, BrowserWindow, webFrame, Menu} = require('electron')
 const path = require('path')
 const url = require('url')
 const shell = require('electron').shell;
+const fs = require('fs');
+const { ipcMain } = require('electron');
+const FILELOCATION = 'docs/content/data.ndtl';
 
 let is_shown = true;
 
@@ -26,10 +29,27 @@ app.toggle_fullscreen = function()
 
 app.toggle_visible = function()
 {
-  if(process.platform == "win32"){
+  if(process.platform == "win32")
-    if(!app.win.isMinimized()){ app.win.minimize(); } else{ app.win.restore(); }
+  {
-  } else {
+    if(!app.win.isMinimized())
-    if(is_shown){ app.win.hide(); } else{ app.win.show(); }
+    { 
+      app.win.minimize(); 
+    } 
+    else 
+    { 
+      app.win.restore(); 
+    }
+  } 
+  else 
+  {
+    if(is_shown)
+    { 
+      app.win.hide(); 
+    } 
+    else
+    { 
+      app.win.show(); 
+    }
   }
 }
 
@@ -47,50 +67,54 @@ app.win = null;
 
 app.on('ready', () => 
 {
-  app.win = new BrowserWindow({
+  app.win = new BrowserWindow(
-    webPreferences: {
+  {
-      nodeIntegration: false
+    webPreferences: 
-    }, width: 950, height: 950, backgroundColor:"#ddd", minWidth: 587, minHeight: 540, frame:true, autoHideMenuBar: true, icon: __dirname + '/icon.ico'})
+    {
+      nodeIntegration: true,
+      preload: path.join(__dirname, 'preload.js')
+    }, width: 950, height: 950, backgroundColor:"#ddd", minWidth: 587, minHeight: 540, frame:true, autoHideMenuBar: true, icon: __dirname + '/icon.ico'
+  })
 
-  app.win.loadURL(`file://${__dirname}/docs/index.html`)
+  app.win.loadURL(`file://${__dirname}/docs/index.html`);
-  // app.win.toggleDevTools();
   
-  app.win.on('closed', () => {
+  app.win.on('closed', () => 
+  {
     win = null
     app.quit()
   })
 
-  app.win.on('hide',function() {
+  app.win.on('hide', function() 
+  {
     is_shown = false;
   })
 
-  app.win.on('show',function() {
+  app.win.on('show', function() 
+  {
     is_shown = true;
   })
 
-  // app.win.webContents.on('new-window', function(event, url){
-  //   event.preventDefault();
-  //   // open(url);
-  //   console.log('CALLED NEW WIN');
-  //   child_process.execSync('start ' + url)
-  // })
-
   app.win.webContents.on('will-navigate', this.handleRedirect)
   app.win.webContents.on('new-window', this.handleRedirect)
 })
 
-
-
-
-
-
 app.on('window-all-closed', () => 
 {
   app.quit()
 })
 
-app.on('activate', () => {
+app.on('activate', () => 
+{
   if (app.win === null) {
     createWindow()
   }
 })
+
+ipcMain.on('write', (event, arg) => 
+{
+  fs.appendFile(FILELOCATION, arg, function (err) 
+  {
+    if (err) throw err;
+    console.log('Saved!');
+  }); 
+});

preload.js

@@ -0,0 +1,6 @@
+window.nodeRequire = require;
+delete window.require;
+delete window.exports;
+delete window.module;
+
+// window.showAdd = true;