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