From acabd8a9f883bde00d89304ae205802214d91420 Mon Sep 17 00:00:00 2001
From: idotj <info@idotj.com>
Date: Sat, 28 Jan 2023 12:54:15 +0100
Subject: [PATCH] Improve Tab navigation + styles

---
 README.md                 |  2 +-
 src/index.html            |  6 ++--
 src/mastodon-timeline.css | 37 +++++++++++++---------
 src/mastodon-timeline.js  | 65 +++++++++++++++++++++++++--------------
 4 files changed, 68 insertions(+), 42 deletions(-)
diff --git a/README.md b/README.md
index 2e3da1f..9ab3627 100644
--- a/README.md
+++ b/README.md
@@ -24,7 +24,7 @@ Now call each one in your page using the `<link>` and `<script>` tag:
 Then copy the following html structure:
 
 ```
-<div id="mt-timeline" class="mt-timeline">
+<div class="mt-timeline">
     <div id="mt-body" class="mt-body">
         <div class="loading-spinner"></div>
     </div>
diff --git a/src/index.html b/src/index.html
index 188e811..f4f24e6 100644
--- a/src/index.html
+++ b/src/index.html
@@ -27,7 +27,7 @@
 	.dummy-container {
 		height:calc(100% - 4rem);
 		margin: 0 auto;
-		max-width: 30rem;
+		max-width: 26rem;
 		padding: 2rem;
 	}
 	</style>
@@ -35,8 +35,8 @@
 
 <body>
 	<div class="dummy-container">
-		<div id="mt-timeline" class="mt-timeline">
-			<div id="mt-body" class="mt-body">
+		<div class="mt-timeline">
+			<div id="mt-body" class="mt-body" role="feed">
 				<div class="loading-spinner"></div>
 			</div>
 		</div>
diff --git a/src/mastodon-timeline.css b/src/mastodon-timeline.css
index 8cd44a8..c22010e 100644
--- a/src/mastodon-timeline.css
+++ b/src/mastodon-timeline.css
@@ -8,17 +8,20 @@
 
 /* Main container */
 .mt-timeline {
-  height: calc(100% - 4rem);
-  padding: 2rem 3rem;
+  height: calc(100% - 2rem);
+  padding: 1rem 1.5rem;
   position: relative;
-  background: lightgray;
+  background: #fff;
 }
 
 .mt-timeline a:link,
 .mt-timeline a:active,
 .mt-timeline a {
   text-decoration: none;
-  color: darkblue;
+  color: #3a3bff;
+}
+.mt-timeline a:hover {
+  text-decoration: underline;
 }
 
 .mt-body {
@@ -39,26 +42,23 @@
 
 /* Toot container */
 .mt-toot {
-  margin: 0 0.5rem 0 0;
+  margin: 0.25rem 0.5rem 0.25rem 0.25rem;
   padding: 1rem 0 2rem 65px;
   position: relative;
   min-height: 60px;
   background-color: transparent;
   border-bottom: 1px solid #dee2e6;
 }
-.mt-toot:hover {
+.mt-toot:hover,
+.mt-toot:focus {
   cursor: pointer;
-  background-color: rgba(124, 124, 124, 0.2);
+  background-color: #d9e1e8;
 }
 .mt-toot p:last-child {
   margin-bottom: 0;
 }
 
 /* User icon */
-.mt-user {
-  display: table;
-  font-weight: 600;
-}
 .mt-avatar {
   position: absolute;
   top: 20px;
@@ -82,6 +82,13 @@
   top: 25px;
   left: 25px;
 }
+.mt-user {
+  display: table;
+  font-weight: 600;
+}
+.mt-user > a {
+  color: #000 !important;
+}
 
 /* Text */
 .toot-text {
@@ -89,7 +96,7 @@
 }
 .toot-text .spoiler-link {
   display: inline-block;
-  border-radius: 2px;  
+  border-radius: 2px;
   background-color: #d9e1e8;
   border: 0;
   color: #000;
@@ -101,7 +108,7 @@
   cursor: pointer;
   vertical-align: top;
 }
-.toot-text .spoiler-text{
+.toot-text .spoiler-text {
   display: none;
 }
 .toot-text.truncate {
@@ -115,8 +122,8 @@
 }
 
 .mt-error {
-  color: darkred;
-  background: lightpink;
+  color: #8b0000;
+  background: #f1a0ad;
   margin: 5px;
   padding: 10px;
 }
diff --git a/src/mastodon-timeline.js b/src/mastodon-timeline.js
index 4d0826c..0cb6374 100644
--- a/src/mastodon-timeline.js
+++ b/src/mastodon-timeline.js
@@ -5,10 +5,11 @@
 // Timeline settings
 document.addEventListener("DOMContentLoaded", () => {
 	let mapi = new MastodonApi({
-		container_id: 'mt-timeline',
 		container_body_id: 'mt-body',
 		instance_uri: 'https://mastodon.online',
+		// instance_uri: 'https://toot.io',
 		user_id: '180745',
+		// user_id: '109687697476761261',
 		profile_name: '@idotj',
 		toots_limit: '20',
 		hide_reblog: false,
@@ -30,35 +31,53 @@ let MastodonApi = function (params_) {
 	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);
+	// Target selector
 	this.mtBodyContainer = document.getElementById(params_.container_body_id);
 
 	// Get the toots
 	this.getToots();
 
 	// Toot interactions
-	this.mtIdContainer.addEventListener('click', function (event) {
+	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') {
+			showTootSpoiler(event);
+		}
+	});
+	this.mtBodyContainer.addEventListener('keydown', function (event) {
+		if (event.code === 'Enter' && event.target.localName == 'article') {
+			console.log('key event: ', event);
+			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;
-		// Open Toot in new page avoiding any other natural link
 		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') {
-				spoilerBtnText = 'Show less';
-				event.target.setAttribute('aria-expanded', 'true');
-			} else {
-				spoilerBtnText = 'Show more';
-				event.target.setAttribute('aria-expanded', 'false');
-			}
+	// 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');
 		}
-	});
+
+	}
 
 }
 
@@ -80,11 +99,11 @@ MastodonApi.prototype.getToots = function () {
 			// Add toots
 			for (let i in jsonData) {
 				// List only public toots
-				if (jsonData[i].visibility == 'public') {
+				if (jsonData[i].visibility == 'public' || jsonData[i].visibility == 'unlisted') {
 					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 {
-						appendToot.call(mapi, jsonData[i]);
+						appendToot.call(mapi, jsonData[i], i);
 					}
 				}
 			}
@@ -106,7 +125,7 @@ MastodonApi.prototype.getToots = function () {
 		});
 
 	// Inner function to add each toot content in container
-	let appendToot = function (status_) {
+	let appendToot = function (status_, index) {
 		let avatar, user, content, url, date;
 
 		if (status_.reblog) {
@@ -232,14 +251,14 @@ MastodonApi.prototype.getToots = function () {
 
 		// Add all to main toot container
 		let toot =
-			'<div class="mt-toot border-bottom" data-location="' + url + '">'
+			'<article class="mt-toot border-bottom" aria-posinset="' + (Number(index) + 1) + '" aria-setsize="' + this.TOOTS_LIMIT + '" data-location="' + url + '" tabindex="0">'
 			+ avatar
 			+ user
 			+ content
 			+ media
 			+ poll
 			+ timestamp
-			+ '</div>';
+			+ '</article>';
 
 		this.mtBodyContainer.insertAdjacentHTML('beforeend', toot);
 	};
