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

Fix spoiler content and add crtl max lines of text

Browse Source
This commit is contained in:
idotj 2023-01-21 19:45:16 +01:00
parent 587bc25041
commit 9c929a20c8
4 changed files with 92 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG
View File

@ -1,3 +1,7 @@
21/01/2023
- Fix spoiler content show/hide
- Add feature, choose a maximum number of lines of text
02/12/2022
- Add feature, hide boosts toots
- Add feature, hide replies toots

19
README.md
View File

@ -52,19 +52,22 @@ Check the `src=""` url, your user id is between `/accounts/avatars/` and `/origi
- 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>
Also you can customize some parameters:
Here you have some parameters to customize your embed timeline:
```
// The maximun amount of toots to get from the user
toots_limit: 13
// The maximun amount of toots to get from the user (default: 20)
toots_limit: 20
// Hide the boosted toots
hide_reblog: true
// Hide the boosted toots (default: don't hide)
hide_reblog: false
// Hide the replies from the user
hide_replies: true
// Hide the replies from the user (default: don't hide)
hide_replies: false
// Customize the text of the button after the last toot
// Limit the text content to a maximum number of lines (default: unlimited)
text_max_lines: 0
// Customize the text of the button linking to your Mastodon profile (appears after the last toot)
btn_see_more: 'See more posts at Mastodon'
```

32
src/mastodon-timeline.css
View File

@ -2,6 +2,10 @@
/* More info at: */
/* https://gitlab.com/idotj/mastodon-embed-feed-timeline */
:root {
--text-max-lines: none;
}
/* Main container */
.mt-timeline {
height: calc(100% - 4rem);
@ -79,13 +83,37 @@
left: 25px;
}
/* Message */
/* Text */
.toot-text {
margin-bottom: 0.25rem;
}
.toot-text .ellipsis::after {
.toot-text .spoiler-link {
display: inline-block;
border-radius: 2px;
background-color: #d9e1e8;
border: 0;
color: #000;
font-weight: 700;
font-size: 11px;
padding: 0 6px;
text-transform: uppercase;
line-height: 20px;
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 {
color: darkred;
background: lightpink;

63
src/mastodon-timeline.js
View File

@ -8,11 +8,12 @@ document.addEventListener("DOMContentLoaded", () => {
container_id: 'mt-timeline',
container_body_id: 'mt-body',
instance_uri: 'https://mastodon.online',
user_id: '180745',
user_id: 180745,
profile_name: '@idotj',
toots_limit: 13,
toots_limit: 20,
hide_reblog: false,
hide_replies: false,
hide_replies: false,
text_max_lines: 0,
btn_see_more: 'See more posts at Mastodon'
});
});
@ -25,8 +26,9 @@ let MastodonApi = function (params_) {
this.PROFILE_NAME = params_.profile_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.BTN_SEE_MORE = params_.btn_see_more || 'See more'
this.HIDE_REPLIES = typeof params_.hide_replies !== 'undefined' ? params_.hide_replies : false;
this.TEXT_MAX_LINES = params_.text_max_lines || 0;
this.BTN_SEE_MORE = params_.btn_see_more;
// Target selectors
this.mtIdContainer = document.getElementById(params_.container_id);
@ -39,9 +41,23 @@ let MastodonApi = function (params_) {
this.mtIdContainer.addEventListener('click', function (event) {
let urlToot = event.target.closest('.mt-toot').dataset.location;
// Open Toot in new page avoiding any other natural link
if (event.target.localName != 'a' && event.target.localName != 'span' && urlToot) {
if (event.target.localName !== 'a' && event.target.localName !== 'span' && event.target.localName !== 'button' && urlToot) {
window.open(urlToot, '_blank');
}
// Show/hide content if click on spoiler button
if (event.target.localName == 'button' && event.target.className == 'spoiler-link') {
let spoilerText = event.target.nextSibling;
let spoilerBtnText = event.target.textContent;
spoilerText.classList.toggle('spoiler-text');
if (spoilerBtnText == 'Show more') {
event.target.textContent = 'Show less';
event.target.setAttribute('aria-expanded', 'true');
} else {
event.target.textContent = 'Show more';
event.target.setAttribute('aria-expanded', 'false');
}
}
});
}
@ -56,7 +72,7 @@ MastodonApi.prototype.getToots = function () {
})
.then(response => response.json())
.then(jsonData => {
// console.log('jsonData: ', jsonData);
console.log('jsonData: ', jsonData);
// Clear the loading message
this.mtBodyContainer.innerHTML = '';
@ -65,9 +81,9 @@ MastodonApi.prototype.getToots = function () {
for (let i in jsonData) {
// List only public toots
if (jsonData[i].visibility == 'public') {
if(mapi.HIDE_REBLOG && jsonData[i].reblog || mapi.HIDE_REPLIES && jsonData[i].in_reply_to_id){
if (mapi.HIDE_REBLOG && jsonData[i].reblog || mapi.HIDE_REPLIES && jsonData[i].in_reply_to_id) {
// Nothing here (Don't append boosts and/or replies toots)
}else{
} else {
appendToot.call(mapi, jsonData[i]);
}
}
@ -81,7 +97,9 @@ MastodonApi.prototype.getToots = function () {
}
// Insert button after last toot to visit account page
this.mtBodyContainer.insertAdjacentHTML('beforeend', '<div class="mt-seeMore"><a href="' + mapi.INSTANCE_URI + '/' + mapi.PROFILE_NAME + '" class="btn" target="_blank" rel="noopener noreferrer">' + mapi.BTN_SEE_MORE + '</a></div>');
if (mapi.BTN_SEE_MORE) {
this.mtBodyContainer.insertAdjacentHTML('beforeend', '<div class="mt-seeMore"><a href="' + mapi.INSTANCE_URI + '/' + mapi.PROFILE_NAME + '" class="btn" target="_blank" rel="noopener noreferrer">' + mapi.BTN_SEE_MORE + '</a></div>');
}
})
.catch(err => {
this.mtBodyContainer.innerHTML = '<div class="d-flex h-100"><div class="w-100 my-auto text-center">✖️<br/>Request Failed:<br/>' + err + '</div></div>';
@ -141,22 +159,35 @@ MastodonApi.prototype.getToots = function () {
date = this.formatDate(status_.created_at);
}
// Main content
if (status_.spoiler_text != '') {
// Main text
let text_css = '';
if (this.TEXT_MAX_LINES) {
text_css = 'truncate';
document.documentElement.style.setProperty('--text-max-lines', this.TEXT_MAX_LINES);
}
if (status_.spoiler_text !== '') {
content =
'<div class="toot-text">'
+ status_.spoiler_text
+ ' [Show more...]'
+ ' <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 != '') {
} else if (status_.reblog && status_.reblog.content !== '') {
content =
'<div class="toot-text">'
'<div class="toot-text' + ' ' + text_css + '">'
+ '<div>'
+ status_.reblog.content
+ '</div>'
+ '</div>';
} else {
content =
'<div class="toot-text">'
'<div class="toot-text' + ' ' + text_css + '">'
+ '<div>'
+ status_.content
+ '</div>'
+ '</div>';
}