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
- Rearrange JS functions
- 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:
```
// 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'
// Hide boosted toots (default: don't hide)
hide_reblog: false
// Hide replies from the user (default: don't hide)
// Hide replies toots (default: don't hide)
hide_replies: false
// Limit the text content to a maximum number of lines (default: unlimited)
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'
```

2
src/index.html
View File

@ -1,5 +1,5 @@
<!doctype html>
<html lang="en">
<html lang="en" data-theme="">
<head>
<meta charset="utf-8">
<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: */
/* https://gitlab.com/idotj/mastodon-embed-feed-timeline */
/* Variables */
:root {
--text-max-lines: none;
}
/* Theme colors */
: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;
--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 */
.mt-timeline {
height: calc(100% - 2rem);
padding: 1rem 1.5rem;
padding: 1rem 0.5rem 1rem 1.5rem;
position: relative;
background: var(--bg-color);
}
.mt-timeline a:link,
.mt-timeline a:active,
.mt-timeline a {
@ -36,8 +48,8 @@
overflow-y: auto;
white-space: pre-wrap;
word-wrap: break-word;
padding-right: 0.5rem;
}
.mt-body .invisible {
font-size: 0;
line-height: 0;
@ -50,9 +62,9 @@
/* Toot container */
.mt-toot {
margin: 0.25rem 0.5rem 0.25rem 0.25rem;
padding: 1rem 0 2rem 65px;
padding: 1rem 0.5rem 2rem 4rem;
position: relative;
min-height: 60px;
min-height: 3.75rem;
background-color: transparent;
border-bottom: 1px solid var(--line-gray-color);
}
@ -68,10 +80,10 @@
/* User icon */
.mt-avatar {
position: absolute;
top: 20px;
top: 1rem;
left: 5px;
width: 50px;
height: 50px;
width: 3rem;
height: 3rem;
background-color: transparent;
background-repeat: no-repeat;
background-position: 50% 50%;
@ -80,14 +92,14 @@
border-radius: 5px;
}
.mt-avatar-boosted {
width: 40px;
height: 40px;
width: 2.5rem;
height: 2.5rem;
}
.mt-avatar-booster {
width: 25px;
height: 25px;
top: 25px;
left: 25px;
width: 1.5rem;
height: 1.5rem;
top: 1.5rem;
left: 1.5rem;
}
.mt-user {
display: table;
@ -100,6 +112,7 @@
/* Text */
.toot-text {
margin-bottom: 0.25rem;
color: var(--content-text);
}
.toot-text .spoiler-link {
display: inline-block;
@ -108,10 +121,10 @@
border: 0;
color: var(--content-text);
font-weight: 700;
font-size: 11px;
padding: 0 6px;
font-size: 0.7rem;
padding: 0 0.35rem;
text-transform: uppercase;
line-height: 20px;
line-height: 1.25rem;
cursor: pointer;
vertical-align: top;
}
@ -135,19 +148,24 @@
justify-content: center;
align-items: center;
color: var(--error-text-color);
padding: 10px;
padding: 0.75rem;
text-align: center;
}
/* Poll */
.toot-poll {
margin-bottom: 0.25rem;
color: var(--content-text);
}
.toot-poll ul {
list-style: none;
padding: 0;
margin: 0;
}
.toot-poll ul li {
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.toot-poll ul li:not(:last-child) {
margin-bottom: 0.25rem;
}
@ -179,6 +197,7 @@
bottom: 0;
left: 0;
}
.img-ratio14_7 {
position: relative;
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:
// https://gitlab.com/idotj/mastodon-embed-feed-timeline
// Timeline settings
document.addEventListener("DOMContentLoaded", () => {
let mapi = new MastodonApi({
// Id of the <div> containing the timeline
container_body_id: 'mt-body',
// Preferred color theme: 'light', 'dark' or 'auto' (default: auto)
default_theme: 'auto',
// Your Mastodon instance
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',
// Maximum amount of toots to get (default: 20)
toots_limit: '20',
// Hide boosted toots (default: don't hide)
hide_reblog: false,
// Hide replies toots (default: don't hide)
hide_replies: false,
// Limit the text content to a maximum number of lines (default: unlimited)
text_max_lines: '0',
// Customize the text of the link pointing to the Mastodon page (appears after the last toot)
link_see_more: 'See more posts at Mastodon'
});
});
let MastodonApi = function (params_) {
// Endpoint access settings / default values
this.DEFAULT_THEME = params_.default_theme || 'auto';
this.INSTANCE_URI = params_.instance_uri;
this.USER_ID = params_.user_id || '';
this.PROFILE_NAME = this.USER_ID ? params_.profile_name : '';
@ -32,49 +52,27 @@ let MastodonApi = function (params_) {
// Target selector
this.mtBodyContainer = document.getElementById(params_.container_body_id);
// Toot interactions
this.mtBodyContainer.addEventListener('click', function (event) {
// 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');
}
}
// Apply selected appearance
this.applyTheme();
// Get the toots
this.getToots();
}
// Theme style
MastodonApi.prototype.applyTheme = function () {
const setTheme = function (theme) {
document.documentElement.setAttribute('data-theme', theme);
}
if (this.DEFAULT_THEME === 'auto') {
let systemTheme = window.matchMedia('(prefers-color-scheme: dark)');
systemTheme.matches ? setTheme('dark') : setTheme('light');
systemTheme.addEventListener('change', event => {
event.matches ? setTheme('dark') : setTheme('light');
});
} else {
setTheme(this.DEFAULT_THEME);
}
}
// Listing toots function
@ -280,6 +278,47 @@ MastodonApi.prototype.getToots = function () {
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
@ -308,10 +347,8 @@ MastodonApi.prototype.formatDate = function (date_) {
return displayDate;
};
// Loading spinner
function removeSpinner(element) {
removeSpinner = function (element) {
const spinnerCSS = 'loading-spinner';
// Find closest parent container (1st, 2nd or 3rd level)
let spinnerContainer = element.closest('.' + spinnerCSS);