ayo/blog
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: reusable replies block

Browse source
This commit is contained in:
Ayo 2023-05-31 22:16:07 +02:00
parent fa70cc0d9c
commit c3bd95a40b
1 changed files with 47 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
assets/js/webmention-utils.mjs
View file

@ -3,8 +3,7 @@ export function renderMentions(mentions, className) {
mentions = mentions.filter((m) => m["wm-private"] !== true);
if (mentions.length)
webMentionsSection.innerHTML =
"<h2>Mentions Across the World Wide Web</h2>";
webMentionsSection.innerHTML = "<h2>From Across the Web:</h2>";
const heading = {
"like-of": "👍 {x} Likes",
@ -25,18 +24,24 @@ export function renderMentions(mentions, className) {
}
});
const replies = mentions.filter((m) => m["wm-property"] === "in-reply-to");
["in-reply-to"].forEach((type) => {
const replies = mentions.filter((m) => m["wm-property"] === type);
if (replies.length) {
// render on webmentions section
const repliesWrapper = createRepliesBlock(replies, heading[type]);
webMentionsSection.append(repliesWrapper);
}
});
}
function createRepliesBlock(replies, heading) {
const repliesWrapper = document.createElement("div");
const clearReplies = document.createElement("div");
clearReplies.style.clear = "both";
repliesWrapper.append(clearReplies);
const repliesHeader = document.createElement("h3");
repliesHeader.innerHTML = heading["in-reply-to"].replace(
"{x}",
replies.length
);
repliesHeader.innerHTML = heading.replace("{x}", replies.length);
repliesWrapper.append(repliesHeader);
const repliesTable = document.createElement("table");
@ -63,11 +68,10 @@ export function renderMentions(mentions, className) {
repliesTable.append(row);
});
repliesWrapper.append(repliesTable);
webMentionsSection.append(repliesWrapper);
}
return repliesWrapper;
}
function createAvatarBlock(mentions, heading) {
function createAvatarBlock(mentions, headingText) {
const clearDiv = document.createElement("div");
clearDiv.style.clear = "both";
@ -75,7 +79,7 @@ function createAvatarBlock(mentions, heading) {
avatarBlock.append(clearDiv);
const heading = document.createElement("h3");
heading.innerHTML = heading.replace("{x}", mentions.length);
heading.innerHTML = headingText.replace("{x}", mentions.length);
avatarBlock.append(heading);
const avatars = document.createElement("div");