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

Setup for handling tags and types.

Browse Source
This commit is contained in:
kor 2018-07-16 02:23:07 +12:00
parent a7e432f0ca
commit 9c1d99d6b8
3 changed files with 289 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
content/Memex.ndtl
View File

@ -1,6 +1,5 @@
DATABASE = {} let DATABASE = `
DATABASE.memex = `
AGAINST BEAUTY IN PHYSICS AGAINST BEAUTY IN PHYSICS
PERS : faun PERS : faun
SRCE : Merveilles SRCE : Merveilles

4
index.html
View File

@ -16,7 +16,9 @@
</head> </head>
<body> <body>
<script> <script>
let main = new Main(); var main = new Main();
main.install();
main.start();
</script> </script>
</body> </body>
</html> </html>

470
logic/main.js
View File

@ -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() function Main()
{ {
let view = ``; this.database = null;
let html = document.body; this.keys = null;
this.page = 0;
view += `<div class="grid">`; this.lastEntry = -1;
view += `${displayEntries(DB)}`; this.postPerPage = 1000;
view += `</div>`;
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', { this.start = function()
itemSelector: '.grid-item', {
columnWidth: 350, this.load(window.document.location.hash == "" ? 'Home' : window.document.location.hash);
gutter: 20, }
fitWidth: true,
transitionDuration: 0,
});
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 += `<div class="grid">`;
view += `${this.displayEntries(this.database)}`;
view += `</div>`;
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 = `<page><p>Could not find page ${target}</p></page>`;
}
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 = ``; let entries = ``;
page += postPerPage; this.page += this.postPerPage;
var i = lastEntry + 1; var i = this.lastEntry + 1;
while (i < Math.min(keys.length, page)) while (i < Math.min(this.keys.length, this.page))
{ {
entries += buildEntry(i); entries += this.buildEntry(i);
lastEntry = i; this.lastEntry = i;
i += 1; i += 1;
} }
entries += this.doPagination();
entries += doPagination();
return entries; return entries;
} }
function buildEntry(id) this.buildEntry = function(id)
{ {
var value = this.DB[keys[id]]; let value = this.database[this.keys[id]];
let entry = `<div class="grid-item">`;
var entry = `<div class="grid-item">`; entry += `<div class="title">${this.keys[id].to_properCase()}</div>`;
entry += `<div class="title">${keys[id].toProperCase()}</div>`;
// LINK // LINK
if (typeof value.LINK !== 'undefined') if (typeof value.LINK !== 'undefined')
{ {
var idUrl = "url"; var idUrl = "url";
if (typeof value.SEEN !== 'undefined') if (typeof value.SEEN !== 'undefined')
{ {
if (value.SEEN == "true") if (value.SEEN == "true")
{ {
idUrl = "urlseen"; idUrl = "urlseen";
} }
} }
entry += `<div class="link"><i class="fas fa-link textIcon"></i><a href="${String(value.LINK)}" id="${idUrl}">${extractRootDomain(value.LINK)}</a></div>`; entry += `<div class="link"><i class="fas fa-link textIcon"></i><a href="${String(value.LINK)}" id="${idUrl}">${this.extractRootDomain(value.LINK)}</a></div>`;
} }
// TYPE // TYPE
if (typeof value.TYPE !== 'undefined') if (typeof value.TYPE !== 'undefined')
{ {
entry += `<div id="type">`; entry += `<div id="type">`;
entry += `<a href='#type:${String(value.TYPE)}'>`; entry += `<a href='#type:${String(value.TYPE)}'>`;
if (value.TYPE == 'article') if (value.TYPE == 'article')
{ {
entry += `<i class="far fa-newspaper"></i>`; entry += `<i class="far fa-newspaper"></i>`;
} }
else if (value.TYPE == 'podcast') else if (value.TYPE == 'podcast')
{ {
entry += `<i class="fas fa-podcast"></i>`; entry += `<i class="fas fa-podcast"></i>`;
} }
else if (value.TYPE == 'video') else if (value.TYPE == 'video')
{ {
entry += `<i class="fas fa-tv"></i>`; entry += `<i class="fas fa-tv"></i>`;
} }
else if (value.TYPE == 'list') else if (value.TYPE == 'list')
{ {
entry += `<i class="fas fa-file-alt"></i>`; entry += `<i class="fas fa-file-alt"></i>`;
} }
else if (value.TYPE == 'book') else if (value.TYPE == 'book')
{ {
entry += `<i class="fas fa-book-open"></i>`; entry += `<i class="fas fa-book-open"></i>`;
} }
else if (value.TYPE == 'game') else if (value.TYPE == 'game')
{ {
entry += `<i class="fas fa-gamepad"></i>`; entry += `<i class="fas fa-gamepad"></i>`;
} }
else if (value.TYPE == 'service') else if (value.TYPE == 'service')
{ {
entry += `<i class="fas fa-server"></i>`; entry += `<i class="fas fa-server"></i>`;
} }
else if (value.TYPE == 'lecture') else if (value.TYPE == 'lecture')
{ {
entry += `<i class="fas fa-chalkboard-teacher"></i>`; entry += `<i class="fas fa-chalkboard-teacher"></i>`;
} }
else if (value.TYPE == 'quote') else if (value.TYPE == 'quote')
{ {
entry += `<i class="fas fa-comment"></i>`; entry += `<i class="fas fa-comment"></i>`;
} }
else if (value.TYPE == 'tool') else if (value.TYPE == 'tool')
{ {
entry += `<i class="fas fa-wrench"></i>`; entry += `<i class="fas fa-wrench"></i>`;
} }
else if (value.TYPE == 'music') else if (value.TYPE == 'music')
{ {
entry += `<i class="fas fa-music"></i>`; entry += `<i class="fas fa-music"></i>`;
} }
entry += `</a>`; entry += `</a>`;
entry += `</div>`; entry += `</div>`;
} }
// TAGS // TAGS
if (typeof value.TAGS !== 'undefined') if (typeof value.TAGS !== 'undefined')
{ {
var tags = value.TAGS.split(","); entry += `<div class="tags"><i class="fas fa-tag textIcon"></i>`;
for (var i = 0; i < tags.length; i++) for (var i = 0; i < value.TAGS.length; i++)
{ {
tags[i] = tags[i].trim().toLowerCase(); entry += `<a href=#tag:${value.TAGS[i]}>${value.TAGS[i]}</a>`;
} if (i+1 != value.TAGS.length)
{
entry += `, `;
}
};
entry += `</div>`;
}
this.DB[keys[id]].TAGS = tags; // NOTE
if (typeof value.NOTE !== 'undefined')
{
entry += `<div class="note"><i class="fas fa-sticky-note textIcon"></i>${value.NOTE}</div>`;
}
entry += `<div class="tags"><i class="fas fa-tag textIcon"></i>`; // QUOTE
for (var i = 0; i < tags.length; i++) if (typeof value.QOTE !== 'undefined')
{ {
entry += `<a href=#tag:${tags[i]}>${tags[i]}</a>`; entry += `<div class="quote"><i class="fas fa-comment textIcon"></i>${value.QOTE}</div>`;
if (i+1 != tags.length) }
{
entry += `, `;
}
};
entry += `</div>`;
}
// NOTE // TERM
if (typeof value.NOTE !== 'undefined') if (typeof value.TERM !== 'undefined')
{ {
entry += `<div class="note"><i class="fas fa-sticky-note textIcon"></i>${value.NOTE}</div>`; entry += `<div class="term"><i class="fas fa-ribbon textIcon"></i>${value.TERM}</div>`;
} }
// QUOTE // PROGRESS
if (typeof value.QOTE !== 'undefined') if (typeof value.PROG !== 'undefined')
{ {
entry += `<div class="quote"><i class="fas fa-comment textIcon"></i>${value.QOTE}</div>`; entry += `<div class="prog"><i class="fas fa-clock textIcon"></i>${value.PROG}</div>`;
} }
// TERM entry += `</div>`;
if (typeof value.TERM !== 'undefined') return entry;
{ }
entry += `<div class="term"><i class="fas fa-ribbon textIcon"></i>${value.TERM}</div>`;
}
// PROGRESS this.doPagination = function()
if (typeof value.PROG !== 'undefined') {
{
entry += `<div class="prog"><i class="fas fa-clock textIcon"></i>${value.PROG}</div>`;
}
entry += `</div>`;
return entry;
}
function doPagination()
{
return ` return `
<div id="pagination"> <div id="pagination">
<a id="loadmore" onClick="loadMore();">${lastEntry < keys.length -1 ? `Load more ▼` : ``}</a> <a id="loadmore" onClick="loadMore();">${this.lastEntry < this.keys.length -1 ? `Load more ▼` : ``}</a>
</div> </div>
` `
} }
function loadMore() this.loadMore = function()
{ {
pagination.remove(); 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();}); 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 // Source: https://stackoverflow.com/questions/8498592/extract-hostname-name-from-string
function extractHostname(url) 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; var hostname;
//find & remove protocol (http, ftp, etc.) and get hostname //find & remove protocol (http, ftp, etc.) and get hostname
if (url.indexOf("://") > -1) { if (url.indexOf("://") > -1) {
hostname = url.split('/')[2]; hostname = url.split('/')[2];
} }
else { else {
hostname = url.split('/')[0]; hostname = url.split('/')[0];
} }
//find & remove port number //find & remove port number
@ -209,24 +300,33 @@ function extractHostname(url)
hostname = hostname.split('?')[0]; hostname = hostname.split('?')[0];
return hostname; return hostname;
}
} }
// Source: https://stackoverflow.com/questions/8498592/extract-hostname-name-from-string var detectBackOrForward = function(onBack, onForward)
function extractRootDomain(url)
{ {
var domain = extractHostname(url), hashHistory = [window.location.hash];
splitArr = domain.split('.'), historyLength = window.history.length;
arrLen = splitArr.length;
//extracting the root domain here return function()
//if there is a subdomain {
if (arrLen > 2) { var hash = window.location.hash, length = window.history.length;
domain = splitArr[arrLen - 2] + '.' + splitArr[arrLen - 1]; if (hashHistory.length && historyLength == length) {
//check to see if it's using a Country Code Top Level Domain (ccTLD) (i.e. ".me.uk") if (hashHistory[hashHistory.length - 2] == hash) {
if (splitArr[arrLen - 2].length == 2 && splitArr[arrLen - 1].length == 2) { hashHistory = hashHistory.slice(0, -1);
//this is using a ccTLD onBack();
domain = splitArr[arrLen - 3] + '.' + domain; } else {
} hashHistory.push(hash);
onForward();
}
} else {
hashHistory.push(hash);
historyLength = length;
} }
return domain; }
} };
window.addEventListener("hashchange", detectBackOrForward(
function() { console.log("back"); main.load(); },
function() { console.log("forward"); main.load(); }
));