mirror of
https://gitlab.com/idotj/mastodon-embed-timeline.git
synced 2025-05-24 08:52:46 +00:00
Add counter stats
This commit is contained in:
idotj
parent
113c2a1a9b
commit
fdf15d60c9
@ -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
|
||||
|
||||
|
||||
12
README.md
12
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
|
||||
|
||||
@ -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;
|
||||
font-weight: 600;
|
||||
|
||||
/* User name and date */
|
||||
.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 */
|
||||
.toot-date {
|
||||
/* Counter bar */
|
||||
.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 */
|
||||
|
||||
@ -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
|
||||
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,
|
||||
// Hide replies, boosts and favourites toots counter. Default: don't hide
|
||||
hide_counter_bar: false,
|
||||
|
||||
// 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
|
||||
const timestamp =
|
||||
'<div class="toot-date">' +
|
||||
'<a href="' +
|
||||
url +
|
||||
'" rel="nofollow noopener noreferrer" tabindex="-1" target="_blank">' +
|
||||
date +
|
||||
"</a>" +
|
||||
// Counter bar
|
||||
let counterBar = "";
|
||||
if (!this.HIDE_COUNTER_BAR) {
|
||||
let repliesCount =
|
||||
'<div class="mt-counter-replies">' +
|
||||
'<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>' +
|
||||
c.replies_count +
|
||||
"</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>';
|
||||
let reblogCount =
|
||||
'<div class="mt-counter-reblog">' +
|
||||
'<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>' +
|
||||
c.reblogs_count +
|
||||
"</div>";
|
||||
|
||||
// html nodes
|
||||
var statusBar = '<div class="toot-status">' +
|
||||
repliesCountIcon +
|
||||
boostsCountIcon +
|
||||
favouritesCountIcon +
|
||||
'</div>';
|
||||
let favoritesCount =
|
||||
'<div class="mt-counter-favorites">' +
|
||||
'<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>' +
|
||||
c.favourites_count +
|
||||
"</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 +
|
||||
statusBar +
|
||||
counterBar +
|
||||
"</article>";
|
||||
|
||||
return toot;
|
||||
|
||||
2
src/mastodon-timeline.min.css
vendored
2
src/mastodon-timeline.min.css
vendored
File diff suppressed because one or more lines are too long
2
src/mastodon-timeline.min.js
vendored
2
src/mastodon-timeline.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user