From a17b812587f81f2bada22ca4f426f3e044a90fbe Mon Sep 17 00:00:00 2001
From: idotj <info@idotj.com>
Date: Sun, 23 May 2021 17:34:45 +0200
Subject: [PATCH] add avatar name + use Id instead of css selector + rearrange
 functions

---
 src/index.html            | 16 ++++-----
 src/mastodon-timeline.css | 14 ++++++++
 src/mastodon-timeline.js  | 74 ++++++++++++++++++++-------------------
 3 files changed, 59 insertions(+), 45 deletions(-)
diff --git a/src/index.html b/src/index.html
index e66dddf..188e811 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,18 +1,17 @@
 <!doctype html>
-<html lang="en" dir="ltr">
+<html lang="en">
 <head>
 	<meta charset="utf-8">
-	<title>Mastodon timeline</title>
+	<title>Mastodon embed timeline</title>
 	<meta name="author" content="i.j">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-  	<!-- <base href="https://www.idotj.com/" /> -->
-  	<meta name="keywords" content="" />
-	<meta name="description" content="" />			
+  	<meta name="keywords" content="mastodon, embed timeline" />
+	<meta name="description" content="Mastodon embed timeline" />			
   	<link rel="stylesheet" href="mastodon-timeline.css">
 	<style>
 	*{
-	margin:0;
-	padding:0;
+		margin:0;
+		padding:0;
 	}
 	html{
 		height:100%
@@ -37,13 +36,12 @@
 <body>
 	<div class="dummy-container">
 		<div id="mt-timeline" class="mt-timeline">
-			<div class="mt-body">
+			<div id="mt-body" class="mt-body">
 				<div class="loading-spinner"></div>
 			</div>
 		</div>
 	</div>
 	
-
 	<script src='mastodon-timeline.js'>
 	</script>
 
diff --git a/src/mastodon-timeline.css b/src/mastodon-timeline.css
index 1487ed4..96e3e81 100644
--- a/src/mastodon-timeline.css
+++ b/src/mastodon-timeline.css
@@ -1,4 +1,5 @@
 /* Mastodon embed timeline */
+
 /* Main container */
 .mt-timeline {
   height: calc(100% - 4rem);
@@ -162,3 +163,16 @@ text-align: center;
 	padding: 0 2rem;
 	text-align: center;
 }
+
+/* Hidden element */ 
+.visually-hidden {
+	position: absolute !important;
+	width: 1px !important;
+	height: 1px !important;
+	padding: 0 !important;
+	margin: -1px !important;
+	overflow: hidden !important;
+	clip: rect(0, 0, 0, 0) !important;
+	white-space: nowrap !important;
+	border: 0 !important;
+}
diff --git a/src/mastodon-timeline.js b/src/mastodon-timeline.js
index 73edd1e..b79a7db 100644
--- a/src/mastodon-timeline.js
+++ b/src/mastodon-timeline.js
@@ -1,13 +1,11 @@
-// Timeline JS (Mastodon)
+// Mastodon embed timeline
 // Forked from: https://github.com/AzetJP/mastodon-timeline-widget
 
-// TODO: optimize selectors and add first the #id (target_selector)
-
 // Account settings
 document.addEventListener("DOMContentLoaded", () => {
 	let mapi = new MastodonApi({
 		container_id: 'mt-timeline',
-		container_body_css: '.mt-body',
+		container_body_id: 'mt-body',
 		instance_uri: 'https://mastodon.online',
 		account_id: '180745',
 		profile_name: '@idotj',
@@ -27,7 +25,7 @@ let MastodonApi = function (params_) {
 
 	// Target selectors
 	this.mtIdContainer = document.getElementById(params_.container_id);
-	this.mtBodyContainer = document.querySelector(params_.container_body_css);
+	this.mtBodyContainer = document.getElementById(params_.container_body_id);
 
 	// Get the toots
 	this.getToots();
@@ -94,6 +92,9 @@ MastodonApi.prototype.getToots = function () {
 				'<a href="' + status_.reblog.account.url + '" class="mt-avatar mt-avatar-boosted" style="background-image:url(' + status_.reblog.account.avatar + ');" rel="noopener noreferrer" tabindex="-1" target="_blank">'
 					+ '<div class="mt-avatar mt-avatar-booster" style="background-image:url(' + status_.account.avatar + ');">'
 					+ '</div>'
+					+ '<span class="visually-hidden">'
+						+ status_.account.username
+					+ '</span>'						
 				+ '</a>';
 
 			// User name and url
@@ -104,8 +105,8 @@ MastodonApi.prototype.getToots = function () {
 					+ '</a>'
 				+ '</div>';
 
-			// Toot date
-			date = prepareDateDisplay(status_.reblog.created_at);				
+			// Date
+			date = formatDate(status_.reblog.created_at);				
 		} else {
 			// STANDARD toot
 			// Toot url
@@ -114,6 +115,9 @@ MastodonApi.prototype.getToots = function () {
 			// Avatar
 			avatar =
 				'<a href="' + status_.account.url + '" class="mt-avatar" style="background-image:url(' + status_.account.avatar + ');" rel="noopener noreferrer" tabindex="-1" target="_blank">'
+					+ '<span class="visually-hidden">'
+						+ status_.account.username
+					+ '</span>'				
 				+ '</a>';
 
 			// User name and url
@@ -124,8 +128,8 @@ MastodonApi.prototype.getToots = function () {
 					+ '</a>'
 				+ '</div>';
 
-			// Toot date
-			date = prepareDateDisplay(status_.created_at);				
+			// Date
+			date = formatDate(status_.created_at);				
 		}
 
 		// Main content
@@ -168,7 +172,7 @@ MastodonApi.prototype.getToots = function () {
 				+'</div>';
 		}
 
-		// Format date
+		// Date
 		let timestamp =
 			'<div class="toot-date">'
 				+ '<a href="' + url + '" rel="noopener noreferrer" tabindex="-1" target="_blank">'
@@ -190,34 +194,8 @@ MastodonApi.prototype.getToots = function () {
 		this.mtBodyContainer.insertAdjacentHTML('beforeend', toot);
 	};
 
-	// Display toot date
-	let prepareDateDisplay = function (date_) {
-		let displayDate = "";
-		const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
-			"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
-		];
-
-		let date = new Date(date_);
-
-		displayDate = monthNames[date.getMonth()]
-			+ " " + date.getDate()
-			+ ", " + date.getFullYear();
-
-		return displayDate;
-	};
-
 };
 
-// Loading spinner
-function removeSpinner(element) {
-	const spinnerCSS = 'loading-spinner';
-	// Find closest parent container (1st, 2nd or 3rd level)
-	let spinnerContainer = element.closest('.' + spinnerCSS);
-	if(spinnerContainer){
-		spinnerContainer.classList.remove(spinnerCSS);
-	}
-}
-
 // Place media
 MastodonApi.prototype.replaceMedias = function (media_, spoiler_) {
 	let spoiler = spoiler_ || false;
@@ -229,3 +207,27 @@ MastodonApi.prototype.replaceMedias = function (media_, spoiler_) {
 	return pic;
 };
 
+// Format date
+MastodonApi.prototype.formatDate = function (date_) {
+	const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
+		"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
+	];
+
+	let date = new Date(date_);
+
+	let displayDate = monthNames[date.getMonth()]
+		+ " " + date.getDate()
+		+ ", " + date.getFullYear();
+
+	return displayDate;
+};
+
+// Loading spinner
+function removeSpinner(element) {
+	const spinnerCSS = 'loading-spinner';
+	// Find closest parent container (1st, 2nd or 3rd level)
+	let spinnerContainer = element.closest('.' + spinnerCSS);
+	if(spinnerContainer){
+		spinnerContainer.classList.remove(spinnerCSS);
+	}
+}
\ No newline at end of file
