mirror/mastodon-embed-timeline
1
0
Fork 1
mirror of https://gitlab.com/idotj/mastodon-embed-timeline.git synced 2025-05-23 16:32:47 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch '4.6.0' into 'master'

Browse Source 
4.6.0

See merge request idotj/mastodon-embed-timeline!38
This commit is contained in:
i.j 2025-03-07 14:52:56 +01:00
commit 8e31d7de35
9 changed files with 232 additions and 235 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
CHANGELOG
View File

@ -1,3 +1,11 @@
v4.6.0 - 07/03/2025
- Show preview link content in boosted posts
- Fix spoiler text switch button
- Add CSS styles to #hashtags
- Improve dark theme
- CSS refactoring
- JS refactoring
v4.5.1 - 05/03/2025 v4.5.1 - 05/03/2025
- Fix profile name alignment for pinned post - Fix profile name alignment for pinned post

4
dist/mastodon-timeline.esm.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/mastodon-timeline.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
dist/mastodon-timeline.umd.js vendored
View File

File diff suppressed because one or more lines are too long

4
docs/INSTALLATION.md
View File

@ -45,11 +45,11 @@ This option allows you to start without the need to upload any files on your ser
Copy the following CSS and JS links to include them in your project: Copy the following CSS and JS links to include them in your project:
```html ```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@idotj/mastodon-embed-timeline@4.5.1/dist/mastodon-timeline.min.css" integrity="sha256-hpGk4GfMdukMXML4NiCl+Jxx365GQIeLQKBJW/Kl0lg=" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@idotj/mastodon-embed-timeline@4.6.0/dist/mastodon-timeline.min.css">
``` ```
```html ```html
<script src="https://cdn.jsdelivr.net/npm/@idotj/mastodon-embed-timeline@4.5.1/dist/mastodon-timeline.umd.js" integrity="sha256-3Ct4vqvdPewF2YVR2IYuEYquK2nFPkCIj6OqlT/MiBM=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/@idotj/mastodon-embed-timeline@4.6.0/dist/mastodon-timeline.umd.js"></script>
``` ```
## Package manager ## Package manager

4
package-lock.json generated
View File

@ -1,12 +1,12 @@
{ {
"name": "@idotj/mastodon-embed-timeline", "name": "@idotj/mastodon-embed-timeline",
"version": "4.5.1", "version": "4.6.0",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "@idotj/mastodon-embed-timeline", "name": "@idotj/mastodon-embed-timeline",
"version": "4.5.1", "version": "4.6.0",
"license": "GNU", "license": "GNU",
"devDependencies": { "devDependencies": {
"@rollup/plugin-terser": "^0.4.4", "@rollup/plugin-terser": "^0.4.4",

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@idotj/mastodon-embed-timeline", "name": "@idotj/mastodon-embed-timeline",
"version": "4.5.1", "version": "4.6.0",
"description": "Displays a Mastodon timeline with posts embed in your website. Very easy to setup, no dependencies, no trackers, cross-browser, WCAG compliant and fully responsive.", "description": "Displays a Mastodon timeline with posts embed in your website. Very easy to setup, no dependencies, no trackers, cross-browser, WCAG compliant and fully responsive.",
"license": "GNU", "license": "GNU",
"author": { "author": {

45
src/mastodon-timeline.css
View File

@ -1,4 +1,4 @@
/* Mastodon embed timeline v4.5.1 */ /* Mastodon embed timeline v4.6.0 */
/* More info at: */ /* More info at: */
/* https://gitlab.com/idotj/mastodon-embed-timeline */ /* https://gitlab.com/idotj/mastodon-embed-timeline */
@ -10,10 +10,11 @@
--mt-txt-max-lines: none; --mt-txt-max-lines: none;
--mt-preview-max-lines: none; --mt-preview-max-lines: none;
--mt-color-bg: #fff; --mt-color-bg: #fff;
--mt-color-bg-hover: #d9e1e8; --mt-color-bg-hover: #e9eef1;
--mt-color-line-gray: #c0cdd9; --mt-color-line-gray: #c0cdd9;
--mt-color-contrast-gray: #606984; --mt-color-contrast-gray: #606984;
--mt-color-content-txt: #000; --mt-color-content-txt: #000;
--mt-color-hashtag: #d7e1e9;
--mt-color-link: #3a3bff; --mt-color-link: #3a3bff;
--mt-color-error-txt: #8b0000; --mt-color-error-txt: #8b0000;
--mt-color-btn-bg: #6364ff; --mt-color-btn-bg: #6364ff;
@ -24,11 +25,12 @@
} }
.mt-container[data-theme="dark"], .mt-container[data-theme="dark"],
.mt-dialog[data-theme="dark"] { .mt-dialog[data-theme="dark"] {
--mt-color-bg: #282c37; --mt-color-bg: #181821;
--mt-color-bg-hover: #313543; --mt-color-bg-hover: #21232c;
--mt-color-line-gray: #393f4f; --mt-color-line-gray: #393f4f;
--mt-color-contrast-gray: #606984; --mt-color-contrast-gray: #606984;
--mt-color-content-txt: #fff; --mt-color-content-txt: #fff;
--mt-color-hashtag: #292c38;
--mt-color-link: #8c8dff; --mt-color-link: #8c8dff;
--mt-color-error-txt: #fe6c6c; --mt-color-error-txt: #fe6c6c;
} }
@ -79,8 +81,6 @@
.mt-container::-webkit-scrollbar-corner { .mt-container::-webkit-scrollbar-corner {
background-color: var(--mt-color-bg); background-color: var(--mt-color-bg);
} }
.mt-container a:link,
.mt-container a:active,
.mt-container a { .mt-container a {
text-decoration: none; text-decoration: none;
color: var(--mt-color-link); color: var(--mt-color-link);
@ -117,6 +117,9 @@
cursor: pointer; cursor: pointer;
background-color: var(--mt-color-bg-hover); background-color: var(--mt-color-bg-hover);
} }
.mt-container:not(:has(.mt-footer)) .mt-post:last-child {
border-bottom: none;
}
.mt-post p:last-child { .mt-post p:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
@ -134,22 +137,22 @@
height: 3rem; height: 3rem;
position: relative; position: relative;
} }
.mt-post-avatar-image-big img { .mt-post-avatar-image-big img,
.mt-post-avatar-image-small img {
aspect-ratio: 1/1; aspect-ratio: 1/1;
width: 2.25rem;
height: 2.25rem;
border-radius: 0.25rem; border-radius: 0.25rem;
overflow: hidden; overflow: hidden;
} }
.mt-post-avatar-image-big img {
width: 2.25rem;
height: 2.25rem;
}
.mt-post-avatar-image-small img { .mt-post-avatar-image-small img {
aspect-ratio: 1/1;
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
top: 1.5rem; top: 1.5rem;
left: 1.5rem; left: 1.5rem;
position: absolute; position: absolute;
border-radius: 0.25rem;
overflow: hidden;
} }
/* User name and date */ /* User name and date */
@ -168,8 +171,8 @@
min-width: 1rem; min-width: 1rem;
width: auto; width: auto;
} }
.mt-post-header-user > a { .mt-container .mt-post-header-user > a {
color: var(--mt-color-content-txt) !important; color: var(--mt-color-content-txt);
overflow-wrap: anywhere; overflow-wrap: anywhere;
} }
.mt-container .mt-post-header-user > a:hover { .mt-container .mt-post-header-user > a:hover {
@ -232,6 +235,17 @@
margin-bottom: -0.25rem; margin-bottom: -0.25rem;
width: auto; width: auto;
} }
.mt-post-txt .mention.hashtag {
display: inline-block;
font-size: 0.8rem;
border-radius: 0.25rem;
background-color: var(--mt-color-hashtag);
padding: 0.25rem 0.5rem;
margin: 0 0.25rem 0.25rem 0;
}
.mt-post-txt .mention.hashtag:only-child {
margin: 0;
}
/* Poll */ /* Poll */
.mt-post-poll { .mt-post-poll {
@ -455,7 +469,6 @@ body:has(dialog.mt-dialog[open]) {
.mt-post-preview-description:not(.truncate) .ellipsis::after { .mt-post-preview-description:not(.truncate) .ellipsis::after {
content: "..."; content: "...";
} }
.mt-post-preview-title { .mt-post-preview-title {
font-weight: 600; font-weight: 600;
} }
@ -475,7 +488,7 @@ body:has(dialog.mt-dialog[open]) {
font-size: 0.75rem; font-size: 0.75rem;
gap: 0.25rem; gap: 0.25rem;
align-items: center; align-items: center;
opacity: 0.5; opacity: 0.6;
cursor: default; cursor: default;
} }
.mt-post-counter-bar-replies > svg, .mt-post-counter-bar-replies > svg,

394
src/mastodon-timeline.js
View File

@ -1,7 +1,7 @@
/** /**
* Mastodon embed timeline * Mastodon embed timeline
* @author idotj * @author idotj
* @version 4.5.1 * @version 4.6.0
* @url https://gitlab.com/idotj/mastodon-embed-timeline * @url https://gitlab.com/idotj/mastodon-embed-timeline
* @license GNU AGPLv3 * @license GNU AGPLv3
*/ */
@ -392,7 +392,6 @@ export class Init {
*/ */
async #buildTimeline(t) { async #buildTimeline(t) {
await this.#getTimelineData(); await this.#getTimelineData();
// console.log("Mastodon timeline data fetched: ", this.fetchedData); // console.log("Mastodon timeline data fetched: ", this.fetchedData);
const { const {
@ -454,7 +453,7 @@ export class Init {
} }
/** /**
* Establishes the defined CSS variables * Set the defined CSS variables
*/ */
#setCSSvariables() { #setCSSvariables() {
if ( if (
@ -578,7 +577,9 @@ export class Init {
const formattedDate = this.#formatDate(date); const formattedDate = this.#formatDate(date);
const dateHTML = const dateHTML =
'<div class="mt-post-header-date">' + '<div class="mt-post-header-date">' +
(c.pinned ? '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" class="mt-post-pinned" aria-hidden="true"><path d="m640-480 80 80v80H520v240l-40 40-40-40v-240H240v-80l80-80v-280h-40v-80h400v80h-40v280Zm-286 80h252l-46-46v-314H400v314l-46 46Zm126 0Z"></path></svg>' : "") + (c.pinned
? '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" class="mt-post-pinned" aria-hidden="true"><path d="m640-480 80 80v80H520v240l-40 40-40-40v-240H240v-80l80-80v-280h-40v-80h400v80h-40v280Zm-286 80h252l-46-46v-314H400v314l-46 46Zm126 0Z"></path></svg>'
: "") +
'<a href="' + '<a href="' +
url + url +
'" rel="nofollow noopener noreferrer" target="_blank">' + '" rel="nofollow noopener noreferrer" target="_blank">' +
@ -592,10 +593,18 @@ export class Init {
"</div>"; "</div>";
// Post text // Post text
const hasTxtMaxLines = this.mtSettings.txtMaxLines !== "0";
const txtTruncateCss = const txtTruncateCss =
this.mtSettings.txtMaxLines !== "0" ? " truncate" : ""; hasTxtMaxLines && this.mtSettings.txtMaxLines.length ? " truncate" : "";
let postTxt = ""; let postTxt = "";
const textSource = post.spoiler_text ? post.spoiler_text : post.content; const textSource = post.spoiler_text ? post.spoiler_text : post.content;
const spoilerContent =
' <button type="button" class="mt-btn-dark mt-btn-spoiler-txt" aria-expanded="false">' +
this.mtSettings.btnShowMore +
"</button>" +
'<div class="spoiler-txt-hidden">' +
this.#formatPostText(post.content) +
"</div>";
if (textSource) { if (textSource) {
postTxt = postTxt =
@ -604,6 +613,7 @@ export class Init {
'">' + '">' +
'<div class="mt-post-txt-wrapper">' + '<div class="mt-post-txt-wrapper">' +
this.#formatPostText(textSource) + this.#formatPostText(textSource) +
(post.spoiler_text ? spoilerContent : "") +
"</div>" + "</div>" +
"</div>"; "</div>";
} }
@ -622,8 +632,8 @@ export class Init {
// Preview link // Preview link
const previewLinkHTML = const previewLinkHTML =
!this.mtSettings.hidePreviewLink && c.card !this.mtSettings.hidePreviewLink && (c.card || c.reblog?.card)
? this.#createPreviewLink(c.card) ? this.#createPreviewLink(!isReblog ? c.card : c.reblog.card)
: ""; : "";
// Poll // Poll
@ -874,7 +884,6 @@ export class Init {
`<img src="${emojo.url}" class="mt-custom-emoji" alt="Emoji ${emojo.shortcode}" />` `<img src="${emojo.url}" class="mt-custom-emoji" alt="Emoji ${emojo.shortcode}" />`
); );
} }
return c; return c;
} else { } else {
return c; return c;
@ -888,12 +897,10 @@ export class Init {
*/ */
#formatDate(d) { #formatDate(d) {
const originalDate = new Date(d); const originalDate = new Date(d);
const formattedDate = new Intl.DateTimeFormat( const formattedDate = new Intl.DateTimeFormat(
this.mtSettings.dateFormatLocale, this.mtSettings.dateFormatLocale,
this.mtSettings.dateFormatOptions this.mtSettings.dateFormatOptions
).format(originalDate); ).format(originalDate);
return formattedDate; return formattedDate;
} }
@ -904,143 +911,101 @@ export class Init {
* @returns {String} Media in HTML format * @returns {String} Media in HTML format
*/ */
#createMedia(m, s = false) { #createMedia(m, s = false) {
const type = m.type; const { type, url, preview_url, description, meta } = m;
const spoiler = s; const { original, small } = meta;
let media = ""; const { spinnerClass, btnShowContent, btnPlayVideoTxt, hideVideoPreview } =
this.mtSettings;
const spoilerBtns = const spoilerBtns =
'<button class="mt-btn-dark mt-btn-spoiler-media mt-btn-spoiler-media-hide">' + '<button class="mt-btn-dark mt-btn-spoiler-media mt-btn-spoiler-media-hide">' +
'<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" class="icon icon-eye-slash" aria-hidden="true"><path d="m644-428-58-58q9-47-27-88t-93-32l-58-58q17-8 34.5-12t37.5-4q75 0 127.5 52.5T660-500q0 20-4 37.5T644-428Zm128 126-58-56q38-29 67.5-63.5T832-500q-50-101-143.5-160.5T480-720q-29 0-57 4t-55 12l-62-62q41-17 84-25.5t90-8.5q151 0 269 83.5T920-500q-23 59-60.5 109.5T772-302Zm20 246L624-222q-35 11-70.5 16.5T480-200q-151 0-269-83.5T40-500q21-53 53-98.5t73-81.5L56-792l56-56 736 736-56 56ZM222-624q-29 26-53 57t-41 67q50 101 143.5 160.5T480-280q20 0 39-2.5t39-5.5l-36-38q-11 3-21 4.5t-21 1.5q-75 0-127.5-52.5T300-500q0-11 1.5-21t4.5-21l-84-82Zm319 93Zm-151 75Z"></path></svg>' + '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" class="icon icon-eye-slash" aria-hidden="true">' +
"</button>" + '<path d="m644-428-58-58q9-47-27-88t-93-32l-58-58q17-8 34.5-12t37.5-4q75 0 127.5 52.5T660-500q0 20-4 37.5T644-428Zm128 126-58-56q38-29 67.5-63.5T832-500q-50-101-143.5-160.5T480-720q-29 0-57 4t-55 12l-62-62q41-17 84-25.5t90-8.5q151 0 269 83.5T920-500q-23 59-60.5 109.5T772-302Zm20 246L624-222q-35 11-70.5 16.5T480-200q-151 0-269-83.5T40-500q21-53 53-98.5t73-81.5L56-792l56-56 736 736-56 56ZM222-624q-29 26-53 57t-41 67q50 101 143.5 160.5T480-280q20 0 39-2.5t39-5.5l-36-38q-11 3-21 4.5t-21 1.5q-75 0-127.5-52.5T300-500q0-11 1.5-21t4.5-21l-84-82Zm319 93Zm-151 75Z"></path></svg>' +
'<button class="mt-btn-dark mt-btn-spoiler-media mt-btn-spoiler-media-show">' + '</button><button class="mt-btn-dark mt-btn-spoiler-media mt-btn-spoiler-media-show">' +
this.mtSettings.btnShowContent + btnShowContent +
"</button>"; "</button>";
const commonAttributes =
' class="mt-post-media ' +
(s ? "mt-post-media-spoiler " : "") +
(spinnerClass || "") +
'" data-media-type="' +
type +
'" data-media-url-hd="' +
url +
'"' +
(description
? ' data-media-alt-txt="' + this.#escapeHTML(description) + '"'
: "") +
' data-media-width-hd="' +
original.width +
'" data-media-height-hd="' +
original.height +
'"' +
' style="padding-top: calc(100%/' +
small?.aspect +
')">';
if (type === "image") { if (type === "image") {
media = return (
'<div class="mt-post-media ' + "<div" +
(spoiler ? "mt-post-media-spoiler " : "") + commonAttributes +
this.mtSettings.spinnerClass + (s ? spoilerBtns : "") +
'" data-media-type="' +
type +
'" data-media-url-hd="' +
m.url +
'" data-media-alt-txt="' +
(m.description ? this.#escapeHTML(m.description) : "") +
'" data-media-width-hd="' +
m.meta.original.width +
'" data-media-height-hd="' +
m.meta.original.height +
'" style="padding-top: calc(100%/' +
m.meta.small.aspect +
')">' +
(spoiler ? spoilerBtns : "") +
'<img src="' + '<img src="' +
m.preview_url + preview_url +
'" alt="' + '" alt="' +
(m.description ? this.#escapeHTML(m.description) : "") + (description ? this.#escapeHTML(description) : "") +
'" loading="lazy" />' + '" loading="lazy" /></div>'
"</div>"; );
} }
if (type === "audio") { if (type === "audio") {
if (m.preview_url) { return (
media = '<div class="mt-post-media ' +
'<div class="mt-post-media ' + (s ? "mt-post-media-spoiler " : "") +
(spoiler ? "mt-post-media-spoiler " : "") + (preview_url ? spinnerClass : "") +
this.mtSettings.spinnerClass + '" data-media-type="audio">' +
'" data-media-type="' + (s ? spoilerBtns : "") +
type + '<audio controls src="' +
'" data-media-url-hd="' + url +
m.preview_url + '"></audio>' +
'" data-media-alt-txt="' + (preview_url
(m.description ? this.#escapeHTML(m.description) : "") + ? '<img src="' +
'" data-media-width-hd="' + preview_url +
m.meta.small.width + '" alt="' +
'" data-media-height-hd="' + (description ? this.#escapeHTML(description) : "") +
m.meta.small.height + '" loading="lazy" />'
'" style="padding-top: calc(100%/' + : "") +
m.meta.small.aspect + "</div>"
')">' + );
(spoiler ? spoilerBtns : "") +
'<audio controls src="' +
m.url +
'"></audio>' +
'<img src="' +
m.preview_url +
'" alt="' +
(m.description ? this.#escapeHTML(m.description) : "") +
'" loading="lazy" />' +
"</div>";
} else {
media =
'<div class="mt-post-media ' +
(spoiler ? "mt-post-media-spoiler " : "") +
'" data-media-type="' +
type +
'">' +
(spoiler ? spoilerBtns : "") +
'<audio controls src="' +
m.url +
'"></audio>' +
"</div>";
}
} }
if (type === "video" || type === "gifv") { if (type === "video" || type === "gifv") {
if (!this.mtSettings.hideVideoPreview) { if (!hideVideoPreview) {
media = return (
'<div class="mt-post-media ' + "<div" +
(spoiler ? "mt-post-media-spoiler " : "") + commonAttributes +
this.mtSettings.spinnerClass + (s ? spoilerBtns : "") +
'" data-media-type="' +
type +
'" data-media-url-hd="' +
m.url +
'" data-media-alt-txt="' +
(m.description ? this.#escapeHTML(m.description) : "") +
'" data-media-width-hd="' +
m.meta.original.width +
'" data-media-height-hd="' +
m.meta.original.height +
'" style="padding-top: calc(100%/' +
m.meta.small.aspect +
')">' +
(spoiler ? spoilerBtns : "") +
'<img src="' + '<img src="' +
m.preview_url + preview_url +
'" alt="' + '" alt="' +
(m.description ? this.#escapeHTML(m.description) : "") + (description ? this.#escapeHTML(description) : "") +
'" loading="lazy" />' + '" loading="lazy" />' +
'<button class="mt-btn-play" title="' + '<button class="mt-btn-play" title="' +
this.mtSettings.btnPlayVideoTxt + btnPlayVideoTxt +
'"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 14"><path d="M9.5 7l-9 6.3V.7z"/></svg></button>' + '"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 14">' +
"</div>"; '<path d="M9.5 7l-9 6.3V.7z"/></svg></button></div>'
} else { );
media =
'<div class="mt-post-media ' +
(spoiler ? "mt-post-media-spoiler " : "") +
'" data-media-type="' +
type +
'" data-media-url-hd="' +
m.url +
'" data-media-alt-txt="' +
(m.description ? this.#escapeHTML(m.description) : "") +
'" data-media-width-hd="' +
m.meta.original.width +
'" data-media-width-hd="' +
m.meta.original.height +
'" style="padding-top: calc(100%/' +
m.meta.small.aspect +
')">' +
(spoiler ? spoilerBtns : "") +
'<video controls src="' +
m.url +
'" loop></video>' +
"</div>";
} }
return (
"<div" +
commonAttributes +
(s ? spoilerBtns : "") +
'<video controls src="' +
url +
'" loop></video></div>'
);
} }
return media; return "";
} }
/** /**
@ -1277,34 +1242,30 @@ export class Init {
* Spoiler toggle for text * Spoiler toggle for text
* @param {Event} e User interaction trigger * @param {Event} e User interaction trigger
*/ */
#toogleTxtSpoiler(e) { #toggleTxtSpoiler(e) {
const target = e.target; const button = e.target;
const nextSibling = target.nextSibling; const spoilerText = button.nextSibling;
const isExpanded = button.getAttribute("aria-expanded") === "true";
if (target.textContent == this.mtSettings.btnShowMore) { spoilerText.classList.toggle("spoiler-txt-hidden", isExpanded);
nextSibling.classList.remove("spoiler-txt-hidden"); spoilerText.classList.toggle("spoiler-txt-visible", !isExpanded);
nextSibling.classList.add("spoiler-txt-visible"); button.setAttribute("aria-expanded", !isExpanded);
target.setAttribute("aria-expanded", "true"); button.textContent = isExpanded
target.textContent = this.mtSettings.btnShowLess; ? this.mtSettings.btnShowMore
} else { : this.mtSettings.btnShowLess;
nextSibling.classList.remove("spoiler-txt-visible");
nextSibling.classList.add("spoiler-txt-hidden");
target.setAttribute("aria-expanded", "false");
target.textContent = this.mtSettings.btnShowMore;
}
} }
/** /**
* Spoiler toggle for image/video * Spoiler toggle for image/video
* @param {Event} e User interaction trigger * @param {Event} e User interaction trigger
*/ */
#toogleMediaSpoiler(e) { #toggleMediaSpoiler(e) {
const target = e.target; const button = e.target;
if (target.classList.contains("mt-btn-spoiler-media-show")) { const mediaContainer = button.parentNode;
target.parentNode.classList.remove("mt-post-media-spoiler"); mediaContainer.classList.toggle(
} else { "mt-post-media-spoiler",
target.parentNode.classList.add("mt-post-media-spoiler"); !button.classList.contains("mt-btn-spoiler-media-show")
} );
} }
/** /**
@ -1313,52 +1274,57 @@ export class Init {
* @returns {String} Preview link in HTML format * @returns {String} Preview link in HTML format
*/ */
#createPreviewLink(c) { #createPreviewLink(c) {
let previewDescription = ""; const {
if (this.mtSettings.previewMaxLines !== "0" && c.description) { url,
const txtTruncateCss = image,
this.mtSettings.previewMaxLines.length !== 0 ? " truncate" : ""; image_description,
provider_name,
title,
description,
author_name,
} = c;
const { previewMaxLines, spinnerClass } = this.mtSettings;
let previewDescription = "";
if (previewMaxLines !== "0" && description) {
previewDescription = previewDescription =
'<span class="mt-post-preview-description' + '<span class="mt-post-preview-description' +
txtTruncateCss + (previewMaxLines.length !== 0 ? " truncate" : "") +
'">' + '">' +
this.#parseHTMLstring(c.description) + this.#parseHTMLstring(description) +
"</span>"; "</span>";
} }
const card = return (
'<a href="' + '<a href="' +
c.url + url +
'" class="mt-post-preview" target="_blank" rel="noopener noreferrer">' + '" class="mt-post-preview" target="_blank" rel="noopener noreferrer">' +
(c.image (image
? '<div class="mt-post-preview-image ' + ? '<div class="mt-post-preview-image ' +
this.mtSettings.spinnerClass + spinnerClass +
'"><img src="' + '"><img src="' +
c.image + image +
'" alt="' + '" alt="' +
this.#escapeHTML(c.image_description) + this.#escapeHTML(image_description) +
'" loading="lazy" /></div>' '" loading="lazy" /></div>'
: '<div class="mt-post-preview-noImage">📄</div>') + : '<div class="mt-post-preview-noImage">📄</div>') +
"</div>" +
'<div class="mt-post-preview-content">' + '<div class="mt-post-preview-content">' +
(c.provider_name (provider_name
? '<span class="mt-post-preview-provider">' + ? '<span class="mt-post-preview-provider">' +
this.#parseHTMLstring(c.provider_name) + this.#parseHTMLstring(provider_name) +
"</span>" "</span>"
: "") + : "") +
'<span class="mt-post-preview-title">' + '<span class="mt-post-preview-title">' +
c.title + title +
"</span>" + "</span>" +
previewDescription + previewDescription +
(c.author_name (author_name
? '<span class="mt-post-preview-author">' + ? '<span class="mt-post-preview-author">' +
this.#parseHTMLstring(c.author_name) + this.#parseHTMLstring(author_name) +
"</span>" "</span>"
: "") + : "") +
"</div>" + "</div></a>"
"</a>"; );
return card;
} }
/** /**
@ -1376,44 +1342,55 @@ export class Init {
* Build footer after last post * Build footer after last post
*/ */
#buildFooter() { #buildFooter() {
let btnSeeMoreHTML = ""; const {
let btnReloadHTML = ""; btnSeeMore,
btnReload,
timelineType,
profileName,
hashtagName,
instanceUrl,
} = this.mtSettings;
let btnSeeMoreHTML = "",
btnReloadHTML = "";
// Create button to open Mastodon page // Create button to open Mastodon page
if (this.mtSettings.btnSeeMore) { if (btnSeeMore) {
let btnSeeMorePath = ""; let btnSeeMorePath = "";
if (this.mtSettings.timelineType === "profile") { switch (timelineType) {
if (this.mtSettings.profileName) { case "profile":
btnSeeMorePath = this.mtSettings.profileName; if (profileName) {
} else { btnSeeMorePath = profileName;
this.#showError( } else {
"Please check your <strong>profileName</strong> value", this.#showError(
"⚠️" "Please check your <strong>profileName</strong> value",
); "⚠️"
} );
} else if (this.mtSettings.timelineType === "hashtag") { }
btnSeeMorePath = "tags/" + this.mtSettings.hashtagName; break;
} else if (this.mtSettings.timelineType === "local") { case "hashtag":
btnSeeMorePath = "public/local"; btnSeeMorePath = "tags/" + hashtagName;
break;
case "local":
btnSeeMorePath = "public/local";
break;
} }
btnSeeMoreHTML = ` btnSeeMoreHTML =
<a class="mt-btn-violet btn-see-more" href="${ '<a class="mt-btn-violet btn-see-more" href="' +
this.mtSettings.instanceUrl instanceUrl +
}/${this.#escapeHTML( "/" +
btnSeeMorePath this.#escapeHTML(btnSeeMorePath) +
)}" rel="nofollow noopener noreferrer" target="_blank"> '" rel="nofollow noopener noreferrer" target="_blank">' +
${this.mtSettings.btnSeeMore} btnSeeMore +
</a>`; "</a>";
} }
// Create button to refresh the timeline // Create button to refresh the timeline
if (this.mtSettings.btnReload) { if (btnReload) {
btnReloadHTML = ` btnReloadHTML =
<button class="mt-btn-violet btn-refresh"> '<button class="mt-btn-violet btn-refresh">' +
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M21 3v5m0 0h-5m5 0l-3-2.708C16.408 3.867 14.305 3 12 3a9 9 0 1 0 0 18c4.283 0 7.868-2.992 8.777-7" stroke="var(--mt-color-btn-txt)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M21 3v5m0 0h-5m5 0l-3-2.708C16.408 3.867 14.305 3 12 3a9 9 0 1 0 0 18c4.283 0 7.868-2.992 8.777-7" stroke="var(--mt-color-btn-txt)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>' +
</svg> btnReload +
${this.mtSettings.btnReload} "</button>";
</button>`;
} }
// Add footer container // Add footer container
@ -1423,12 +1400,11 @@ export class Init {
); );
// Add event listener to the button "Refresh" // Add event listener to the button "Refresh"
if (this.mtSettings.btnReload) { if (btnReload) {
const reloadBtn = const reloadBtn = this.mtContainerNode.querySelector(".btn-refresh");
this.mtContainerNode.getElementsByClassName("btn-refresh")[0]; if (reloadBtn) {
reloadBtn.addEventListener("click", () => { reloadBtn.addEventListener("click", () => this.mtUpdate());
this.mtUpdate(); }
});
} }
} }
@ -1453,12 +1429,12 @@ export class Init {
// Check if spoiler text button was clicked // Check if spoiler text button was clicked
if (target.classList.contains("mt-btn-spoiler-txt")) { if (target.classList.contains("mt-btn-spoiler-txt")) {
this.#toogleTxtSpoiler(e); this.#toggleTxtSpoiler(e);
} }
// Check if spoiler media button was clicked // Check if spoiler media button was clicked
if (target.classList.contains("mt-btn-spoiler-media")) { if (target.classList.contains("mt-btn-spoiler-media")) {
this.#toogleMediaSpoiler(e); this.#toggleMediaSpoiler(e);
} }
// Check if image in post was clicked // Check if image in post was clicked