diff --git a/content/Memex.ndtl b/content/Memex.ndtl index 2f9e39d..36ce007 100644 --- a/content/Memex.ndtl +++ b/content/Memex.ndtl @@ -1,6 +1,5 @@ -DATABASE = {} +let DATABASE = ` -DATABASE.memex = ` AGAINST BEAUTY IN PHYSICS PERS : faun SRCE : Merveilles diff --git a/index.html b/index.html index aeb57d9..3dd72f3 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,9 @@ \ No newline at end of file diff --git a/logic/main.js b/logic/main.js index ab3f23f..ef580a9 100644 --- a/logic/main.js +++ b/logic/main.js @@ -1,206 +1,297 @@ -this.DB = new Indental(DATABASE.memex).parse(); -let keys = Object.keys(DB); -let page = 0; -let lastEntry = -1; -let postPerPage = 1000; - function Main() { - let view = ``; - let html = document.body; - - view += `
`; - view += `${displayEntries(DB)}`; - view += `
`; + this.database = null; + this.keys = null; + this.page = 0; + this.lastEntry = -1; + this.postPerPage = 1000; - html.innerHTML = view; + this.install = function() + { + this.database = new Indental(DATABASE).parse(); + this.keys = Object.keys(this.database); + this.processDatabase(); + } - var msnry = new Masonry( '.grid', { - itemSelector: '.grid-item', - columnWidth: 350, - gutter: 20, - fitWidth: true, - transitionDuration: 0, - }); + this.start = function() + { + this.load(window.document.location.hash == "" ? 'Home' : window.document.location.hash); + } - console.log(DB); -} + this.load = function(target = "Home") + { + target = target.substr(0,1) == "#" ? target.substr(1,target.length-1) : target + target = target.trim() == "" ? "home" : target -function displayEntries() -{ + if(target === '') + { + window.history.replaceState(undefined, undefined, "#" + target) + } + else + { + window.location.hash = target.to_url() + } + + if (target == 'home') + { + let view = ``; + view += `
`; + view += `${this.displayEntries(this.database)}`; + view += `
`; + document.body.innerHTML = view; + + var msnry = new Masonry( '.grid', { + itemSelector: '.grid-item', + columnWidth: 350, + gutter: 20, + fitWidth: true, + transitionDuration: 0, + }); + + console.log(this.database); + } + else + { + var splitTarget = target.split(":"); + if (splitTarget[0] == 'tag') + { + console.log('tag'); + } + else if (splitTarget[0] == 'type') + { + console.log('type'); + } + } + } + + this.processDatabase = function() + { + var tempDatabase = this.database; + for (i = 0; i < this.keys.length; i++) + { + let value = this.database[this.keys[i]]; + if (typeof value.TAGS !== 'undefined') + { + var tags = value.TAGS.split(","); + + for (var t = 0; t < tags.length; t++) + { + tags[t] = tags[t].trim().toLowerCase(); + } + + this.database[this.keys[i]].TAGS = tags; + } + } + } + + this.missing = function(target) + { + console.warn(`Could not find ${target}.`); + //this.el.innerHTML = `

Could not find page ${target}

`; + } + + this.touch = function(target) + { + var link = target.getAttribute("href") ? target.getAttribute("href") : target.parentNode.getAttribute("href") + + if(!link){ return; } + if(link.substr(0,1) != "#"){ return; } + + this.load(link.substr(1,link.length-1)); + } + + document.addEventListener('mouseup', (e)=>{ this.touch(e.target); e.preventDefault(); }); + + this.displayEntries = function() + { let entries = ``; - page += postPerPage; - var i = lastEntry + 1; - while (i < Math.min(keys.length, page)) - { - entries += buildEntry(i); - lastEntry = i; - i += 1; - } - - entries += doPagination(); + this.page += this.postPerPage; + var i = this.lastEntry + 1; + while (i < Math.min(this.keys.length, this.page)) + { + entries += this.buildEntry(i); + this.lastEntry = i; + i += 1; + } + entries += this.doPagination(); return entries; -} + } -function buildEntry(id) -{ - var value = this.DB[keys[id]]; - - var entry = `
`; - entry += `
${keys[id].toProperCase()}
`; + this.buildEntry = function(id) + { + let value = this.database[this.keys[id]]; + let entry = `
`; + entry += `
${this.keys[id].to_properCase()}
`; // LINK - if (typeof value.LINK !== 'undefined') - { - var idUrl = "url"; - if (typeof value.SEEN !== 'undefined') - { - if (value.SEEN == "true") - { - idUrl = "urlseen"; - } - } - entry += `
${extractRootDomain(value.LINK)}
`; - } + if (typeof value.LINK !== 'undefined') + { + var idUrl = "url"; + if (typeof value.SEEN !== 'undefined') + { + if (value.SEEN == "true") + { + idUrl = "urlseen"; + } + } + entry += `
${this.extractRootDomain(value.LINK)}
`; + } - // TYPE - if (typeof value.TYPE !== 'undefined') - { - entry += ``; - } + // TYPE + if (typeof value.TYPE !== 'undefined') + { + entry += ``; + } - // TAGS - if (typeof value.TAGS !== 'undefined') - { - var tags = value.TAGS.split(","); - for (var i = 0; i < tags.length; i++) - { - tags[i] = tags[i].trim().toLowerCase(); - } + // TAGS + if (typeof value.TAGS !== 'undefined') + { + entry += `
`; + for (var i = 0; i < value.TAGS.length; i++) + { + entry += `${value.TAGS[i]}`; + if (i+1 != value.TAGS.length) + { + entry += `, `; + } + }; + entry += `
`; + } - this.DB[keys[id]].TAGS = tags; + // NOTE + if (typeof value.NOTE !== 'undefined') + { + entry += `
${value.NOTE}
`; + } - entry += `
`; - for (var i = 0; i < tags.length; i++) - { - entry += `${tags[i]}`; - if (i+1 != tags.length) - { - entry += `, `; - } - }; - entry += `
`; - } - + // QUOTE + if (typeof value.QOTE !== 'undefined') + { + entry += `
${value.QOTE}
`; + } - // NOTE - if (typeof value.NOTE !== 'undefined') - { - entry += `
${value.NOTE}
`; - } + // TERM + if (typeof value.TERM !== 'undefined') + { + entry += `
${value.TERM}
`; + } - // QUOTE - if (typeof value.QOTE !== 'undefined') - { - entry += `
${value.QOTE}
`; - } + // PROGRESS + if (typeof value.PROG !== 'undefined') + { + entry += `
${value.PROG}
`; + } - // TERM - if (typeof value.TERM !== 'undefined') - { - entry += `
${value.TERM}
`; - } + entry += `
`; + return entry; + } - // PROGRESS - if (typeof value.PROG !== 'undefined') - { - entry += `
${value.PROG}
`; - } - - entry += `
`; - - return entry; -} - -function doPagination() -{ + this.doPagination = function() + { return ` ` -} + } -function loadMore() -{ + this.loadMore = function() + { pagination.remove(); - document.getElementById("content").innerHTML += doJournal(DB); -} + document.getElementById("content").innerHTML += doJournal(this.database); + } -String.prototype.toProperCase = function () -{ + String.prototype.to_url = function() + { + return this.toLowerCase().replace(/ /g,"+").replace(/[^0-9a-z\+]/gi,"").trim(); + } + + 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 -function extractHostname(url) -{ + // 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]; + hostname = url.split('/')[2]; } else { - hostname = url.split('/')[0]; + hostname = url.split('/')[0]; } //find & remove port number @@ -209,24 +300,33 @@ function extractHostname(url) hostname = hostname.split('?')[0]; return hostname; + } } -// Source: https://stackoverflow.com/questions/8498592/extract-hostname-name-from-string -function extractRootDomain(url) +var detectBackOrForward = function(onBack, onForward) { - var domain = extractHostname(url), - splitArr = domain.split('.'), - arrLen = splitArr.length; + hashHistory = [window.location.hash]; + historyLength = window.history.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 function() + { + var hash = window.location.hash, length = window.history.length; + if (hashHistory.length && historyLength == length) { + if (hashHistory[hashHistory.length - 2] == hash) { + hashHistory = hashHistory.slice(0, -1); + onBack(); + } else { + hashHistory.push(hash); + onForward(); + } + } else { + hashHistory.push(hash); + historyLength = length; } - return domain; -} \ No newline at end of file + } +}; + +window.addEventListener("hashchange", detectBackOrForward( + function() { console.log("back"); main.load(); }, + function() { console.log("forward"); main.load(); } +)); \ No newline at end of file