Update add page - data display, enter.

docs/asset/style.css

@@ -208,13 +208,10 @@ body {
   color: var(--color-overlay-item-e);
   text-decoration: none;
 }
-.page-overlay .content-menu a {
-}
 
 .page-overlay .content-menu .content-menu-option {
   height: 100px;
   width: 100px;
-
   display: flex;
   align-items: center;
   justify-content: center;
@@ -256,6 +253,49 @@ body {
   /*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 {

docs/logic/add.js

@@ -28,19 +28,18 @@ function Add()
     this.grid = document.getElementById("grid");
     this.overlay = document.getElementById("overlay");
       
-    this.setupElement('Title', 'TITLE');
+    this.setupElement('Title', 'TITLE', 'upper');
-    this.setupElement('Date', 'DATE');
+    this.setupElement('Date', 'DATE', 'lower');
-    this.setupElement('Type', 'TYPE');
+    this.setupElement('Type', 'TYPE', 'lower');
-
+    this.setupElement('Link', 'LINK', 'url');
-    this.setupElement('Link', 'LINK');
+    this.setupElement('Person', 'PERS', 'text');
-    this.setupElement('Person', 'PERS');
+    this.setupElement('Source', 'SRCE', 'title');
-    this.setupElement('Source', 'SRCE');
+    this.setupElement('Project', 'PROJ', 'text');
-    this.setupElement('Project', 'PROJ');
+    this.setupElement('Tags', 'TAGS', 'tags');
-    this.setupElement('Tags', 'TAGS');
+    this.setupElement('Progress', 'PROG', 'text');
-    this.setupElement('Progress', 'PROG');
+    this.setupElement('Note', 'NOTE', 'text'); // long
-    this.setupElement('Note', 'NOTE'); // long
+    this.setupElement('Quote', 'QOTE', 'quote'); // long
-    this.setupElement('Quote', 'QOTE'); // long
+    this.setupElement('Terms', 'TERM', 'quote'); // long
-    this.setupElement('Terms', 'TERM'); // long
     // DONE
     // REVI
     this.keys = Object.keys(this.elementList);
@@ -73,7 +72,19 @@ function Add()
     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");
@@ -86,15 +97,21 @@ function Add()
       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)
+  this.setupElement = function(key, desc, type)
   {
-    this.elementList[key] = { key: key, desc: desc, added: false};
+    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)
@@ -129,6 +146,65 @@ function Add()
     }
   }
 
+  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() + '<br>'
+        }
+        else
+        {
+          value += 'TITLE<br>';
+        }
+      }
+      else if (parent.elementList[parent.keys[i]].elem.value != '')
+      {
+        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();
+        }
+
+        value += '<br>';
+      }
+    }
+    parent.display.innerHTML = value;
+  }
+
   this.show = function()
   {
     this.setOverlay(true);
@@ -172,6 +248,10 @@ function Add()
   }
 }
 
+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;