mirror of
https://gitlab.com/idotj/mastodon-embed-timeline.git
synced 2025-05-23 16:32:47 +00:00
Merge branch '4.6.0' into 'master'
4.6.0 See merge request idotj/mastodon-embed-timeline!38
This commit is contained in:
i.j
commit
8e31d7de35
@ -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
|
||||
- Fix profile name alignment for pinned post
|
||||
|
||||
|
||||
4
dist/mastodon-timeline.esm.js
vendored
4
dist/mastodon-timeline.esm.js
vendored
File diff suppressed because one or more lines are too long
2
dist/mastodon-timeline.min.css
vendored
2
dist/mastodon-timeline.min.css
vendored
File diff suppressed because one or more lines are too long
4
dist/mastodon-timeline.umd.js
vendored
4
dist/mastodon-timeline.umd.js
vendored
File diff suppressed because one or more lines are too long
@ -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:
|
||||
|
||||
```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
|
||||
<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
|
||||
|
||||
4
package-lock.json
generated
4
package-lock.json
generated
@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "@idotj/mastodon-embed-timeline",
|
||||
"version": "4.5.1",
|
||||
"version": "4.6.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@idotj/mastodon-embed-timeline",
|
||||
"version": "4.5.1",
|
||||
"version": "4.6.0",
|
||||
"license": "GNU",
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-terser": "^0.4.4",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"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.",
|
||||
"license": "GNU",
|
||||
"author": {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
/* Mastodon embed timeline v4.5.1 */
|
||||
/* Mastodon embed timeline v4.6.0 */
|
||||
/* More info at: */
|
||||
/* https://gitlab.com/idotj/mastodon-embed-timeline */
|
||||
|
||||
@ -10,10 +10,11 @@
|
||||
--mt-txt-max-lines: none;
|
||||
--mt-preview-max-lines: none;
|
||||
--mt-color-bg: #fff;
|
||||
--mt-color-bg-hover: #d9e1e8;
|
||||
--mt-color-bg-hover: #e9eef1;
|
||||
--mt-color-line-gray: #c0cdd9;
|
||||
--mt-color-contrast-gray: #606984;
|
||||
--mt-color-content-txt: #000;
|
||||
--mt-color-hashtag: #d7e1e9;
|
||||
--mt-color-link: #3a3bff;
|
||||
--mt-color-error-txt: #8b0000;
|
||||
--mt-color-btn-bg: #6364ff;
|
||||
@ -24,11 +25,12 @@
|
||||
}
|
||||
.mt-container[data-theme="dark"],
|
||||
.mt-dialog[data-theme="dark"] {
|
||||
--mt-color-bg: #282c37;
|
||||
--mt-color-bg-hover: #313543;
|
||||
--mt-color-bg: #181821;
|
||||
--mt-color-bg-hover: #21232c;
|
||||
--mt-color-line-gray: #393f4f;
|
||||
--mt-color-contrast-gray: #606984;
|
||||
--mt-color-content-txt: #fff;
|
||||
--mt-color-hashtag: #292c38;
|
||||
--mt-color-link: #8c8dff;
|
||||
--mt-color-error-txt: #fe6c6c;
|
||||
}
|
||||
@ -79,8 +81,6 @@
|
||||
.mt-container::-webkit-scrollbar-corner {
|
||||
background-color: var(--mt-color-bg);
|
||||
}
|
||||
.mt-container a:link,
|
||||
.mt-container a:active,
|
||||
.mt-container a {
|
||||
text-decoration: none;
|
||||
color: var(--mt-color-link);
|
||||
@ -117,6 +117,9 @@
|
||||
cursor: pointer;
|
||||
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 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@ -134,22 +137,22 @@
|
||||
height: 3rem;
|
||||
position: relative;
|
||||
}
|
||||
.mt-post-avatar-image-big img {
|
||||
.mt-post-avatar-image-big img,
|
||||
.mt-post-avatar-image-small img {
|
||||
aspect-ratio: 1/1;
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
border-radius: 0.25rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.mt-post-avatar-image-big img {
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
}
|
||||
.mt-post-avatar-image-small img {
|
||||
aspect-ratio: 1/1;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
top: 1.5rem;
|
||||
left: 1.5rem;
|
||||
position: absolute;
|
||||
border-radius: 0.25rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* User name and date */
|
||||
@ -168,8 +171,8 @@
|
||||
min-width: 1rem;
|
||||
width: auto;
|
||||
}
|
||||
.mt-post-header-user > a {
|
||||
color: var(--mt-color-content-txt) !important;
|
||||
.mt-container .mt-post-header-user > a {
|
||||
color: var(--mt-color-content-txt);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.mt-container .mt-post-header-user > a:hover {
|
||||
@ -232,6 +235,17 @@
|
||||
margin-bottom: -0.25rem;
|
||||
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 */
|
||||
.mt-post-poll {
|
||||
@ -455,7 +469,6 @@ body:has(dialog.mt-dialog[open]) {
|
||||
.mt-post-preview-description:not(.truncate) .ellipsis::after {
|
||||
content: "...";
|
||||
}
|
||||
|
||||
.mt-post-preview-title {
|
||||
font-weight: 600;
|
||||
}
|
||||
@ -475,7 +488,7 @@ body:has(dialog.mt-dialog[open]) {
|
||||
font-size: 0.75rem;
|
||||
gap: 0.25rem;
|
||||
align-items: center;
|
||||
opacity: 0.5;
|
||||
opacity: 0.6;
|
||||
cursor: default;
|
||||
}
|
||||
.mt-post-counter-bar-replies > svg,
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/**
|
||||
* Mastodon embed timeline
|
||||
* @author idotj
|
||||
* @version 4.5.1
|
||||
* @version 4.6.0
|
||||
* @url https://gitlab.com/idotj/mastodon-embed-timeline
|
||||
* @license GNU AGPLv3
|
||||
*/
|
||||
@ -392,7 +392,6 @@ export class Init {
|
||||
*/
|
||||
async #buildTimeline(t) {
|
||||
await this.#getTimelineData();
|
||||
|
||||
// console.log("Mastodon timeline data fetched: ", this.fetchedData);
|
||||
|
||||
const {
|
||||
@ -454,7 +453,7 @@ export class Init {
|
||||
}
|
||||
|
||||
/**
|
||||
* Establishes the defined CSS variables
|
||||
* Set the defined CSS variables
|
||||
*/
|
||||
#setCSSvariables() {
|
||||
if (
|
||||
@ -578,7 +577,9 @@ export class Init {
|
||||
const formattedDate = this.#formatDate(date);
|
||||
const dateHTML =
|
||||
'<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="' +
|
||||
url +
|
||||
'" rel="nofollow noopener noreferrer" target="_blank">' +
|
||||
@ -592,10 +593,18 @@ export class Init {
|
||||
"</div>";
|
||||
|
||||
// Post text
|
||||
const hasTxtMaxLines = this.mtSettings.txtMaxLines !== "0";
|
||||
const txtTruncateCss =
|
||||
this.mtSettings.txtMaxLines !== "0" ? " truncate" : "";
|
||||
hasTxtMaxLines && this.mtSettings.txtMaxLines.length ? " truncate" : "";
|
||||
let postTxt = "";
|
||||
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) {
|
||||
postTxt =
|
||||
@ -604,6 +613,7 @@ export class Init {
|
||||
'">' +
|
||||
'<div class="mt-post-txt-wrapper">' +
|
||||
this.#formatPostText(textSource) +
|
||||
(post.spoiler_text ? spoilerContent : "") +
|
||||
"</div>" +
|
||||
"</div>";
|
||||
}
|
||||
@ -622,8 +632,8 @@ export class Init {
|
||||
|
||||
// Preview link
|
||||
const previewLinkHTML =
|
||||
!this.mtSettings.hidePreviewLink && c.card
|
||||
? this.#createPreviewLink(c.card)
|
||||
!this.mtSettings.hidePreviewLink && (c.card || c.reblog?.card)
|
||||
? this.#createPreviewLink(!isReblog ? c.card : c.reblog.card)
|
||||
: "";
|
||||
|
||||
// Poll
|
||||
@ -874,7 +884,6 @@ export class Init {
|
||||
`<img src="${emojo.url}" class="mt-custom-emoji" alt="Emoji ${emojo.shortcode}" />`
|
||||
);
|
||||
}
|
||||
|
||||
return c;
|
||||
} else {
|
||||
return c;
|
||||
@ -888,12 +897,10 @@ export class Init {
|
||||
*/
|
||||
#formatDate(d) {
|
||||
const originalDate = new Date(d);
|
||||
|
||||
const formattedDate = new Intl.DateTimeFormat(
|
||||
this.mtSettings.dateFormatLocale,
|
||||
this.mtSettings.dateFormatOptions
|
||||
).format(originalDate);
|
||||
|
||||
return formattedDate;
|
||||
}
|
||||
|
||||
@ -904,143 +911,101 @@ export class Init {
|
||||
* @returns {String} Media in HTML format
|
||||
*/
|
||||
#createMedia(m, s = false) {
|
||||
const type = m.type;
|
||||
const spoiler = s;
|
||||
let media = "";
|
||||
const { type, url, preview_url, description, meta } = m;
|
||||
const { original, small } = meta;
|
||||
const { spinnerClass, btnShowContent, btnPlayVideoTxt, hideVideoPreview } =
|
||||
this.mtSettings;
|
||||
const spoilerBtns =
|
||||
'<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>' +
|
||||
"</button>" +
|
||||
'<button class="mt-btn-dark mt-btn-spoiler-media mt-btn-spoiler-media-show">' +
|
||||
this.mtSettings.btnShowContent +
|
||||
'<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>' +
|
||||
'</button><button class="mt-btn-dark mt-btn-spoiler-media mt-btn-spoiler-media-show">' +
|
||||
btnShowContent +
|
||||
"</button>";
|
||||
|
||||
if (type === "image") {
|
||||
media =
|
||||
'<div class="mt-post-media ' +
|
||||
(spoiler ? "mt-post-media-spoiler " : "") +
|
||||
this.mtSettings.spinnerClass +
|
||||
const commonAttributes =
|
||||
' class="mt-post-media ' +
|
||||
(s ? "mt-post-media-spoiler " : "") +
|
||||
(spinnerClass || "") +
|
||||
'" 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 +
|
||||
url +
|
||||
'"' +
|
||||
(description
|
||||
? ' data-media-alt-txt="' + this.#escapeHTML(description) + '"'
|
||||
: "") +
|
||||
' data-media-width-hd="' +
|
||||
original.width +
|
||||
'" data-media-height-hd="' +
|
||||
m.meta.original.height +
|
||||
'" style="padding-top: calc(100%/' +
|
||||
m.meta.small.aspect +
|
||||
')">' +
|
||||
(spoiler ? spoilerBtns : "") +
|
||||
original.height +
|
||||
'"' +
|
||||
' style="padding-top: calc(100%/' +
|
||||
small?.aspect +
|
||||
')">';
|
||||
|
||||
if (type === "image") {
|
||||
return (
|
||||
"<div" +
|
||||
commonAttributes +
|
||||
(s ? spoilerBtns : "") +
|
||||
'<img src="' +
|
||||
m.preview_url +
|
||||
preview_url +
|
||||
'" alt="' +
|
||||
(m.description ? this.#escapeHTML(m.description) : "") +
|
||||
'" loading="lazy" />' +
|
||||
"</div>";
|
||||
(description ? this.#escapeHTML(description) : "") +
|
||||
'" loading="lazy" /></div>'
|
||||
);
|
||||
}
|
||||
|
||||
if (type === "audio") {
|
||||
if (m.preview_url) {
|
||||
media =
|
||||
return (
|
||||
'<div class="mt-post-media ' +
|
||||
(spoiler ? "mt-post-media-spoiler " : "") +
|
||||
this.mtSettings.spinnerClass +
|
||||
'" data-media-type="' +
|
||||
type +
|
||||
'" data-media-url-hd="' +
|
||||
m.preview_url +
|
||||
'" data-media-alt-txt="' +
|
||||
(m.description ? this.#escapeHTML(m.description) : "") +
|
||||
'" data-media-width-hd="' +
|
||||
m.meta.small.width +
|
||||
'" data-media-height-hd="' +
|
||||
m.meta.small.height +
|
||||
'" style="padding-top: calc(100%/' +
|
||||
m.meta.small.aspect +
|
||||
')">' +
|
||||
(spoiler ? spoilerBtns : "") +
|
||||
(s ? "mt-post-media-spoiler " : "") +
|
||||
(preview_url ? spinnerClass : "") +
|
||||
'" data-media-type="audio">' +
|
||||
(s ? spoilerBtns : "") +
|
||||
'<audio controls src="' +
|
||||
m.url +
|
||||
url +
|
||||
'"></audio>' +
|
||||
'<img src="' +
|
||||
m.preview_url +
|
||||
(preview_url
|
||||
? '<img src="' +
|
||||
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>";
|
||||
}
|
||||
(description ? this.#escapeHTML(description) : "") +
|
||||
'" loading="lazy" />'
|
||||
: "") +
|
||||
"</div>"
|
||||
);
|
||||
}
|
||||
|
||||
if (type === "video" || type === "gifv") {
|
||||
if (!this.mtSettings.hideVideoPreview) {
|
||||
media =
|
||||
'<div class="mt-post-media ' +
|
||||
(spoiler ? "mt-post-media-spoiler " : "") +
|
||||
this.mtSettings.spinnerClass +
|
||||
'" 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 : "") +
|
||||
if (!hideVideoPreview) {
|
||||
return (
|
||||
"<div" +
|
||||
commonAttributes +
|
||||
(s ? spoilerBtns : "") +
|
||||
'<img src="' +
|
||||
m.preview_url +
|
||||
preview_url +
|
||||
'" alt="' +
|
||||
(m.description ? this.#escapeHTML(m.description) : "") +
|
||||
(description ? this.#escapeHTML(description) : "") +
|
||||
'" loading="lazy" />' +
|
||||
'<button class="mt-btn-play" title="' +
|
||||
this.mtSettings.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>' +
|
||||
"</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>";
|
||||
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></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
|
||||
* @param {Event} e User interaction trigger
|
||||
*/
|
||||
#toogleTxtSpoiler(e) {
|
||||
const target = e.target;
|
||||
const nextSibling = target.nextSibling;
|
||||
#toggleTxtSpoiler(e) {
|
||||
const button = e.target;
|
||||
const spoilerText = button.nextSibling;
|
||||
const isExpanded = button.getAttribute("aria-expanded") === "true";
|
||||
|
||||
if (target.textContent == this.mtSettings.btnShowMore) {
|
||||
nextSibling.classList.remove("spoiler-txt-hidden");
|
||||
nextSibling.classList.add("spoiler-txt-visible");
|
||||
target.setAttribute("aria-expanded", "true");
|
||||
target.textContent = this.mtSettings.btnShowLess;
|
||||
} else {
|
||||
nextSibling.classList.remove("spoiler-txt-visible");
|
||||
nextSibling.classList.add("spoiler-txt-hidden");
|
||||
target.setAttribute("aria-expanded", "false");
|
||||
target.textContent = this.mtSettings.btnShowMore;
|
||||
}
|
||||
spoilerText.classList.toggle("spoiler-txt-hidden", isExpanded);
|
||||
spoilerText.classList.toggle("spoiler-txt-visible", !isExpanded);
|
||||
button.setAttribute("aria-expanded", !isExpanded);
|
||||
button.textContent = isExpanded
|
||||
? this.mtSettings.btnShowMore
|
||||
: this.mtSettings.btnShowLess;
|
||||
}
|
||||
|
||||
/**
|
||||
* Spoiler toggle for image/video
|
||||
* @param {Event} e User interaction trigger
|
||||
*/
|
||||
#toogleMediaSpoiler(e) {
|
||||
const target = e.target;
|
||||
if (target.classList.contains("mt-btn-spoiler-media-show")) {
|
||||
target.parentNode.classList.remove("mt-post-media-spoiler");
|
||||
} else {
|
||||
target.parentNode.classList.add("mt-post-media-spoiler");
|
||||
}
|
||||
#toggleMediaSpoiler(e) {
|
||||
const button = e.target;
|
||||
const mediaContainer = button.parentNode;
|
||||
mediaContainer.classList.toggle(
|
||||
"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
|
||||
*/
|
||||
#createPreviewLink(c) {
|
||||
let previewDescription = "";
|
||||
if (this.mtSettings.previewMaxLines !== "0" && c.description) {
|
||||
const txtTruncateCss =
|
||||
this.mtSettings.previewMaxLines.length !== 0 ? " truncate" : "";
|
||||
const {
|
||||
url,
|
||||
image,
|
||||
image_description,
|
||||
provider_name,
|
||||
title,
|
||||
description,
|
||||
author_name,
|
||||
} = c;
|
||||
const { previewMaxLines, spinnerClass } = this.mtSettings;
|
||||
|
||||
let previewDescription = "";
|
||||
if (previewMaxLines !== "0" && description) {
|
||||
previewDescription =
|
||||
'<span class="mt-post-preview-description' +
|
||||
txtTruncateCss +
|
||||
(previewMaxLines.length !== 0 ? " truncate" : "") +
|
||||
'">' +
|
||||
this.#parseHTMLstring(c.description) +
|
||||
this.#parseHTMLstring(description) +
|
||||
"</span>";
|
||||
}
|
||||
|
||||
const card =
|
||||
return (
|
||||
'<a href="' +
|
||||
c.url +
|
||||
url +
|
||||
'" class="mt-post-preview" target="_blank" rel="noopener noreferrer">' +
|
||||
(c.image
|
||||
(image
|
||||
? '<div class="mt-post-preview-image ' +
|
||||
this.mtSettings.spinnerClass +
|
||||
spinnerClass +
|
||||
'"><img src="' +
|
||||
c.image +
|
||||
image +
|
||||
'" alt="' +
|
||||
this.#escapeHTML(c.image_description) +
|
||||
this.#escapeHTML(image_description) +
|
||||
'" loading="lazy" /></div>'
|
||||
: '<div class="mt-post-preview-noImage">📄</div>') +
|
||||
"</div>" +
|
||||
'<div class="mt-post-preview-content">' +
|
||||
(c.provider_name
|
||||
(provider_name
|
||||
? '<span class="mt-post-preview-provider">' +
|
||||
this.#parseHTMLstring(c.provider_name) +
|
||||
this.#parseHTMLstring(provider_name) +
|
||||
"</span>"
|
||||
: "") +
|
||||
'<span class="mt-post-preview-title">' +
|
||||
c.title +
|
||||
title +
|
||||
"</span>" +
|
||||
previewDescription +
|
||||
(c.author_name
|
||||
(author_name
|
||||
? '<span class="mt-post-preview-author">' +
|
||||
this.#parseHTMLstring(c.author_name) +
|
||||
this.#parseHTMLstring(author_name) +
|
||||
"</span>"
|
||||
: "") +
|
||||
"</div>" +
|
||||
"</a>";
|
||||
|
||||
return card;
|
||||
"</div></a>"
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -1376,44 +1342,55 @@ export class Init {
|
||||
* Build footer after last post
|
||||
*/
|
||||
#buildFooter() {
|
||||
let btnSeeMoreHTML = "";
|
||||
let btnReloadHTML = "";
|
||||
const {
|
||||
btnSeeMore,
|
||||
btnReload,
|
||||
timelineType,
|
||||
profileName,
|
||||
hashtagName,
|
||||
instanceUrl,
|
||||
} = this.mtSettings;
|
||||
let btnSeeMoreHTML = "",
|
||||
btnReloadHTML = "";
|
||||
|
||||
// Create button to open Mastodon page
|
||||
if (this.mtSettings.btnSeeMore) {
|
||||
if (btnSeeMore) {
|
||||
let btnSeeMorePath = "";
|
||||
if (this.mtSettings.timelineType === "profile") {
|
||||
if (this.mtSettings.profileName) {
|
||||
btnSeeMorePath = this.mtSettings.profileName;
|
||||
switch (timelineType) {
|
||||
case "profile":
|
||||
if (profileName) {
|
||||
btnSeeMorePath = profileName;
|
||||
} else {
|
||||
this.#showError(
|
||||
"Please check your <strong>profileName</strong> value",
|
||||
"⚠️"
|
||||
);
|
||||
}
|
||||
} else if (this.mtSettings.timelineType === "hashtag") {
|
||||
btnSeeMorePath = "tags/" + this.mtSettings.hashtagName;
|
||||
} else if (this.mtSettings.timelineType === "local") {
|
||||
break;
|
||||
case "hashtag":
|
||||
btnSeeMorePath = "tags/" + hashtagName;
|
||||
break;
|
||||
case "local":
|
||||
btnSeeMorePath = "public/local";
|
||||
break;
|
||||
}
|
||||
btnSeeMoreHTML = `
|
||||
<a class="mt-btn-violet btn-see-more" href="${
|
||||
this.mtSettings.instanceUrl
|
||||
}/${this.#escapeHTML(
|
||||
btnSeeMorePath
|
||||
)}" rel="nofollow noopener noreferrer" target="_blank">
|
||||
${this.mtSettings.btnSeeMore}
|
||||
</a>`;
|
||||
btnSeeMoreHTML =
|
||||
'<a class="mt-btn-violet btn-see-more" href="' +
|
||||
instanceUrl +
|
||||
"/" +
|
||||
this.#escapeHTML(btnSeeMorePath) +
|
||||
'" rel="nofollow noopener noreferrer" target="_blank">' +
|
||||
btnSeeMore +
|
||||
"</a>";
|
||||
}
|
||||
|
||||
// Create button to refresh the timeline
|
||||
if (this.mtSettings.btnReload) {
|
||||
btnReloadHTML = `
|
||||
<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>
|
||||
${this.mtSettings.btnReload}
|
||||
</button>`;
|
||||
if (btnReload) {
|
||||
btnReloadHTML =
|
||||
'<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>' +
|
||||
btnReload +
|
||||
"</button>";
|
||||
}
|
||||
|
||||
// Add footer container
|
||||
@ -1423,12 +1400,11 @@ export class Init {
|
||||
);
|
||||
|
||||
// Add event listener to the button "Refresh"
|
||||
if (this.mtSettings.btnReload) {
|
||||
const reloadBtn =
|
||||
this.mtContainerNode.getElementsByClassName("btn-refresh")[0];
|
||||
reloadBtn.addEventListener("click", () => {
|
||||
this.mtUpdate();
|
||||
});
|
||||
if (btnReload) {
|
||||
const reloadBtn = this.mtContainerNode.querySelector(".btn-refresh");
|
||||
if (reloadBtn) {
|
||||
reloadBtn.addEventListener("click", () => this.mtUpdate());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1453,12 +1429,12 @@ export class Init {
|
||||
|
||||
// Check if spoiler text button was clicked
|
||||
if (target.classList.contains("mt-btn-spoiler-txt")) {
|
||||
this.#toogleTxtSpoiler(e);
|
||||
this.#toggleTxtSpoiler(e);
|
||||
}
|
||||
|
||||
// Check if spoiler media button was clicked
|
||||
if (target.classList.contains("mt-btn-spoiler-media")) {
|
||||
this.#toogleMediaSpoiler(e);
|
||||
this.#toggleMediaSpoiler(e);
|
||||
}
|
||||
|
||||
// Check if image in post was clicked
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user