kunjinkao/mastodon-embed-timeline
1
0
Fork 0
forked from mirror/mastodon-embed-timeline
Code Pull Requests Activity

Improve Tab navigation + styles

Browse Source
This commit is contained in:
idotj 2023-01-28 12:54:15 +01:00
parent a45904e637
commit acabd8a9f8
4 changed files with 68 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -24,7 +24,7 @@ Now call each one in your page using the `<link>` and `<script>` tag:
Then copy the following html structure: 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 id="mt-body" class="mt-body">
<div class="loading-spinner"></div> <div class="loading-spinner"></div>
</div> </div>

6
src/index.html
View File

@ -27,7 +27,7 @@
.dummy-container { .dummy-container {
height:calc(100% - 4rem); height:calc(100% - 4rem);
margin: 0 auto; margin: 0 auto;
max-width: 30rem; max-width: 26rem;
padding: 2rem; padding: 2rem;
} }
</style> </style>
@ -35,8 +35,8 @@
<body> <body>
<div class="dummy-container"> <div class="dummy-container">
<div id="mt-timeline" class="mt-timeline"> <div class="mt-timeline">
<div id="mt-body" class="mt-body"> <div id="mt-body" class="mt-body" role="feed">
<div class="loading-spinner"></div> <div class="loading-spinner"></div>
</div> </div>
</div> </div>

35
src/mastodon-timeline.css
View File

@ -8,17 +8,20 @@
/* Main container */ /* Main container */
.mt-timeline { .mt-timeline {
height: calc(100% - 4rem); height: calc(100% - 2rem);
padding: 2rem 3rem; padding: 1rem 1.5rem;
position: relative; position: relative;
background: lightgray; background: #fff;
} }
.mt-timeline a:link, .mt-timeline a:link,
.mt-timeline a:active, .mt-timeline a:active,
.mt-timeline a { .mt-timeline a {
text-decoration: none; text-decoration: none;
color: darkblue; color: #3a3bff;
}
.mt-timeline a:hover {
text-decoration: underline;
} }
.mt-body { .mt-body {
@ -39,26 +42,23 @@
/* Toot container */ /* Toot container */
.mt-toot { .mt-toot {
margin: 0 0.5rem 0 0; margin: 0.25rem 0.5rem 0.25rem 0.25rem;
padding: 1rem 0 2rem 65px; padding: 1rem 0 2rem 65px;
position: relative; position: relative;
min-height: 60px; min-height: 60px;
background-color: transparent; background-color: transparent;
border-bottom: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6;
} }
.mt-toot:hover { .mt-toot:hover,
.mt-toot:focus {
cursor: pointer; cursor: pointer;
background-color: rgba(124, 124, 124, 0.2); background-color: #d9e1e8;
} }
.mt-toot p:last-child { .mt-toot p:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
/* User icon */ /* User icon */
.mt-user {
display: table;
font-weight: 600;
}
.mt-avatar { .mt-avatar {
position: absolute; position: absolute;
top: 20px; top: 20px;
@ -82,6 +82,13 @@
top: 25px; top: 25px;
left: 25px; left: 25px;
} }
.mt-user {
display: table;
font-weight: 600;
}
.mt-user > a {
color: #000 !important;
}
/* Text */ /* Text */
.toot-text { .toot-text {
@ -101,7 +108,7 @@
cursor: pointer; cursor: pointer;
vertical-align: top; vertical-align: top;
} }
.toot-text .spoiler-text{ .toot-text .spoiler-text {
display: none; display: none;
} }
.toot-text.truncate { .toot-text.truncate {
@ -115,8 +122,8 @@
} }
.mt-error { .mt-error {
color: darkred; color: #8b0000;
background: lightpink; background: #f1a0ad;
margin: 5px; margin: 5px;
padding: 10px; padding: 10px;
} }

43
src/mastodon-timeline.js
View File

@ -5,10 +5,11 @@
// Timeline settings // Timeline settings
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
let mapi = new MastodonApi({ let mapi = new MastodonApi({
container_id: 'mt-timeline',
container_body_id: 'mt-body', container_body_id: 'mt-body',
instance_uri: 'https://mastodon.online', instance_uri: 'https://mastodon.online',
// instance_uri: 'https://toot.io',
user_id: '180745', user_id: '180745',
// user_id: '109687697476761261',
profile_name: '@idotj', profile_name: '@idotj',
toots_limit: '20', toots_limit: '20',
hide_reblog: false, hide_reblog: false,
@ -30,22 +31,40 @@ let MastodonApi = function (params_) {
this.TEXT_MAX_LINES = params_.text_max_lines || '0'; this.TEXT_MAX_LINES = params_.text_max_lines || '0';
this.BTN_SEE_MORE = params_.btn_see_more; this.BTN_SEE_MORE = params_.btn_see_more;
// Target selectors // Target selector
this.mtIdContainer = document.getElementById(params_.container_id);
this.mtBodyContainer = document.getElementById(params_.container_body_id); this.mtBodyContainer = document.getElementById(params_.container_body_id);
// Get the toots // Get the toots
this.getToots(); this.getToots();
// Toot interactions // 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; 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) { if (event.target.localName !== 'a' && event.target.localName !== 'span' && event.target.localName !== 'button' && urlToot) {
window.open(urlToot, '_blank'); window.open(urlToot, '_blank');
} }
}
// Show/hide content if click on spoiler button // Show/hide content if click on spoiler button
if (event.target.localName == 'button' && event.target.className == 'spoiler-link') { function showTootSpoiler(event) {
let spoilerText = event.target.nextSibling; let spoilerText = event.target.nextSibling;
let spoilerBtnText = event.target.textContent; let spoilerBtnText = event.target.textContent;
@ -57,8 +76,8 @@ let MastodonApi = function (params_) {
spoilerBtnText = 'Show more'; spoilerBtnText = 'Show more';
event.target.setAttribute('aria-expanded', 'false'); event.target.setAttribute('aria-expanded', 'false');
} }
} }
});
} }
@ -80,11 +99,11 @@ MastodonApi.prototype.getToots = function () {
// Add toots // Add toots
for (let i in jsonData) { for (let i in jsonData) {
// List only public toots // 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) { 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) // Nothing here (Don't append boosts and/or replies toots)
} else { } 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 // Inner function to add each toot content in container
let appendToot = function (status_) { let appendToot = function (status_, index) {
let avatar, user, content, url, date; let avatar, user, content, url, date;
if (status_.reblog) { if (status_.reblog) {
@ -232,14 +251,14 @@ MastodonApi.prototype.getToots = function () {
// Add all to main toot container // Add all to main toot container
let toot = 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 + avatar
+ user + user
+ content + content
+ media + media
+ poll + poll
+ timestamp + timestamp
+ '</div>'; + '</article>';
this.mtBodyContainer.insertAdjacentHTML('beforeend', toot); this.mtBodyContainer.insertAdjacentHTML('beforeend', toot);
}; };