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

Add dark theme + some fixes

Browse Source
This commit is contained in:
idotj 2023-02-21 18:48:38 +01:00
parent ff28919faf
commit 4791b3c07d
5 changed files with 133 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
CHANGELOG
View File

@ -1,3 +1,8 @@
v3.2.9 - 21/02/2023
- Add dark theme
- Fix click on images
- Fix poll font size and color
v3.2.2 - 06/02/2023 v3.2.2 - 06/02/2023
- Rearrange JS functions - Rearrange JS functions
- Use variables for CSS colors - Use variables for CSS colors

9
README.md
View File

@ -55,19 +55,22 @@ Check the `src=""` url, your user id is between `/accounts/avatars/` and `/origi
Here you have some parameters to customize your embed timeline: Here you have some parameters to customize your embed timeline:
``` ```
// Maximum amount of toots to get from the user (default: 20) // Preferred color theme 'light' or 'dark' (default: auto)
default_theme: 'auto'
// Maximum amount of toots to get (default: 20)
toots_limit: '20' toots_limit: '20'
// Hide boosted toots (default: don't hide) // Hide boosted toots (default: don't hide)
hide_reblog: false hide_reblog: false
// Hide replies from the user (default: don't hide) // Hide replies toots (default: don't hide)
hide_replies: false hide_replies: false
// Limit the text content to a maximum number of lines (default: unlimited) // 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 button linking to the user profile page (appears after the last toot) // Customize the text of the link pointing to the Mastodon page (appears after the last toot)
btn_see_more: 'See more posts at Mastodon' btn_see_more: 'See more posts at Mastodon'
``` ```

2
src/index.html
View File

@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en" data-theme="">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Mastodon embed timeline</title> <title>Mastodon embed timeline</title>

59
src/mastodon-timeline.css
View File

@ -1,26 +1,38 @@
/* Mastodon embed feed timeline v3.2.2 */ /* Mastodon embed feed timeline v3.2.9 */
/* More info at: */ /* More info at: */
/* https://gitlab.com/idotj/mastodon-embed-feed-timeline */ /* https://gitlab.com/idotj/mastodon-embed-feed-timeline */
/* Variables */ /* Variables */
:root { :root {
--text-max-lines: none;
}
/* Theme colors */
:root,
html[data-theme="light"] {
--bg-color: #fff; --bg-color: #fff;
--bg-hover-color: #d9e1e8; --bg-hover-color: #d9e1e8;
--line-gray-color: #c0cdd9; --line-gray-color: #c0cdd9;
--content-text: #000; --content-text: #000;
--link-color: #3a3bff; --link-color: #3a3bff;
--error-text-color: #8b0000; --error-text-color: #8b0000;
--text-max-lines: none; }
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;
} }
/* Main container */ /* Main container */
.mt-timeline { .mt-timeline {
height: calc(100% - 2rem); height: calc(100% - 2rem);
padding: 1rem 1.5rem; padding: 1rem 0.5rem 1rem 1.5rem;
position: relative; position: relative;
background: var(--bg-color); background: var(--bg-color);
} }
.mt-timeline a:link, .mt-timeline a:link,
.mt-timeline a:active, .mt-timeline a:active,
.mt-timeline a { .mt-timeline a {
@ -36,8 +48,8 @@
overflow-y: auto; overflow-y: auto;
white-space: pre-wrap; white-space: pre-wrap;
word-wrap: break-word; word-wrap: break-word;
padding-right: 0.5rem;
} }
.mt-body .invisible { .mt-body .invisible {
font-size: 0; font-size: 0;
line-height: 0; line-height: 0;
@ -50,9 +62,9 @@
/* Toot container */ /* Toot container */
.mt-toot { .mt-toot {
margin: 0.25rem 0.5rem 0.25rem 0.25rem; margin: 0.25rem 0.5rem 0.25rem 0.25rem;
padding: 1rem 0 2rem 65px; padding: 1rem 0.5rem 2rem 4rem;
position: relative; position: relative;
min-height: 60px; min-height: 3.75rem;
background-color: transparent; background-color: transparent;
border-bottom: 1px solid var(--line-gray-color); border-bottom: 1px solid var(--line-gray-color);
} }
@ -68,10 +80,10 @@
/* User icon */ /* User icon */
.mt-avatar { .mt-avatar {
position: absolute; position: absolute;
top: 20px; top: 1rem;
left: 5px; left: 5px;
width: 50px; width: 3rem;
height: 50px; height: 3rem;
background-color: transparent; background-color: transparent;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 50% 50%; background-position: 50% 50%;
@ -80,14 +92,14 @@
border-radius: 5px; border-radius: 5px;
} }
.mt-avatar-boosted { .mt-avatar-boosted {
width: 40px; width: 2.5rem;
height: 40px; height: 2.5rem;
} }
.mt-avatar-booster { .mt-avatar-booster {
width: 25px; width: 1.5rem;
height: 25px; height: 1.5rem;
top: 25px; top: 1.5rem;
left: 25px; left: 1.5rem;
} }
.mt-user { .mt-user {
display: table; display: table;
@ -100,6 +112,7 @@
/* Text */ /* Text */
.toot-text { .toot-text {
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
color: var(--content-text);
} }
.toot-text .spoiler-link { .toot-text .spoiler-link {
display: inline-block; display: inline-block;
@ -108,10 +121,10 @@
border: 0; border: 0;
color: var(--content-text); color: var(--content-text);
font-weight: 700; font-weight: 700;
font-size: 11px; font-size: 0.7rem;
padding: 0 6px; padding: 0 0.35rem;
text-transform: uppercase; text-transform: uppercase;
line-height: 20px; line-height: 1.25rem;
cursor: pointer; cursor: pointer;
vertical-align: top; vertical-align: top;
} }
@ -135,19 +148,24 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: var(--error-text-color); color: var(--error-text-color);
padding: 10px; padding: 0.75rem;
text-align: center; text-align: center;
} }
/* Poll */ /* Poll */
.toot-poll { .toot-poll {
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
color: var(--content-text);
} }
.toot-poll ul { .toot-poll ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.toot-poll ul li {
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.toot-poll ul li:not(:last-child) { .toot-poll ul li:not(:last-child) {
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
@ -179,6 +197,7 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
} }
.img-ratio14_7 { .img-ratio14_7 {
position: relative; position: relative;
padding-top: 48.95%; /* 14:7 */ padding-top: 48.95%; /* 14:7 */

127
src/mastodon-timeline.js
View File

@ -1,25 +1,45 @@
// Mastodon embed feed timeline v3.2.2 // Mastodon embed feed timeline v3.2.9
// 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
container_body_id: 'mt-body', container_body_id: 'mt-body',
// Preferred color theme: 'light', 'dark' or 'auto' (default: auto)
default_theme: 'auto',
// Your Mastodon instance
instance_uri: 'https://mastodon.online', instance_uri: 'https://mastodon.online',
user_id: '180745', // leave empty if prefer to show local instance toots
// Your user ID on Mastodon instance. Leave empty if you prefer to show local instance toots
user_id: '000180745',
// Your user name on Mastodon instance
profile_name: '@idotj', profile_name: '@idotj',
// Maximum amount of toots to get (default: 20)
toots_limit: '20', toots_limit: '20',
// Hide boosted toots (default: don't hide)
hide_reblog: false, hide_reblog: false,
// Hide replies toots (default: don't hide)
hide_replies: false, 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_) { let MastodonApi = function (params_) {
// Endpoint access settings / default values // Endpoint access settings / default values
this.DEFAULT_THEME = params_.default_theme || 'auto';
this.INSTANCE_URI = params_.instance_uri; this.INSTANCE_URI = params_.instance_uri;
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 : '';
@ -32,49 +52,27 @@ let MastodonApi = function (params_) {
// Target selector // Target selector
this.mtBodyContainer = document.getElementById(params_.container_body_id); this.mtBodyContainer = document.getElementById(params_.container_body_id);
// Toot interactions // Apply selected appearance
this.mtBodyContainer.addEventListener('click', function (event) { this.applyTheme();
// Check if clicked in a toot
if (event.target.localName == 'article' || event.target.offsetParent.localName == 'article') {
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
function openTootURL(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
function toogleSpoiler(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');
}
}
// Get the toots // Get the toots
this.getToots(); 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);
}
} }
// Listing toots function // Listing toots function
@ -280,6 +278,47 @@ MastodonApi.prototype.getToots = function () {
this.mtBodyContainer.insertAdjacentHTML('beforeend', toot); this.mtBodyContainer.insertAdjacentHTML('beforeend', toot);
}; };
// Toot interactions
this.mtBodyContainer.addEventListener('click', function (event) {
console.log({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');
}
}
}; };
// Place media // Place media
@ -308,10 +347,8 @@ MastodonApi.prototype.formatDate = function (date_) {
return displayDate; return displayDate;
}; };
// Loading spinner // Loading spinner
function removeSpinner(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);