<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TootKomm</title>
</head>
<body>
<header>
</header>
<main id="comments">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</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);
const article = document.createElement('article');
populateHeader(article, mastopost);
populateSection(article, mastopost);
populateAside(article, mastopost);
populateFooter(article, mastopost);
target.appendChild(article);
}
async function buildDescendants(target, statusID){
const url = buildStatusURL(statusID);
const contextURL = url+'/context';
const context = await getJSONObject(contextURL);
for (const descendant of context.descendants.sort( function (a, b) { return a.id - b.id; })) {
buildArticle(target, descendant.id);
}
}
function populateHeader(item, obj) {
const myHeader = document.createElement('header');
const myCW = document.createElement('summary');
myCW.textContent = obj.spoiler_text;
myHeader.appendChild(myCW);
item.appendChild(myHeader);
}
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'];
aside.appendChild(myImg);
const myP = document.createElement('hgroup');
myP.innerHTML = `<h1>${obj.account['display_name']}</h1> <h2>(<a href="${obj.account.url}">${obj.account['username']}</a>)</h2>`;
aside.appendChild(myP);
item.appendChild(aside);
}
function populateFooter(item, obj){
const footer = document.createElement('footer');
const stats = document.createElement('dl');
stats.innerHTML = `<dt class="replies-icon"></dt><dd class="replies">${obj.replies_count}</dd><dt class="favs-icon"></dt><dd class="favs">${obj.favourites_count}</dd><dt class="boosts-icon"></dt><dd class="boosts">${obj.reblogs_count}</dd>`;
footer.appendChild(stats);
item.appendChild(footer);
}
function buildStatusURL(statusID) {
const apiURL = 'https://social.tchncs.de/api/v1/statuses/';
return apiURL + statusID;
}
buildCommentTree("107735248507147283");
</script>
</body>
</html>