mirror/mastodon-embed-timeline
1
0
Fork 1
mirror of https://gitlab.com/idotj/mastodon-embed-timeline.git synced 2025-05-24 08:52:46 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

add avatar name + use Id instead of css selector + rearrange functions

Browse Source
This commit is contained in:
idotj 2021-05-23 17:34:45 +02:00
parent 396e6433f9
commit a17b812587
3 changed files with 59 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/index.html
View File

@ -1,18 +1,17 @@
<!doctype html> <!doctype html>
<html lang="en" dir="ltr"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Mastodon timeline</title> <title>Mastodon embed timeline</title>
<meta name="author" content="i.j"> <meta name="author" content="i.j">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <base href="https://www.idotj.com/" /> --> <meta name="keywords" content="mastodon, embed timeline" />
<meta name="keywords" content="" /> <meta name="description" content="Mastodon embed timeline" />
<meta name="description" content="" />
<link rel="stylesheet" href="mastodon-timeline.css"> <link rel="stylesheet" href="mastodon-timeline.css">
<style> <style>
*{ *{
margin:0; margin:0;
padding:0; padding:0;
} }
html{ html{
height:100% height:100%
@ -37,13 +36,12 @@
<body> <body>
<div class="dummy-container"> <div class="dummy-container">
<div id="mt-timeline" class="mt-timeline"> <div id="mt-timeline" class="mt-timeline">
<div class="mt-body"> <div id="mt-body" class="mt-body">
<div class="loading-spinner"></div> <div class="loading-spinner"></div>
</div> </div>
</div> </div>
</div> </div>
<script src='mastodon-timeline.js'> <script src='mastodon-timeline.js'>
</script> </script>

14
src/mastodon-timeline.css
View File

@ -1,4 +1,5 @@
/* Mastodon embed timeline */ /* Mastodon embed timeline */
/* Main container */ /* Main container */
.mt-timeline { .mt-timeline {
height: calc(100% - 4rem); height: calc(100% - 4rem);
@ -162,3 +163,16 @@ text-align: center;
padding: 0 2rem; padding: 0 2rem;
text-align: center; 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;
}

74
src/mastodon-timeline.js
View File

@ -1,13 +1,11 @@
// Timeline JS (Mastodon) // Mastodon embed timeline
// Forked from: https://github.com/AzetJP/mastodon-timeline-widget // Forked from: https://github.com/AzetJP/mastodon-timeline-widget
// TODO: optimize selectors and add first the #id (target_selector)
// Account settings // Account settings
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
let mapi = new MastodonApi({ let mapi = new MastodonApi({
container_id: 'mt-timeline', container_id: 'mt-timeline',
container_body_css: '.mt-body', container_body_id: 'mt-body',
instance_uri: 'https://mastodon.online', instance_uri: 'https://mastodon.online',
account_id: '180745', account_id: '180745',
profile_name: '@idotj', profile_name: '@idotj',
@ -27,7 +25,7 @@ let MastodonApi = function (params_) {
// Target selectors // Target selectors
this.mtIdContainer = document.getElementById(params_.container_id); 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 // Get the toots
this.getToots(); 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">' '<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 class="mt-avatar mt-avatar-booster" style="background-image:url(' + status_.account.avatar + ');">'
+ '</div>' + '</div>'
+ '<span class="visually-hidden">'
+ status_.account.username
+ '</span>'
+ '</a>'; + '</a>';
// User name and url // User name and url
@ -104,8 +105,8 @@ MastodonApi.prototype.getToots = function () {
+ '</a>' + '</a>'
+ '</div>'; + '</div>';
// Toot date // Date
date = prepareDateDisplay(status_.reblog.created_at); date = formatDate(status_.reblog.created_at);
} else { } else {
// STANDARD toot // STANDARD toot
// Toot url // Toot url
@ -114,6 +115,9 @@ MastodonApi.prototype.getToots = function () {
// Avatar // Avatar
avatar = avatar =
'<a href="' + status_.account.url + '" class="mt-avatar" style="background-image:url(' + status_.account.avatar + ');" rel="noopener noreferrer" tabindex="-1" target="_blank">' '<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>'; + '</a>';
// User name and url // User name and url
@ -124,8 +128,8 @@ MastodonApi.prototype.getToots = function () {
+ '</a>' + '</a>'
+ '</div>'; + '</div>';
// Toot date // Date
date = prepareDateDisplay(status_.created_at); date = formatDate(status_.created_at);
} }
// Main content // Main content
@ -168,7 +172,7 @@ MastodonApi.prototype.getToots = function () {
+'</div>'; +'</div>';
} }
// Format date // Date
let timestamp = let timestamp =
'<div class="toot-date">' '<div class="toot-date">'
+ '<a href="' + url + '" rel="noopener noreferrer" tabindex="-1" target="_blank">' + '<a href="' + url + '" rel="noopener noreferrer" tabindex="-1" target="_blank">'
@ -190,34 +194,8 @@ MastodonApi.prototype.getToots = function () {
this.mtBodyContainer.insertAdjacentHTML('beforeend', toot); 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 // Place media
MastodonApi.prototype.replaceMedias = function (media_, spoiler_) { MastodonApi.prototype.replaceMedias = function (media_, spoiler_) {
let spoiler = spoiler_ || false; let spoiler = spoiler_ || false;
@ -229,3 +207,27 @@ MastodonApi.prototype.replaceMedias = function (media_, spoiler_) {
return pic; 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);
}
}