Add feature (hide unlisted toots) + Message shown if no toots

This commit is contained in:
idotj 2023-05-08 14:05:47 +02:00
parent 34ebc56e46
commit 95aa0dbbb5
7 changed files with 521 additions and 376 deletions

View File

@ -1,3 +1,7 @@
v3.5.1 - 08/05/2023
- Add feature, hide unlisted toots
- Add message if no toots are shown due to filters applied
v3.4.2 - 22/04/2023
- Add support for hashtag timeline
- Fix query url when showing local instance toots

View File

@ -12,32 +12,32 @@ Source code running at:
## 🗂️ User guide
Just copy both files (*mastodon-timeline.css* and *mastodon-timeline.js* from /src folder) in your project folder.
Just copy both files (_mastodon-timeline.css_ and _mastodon-timeline.js_ from /src folder) in your project folder.
Now call each one in your page using the `<link>` and `<script>` tag:
```html
<link rel="stylesheet" href="mastodon-timeline.css">
<link rel="stylesheet" href="mastodon-timeline.css" />
```
```html
<script src='mastodon-timeline.js'></script>
<script src="mastodon-timeline.js"></script>
```
Then copy the following html structure:
```html
<div class="mt-timeline">
<div id="mt-body" class="mt-body" role="feed">
<div class="loading-spinner"></div>
</div>
<div id="mt-body" class="mt-body" role="feed">
<div class="loading-spinner"></div>
</div>
</div>
```
Great, you have a Mastodon timeline running in your page.
The next step will be to setup the timeline.
Edit the the JS file *mastodon-timeline.js* and at the beginning find these two lines:
Edit the the JS file _mastodon-timeline.js_ and at the beginning find these two lines:
```javascript
instance_url: 'Your Mastodon instance',
@ -62,24 +62,26 @@ If you prefer to show a timeline with a specific hashtag then change the `timeli
Also you have some parameters to customize your embed timeline:
```javascript
// Preferred color theme 'light' or 'dark' (default: auto)
default_theme: 'auto'
// Preferred color theme 'light' or 'dark' (default: auto)
default_theme: "auto";
// Maximum amount of toots to get (default: 20)
toots_limit: '20'
// Maximum amount of toots to get (default: 20)
toots_limit: "20";
// Hide boosted toots (default: don't hide)
hide_reblog: false
// Hide unlisted toots (default: don't hide)
hide_unlisted: false;
// Hide replies toots (default: don't hide)
hide_replies: false
// Hide boosted toots (default: don't hide)
hide_reblog: false;
// Limit the text content to a maximum number of lines (default: unlimited)
text_max_lines: '0'
// Hide replies toots (default: don't hide)
hide_replies: false;
// Customize the text of the link pointing to the Mastodon page (appears after the last toot)
btn_see_more: 'See more posts at Mastodon'
// Limit the text content to a maximum number of lines (default: unlimited)
text_max_lines: "0";
// Customize the text of the link pointing to the Mastodon page (appears after the last toot)
btn_see_more: "See more posts at Mastodon";
```
### Tip
@ -87,12 +89,12 @@ Also you have some parameters to customize your embed timeline:
If you don't know your `user_id`, you have two ways to get it:
- Right click on your avatar image and inspect the element.
You will see in your html code a line like this one:
`<img src="https://files.xxxxxxxx.xx/accounts/avatars/000/180/745/original/xxxxxxxxxx.png" alt="xxxx">`
Check the `src=""` url, your user id is between `/accounts/avatars/` and `/original/`. So removing the slashs `/` you will get your user id, like in the example: `000180745`
You will see in your html code a line like this one:
`<img src="https://files.xxxxxxxx.xx/accounts/avatars/000/180/745/original/xxxxxxxxxx.png" alt="xxxx">`
Check the `src=""` url, your user id is between `/accounts/avatars/` and `/original/`. So removing the slashs `/` you will get your user id, like in the example: `000180745`
- Other option, just copy your profile name and instance uri here:
<a href="https://prouser123.me/mastodon-userid-lookup/" target="_blank" rel="noopener">https://prouser123.me/mastodon-userid-lookup/</a>
<a href="https://prouser123.me/mastodon-userid-lookup/" target="_blank" rel="noopener">https://prouser123.me/mastodon-userid-lookup/</a>
## 🚀 Improve me

View File

@ -1,51 +1,48 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en" data-theme="">
<head>
<meta charset="utf-8" />
<title>Mastodon embed timeline</title>
<meta name="author" content="i.j" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="mastodon, embed timeline" />
<meta name="description" content="Mastodon embed timeline" />
<link rel="stylesheet" href="mastodon-timeline.css" />
<style>
* {
margin: 0;
padding: 0;
}
<head>
<meta charset="utf-8">
<title>Mastodon embed timeline</title>
<meta name="author" content="i.j">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="mastodon, embed timeline" />
<meta name="description" content="Mastodon embed timeline" />
<link rel="stylesheet" href="mastodon-timeline.css">
<style>
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
html {
height: 100%
}
body {
height: 100%;
background: lightslategray;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
body {
height: 100%;
background: lightslategray;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
.dummy-container {
width: 100%;
max-width: 26rem;
height: calc(100% - 4rem);
margin: 2rem auto;
}
</style>
</head>
.dummy-container {
width: 100%;
max-width: 26rem;
height: calc(100% - 4rem);
margin: 2rem auto;
}
</style>
</head>
<body>
<div class="dummy-container">
<div class="mt-timeline">
<div id="mt-body" class="mt-body" role="feed">
<div class="loading-spinner"></div>
</div>
</div>
</div>
<script src='mastodon-timeline.js'>
</script>
</body>
<body>
<div class="dummy-container">
<div class="mt-timeline">
<div id="mt-body" class="mt-body" role="feed">
<div class="loading-spinner"></div>
</div>
</div>
</div>
<script src="mastodon-timeline.js"></script>
</body>
</html>

View File

@ -1,4 +1,4 @@
/* Mastodon embed feed timeline v3.4.2 */
/* Mastodon embed feed timeline v3.5.1 */
/* More info at: */
/* https://gitlab.com/idotj/mastodon-embed-feed-timeline */
@ -170,6 +170,13 @@ html[data-theme="dark"] {
text-align: center;
}
.mt-error-icon {
font-size: 2rem;
}
.mt-error-message {
padding: 1rem 0;
}
/* Poll */
.toot-poll {
margin-bottom: 0.25rem;

View File

@ -1,372 +1,507 @@
// Mastodon embed feed timeline v3.4.2
// Mastodon embed feed timeline v3.5.1
// More info at:
// https://gitlab.com/idotj/mastodon-embed-feed-timeline
// Timeline settings
document.addEventListener("DOMContentLoaded", () => {
let mapi = new MastodonApi({
// Id of the <div> containing the timeline.
container_body_id: 'mt-body',
let mapi = new MastodonApi({
// Id of the <div> containing the timeline.
container_body_id: "mt-body",
// Preferred color theme: 'light', 'dark' or 'auto' (default: auto).
default_theme: 'auto',
// Preferred color theme: 'light', 'dark' or 'auto' (default: auto).
default_theme: "auto",
// Your Mastodon instance.
instance_url: 'https://mastodon.online',
// Your Mastodon instance.
instance_url: "https://mastodon.online",
// Choose type of toots to show in the timeline: 'local', 'profile', 'hashtag' (default: local).
timeline_type: 'local',
// Choose type of toots to show in the timeline: 'local', 'profile', 'hashtag' (default: local).
timeline_type: "local",
// Your user ID on Mastodon instance. Leave empty if you didn't choose 'profile' as type of timeline.
user_id: '',
// Your user ID on Mastodon instance. Leave empty if you didn't choose 'profile' as type of timeline.
user_id: "",
// Your user name on Mastodon instance. Leave empty if you didn't choose 'profile' as type of timeline.
profile_name: '',
// Your user name on Mastodon instance. Leave empty if you didn't choose 'profile' as type of timeline.
profile_name: "",
// The name of the hashtag. Leave empty if you didn't choose 'hashtag' as type of timeline.
hashtag_name: '',
// The name of the hashtag. Leave empty if you didn't choose 'hashtag' as type of timeline.
hashtag_name: "",
// Maximum amount of toots to get (default: 20).
toots_limit: '20',
// Maximum amount of toots to get (default: 20).
toots_limit: "20",
// Hide boosted toots (default: don't hide).
hide_reblog: false,
// Hide unlisted toots (default: don't hide).
hide_unlisted: false,
// Hide replies toots (default: don't hide).
hide_replies: false,
// Hide boosted toots (default: don't hide).
hide_reblog: false,
// Limit the text content to a maximum number of lines (default: unlimited).
text_max_lines: '0',
// Hide replies toots (default: don't hide).
hide_replies: 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'
});
// Limit the text content to a maximum number of lines (default: unlimited).
text_max_lines: "0",
// Customize the text of the link pointing to the Mastodon page (appears after the last toot).
link_see_more: "See more posts at Mastodon",
});
});
let MastodonApi = function (params_) {
// Endpoint access settings / default values
this.DEFAULT_THEME = params_.default_theme || 'auto';
this.INSTANCE_URL = params_.instance_url;
this.USER_ID = params_.user_id || '';
this.PROFILE_NAME = this.USER_ID ? params_.profile_name : '';
this.TIMELINE_TYPE = params_.timeline_type || 'local';
this.HASHTAG_NAME = params_.hashtag_name || '';
this.TOOTS_LIMIT = params_.toots_limit || '20';
this.HIDE_REBLOG = typeof params_.hide_reblog !== 'undefined' ? params_.hide_reblog : false;
this.HIDE_REPLIES = typeof params_.hide_replies !== 'undefined' ? params_.hide_replies : false;
this.TEXT_MAX_LINES = params_.text_max_lines || '0';
this.LINK_SEE_MORE = params_.link_see_more;
// Endpoint access settings / default values
this.DEFAULT_THEME = params_.default_theme || "auto";
this.INSTANCE_URL = params_.instance_url;
this.USER_ID = params_.user_id || "";
this.PROFILE_NAME = this.USER_ID ? params_.profile_name : "";
this.TIMELINE_TYPE = params_.timeline_type || "local";
this.HASHTAG_NAME = params_.hashtag_name || "";
this.TOOTS_LIMIT = params_.toots_limit || "20";
this.HIDE_UNLISTED =
typeof params_.hide_unlisted !== "undefined"
? params_.hide_unlisted
: false;
this.HIDE_REBLOG =
typeof params_.hide_reblog !== "undefined" ? params_.hide_reblog : false;
this.HIDE_REPLIES =
typeof params_.hide_replies !== "undefined" ? params_.hide_replies : false;
this.TEXT_MAX_LINES = params_.text_max_lines || "0";
this.LINK_SEE_MORE = params_.link_see_more;
// Target selector
this.mtBodyContainer = document.getElementById(params_.container_body_id);
// Target selector
this.mtBodyContainer = document.getElementById(params_.container_body_id);
// Apply selected appearance
this.applyTheme();
// Apply selected appearance
this.applyTheme();
// Get the toots
this.getToots();
}
// Get the toots
this.getToots();
};
// Theme style
MastodonApi.prototype.applyTheme = function () {
const setTheme = function (theme) {
document.documentElement.setAttribute('data-theme', theme);
}
if (this.DEFAULT_THEME === 'auto') {
let systemTheme = window.matchMedia('(prefers-color-scheme: dark)');
systemTheme.matches ? setTheme('dark') : setTheme('light');
systemTheme.addEventListener('change', event => {
event.matches ? setTheme('dark') : setTheme('light');
});
} else {
setTheme(this.DEFAULT_THEME);
}
}
const setTheme = function (theme) {
document.documentElement.setAttribute("data-theme", theme);
};
if (this.DEFAULT_THEME === "auto") {
let systemTheme = window.matchMedia("(prefers-color-scheme: dark)");
systemTheme.matches ? setTheme("dark") : setTheme("light");
systemTheme.addEventListener("change", (event) => {
event.matches ? setTheme("dark") : setTheme("light");
});
} else {
setTheme(this.DEFAULT_THEME);
}
};
// Listing toots function
MastodonApi.prototype.getToots = function () {
let mapi = this;
let requestURL = '';
let mapi = this;
let requestURL = "";
// Get request
if (this.TIMELINE_TYPE === 'profile') {
requestURL = this.INSTANCE_URL + '/api/v1/accounts/' + this.USER_ID + '/statuses?limit=' + this.TOOTS_LIMIT;
} else if (this.TIMELINE_TYPE === 'hashtag') {
requestURL = this.INSTANCE_URL + '/api/v1/timelines/tag/' + this.HASHTAG_NAME + '?limit=' + this.TOOTS_LIMIT;
} else if (this.TIMELINE_TYPE === 'local') {
requestURL = this.INSTANCE_URL + '/api/v1/timelines/public?local=true&limit=' + this.TOOTS_LIMIT;
}
// Get request
if (this.TIMELINE_TYPE === "profile") {
requestURL =
this.INSTANCE_URL +
"/api/v1/accounts/" +
this.USER_ID +
"/statuses?limit=" +
this.TOOTS_LIMIT;
} else if (this.TIMELINE_TYPE === "hashtag") {
requestURL =
this.INSTANCE_URL +
"/api/v1/timelines/tag/" +
this.HASHTAG_NAME +
"?limit=" +
this.TOOTS_LIMIT;
} else if (this.TIMELINE_TYPE === "local") {
requestURL =
this.INSTANCE_URL +
"/api/v1/timelines/public?local=true&limit=" +
this.TOOTS_LIMIT;
}
fetch(requestURL, {
method: 'get'
})
.then(
response => {
if (response.ok) {
return response.json()
} else if (response.status === 404) {
throw new Error("404 Not found", { cause: response });
} else {
throw new Error(response.status);
}
}
)
.then(jsonData => {
// console.log('jsonData: ', jsonData);
fetch(requestURL, {
method: "get",
})
.then((response) => {
if (response.ok) {
return response.json();
} else if (response.status === 404) {
throw new Error("404 Not found", { cause: response });
} else {
throw new Error(response.status);
}
})
.then((jsonData) => {
// console.log('jsonData: ', jsonData);
// Empty the <div> container
this.mtBodyContainer.innerHTML = '';
// Empty the <div> container
this.mtBodyContainer.innerHTML = "";
// Add toots
for (let i in jsonData) {
// List only public toots
if (jsonData[i].visibility == 'public' || jsonData[i].visibility == 'unlisted') {
if (mapi.HIDE_REBLOG && jsonData[i].reblog || mapi.HIDE_REPLIES && jsonData[i].in_reply_to_id) {
// Nothing here (Don't append boosts and/or replies toots)
} else {
appendToot.call(mapi, jsonData[i], i);
}
}
}
// Add toots
for (let i in jsonData) {
// First filter (Public / Unlisted)
if (
jsonData[i].visibility == "public" ||
(!this.HIDE_UNLISTED && jsonData[i].visibility == "unlisted")
) {
// Second filter (Reblog / Replies)
if (
(mapi.HIDE_REBLOG && jsonData[i].reblog) ||
(mapi.HIDE_REPLIES && jsonData[i].in_reply_to_id)
) {
// Nothing here (Don't append toots)
} else {
appendToot.call(mapi, jsonData[i], i);
}
}
}
// Add target="_blank" to all #hashtags and @mentions
let linksToBlank = document.querySelectorAll('#mt-body .hashtag, .u-url.mention');
for (let j = 0; j < linksToBlank.length; j++) {
linksToBlank[j].target = '_blank';
linksToBlank[j].hasAttribute('rel', 'tag') ? linksToBlank[j].setAttribute('rel', 'tag nofollow noopener noreferrer') : linksToBlank[j].setAttribute('rel', 'nofollow noopener noreferrer');
}
// Check if there are toots in the container (due to filters applied)
if (this.mtBodyContainer.innerHTML === "") {
this.mtBodyContainer.setAttribute("role", "none");
this.mtBodyContainer.innerHTML =
'<div class="mt-error"><span class="mt-error-icon">📭</span><br/><strong>Sorry, no toots to show</strong><br/><div class="mt-error-message">Got ' +
jsonData.length +
' toots from the server but due to the "hide filters" applied, no toot is shown</div></div>';
} else {
// Add target="_blank" to all #hashtags and @mentions
let linksToBlank = document.querySelectorAll(
"#mt-body .hashtag, .u-url.mention"
);
for (let j = 0; j < linksToBlank.length; j++) {
linksToBlank[j].target = "_blank";
linksToBlank[j].hasAttribute("rel", "tag")
? linksToBlank[j].setAttribute(
"rel",
"tag nofollow noopener noreferrer"
)
: linksToBlank[j].setAttribute(
"rel",
"nofollow noopener noreferrer"
);
}
// Insert link after last toot to visit Mastodon page
if (mapi.LINK_SEE_MORE) {
let linkHtml = '';
if (this.TIMELINE_TYPE === 'profile') {
linkHtml = '<div class="mt-footer"><a href="' + mapi.INSTANCE_URL + '/' + mapi.PROFILE_NAME + '" class="btn" target="_blank" rel="nofollow noopener noreferrer">' + mapi.LINK_SEE_MORE + '</a></div>';
} else if (this.TIMELINE_TYPE === 'hashtag') {
linkHtml = '<div class="mt-footer"><a href="' + mapi.INSTANCE_URL + '/tags/' + this.HASHTAG_NAME + '" class="btn" target="_blank" rel="nofollow noopener noreferrer">' + mapi.LINK_SEE_MORE + '</a></div>';
} else if (this.TIMELINE_TYPE === 'local') {
linkHtml = '<div class="mt-footer"><a href="' + mapi.INSTANCE_URL + '/public/local' + '" class="btn" target="_blank" rel="nofollow noopener noreferrer">' + mapi.LINK_SEE_MORE + '</a></div>';
}
this.mtBodyContainer.parentNode.insertAdjacentHTML('beforeend', linkHtml);
}
})
.catch(err => {
this.mtBodyContainer.innerHTML = '<div class="mt-error">✖️<br/><strong>Request Failed:</strong><br/>' + err + '</div>';
this.mtBodyContainer.setAttribute('role', 'none');
});
// Insert link after last toot to visit Mastodon page
if (mapi.LINK_SEE_MORE) {
let linkHtml = "";
if (this.TIMELINE_TYPE === "profile") {
linkHtml =
'<div class="mt-footer"><a href="' +
mapi.INSTANCE_URL +
"/" +
mapi.PROFILE_NAME +
'" class="btn" target="_blank" rel="nofollow noopener noreferrer">' +
mapi.LINK_SEE_MORE +
"</a></div>";
} else if (this.TIMELINE_TYPE === "hashtag") {
linkHtml =
'<div class="mt-footer"><a href="' +
mapi.INSTANCE_URL +
"/tags/" +
this.HASHTAG_NAME +
'" class="btn" target="_blank" rel="nofollow noopener noreferrer">' +
mapi.LINK_SEE_MORE +
"</a></div>";
} else if (this.TIMELINE_TYPE === "local") {
linkHtml =
'<div class="mt-footer"><a href="' +
mapi.INSTANCE_URL +
"/public/local" +
'" class="btn" target="_blank" rel="nofollow noopener noreferrer">' +
mapi.LINK_SEE_MORE +
"</a></div>";
}
this.mtBodyContainer.parentNode.insertAdjacentHTML(
"beforeend",
linkHtml
);
}
}
})
.catch((err) => {
this.mtBodyContainer.innerHTML =
'<div class="mt-error"><span class="mt-error-icon">❌</span><br/><strong>Sorry, request failed:</strong><br/><div class="mt-error-message">' +
err +
"</div></div>";
this.mtBodyContainer.setAttribute("role", "none");
});
// Inner function to add each toot content in container
let appendToot = function (status_, index) {
let avatar, user, content, url, date;
// Inner function to add each toot content in container
let appendToot = function (status_, index) {
let avatar, user, content, url, date;
if (status_.reblog) {
// BOOSTED toot
// Toot url
url = status_.reblog.url;
if (status_.reblog) {
// BOOSTED toot
// Toot url
url = status_.reblog.url;
// Boosted avatar
avatar =
'<a href="' + status_.reblog.account.url + '" class="mt-avatar mt-avatar-boosted" style="background-image:url(' + status_.reblog.account.avatar + ');" rel="nofollow noopener noreferrer" target="_blank">'
+ '<div class="mt-avatar mt-avatar-booster" style="background-image:url(' + status_.account.avatar + ');">'
+ '</div>'
+ '<span class="visually-hidden">'
+ status_.account.username + ' avatar'
+ '</span>'
+ '</a>';
// Boosted avatar
avatar =
'<a href="' +
status_.reblog.account.url +
'" class="mt-avatar mt-avatar-boosted" style="background-image:url(' +
status_.reblog.account.avatar +
');" rel="nofollow noopener noreferrer" target="_blank">' +
'<div class="mt-avatar mt-avatar-booster" style="background-image:url(' +
status_.account.avatar +
');">' +
"</div>" +
'<span class="visually-hidden">' +
status_.account.username +
" avatar" +
"</span>" +
"</a>";
// User name and url
user =
'<div class="mt-user">'
+ '<a href="' + status_.reblog.account.url + '" rel="nofollow noopener noreferrer" target="_blank">'
+ status_.reblog.account.username + '<span class="visually-hidden"> post</span>'
+ '</a>'
+ '</div>';
// User name and url
user =
'<div class="mt-user">' +
'<a href="' +
status_.reblog.account.url +
'" rel="nofollow noopener noreferrer" target="_blank">' +
status_.reblog.account.username +
'<span class="visually-hidden"> post</span>' +
"</a>" +
"</div>";
// Date
date = this.formatDate(status_.reblog.created_at);
} else {
// STANDARD toot
// Toot url
url = status_.url;
// Date
date = this.formatDate(status_.reblog.created_at);
} else {
// STANDARD toot
// Toot url
url = status_.url;
// Avatar
avatar =
'<a href="' + status_.account.url + '" class="mt-avatar" style="background-image:url(' + status_.account.avatar + ');" rel="nofollow noopener noreferrer" target="_blank">'
+ '<span class="visually-hidden">'
+ status_.account.username + ' avatar'
+ '</span>'
+ '</a>';
// Avatar
avatar =
'<a href="' +
status_.account.url +
'" class="mt-avatar" style="background-image:url(' +
status_.account.avatar +
');" rel="nofollow noopener noreferrer" target="_blank">' +
'<span class="visually-hidden">' +
status_.account.username +
" avatar" +
"</span>" +
"</a>";
// User name and url
user =
'<div class="mt-user">'
+ '<a href="' + status_.account.url + '" rel="nofollow noopener noreferrer" target="_blank">'
+ status_.account.username + '<span class="visually-hidden"> post</span>'
+ '</a>'
+ '</div>';
// User name and url
user =
'<div class="mt-user">' +
'<a href="' +
status_.account.url +
'" rel="nofollow noopener noreferrer" target="_blank">' +
status_.account.username +
'<span class="visually-hidden"> post</span>' +
"</a>" +
"</div>";
// Date
date = this.formatDate(status_.created_at);
}
// Date
date = this.formatDate(status_.created_at);
}
// Main text
let text_css = '';
if (this.TEXT_MAX_LINES !== '0') {
text_css = 'truncate';
document.documentElement.style.setProperty('--text-max-lines', this.TEXT_MAX_LINES);
}
// Main text
let text_css = "";
if (this.TEXT_MAX_LINES !== "0") {
text_css = "truncate";
document.documentElement.style.setProperty(
"--text-max-lines",
this.TEXT_MAX_LINES
);
}
if (status_.spoiler_text !== '') {
content =
'<div class="toot-text">'
+ status_.spoiler_text
+ ' <button type="button" class="spoiler-link" aria-expanded="false">Show more</button>'
+ '<div class="spoiler-text">'
+ status_.content
+ '</div>'
+ '</div>';
} else if (status_.reblog && status_.reblog.content !== '') {
content =
'<div class="toot-text' + ' ' + text_css + '">'
+ '<div>'
+ status_.reblog.content
+ '</div>'
+ '</div>';
} else {
content =
'<div class="toot-text' + ' ' + text_css + '">'
+ '<div>'
+ status_.content
+ '</div>'
+ '</div>';
}
if (status_.spoiler_text !== "") {
content =
'<div class="toot-text">' +
status_.spoiler_text +
' <button type="button" class="spoiler-link" aria-expanded="false">Show more</button>' +
'<div class="spoiler-text">' +
status_.content +
"</div>" +
"</div>";
} else if (status_.reblog && status_.reblog.content !== "") {
content =
'<div class="toot-text' +
" " +
text_css +
'">' +
"<div>" +
status_.reblog.content +
"</div>" +
"</div>";
} else {
content =
'<div class="toot-text' +
" " +
text_css +
'">' +
"<div>" +
status_.content +
"</div>" +
"</div>";
}
// Media attachments
let media = '';
if (status_.media_attachments.length > 0) {
for (let picid in status_.media_attachments) {
media = this.replaceMedias(status_.media_attachments[picid], status_.sensitive);
}
}
if (status_.reblog && status_.reblog.media_attachments.length > 0) {
for (let picid in status_.reblog.media_attachments) {
media = this.replaceMedias(status_.reblog.media_attachments[picid], status_.sensitive);
}
}
// Media attachments
let media = "";
if (status_.media_attachments.length > 0) {
for (let picid in status_.media_attachments) {
media = this.replaceMedias(
status_.media_attachments[picid],
status_.sensitive
);
}
}
if (status_.reblog && status_.reblog.media_attachments.length > 0) {
for (let picid in status_.reblog.media_attachments) {
media = this.replaceMedias(
status_.reblog.media_attachments[picid],
status_.sensitive
);
}
}
// Poll
let poll = '';
let pollOption = '';
if (status_.poll) {
for (let i in status_.poll.options) {
pollOption +=
'<li>'
+ status_.poll.options[i].title
+ '</li>';
}
poll =
'<div class="toot-poll">'
+ '<ul>'
+ pollOption
+ '</ul>'
+ '</div>';
}
// Poll
let poll = "";
let pollOption = "";
if (status_.poll) {
for (let i in status_.poll.options) {
pollOption += "<li>" + status_.poll.options[i].title + "</li>";
}
poll =
'<div class="toot-poll">' + "<ul>" + pollOption + "</ul>" + "</div>";
}
// Date
let timestamp =
'<div class="toot-date">'
+ '<a href="' + url + '" rel="nofollow noopener noreferrer" tabindex="-1" target="_blank">'
+ date
+ '</a>'
+ '</div>';
// Date
let timestamp =
'<div class="toot-date">' +
'<a href="' +
url +
'" rel="nofollow noopener noreferrer" tabindex="-1" target="_blank">' +
date +
"</a>" +
"</div>";
// Add all to main toot container
let toot =
'<article class="mt-toot" aria-posinset="' + (Number(index) + 1) + '" aria-setsize="' + this.TOOTS_LIMIT + '" data-location="' + url + '" tabindex="0">'
+ avatar
+ user
+ content
+ media
+ poll
+ timestamp
+ '</article>';
// Add all to main toot container
let toot =
'<article class="mt-toot" aria-posinset="' +
(Number(index) + 1) +
'" aria-setsize="' +
this.TOOTS_LIMIT +
'" data-location="' +
url +
'" tabindex="0">' +
avatar +
user +
content +
media +
poll +
timestamp +
"</article>";
this.mtBodyContainer.insertAdjacentHTML('beforeend', toot);
};
this.mtBodyContainer.insertAdjacentHTML("beforeend", toot);
};
// Toot interactions
this.mtBodyContainer.addEventListener('click', function (event) {
// Check if clicked in a toot
if (event.target.localName == 'article' || event.target.offsetParent.localName == 'article' || event.target.localName == 'img') {
openTootURL(event);
}
// Check if clicked in Show More/Less button
if (event.target.localName == 'button' && event.target.className == 'spoiler-link') {
toogleSpoiler(event);
}
});
this.mtBodyContainer.addEventListener('keydown', function (event) {
// Check if Enter key pressed with focus in an article
if (event.code === 'Enter' && event.target.localName == 'article') {
openTootURL(event);
}
});
// Toot interactions
this.mtBodyContainer.addEventListener("click", function (event) {
// Check if clicked in a toot
if (
event.target.localName == "article" ||
event.target.offsetParent.localName == "article" ||
event.target.localName == "img"
) {
openTootURL(event);
}
// Check if clicked in Show More/Less button
if (
event.target.localName == "button" &&
event.target.className == "spoiler-link"
) {
toogleSpoiler(event);
}
});
this.mtBodyContainer.addEventListener("keydown", function (event) {
// Check if Enter key pressed with focus in an article
if (event.code === "Enter" && event.target.localName == "article") {
openTootURL(event);
}
});
// Open Toot in a new page avoiding any other natural link
openTootURL = function (event_) {
let urlToot = event_.target.closest('.mt-toot').dataset.location;
if (event_.target.localName !== 'a' && event_.target.localName !== 'span' && event_.target.localName !== 'button' && urlToot) {
window.open(urlToot, '_blank');
}
}
// Spoiler button
toogleSpoiler = function (event_) {
let spoilerText = event_.target.nextSibling;
let spoilerBtnText = event_.target.textContent;
spoilerText.classList.toggle('spoiler-text');
if (spoilerBtnText == 'Show more') {
spoilerBtnText = 'Show less';
event_.target.setAttribute('aria-expanded', 'true');
} else {
spoilerBtnText = 'Show more';
event_.target.setAttribute('aria-expanded', 'false');
}
}
// Open Toot in a new page avoiding any other natural link
openTootURL = function (event_) {
let urlToot = event_.target.closest(".mt-toot").dataset.location;
if (
event_.target.localName !== "a" &&
event_.target.localName !== "span" &&
event_.target.localName !== "button" &&
urlToot
) {
window.open(urlToot, "_blank");
}
};
// Spoiler button
toogleSpoiler = function (event_) {
let spoilerText = event_.target.nextSibling;
let spoilerBtnText = event_.target.textContent;
spoilerText.classList.toggle("spoiler-text");
if (spoilerBtnText == "Show more") {
spoilerBtnText = "Show less";
event_.target.setAttribute("aria-expanded", "true");
} else {
spoilerBtnText = "Show more";
event_.target.setAttribute("aria-expanded", "false");
}
};
};
// Place media
MastodonApi.prototype.replaceMedias = function (media_, spoiler_) {
let spoiler = spoiler_ || false;
let pic =
'<div class="toot-media ' + (spoiler ? 'toot-media-spoiler' : '') + ' img-ratio14_7 loading-spinner">'
+ '<img onload="removeSpinner(this)" onerror="removeSpinner(this)" src="' + media_.preview_url + '" alt="" loading="lazy" />'
+ '</div>';
let spoiler = spoiler_ || false;
let pic =
'<div class="toot-media ' +
(spoiler ? "toot-media-spoiler" : "") +
' img-ratio14_7 loading-spinner">' +
'<img onload="removeSpinner(this)" onerror="removeSpinner(this)" src="' +
media_.preview_url +
'" alt="" loading="lazy" />' +
"</div>";
return pic;
return pic;
};
// Format date
MastodonApi.prototype.formatDate = function (date_) {
const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
];
const monthNames = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
];
let date = new Date(date_);
let date = new Date(date_);
let displayDate = monthNames[date.getMonth()]
+ " " + date.getDate()
+ ", " + date.getFullYear();
let displayDate =
monthNames[date.getMonth()] +
" " +
date.getDate() +
", " +
date.getFullYear();
return displayDate;
return displayDate;
};
// Loading spinner
removeSpinner = function (element) {
const spinnerCSS = 'loading-spinner';
// Find closest parent container (1st, 2nd or 3rd level)
let spinnerContainer = element.closest('.' + spinnerCSS);
if (spinnerContainer) {
spinnerContainer.classList.remove(spinnerCSS);
}
}
const spinnerCSS = "loading-spinner";
// Find closest parent container (1st, 2nd or 3rd level)
let spinnerContainer = element.closest("." + spinnerCSS);
if (spinnerContainer) {
spinnerContainer.classList.remove(spinnerCSS);
}
};

View File

@ -1 +1 @@
:root{--text-max-lines:none}:root,html[data-theme=light]{--bg-color:#fff;--bg-hover-color:#d9e1e8;--line-gray-color:#c0cdd9;--content-text:#000;--link-color:#3a3bff;--error-text-color:#8b0000}html[data-theme=dark]{--bg-color:#282c37;--bg-hover-color:#313543;--line-gray-color:#393f4f;--content-text:#fff;--link-color:#8c8dff;--error-text-color:#fe6c6c}.mt-timeline{height:100%;overflow-y:auto;position:relative;background:var(--bg-color);scrollbar-color:var(--bg-hover-color) rgba(0,0,0,.1)}.mt-timeline a,.mt-timeline a:active,.mt-timeline a:link{text-decoration:none;color:var(--link-color)}.mt-timeline a:hover{text-decoration:underline}.mt-timeline::-webkit-scrollbar{width:.75rem;height:.75rem}.mt-timeline::-webkit-scrollbar-corner{background:0 0}.mt-timeline::-webkit-scrollbar-thumb{border:0 var(--content-text);border-radius:2rem;background:var(--bg-hover-color)}.mt-timeline::-webkit-scrollbar-track{border:0 var(--content-text);border-radius:0;background:rgba(0,0,0,.1)}.mt-body{padding:1rem 1.5rem;white-space:pre-wrap;word-wrap:break-word}.mt-body .invisible{font-size:0;line-height:0;display:inline-block;width:0;height:0;position:absolute}.mt-toot{margin:.25rem;padding:1rem .5rem 2rem 4rem;position:relative;min-height:3.75rem;background-color:transparent;border-bottom:1px solid var(--line-gray-color)}.mt-toot:focus,.mt-toot:hover{cursor:pointer;background-color:var(--bg-hover-color)}.mt-toot p:last-child{margin-bottom:0}.mt-avatar{position:absolute;top:1rem;left:5px;width:3rem;height:3rem;background-color:transparent;background-repeat:no-repeat;background-position:50% 50%;background-size:contain;background-color:var(--bg-color);border-radius:5px}.mt-avatar-boosted{width:2.5rem;height:2.5rem}.mt-avatar-booster{width:1.5rem;height:1.5rem;top:1.5rem;left:1.5rem}.mt-user{display:table;font-weight:600}.mt-user>a{color:var(--content-text)!important}.toot-text{margin-bottom:.25rem;color:var(--content-text)}.toot-text .spoiler-link{display:inline-block;border-radius:2px;background-color:var(--bg-hover-color);border:0;color:var(--content-text);font-weight:700;font-size:.7rem;padding:0 .35rem;text-transform:uppercase;line-height:1.25rem;cursor:pointer;vertical-align:top}.toot-text .spoiler-text{display:none}.toot-text.truncate{display:-webkit-box;overflow:hidden;-webkit-line-clamp:var(--text-max-lines);-webkit-box-orient:vertical}.toot-text:not(.truncate) .ellipsis::after{content:"..."}.mt-error{position:absolute;display:flex;flex-direction:column;height:calc(100% - 3.5rem);width:calc(100% - 4.5rem);justify-content:center;align-items:center;color:var(--error-text-color);padding:.75rem;text-align:center}.toot-poll{margin-bottom:.25rem;color:var(--content-text)}.toot-poll ul{list-style:none;padding:0;margin:0}.toot-poll ul li{font-size:.9rem;margin-bottom:.5rem}.toot-poll ul li:not(:last-child){margin-bottom:.25rem}.toot-poll ul li:before{content:"◯";padding-right:.5rem}.toot-media{overflow:hidden;margin-bottom:.25rem}.toot-media-preview{position:relative;margin-top:.25rem;height:auto;text-align:center;width:100%}.toot-media-spoiler>img{filter:blur(2rem)}.toot-media-preview a{display:block;position:absolute;top:0;right:0;bottom:0;left:0}.img-ratio14_7{position:relative;padding-top:48.95%;width:100%}.img-ratio14_7>img{width:100%;height:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.toot-date{font-size:.75rem}.mt-body>.loading-spinner{position:absolute;width:3rem;height:3rem;margin:auto;top:calc(50% - 1.5rem);right:calc(50% - 1.5rem)}.loading-spinner{height:100%;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.0' viewBox='0 0 128 128' %3E%3Cg%3E%3Cpath d='M64 128A64 64 0 0 1 18.34 19.16L21.16 22a60 60 0 1 0 52.8-17.17l.62-3.95A64 64 0 0 1 64 128z' fill='%23404040'/%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 64 64' to='360 64 64' dur='1000ms' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center center;background-color:transparent;background-size:min(2.5rem,calc(100% - .5rem))}.mt-footer{margin:1rem auto 2rem auto;padding:0 2rem;text-align:center}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
:root{--text-max-lines:none}:root,html[data-theme=light]{--bg-color:#fff;--bg-hover-color:#d9e1e8;--line-gray-color:#c0cdd9;--content-text:#000;--link-color:#3a3bff;--error-text-color:#8b0000}html[data-theme=dark]{--bg-color:#282c37;--bg-hover-color:#313543;--line-gray-color:#393f4f;--content-text:#fff;--link-color:#8c8dff;--error-text-color:#fe6c6c}.mt-timeline{height:100%;overflow-y:auto;position:relative;background:var(--bg-color);scrollbar-color:var(--bg-hover-color) rgba(0,0,0,.1)}.mt-timeline a,.mt-timeline a:active,.mt-timeline a:link{text-decoration:none;color:var(--link-color)}.mt-timeline a:hover{text-decoration:underline}.mt-timeline::-webkit-scrollbar{width:.75rem;height:.75rem}.mt-timeline::-webkit-scrollbar-corner{background:0 0}.mt-timeline::-webkit-scrollbar-thumb{border:0 var(--content-text);border-radius:2rem;background:var(--bg-hover-color)}.mt-timeline::-webkit-scrollbar-track{border:0 var(--content-text);border-radius:0;background:rgba(0,0,0,.1)}.mt-body{padding:1rem 1.5rem;white-space:pre-wrap;word-wrap:break-word}.mt-body .invisible{font-size:0;line-height:0;display:inline-block;width:0;height:0;position:absolute}.mt-toot{margin:.25rem;padding:1rem .5rem 2rem 4rem;position:relative;min-height:3.75rem;background-color:transparent;border-bottom:1px solid var(--line-gray-color)}.mt-toot:focus,.mt-toot:hover{cursor:pointer;background-color:var(--bg-hover-color)}.mt-toot p:last-child{margin-bottom:0}.mt-avatar{position:absolute;top:1rem;left:5px;width:3rem;height:3rem;background-color:transparent;background-repeat:no-repeat;background-position:50% 50%;background-size:contain;background-color:var(--bg-color);border-radius:5px}.mt-avatar-boosted{width:2.5rem;height:2.5rem}.mt-avatar-booster{width:1.5rem;height:1.5rem;top:1.5rem;left:1.5rem}.mt-user{display:table;font-weight:600}.mt-user>a{color:var(--content-text)!important}.toot-text{margin-bottom:.25rem;color:var(--content-text)}.toot-text .spoiler-link{display:inline-block;border-radius:2px;background-color:var(--bg-hover-color);border:0;color:var(--content-text);font-weight:700;font-size:.7rem;padding:0 .35rem;text-transform:uppercase;line-height:1.25rem;cursor:pointer;vertical-align:top}.toot-text .spoiler-text{display:none}.toot-text.truncate{display:-webkit-box;overflow:hidden;-webkit-line-clamp:var(--text-max-lines);-webkit-box-orient:vertical}.toot-text:not(.truncate) .ellipsis::after{content:"..."}.mt-error{position:absolute;display:flex;flex-direction:column;height:calc(100% - 3.5rem);width:calc(100% - 4.5rem);justify-content:center;align-items:center;color:var(--error-text-color);padding:.75rem;text-align:center}.mt-error-icon{font-size:2rem}.mt-error-message{padding:1rem 0}.toot-poll{margin-bottom:.25rem;color:var(--content-text)}.toot-poll ul{list-style:none;padding:0;margin:0}.toot-poll ul li{font-size:.9rem;margin-bottom:.5rem}.toot-poll ul li:not(:last-child){margin-bottom:.25rem}.toot-poll ul li:before{content:"◯";padding-right:.5rem}.toot-media{overflow:hidden;margin-bottom:.25rem}.toot-media-preview{position:relative;margin-top:.25rem;height:auto;text-align:center;width:100%}.toot-media-spoiler>img{filter:blur(2rem)}.toot-media-preview a{display:block;position:absolute;top:0;right:0;bottom:0;left:0}.img-ratio14_7{position:relative;padding-top:48.95%;width:100%}.img-ratio14_7>img{width:100%;height:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.toot-date{font-size:.75rem}.mt-body>.loading-spinner{position:absolute;width:3rem;height:3rem;margin:auto;top:calc(50% - 1.5rem);right:calc(50% - 1.5rem)}.loading-spinner{height:100%;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.0' viewBox='0 0 128 128' %3E%3Cg%3E%3Cpath d='M64 128A64 64 0 0 1 18.34 19.16L21.16 22a60 60 0 1 0 52.8-17.17l.62-3.95A64 64 0 0 1 64 128z' fill='%23404040'/%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 64 64' to='360 64 64' dur='1000ms' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center center;background-color:transparent;background-size:min(2.5rem,calc(100% - .5rem))}.mt-footer{margin:1rem auto 2rem auto;padding:0 2rem;text-align:center}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

File diff suppressed because one or more lines are too long