mirror of
https://gitlab.com/idotj/mastodon-embed-timeline.git
synced 2025-10-29 22:22:23 +00:00
Add feature (hide unlisted toots) + Message shown if no toots
This commit is contained in:
idotj
parent
34ebc56e46
commit
95aa0dbbb5
@ -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
|
||||
|
||||
42
README.md
42
README.md
@ -12,16 +12,16 @@ 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:
|
||||
@ -37,7 +37,7 @@ Then copy the following html structure:
|
||||
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
|
||||
|
||||
|
||||
@ -1,14 +1,13 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<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="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">
|
||||
<link rel="stylesheet" href="mastodon-timeline.css" />
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
@ -16,7 +15,7 @@
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
@ -33,9 +32,9 @@
|
||||
margin: 2rem auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body>
|
||||
<div class="dummy-container">
|
||||
<div class="mt-timeline">
|
||||
<div id="mt-body" class="mt-body" role="feed">
|
||||
@ -44,8 +43,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src='mastodon-timeline.js'>
|
||||
</script>
|
||||
</body>
|
||||
|
||||
<script src="mastodon-timeline.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -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;
|
||||
|
||||
@ -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
|
||||
|
||||
@ -6,28 +6,31 @@
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
let mapi = new MastodonApi({
|
||||
// Id of the <div> containing the timeline.
|
||||
container_body_id: 'mt-body',
|
||||
container_body_id: "mt-body",
|
||||
|
||||
// Preferred color theme: 'light', 'dark' or 'auto' (default: auto).
|
||||
default_theme: 'auto',
|
||||
default_theme: "auto",
|
||||
|
||||
// Your Mastodon instance.
|
||||
instance_url: 'https://mastodon.online',
|
||||
instance_url: "https://mastodon.online",
|
||||
|
||||
// Choose type of toots to show in the timeline: 'local', 'profile', 'hashtag' (default: local).
|
||||
timeline_type: 'local',
|
||||
timeline_type: "local",
|
||||
|
||||
// Your user ID on Mastodon instance. Leave empty if you didn't choose 'profile' as type of timeline.
|
||||
user_id: '',
|
||||
user_id: "",
|
||||
|
||||
// Your user name on Mastodon instance. Leave empty if you didn't choose 'profile' as type of timeline.
|
||||
profile_name: '',
|
||||
profile_name: "",
|
||||
|
||||
// The name of the hashtag. Leave empty if you didn't choose 'hashtag' as type of timeline.
|
||||
hashtag_name: '',
|
||||
hashtag_name: "",
|
||||
|
||||
// Maximum amount of toots to get (default: 20).
|
||||
toots_limit: '20',
|
||||
toots_limit: "20",
|
||||
|
||||
// Hide unlisted toots (default: don't hide).
|
||||
hide_unlisted: false,
|
||||
|
||||
// Hide boosted toots (default: don't hide).
|
||||
hide_reblog: false,
|
||||
@ -36,25 +39,31 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
hide_replies: false,
|
||||
|
||||
// Limit the text content to a maximum number of lines (default: unlimited).
|
||||
text_max_lines: '0',
|
||||
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'
|
||||
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.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.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
|
||||
@ -65,93 +74,156 @@ let MastodonApi = function (params_) {
|
||||
|
||||
// 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');
|
||||
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 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;
|
||||
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'
|
||||
method: "get",
|
||||
})
|
||||
.then(
|
||||
response => {
|
||||
.then((response) => {
|
||||
if (response.ok) {
|
||||
return response.json()
|
||||
return response.json();
|
||||
} else if (response.status === 404) {
|
||||
throw new Error("404 Not found", { cause: response });
|
||||
} else {
|
||||
throw new Error(response.status);
|
||||
}
|
||||
}
|
||||
)
|
||||
.then(jsonData => {
|
||||
})
|
||||
.then((jsonData) => {
|
||||
// console.log('jsonData: ', jsonData);
|
||||
|
||||
// Empty the <div> container
|
||||
this.mtBodyContainer.innerHTML = '';
|
||||
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)
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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');
|
||||
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');
|
||||
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>';
|
||||
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
|
||||
);
|
||||
}
|
||||
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');
|
||||
.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
|
||||
@ -165,21 +237,31 @@ MastodonApi.prototype.getToots = function () {
|
||||
|
||||
// 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>';
|
||||
'<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>';
|
||||
'<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);
|
||||
@ -190,183 +272,236 @@ MastodonApi.prototype.getToots = function () {
|
||||
|
||||
// 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>';
|
||||
'<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>';
|
||||
'<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);
|
||||
}
|
||||
|
||||
// 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);
|
||||
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 !== '') {
|
||||
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 !== '') {
|
||||
'<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>';
|
||||
'<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>';
|
||||
'<div class="toot-text' +
|
||||
" " +
|
||||
text_css +
|
||||
'">' +
|
||||
"<div>" +
|
||||
status_.content +
|
||||
"</div>" +
|
||||
"</div>";
|
||||
}
|
||||
|
||||
// Media attachments
|
||||
let media = '';
|
||||
let media = "";
|
||||
if (status_.media_attachments.length > 0) {
|
||||
for (let picid in status_.media_attachments) {
|
||||
media = this.replaceMedias(status_.media_attachments[picid], status_.sensitive);
|
||||
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 = this.replaceMedias(
|
||||
status_.reblog.media_attachments[picid],
|
||||
status_.sensitive
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Poll
|
||||
let poll = '';
|
||||
let pollOption = '';
|
||||
let poll = "";
|
||||
let pollOption = "";
|
||||
if (status_.poll) {
|
||||
for (let i in status_.poll.options) {
|
||||
pollOption +=
|
||||
'<li>'
|
||||
+ status_.poll.options[i].title
|
||||
+ '</li>';
|
||||
pollOption += "<li>" + status_.poll.options[i].title + "</li>";
|
||||
}
|
||||
poll =
|
||||
'<div class="toot-poll">'
|
||||
+ '<ul>'
|
||||
+ pollOption
|
||||
+ '</ul>'
|
||||
+ '</div>';
|
||||
'<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>';
|
||||
'<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>';
|
||||
'<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) {
|
||||
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') {
|
||||
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') {
|
||||
if (
|
||||
event.target.localName == "button" &&
|
||||
event.target.className == "spoiler-link"
|
||||
) {
|
||||
toogleSpoiler(event);
|
||||
}
|
||||
});
|
||||
this.mtBodyContainer.addEventListener('keydown', function (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') {
|
||||
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');
|
||||
}
|
||||
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');
|
||||
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');
|
||||
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>';
|
||||
'<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;
|
||||
};
|
||||
|
||||
// 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 displayDate = monthNames[date.getMonth()]
|
||||
+ " " + date.getDate()
|
||||
+ ", " + date.getFullYear();
|
||||
let displayDate =
|
||||
monthNames[date.getMonth()] +
|
||||
" " +
|
||||
date.getDate() +
|
||||
", " +
|
||||
date.getFullYear();
|
||||
|
||||
return displayDate;
|
||||
};
|
||||
|
||||
// Loading spinner
|
||||
removeSpinner = function (element) {
|
||||
const spinnerCSS = 'loading-spinner';
|
||||
const spinnerCSS = "loading-spinner";
|
||||
// Find closest parent container (1st, 2nd or 3rd level)
|
||||
let spinnerContainer = element.closest('.' + spinnerCSS);
|
||||
let spinnerContainer = element.closest("." + spinnerCSS);
|
||||
if (spinnerContainer) {
|
||||
spinnerContainer.classList.remove(spinnerCSS);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
2
src/mastodon-timeline.min.css
vendored
2
src/mastodon-timeline.min.css
vendored
@ -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}
|
||||
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