From b2a1d28b1698443cbf1ebba426d4e78f5706a14b Mon Sep 17 00:00:00 2001 From: kor Date: Sun, 4 Nov 2018 01:30:26 +1300 Subject: [PATCH] Refactor view.js into grid.js, nav.js and util.js --- docs/index.html | 4 +- docs/logic/main.js | 29 ++- docs/logic/view.js | 563 ---------------------------------------- docs/logic/view/grid.js | 367 ++++++++++++++++++++++++++ docs/logic/view/nav.js | 88 +++++++ docs/logic/view/util.js | 114 ++++++++ 6 files changed, 589 insertions(+), 576 deletions(-) delete mode 100644 docs/logic/view.js create mode 100644 docs/logic/view/grid.js create mode 100644 docs/logic/view/nav.js create mode 100644 docs/logic/view/util.js diff --git a/docs/index.html b/docs/index.html index b486bca..c26a04b 100644 --- a/docs/index.html +++ b/docs/index.html @@ -26,8 +26,10 @@ + + + - diff --git a/docs/logic/main.js b/docs/logic/main.js index fecf915..f295cb3 100644 --- a/docs/logic/main.js +++ b/docs/logic/main.js @@ -1,7 +1,9 @@ function Main() { + this.util = null; this.db = null; - this.view = null; + this.grid = null; + this.nav = null; this.add = null; this.write = null; @@ -13,14 +15,17 @@ function Main() this.install = function() { + this.util = new Util(); this.db = new Wrap(); this.db.install(DATABASE); - this.view = new View(); - this.view.install( - document.querySelector('nav'), - document.querySelector('.container'), + this.grid = new Grid(); + this.grid.install( document.querySelector('main'), - document.querySelector('.page-overlay')); + document.querySelector('.page-overlay'), + 'main', + 'article'); + this.nav = new Nav(); + this.nav.install(document.querySelector('nav')); if (window.showAdd !== undefined && window.showAdd) { @@ -37,7 +42,7 @@ function Main() this.start = function() { this.load(window.document.location.hash); - this.view.stats(this.db.stats()); + this.nav.display(this.db.stats()); } this.load = function(target) @@ -76,7 +81,7 @@ function Main() // // Map our array of entries to // // an array of template promises. // // This makes sure they all template in parallel. - // return results.map(this.view.templateEntry) + // return results.map(this.grid.templateEntry) // .reduce(function(sequence, chapterPromise) { // // Use reduce to chain the promises together, // // adding content to the page for each entry @@ -85,7 +90,7 @@ function Main() // // then wait for this template to arrive. // return chapterPromise; // }).then(function(article) { - // this.view.addHtmlToPage(article.html); + // this.grid.addHtmlToPage(article.html); // }); // }, Promise.resolve()); // }) @@ -97,9 +102,9 @@ function Main() // this.db.filter(this.queryCur) // .then(function(results){ - // return this.view.templateEntry(results[0]); + // return this.grid.templateEntry(results[0]); // }).then(function(article) { - // this.view.addHtmlToPage(article.html); + // this.grid.addHtmlToPage(article.html); // }).catch(function() { // console.log("error: " + err.message); // }).then(function() { @@ -108,7 +113,7 @@ function Main() // see: https://developers.google.com/web/fundamentals/primers/promises#whats-all-the-fuss-about - this.view.display(this.db.filter(this.queryCur)); + this.grid.display(this.db.filter(this.queryCur)); } } } diff --git a/docs/logic/view.js b/docs/logic/view.js deleted file mode 100644 index 481ea17..0000000 --- a/docs/logic/view.js +++ /dev/null @@ -1,563 +0,0 @@ -function View() -{ - this.nav = null; - this.container = null; - this.grid = null; - this.overlay = null; - - this.msnry = null; - var parent = this; - - this.install = function(nav, container, grid, overlay) - { - this.nav = nav; - this.container = container; - this.grid = grid; - this.overlay = overlay; - - if (SETTINGS.USEMASONRY) - { - this.msnry = new Masonry('main', - { - itemSelector: 'article', - columnWidth: 350, - gutter: 20, - fitWidth: true, - transitionDuration: 0, - }); - } - } - - this.display = function(db) - { - if (window.showAdd !== undefined && window.showAdd) - { - main.add.setOverlay(false); - } - - // BUILD - let dbKeys = Object.keys(db); - let i = 0; - let contentHtml = ''; - while (i < dbKeys.length) - { - contentHtml += this.buildArticle(db, dbKeys[i]); - i++; - } - this.grid.innerHTML = contentHtml; - - // LAYOUT - if (SETTINGS.USEMASONRY) - { - this.msnry.reloadItems(); - this.msnry.layout(); - - if (SETTINGS.MASONRYCOMPLETE || SETTINGS.MASONRYPROGRESS) - { - let imgLoad = imagesLoaded( this.container ); - if (!SETTINGS.MASONRYPROGRESS) - { - // When all images finish: redo mansonry layout - imgLoad.on( 'always', function() { parent.msnry.layout(); } ); - } - else - { - // As images load one by one: redo masonry layout - imgLoad.on( 'progress', function() { parent.msnry.layout(); } ); - } - } - } - } - - this.buildArticle = function(db, key) - { - let value = db[key]; - let itemClass = "article"; - if (SETTINGS.WIDEARTICLE) - { - if (this.isDefined(value.WIDE) && value.WIDE) - { - itemClass += " article-wide"; - } - else if (this.isDefined(value.QOTE)) - { - if (Array.isArray(value.QOTE) && value.QOTE.length > SETTINGS.AUTOWIDETRIGGER) - { - itemClass += " article-wide"; - } - } - } - - let onclickImage = ``; - let articleIsImageType = (SETTINGS.SHOWIMAG && this.isType(value.TYPE, 'image')); - if (articleIsImageType) - { - itemClass += " article-image"; - onclickImage = `onclick="main.view.handleImageClick(event, this, '${value.FILE}');" - style="cursor: pointer;"`; - } - - // ARTICLE - let article = `
`; - if (this.isDefined(value.LINK)) - { - var idUrl = "url"; - if (this.isDefined(value.SEEN) && value.SEEN === "true") - { - idUrl = "urlseen"; - } - - // LINK START - if (SETTINGS.SHOWLINK && !this.isObject(value.LINK)) - { - // If this item has only one link then make the whole title the link - article += ``; - } - } - - // UPPER CONTENT START - if (SETTINGS.SHOWUPPER) - { - let upperClass = 'article-containerupper'; - if (articleIsImageType) - { - upperClass = 'article-containerupper-image'; - } - article += `
`; - - // TITLE - if (SETTINGS.SHOWTITLE) - { - article += `
${key.to_properCase()}
`; - } - - // LINK END - if (SETTINGS.SHOWLINK && this.isDefined(value.LINK)) - { - if (this.isObject(value.LINK)) - { - for (let l = 0; l < value.LINK.length; l++) - { - article += ``; - article += `
${this.buildIcon('link')}
${this.extractRootDomain(value.LINK[l])}
`; - } - } - else - { - article += `
${this.buildIcon('link')}
${this.extractRootDomain(value.LINK)}
`; - } - } - - // TYPE - if (SETTINGS.SHOWTYPE && this.isDefined(value.TYPE)) - { - - article += `
`; - for (let tc = 0; tc < value.TYPE.length; tc++) - { - article += ``; - article += this.buildIcon(value.TYPE[tc], value.TYPE[tc], 'article-typeicon'); - article += ``; - } - article += `
`; - } - - // UPPER CONTENT END - article += `
`; - } - - // LOWER CONTENT START - if (SETTINGS.SHOWLOWER) - { - let lowerClass = 'article-containerlower'; - if (articleIsImageType) - { - lowerClass = 'article-containerlower-image'; - } - article += `
`; - - // TIME - if (SETTINGS.SHOWDATE && this.isDefined(value.DATE)) - { - article += this.doRow('date', value.DATE); - } - - // AUTHOR - if (SETTINGS.SHOWAUTH && this.isDefined(value.AUTH)) - { - for (var i = 0; i < value.AUTH.length; i++) - { - article += this.doRow('author', value.AUTH[i].to_properCase()); - } - } - - // TAGS - if (SETTINGS.SHOWTAGS && this.isDefined(value.TAGS)) - { - article += this.doRowArray('tags', value.TAGS, 'tag', false); - } - - // PROJECT - if (SETTINGS.SHOWPROJ && this.isDefined(value.PROJ)) - { - article += this.doRowArray('project', value.PROJ, 'proj', true); - } - - // TERM - if (SETTINGS.SHOWTERM && this.isDefined(value.TERM)) - { - article += this.doRowMulti('term', value.TERM); - } - - // NOTE - if (SETTINGS.SHOWNOTE && this.isDefined(value.NOTE)) - { - article += this.doRowMulti('note', value.NOTE); - } - - // QUOTE - if (SETTINGS.SHOWQOTE && this.isDefined(value.QOTE)) - { - article += this.doRowMulti('quote', value.QOTE); - } - - // PROGRESS - if (SETTINGS.SHOWPROG && this.isDefined(value.PROG)) - { - article += this.doRow('progress', value.PROG); - } - - // IMAGE - for non-image-type-article - if (SETTINGS.SHOWIMAG - && !this.isType(value.TYPE, 'image') - && this.isDefined(value.FILE) - && this.isImage(value.FILE)) - { - article += `
`; - article += ``; - article += `
`; - } - - // FILE - if (SETTINGS.SHOWFILE && this.isDefined(value.FILE)) - { - if (this.isObject(value.FILE)) - { - for (var i = 0; i < value.FILE.length; i++) - { - article += this.doRow('file', `${value.FILE[i]}`, 'article-file'); - } - } - else - { - // single - article += this.doRow('file', `${value.FILE}`, 'article-file'); - } - } - - // LOWER CONTENT END - article += `
`; - } - - // IMAGE - for image-type-article - if (articleIsImageType - && this.isDefined(value.FILE) - && this.isImage(value.FILE)) - { - article += `
`; - if (SETTINGS.SHOWOVERLAY) - { - article += `
`; - } - article += ``; - article += `
`; - } - - article += `
`; - return article; - } - - this.doRow = function(type, content, extraClass) - { - return `
- ${type != undefined ? this.buildIcon(type) : ''} -
${content}
-
`; - } - - this.doRowArray = function(type, data, query, propercase) - { - let content = ''; - for (var i = 0; i < data.length; i++) - { - content += `${propercase == true ? data[i].to_properCase() : data[i]}`; - if (i + 1 !== data.length) - { - content += `, `; - } - } - return this.doRow(type, content); - } - - this.doRowMulti = function(type, data) - { - let result = ''; - if (Array.isArray(data)) - { - for (var i in data) - { - if (data[i].substring(0, 2) == "> ") - { - // New item - if (data[i].includes(": ")) - { - let titleSplit = data[i].substring(2).split(': '); // .substring(2) removes the "> " - for (var e = 0; e < titleSplit.length; e++) - { - titleSplit[e] = titleSplit[e].trim(); - } - result += this.doRow(type, `${titleSplit[0]}: ${titleSplit[1]}`); - } - else - { - result += this.doRow(type, data[i].substring(2)); - } - } - else if (data[i].substring(0, 2) === "& ") - { - // New line in current item - result += this.doRow(null, data[i].substring(2)); - } - else if (data[i].substring(0, 2) == "- ") - { - // Bullet point - result += this.doRow('dash', data[i].substring(2)); - } - else - { - // Handle unformatted - result += this.doRow(type, data[i]); - } - } - } - else - { - // Handle not array - result += this.doRow(type, data); - } - return result; - } - - this.stats = function(value) - { - let navContent = ``; - if (window.showAdd !== undefined && window.showAdd) - { - // ADD - navContent += `
`; - navContent += ``; - navContent += `add`; - navContent += ``; - navContent += `
`; - } - - // TOTAL - navContent += `
`; - navContent += ``; - navContent += `
${value.total}
`; - navContent += ``; - navContent += ``; - navContent += `
`; - - // DONE - if (SETTINGS.SHOWDONE) - { - navContent += `
`; - navContent += ``; - navContent += `
${value.done}
`; - navContent += ``; - navContent += ``; - navContent += ``; - navContent += `
${value.total - value.done}
`; - navContent += ``; - navContent += ``; - navContent += `
`; - } - - navContent += `
`; - for (let ty = 0; ty < Math.min(value.types.length, SETTINGS.STATSNUMTYPE); ty++) - { - const type = value.types[ty][0]; - const count = value.types[ty][1]; - const icon = this.getIcon(type); - navContent += ``; - navContent += `
${count}
`; - navContent += ``; - navContent += ``; - } - navContent += `
`; - - // TERM - navContent += `
`; - if (value.terms > 0) - { - navContent += ``; - navContent += `
${value.terms}
`; - navContent += ``; - navContent += ``; - } - navContent += `
`; - - // TAGS - navContent += `
`; - if (value.tags.length > 0) - { - navContent += `
`; - navContent += ``; - for (var t = 0; t < Math.min(value.tags.length, SETTINGS.STATSNUMTAGS); t++) - { - navContent += ``; - navContent += `
${value.tags[t][1]}
`; - navContent += `
${value.tags[t][0]}
`; - navContent += ``; - } - navContent += `
`; - } - navContent += `
`; - this.nav.innerHTML = navContent; - } - - this.handleImageClick = function(e, element, file) - { - e = e || window.event; - var target = e.target || e.srcElement; - if (target == element) - { - // If user is clicking given element, or element's background... - // as opposed to an element's child content, then do lightbox. - // This stops lightbox from happening when clicking on tags, file etc - lightbox.load(`content/media/${file}`); - } - } - - 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 ``; - } - - this.getIcon = function(type) - { - let icon = ''; - switch (type) - { - case 'article': icon = 'far fa-newspaper'; break; - case 'podcast': icon = 'fas fa-podcast'; break; - case 'video': icon = 'fas fa-tv'; break; - case 'list': icon = 'fas fa-file-alt'; break; - case 'book': icon = 'fas fa-book-open'; break; - case 'game': icon = 'fas fa-gamepad'; break; - case 'service': icon = 'fas fa-server'; break; - case 'lecture': icon = 'fas fa-chalkboard-teacher'; break; - case 'quote': icon = 'fas fa-comment'; break; - case 'tool': icon = 'fas fa-wrench'; break; - case 'music': icon = 'fas fa-music'; break; - 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; - } - - // HELPER - this.isDefined = function(value) - { - return (typeof value !== 'undefined'); - } - - this.isObject = function(value) - { - return (typeof value == 'object'); - } - - this.isImage = function(filename) - { - return (/\.(gif|jpg|jpeg|tiff|png)$/i).test(filename); - } - - this.isType = function(typeArray, value) - { - if (this.isDefined(typeArray)) - { - for (var i = 0; i < typeArray.length; i++) - { - if (typeArray[i] == value) - { - return true; - } - } - } - return false; - } - - String.prototype.to_properCase = function() - { - return this.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}); - } - - // Source: https://stackoverflow.com/questions/8498592/extract-hostname-name-from-string - this.extractRootDomain = function(url) - { - var domain = this.extractHostname(url), - splitArr = domain.split('.'), - arrLen = splitArr.length; - - // extracting the root domain here - // if there is a subdomain - if (arrLen > 2) - { - domain = splitArr[arrLen - 2] + '.' + splitArr[arrLen - 1]; - // check to see if it's using a Country Code Top Level Domain (ccTLD) (i.e. ".me.uk") - if (splitArr[arrLen - 2].length === 2 && splitArr[arrLen - 1].length === 2) - { - // this is using a ccTLD - domain = splitArr[arrLen - 3] + '.' + domain; - } - } - return domain; - } - - // Source: https://stackoverflow.com/questions/8498592/extract-hostname-name-from-string - this.extractHostname = function(url) - { - var hostname; - // find & remove protocol (http, ftp, etc.) and get hostname - - if (url.indexOf("://") > -1) - { - hostname = url.split('/')[2]; - } - else - { - hostname = url.split('/')[0]; - } - - // find & remove port number - hostname = hostname.split(':')[0]; - // find & remove "?" - hostname = hostname.split('?')[0]; - - return hostname; - } -} \ No newline at end of file diff --git a/docs/logic/view/grid.js b/docs/logic/view/grid.js new file mode 100644 index 0000000..db12d22 --- /dev/null +++ b/docs/logic/view/grid.js @@ -0,0 +1,367 @@ +function Grid() +{ + this.container = null; + this.overlay = null; + + this.msnry = null; + var parent = this; + + this.install = function(container, overlay, elemContainer, elemItem) + { + this.container = container; + this.overlay = overlay; + + if (SETTINGS.USEMASONRY) + { + this.msnry = new Masonry(elemContainer, + { + itemSelector: elemItem, + columnWidth: 350, + gutter: 20, + fitWidth: true, + transitionDuration: 0, + }); + } + } + + this.display = function(db) + { + if (window.showAdd !== undefined && window.showAdd) + { + main.add.setOverlay(false); + } + + // BUILD + let dbKeys = Object.keys(db); + let i = 0; + let contentHtml = ''; + while (i < dbKeys.length) + { + contentHtml += this.buildArticle(db, dbKeys[i]); + i++; + } + this.container.innerHTML = contentHtml; + + // LAYOUT + if (SETTINGS.USEMASONRY) + { + this.msnry.reloadItems(); + this.msnry.layout(); + + if (SETTINGS.MASONRYCOMPLETE || SETTINGS.MASONRYPROGRESS) + { + let imgLoad = imagesLoaded( this.container ); + if (!SETTINGS.MASONRYPROGRESS) + { + // When all images finish: redo mansonry layout + imgLoad.on( 'always', function() { parent.msnry.layout(); } ); + } + else + { + // As images load one by one: redo masonry layout + imgLoad.on( 'progress', function() { parent.msnry.layout(); } ); + } + } + } + } + + this.buildArticle = function(db, key) + { + let value = db[key]; + let itemClass = "article"; + if (SETTINGS.WIDEARTICLE) + { + if (main.util.isDefined(value.WIDE) && value.WIDE) + { + itemClass += " article-wide"; + } + else if (main.util.isDefined(value.QOTE)) + { + if (Array.isArray(value.QOTE) && value.QOTE.length > SETTINGS.AUTOWIDETRIGGER) + { + itemClass += " article-wide"; + } + } + } + + let onclickImage = ``; + let articleIsImageType = (SETTINGS.SHOWIMAG && main.util.isType(value.TYPE, 'image')); + if (articleIsImageType) + { + itemClass += " article-image"; + onclickImage = `onclick="main.grid.handleImageClick(event, this, '${value.FILE}');" + style="cursor: pointer;"`; + } + + // ARTICLE + let article = `
`; + if (main.util.isDefined(value.LINK)) + { + var idUrl = "url"; + if (main.util.isDefined(value.SEEN) && value.SEEN === "true") + { + idUrl = "urlseen"; + } + + // LINK START + if (SETTINGS.SHOWLINK && !main.util.isObject(value.LINK)) + { + // If this item has only one link then make the whole title the link + article += ``; + } + } + + // UPPER CONTENT START + if (SETTINGS.SHOWUPPER) + { + let upperClass = 'article-containerupper'; + if (articleIsImageType) + { + upperClass = 'article-containerupper-image'; + } + article += `
`; + + // TITLE + if (SETTINGS.SHOWTITLE) + { + article += `
${key.to_properCase()}
`; + } + + // LINK END + if (SETTINGS.SHOWLINK && main.util.isDefined(value.LINK)) + { + if (main.util.isObject(value.LINK)) + { + for (let l = 0; l < value.LINK.length; l++) + { + article += ``; + article += `
${main.util.buildIcon('link')}
${main.util.extractRootDomain(value.LINK[l])}
`; + } + } + else + { + article += `
${main.util.buildIcon('link')}
${main.util.extractRootDomain(value.LINK)}
`; + } + } + + // TYPE + if (SETTINGS.SHOWTYPE && main.util.isDefined(value.TYPE)) + { + + article += `
`; + for (let tc = 0; tc < value.TYPE.length; tc++) + { + article += ``; + article += main.util.buildIcon(value.TYPE[tc], value.TYPE[tc], 'article-typeicon'); + article += ``; + } + article += `
`; + } + + // UPPER CONTENT END + article += `
`; + } + + // LOWER CONTENT START + if (SETTINGS.SHOWLOWER) + { + let lowerClass = 'article-containerlower'; + if (articleIsImageType) + { + lowerClass = 'article-containerlower-image'; + } + article += `
`; + + // TIME + if (SETTINGS.SHOWDATE && main.util.isDefined(value.DATE)) + { + article += this.doRow('date', value.DATE); + } + + // AUTHOR + if (SETTINGS.SHOWAUTH && main.util.isDefined(value.AUTH)) + { + for (var i = 0; i < value.AUTH.length; i++) + { + article += this.doRow('author', value.AUTH[i].to_properCase()); + } + } + + // TAGS + if (SETTINGS.SHOWTAGS && main.util.isDefined(value.TAGS)) + { + article += this.doRowArray('tags', value.TAGS, 'tag', false); + } + + // PROJECT + if (SETTINGS.SHOWPROJ && main.util.isDefined(value.PROJ)) + { + article += this.doRowArray('project', value.PROJ, 'proj', true); + } + + // TERM + if (SETTINGS.SHOWTERM && main.util.isDefined(value.TERM)) + { + article += this.doRowMulti('term', value.TERM); + } + + // NOTE + if (SETTINGS.SHOWNOTE && main.util.isDefined(value.NOTE)) + { + article += this.doRowMulti('note', value.NOTE); + } + + // QUOTE + if (SETTINGS.SHOWQOTE && main.util.isDefined(value.QOTE)) + { + article += this.doRowMulti('quote', value.QOTE); + } + + // PROGRESS + if (SETTINGS.SHOWPROG && main.util.isDefined(value.PROG)) + { + article += this.doRow('progress', value.PROG); + } + + // IMAGE - for non-image-type-article + if (SETTINGS.SHOWIMAG + && !main.util.isType(value.TYPE, 'image') + && main.util.isDefined(value.FILE) + && main.util.isImage(value.FILE)) + { + article += `
`; + article += ``; + article += `
`; + } + + // FILE + if (SETTINGS.SHOWFILE && main.util.isDefined(value.FILE)) + { + if (main.util.isObject(value.FILE)) + { + for (var i = 0; i < value.FILE.length; i++) + { + article += this.doRow('file', `${value.FILE[i]}`, 'article-file'); + } + } + else + { + // single + article += this.doRow('file', `${value.FILE}`, 'article-file'); + } + } + + // LOWER CONTENT END + article += `
`; + } + + // IMAGE - for image-type-article + if (articleIsImageType + && main.util.isDefined(value.FILE) + && main.util.isImage(value.FILE)) + { + article += `
`; + if (SETTINGS.SHOWOVERLAY) + { + article += `
`; + } + article += ``; + article += `
`; + } + + article += `
`; + return article; + } + + this.doRow = function(type, content, extraClass) + { + return `
+ ${type != undefined ? main.util.buildIcon(type) : ''} +
${content}
+
`; + } + + this.doRowArray = function(type, data, query, propercase) + { + let content = ''; + for (var i = 0; i < data.length; i++) + { + content += `${propercase == true ? data[i].to_properCase() : data[i]}`; + if (i + 1 !== data.length) + { + content += `, `; + } + } + return this.doRow(type, content); + } + + this.doRowMulti = function(type, data) + { + let result = ''; + if (Array.isArray(data)) + { + for (var i in data) + { + if (data[i].substring(0, 2) == "> ") + { + // New item + if (data[i].includes(": ")) + { + let titleSplit = data[i].substring(2).split(': '); // .substring(2) removes the "> " + for (var e = 0; e < titleSplit.length; e++) + { + titleSplit[e] = titleSplit[e].trim(); + } + result += this.doRow(type, `${titleSplit[0]}: ${titleSplit[1]}`); + } + else + { + result += this.doRow(type, data[i].substring(2)); + } + } + else if (data[i].substring(0, 2) === "& ") + { + // New line in current item + result += this.doRow(null, data[i].substring(2)); + } + else if (data[i].substring(0, 2) == "- ") + { + // Bullet point + result += this.doRow('dash', data[i].substring(2)); + } + else + { + // Handle unformatted + result += this.doRow(type, data[i]); + } + } + } + else + { + // Handle not array + result += this.doRow(type, data); + } + return result; + } + + this.handleImageClick = function(e, element, file) + { + e = e || window.event; + var target = e.target || e.srcElement; + if (target == element) + { + // If user is clicking given element, or element's background... + // as opposed to an element's child content, then do lightbox. + // This stops lightbox from happening when clicking on tags, file etc + lightbox.load(`content/media/${file}`); + } + } + + main.util.buildIcon = function(type, label, altClass) + { + if (label == undefined) { label = type; } + let labelElem = label != null ? `title="${label}" ` : ``; + let iconClass = altClass == undefined ? 'article-icon' : altClass; + return ``; + } +} \ No newline at end of file diff --git a/docs/logic/view/nav.js b/docs/logic/view/nav.js new file mode 100644 index 0000000..0900e66 --- /dev/null +++ b/docs/logic/view/nav.js @@ -0,0 +1,88 @@ +function Nav() +{ + this.container = null; + + this.install = function(container) + { + this.container = container; + } + + this.display = function(value) + { + let navContent = ``; + if (window.showAdd !== undefined && window.showAdd) + { + // ADD + navContent += `
`; + navContent += ``; + navContent += `add`; + navContent += ``; + navContent += `
`; + } + + // TOTAL + navContent += `
`; + navContent += ``; + navContent += `
${value.total}
`; + navContent += ``; + navContent += ``; + navContent += `
`; + + // DONE + if (SETTINGS.SHOWDONE) + { + navContent += `
`; + navContent += ``; + navContent += `
${value.done}
`; + navContent += ``; + navContent += ``; + navContent += ``; + navContent += `
${value.total - value.done}
`; + navContent += ``; + navContent += ``; + navContent += `
`; + } + + navContent += `
`; + for (let ty = 0; ty < Math.min(value.types.length, SETTINGS.STATSNUMTYPE); ty++) + { + const type = value.types[ty][0]; + const count = value.types[ty][1]; + const icon = main.util.getIcon(type); + navContent += ``; + navContent += `
${count}
`; + navContent += ``; + navContent += ``; + } + navContent += `
`; + + // TERM + navContent += `
`; + if (value.terms > 0) + { + navContent += ``; + navContent += `
${value.terms}
`; + navContent += ``; + navContent += ``; + } + navContent += `
`; + + // TAGS + navContent += `
`; + if (value.tags.length > 0) + { + navContent += `
`; + navContent += ``; + for (var t = 0; t < Math.min(value.tags.length, SETTINGS.STATSNUMTAGS); t++) + { + navContent += ``; + navContent += `
${value.tags[t][1]}
`; + navContent += `
${value.tags[t][0]}
`; + navContent += ``; + } + navContent += `
`; + } + navContent += `
`; + this.container.innerHTML = navContent; + } +} \ No newline at end of file diff --git a/docs/logic/view/util.js b/docs/logic/view/util.js new file mode 100644 index 0000000..209a381 --- /dev/null +++ b/docs/logic/view/util.js @@ -0,0 +1,114 @@ +function Util() +{ + this.getIcon = function(type) + { + let icon = ''; + switch (type) + { + case 'article': icon = 'far fa-newspaper'; break; + case 'podcast': icon = 'fas fa-podcast'; break; + case 'video': icon = 'fas fa-tv'; break; + case 'list': icon = 'fas fa-file-alt'; break; + case 'book': icon = 'fas fa-book-open'; break; + case 'game': icon = 'fas fa-gamepad'; break; + case 'service': icon = 'fas fa-server'; break; + case 'lecture': icon = 'fas fa-chalkboard-teacher'; break; + case 'quote': icon = 'fas fa-comment'; break; + case 'tool': icon = 'fas fa-wrench'; break; + case 'music': icon = 'fas fa-music'; break; + 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; + } + + this.isDefined = function(value) + { + return (typeof value !== 'undefined'); + } + + this.isObject = function(value) + { + return (typeof value == 'object'); + } + + this.isImage = function(filename) + { + return (/\.(gif|jpg|jpeg|tiff|png)$/i).test(filename); + } + + this.isType = function(typeArray, value) + { + if (this.isDefined(typeArray)) + { + for (var i = 0; i < typeArray.length; i++) + { + if (typeArray[i] == value) + { + return true; + } + } + } + return false; + } + + String.prototype.to_properCase = function() + { + return this.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}); + } + + // Source: https://stackoverflow.com/questions/8498592/extract-hostname-name-from-string + this.extractRootDomain = function(url) + { + var domain = this.extractHostname(url), + splitArr = domain.split('.'), + arrLen = splitArr.length; + + // extracting the root domain here + // if there is a subdomain + if (arrLen > 2) + { + domain = splitArr[arrLen - 2] + '.' + splitArr[arrLen - 1]; + // check to see if it's using a Country Code Top Level Domain (ccTLD) (i.e. ".me.uk") + if (splitArr[arrLen - 2].length === 2 && splitArr[arrLen - 1].length === 2) + { + // this is using a ccTLD + domain = splitArr[arrLen - 3] + '.' + domain; + } + } + return domain; + } + + // Source: https://stackoverflow.com/questions/8498592/extract-hostname-name-from-string + this.extractHostname = function(url) + { + var hostname; + // find & remove protocol (http, ftp, etc.) and get hostname + + if (url.indexOf("://") > -1) + { + hostname = url.split('/')[2]; + } + else + { + hostname = url.split('/')[0]; + } + + // find & remove port number + hostname = hostname.split(':')[0]; + // find & remove "?" + hostname = hostname.split('?')[0]; + + return hostname; + } +} \ No newline at end of file