mirror of
https://github.com/TangentFoxy/memex.git
synced 2024-11-22 04:54:23 +00:00
Setup for handling tags and types.
This commit is contained in:
kor
parent
a7e432f0ca
commit
9c1d99d6b8
@ -1,6 +1,5 @@
|
||||
DATABASE = {}
|
||||
let DATABASE = `
|
||||
|
||||
DATABASE.memex = `
|
||||
AGAINST BEAUTY IN PHYSICS
|
||||
PERS : faun
|
||||
SRCE : Merveilles
|
||||
|
||||
@ -16,7 +16,9 @@
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
let main = new Main();
|
||||
var main = new Main();
|
||||
main.install();
|
||||
main.start();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
470
logic/main.js
470
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 += `<div class="grid">`;
|
||||
view += `${displayEntries(DB)}`;
|
||||
view += `</div>`;
|
||||
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 += `<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 = ``;
|
||||
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 = `<div class="grid-item">`;
|
||||
entry += `<div class="title">${keys[id].toProperCase()}</div>`;
|
||||
this.buildEntry = function(id)
|
||||
{
|
||||
let value = this.database[this.keys[id]];
|
||||
let entry = `<div class="grid-item">`;
|
||||
entry += `<div class="title">${this.keys[id].to_properCase()}</div>`;
|
||||
|
||||
// LINK
|
||||
if (typeof value.LINK !== 'undefined')
|
||||
{
|
||||
var idUrl = "url";
|
||||
if (typeof value.SEEN !== 'undefined')
|
||||
{
|
||||
if (value.SEEN == "true")
|
||||
{
|
||||
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>`;
|
||||
}
|
||||
if (typeof value.LINK !== 'undefined')
|
||||
{
|
||||
var idUrl = "url";
|
||||
if (typeof value.SEEN !== 'undefined')
|
||||
{
|
||||
if (value.SEEN == "true")
|
||||
{
|
||||
idUrl = "urlseen";
|
||||
}
|
||||
}
|
||||
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
|
||||
if (typeof value.TYPE !== 'undefined')
|
||||
{
|
||||
entry += `<div id="type">`;
|
||||
entry += `<a href='#type:${String(value.TYPE)}'>`;
|
||||
if (value.TYPE == 'article')
|
||||
{
|
||||
entry += `<i class="far fa-newspaper"></i>`;
|
||||
}
|
||||
else if (value.TYPE == 'podcast')
|
||||
{
|
||||
entry += `<i class="fas fa-podcast"></i>`;
|
||||
}
|
||||
else if (value.TYPE == 'video')
|
||||
{
|
||||
entry += `<i class="fas fa-tv"></i>`;
|
||||
}
|
||||
else if (value.TYPE == 'list')
|
||||
{
|
||||
entry += `<i class="fas fa-file-alt"></i>`;
|
||||
}
|
||||
else if (value.TYPE == 'book')
|
||||
{
|
||||
entry += `<i class="fas fa-book-open"></i>`;
|
||||
}
|
||||
else if (value.TYPE == 'game')
|
||||
{
|
||||
entry += `<i class="fas fa-gamepad"></i>`;
|
||||
}
|
||||
else if (value.TYPE == 'service')
|
||||
{
|
||||
entry += `<i class="fas fa-server"></i>`;
|
||||
}
|
||||
else if (value.TYPE == 'lecture')
|
||||
{
|
||||
entry += `<i class="fas fa-chalkboard-teacher"></i>`;
|
||||
}
|
||||
else if (value.TYPE == 'quote')
|
||||
{
|
||||
entry += `<i class="fas fa-comment"></i>`;
|
||||
}
|
||||
else if (value.TYPE == 'tool')
|
||||
{
|
||||
entry += `<i class="fas fa-wrench"></i>`;
|
||||
}
|
||||
else if (value.TYPE == 'music')
|
||||
{
|
||||
entry += `<i class="fas fa-music"></i>`;
|
||||
}
|
||||
|
||||
entry += `</a>`;
|
||||
entry += `</div>`;
|
||||
}
|
||||
// TYPE
|
||||
if (typeof value.TYPE !== 'undefined')
|
||||
{
|
||||
entry += `<div id="type">`;
|
||||
entry += `<a href='#type:${String(value.TYPE)}'>`;
|
||||
if (value.TYPE == 'article')
|
||||
{
|
||||
entry += `<i class="far fa-newspaper"></i>`;
|
||||
}
|
||||
else if (value.TYPE == 'podcast')
|
||||
{
|
||||
entry += `<i class="fas fa-podcast"></i>`;
|
||||
}
|
||||
else if (value.TYPE == 'video')
|
||||
{
|
||||
entry += `<i class="fas fa-tv"></i>`;
|
||||
}
|
||||
else if (value.TYPE == 'list')
|
||||
{
|
||||
entry += `<i class="fas fa-file-alt"></i>`;
|
||||
}
|
||||
else if (value.TYPE == 'book')
|
||||
{
|
||||
entry += `<i class="fas fa-book-open"></i>`;
|
||||
}
|
||||
else if (value.TYPE == 'game')
|
||||
{
|
||||
entry += `<i class="fas fa-gamepad"></i>`;
|
||||
}
|
||||
else if (value.TYPE == 'service')
|
||||
{
|
||||
entry += `<i class="fas fa-server"></i>`;
|
||||
}
|
||||
else if (value.TYPE == 'lecture')
|
||||
{
|
||||
entry += `<i class="fas fa-chalkboard-teacher"></i>`;
|
||||
}
|
||||
else if (value.TYPE == 'quote')
|
||||
{
|
||||
entry += `<i class="fas fa-comment"></i>`;
|
||||
}
|
||||
else if (value.TYPE == 'tool')
|
||||
{
|
||||
entry += `<i class="fas fa-wrench"></i>`;
|
||||
}
|
||||
else if (value.TYPE == 'music')
|
||||
{
|
||||
entry += `<i class="fas fa-music"></i>`;
|
||||
}
|
||||
|
||||
entry += `</a>`;
|
||||
entry += `</div>`;
|
||||
}
|
||||
|
||||
// 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 += `<div class="tags"><i class="fas fa-tag textIcon"></i>`;
|
||||
for (var i = 0; i < value.TAGS.length; i++)
|
||||
{
|
||||
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>`;
|
||||
for (var i = 0; i < tags.length; i++)
|
||||
{
|
||||
entry += `<a href=#tag:${tags[i]}>${tags[i]}</a>`;
|
||||
if (i+1 != tags.length)
|
||||
{
|
||||
entry += `, `;
|
||||
}
|
||||
};
|
||||
entry += `</div>`;
|
||||
}
|
||||
|
||||
// QUOTE
|
||||
if (typeof value.QOTE !== 'undefined')
|
||||
{
|
||||
entry += `<div class="quote"><i class="fas fa-comment textIcon"></i>${value.QOTE}</div>`;
|
||||
}
|
||||
|
||||
// NOTE
|
||||
if (typeof value.NOTE !== 'undefined')
|
||||
{
|
||||
entry += `<div class="note"><i class="fas fa-sticky-note textIcon"></i>${value.NOTE}</div>`;
|
||||
}
|
||||
// TERM
|
||||
if (typeof value.TERM !== 'undefined')
|
||||
{
|
||||
entry += `<div class="term"><i class="fas fa-ribbon textIcon"></i>${value.TERM}</div>`;
|
||||
}
|
||||
|
||||
// QUOTE
|
||||
if (typeof value.QOTE !== 'undefined')
|
||||
{
|
||||
entry += `<div class="quote"><i class="fas fa-comment textIcon"></i>${value.QOTE}</div>`;
|
||||
}
|
||||
// PROGRESS
|
||||
if (typeof value.PROG !== 'undefined')
|
||||
{
|
||||
entry += `<div class="prog"><i class="fas fa-clock textIcon"></i>${value.PROG}</div>`;
|
||||
}
|
||||
|
||||
// TERM
|
||||
if (typeof value.TERM !== 'undefined')
|
||||
{
|
||||
entry += `<div class="term"><i class="fas fa-ribbon textIcon"></i>${value.TERM}</div>`;
|
||||
}
|
||||
entry += `</div>`;
|
||||
return entry;
|
||||
}
|
||||
|
||||
// PROGRESS
|
||||
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()
|
||||
{
|
||||
this.doPagination = function()
|
||||
{
|
||||
return `
|
||||
<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>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("hashchange", detectBackOrForward(
|
||||
function() { console.log("back"); main.load(); },
|
||||
function() { console.log("forward"); main.load(); }
|
||||
));
|
||||
Loading…
Reference in New Issue
Block a user