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

Merge branch '3.3.0' into 'master'

Browse Source 
3.3.0

See merge request idotj/mastodon-embed-feed-timeline!11
This commit is contained in:
i.j 2023-03-01 13:57:02 +00:00
commit fd4739d834
4 changed files with 87 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
CHANGELOG
View File

@ -1,3 +1,9 @@
v3.3.0 - 01/03/2023
- Simplify timeline container CSS
- Fix WCAG conflict with role=feed
- Open @mention link in a new tab/window
- Add scroll-bar styles (webkit)
v3.2.9 - 21/02/2023 v3.2.9 - 21/02/2023
- Add dark theme - Add dark theme
- Fix click on images - Fix click on images

21
src/index.html
View File

@ -1,5 +1,6 @@
<!doctype html> <!doctype html>
<html lang="en" data-theme=""> <html lang="en" data-theme="">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Mastodon embed timeline</title> <title>Mastodon embed timeline</title>
@ -9,26 +10,27 @@
<meta name="description" content="Mastodon embed timeline" /> <meta name="description" content="Mastodon embed timeline" />
<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%
} }
body{
body {
height: 100%; height: 100%;
background: lightslategray; background: lightslategray;
font-size: 16px; font-size: 16px;
font-family: Arial, Helvetica; font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
} }
.dummy-container { .dummy-container {
height: calc(100% - 4rem); width: 100%;
margin: 0 auto;
max-width: 26rem; max-width: 26rem;
padding: 2rem; height: calc(100% - 4rem);
margin: 2rem auto;
} }
</style> </style>
</head> </head>
@ -44,7 +46,6 @@
<script src='mastodon-timeline.js'> <script src='mastodon-timeline.js'>
</script> </script>
</body> </body>
</html> </html>

55
src/mastodon-timeline.css
View File

@ -1,4 +1,4 @@
/* Mastodon embed feed timeline v3.2.9 */ /* Mastodon embed feed timeline v3.3.0 */
/* More info at: */ /* More info at: */
/* https://gitlab.com/idotj/mastodon-embed-feed-timeline */ /* https://gitlab.com/idotj/mastodon-embed-feed-timeline */
@ -28,8 +28,8 @@ html[data-theme="dark"] {
/* Main container */ /* Main container */
.mt-timeline { .mt-timeline {
height: calc(100% - 2rem); height: 100%;
padding: 1rem 0.5rem 1rem 1.5rem; overflow-y: auto;
position: relative; position: relative;
background: var(--bg-color); background: var(--bg-color);
} }
@ -44,11 +44,9 @@ html[data-theme="dark"] {
} }
.mt-body { .mt-body {
height: 100%; padding: 1rem 1.5rem;
overflow-y: auto;
white-space: pre-wrap; white-space: pre-wrap;
word-wrap: break-word; word-wrap: break-word;
padding-right: 0.5rem;
} }
.mt-body .invisible { .mt-body .invisible {
font-size: 0; font-size: 0;
@ -59,9 +57,34 @@ html[data-theme="dark"] {
position: absolute; position: absolute;
} }
/* Scroll bar */
html{
scrollbar-color: var(--bg-hover-color) rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar {
width: 0.75rem;
height: 0.75rem;
}
::-webkit-scrollbar-corner {
background: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 0;
}
::-webkit-scrollbar-thumb {
border: 0 var(--content-text);
border-radius: 2rem;
background: var(--bg-hover-color);
}
::-webkit-scrollbar-track {
border: 0 var(--content-text);
border-radius: 0;
background: rgba(0, 0, 0, 0.1);
}
/* Toot container */ /* Toot container */
.mt-toot { .mt-toot {
margin: 0.25rem 0.5rem 0.25rem 0.25rem; margin: 0.25rem;
padding: 1rem 0.5rem 2rem 4rem; padding: 1rem 0.5rem 2rem 4rem;
position: relative; position: relative;
min-height: 3.75rem; min-height: 3.75rem;
@ -142,9 +165,11 @@ html[data-theme="dark"] {
} }
.mt-error { .mt-error {
position: absolute;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: calc(100% - 3.5rem);
width: calc(100% - 4.5rem);
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: var(--error-text-color); color: var(--error-text-color);
@ -220,6 +245,14 @@ html[data-theme="dark"] {
} }
/* Loading-spinner */ /* Loading-spinner */
.mt-body > .loading-spinner {
position: absolute;
width: 3rem;
height: 3rem;
margin: auto;
top: calc(50% - 1.5rem);
right: calc(50% - 1.5rem);
}
.loading-spinner { .loading-spinner {
height: 100%; height: 100%;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.0' viewBox='0 0 128 128' %3E%3Cg%3E%3Cpath d='M64 128A64 64 0 0 1 18.34 19.16L21.16 22a60 60 0 1 0 52.8-17.17l.62-3.95A64 64 0 0 1 64 128z' fill='%23404040'/%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 64 64' to='360 64 64' dur='1000ms' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/g%3E%3C/svg%3E"); background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.0' viewBox='0 0 128 128' %3E%3Cg%3E%3Cpath d='M64 128A64 64 0 0 1 18.34 19.16L21.16 22a60 60 0 1 0 52.8-17.17l.62-3.95A64 64 0 0 1 64 128z' fill='%23404040'/%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 64 64' to='360 64 64' dur='1000ms' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/g%3E%3C/svg%3E");
@ -229,9 +262,9 @@ html[data-theme="dark"] {
background-size: min(2.5rem, calc(100% - 0.5rem)); background-size: min(2.5rem, calc(100% - 0.5rem));
} }
/* See more btn */ /* Footer (See more link) */
.mt-seeMore { .mt-footer {
margin: 2rem auto; margin: 1rem auto 2rem auto;
padding: 0 2rem; padding: 0 2rem;
text-align: center; text-align: center;
} }

19
src/mastodon-timeline.js
View File

@ -1,4 +1,4 @@
// Mastodon embed feed timeline v3.2.9 // Mastodon embed feed timeline v3.3.0
// More info at: // More info at:
// https://gitlab.com/idotj/mastodon-embed-feed-timeline // https://gitlab.com/idotj/mastodon-embed-feed-timeline
@ -117,26 +117,27 @@ MastodonApi.prototype.getToots = function () {
} }
} }
// Add target="_blank" to all hashtags // Add target="_blank" to all #hashtags and @mentions
let allHashtags = document.querySelectorAll("#mt-body .hashtag"); let linksToBlank = document.querySelectorAll('#mt-body .hashtag, .u-url.mention');
for (let j = 0; j < allHashtags.length; j++) { for (let j = 0; j < linksToBlank.length; j++) {
allHashtags[j].target = "_blank"; linksToBlank[j].target = '_blank';
allHashtags[j].rel = "tag nofollow noopener noreferrer"; linksToBlank[j].hasAttribute('rel', 'tag') ? linksToBlank[j].setAttribute('rel', 'tag nofollow noopener noreferrer') : linksToBlank[j].setAttribute('rel', 'nofollow noopener noreferrer');
} }
// Insert link after last toot to visit Mastodon page // Insert link after last toot to visit Mastodon page
if (mapi.LINK_SEE_MORE) { if (mapi.LINK_SEE_MORE) {
let linkHtml = ''; let linkHtml = '';
if (this.USER_ID) { if (this.USER_ID) {
linkHtml = '<div class="mt-seeMore"><a href="' + mapi.INSTANCE_URI + '/' + mapi.PROFILE_NAME + '" class="btn" target="_blank" rel="nofollow noopener noreferrer">' + mapi.LINK_SEE_MORE + '</a></div>'; linkHtml = '<div class="mt-footer"><a href="' + mapi.INSTANCE_URI + '/' + mapi.PROFILE_NAME + '" class="btn" target="_blank" rel="nofollow noopener noreferrer">' + mapi.LINK_SEE_MORE + '</a></div>';
} else { } else {
linkHtml = '<div class="mt-seeMore"><a href="' + mapi.INSTANCE_URI + '/public/local' + '" class="btn" target="_blank" rel="nofollow noopener noreferrer">' + mapi.LINK_SEE_MORE + '</a></div>'; linkHtml = '<div class="mt-footer"><a href="' + mapi.INSTANCE_URI + '/public/local' + '" class="btn" target="_blank" rel="nofollow noopener noreferrer">' + mapi.LINK_SEE_MORE + '</a></div>';
} }
this.mtBodyContainer.insertAdjacentHTML('beforeend', linkHtml); this.mtBodyContainer.parentNode.insertAdjacentHTML('beforeend', linkHtml);
} }
}) })
.catch(err => { .catch(err => {
this.mtBodyContainer.innerHTML = '<div class="mt-error">✖️<br/><strong>Request Failed:</strong><br/>' + err + '</div>'; this.mtBodyContainer.innerHTML = '<div class="mt-error">✖️<br/><strong>Request Failed:</strong><br/>' + err + '</div>';
this.mtBodyContainer.setAttribute('role', 'none');
}); });
// Inner function to add each toot content in container // Inner function to add each toot content in container