tangent/memex
1
0
Fork 0
mirror of https://github.com/TangentFoxy/memex.git synced 2024-11-22 04:54:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Refactor changing divs to html5 semantic elements. Add error handler/icon. Add mouse hover tooltips to icons.

Browse Source
This commit is contained in:
kor 2018-11-03 01:50:25 +13:00
parent 9332e4d769
commit 4adf8375c6
4 changed files with 125 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
docs/asset/style.css
View File

@ -62,16 +62,6 @@ body {
::selection { ::selection {
background: var(--color-bg); 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 */
.loading-wave { .loading-wave {
@ -126,8 +116,36 @@ body {
} }
} }
/* MENU */ /* ERROR */
.menu { .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); padding-top: var(--size-grid-gutter);
background: var(--color-bg); background: var(--color-bg);
opacity: var(--alpha-idle); opacity: var(--alpha-idle);
@ -139,10 +157,10 @@ body {
top: 0px; top: 0px;
/*overflow-y: scroll;*/ /*allow menu to scroll on small screens*/ /*overflow-y: scroll;*/ /*allow menu to scroll on small screens*/
} }
.menu:hover { nav:hover {
opacity: var(--alpha-ascent); opacity: var(--alpha-ascent);
} }
.menu::-webkit-scrollbar { nav::-webkit-scrollbar {
display: none; display: none;
} }
.menu-itemgroup { .menu-itemgroup {
@ -230,12 +248,12 @@ body {
margin-left: calc(var(--size-menu) + var(--size-grid-gutter)); margin-left: calc(var(--size-menu) + var(--size-grid-gutter));
margin-right: var(--size-grid-gutter); margin-right: var(--size-grid-gutter);
} }
.grid { main {
margin: var(--size-grid-gutter) auto; margin: var(--size-grid-gutter) auto;
-webkit-transition: opacity 1000ms linear; -webkit-transition: opacity 1000ms linear;
transition: opacity 1000ms linear; transition: opacity 1000ms linear;
} }
.grid:after { main:after {
/* clearfix (reset) */ /* clearfix (reset) */
display: block; display: block;
content: ''; content: '';
@ -243,7 +261,7 @@ body {
} }
/* GRID ITEM */ /* GRID ITEM */
.griditem, .griditem-wide { article, .griditem-wide {
padding-bottom: var(--size-grid-gutter); padding-bottom: var(--size-grid-gutter);
border-radius: var(--size-item-corner); border-radius: var(--size-item-corner);
margin-bottom: var(--size-grid-gutter); margin-bottom: var(--size-grid-gutter);
@ -253,7 +271,7 @@ body {
position: relative; position: relative;
float: left; float: left;
} }
.griditem:hover, .griditem-wide:hover { article:hover, .griditem-wide:hover {
opacity: var(--alpha-ascent); opacity: var(--alpha-ascent);
} }
@media screen and (min-width: 886px) { @media screen and (min-width: 886px) {
@ -261,11 +279,11 @@ body {
width: calc(var(--size-grid-column) * 2 + var(--size-grid-gutter)); width: calc(var(--size-grid-column) * 2 + var(--size-grid-gutter));
} }
} }
.griditem:hover { article:hover {
background: var(--color-itembg); background: var(--color-itembg);
opacity: 1; opacity: 1;
} }
.griditem::selection { article::selection {
background: var(--b_high); background: var(--b_high);
} }
.griditem-containerupper { .griditem-containerupper {
@ -405,10 +423,10 @@ body {
.griditem-link:hover .griditem-linktitle { .griditem-link:hover .griditem-linktitle {
opacity: var(--alpha-ascent); opacity: var(--alpha-ascent);
} }
.griditem:hover .griditem-linkicon { article:hover .griditem-linkicon {
opacity: var(--alpha-enabledicon); opacity: var(--alpha-enabledicon);
} }
.griditem:hover .griditem-linktitle { article:hover .griditem-linktitle {
opacity: var(--alpha-enabled); opacity: var(--alpha-enabled);
} }
@ -471,14 +489,14 @@ body {
float: left; float: left;
clear: both; clear: both;
} }
.griditem:hover .griditem-note, article:hover .griditem-note,
.griditem:hover .griditem-quote, article:hover .griditem-quote,
.griditem:hover .griditem-term, article:hover .griditem-term,
.griditem:hover .griditem-tags, article:hover .griditem-tags,
.griditem:hover .griditem-proj, article:hover .griditem-proj,
.griditem:hover .griditem-auth, article:hover .griditem-auth,
.griditem:hover .griditem-file, article:hover .griditem-file,
.griditem:hover .griditem-prog { article:hover .griditem-prog {
opacity: var(--alpha-enabled); opacity: var(--alpha-enabled);
color: var(--color-item); color: var(--color-item);
} }
@ -520,10 +538,10 @@ body {
color: var(--color-item); color: var(--color-item);
text-decoration:none; text-decoration:none;
} }
.griditem:hover .griditem-taglink { article:hover .griditem-taglink {
color: var(--color-item); color: var(--color-item);
} }
.griditem:hover .griditem-taglink:hover { article:hover .griditem-taglink:hover {
background-color: var(--color-itemascent); background-color: var(--color-itemascent);
color: var(--color-itembg); color: var(--color-itembg);
} }
@ -539,7 +557,7 @@ body {
margin-right: var(--size-item-elem-sep); margin-right: var(--size-item-elem-sep);
opacity: var(--alpha-idleicon); opacity: var(--alpha-idleicon);
} }
.griditem:hover .textIcon { article:hover .textIcon {
color: var(--color-item); color: var(--color-item);
opacity: var(--alpha-enabledicon); opacity: var(--alpha-enabledicon);
} }
@ -547,33 +565,28 @@ body {
/* LIGHTBOX */ /* LIGHTBOX */
.lightbox { .lightbox {
position: fixed; position: fixed;
z-index: 300;
width: 100%;
height: 100%;
left: 0; left: 0;
top: 0; top: 0;
display: flex;
align-items: center;
display: none;
}
.lightbox-back {
z-index: 300; z-index: 300;
background-color: rgba(0,0,0,0.9);
width: 100%; width: 100%;
height: 100%; height: 100%;
display: none;
align-items: center;
}
.lightbox-back {
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.9);
cursor: pointer; cursor: pointer;
} }
.lightbox-item { .lightbox-img {
z-index: 400;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translateY(-50%) translateX(-50%);
vertical-align: middle;
}
.lightbox-img {
max-height: 100vh; max-height: 100vh;
max-width: 100vw; max-width: 100vw;
transform: translateY(-50%) translateX(-50%);
vertical-align: middle;
cursor: pointer; cursor: pointer;
} }
@ -581,7 +594,6 @@ body {
/*TODO: refactor below; */ /*TODO: refactor below; */
/* PAGE */ /* PAGE */
@ -603,6 +615,14 @@ body {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
user-select: none; 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 { .page-overlay .content-menu {
width: 100px; width: 100px;

16
docs/index.html
View File

@ -10,14 +10,15 @@
<body> <body>
<script> let theme = new Theme(); theme.install(); theme.start(); </script> <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="loading-wave"><div></div><div></div><div></div><div></div><div></div></div>
<div class="error"></div>
<div class="menu" id="menu"></div> <nav></nav>
<div class="container" id="container"> <div class="container">
<div class="grid" id="grid"></div> <main></main>
</div> </div>
<div class="lightbox" id="lightbox"></div> <div class="lightbox"></div>
<div class="page-overlay noselect" id="overlay"></div> <div class="page-overlay"></div>
<script src="logic/lib/imagesloaded.js"></script> <script src="logic/lib/imagesloaded.js"></script>
<script src="logic/lib/masonry.js"></script> <script src="logic/lib/masonry.js"></script>
@ -31,6 +32,11 @@
<script src="logic/add.js"></script> <script src="logic/add.js"></script>
<script src="logic/lightbox.js"></script> <script src="logic/lightbox.js"></script>
<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(); var main = new Main();
main.install(); main.install();
main.start(); main.start();

8
docs/logic/main.js
View File

@ -17,9 +17,13 @@ function Main()
this.db = new Wrap(); this.db = new Wrap();
this.db.install(DATABASE); this.db.install(DATABASE);
this.view = new View(); 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 = new Lightbox;
this.lightbox.install(); this.lightbox.install(document.querySelector('.lightbox'), 'lightbox');
if (window.showAdd !== undefined && window.showAdd) if (window.showAdd !== undefined && window.showAdd)
{ {

77
docs/logic/view.js
View File

@ -1,24 +1,25 @@
function View() function View()
{ {
this.msnry = null; this.nav = null;
this.overlay = null;
this.container = null; this.container = null;
this.grid = null; this.grid = null;
this.menu = null; this.overlay = null;
this.msnry = null;
var parent = this; var parent = this;
this.install = function() this.install = function(nav, container, grid, overlay)
{ {
this.overlay = document.getElementById("overlay"); this.nav = nav;
this.container = document.getElementById("container"); this.container = container;
this.grid = document.getElementById("grid"); this.grid = grid;
this.menu = document.getElementById("menu"); this.overlay = overlay;
if (SETTINGS.USEMASONRY) if (SETTINGS.USEMASONRY)
{ {
this.msnry = new Masonry('.grid', this.msnry = new Masonry('main',
{ {
itemSelector: '.griditem', itemSelector: 'article',
columnWidth: 350, columnWidth: 350,
gutter: 20, gutter: 20,
fitWidth: true, fitWidth: true,
@ -53,7 +54,7 @@ function View()
if (SETTINGS.MASONRYCOMPLETE || SETTINGS.MASONRYPROGRESS) if (SETTINGS.MASONRYCOMPLETE || SETTINGS.MASONRYPROGRESS)
{ {
let imgLoad = imagesLoaded( container ); let imgLoad = imagesLoaded( this.container );
if (!SETTINGS.MASONRYPROGRESS) if (!SETTINGS.MASONRYPROGRESS)
{ {
// When all images finish: redo mansonry layout // When all images finish: redo mansonry layout
@ -71,7 +72,7 @@ function View()
this.buildEntry = function(db, key) this.buildEntry = function(db, key)
{ {
let value = db[key]; let value = db[key];
let itemClass = "griditem"; let itemClass = "article";
if (SETTINGS.WIDEGRIDITEM) if (SETTINGS.WIDEGRIDITEM)
{ {
if (this.isDefined(value.WIDE) && value.WIDE) if (this.isDefined(value.WIDE) && value.WIDE)
@ -97,7 +98,7 @@ function View()
} }
let entry = ``; let entry = ``;
entry += `<div class="${itemClass}" id="${SETTINGS.GRIDITEMIDBASE + value.DIID}">`; entry += `<article class="${itemClass}" id="${SETTINGS.GRIDITEMIDBASE + value.DIID}">`;
// ITEM DIV // ITEM DIV
if (this.isDefined(value.LINK)) if (this.isDefined(value.LINK))
@ -129,7 +130,7 @@ function View()
// TITLE // TITLE
if (SETTINGS.SHOWTITLE) if (SETTINGS.SHOWTITLE)
{ {
entry += `<div class="griditem-title">${key.to_properCase()}</div>`; entry += `<header class="griditem-title">${key.to_properCase()}</header>`;
} }
// LINK END // LINK END
@ -140,7 +141,7 @@ function View()
for (let l = 0; l < value.LINK.length; l++) for (let l = 0; l < value.LINK.length; l++)
{ {
entry += `<a class="griditem-link" href="${String(value.LINK[l])}" id="${idUrl}">`; 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 else
@ -158,7 +159,7 @@ function View()
{ {
const icon = getTypeIconName(value.TYPE[tc]); const icon = getTypeIconName(value.TYPE[tc]);
entry += `<a class="griditem-type" href='#type-${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 += `</a>`;
} }
entry += `</div>`; // griditem-typecontainer entry += `</div>`; // griditem-typecontainer
@ -183,14 +184,14 @@ function View()
{ {
for (var i = 0; i < value.AUTH.length; i++) 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 // TAGS
if (SETTINGS.SHOWTAGS && this.isDefined(value.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++) for (var i = 0; i < value.TAGS.length; i++)
{ {
entry += `<a class="griditem-taglink" href="#tag-${value.TAGS[i]}">${value.TAGS[i]}</a>`; entry += `<a class="griditem-taglink" href="#tag-${value.TAGS[i]}">${value.TAGS[i]}</a>`;
@ -205,7 +206,7 @@ function View()
// PROJECT // PROJECT
if (SETTINGS.SHOWPROJ && this.isDefined(value.PROJ)) 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++) 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>`; entry += `<a class="griditem-taglink" href="#proj-${value.PROJ[i]}">${value.PROJ[i].to_properCase()}</a>`;
@ -220,25 +221,25 @@ function View()
// TERM // TERM
if (SETTINGS.SHOWTERM && this.isDefined(value.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 // NOTE
if (SETTINGS.SHOWNOTE && this.isDefined(value.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 // QUOTE
if (SETTINGS.SHOWQOTE && this.isDefined(value.QOTE)) 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 // PROGRESS
if (SETTINGS.SHOWPROG && this.isDefined(value.PROG)) 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 // IMAGE - for non-image-type-entry
@ -259,13 +260,13 @@ function View()
{ {
for (var i = 0; i < value.FILE.length; i++) 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 else
{ {
// single // 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 += `</div>`; entry += `</article>`;
return entry; return entry;
} }
@ -308,7 +309,7 @@ function View()
menuContent += `<div class="menu-itemgroup">`; menuContent += `<div class="menu-itemgroup">`;
menuContent += `<a href='#' class="menu-item">`; menuContent += `<a href='#' class="menu-item">`;
menuContent += `<div class="menu-itemcount">${value.total}</div>`; 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 += `</a>`;
menuContent += `</div>`; menuContent += `</div>`;
@ -318,11 +319,11 @@ function View()
menuContent += `<div class="menu-itemgroup">`; menuContent += `<div class="menu-itemgroup">`;
menuContent += `<a href='#done-true' class="menu-item">`; menuContent += `<a href='#done-true' class="menu-item">`;
menuContent += `<div class="menu-itemcount">${value.done}</div>`; 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>`;
menuContent += `<a href='#done-false' class="menu-item">`; menuContent += `<a href='#done-false' class="menu-item">`;
menuContent += `<div class="menu-itemcount">${value.total - value.done}</div>`; 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 += `</a>`;
menuContent += `</div>`; menuContent += `</div>`;
} }
@ -335,7 +336,7 @@ function View()
const icon = getTypeIconName(type); const icon = getTypeIconName(type);
menuContent += `<a href='#type-${type}' class="menu-item">`; menuContent += `<a href='#type-${type}' class="menu-item">`;
menuContent += `<div class="menu-itemcount">${count}</div>`; 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 += `</a>`;
} }
menuContent += `</div>`; menuContent += `</div>`;
@ -347,7 +348,7 @@ function View()
// menuContent += `<div class="menu-item-space"></div>`; // menuContent += `<div class="menu-item-space"></div>`;
menuContent += `<a href='#term' class="menu-item">`; menuContent += `<a href='#term' class="menu-item">`;
menuContent += `<div class="menu-itemcount">${value.terms}</div>`; 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 += `</a>`;
} }
menuContent += `</div>`; menuContent += `</div>`;
@ -357,7 +358,7 @@ function View()
if (value.tags.length > 0) if (value.tags.length > 0)
{ {
menuContent += `<div class="menu-tagcontainer">`; 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++) 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 += `<a class="menu-tag" href='#tag-${value.tags[t][0]}'>`;
@ -369,7 +370,7 @@ function View()
menuContent += `</div>`; menuContent += `</div>`;
} }
menuContent += `</div>`; menuContent += `</div>`;
this.menu.innerHTML = menuContent; this.nav.innerHTML = menuContent;
} }
this.handleImageClick = function(e, element, file) 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 = ''; let result = '';
if (Array.isArray(data)) if (Array.isArray(data))
@ -402,11 +403,11 @@ function View()
{ {
titleSplit[e] = titleSplit[e].trim(); 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 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) === "& ") else if (data[i].substring(0, 2) === "& ")
@ -422,14 +423,14 @@ function View()
else else
{ {
// Handle unformatted // 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 else
{ {
// Handle not array // 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; return result;
} }