mirror/mastodon-embed-timeline
1
0
Fork 1
mirror of https://gitlab.com/idotj/mastodon-embed-timeline.git synced 2025-05-24 08:52:46 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

solve Issue 21: implement toot status bar with replies, boosts and favs

Browse Source
This commit is contained in:
Markus Schlichting 2023-09-21 18:52:16 +00:00 committed by i.j
parent d00dfdf5fe
commit 8f9ae0fa58
2 changed files with 37 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
README.md
View File

@ -94,6 +94,15 @@ text_max_lines: "0",
// Customize the text of the link pointing to the Mastodon page (appears after the last toot) // Customize the text of the link pointing to the Mastodon page (appears after the last toot)
link_see_more: "See more posts at Mastodon", link_see_more: "See more posts at Mastodon",
//set the font icon for replies counter, e.g. (make sure to add FontAwesome to you page to make this sample work)
replies_count_icon: '<i class="fa fa-reply"></i>',
//set the font icon for boosts counter, e.g. (make sure to add FontAwesome to you page to make this sample work)
boosts_count_icon: '<i class="fa fa-retweet"></i>',
//set the font icon for favourites counter, e.g. (make sure to add FontAwesome to you page to make this sample work)
favourites_count_icon: '<i class="fa fa-star"></i>',
``` ```
### Tip ### Tip

28
src/mastodon-timeline.js
View File

@ -55,6 +55,15 @@ window.addEventListener("load", () => {
// Converts Markdown symbol ">" at the beginning of a paragraph into a blockquote HTML tag. Ddefault: don't apply // Converts Markdown symbol ">" at the beginning of a paragraph into a blockquote HTML tag. Ddefault: don't apply
markdown_blockquote: false, markdown_blockquote: false,
//set the font icon for replies counter
replies_count_icon: undefined,
//set the font icon for boosts counter
boosts_count_icon: undefined,
//set the font icon for favourites counter
favourites_count_icon: undefined,
// Limit the text content to a maximum number of lines. Default: 0 (unlimited) // Limit the text content to a maximum number of lines. Default: 0 (unlimited)
text_max_lines: "0", text_max_lines: "0",
@ -100,6 +109,10 @@ const MastodonApi = function (params_) {
this.LINK_SEE_MORE = params_.link_see_more; this.LINK_SEE_MORE = params_.link_see_more;
this.FETCHED_DATA = {}; this.FETCHED_DATA = {};
this.REPLIES_COUNT_ICON = params_.replies_count_icon || '[Replies]';
this.BOOSTS_COUNT_ICON = params_.boosts_count_icon || '[Boost]';
this.FAVOURITES_COUNT_ICON = params_.favourites_count_icon || '[Favourite]';
this.mtBodyContainer = document.getElementById(this.CONTAINER_BODY_ID); this.mtBodyContainer = document.getElementById(this.CONTAINER_BODY_ID);
this.buildTimeline(); this.buildTimeline();
@ -531,6 +544,20 @@ MastodonApi.prototype.assambleToot = function (c, i) {
"</a>" + "</a>" +
"</div>"; "</div>";
// stats (boosts + favourites counts) >>>
// data
var repliesCountIcon = '<span class="toot-status-replies">' + this.REPLIES_COUNT_ICON +": "+ c.replies_count + ' </span>';
var boostsCountIcon = '<span class="toot-status-boosts">' + this.BOOSTS_COUNT_ICON +": "+ c.reblogs_count + ' </span>';
var favouritesCountIcon = '<span class="toot-status-favourites">' + this.FAVOURITES_COUNT_ICON +": "+ c.favourites_count + ' </span>';
// html nodes
var statusBar = '<div class="toot-status">' +
repliesCountIcon +
boostsCountIcon +
favouritesCountIcon +
'</div>';
// Add all to main toot container // Add all to main toot container
const toot = const toot =
'<article class="mt-toot" aria-posinset="' + '<article class="mt-toot" aria-posinset="' +
@ -547,6 +574,7 @@ MastodonApi.prototype.assambleToot = function (c, i) {
preview_link + preview_link +
poll + poll +
timestamp + timestamp +
statusBar +
"</article>"; "</article>";
return toot; return toot;