Fix spoiler content and add crtl max lines of text

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

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:  
 <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
+    // The maximun amount of toots to get from the user (default: 20)
-    toots_limit: 13
+    toots_limit: 20
 
-    // Hide the boosted toots
+    // Hide the boosted toots (default: don't hide)
-    hide_reblog: true
+    hide_reblog: false
 
-    // Hide the replies from the user
+    // Hide the replies from the user (default: don't hide)
-    hide_replies: true
+    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'
 
 ```

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;

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.HIDE_REPLIES = typeof params_.hide_replies !== 'undefined' ? params_.hide_replies : false;
-	this.BTN_SEE_MORE = params_.btn_see_more || 'See more'
+	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
+		// Main text
-		if (status_.spoiler_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>';
 		}