Add counter stats

CHANGELOG

@@ -1,3 +1,6 @@
+v3.9.4 - 21/09/2023
+- Add replies, reblog (boosts) and favourites counter
+
 v3.9.1 - 06/09/2023
 - Fix bug with Markdown-Blockquote function
 

README.md

@@ -92,17 +92,11 @@ markdown_blockquote: false,
 // Limit the text content to a maximum number of lines. Default: 0 (unlimited)
 text_max_lines: "0",
 
+// Hide replies, boosts and favourites toots counter. Default: don't hide
+hide_counter_bar: false,
+
 // Customize the text of the link pointing to the Mastodon page (appears after the last toot)
 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

src/mastodon-timeline.css

@@ -1,4 +1,4 @@
-/* Mastodon embed feed timeline v3.9.1 */
+/* Mastodon embed feed timeline v3.9.4 */
 /* More info at: */
 /* https://gitlab.com/idotj/mastodon-embed-feed-timeline */
 
@@ -93,7 +93,7 @@ html[data-theme="dark"] {
   margin-bottom: 0;
 }
 
-/* User avatar and name */
+/* User avatar */
 .mt-avatar {
   width: 3rem;
   height: 3rem;
@@ -122,18 +122,29 @@ html[data-theme="dark"] {
   border-radius: 0.25rem;
   overflow: hidden;
 }
-.mt-user {
+
-  display: table;
+/* User name and date */
-  font-weight: 600;
+.mt-toot-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   margin-bottom: 1rem;
 }
+.mt-user {
+  font-weight: 600;
+  padding-right: 1rem;
+}
 .mt-user > a {
   color: var(--content-text) !important;
 }
+.toot-date {
+  font-size: 0.75rem;
+  text-align: right;
+}
 
 /* Text */
 .toot-text {
-  margin-bottom: 0.25rem;
+  margin-bottom: 1rem;
   color: var(--content-text);
 }
 .toot-text .spoiler-link {
@@ -163,7 +174,6 @@ html[data-theme="dark"] {
   width: auto;
 }
 
-
 /* Poll */
 .toot-poll {
   margin-bottom: 0.25rem;
@@ -189,7 +199,7 @@ html[data-theme="dark"] {
 /* Medias */
 .toot-media {
   overflow: hidden;
-  margin-bottom: 0.5rem;
+  margin-bottom: 1rem;
 }
 .toot-media-preview {
   position: relative;
@@ -241,7 +251,7 @@ html[data-theme="dark"] {
   border-radius: 0.5rem;
   color: var(--link-color);
   font-size: 0.8rem;
-  margin: 1rem 0 0.5rem 0;
+  margin: 1rem 0;
   overflow: hidden;
 }
 .toot-preview-image {
@@ -287,9 +297,28 @@ html[data-theme="dark"] {
   vertical-align: top;
 }
 
-/* Date */
+/* Counter bar */
-.toot-date {
+.mt-counter-bar {
+  display: flex;
+  gap: clamp(0.25rem, 1vw, 1.5rem);
+  color: var(--link-color);
+}
+
+.mt-counter-replies,
+.mt-counter-reblog,
+.mt-counter-favorites {
+  display: flex;
   font-size: 0.75rem;
+  gap: 0.25rem;
+  align-items: center;
+  opacity: 0.5;
+}
+
+.mt-counter-replies > svg,
+.mt-counter-reblog > svg,
+.mt-counter-favorites > svg {
+  width: 1rem;
+  fill: var(--link-color);
 }
 
 /* Error */

src/mastodon-timeline.js

@@ -1,5 +1,5 @@
 /**
- * Mastodon embed feed timeline v3.9.1
+ * Mastodon embed feed timeline v3.9.4
  * More info at:
  * https://gitlab.com/idotj/mastodon-embed-feed-timeline
  */
@@ -55,14 +55,8 @@ window.addEventListener("load", () => {
     // Converts Markdown symbol ">" at the beginning of a paragraph into a blockquote HTML tag. Ddefault: don't apply
     markdown_blockquote: false,
 
-    //set the font icon for replies counter
+    // Hide replies, boosts and favourites toots counter. Default: don't hide
-    replies_count_icon: undefined,
+    hide_counter_bar: false,
-
-    //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)
     text_max_lines: "0",
@@ -105,14 +99,12 @@ const MastodonApi = function (params_) {
     typeof params_.markdown_blockquote !== "undefined"
       ? params_.markdown_blockquote
       : false;
+  this.HIDE_COUNTER_BAR =
+    params_.hide_counter_bar !== "undefined" ? params_.hide_counter_bar : false;
   this.TEXT_MAX_LINES = params_.text_max_lines || "0";
   this.LINK_SEE_MORE = params_.link_see_more;
   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.buildTimeline();
@@ -192,7 +184,7 @@ MastodonApi.prototype.buildTimeline = async function () {
     // Check if toot cointainer was clicked
     if (
       e.target.localName == "article" ||
-      e.target.offsetParent.localName == "article" ||
+      e.target.offsetParent?.localName == "article" ||
       (e.target.localName == "img" &&
         e.target.offsetParent.className !== "mt-avatar" &&
         e.target.offsetParent.className !== "mt-avatar-account")
@@ -367,7 +359,7 @@ MastodonApi.prototype.appendToot = function (c, i) {
  * @param {number} i Index of toot
  */
 MastodonApi.prototype.assambleToot = function (c, i) {
-  let avatar, user, content, url, date;
+  let avatar, user, url, date;
 
   if (c.reblog) {
     // BOOSTED toot
@@ -446,6 +438,16 @@ MastodonApi.prototype.assambleToot = function (c, i) {
     date = this.formatDate(c.created_at);
   }
 
+  // Date
+  let timestamp =
+    '<div class="toot-date">' +
+    '<a href="' +
+    url +
+    '" rel="nofollow noopener noreferrer" tabindex="-1" target="_blank">' +
+    date +
+    "</a>" +
+    "</div>";
+
   // Main text
   let text_css = "";
   if (this.TEXT_MAX_LINES !== "0") {
@@ -456,6 +458,7 @@ MastodonApi.prototype.assambleToot = function (c, i) {
     );
   }
 
+  let content = "";
   if (c.spoiler_text !== "") {
     content =
       '<div class="toot-text">' +
@@ -534,32 +537,37 @@ MastodonApi.prototype.assambleToot = function (c, i) {
     poll = '<div class="toot-poll">' + "<ul>" + pollOption + "</ul>" + "</div>";
   }
 
-  // Date
+  // Counter bar
-  const timestamp =
+  let counterBar = "";
-    '<div class="toot-date">' +
+  if (!this.HIDE_COUNTER_BAR) {
-    '<a href="' +
+    let repliesCount =
-    url +
+      '<div class="mt-counter-replies">' +
-    '" rel="nofollow noopener noreferrer" tabindex="-1" target="_blank">' +
+      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1792 1600" aria-hidden="true"><path d="M1792 1056q0 166-127 451q-3 7-10.5 24t-13.5 30t-13 22q-12 17-28 17q-15 0-23.5-10t-8.5-25q0-9 2.5-26.5t2.5-23.5q5-68 5-123q0-101-17.5-181t-48.5-138.5t-80-101t-105.5-69.5t-133-42.5t-154-21.5t-175.5-6H640v256q0 26-19 45t-45 19t-45-19L19 621Q0 602 0 576t19-45L531 19q19-19 45-19t45 19t19 45v256h224q713 0 875 403q53 134 53 333z"/></svg>' +
-    date +
+      c.replies_count +
-    "</a>" +
       "</div>";
 
-  // stats (boosts + favourites counts) >>>
+    let reblogCount =
-		// data
+      '<div class="mt-counter-reblog">' +
-		var repliesCountIcon     = '<span class="toot-status-replies">'   + this.REPLIES_COUNT_ICON    +": "+ c.replies_count    + ' </span>';
+      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1280" aria-hidden="true"><path d="M1280 1248q0 13-9.5 22.5t-22.5 9.5H288q-8 0-13.5-2t-9-7t-5.5-8t-3-11.5t-1-11.5V640H64q-26 0-45-19T0 576q0-24 15-41l320-384q19-22 49-22t49 22l320 384q15 17 15 41q0 26-19 45t-45 19H512v384h576q16 0 25 11l160 192q7 10 7 21zm640-416q0 24-15 41l-320 384q-20 23-49 23t-49-23l-320-384q-15-17-15-41q0-26 19-45t45-19h192V384H832q-16 0-25-12L647 180q-7-9-7-20q0-13 9.5-22.5T672 128h960q8 0 13.5 2t9 7t5.5 8t3 11.5t1 11.5v600h192q26 0 45 19t19 45z"/></svg>' +
-    var boostsCountIcon     = '<span class="toot-status-boosts">'     + this.BOOSTS_COUNT_ICON     +": "+ c.reblogs_count    + ' </span>';
+      c.reblogs_count +
-		var favouritesCountIcon = '<span class="toot-status-favourites">' + this.FAVOURITES_COUNT_ICON +": "+ c.favourites_count + ' </span>';
+      "</div>";
 
-		// html nodes
+    let favoritesCount =
-		var statusBar = '<div class="toot-status">' +
+      '<div class="mt-counter-favorites">' +
-      repliesCountIcon +
+      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1664 1600" aria-hidden="true"><path d="M1664 615q0 22-26 48l-363 354l86 500q1 7 1 20q0 21-10.5 35.5T1321 1587q-19 0-40-12l-449-236l-449 236q-22 12-40 12q-21 0-31.5-14.5T301 1537q0-6 2-20l86-500L25 663Q0 636 0 615q0-37 56-46l502-73L783 41q19-41 49-41t49 41l225 455l502 73q56 9 56 46z"/></svg>' +
-			boostsCountIcon +
+      c.favourites_count +
-			favouritesCountIcon +
+      "</div>";
-			'</div>';
 
+    counterBar =
+      '<div class="mt-counter-bar">' +
+      repliesCount +
+      reblogCount +
+      favoritesCount +
+      "</div>";
+  }
 
   // Add all to main toot container
-  const toot =
+  let toot =
     '<article class="mt-toot" aria-posinset="' +
     (i + 1) +
     '" aria-setsize="' +
@@ -568,13 +576,15 @@ MastodonApi.prototype.assambleToot = function (c, i) {
     url +
     '" tabindex="0">' +
     avatar +
+    '<div class="mt-toot-header">' +
     user +
+    timestamp +
+    "</div>" +
     content +
     media +
     preview_link +
     poll +
-    timestamp +
+    counterBar +
-    statusBar +
     "</article>";
 
   return toot;