diff --git a/CHANGELOG b/CHANGELOG index f68cae8..fbb3296 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -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 diff --git a/README.md b/README.md index 32469e0..470b250 100644 --- a/README.md +++ b/README.md @@ -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: https://prouser123.me/mastodon-userid-lookup/ -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' ``` diff --git a/src/mastodon-timeline.css b/src/mastodon-timeline.css index 396f6e4..8cd44a8 100644 --- a/src/mastodon-timeline.css +++ b/src/mastodon-timeline.css @@ -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; diff --git a/src/mastodon-timeline.js b/src/mastodon-timeline.js index c54f6f4..0a21855 100644 --- a/src/mastodon-timeline.js +++ b/src/mastodon-timeline.js @@ -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', '
' + mapi.BTN_SEE_MORE + '
'); + if (mapi.BTN_SEE_MORE) { + this.mtBodyContainer.insertAdjacentHTML('beforeend', '
' + mapi.BTN_SEE_MORE + '
'); + } }) .catch(err => { this.mtBodyContainer.innerHTML = '
✖️
Request Failed:
' + err + '
'; @@ -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 = '
' + status_.spoiler_text - + ' [Show more...]' + + ' ' + + '
' + + status_.content + + '
' + '
'; - } else if (status_.reblog && status_.reblog.content != '') { + } else if (status_.reblog && status_.reblog.content !== '') { content = - '
' + '
' + + '
' + status_.reblog.content + + '
' + '
'; } else { content = - '
' + '
' + + '
' + status_.content + + '
' + '
'; }