diff options
Diffstat (limited to 'static/js')
| -rw-r--r-- | static/js/mastodon-timeline.esm.js | 949 |
1 files changed, 0 insertions, 949 deletions
diff --git a/static/js/mastodon-timeline.esm.js b/static/js/mastodon-timeline.esm.js deleted file mode 100644 index da7473c..0000000 --- a/static/js/mastodon-timeline.esm.js +++ /dev/null @@ -1,949 +0,0 @@ -/** - * Mastodon embed timeline - * @author idotj - * @version 4.7.0 - * @url https://gitlab.com/idotj/mastodon-embed-timeline - * @license GNU AGPLv3 - */ -class t { - constructor(t = {}) { - ((this.defaultSettings = { - mtContainerId: "mt-container", - instanceUrl: "https://mastodon.social", - timelineType: "local", - userId: "", - profileName: "", - hashtagName: "", - spinnerClass: "mt-loading-spinner", - defaultTheme: "auto", - maxNbPostFetch: "20", - maxNbPostShow: "20", - dateFormatLocale: "en-GB", - dateFormatOptions: { - day: "2-digit", - month: "short", - year: "numeric", - }, - hideUnlisted: !1, - hideReblog: !1, - hideReplies: !1, - hidePinnedPosts: !1, - hideUserAccount: !1, - txtMaxLines: "", - filterByLanguage: "", - btnShowMore: "SHOW MORE", - btnShowLess: "SHOW LESS", - markdownBlockquote: !1, - hideEmojos: !1, - btnShowContent: "SHOW CONTENT", - hideVideoPreview: !1, - btnPlayVideoTxt: "Load and play video", - hidePreviewLink: !1, - previewMaxLines: "", - hideCounterBar: !1, - disableCarousel: !1, - carouselCloseTxt: "Close carousel", - carouselPrevTxt: "Previous media item", - carouselNextTxt: "Next media item", - btnSeeMore: "See more posts at Mastodon", - btnReload: "Refresh", - insistSearchContainer: !1, - insistSearchContainerTime: "3000", - }), - (this.mtSettings = { ...this.defaultSettings, ...t }), - this.#t(), - (this.linkHeader = {}), - (this.mtContainerNode = ""), - (this.mtBodyNode = ""), - (this.fetchedData = {}), - this.#e(() => { - this.#i(); - })); - } - #t() { - Number(this.mtSettings.maxNbPostShow) > - Number(this.mtSettings.maxNbPostFetch) && - (console.error( - `Please check your settings! The maximum number of posts to show is bigger than the maximum number of posts to fetch. Changing the value of "maxNbPostFetch" to: ${this.mtSettings.maxNbPostShow}`, - ), - (this.mtSettings.maxNbPostFetch = this.mtSettings.maxNbPostShow)); - } - #e(t) { - "undefined" != typeof document && "complete" === document.readyState - ? t() - : "undefined" != typeof document && - "complete" !== document.readyState && - document.addEventListener("DOMContentLoaded", t()); - } - #i() { - const t = () => { - ((this.mtContainerNode = document.getElementById( - this.mtSettings.mtContainerId, - )), - (this.mtBodyNode = - this.mtContainerNode.getElementsByClassName("mt-body")[0]), - this.#s(), - this.#a("newTimeline")); - }; - if (this.mtSettings.insistSearchContainer) { - const e = performance.now(), - i = () => { - if (document.getElementById(this.mtSettings.mtContainerId)) - t(); - else { - performance.now() - e < - this.mtSettings.insistSearchContainerTime - ? requestAnimationFrame(i) - : console.error( - `Impossible to find the <div> container with id: "${this.mtSettings.mtContainerId}" after several attempts for ${this.mtSettings.insistSearchContainerTime / 1e3} seconds`, - ); - } - }; - i(); - } else - document.getElementById(this.mtSettings.mtContainerId) - ? t() - : console.error( - `Impossible to find the <div> container with id: "${this.mtSettings.mtContainerId}". Please try to add the option 'insistSearchContainer: true' when initializing the script`, - ); - } - mtUpdate() { - this.#e(() => { - (this.mtBodyNode.replaceChildren(), - this.mtBodyNode.insertAdjacentHTML( - "afterbegin", - '<div class="mt-loading-spinner"></div>', - ), - this.#a("updateTimeline")); - }); - } - mtColorTheme(t) { - this.#e(() => { - this.mtContainerNode.setAttribute("data-theme", t); - }); - } - #s() { - if ("auto" === this.mtSettings.defaultTheme) { - let t = window.matchMedia("(prefers-color-scheme: dark)"); - (t.matches ? this.mtColorTheme("dark") : this.mtColorTheme("light"), - t.addEventListener("change", (t) => { - t.matches - ? this.mtColorTheme("dark") - : this.mtColorTheme("light"); - })); - } else this.mtColorTheme(this.mtSettings.defaultTheme); - } - #o() { - return new Promise((t, e) => { - const i = this.mtSettings.instanceUrl - ? `${this.mtSettings.instanceUrl}/api/v1/` - : this.#n( - "Please check your <strong>instanceUrl</strong> value", - "⚠️", - ), - s = this.#r(i), - a = Object.entries(s).map(([t, i]) => - this.#l(i, t) - .then((e) => ({ [t]: e })) - .catch( - (i) => ( - e( - new Error( - "Something went wrong getting the timeline data.", - ), - ), - this.#n(i.message), - { [t]: [] } - ), - ), - ); - Promise.all(a).then(async (e) => { - if ( - ((this.fetchedData = e.reduce( - (t, e) => ({ ...t, ...e }), - {}, - )), - !this.mtSettings.hidePinnedPosts && - void 0 !== this.fetchedData.pinned?.length && - 0 !== this.fetchedData.pinned.length) - ) { - const t = this.fetchedData.pinned.map((t) => ({ - ...t, - pinned: !0, - })); - this.fetchedData.timeline = [ - ...t, - ...this.fetchedData.timeline, - ]; - } - if (this.#d()) t(); - else { - do { - await this.#m(); - } while (!this.#d() && this.linkHeader.next); - t(); - } - }); - }); - } - #r(t) { - const { - timelineType: e, - userId: i, - hashtagName: s, - hideReblog: a, - hideReplies: o, - maxNbPostFetch: n, - hidePinnedPosts: r, - hideEmojos: l, - } = this.mtSettings, - d = {}; - switch (e) { - case "profile": - if (!i) { - this.#n( - "Please check your <strong>userId</strong> value", - "⚠️", - ); - break; - } - ((d.timeline = `${t}accounts/${i}/statuses?limit=${n}`), - r || (d.pinned = `${t}accounts/${i}/statuses?pinned=true`)); - break; - case "hashtag": - if (!s) { - this.#n( - "Please check your <strong>hashtagName</strong> value", - "⚠️", - ); - break; - } - d.timeline = `${t}timelines/tag/${s}?limit=${n}`; - break; - case "local": - d.timeline = `${t}timelines/public?local=true&limit=${n}`; - break; - default: - this.#n( - "Please check your <strong>timelineType</strong> value", - "⚠️", - ); - } - return ( - a && (d.timeline += "&exclude_reblogs=true"), - o && (d.timeline += "&exclude_replies=true"), - l || (d.emojos = `${t}custom_emojis`), - d - ); - } - async #l(t, e) { - const i = await fetch(t); - if (!i.ok) - throw new Error( - `\n Failed to fetch the following Url:<br />${t}<hr />Error status: ${i.status}<hr />Error message: ${i.statusText}\n `, - ); - const s = await i.json(); - return ( - "timeline" === e && - i.headers.get("Link") && - (this.linkHeader = this.#h(i.headers.get("Link"))), - s - ); - } - #d() { - return ( - this.fetchedData.timeline.length >= - Number(this.mtSettings.maxNbPostFetch) - ); - } - #m() { - return new Promise((t) => { - this.linkHeader.next - ? this.#l(this.linkHeader.next, "timeline") - .then((e) => { - ((this.fetchedData.timeline = [ - ...this.fetchedData.timeline, - ...e, - ]), - t()); - }) - .catch( - (t) => ( - reject( - new Error( - "Something went wrong fetching more posts.", - ), - ), - this.#n(t.message), - { [key]: [] } - ), - ) - : t(); - }); - } - #h(t) { - const e = t - .split(", ") - .map((t) => t.split("; ")) - .map((t) => [ - t[1].replace(/"/g, "").replace("rel=", ""), - t[0].slice(1, -1), - ]); - return Object.fromEntries(e); - } - async #a(t) { - await this.#o(); - const { - hideUnlisted: e, - maxNbPostShow: i, - filterByLanguage: s, - } = this.mtSettings, - a = this.fetchedData.timeline; - this.mtBodyNode.replaceChildren(); - if ( - (a - .filter((t) => { - const i = - "public" === t.visibility || - (!e && "unlisted" === t.visibility), - a = t.language || (t.reblog ? t.reblog.language : null); - return i && ("" === s || a === s); - }) - .forEach((t, e) => { - e < i && this.#c(t, e); - }), - "" !== this.mtBodyNode.innerHTML) - ) - "newTimeline" === t - ? (this.#p(), - this.#g(), - this.#u(0), - this.#v(), - (this.mtSettings.btnSeeMore || this.mtSettings.btnReload) && - this.#b()) - : "updateTimeline" === t - ? this.#p() - : this.#n( - "The function buildTimeline() was expecting a param", - ); - else { - const t = `No posts to show<hr />${a?.length || 0} posts have been fetched from the server<hr />This may be due to an incorrect configuration with the parameters or with the filters applied (to hide certains type of posts)`; - this.#n(t, "📭"); - } - } - #g() { - ("0" !== this.mtSettings.txtMaxLines && - 0 !== this.mtSettings.txtMaxLines.length && - this.mtBodyNode.parentNode.style.setProperty( - "--mt-txt-max-lines", - this.mtSettings.txtMaxLines, - ), - "0" !== this.mtSettings.previewMaxLines && - 0 !== this.mtSettings.previewMaxLines.length && - this.mtBodyNode.parentNode.style.setProperty( - "--mt-preview-max-lines", - this.mtSettings.previewMaxLines, - )); - } - #u(t) { - const e = this.mtBodyNode.getElementsByTagName("article"); - for (let i = 0; i < t; i++) e[i].setAttribute("aria-setsize", t); - } - #c(t, e) { - this.mtBodyNode.insertAdjacentHTML("beforeend", this.#w(t, e)); - } - #w(t, e) { - const i = Boolean(t.reblog), - s = i ? t.reblog : t, - { - url: a, - created_at: o, - replies_count: n, - reblogs_count: r, - favourites_count: l, - } = s, - { - avatar: d, - url: m, - username: h, - display_name: c, - emojis: p, - } = s.account, - g = - '<a href="' + - m + - '" class="mt-post-avatar" rel="nofollow noopener noreferrer" target="_blank"><div class="mt-post-avatar-' + - (i ? "boosted" : "standard") + - '"><div class="mt-post-avatar-image-big mt-loading-spinner"><img src="' + - d + - '" alt="' + - this.#f(h) + - ' avatar" loading="lazy" /></div>' + - (i - ? '<div class="mt-post-avatar-image-small"><img src="' + - t.account.avatar + - '" alt="' + - this.#f(t.account.username) + - ' avatar" loading="lazy" /></div>' - : "") + - "</div></a>", - u = - '<div class="mt-post-header-user"><a href="' + - m + - '" rel="nofollow noopener noreferrer" target="_blank"><bdi class="mt-post-header-user-name">' + - (!this.mtSettings.hideEmojos && c ? this.#x(c, p) : c || h) + - "</bdi>" + - (this.mtSettings.hideUserAccount - ? "" - : '<br /><span class="mt-post-header-user-account">@' + - h + - "@" + - new URL(m).hostname + - "</span>") + - "</a></div>", - v = this.#S(o), - b = - '<div class="mt-post-header-date">' + - (t.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 + - '" rel="nofollow noopener noreferrer" target="_blank"><time datetime="' + - o + - '">' + - v + - "</time>" + - (t.edited_at ? " *" : "") + - "</a></div>", - w = - this.mtSettings.hidePreviewLink || (!t.card && !t.reblog?.card) - ? "" - : this.#y(i ? t.reblog.card : t.card), - f = - "0" !== this.mtSettings.txtMaxLines && - this.mtSettings.txtMaxLines.length - ? " truncate" - : ""; - let x = ""; - const S = s.spoiler_text ? s.spoiler_text : s.content, - y = - ' <button type="button" class="mt-btn-dark mt-btn-spoiler-txt" aria-expanded="false">' + - this.mtSettings.btnShowMore + - '</button><div class="spoiler-txt-hidden">' + - this.#L(s.content) + - w + - "</div>"; - S && - (x = - '<div class="mt-post-txt' + - f + - '"><div class="mt-post-txt-wrapper">' + - this.#L(S) + - (s.spoiler_text ? y : "") + - "</div></div>"); - const L = [ - ...t.media_attachments, - ...(t.reblog?.media_attachments || []), - ] - .map((t) => this.#T(t, s.sensitive)) - .join(""), - T = L ? `<div class="mt-post-media-wrapper">${L}</div>` : "", - N = t.poll - ? '<div class="mt-post-poll ' + - (t.poll.expired ? "mt-post-poll-expired" : "") + - '"><ul>' + - t.poll.options - .map(function (t) { - return "<li>" + t.title + "</li>"; - }) - .join("") + - "</ul></div>" - : "", - M = this.mtSettings.hideCounterBar - ? "" - : '<div class="mt-post-counter-bar">' + - this.#N("replies", n) + - this.#N("reblog", r) + - this.#N("favorites", l) + - "</div>"; - return ( - '<article class="mt-post" aria-posinset="' + - (e + 1) + - '" data-location="' + - a + - '" tabindex="0"><div class="mt-post-header">' + - g + - u + - b + - "</div>" + - x + - T + - N + - (s.spoiler_text ? "" : w) + - M + - "</article>" - ); - } - #N(t, e) { - return `<div class="mt-post-counter-bar-${t}">${{ replies: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -960 960 960" aria-hidden="true"><path d="M774.913-185.869V-356q0-56.609-35.891-92.5-35.892-35.891-92.5-35.891H258.045L411.435-331l-56 56.566L105.869-524l249.566-249.566 56 56.566-153.39 153.391h388.477q88.957 0 148.566 59.609 59.608 59.609 59.608 148v170.131h-79.783Z"></path></svg>', reblog: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -960 960 960" aria-hidden="true"><path d="M276.043-65.304 105.869-236.043l170.174-170.175 52.74 54.175-78.652 78.652h449.304v-160h75.261v235.261H250.131l78.652 78.087-52.74 54.74Zm-90.174-457.348v-235.261h524.565L631.782-836l52.74-54.74L854.696-720 684.522-549.26 631.782-604l78.652-78.652H261.13v160h-75.261Z"></path></svg>', favorites: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -960 960 960" aria-hidden="true"><path d="m330.955-216.328 149.066-89 149.066 90.023-40.305-168.391 131.217-114.347-172.956-14.87L480-671.869l-67.043 158.521-172.956 14.305 131.427 113.796-40.473 168.919ZM212.086-50.608l70.652-305.305L45.52-561.305l312.645-26.579L480-876.176l121.835 288.292 312.645 26.579-237.218 205.392 71.217 305.306L480-213.173 212.086-50.607ZM480-433.87Z"></path></svg>' }[t]}${e}</div>`; - } - #M(t, e) { - function i(t, e) { - let i = e.replace(/\s+/g, "").toLowerCase(); - return ( - !( - !["src", "href", "xlink:href"].includes(t) || - (!i.includes("javascript:") && !i.includes("data:")) - ) || - !!t.startsWith("on") || - void 0 - ); - } - function s(t) { - let e = t.attributes; - for (let { name: s, value: a } of e) - i(s, a) && t.removeAttribute(s); - } - let a = - new DOMParser().parseFromString(t, "text/html").body || - document.createElement("body"); - return ( - (function (t) { - let e = t.querySelectorAll("script"); - for (let t of e) t.remove(); - })(a), - (function t(e) { - let i = e.children; - for (let e of i) (s(e), t(e)); - })(a), - e ? a.childNodes : a.innerHTML - ); - } - #L(t) { - let e = t; - return ( - (e = this.#M(e, !1)), - (e = this.#k(e)), - this.mtSettings.hideEmojos || - (e = this.#x(e, this.fetchedData.emojos)), - this.mtSettings.markdownBlockquote && - (e = this.#C( - e, - "<p>>", - "</p>", - "<blockquote><p>", - "</p></blockquote>", - )), - e - ); - } - #k(t) { - let e = t.replaceAll('rel="tag"', 'rel="tag" target="_blank"'); - return ( - (e = e.replaceAll( - 'class="u-url mention"', - 'class="u-url mention" target="_blank"', - )), - e - ); - } - #C(t, e, i, s, a) { - if (t.includes(e)) { - const o = new RegExp(e + "(.*?)" + i, "gi"); - return t.replace(o, s + "$1" + a); - } - return t; - } - #f(t) { - return (t ?? "") - .replaceAll("&", "&") - .replaceAll("<", "<") - .replaceAll(">", ">") - .replaceAll('"', """) - .replaceAll("'", "'"); - } - #x(t, e) { - if (t.includes(":")) { - for (const i of e) { - const e = new RegExp(`\\:${i.shortcode}\\:`, "g"); - t = t.replace( - e, - `<img src="${i.url}" class="mt-custom-emoji" alt="Emoji ${i.shortcode}" />`, - ); - } - return t; - } - return t; - } - #S(t) { - const e = new Date(t); - return new Intl.DateTimeFormat( - this.mtSettings.dateFormatLocale, - this.mtSettings.dateFormatOptions, - ).format(e); - } - #T(t, e = !1) { - const { type: i, url: s, preview_url: a, description: o, meta: n } = t, - { original: r, small: l } = n, - { - spinnerClass: d, - btnShowContent: m, - btnPlayVideoTxt: h, - hideVideoPreview: c, - } = this.mtSettings, - p = - '<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">' + - m + - "</button>", - g = - ' class="mt-post-media ' + - (e ? "mt-post-media-spoiler " : "") + - (d || "") + - '" data-media-type="' + - i + - '" data-media-url-hd="' + - s + - '"' + - (o ? ' data-media-alt-txt="' + this.#f(o) + '"' : "") + - ' data-media-width-hd="' + - r.width + - '" data-media-height-hd="' + - r.height + - '" style="padding-top: calc(100%/' + - l?.aspect + - ')">'; - return "image" === i - ? "<div" + - g + - (e ? p : "") + - '<img src="' + - a + - '" alt="' + - (o ? this.#f(o) : "") + - '" loading="lazy" /></div>' - : "audio" === i - ? '<div class="mt-post-media ' + - (e ? "mt-post-media-spoiler " : "") + - (a ? d : "") + - '" data-media-type="audio">' + - (e ? p : "") + - '<audio controls src="' + - s + - '"></audio>' + - (a - ? '<img src="' + - a + - '" alt="' + - (o ? this.#f(o) : "") + - '" loading="lazy" />' - : "") + - "</div>" - : "video" === i || "gifv" === i - ? c - ? "<div" + - g + - (e ? p : "") + - '<video controls src="' + - s + - '" loop></video></div>' - : "<div" + - g + - (e ? p : "") + - '<img src="' + - a + - '" alt="' + - (o ? this.#f(o) : "") + - '" loading="lazy" /><button class="mt-btn-play" title="' + - h + - '"><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>' - : ""; - } - #P(t, e) { - let i = document.createElement("dialog"); - ((i.id = t), - i.classList.add("mt-dialog"), - (i.dataset.theme = this.mtContainerNode.getAttribute("data-theme")), - (i.innerHTML = e), - document.body.prepend(i), - i.showModal(), - i.addEventListener("close", () => { - document.body.removeChild(i); - })); - } - #E(t) { - const e = Array.from(t.target.parentNode.parentNode.children).filter( - (t) => !t.classList.contains("mt-post-media-spoiler"), - ), - i = e.indexOf(t.target.parentNode) + 1; - let s = []; - e.forEach((t, e) => { - let i = ""; - i = - "gifv" === t.getAttribute("data-media-type") || - "video" === t.getAttribute("data-media-type") - ? `\n <video controls src="${t.getAttribute("data-media-url-hd")}" width="${t.getAttribute("data-media-width-hd")}" height="${t.getAttribute("data-media-height-hd")}" class="mt-carousel-media" style="max-width:${t.getAttribute("data-media-width-hd")}px; max-height:${t.getAttribute("data-media-height-hd")}px" loop>\n </video>\n ` - : `\n <img src="${t.getAttribute("data-media-url-hd")}" width="${t.getAttribute("data-media-width-hd")}" height="${t.getAttribute("data-media-height-hd")}" class="mt-carousel-media mt-loading-spinner" alt="${t.getAttribute("data-media-alt-txt")}" style="max-width:${t.getAttribute("data-media-width-hd")}px; max-height:${t.getAttribute("data-media-height-hd")}px" dragabble="false" />\n `; - const a = `\n <li class="mt-carousel-item">\n <div id="mt-carousel-${e + 1}" class="mt-carousel-media-wrapper" data-media-type="${t.getAttribute("data-media-type")}">\n ${i}\n </div>\n </li>\n `; - s.push(a); - }); - const a = `\n <div class="mt-carousel-header">\n <form method="dialog">\n <button id="mt-carousel-close" class="mt-btn-dark" title="${this.mtSettings.carouselCloseTxt}">\n <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">\n <path fill-rule="evenodd" d="M5.293 5.293a1 1 0 0 1 1.414 0L12 10.586l5.293-5.293a1 1 0 0 1 1.414 1.414L13.414 12l5.293 5.293a1 1 0 0 1-1.414 1.414L12 13.414l-5.293 5.293a1 1 0 0 1-1.414-1.414L10.586 12 5.293 6.707a1 1 0 0 1 0-1.414z" fill="var(--mt-color-content-txt)"/>\n </svg>\n </button>\n </form>\n </div>\n\n <div class="mt-carousel-body">\n <ul id="mt-carousel-scroll" class="mt-carousel-scroll">\n ${s.join("")}\n </ul>\n </div>\n\n <button id="mt-carousel-prev" class="mt-carousel-prev" title="${this.mtSettings.carouselPrevTxt}" ${1 === i ? "hidden" : ""}>\n <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" aria-hidden="true">\n <path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z" fill="var(--mt-color-content-txt)"></path>\n </svg>\n </button>\n\n <button id="mt-carousel-next" class="mt-carousel-next" title="${this.mtSettings.carouselNextTxt}" ${i === e.length ? "hidden" : ""}>\n <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" aria-hidden="true">\n <path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z" fill="var(--mt-color-content-txt)"></path>\n </svg>\n </button>\n `; - (this.#P("mt-carousel", a), s.length >= 2 && this.#$(e.length, i)); - } - #$(t, e) { - let i = e; - const s = document.getElementById("mt-carousel-scroll"); - let a = 0, - o = !1; - const n = document.getElementById("mt-carousel-prev"), - r = document.getElementById("mt-carousel-next"), - l = (t, e = "smooth") => { - document - .getElementById("mt-carousel-" + t) - .scrollIntoView({ behavior: e }); - }; - l(i, "instant"); - const d = () => { - (clearTimeout(a), - (a = setTimeout(() => { - (o && - ((i = (() => { - const t = - (s.scrollLeft + s.clientWidth) / s.clientWidth; - return Math.round(t + Number.EPSILON); - })()), - m()), - (o = !0)); - }, 60))); - }; - s.addEventListener("scroll", d); - const m = () => { - ((n.hidden = 1 === i), (r.hidden = i === t)); - }, - h = (e) => { - const s = e.target.closest("button")?.id; - ("mt-carousel-next" === s - ? ((o = !1), ++i, i > t && (i = t), l(i), m()) - : "mt-carousel-prev" === s && - ((o = !1), --i, i < 1 && (i = 1), l(i), m()), - "mt-carousel-close" === s && p()); - }; - document.addEventListener("click", h); - const c = (t) => { - ("Escape" !== t.key && 27 !== t.keyCode) || p(); - }; - document.addEventListener("keydown", c); - const p = () => { - (s.removeEventListener("scroll", d), - document.removeEventListener("click", h), - document.removeEventListener("keydown", c)); - }; - } - #B(t) { - const e = t.target.closest("[data-media-type]"), - i = e.dataset.mediaUrlHd; - (e.replaceChildren(), - (e.innerHTML = `<video controls src="${i}" autoplay loop></video>`)); - } - #A(t) { - const e = t.target, - i = e.nextSibling, - s = "true" === e.getAttribute("aria-expanded"); - (i.classList.toggle("spoiler-txt-hidden", s), - i.classList.toggle("spoiler-txt-visible", !s), - e.setAttribute("aria-expanded", !s), - (e.textContent = s - ? this.mtSettings.btnShowMore - : this.mtSettings.btnShowLess)); - } - #H(t) { - const e = t.target; - e.parentNode.classList.toggle( - "mt-post-media-spoiler", - !e.classList.contains("mt-btn-spoiler-media-show"), - ); - } - #y(t) { - const { - url: e, - image: i, - image_description: s, - provider_name: a, - title: o, - description: n, - author_name: r, - } = t, - { previewMaxLines: l, spinnerClass: d } = this.mtSettings; - let m = ""; - return ( - "0" !== l && - n && - (m = - '<span class="mt-post-preview-description' + - (0 !== l.length ? " truncate" : "") + - '">' + - this.#q(n) + - "</span>"), - '<a href="' + - e + - '" class="mt-post-preview" target="_blank" rel="noopener noreferrer">' + - (i - ? '<div class="mt-post-preview-image ' + - d + - '"><img src="' + - i + - '" alt="' + - this.#f(s) + - '" loading="lazy" /></div>' - : '<div class="mt-post-preview-noImage">📄</div>') + - '<div class="mt-post-preview-content">' + - (a - ? '<span class="mt-post-preview-provider">' + - this.#q(a) + - "</span>" - : "") + - '<span class="mt-post-preview-title">' + - o + - "</span>" + - m + - (r - ? '<span class="mt-post-preview-author">' + - this.#q(r) + - "</span>" - : "") + - "</div></a>" - ); - } - #q(t) { - return new DOMParser().parseFromString(t, "text/html").body.textContent; - } - #b() { - const { - btnSeeMore: t, - btnReload: e, - timelineType: i, - profileName: s, - hashtagName: a, - instanceUrl: o, - } = this.mtSettings; - let n = "", - r = ""; - if (t) { - let e = ""; - switch (i) { - case "profile": - s - ? (e = s) - : this.#n( - "Please check your <strong>profileName</strong> value", - "⚠️", - ); - break; - case "hashtag": - e = "tags/" + a; - break; - case "local": - e = "public/local"; - } - n = - '<a class="mt-btn-violet btn-see-more" href="' + - o + - "/" + - this.#f(e) + - '" rel="nofollow noopener noreferrer" target="_blank">' + - t + - "</a>"; - } - if ( - (e && - (r = - '<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>' + - e + - "</button>"), - this.mtBodyNode.parentNode.insertAdjacentHTML( - "beforeend", - '<div class="mt-footer">' + n + r + "</div>", - ), - e) - ) { - const t = this.mtContainerNode.querySelector(".btn-refresh"); - t && t.addEventListener("click", () => this.mtUpdate()); - } - } - #v() { - (this.mtBodyNode.addEventListener("click", (t) => { - const e = t.target, - i = e.localName, - s = e.parentNode; - (("article" == i || - "article" == e.offsetParent?.localName || - (this.mtSettings.disableCarousel && - "image" === s.getAttribute("data-media-type"))) && - this.#D(t), - e.classList.contains("mt-btn-spoiler-txt") && this.#A(t), - e.classList.contains("mt-btn-spoiler-media") && this.#H(t), - this.mtSettings.disableCarousel || - "img" != i || - ("image" !== s.getAttribute("data-media-type") && - "audio" !== s.getAttribute("data-media-type")) || - this.#E(t), - ("mt-btn-play" == e.className || - ("svg" == i && "mt-btn-play" == s.className) || - ("path" == i && "mt-btn-play" == s.parentNode.className) || - ("img" == i && - ("video" === s.getAttribute("data-media-type") || - "gifv" === s.getAttribute("data-media-type")))) && - this.#B(t)); - }), - this.mtBodyNode.addEventListener("keydown", (t) => { - const e = t.target.localName; - "Enter" === t.key && "article" == e && this.#D(t); - })); - } - #D(t) { - const e = t.target.closest(".mt-post")?.dataset.location; - if (!e) return; - const i = t.target.localName; - if ( - "a" === i || - "span" === i || - "button" === i || - "bdi" === i || - "time" === i - ) - return; - const s = t.target.className; - if ("mt-post-media-spoiler" === s || "mt-post-preview-noImage" === s) - return; - const a = t.target.parentNode?.className; - "mt-post-avatar-image-big" !== a && - "mt-post-avatar-image-small" !== a && - "mt-post-header-user-name" !== a && - "mt-post-preview-image" !== a && - "mt-post-preview" !== a && - window.open(e, "_blank", "noopener"); - } - #p() { - const t = (e) => { - (e.target.parentNode.classList.remove(this.mtSettings.spinnerClass), - e.target.removeEventListener("load", t), - e.target.removeEventListener("error", t)); - }; - this.mtBodyNode - .querySelectorAll(`.${this.mtSettings.spinnerClass} > img`) - .forEach((e) => { - (e.addEventListener("load", t), e.addEventListener("error", t)); - }); - } - #n(t, e) { - const i = e || "❌"; - throw ( - (this.mtBodyNode.innerHTML = `\n <div class="mt-error">\n <span class="mt-error-icon">${i}</span>\n <strong>Oops, something's happened:</strong>\n <div class="mt-error-message">${t}</div>\n </div>`), - this.mtBodyNode.setAttribute("role", "none"), - new Error( - "Stopping the script due to an error building the timeline.", - ) - ); - } -} -export { t as Init }; |