kunjinkao/mastodon-embed-timeline
1
0
Fork 0
forked from mirror/mastodon-embed-timeline
Code Pull Requests Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG
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 v3.4.2 - 22/04/2023
- Add support for hashtag timeline - Add support for hashtag timeline
- Fix query url when showing local instance toots - Fix query url when showing local instance toots

48
README.md
View File

@ -12,32 +12,32 @@ Source code running at:
## 🗂️ User guide ## 🗂️ 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: Now call each one in your page using the `<link>` and `<script>` tag:
```html ```html
<link rel="stylesheet" href="mastodon-timeline.css"> <link rel="stylesheet" href="mastodon-timeline.css" />
``` ```
```html ```html
<script src='mastodon-timeline.js'></script> <script src="mastodon-timeline.js"></script>
``` ```
Then copy the following html structure: Then copy the following html structure:
```html ```html
<div class="mt-timeline"> <div class="mt-timeline">
<div id="mt-body" class="mt-body" role="feed"> <div id="mt-body" class="mt-body" role="feed">
<div class="loading-spinner"></div> <div class="loading-spinner"></div>
</div> </div>
</div> </div>
``` ```
Great, you have a Mastodon timeline running in your page. Great, you have a Mastodon timeline running in your page.
The next step will be to setup the timeline. 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 ```javascript
instance_url: 'Your Mastodon instance', 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: Also you have some parameters to customize your embed timeline:
```javascript ```javascript
// Preferred color theme 'light' or 'dark' (default: auto) // Preferred color theme 'light' or 'dark' (default: auto)
default_theme: 'auto' default_theme: "auto";
// Maximum amount of toots to get (default: 20) // Maximum amount of toots to get (default: 20)
toots_limit: '20' toots_limit: "20";
// Hide boosted toots (default: don't hide) // Hide unlisted toots (default: don't hide)
hide_reblog: false hide_unlisted: false;
// Hide replies toots (default: don't hide) // Hide boosted toots (default: don't hide)
hide_replies: false hide_reblog: false;
// Limit the text content to a maximum number of lines (default: unlimited) // Hide replies toots (default: don't hide)
text_max_lines: '0' hide_replies: false;
// Customize the text of the link pointing to the Mastodon page (appears after the last toot) // Limit the text content to a maximum number of lines (default: unlimited)
btn_see_more: 'See more posts at Mastodon' 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 ### 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: 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. - Right click on your avatar image and inspect the element.
You will see in your html code a line like this one: 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">` `<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` 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: - 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 ## 🚀 Improve me

87
src/index.html
View File

@ -1,51 +1,48 @@
<!doctype html> <!DOCTYPE html>
<html lang="en" data-theme=""> <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> html {
<meta charset="utf-8"> height: 100%;
<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 { body {
height: 100% height: 100%;
} background: lightslategray;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
body { .dummy-container {
height: 100%; width: 100%;
background: lightslategray; max-width: 26rem;
font-size: 16px; height: calc(100% - 4rem);
font-family: Arial, Helvetica, sans-serif; margin: 2rem auto;
} }
</style>
</head>
.dummy-container { <body>
width: 100%; <div class="dummy-container">
max-width: 26rem; <div class="mt-timeline">
height: calc(100% - 4rem); <div id="mt-body" class="mt-body" role="feed">
margin: 2rem auto; <div class="loading-spinner"></div>
} </div>
</style> </div>
</head> </div>
<body> <script src="mastodon-timeline.js"></script>
<div class="dummy-container"> </body>
<div class="mt-timeline"> </html>
<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>

11
src/mastodon-timeline.css
View File

@ -1,4 +1,4 @@
/* Mastodon embed feed timeline v3.4.2 */ /* Mastodon embed feed timeline v3.5.1 */
/* More info at: */ /* More info at: */
/* https://gitlab.com/idotj/mastodon-embed-feed-timeline */ /* https://gitlab.com/idotj/mastodon-embed-feed-timeline */
@ -53,7 +53,7 @@ html[data-theme="dark"] {
.mt-timeline::-webkit-scrollbar-thumb { .mt-timeline::-webkit-scrollbar-thumb {
border: 0 var(--content-text); border: 0 var(--content-text);
border-radius: 2rem; border-radius: 2rem;
background: var(--bg-hover-color); background: var(--bg-hover-color);
} }
.mt-timeline::-webkit-scrollbar-track { .mt-timeline::-webkit-scrollbar-track {
border: 0 var(--content-text); border: 0 var(--content-text);
@ -170,6 +170,13 @@ html[data-theme="dark"] {
text-align: center; text-align: center;
} }
.mt-error-icon {
font-size: 2rem;
}
.mt-error-message {
padding: 1rem 0;
}
/* Poll */ /* Poll */
.toot-poll { .toot-poll {
margin-bottom: 0.25rem; margin-bottom: 0.25rem;

743
src/mastodon-timeline.js
View File

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

2
src/mastodon-timeline.min.css vendored
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}

2
src/mastodon-timeline.min.js vendored
View File

File diff suppressed because one or more lines are too long