Wellwisher It's a cool idea.
I'm still struggling to understand much about JavaScript, but below is what I've currently managed to come up with after a couple of hours trying to test some codes that might achieve the basic concept. I'm sure it can't be too difficult, I just don't know enough yet.
There's two codes here.
#1 is a bit of (questionable) Java for the Custom Footer.
<script>
document.addEventListener('DOMContentLoaded', () => {
app.initializers.add('custom/flarum-discussion-count', () => {
// Override the view method of TagLinkButton to include discussion count
override(TagLinkButton.prototype, 'view', function () {
const tag = this.attrs.model; // Get the current tag model
const description = tag && tag.description(); // Get the tag description if it exists
const className = classList(['TagLinkButton', 'hasIcon', this.attrs.className, tag.isChild() && 'child']); // Create a class list for the button
return m(Link, { className: className, href: this.attrs.route, style: tag ? { '--color': tag.color() } : '', title: description || '' }, [
tagIcon(tag, { className: 'Button-icon' }), // Render the tag icon
m("span.Button-label", tag ? `${tag.name()} (${tag.discussionCount() || 0})` : app.translator.trans('flarum-tags.forum.index.untagged_link')) // Display tag name with discussion count
]);
});
// Extend the TagsPage to update discussion counts on creation
extend(TagsPage.prototype, 'oncreate', function () {
const tags = this.tags; // Get the list of tags
setTimeout(() => { // Delay the execution to ensure DOM is ready
const tagsItem = document.querySelectorAll('.TagTile-info'); // Select all tag tile info elements
tagsItem.forEach(function (item) {
const tagName = item.querySelector('.TagTile-name').innerText; // Get the tag name from the item
const tag = tags.find((tag) => tag.name() === tagName); // Find the corresponding tag object
if (tag) { // Check if the tag is defined
const discussionCount = tag.discussionCount(); // Get the discussion count for the tag
// Update the tag name with the discussion count
item.querySelector('.TagTile-name').innerText += ` (${discussionCount || 0})`; // Append the discussion count to the tag name
}
});
}, 100); // Adjust the timeout duration as necessary
});
});
});
</script>
#2 is just custom CSS.
// <=T=A=G=S====D=I=S=C=U=S=S=I=O=N====C=O=U=N=T=S=>
.TagTile-name {
display: inline; /*SET DISPLAY*/
margin-right: 5px; /*SET MARGIN*/
}
.TagTile-name::after {
display: inline-block; /*SET DISPLAY*/
margin-left: 5px; /*SET MARGIN*/
font-weight: 900; /*SET FONT WEIGHT*/
font-family: "Font Awesome 6 Pro"; /*SET FA VERSION*/
content: "\f4a6"; /*SET FA ICON*/
}
Right now only the CSS FA icon seems to partially work, and only on the Tags Page Tiles.
