2022-02-11 14:04:23 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
2022-02-12 18:49:42 +01:00
|
|
|
<title>TootKomm</title>
|
2022-02-11 14:04:23 +01:00
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<header>
|
|
|
|
|
|
|
|
|
|
</header>
|
|
|
|
|
|
2022-02-12 18:49:42 +01:00
|
|
|
<main id="comments">
|
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
|
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
2022-02-15 00:59:23 +01:00
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;600&display=swap" rel="stylesheet">
|
|
|
|
|
<link rel="stylesheet" href="fontawesome/css/all.css">
|
|
|
|
|
<link rel="stylesheet" href="style.css?v=1.11">
|
|
|
|
|
|
2022-02-12 18:49:42 +01:00
|
|
|
|
|
|
|
|
</main>
|
|
|
|
|
|
|
|
|
|
<footer>
|
|
|
|
|
|
|
|
|
|
</footer>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
function buildCommentTree(statusID){
|
|
|
|
|
const target = document.querySelector('#comments');
|
|
|
|
|
buildArticle(target, statusID);
|
|
|
|
|
buildDescendants(target, statusID);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function getJSONObject(url){
|
|
|
|
|
const requestURL = url;
|
|
|
|
|
const request = new Request(requestURL);
|
|
|
|
|
const response = await fetch(request);
|
|
|
|
|
return await response.json();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
async function buildArticle(target, statusID) {
|
|
|
|
|
const url = buildStatusURL(statusID);
|
|
|
|
|
const mastopost = await getJSONObject(url);
|
2022-02-15 00:59:23 +01:00
|
|
|
const link = document.createElement('a');
|
|
|
|
|
link.href = mastopost.url;
|
2022-02-12 18:49:42 +01:00
|
|
|
const article = document.createElement('article');
|
|
|
|
|
|
|
|
|
|
populateHeader(article, mastopost);
|
|
|
|
|
populateSection(article, mastopost);
|
|
|
|
|
populateAside(article, mastopost);
|
|
|
|
|
populateFooter(article, mastopost);
|
|
|
|
|
|
2022-02-15 00:59:23 +01:00
|
|
|
target.appendChild(link).appendChild(article);
|
2022-02-12 18:49:42 +01:00
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function buildDescendants(target, statusID){
|
|
|
|
|
const url = buildStatusURL(statusID);
|
|
|
|
|
const contextURL = url+'/context';
|
|
|
|
|
const context = await getJSONObject(contextURL);
|
2022-02-15 00:59:23 +01:00
|
|
|
const sorted_descendants = context.descendants.sort(
|
|
|
|
|
function (a, b) {
|
|
|
|
|
return a.created_at - b.created_at;
|
|
|
|
|
});
|
2022-02-12 18:49:42 +01:00
|
|
|
|
2022-02-15 00:59:23 +01:00
|
|
|
for (const descendant of sorted_descendants) {
|
2022-02-12 18:49:42 +01:00
|
|
|
buildArticle(target, descendant.id);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function populateHeader(item, obj) {
|
|
|
|
|
|
|
|
|
|
const myHeader = document.createElement('header');
|
|
|
|
|
const myCW = document.createElement('summary');
|
2022-02-15 00:59:23 +01:00
|
|
|
const myDateTime = document.createElement('time');
|
|
|
|
|
|
|
|
|
|
myDateTime.datetime = obj.created_at;
|
|
|
|
|
creation_date = new Date(obj.created_at);
|
|
|
|
|
myDateTime.textContent = creation_date.toLocaleString();
|
2022-02-12 18:49:42 +01:00
|
|
|
myCW.textContent = obj.spoiler_text;
|
|
|
|
|
myHeader.appendChild(myCW);
|
2022-02-15 00:59:23 +01:00
|
|
|
myHeader.appendChild(myDateTime);
|
2022-02-12 18:49:42 +01:00
|
|
|
item.appendChild(myHeader);
|
|
|
|
|
|
2022-02-11 14:04:23 +01:00
|
|
|
}
|
|
|
|
|
|
2022-02-12 18:49:42 +01:00
|
|
|
function populateSection(item, obj){
|
|
|
|
|
const mySection = document.createElement('section');
|
|
|
|
|
mySection.innerHTML = `${obj['content']}`;
|
|
|
|
|
item.appendChild(mySection);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function populateAside(item, obj){
|
|
|
|
|
const aside = document.createElement('aside');
|
|
|
|
|
const myImg = document.createElement('img');
|
|
|
|
|
myImg.src = obj['account']['avatar'];
|
2022-02-15 00:59:23 +01:00
|
|
|
myDate = new Date(obj.account['created_at']);
|
|
|
|
|
|
2022-02-12 18:49:42 +01:00
|
|
|
aside.appendChild(myImg);
|
|
|
|
|
const myP = document.createElement('hgroup');
|
2022-02-15 00:59:23 +01:00
|
|
|
myP.innerHTML = `<h1>${obj.account['display_name']}</h1> <h2>(<a href="${obj.account.url}">${obj.account['username']}</a>)</h2><div class="fa-regular fa-clock"></div> <time datetime="${obj.account['created_at']}">${myDate.toLocaleDateString()}</time>`;
|
2022-02-12 18:49:42 +01:00
|
|
|
aside.appendChild(myP);
|
|
|
|
|
item.appendChild(aside);
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function populateFooter(item, obj){
|
|
|
|
|
const footer = document.createElement('footer');
|
2022-02-15 00:59:23 +01:00
|
|
|
const stats = document.createElement('ul');
|
|
|
|
|
stats.innerHTML = `<li class="replies fa-solid fa-retweet">${obj.replies_count}</li><li class="favs fa-solid fa-star">${obj.favourites_count}</li><li class="boosts fa-solid fa-share">${obj.reblogs_count}</li>`;
|
2022-02-12 18:49:42 +01:00
|
|
|
footer.appendChild(stats);
|
|
|
|
|
item.appendChild(footer);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function buildStatusURL(statusID) {
|
|
|
|
|
const apiURL = 'https://social.tchncs.de/api/v1/statuses/';
|
|
|
|
|
return apiURL + statusID;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
buildCommentTree("107735248507147283");
|
2022-02-11 14:04:23 +01:00
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
