From 4adf8375c6848e519c69df7f78265c551b8d2090 Mon Sep 17 00:00:00 2001
From: kor <h@kor.co.nz>
Date: Sat, 3 Nov 2018 01:50:25 +1300
Subject: [PATCH] Refactor changing divs to html5 semantic elements. Add error
 handler/icon. Add mouse hover tooltips to icons.

---
 docs/asset/style.css | 118 +++++++++++++++++++++++++------------------
 docs/index.html      |  16 ++++--
 docs/logic/main.js   |   8 ++-
 docs/logic/view.js   |  77 ++++++++++++++--------------
 4 files changed, 125 insertions(+), 94 deletions(-)

diff --git a/docs/asset/style.css b/docs/asset/style.css
index 9350d5e..4fe3c5e 100644
--- a/docs/asset/style.css
+++ b/docs/asset/style.css
@@ -62,16 +62,6 @@ body {
 ::selection {
   background: var(--color-bg);
 }
-.noselect {
-/*noselect stops an unwanted selection visual on button click*/
-  -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 */
-}
 
 /* LOADING */
 .loading-wave {
@@ -126,8 +116,36 @@ body {
   }
 }
 
-/* MENU */
-.menu {
+/* ERROR */
+.error {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  /*width: 154px;
+  height: 154px;*/
+  font-size: 128px;
+  transform: translateY(-50%) translateX(-50%);
+  display: none;
+  color: var(--color-itemascent);
+  font-size: 128px;
+  vertical-align: center;
+  text-align: center;
+  z-index: 500;
+  padding: 0;
+  background-color: var(--color-bg);
+  border-radius: var(--size-item-corner);
+  border-color: var(--color-item);
+  border-width: 1px;
+  border-style: solid;
+}
+.error:after {
+  content:'error'; 
+  margin-left: var(--size-grid-gutter) ;
+  margin-right: var(--size-grid-gutter) ;
+}
+
+/* NAV */
+nav {
 	padding-top: var(--size-grid-gutter);
   background: var(--color-bg);
   opacity: var(--alpha-idle);
@@ -139,10 +157,10 @@ body {
 	top: 0px;
   /*overflow-y: scroll;*/                 /*allow menu to scroll on small screens*/
 }
-.menu:hover {
+nav:hover {
   opacity: var(--alpha-ascent);
 }
-.menu::-webkit-scrollbar {
+nav::-webkit-scrollbar {
   display: none;
 }
 .menu-itemgroup {
@@ -230,12 +248,12 @@ body {
   margin-left: calc(var(--size-menu) + var(--size-grid-gutter));
 	margin-right: var(--size-grid-gutter);
 }
-.grid {
+main {
   margin: var(--size-grid-gutter) auto;
   -webkit-transition: opacity 1000ms linear;
   transition: opacity 1000ms linear;
 }
-.grid:after {
+main:after {
   /* clearfix (reset) */
   display: block;
   content: '';
@@ -243,7 +261,7 @@ body {
 }
 
 /* GRID ITEM */
-.griditem, .griditem-wide {
+article, .griditem-wide {
   padding-bottom: var(--size-grid-gutter);
 	border-radius: var(--size-item-corner);
   margin-bottom: var(--size-grid-gutter);
@@ -253,7 +271,7 @@ body {
   position: relative;
 	float: left;
 }
-.griditem:hover, .griditem-wide:hover {
+article:hover, .griditem-wide:hover {
   opacity: var(--alpha-ascent);
 }
 @media screen and (min-width: 886px) {
@@ -261,11 +279,11 @@ body {
 		width: calc(var(--size-grid-column) * 2 + var(--size-grid-gutter));
 	}
 }
-.griditem:hover { 
+article:hover { 
   background: var(--color-itembg);
   opacity: 1;
 }
-.griditem::selection {
+article::selection {
     background: var(--b_high);
 }
 .griditem-containerupper {
@@ -405,10 +423,10 @@ body {
 .griditem-link:hover .griditem-linktitle {
   opacity: var(--alpha-ascent);
 }
-.griditem:hover .griditem-linkicon {
+article:hover .griditem-linkicon {
   opacity: var(--alpha-enabledicon);
 }
-.griditem:hover .griditem-linktitle {
+article:hover .griditem-linktitle {
   opacity: var(--alpha-enabled);
 }
 
@@ -471,14 +489,14 @@ body {
   float: left;
   clear: both;
 }
-.griditem:hover .griditem-note, 
-.griditem:hover .griditem-quote, 
-.griditem:hover .griditem-term, 
-.griditem:hover .griditem-tags,
-.griditem:hover .griditem-proj,
-.griditem:hover .griditem-auth,
-.griditem:hover .griditem-file,
-.griditem:hover .griditem-prog {
+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);
   color: var(--color-item);
 }
@@ -520,10 +538,10 @@ body {
   color: var(--color-item); 
   text-decoration:none; 
 }
-.griditem:hover .griditem-taglink {
+article:hover .griditem-taglink {
   color: var(--color-item); 
 }
-.griditem:hover .griditem-taglink:hover {
+article:hover .griditem-taglink:hover {
   background-color: var(--color-itemascent);
   color: var(--color-itembg);
 }
@@ -539,7 +557,7 @@ body {
   margin-right: var(--size-item-elem-sep); 
   opacity: var(--alpha-idleicon);
 }
-.griditem:hover .textIcon {
+article:hover .textIcon {
   color: var(--color-item);
   opacity: var(--alpha-enabledicon);
 }
@@ -547,33 +565,28 @@ body {
 /* LIGHTBOX */
 .lightbox {
   position: fixed;
-  z-index: 300;
-  width: 100%;
-  height: 100%;
   left: 0;
   top: 0;
-  display: flex;
-  align-items: center;
-  display: none;
-}
-.lightbox-back {
   z-index: 300;
-  background-color: rgba(0,0,0,0.9);
   width: 100%;
   height: 100%;
+  display: none;
+  align-items: center;
+}
+.lightbox-back {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0,0,0,0.9);
   cursor: pointer;
 }
-.lightbox-item {
-  z-index: 400;
+.lightbox-img {
   position: absolute;
   top: 50%;
   left: 50%;
-  transform: translateY(-50%) translateX(-50%);
-  vertical-align: middle;
-}
-.lightbox-img {
   max-height: 100vh;
   max-width: 100vw;
+  transform: translateY(-50%) translateX(-50%);
+  vertical-align: middle;
   cursor: pointer;
 }
 
@@ -581,7 +594,6 @@ body {
 
 
 
-
 /*TODO: refactor below; */
 
 /* PAGE */
@@ -603,6 +615,14 @@ body {
   align-items: center;
   justify-content: center;
   user-select: none;
+  /*noselect stops an unwanted selection visual on button click*/
+  -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-overlay .content-menu {
   width: 100px;
diff --git a/docs/index.html b/docs/index.html
index d90ac21..f2ec33b 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -10,14 +10,15 @@
 <body>
   <script> let theme = new Theme(); theme.install(); theme.start(); </script>
   <div class="loading-wave"><div></div><div></div><div></div><div></div><div></div></div>
+  <div class="error"></div>
 
-  <div class="menu" id="menu"></div>
-  <div class="container" id="container">
-    <div class="grid" id="grid"></div>
+  <nav></nav>
+  <div class="container">
+    <main></main>
   </div>
 
-  <div class="lightbox" id="lightbox"></div>
-  <div class="page-overlay noselect" id="overlay"></div>
+  <div class="lightbox"></div>
+  <div class="page-overlay"></div>
   
   <script src="logic/lib/imagesloaded.js"></script>
   <script src="logic/lib/masonry.js"></script>
@@ -31,6 +32,11 @@
   <script src="logic/add.js"></script>
   <script src="logic/lightbox.js"></script>
   <script>
+    window.onerror = function(error, url, line) {
+      document.querySelector('.loading-wave').style.display = 'none';
+      document.querySelector('.error').style.display = 'inline-block';
+    };
+
     var main = new Main();
     main.install();
     main.start();
diff --git a/docs/logic/main.js b/docs/logic/main.js
index 44428b4..bd5cb0b 100644
--- a/docs/logic/main.js
+++ b/docs/logic/main.js
@@ -17,9 +17,13 @@ function Main()
     this.db = new Wrap();
     this.db.install(DATABASE);
     this.view = new View();
-    this.view.install();
+    this.view.install(
+      document.querySelector('nav'), 
+      document.querySelector('.container'),
+      document.querySelector('main'),
+      document.querySelector('.page-overlay'));
     this.lightbox = new Lightbox;
-    this.lightbox.install();
+    this.lightbox.install(document.querySelector('.lightbox'), 'lightbox');
 
     if (window.showAdd !== undefined && window.showAdd)
     {
diff --git a/docs/logic/view.js b/docs/logic/view.js
index e65fcc5..4ec0335 100644
--- a/docs/logic/view.js
+++ b/docs/logic/view.js
@@ -1,24 +1,25 @@
 function View()
 {
-  this.msnry = null;
-  this.overlay = null;
+  this.nav = null;
   this.container = null;
   this.grid = null;
-  this.menu = null;
+  this.overlay = null;
+
+  this.msnry = null;
   var parent = this;
 
-  this.install = function()
+  this.install = function(nav, container, grid, overlay)
   {
-    this.overlay = document.getElementById("overlay");
-    this.container = document.getElementById("container");
-    this.grid = document.getElementById("grid");
-    this.menu = document.getElementById("menu");
+    this.nav = nav;
+    this.container = container;
+    this.grid = grid;
+    this.overlay = overlay;
 
     if (SETTINGS.USEMASONRY)
     {
-      this.msnry = new Masonry('.grid', 
+      this.msnry = new Masonry('main', 
       {
-        itemSelector: '.griditem',
+        itemSelector: 'article',
         columnWidth: 350,
         gutter: 20,
         fitWidth: true,
@@ -53,7 +54,7 @@ function View()
 
       if (SETTINGS.MASONRYCOMPLETE || SETTINGS.MASONRYPROGRESS)
       {
-        let imgLoad = imagesLoaded( container );
+        let imgLoad = imagesLoaded( this.container );
         if (!SETTINGS.MASONRYPROGRESS)
         {
           // When all images finish: redo mansonry layout
@@ -71,7 +72,7 @@ function View()
   this.buildEntry = function(db, key)
   {
     let value = db[key];
-    let itemClass = "griditem";
+    let itemClass = "article";
     if (SETTINGS.WIDEGRIDITEM)
     {
       if (this.isDefined(value.WIDE) && value.WIDE)
@@ -97,7 +98,7 @@ function View()
     }
 
     let entry = ``;
-    entry += `<div class="${itemClass}" id="${SETTINGS.GRIDITEMIDBASE + value.DIID}">`;
+    entry += `<article class="${itemClass}" id="${SETTINGS.GRIDITEMIDBASE + value.DIID}">`;
 
     // ITEM DIV
     if (this.isDefined(value.LINK))
@@ -129,7 +130,7 @@ function View()
       // TITLE
       if (SETTINGS.SHOWTITLE)
       {
-        entry += `<div class="griditem-title">${key.to_properCase()}</div>`;
+        entry += `<header class="griditem-title">${key.to_properCase()}</header>`;
       }
 
       // LINK END
@@ -140,7 +141,7 @@ 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 class="griditem-linkicon fas fa-link"></i><div class="griditem-linktitle">${this.extractRootDomain(value.LINK[l])}</div></div></a>`;
+            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>`;
           }
         }
         else
@@ -158,7 +159,7 @@ function View()
         {
           const icon = getTypeIconName(value.TYPE[tc]);
           entry += `<a class="griditem-type" href='#type-${value.TYPE[tc]}'>`;
-          entry += `<i class="griditem-typeicon ${icon}"></i>`;
+          entry += `<i title="${value.TYPE[tc]}" class="griditem-typeicon ${icon}"></i>`;
           entry += `</a>`;
         }
         entry += `</div>`; // griditem-typecontainer
@@ -183,14 +184,14 @@ function View()
       {
         for (var i = 0; i < value.AUTH.length; i++)
         {
-          entry += `<div class="griditem-auth"><i class="fas fa-user textIcon"></i>${value.AUTH[i].to_properCase()}</div>`;
+          entry += `<div class="griditem-auth"><i title="author" class="fas fa-user textIcon"></i>${value.AUTH[i].to_properCase()}</div>`;
         }
       }
 
       // TAGS
       if (SETTINGS.SHOWTAGS && this.isDefined(value.TAGS))
       {
-        entry += `<div class="griditem-tags"><i class="fas fa-tag textIcon"></i>`;
+        entry += `<div class="griditem-tags"><i title="tags" class="fas fa-tag textIcon"></i>`;
         for (var i = 0; i < value.TAGS.length; i++)
         {
           entry += `<a class="griditem-taglink" href="#tag-${value.TAGS[i]}">${value.TAGS[i]}</a>`;
@@ -205,7 +206,7 @@ function View()
       // PROJECT
       if (SETTINGS.SHOWPROJ && this.isDefined(value.PROJ))
       {
-        entry += `<div class="griditem-proj"><i class="fas fa-leaf textIcon"></i>`;
+        entry += `<div class="griditem-proj"><i title="project" class="fas fa-leaf textIcon"></i>`;
         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>`;
@@ -220,25 +221,25 @@ function View()
       // TERM
       if (SETTINGS.SHOWTERM && this.isDefined(value.TERM))
       {
-        entry += this.doMultilineFormatting(value.TERM, "griditem-term", "fas fa-ribbon textIcon");
+        entry += this.doMultilineFormatting(value.TERM, "term", "griditem-term", "fas fa-ribbon textIcon");
       }
 
       // NOTE
       if (SETTINGS.SHOWNOTE && this.isDefined(value.NOTE))
       {
-        entry += this.doMultilineFormatting(value.NOTE, "griditem-note", "fas fa-sticky-note textIcon");
+        entry += this.doMultilineFormatting(value.NOTE, "note", "griditem-note", "fas fa-sticky-note textIcon");
       }
 
       // QUOTE
       if (SETTINGS.SHOWQOTE && this.isDefined(value.QOTE))
       {
-        entry += this.doMultilineFormatting(value.QOTE, "griditem-quote", "fas fa-comment textIcon");
+        entry += this.doMultilineFormatting(value.QOTE, "quote", "griditem-quote", "fas fa-comment textIcon");
       }
 
       // PROGRESS
       if (SETTINGS.SHOWPROG && this.isDefined(value.PROG))
       {
-        entry += `<div class="griditem-prog"><i class="fas fa-clock textIcon"></i>${value.PROG}</div>`;
+        entry += `<div class="griditem-prog"><i title="progress" class="fas fa-clock textIcon"></i>${value.PROG}</div>`;
       }
 
       // IMAGE - for non-image-type-entry
@@ -259,13 +260,13 @@ function View()
         {
           for (var i = 0; i < value.FILE.length; i++) 
           {
-            entry += `<div class="griditem-file"><i class="fas fa-folder-open textIcon"></i><a class="griditem-file-link" href="content/media/${value.FILE[i]}">${value.FILE[i]}</a></div>`;
+            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>`;
           }
         }
         else
         {
           // single
-          entry += `<div class="griditem-file"><i class="fas fa-folder-open textIcon"></i><a class="griditem-file-link" href="content/media/${value.FILE}">${value.FILE}</a></div>`;
+          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>`;
         }
       }
 
@@ -287,7 +288,7 @@ function View()
       entry += `</div>`;
     }
 
-    entry += `</div>`;
+    entry += `</article>`;
     return entry;
   }
 
@@ -308,7 +309,7 @@ function View()
     menuContent += `<div class="menu-itemgroup">`;
     menuContent += `<a href='#' class="menu-item">`;
     menuContent += `<div class="menu-itemcount">${value.total}</div>`;
-    menuContent += `<i class="menu-itemicon fas fa-asterisk"></i>`;
+    menuContent += `<i title="all" class="menu-itemicon fas fa-asterisk"></i>`;
     menuContent += `</a>`;
     menuContent += `</div>`;
 
@@ -318,11 +319,11 @@ function View()
       menuContent += `<div class="menu-itemgroup">`;
       menuContent += `<a href='#done-true' class="menu-item">`;
       menuContent += `<div class="menu-itemcount">${value.done}</div>`;
-      menuContent += `<i class="menu-itemicon fas fa-check"></i>`;
+      menuContent += `<i title="done" class="menu-itemicon fas fa-check"></i>`;
       menuContent += `</a>`;
       menuContent += `<a href='#done-false' class="menu-item">`;
       menuContent += `<div class="menu-itemcount">${value.total - value.done}</div>`;
-      menuContent += `<i class="menu-itemicon fas fa-times"></i>`;
+      menuContent += `<i title="to do" class="menu-itemicon fas fa-times"></i>`;
       menuContent += `</a>`;
       menuContent += `</div>`;
     }
@@ -335,7 +336,7 @@ function View()
       const icon = getTypeIconName(type);
       menuContent += `<a href='#type-${type}' class="menu-item">`;
       menuContent += `<div class="menu-itemcount">${count}</div>`;
-      menuContent += `<i class="menu-itemicon ${icon}"></i>`;
+      menuContent += `<i title="${type}" class="menu-itemicon ${icon}"></i>`;
       menuContent += `</a>`;
     }
     menuContent += `</div>`;
@@ -347,7 +348,7 @@ function View()
       // menuContent += `<div class="menu-item-space"></div>`;
       menuContent += `<a href='#term' class="menu-item">`;
       menuContent += `<div class="menu-itemcount">${value.terms}</div>`;
-      menuContent += `<i class="menu-itemicon fas fa-ribbon"></i>`;
+      menuContent += `<i title="terms" class="menu-itemicon fas fa-ribbon"></i>`;
       menuContent += `</a>`;
     }
     menuContent += `</div>`;
@@ -357,7 +358,7 @@ function View()
     if (value.tags.length > 0)
     {
       menuContent += `<div class="menu-tagcontainer">`;
-      menuContent += `<i class="menu-tagicon fas fa-tag"></i>`;
+      menuContent += `<i title="tags" class="menu-tagicon fas fa-tag"></i>`;
       for (var t = 0; t < Math.min(value.tags.length, SETTINGS.STATSNUMTAGS); t++) 
       {
         menuContent += `<a class="menu-tag" href='#tag-${value.tags[t][0]}'>`;
@@ -369,7 +370,7 @@ function View()
       menuContent += `</div>`;
     }
     menuContent += `</div>`;
-    this.menu.innerHTML = menuContent;
+    this.nav.innerHTML = menuContent;
   }
 
   this.handleImageClick = function(e, element, file)
@@ -385,7 +386,7 @@ function View()
     }
   }
 
-  this.doMultilineFormatting = function(data, className, iconName)
+  this.doMultilineFormatting = function(data, title, className, iconName)
   {
     let result = '';
     if (Array.isArray(data))
@@ -402,11 +403,11 @@ function View()
             {
               titleSplit[e] = titleSplit[e].trim();
             }
-            result += `<div class="${className}"><i class="${iconName}"></i><b>${titleSplit[0]}</b>: ${titleSplit[1]}</div>`;
+            result += `<div class="${className}"><i title="${title}" class="${iconName}"></i><b>${titleSplit[0]}</b>: ${titleSplit[1]}</div>`;
           }
           else
           {
-            result += `<div class="${className}"><i class="${iconName}"></i>${data[i].substring(2)}</div>`;
+            result += `<div class="${className}"><i title="${title}" class="${iconName}"></i>${data[i].substring(2)}</div>`;
           }
         }
         else if (data[i].substring(0, 2) === "& ")
@@ -422,14 +423,14 @@ function View()
         else
         {
           // Handle unformatted
-          result += `<div class="${className}"><i class="${iconName}"></i>${data[i]}</div>`;
+          result += `<div class="${className}"><i title="${title}" class="${iconName}"></i>${data[i]}</div>`;
         }
       }
     }
     else
     {
       // Handle not array
-      result += `<div class="${className}"><i class="${iconName}"></i>${data}</div>`;
+      result += `<div class="${className}"><i title="${title}" class="${iconName}"></i>${data}</div>`;
     }
     return result;
   }