Refactor clean up.

docs/asset/style.css

@@ -45,18 +45,15 @@
   --type-icon-size: 24px; /*font size of type icon/count*/
 }
 
+* {
+  box-sizing: border-box;
+}
 html {
 	font-family: 'Monaco', 'Andale Mono', 'Deja Vu Sans Mono', 'Consolas', monospace;
 	background: var(--color-main-bg-i); 
-	box-sizing: border-box;
 	padding: 0em;
 	margin: 0; 
 }
-
-* {
-	box-sizing: border-box;
-}
-
 body {
 	padding: 0em;
 	margin: 0; 
@@ -96,7 +93,6 @@ body {
   padding-bottom: calc(var(--menu-item-vert-sep) / 2);
 	padding-top: calc(var(--menu-item-vert-sep) / 2);
 	font-size: var(--type-icon-size);
-	box-sizing: border-box;
 	margin: 0px auto;
 	width: 100%;
 	float: left;
@@ -179,7 +175,6 @@ body {
 	margin-bottom: var(--size-gutter);
   margin-left: var(--size-gutter);
 	width: var(--size-grid-column);
-	box-sizing: border-box;
   text-decoration: none; 
 	float: left;
   padding-bottom: var(--size-gutter);
@@ -202,23 +197,10 @@ body {
   left: 0;
   height: 100%;
   width: 100%;
-  /*background-color: #000;
-  position: relative; 
-  top: 0px;
-  z-index: 200;*/
 }
 .grid-item-lower-content {
   padding: 0 var(--size-gutter) 0 var(--size-gutter);
   z-index: 100;
-  /*padding: 0 var(--size-gutter) 0 var(--size-gutter);
-  height: 100%;
-  display: inline-block;*/
-  /*float: left;
-  clear: both;
-  width: 100%;
-  top: 0;
-  left: 0;*/
-
 }
 .grid-item-image .grid-item-lower-content {
   position: absolute;
@@ -237,8 +219,6 @@ body {
 }
 .grid-item img {
   border-radius: var(--size-item-corner);
-  /*margin: calc(var(--size-gutter) * -1);
-  width: calc(var(--size-gutter) + 100%);*/
   vertical-align: middle; /* vertical-align css hack removes bottom padding */
   object-fit: cover;
   margin-bottom: 0px;

docs/index.html

@@ -22,7 +22,6 @@
   <div class="container" id="container">
     <div class="grid" id="grid"></div>
   </div>
-
   <script>
     var main = new Main();
     main.install();

docs/logic/main.js

@@ -1,6 +1,5 @@
 function Main()
 {
-  // REFERENCE
   this.db = null;
   this.view = null;
 
@@ -8,39 +7,24 @@ function Main()
   {
     this.db = new Wrap(DATABASE);
     this.db.install();
-
     this.view = new View();
     this.view.install();
   }
 
   this.start = function()
   {
-    this.load(window.document.location.hash == "" ? 'home' : window.document.location.hash);
+    this.load(window.document.location.hash);
-    this.view.doStats(this.db.getStats());
+    this.view.stats(this.db.stats());
   }
 
-  this.load = function(target = "home")
+  this.load = function(target)
   {
-    target = target.substr(0,1) == "#" ? target.substr(1,target.length-1) : target
+    target = target.substr(0,1) == "#" ? target.substr(1,target.length-1) : target;
-    target = target.trim() == "" ? "home" : target
+    target = target.trim();
-
+    window.location.hash = target;
-    if (target === '')
-    {
-      window.history.replaceState(undefined, undefined, "#" + target)
-    }
-    else 
-    {
-      window.location.hash = target;
-    }
-
     var entries = this.db.filter(target);
-    this.view.doEntries(entries);
+    this.view.display(entries);
   }
 }
 
-window.addEventListener("hashchange", navigate);
+window.addEventListener("hashchange", function() { main.load(window.document.location.hash); });
-
-function navigate()
-{
-  main.load(window.document.location.hash);
-}

docs/logic/view.js

@@ -1,39 +1,36 @@
 function View()
 {
-  // REFERENCE
   this.msnry = null;
   this.grid = null;
   this.menu = null;
   var parent = this;
   
-  // SETTINGS
+  const SETTINGS = {
-  this.statsNumTags = 5;
+    STATSNUMTAGS: 5,
-  this.statsNumTypes = 10;
+    STATSNUMTYPE: 10,
-  this.doDoubleWide = false;
+    WIDEGRIDITEM: false,
-
+    USEMASONRY: true,
-  this.useMasonry = true;
+    GRIDITEMIDBASE: 'item',
-  this.divNamePre = 'item';
+    SHOWUPPER: true,
-
+    SHOWTITLE: true,
-  this.showUpper = true;
+    SHOWTYPE: true,
-  this.showTitle = true;
+    SHOWLINK: true,
-  this.showType = true;
+    SHOWLOWER: true,
-  this.showLink = true;
+    SHOWTAGS: true,
-
+    SHOWNOTE: true,
-  this.showLower = true;
+    SHOWQOTE: true,
-  this.showTags = true;
+    SHOWTERM: true,
-  this.showNotes = true;
+    SHOWPROG: true,
-  this.showQuote = true;
+    SHOWIMAG: true,
-  this.showTerm = true;
+    SHOWOVERLAY: true
-  this.showProgress = true;
+  }
-  this.showImage = true;
-  this.showOverlay = true;
 
   this.install = function()
   {
     this.grid = document.getElementById("grid");
     this.menu = document.getElementById("menu");
 
-    if (this.useMasonry)
+    if (SETTINGS.USEMASONRY)
     {
       this.msnry = new Masonry('.grid', 
       {
@@ -46,7 +43,7 @@ function View()
     }
   }
 
-  this.doEntries = function(db)
+  this.display = function(db)
   {
     // BUILD
     this.grid.innerHTML = '';
@@ -60,7 +57,7 @@ function View()
     }
 
     // LAYOUT
-    if (this.useMasonry)
+    if (SETTINGS.USEMASONRY)
     {
       this.msnry.reloadItems();
       this.msnry.layout();
@@ -76,7 +73,7 @@ function View()
     let value = db[key];
 
     let itemClass = "grid-item";
-    if (this.doDoubleWide)
+    if (SETTINGS.WIDEGRIDITEM)
     {
       if (typeof value.WIDE !== 'undefined' && value.WIDE)
       {
@@ -91,7 +88,7 @@ function View()
       }
     }
 
-    if (this.showImage)
+    if (SETTINGS.SHOWIMAG)
     {
       if (typeof value.TYPE !== 'undefined' && value.TYPE == 'image')
       {
@@ -102,7 +99,7 @@ function View()
     let entry = ``;
 
     // ITEM DIV
-    entry += `<div class="${itemClass}" id="${this.divNamePre + value.DIID}">`;
+    entry += `<div class="${itemClass}" id="${SETTINGS.GRIDITEMIDBASE + value.DIID}">`;
 
     if (typeof value.LINK !== 'undefined')
     {
@@ -116,25 +113,25 @@ function View()
       }
 
       // LINK START
-      if (this.showLink)
+      if (SETTINGS.SHOWLINK)
       {
         entry += `<a href="${String(value.LINK)}" id="${idUrl}" class="link">`;
       }
     }
 
     // UPPER CONTENT START
-    if (this.showUpper)
+    if (SETTINGS.SHOWUPPER)
     {
       entry += `<div class="grid-item-upper-content">`;
 
       // TITLE
-      if (this.showTitle)
+      if (SETTINGS.SHOWTITLE)
       {
         entry += `<div class="title">${key.to_properCase()}</div>`;
       }
 
       // LINK END
-      if (this.showLink)
+      if (SETTINGS.SHOWLINK)
       {
         if (typeof value.LINK !== 'undefined')
         {
@@ -143,7 +140,7 @@ function View()
       }
 
       // TYPE
-      if (this.showType)
+      if (SETTINGS.SHOWTYPE)
       {
         if (typeof value.TYPE !== 'undefined')
         {
@@ -213,12 +210,12 @@ function View()
     }
 
     // LOWER CONTENT START
-    if (this.showLower)
+    if (SETTINGS.SHOWLOWER)
     {
       entry += `<div class="grid-item-lower-content">`;
 
       // TAGS
-      if (this.showTags)
+      if (SETTINGS.SHOWTAGS)
       {
         if (typeof value.TAGS !== 'undefined')
         {
@@ -236,7 +233,7 @@ function View()
       }
 
       // NOTE
-      if (this.showNotes)
+      if (SETTINGS.SHOWNOTE)
       {
         if (typeof value.NOTE !== 'undefined')
         {
@@ -245,7 +242,7 @@ function View()
       }
 
       // QUOTE
-      if (this.showQuote)
+      if (SETTINGS.SHOWQOTE)
       {
         if (typeof value.QOTE !== 'undefined')
         {
@@ -254,7 +251,7 @@ function View()
       }
 
       // TERM
-      if (this.showTerm)
+      if (SETTINGS.SHOWTERM)
       {
         if (typeof value.TERM !== 'undefined')
         {
@@ -266,7 +263,7 @@ function View()
       }
 
       // PROGRESS
-      if (this.showProgress)
+      if (SETTINGS.SHOWPROG)
       {
         if (typeof value.PROG !== 'undefined')
         {
@@ -279,14 +276,14 @@ function View()
     }
 
     // IMAGE
-    if (this.showImage)
+    if (SETTINGS.SHOWIMAG)
     {
       if (typeof value.TYPE !== 'undefined' && value.TYPE == 'image')
       {
         if (typeof value.FILE !== 'undefined')
         {
           entry += `<div class="image">`;
-          if (this.showOverlay)
+          if (SETTINGS.SHOWOVERLAY)
           {
             entry += `<div class="image-overlay"></div>`;
           }
@@ -301,133 +298,133 @@ function View()
     this.grid.innerHTML += entry;
   }
 
-  this.doStats = function(stats)
+  this.stats = function(value)
   {
     let menuContent = ``;
     
     // TYPE
-    menuContent += `<a href='#home'>`;
+    menuContent += `<a href='#'>`;
     menuContent += `<div class="menu-item">`;
-    menuContent += `<div class="count">${stats.total}</div>`;
+    menuContent += `<div class="count">${value.total}</div>`;
     menuContent += `<i class="fas fa-asterisk"></i>`;
     menuContent += `</div>`;
     menuContent += `</a>`;
 
-    for (var ty = 0; ty < Math.min(stats.types.length, this.statsNumTypes); ty++) 
+    for (var ty = 0; ty < Math.min(value.types.length, SETTINGS.STATSNUMTYPE); ty++) 
     {
-      if (stats.types[ty][0] == 'article')
+      if (value.types[ty][0] == 'article')
       {
         menuContent += `<a href='#type-article'>`;
         menuContent += `<div class="menu-item">`;
-        menuContent += `<div class="count">${stats.types[ty][1]}</div>`;
+        menuContent += `<div class="count">${value.types[ty][1]}</div>`;
         menuContent += `<i class="far fa-newspaper"></i>`;
         menuContent += `</div>`;
         menuContent += `</a>`;
       }
-      else if (stats.types[ty][0] == 'podcast')
+      else if (value.types[ty][0] == 'podcast')
       {
         menuContent += `<a href='#type-podcast'>`;
         menuContent += `<div class="menu-item">`;
-        menuContent += `<div class="count">${stats.types[ty][1]}</div>`;
+        menuContent += `<div class="count">${value.types[ty][1]}</div>`;
         menuContent += `<i class="fas fa-podcast"></i>`;
         menuContent += `</div>`;
         menuContent += `</a>`;
       }
-      else if (stats.types[ty][0] == 'video')
+      else if (value.types[ty][0] == 'video')
       {
         menuContent += `<a href='#type-video'>`;
         menuContent += `<div class="menu-item">`;
-        menuContent += `<div class="count">${stats.types[ty][1]}</div>`;
+        menuContent += `<div class="count">${value.types[ty][1]}</div>`;
         menuContent += `<i class="fas fa-tv"></i>`;
         menuContent += `</div>`;
         menuContent += `</a>`;
       }
-      else if (stats.types[ty][0] == 'list')
+      else if (value.types[ty][0] == 'list')
       {
         menuContent += `<a href='#type-list'>`;
         menuContent += `<div class="menu-item">`;
-        menuContent += `<div class="count">${stats.types[ty][1]}</div>`;
+        menuContent += `<div class="count">${value.types[ty][1]}</div>`;
         menuContent += `<i class="fas fa-file-alt"></i>`;
         menuContent += `</div>`;
         menuContent += `</a>`;
       }
-      else if (stats.types[ty][0] == 'book')
+      else if (value.types[ty][0] == 'book')
       {
         menuContent += `<a href='#type-book'>`;
         menuContent += `<div class="menu-item">`;
-        menuContent += `<div class="count">${stats.types[ty][1]}</div>`;
+        menuContent += `<div class="count">${value.types[ty][1]}</div>`;
         menuContent += `<i class="fas fa-book-open"></i>`;
         menuContent += `</div>`;
         menuContent += `</a>`;
       }
-      else if (stats.types[ty][0] == 'game')
+      else if (value.types[ty][0] == 'game')
       {
         menuContent += `<a href='#type-game'>`;
         menuContent += `<div class="menu-item">`;
-        menuContent += `<div class="count">${stats.types[ty][1]}</div>`;
+        menuContent += `<div class="count">${value.types[ty][1]}</div>`;
         menuContent += `<i class="fas fa-gamepad"></i>`;
         menuContent += `</div>`;
         menuContent += `</a>`;
       }
-      else if (stats.types[ty][0] == 'service')
+      else if (value.types[ty][0] == 'service')
       {
         menuContent += `<a href='#type-service'>`;
         menuContent += `<div class="menu-item">`;
-        menuContent += `<div class="count">${stats.types[ty][1]}</div>`;
+        menuContent += `<div class="count">${value.types[ty][1]}</div>`;
         menuContent += `<i class="fas fa-server"></i>`;
         menuContent += `</div>`;
         menuContent += `</a>`;
       }
-      else if (stats.types[ty][0] == 'lecture')
+      else if (value.types[ty][0] == 'lecture')
       {
         menuContent += `<a href='#type-lecture'>`;
         menuContent += `<div class="menu-item">`;
-        menuContent += `<div class="count">${stats.types[ty][1]}</div>`;
+        menuContent += `<div class="count">${value.types[ty][1]}</div>`;
         menuContent += `<i class="fas fa-chalkboard-teacher"></i>`;
         menuContent += `</div>`;
         menuContent += `</a>`;
       }
-      else if (stats.types[ty][0] == 'quote')
+      else if (value.types[ty][0] == 'quote')
       {
         menuContent += `<a href='#type-quote'>`;
         menuContent += `<div class="menu-item">`;
-        menuContent += `<div class="count">${stats.types[ty][1]}</div>`;
+        menuContent += `<div class="count">${value.types[ty][1]}</div>`;
         menuContent += `<i class="fas fa-comment"></i>`;
         menuContent += `</div>`;
         menuContent += `</a>`;
       }
-      else if (stats.types[ty][0] == 'tool')
+      else if (value.types[ty][0] == 'tool')
       {
         menuContent += `<a href='#type-tool'>`;
         menuContent += `<div class="menu-item">`;
-        menuContent += `<div class="count">${stats.types[ty][1]}</div>`;
+        menuContent += `<div class="count">${value.types[ty][1]}</div>`;
         menuContent += `<i class="fas fa-wrench"></i>`;
         menuContent += `</div>`;
         menuContent += `</a>`;
       }
-      else if (stats.types[ty][0] == 'music')
+      else if (value.types[ty][0] == 'music')
       {
         menuContent += `<a href='#type-music'>`;
         menuContent += `<div class="menu-item">`;
-        menuContent += `<div class="count">${stats.types[ty][1]}</div>`;
+        menuContent += `<div class="count">${value.types[ty][1]}</div>`;
         menuContent += `<i class="fas fa-music"></i>`;
         menuContent += `</div>`;
         menuContent += `</a>`;
       }
-      else if (stats.types[ty][0] == 'image')
+      else if (value.types[ty][0] == 'image')
       {
         menuContent += `<a href='#type-image'>`;
         menuContent += `<div class="menu-item">`;
-        menuContent += `<div class="count">${stats.types[ty][1]}</div>`;
+        menuContent += `<div class="count">${value.types[ty][1]}</div>`;
         menuContent += `<i class="fas fa-image"></i>`;
         menuContent += `</div>`;
         menuContent += `</a>`;
       }
-      else if (stats.types[ty][0] == 'encyclopedia')
+      else if (value.types[ty][0] == 'encyclopedia')
       {
         menuContent += `<a href='#type-encyclopedia'>`;
         menuContent += `<div class="menu-item">`;
-        menuContent += `<div class="count">${stats.types[ty][1]}</div>`;
+        menuContent += `<div class="count">${value.types[ty][1]}</div>`;
         menuContent += `<i class="fas fa-globe"></i>`;
         menuContent += `</div>`;
         menuContent += `</a>`;
@@ -437,12 +434,12 @@ function View()
     menuContent += `<div class="menu-spacer"></div>`;
 
     // TERM
-    if (stats.terms > 0)
+    if (value.terms > 0)
     {
       // menuContent += `<div class="menu-item-space"></div>`;
       menuContent += `<a href='#term'>`;
       menuContent += `<div class="menu-item">`;
-      menuContent += `<div class="count">${stats.terms}</div>`;
+      menuContent += `<div class="count">${value.terms}</div>`;
       menuContent += `<i class="fas fa-ribbon"></i>`;
       menuContent += `</div>`;
       menuContent += `</a>`;
@@ -451,17 +448,17 @@ function View()
     menuContent += `<div class="menu-spacer"></div>`;
 
     // TAGS
-    if (stats.tags.length > 0)
+    if (value.tags.length > 0)
     {
       menuContent += `<div class="menu-tag-container">`;
       menuContent += `<i class="fas fa-tag"></i>`;
-      for (var t = 0; t < Math.min(stats.types.length, this.statsNumTags); t++) 
+      for (var t = 0; t < Math.min(value.types.length, SETTINGS.STATSNUMTAGS); t++) 
       {
-        menuContent += `<a href='#tag-${stats.tags[t][0]}'>`;
+        menuContent += `<a href='#tag-${value.tags[t][0]}'>`;
         menuContent += `<div class="menu-tag">`;
         // menuContent += `<i class="fas fa-tag textIcon"></i>`;
-        menuContent += `<div class="menu-tag-count">${stats.tags[t][1]}</div>`;
+        menuContent += `<div class="menu-tag-count">${value.tags[t][1]}</div>`;
-        menuContent += `<div class="menu-tag-label">${stats.tags[t][0]}</div>`;
+        menuContent += `<div class="menu-tag-label">${value.tags[t][0]}</div>`;
         menuContent += `</div>`;
         menuContent += `</a>`;
       }

docs/logic/wrap.js

@@ -1,6 +1,5 @@
 function Wrap()
 {
-  // REFERENCE
   this.database = null;
   this.keys = null;
 
@@ -8,10 +7,10 @@ function Wrap()
   {
     this.database = new Indental(DATABASE).parse();
     this.keys = Object.keys(this.database);
-    this.processDatabase();
+    this.process();
   }
 
-  this.processDatabase = function()
+  this.process = function()
   {
     for (i = 0; i < this.keys.length; i++) 
     { 
@@ -51,22 +50,17 @@ function Wrap()
 
       this.database[this.keys[i]].DIID = i;
     }
-    console.log(this.database);
   }
 
   this.filter = function(target)
   {
     var tempDatabase = {};
-
+    if (target == '')
-    if (target == 'home')
     {
-      console.log('Display \'home\'');
       tempDatabase = this.database;
     }
     else if (target == 'term')
     {
-      console.log('Display \'terms\'');
-
       for (i = 0; i < this.keys.length; i++) 
       { 
         let value = this.database[this.keys[i]];
@@ -82,7 +76,6 @@ function Wrap()
       if (splitTarget[0] == 'tag')
       {
         // TAG
-        console.log('Display tag \'' + splitTarget[1] + '\'');
         for (i = 0; i < this.keys.length; i++) 
         { 
           let value = this.database[this.keys[i]];
@@ -101,7 +94,6 @@ function Wrap()
       else if (splitTarget[0] == 'type')
       {
         // TYPE
-        console.log('Display type \'' + splitTarget[1] + '\'');
         var tempDatabase = {}
         for (i = 0; i < this.keys.length; i++) 
         { 
@@ -119,7 +111,7 @@ function Wrap()
     return tempDatabase;
   }
 
-  this.getStats = function(db = this.database)
+  this.stats = function(db = this.database)
   {
     // CALCULATE
     let dbKeys = Object.keys(db);
@@ -182,7 +174,6 @@ function Wrap()
     });
     stats.types = typeItems;
 
-
     // SORT TAGS, TAKE TOP X
     // Create items array
     var tagItems = Object.keys(stats.tags).map(function(key)