From bd830ddc0c71cc79f05046470fba462997dcf76e Mon Sep 17 00:00:00 2001
From: kor <h@kor.co.nz>
Date: Sun, 4 Nov 2018 00:35:09 +1300
Subject: [PATCH] Refactor row definitions.

---
 docs/asset/style.css | 98 +++++++++++++------------------------------
 docs/logic/view.js   | 99 +++++++++++++++++++++++++++-----------------
 2 files changed, 89 insertions(+), 108 deletions(-)

diff --git a/docs/asset/style.css b/docs/asset/style.css
index d3107df..4130acc 100644
--- a/docs/asset/style.css
+++ b/docs/asset/style.css
@@ -121,8 +121,6 @@ body {
   position: fixed;
   top: 50%;
   left: 50%;
-  /*width: 154px;
-  height: 154px;*/
   font-size: 128px;
   transform: translateY(-50%) translateX(-50%);
   display: none;
@@ -243,6 +241,7 @@ nav::-webkit-scrollbar {
   color: var(--color-itemascent);
 }
 
+/* MAIN */
 .container {
   background: var(--background); 
   margin-left: calc(var(--size-menu) + var(--size-grid-gutter));
@@ -250,8 +249,6 @@ nav::-webkit-scrollbar {
 }
 main {
   margin: var(--size-grid-gutter) auto;
-  -webkit-transition: opacity 1000ms linear;
-  transition: opacity 1000ms linear;
 }
 main:after {
   /* clearfix (reset) */
@@ -271,9 +268,6 @@ article, .griditem-wide {
   position: relative;
 	float: left;
 }
-article:hover, .griditem-wide:hover {
-  opacity: var(--alpha-ascent);
-}
 @media screen and (min-width: 886px) {
 	.griditem-wide { 
 		width: calc(var(--size-grid-column) * 2 + var(--size-grid-gutter));
@@ -281,7 +275,6 @@ article:hover, .griditem-wide:hover {
 }
 article:hover { 
   background: var(--color-itembg);
-  opacity: 1;
 }
 article::selection {
     background: var(--b_high);
@@ -368,7 +361,6 @@ article::selection {
 
 /* TITLE */
 .griditem-title { 
-  opacity: var(--alpha-enabled);
   color: var(--color-item);
   font-size: var(--size-font-title);
   text-decoration: none;
@@ -399,7 +391,7 @@ article::selection {
 }
 
 .griditem-linktitle { 
-  /*opacity: var(--alpha-idle);*/
+  opacity: var(--alpha-idle);
   color: var(--color-item);
   font-size: var(--size-font-body);
   float: left;
@@ -408,27 +400,18 @@ article::selection {
   background-color: var(--color-itemascent);
   color: var(--color-itembg);
 }
-.griditem-linktitle {
-  opacity: var(--alpha-idle);
-}
 .griditem-linkicon { 
-  margin-right: var(--size-item-elem-sep);
+  width: 23px;
+  font-size: 15px;
   color: var(--color-item);
-  opacity: calc(var(--alpha-idleicon) - 0.1);
   float: left;
 }
-.griditem-linktitle {
-  opacity: var(--alpha-idle);
-}
-.griditem-link:hover .griditem-linktitle {
-  opacity: var(--alpha-ascent);
-}
-article:hover .griditem-linkicon {
-  opacity: var(--alpha-enabledicon);
-}
 article:hover .griditem-linktitle {
   opacity: var(--alpha-enabled);
 }
+.griditem-link:hover .griditem-linktitle {
+  opacity: var(--alpha-ascent);
+}
 
 /* TYPE */
 .griditem-typecontainer {
@@ -438,7 +421,6 @@ article:hover .griditem-linktitle {
   margin-right: var(--size-grid-gutter);
 }
 .griditem-type {
-  opacity: var(--alpha-idle);
   width: calc(var(--size-font-bodytypes)*2);
   color: var(--color-item);
   padding-bottom: var(--size-grid-gutter);
@@ -449,23 +431,18 @@ article:hover .griditem-linktitle {
   float: right;
   text-decoration: none;
 }
-.griditem-typeicon {
-  opacity: var(--alpha-idleicon);
-}
 .griditem-image .griditem-typeicon {
   display: none;
 }
 .griditem-image:hover .griditem-typeicon  {
   display: initial;
   color: var(--color-image);
-  opacity: var(--alpha-enabledicon);
 }
-.griditem-type .griditem-typeicon {
+.griditem-typeicon {
   opacity: var(--alpha-idleicon);
-  color: var(--color-item);
 }
-article:hover .griditem-type {
-  opacity: var(--alpha-enabled);
+article:hover .griditem-typeicon {
+  opacity: var(--alpha-enabledicon);
   color: var(--color-item);
 }
 .griditem-type:hover .griditem-typeicon {
@@ -473,57 +450,41 @@ article:hover .griditem-type {
   color: var(--color-itemascent);
 }
 
-/* NOTE, QUOTE, TERM, TAGS, AUTH, PROG */
-.griditem-date,
-.griditem-note,
-.griditem-quote,
-.griditem-term,
-.griditem-tags,
-.griditem-proj,
-.griditem-auth,
-.griditem-file,
-.griditem-prog {
-  opacity: var(--alpha-idle);
+/* DATE, NOTE, QUOTE, TERM, TAGS, AUTH, PROG etc */
+.article-icon {
+  float: left;
+  opacity: var(--alpha-idleicon);
+}
+article:hover .article-icon {
+  opacity: var(--alpha-enabledicon);
+}
+.griditem-row {
   padding-top: var(--size-item-elem-padding);
   color: var(--color-item); 
   font-size: var(--size-font-body);
   float: left;
   clear: both;
 }
-article:hover .griditem-date, 
-article:hover .griditem-note, 
-article:hover .griditem-quote, 
-article:hover .griditem-term, 
-article:hover .griditem-tags,
-article:hover .griditem-proj,
-article:hover .griditem-auth,
-article:hover .griditem-file,
-article:hover .griditem-prog {
-  opacity: var(--alpha-enabled);
+article:hover .griditem-row {
   color: var(--color-item);
 }
-.griditem-image .griditem-link, 
-.griditem-image .griditem-date, 
-.griditem-image .griditem-note, 
-.griditem-image .griditem-quote, 
-.griditem-image .griditem-term, 
-.griditem-image .griditem-tags,
-.griditem-image .griditem-proj,
-.griditem-image .griditem-auth,
-.griditem-image .griditem-file,
-.griditem-image .griditem-prog {
+.griditem-image .griditem-row {
   color: var(--color-image); 
 }
-
+.griditem-rowtext {
+  display: inline;
+  opacity: var(--alpha-idle);
+}
+article:hover .griditem-rowtext {
+  opacity: var(--alpha-enabled);
+}
 .griditem-file {
   word-break: break-all;
 }
-
 .griditem-file-link {
   color: var(--color-item); 
   text-decoration: none;
 }
-
 .griditem-file-link:hover {
   background-color: var(--color-itemascent);
   color: var(--color-itembg);
@@ -557,12 +518,11 @@ article:hover .griditem-taglink:hover {
 
 /* SMALL ICONS */
 .textIcon {
+  color: #fff;
   margin-right: var(--size-item-elem-sep); 
-  opacity: var(--alpha-idleicon);
 }
 article:hover .textIcon {
   color: var(--color-item);
-  opacity: var(--alpha-enabledicon);
 }
 
 /* LIGHTBOX */
diff --git a/docs/logic/view.js b/docs/logic/view.js
index a830c28..25e5f6b 100644
--- a/docs/logic/view.js
+++ b/docs/logic/view.js
@@ -41,7 +41,7 @@ function View()
     let contentHtml = '';
     while (i < dbKeys.length) 
     {
-      contentHtml += this.buildEntry(db, dbKeys[i]);
+      contentHtml += this.buildArticle(db, dbKeys[i]);
       i++;
     }
     this.grid.innerHTML = contentHtml;
@@ -69,7 +69,7 @@ function View()
     }
   }
 
-  this.buildEntry = function(db, key)
+  this.buildArticle = function(db, key)
   {
     let value = db[key];
     let itemClass = "article";
@@ -97,10 +97,8 @@ function View()
         style="cursor: pointer;"`;
     }
 
-    let entry = ``;
-    entry += `<article class="${itemClass}" id="${SETTINGS.GRIDITEMIDBASE + value.DIID}">`;
-
-    // ITEM DIV
+    // ARTICLE
+    let entry = `<article class="${itemClass}" id="${SETTINGS.GRIDITEMIDBASE + value.DIID}">`;
     if (this.isDefined(value.LINK))
     {
       var idUrl = "url";
@@ -141,12 +139,12 @@ function View()
           for (let l = 0; l < value.LINK.length; l++)
           {
             entry += `<a class="griditem-link" href="${String(value.LINK[l])}" id="${idUrl}">`;
-            entry += `<div class="griditem-linkcontainer"><i title="link" class="griditem-linkicon fas fa-link"></i><div class="griditem-linktitle">${this.extractRootDomain(value.LINK[l])}</div></div></a>`;
+            entry += `<div class="griditem-linkcontainer"><div class="griditem-linkicon">${this.buildIcon('link')}</div><div class="griditem-linktitle">${this.extractRootDomain(value.LINK[l])}</div></div></a>`;
           }
         }
         else
         {
-          entry += `<div class="griditem-linkcontainer"><i class="griditem-linkicon fas fa-link"></i><div class="griditem-linktitle">${this.extractRootDomain(value.LINK)}</div></div></a>`;
+          entry += `<div class="griditem-linkcontainer"><div class="griditem-linkicon">${this.buildIcon('link')}</div><div class="griditem-linktitle">${this.extractRootDomain(value.LINK)}</div></div></a>`;
         }
       }
 
@@ -157,12 +155,11 @@ function View()
         entry += `<div class="griditem-typecontainer">`;
         for (let tc = 0; tc < value.TYPE.length; tc++)
         {
-          const icon = getTypeIconName(value.TYPE[tc]);
           entry += `<a class="griditem-type" href='#type-${value.TYPE[tc]}'>`;
-          entry += `<i title="${value.TYPE[tc]}" class="griditem-typeicon ${icon}"></i>`;
+          entry += this.buildIcon(value.TYPE[tc], value.TYPE[tc], 'griditem-typeicon');
           entry += `</a>`;
         }
-        entry += `</div>`; // griditem-typecontainer
+        entry += `</div>`;
       }
 
       // UPPER CONTENT END
@@ -182,7 +179,7 @@ function View()
       // TIME
       if (SETTINGS.SHOWDATE && this.isDefined(value.DATE))
       {
-        entry += `<time class="griditem-date"><i title="date" class="fas fa-clock textIcon"></i>${value.DATE}</time>`;
+        entry += this.doRow('date', value.DATE);
       }
 
       // AUTHOR
@@ -190,64 +187,64 @@ function View()
       {
         for (var i = 0; i < value.AUTH.length; i++)
         {
-          entry += `<div class="griditem-auth"><i title="author" class="fas fa-user textIcon"></i>${value.AUTH[i].to_properCase()}</div>`;
+          entry += this.doRow('author', value.AUTH[i].to_properCase());
         }
       }
 
       // TAGS
       if (SETTINGS.SHOWTAGS && this.isDefined(value.TAGS))
       {
-        entry += `<div class="griditem-tags"><i title="tags" class="fas fa-tag textIcon"></i>`;
+        let content = '';
         for (var i = 0; i < value.TAGS.length; i++)
         {
-          entry += `<a class="griditem-taglink" href="#tag-${value.TAGS[i]}">${value.TAGS[i]}</a>`;
-          if (i+1 !== value.TAGS.length)
+          content += `<a class="griditem-taglink" href="#tag-${value.TAGS[i]}">${value.TAGS[i]}</a>`;
+          if (i + 1 !== value.TAGS.length)
           {
-            entry += `, `;
+            content += `, `;
           }
         };
-        entry += `</div>`;
+        entry += this.doRow('tags', content);
       }
 
       // PROJECT
       if (SETTINGS.SHOWPROJ && this.isDefined(value.PROJ))
       {
-        entry += `<div class="griditem-proj"><i title="project" class="fas fa-leaf textIcon"></i>`;
+        let content = '';
         for (var i = 0; i < value.PROJ.length; i++)
         {
-          entry += `<a class="griditem-taglink" href="#proj-${value.PROJ[i]}">${value.PROJ[i].to_properCase()}</a>`;
+          content += `<a class="griditem-taglink" href="#proj-${value.PROJ[i]}">${value.PROJ[i].to_properCase()}</a>`;
           if (i + 1 != value.PROJ.length)
           {
-            entry += `, `;
+            content += `, `;
           }
         }
-        entry += `</div>`;
+        entry += this.doRow('project', content);
       }
 
       // TERM
       if (SETTINGS.SHOWTERM && this.isDefined(value.TERM))
       {
-        entry += this.doMultilineFormatting(value.TERM, "term", "griditem-term", "fas fa-ribbon textIcon");
+        entry += this.doMultilineFormatting('term', value.TERM);
       }
 
       // NOTE
       if (SETTINGS.SHOWNOTE && this.isDefined(value.NOTE))
       {
-        entry += this.doMultilineFormatting(value.NOTE, "note", "griditem-note", "fas fa-sticky-note textIcon");
+        entry += this.doMultilineFormatting('note', value.NOTE);
       }
 
       // QUOTE
       if (SETTINGS.SHOWQOTE && this.isDefined(value.QOTE))
       {
-        entry += this.doMultilineFormatting(value.QOTE, "quote", "griditem-quote", "fas fa-comment textIcon");
+        entry += this.doMultilineFormatting('quote', value.QOTE);
       }
 
       // PROGRESS
       if (SETTINGS.SHOWPROG && this.isDefined(value.PROG))
       {
-        entry += `<div class="griditem-prog"><i title="progress" class="fas fa-clock textIcon"></i>${value.PROG}</div>`;
+        entry += this.doRow('progress', value.PROG);
       }
-
+      
       // IMAGE - for non-image-type-entry
       if (SETTINGS.SHOWIMAG 
         && !this.isType(value.TYPE, 'image')
@@ -266,13 +263,13 @@ function View()
         {
           for (var i = 0; i < value.FILE.length; i++) 
           {
-            entry += `<div class="griditem-file"><i title="file" class="fas fa-folder-open textIcon"></i><a class="griditem-file-link" href="content/media/${value.FILE[i]}">${value.FILE[i]}</a></div>`;
+            entry += this.doRow('file', `<a class="griditem-file-link" href="content/media/${value.FILE[i]}">${value.FILE[i]}</a>`, 'griditem-file');
           }
         }
         else
         {
           // single
-          entry += `<div class="griditem-file"><i title="file" class="fas fa-folder-open textIcon"></i><a class="griditem-file-link" href="content/media/${value.FILE}">${value.FILE}</a></div>`;
+          entry += this.doRow('file', `<a class="griditem-file-link" href="content/media/${value.FILE}">${value.FILE}</a>`, 'griditem-file');
         }
       }
 
@@ -298,6 +295,14 @@ function View()
     return entry;
   }
 
+  this.doRow = function(type, content, extraClass)
+  {
+    return `<div class="griditem-row${extraClass != undefined ? ' '+extraClass : ''}">
+    ${type != undefined ? this.buildIcon(type) : ''}
+    <div class="griditem-rowtext">${content}</div>
+    </div>`;
+  }
+
   this.stats = function(value)
   {
     let menuContent = ``;
@@ -339,7 +344,7 @@ function View()
     {
       const type = value.types[ty][0];
       const count = value.types[ty][1];
-      const icon = getTypeIconName(type);
+      const icon = this.getIcon(type);
       menuContent += `<a href='#type-${type}' class="menu-item">`;
       menuContent += `<div class="menu-itemcount">${count}</div>`;
       menuContent += `<i title="${type}" class="menu-itemicon ${icon}"></i>`;
@@ -368,7 +373,6 @@ function View()
       for (var t = 0; t < Math.min(value.tags.length, SETTINGS.STATSNUMTAGS); t++) 
       {
         menuContent += `<a class="menu-tag" href='#tag-${value.tags[t][0]}'>`;
-        // menuContent += `<i class="fas fa-tag textIcon"></i>`;
         menuContent += `<div class="menu-tagcount">${value.tags[t][1]}</div>`;
         menuContent += `<div class="menu-taglabel">${value.tags[t][0]}</div>`;
         menuContent += `</a>`;
@@ -392,7 +396,7 @@ function View()
     }
   }
 
-  this.doMultilineFormatting = function(data, title, className, iconName)
+  this.doMultilineFormatting = function(type, data)
   {
     let result = '';
     if (Array.isArray(data))
@@ -409,39 +413,47 @@ function View()
             {
               titleSplit[e] = titleSplit[e].trim();
             }
-            result += `<div class="${className}"><i title="${title}" class="${iconName}"></i><b>${titleSplit[0]}</b>: ${titleSplit[1]}</div>`;
+            result += this.doRow(type, `<b>${titleSplit[0]}</b>: ${titleSplit[1]}`);
           }
           else
           {
-            result += `<div class="${className}"><i title="${title}" class="${iconName}"></i>${data[i].substring(2)}</div>`;
+            result += this.doRow(type, data[i].substring(2));
           }
         }
         else if (data[i].substring(0, 2) === "& ")
         {
           // New line in current item
-          result += `<div class="${className}">${data[i].substring(2)}</div>`;
+          result += this.doRow(null, data[i].substring(2));
         }
         else if (data[i].substring(0, 2) == "- ")
         {
           // Bullet point
-          result += `<div class="${className}"><i class="fas fa-caret-right textIcon"></i>${data[i].substring(2)}</div>`;
+          result += this.doRow('dash', data[i].substring(2));
         }
         else
         {
           // Handle unformatted
-          result += `<div class="${className}"><i title="${title}" class="${iconName}"></i>${data[i]}</div>`;
+          result += this.doRow(type, data[i]);
         }
       }
     }
     else
     {
       // Handle not array
-      result += `<div class="${className}"><i title="${title}" class="${iconName}"></i>${data}</div>`;
+      result += this.doRow(type, data);
     }
     return result;
   }
 
-  getTypeIconName = function(type)
+  this.buildIcon = function(type, label, altClass)
+  {
+    if (label == undefined) { label = type; }
+    let labelElem = label != null ? `title="${label}" ` : ``;
+    let iconClass = altClass == undefined ? 'article-icon' : altClass;
+    return `<i ${labelElem}class="${this.getIcon(type)} textIcon ${iconClass}"></i>`;
+  }
+
+  this.getIcon = function(type)
   {
     let icon = '';
     switch (type) 
@@ -460,6 +472,15 @@ function View()
         case 'image': icon = 'fas fa-image'; break;
         case 'encyclopedia': icon = 'fas fa-globe'; break;
         case 'term': icon = 'fas fa-ribbon'; break;
+        case 'note': icon = 'fas fa-sticky-note'; break;
+        case 'date': icon = 'fas fa-clock'; break;
+        case 'author': icon = 'fas fa-user'; break;
+        case 'tags': icon = 'fas fa-tag'; break;
+        case 'project': icon = 'fas fa-leaf'; break;
+        case 'progress': icon = 'fas fa-clock'; break;
+        case 'file': icon = 'fas fa-folder-open'; break;
+        case 'dash': icon = 'fas fa-caret-right'; break;
+        case 'link': icon = 'fas fa-link'; break;
       }
     return icon;
   }