116 lines
3.2 KiB
HTML
116 lines
3.2 KiB
HTML
<!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>
|