Rearrange JS + CSS vars

CHANGELOG

@@ -1,3 +1,7 @@
+v3.2.2 - 06/02/2023
+- Rearrange JS functions
+- Use variables for CSS colors
+
 v3.2.1 - 04/02/2023
 - Add feature, show local feed insted of user feed
 

src/mastodon-timeline.css

@@ -1,8 +1,14 @@
-/* Mastodon embed feed timeline  v3.2.1 */
+/* Mastodon embed feed timeline  v3.2.2 */
 /* More info at: */
 /* https://gitlab.com/idotj/mastodon-embed-feed-timeline */
 
+/* Variables */
 :root {
+  --bg-color: #fff;
+  --bg-hover-color: #d9e1e8;
+  --line-gray-color: #c0cdd9;
+  --content-text: #000;
+  --link-color: #3a3bff;
   --text-max-lines: none;
 }
 
@@ -11,14 +17,14 @@
   height: calc(100% - 2rem);
   padding: 1rem 1.5rem;
   position: relative;
-  background: #fff;
+  background: var(--bg-color);
 }
 
 .mt-timeline a:link,
 .mt-timeline a:active,
 .mt-timeline a {
   text-decoration: none;
-  color: #3a3bff;
+  color: var(--link-color);
 }
 .mt-timeline a:hover {
   text-decoration: underline;
@@ -47,12 +53,12 @@
   position: relative;
   min-height: 60px;
   background-color: transparent;
-  border-bottom: 1px solid #dee2e6;
+  border-bottom: 1px solid var(--line-gray-color);
 }
 .mt-toot:hover,
 .mt-toot:focus {
   cursor: pointer;
-  background-color: #d9e1e8;
+  background-color: var(--bg-hover-color);
 }
 .mt-toot p:last-child {
   margin-bottom: 0;
@@ -69,7 +75,7 @@
   background-repeat: no-repeat;
   background-position: 50% 50%;
   background-size: contain;
-  background-color: #fff;
+  background-color: var(--bg-color);
   border-radius: 5px;
 }
 .mt-avatar-boosted {
@@ -87,7 +93,7 @@
   font-weight: 600;
 }
 .mt-user > a {
-  color: #000 !important;
+  color: var(--content-text) !important;
 }
 
 /* Text */
@@ -97,9 +103,9 @@
 .toot-text .spoiler-link {
   display: inline-block;
   border-radius: 2px;
-  background-color: #d9e1e8;
+  background-color: var(--bg-hover-color);
   border: 0;
-  color: #000;
+  color: var(--content-text);
   font-weight: 700;
   font-size: 11px;
   padding: 0 6px;

src/mastodon-timeline.js

@@ -1,4 +1,4 @@
-// Mastodon embed feed timeline v3.2.1
+// Mastodon embed feed timeline v3.2.2
 // More info at:
 // https://gitlab.com/idotj/mastodon-embed-feed-timeline
 
@@ -7,7 +7,7 @@ document.addEventListener("DOMContentLoaded", () => {
 	let mapi = new MastodonApi({
 		container_body_id: 'mt-body',
 		instance_uri: 'https://mastodon.online',
-		user_id: '180745',
+		user_id: '180745', // leave empty if prefer to show local instance toots
 		profile_name: '@idotj',
 		toots_limit: '20',
 		hide_reblog: false,
@@ -19,7 +19,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
 let MastodonApi = function (params_) {
 
-	// Endpoint access settings
+	// Endpoint access settings / default values
 	this.INSTANCE_URI = params_.instance_uri;
 	this.USER_ID = params_.user_id || '';
 	this.PROFILE_NAME = this.USER_ID ? params_.profile_name : '';
@@ -32,49 +32,26 @@ let MastodonApi = function (params_) {
 	// Target selector
 	this.mtBodyContainer = document.getElementById(params_.container_body_id);
 
-	// Get the toots
-	this.getToots();
-
 	// 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);
+			this.openTootURL(event);
 		}
 		// Check if clicked in Show More/Less button
 		if (event.target.localName == 'button' && event.target.className == 'spoiler-link') {
-			showTootSpoiler(event);
+			this.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);
+			this.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');
-		}
-	}
-
-	// Show/hide content if click on spoiler button
-	function showTootSpoiler(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
+	this.getToots();
 
 }
 
@@ -105,7 +82,7 @@ MastodonApi.prototype.getToots = function () {
 		.then(jsonData => {
 			// console.log('jsonData: ', jsonData);
 
-			// Clear the loading message
+			// Empty the <div> container
 			this.mtBodyContainer.innerHTML = '';
 
 			// Add toots
@@ -309,6 +286,28 @@ MastodonApi.prototype.formatDate = function (date_) {
 	return displayDate;
 };
 
+// Open Toot in a new page avoiding any other natural link
+MastodonApi.prototype.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
+MastodonApi.prototype.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');
+	}
+}
+
 // Loading spinner
 function removeSpinner(element) {
 	const spinnerCSS = 'loading-spinner';