' +
+ avatar +
+ user +
+ timestamp +
+ "
" +
+ content +
+ media.join("") +
+ previewLink +
+ poll +
+ counterBar +
+ " container
+ this.mtBodyContainer.innerHTML = "";
+
+ for (let i in this.FETCHED_DATA.timeline) {
+ // First filter (Public / Unlisted)
+ if (
+ this.FETCHED_DATA.timeline[i].visibility == "public" ||
+ (!this.HIDE_UNLISTED &&
+ this.FETCHED_DATA.timeline[i].visibility == "unlisted")
+ ) {
+ // Second filter (Reblog / Replies)
+ if (
+ (this.HIDE_REBLOG && this.FETCHED_DATA.timeline[i].reblog) ||
+ (this.HIDE_REPLIES && this.FETCHED_DATA.timeline[i].in_reply_to_id)
+ ) {
+ // Nothing here (Don't append toots)
+ } else {
+ // Append toots
+ this.appendToot(this.FETCHED_DATA.timeline[i], Number(i));
+ }
+ }
+ }
+
+ // Check if there are toots in the container (due to filters applied)
+ if (this.mtBodyContainer.innerHTML === "") {
+ this.mtBodyContainer.setAttribute("role", "none");
+ this.mtBodyContainer.innerHTML =
+ '
Sorry, no toots to show
";
+ } else {
+ // Insert link after last toot to visit Mastodon page
+ if (this.LINK_SEE_MORE) {
+ let linkSeeMorePath = "";
+ if (this.TIMELINE_TYPE === "profile") {
+ linkSeeMorePath = this.PROFILE_NAME;
+ } else if (this.TIMELINE_TYPE === "hashtag") {
+ linkSeeMorePath = "tags/" + this.HASHTAG_NAME;
+ } else if (this.TIMELINE_TYPE === "local") {
+ linkSeeMorePath = "public/local";
+ }
+ const linkSeeMore =
+ '";
+ this.mtBodyContainer.parentNode.insertAdjacentHTML(
+ "beforeend",
+ linkSeeMore
+ );
+ }
+
+ // Control loading spinners
+ this.manageSpinner();
+ }
+
+ // Toot interactions
+ this.mtBodyContainer.addEventListener("click", function (e) {
+ // Check if toot cointainer was clicked
+ if (
+ e.target.localName == "article" ||
+ e.target.offsetParent?.localName == "article" ||
+ e.target.localName == "img"
+ ) {
+ openTootURL(e);
+ }
+ // Check if Show More/Less button was clicked
+ if (e.target.localName == "button" && e.target.className == "spoiler-btn") {
+ toogleSpoiler(e);
+ }
+ });
+ this.mtBodyContainer.addEventListener("keydown", function (e) {
+ // Check if Enter key was pressed with focus in an article
+ if (e.key === "Enter" && e.target.localName == "article") {
+ openTootURL(e);
+ }
+ });
+
+ /**
+ * Open toot in a new page avoiding any other natural link
+ * @param {event} e User interaction trigger
+ */
+ const openTootURL = function (e) {
+ const urlToot = e.target.closest(".mt-toot").dataset.location;
+ if (
+ e.target.localName !== "a" &&
+ e.target.localName !== "span" &&
+ e.target.localName !== "button" &&
+ e.target.localName !== "time" &&
+ e.target.className !== "mt-toot-preview-noImage" &&
+ e.target.parentNode.className !== "mt-toot-avatar-image-big" &&
+ e.target.parentNode.className !== "mt-toot-avatar-image-small" &&
+ e.target.parentNode.className !== "mt-toot-preview-image" &&
+ e.target.parentNode.className !== "mt-toot-preview" &&
+ urlToot
+ ) {
+ window.open(urlToot, "_blank", "noopener");
+ }
+ };
+
+ /**
+ * Spoiler button
+ * @param {event} e User interaction trigger
+ */
+ const toogleSpoiler = function (e) {
+ const nextSibling = e.target.nextSibling;
+ if (nextSibling.localName === "img") {
+ e.target.parentNode.classList.remove("mt-toot-media-spoiler");
+ e.target.style.display = "none";
+ } else if (
+ nextSibling.classList.contains("spoiler-text-hidden") ||
+ nextSibling.classList.contains("spoiler-text-visible")
+ ) {
+ if (e.target.textContent == "Show more") {
+ nextSibling.classList.remove("spoiler-text-hidden");
+ nextSibling.classList.add("spoiler-text-visible");
+ e.target.setAttribute("aria-expanded", "true");
+ e.target.textContent = "Show less";
+ } else {
+ nextSibling.classList.remove("spoiler-text-visible");
+ nextSibling.classList.add("spoiler-text-hidden");
+ e.target.setAttribute("aria-expanded", "false");
+ e.target.textContent = "Show more";
+ }
+ }
+ };
+};
+
+/**
+ * Set the theme style chosen by the user or by the browser/OS
+ */
+MastodonApi.prototype.setTheme = function () {
+ /**
+ * Set the theme value in the tag using the attribute "data-theme"
+ * @param {string} theme Type of theme to apply: dark or light
+ */
+ const setTheme = function (theme) {
+ document.documentElement.setAttribute("data-theme", theme);
+ };
+
+ if (this.DEFAULT_THEME === "auto") {
+ let systemTheme = window.matchMedia("(prefers-color-scheme: dark)");
+ systemTheme.matches ? setTheme("dark") : setTheme("light");
+ // Update the theme if user change browser/OS preference
+ systemTheme.addEventListener("change", (e) => {
+ e.matches ? setTheme("dark") : setTheme("light");
+ });
+ } else {
+ setTheme(this.DEFAULT_THEME);
+ }
+};
+
+/**
+ * Requests to the server to get all the data
+ */
+MastodonApi.prototype.getTimelineData = async function () {
+ return new Promise((resolve, reject) => {
+ /**
+ * Fetch data from server
+ * @param {string} url address to fetch
+ * @returns {object} List of objects
+ */
+ async function fetchData(url) {
+ const response = await fetch(url);
+
+ if (!response.ok) {
+ throw new Error(
+ "Failed to fetch the following URL: " +
+ url +
+ "
" + + "Error status: " + + response.status + + "
" + + "Error message: " + + response.statusText + ); + } + + const data = await response.json(); + return data; + } + + // URLs to fetch + let urls = {}; + if (this.TIMELINE_TYPE === "profile") { + urls.timeline = `${this.INSTANCE_URL}/api/v1/accounts/${this.USER_ID}/statuses?limit=${this.TOOTS_LIMIT}`; + } else if (this.TIMELINE_TYPE === "hashtag") { + urls.timeline = `${this.INSTANCE_URL}/api/v1/timelines/tag/${this.HASHTAG_NAME}?limit=${this.TOOTS_LIMIT}`; + } else if (this.TIMELINE_TYPE === "local") { + urls.timeline = `${this.INSTANCE_URL}/api/v1/timelines/public?local=true&limit=${this.TOOTS_LIMIT}`; + } + if (!this.HIDE_EMOJOS) { + urls.emojos = this.INSTANCE_URL + "/api/v1/custom_emojis"; + } + + const urlsPromises = Object.entries(urls).map(([key, url]) => { + return fetchData(url) + .then((data) => ({ [key]: data })) + .catch((error) => { + reject(new Error("Something went wrong fetching data")); + this.mtBodyContainer.innerHTML = + '
Sorry, request failed:
";
+ this.mtBodyContainer.setAttribute("role", "none");
+ return { [key]: [] };
+ });
+ });
+
+ // Fetch all urls simultaneously
+ Promise.all(urlsPromises).then((dataObjects) => {
+ this.FETCHED_DATA = dataObjects.reduce((result, dataItem) => {
+ return { ...result, ...dataItem };
+ }, {});
+
+ // console.log("Timeline data fetched: ", this.FETCHED_DATA);
+ resolve();
+ });
+ });
+};
+
+/**
+ * Inner function to add each toot in timeline container
+ * @param {object} c Toot content
+ * @param {number} i Index of toot
+ */
+MastodonApi.prototype.appendToot = function (c, i) {
+ this.mtBodyContainer.insertAdjacentHTML("beforeend", this.assambleToot(c, i));
+};
+
+/**
+ * Build toot structure
+ * @param {object} c Toot content
+ * @param {number} i Index of toot
+ */
+MastodonApi.prototype.assambleToot = function (c, i) {
+ let avatar,
+ user,
+ userName,
+ url,
+ date,
+ formattedDate,
+ favoritesCount,
+ reblogCount,
+ repliesCount;
+
+ if (c.reblog) {
+ // BOOSTED toot
+ // Toot url
+ url = c.reblog.url;
+
+ // Boosted avatar
+ avatar =
+ '' +
+ '" + c.poll.options[i].title + " ";
+ }
+ poll =
+ '' +
+ ' ";
+
+ return toot;
+};
+
+/**
+ * Handle text changes made to toots
+ * @param {string} c Text content
+ * @returns {string} Text content modified
+ */
+MastodonApi.prototype.formatTootText = function (c) {
+ let content = c;
+
+ // Format hashtags and mentions
+ content = this.addTarget2hashtagMention(content);
+
+ // Convert emojos shortcode into images
+ if (!this.HIDE_EMOJOS) {
+ content = this.showEmojos(content, this.FETCHED_DATA.emojos);
+ }
+
+ // Convert markdown styles into HTML
+ if (this.MARKDOWN_BLOCKQUOTE) {
+ content = this.replaceHTMLtag(
+ content,
+ "
`
+ );
+ }
+
+ return c;
+ } else {
+ return c;
+ }
+};
+
+/**
+ * Find all start/end and replace them by another start/end
+ * @param {string} c Text content
+ * @param {string} initialTagOpen Start HTML tag to replace
+ * @param {string} initialTagClose End HTML tag to replace
+ * @param {string} replacedTagOpen New start HTML tag
+ * @param {string} replacedTagClose New end HTML tag
+ * @returns {string} Text in HTML format
+ */
+MastodonApi.prototype.replaceHTMLtag = function (
+ c,
+ initialTagOpen,
+ initialTagClose,
+ replacedTagOpen,
+ replacedTagClose
+) {
+ if (c.includes(initialTagOpen)) {
+ const regex = new RegExp(initialTagOpen + "(.*?)" + initialTagClose, "gi");
+
+ return c.replace(regex, replacedTagOpen + "$1" + replacedTagClose);
+ } else {
+ return c;
+ }
+};
+
+/**
+ * Place media
+ * @param {object} m Media content
+ * @param {boolean} s Spoiler/Sensitive status
+ * @returns {string} Media in HTML format
+ */
+MastodonApi.prototype.placeMedias = function (m, s) {
+ const spoiler = s || false;
+ const pic =
+ '
'
+ : '') +
+ "
" +
+ 'Sorry, no toots to show
" + + "Error status: " + + response.status + + "
" + + "Error message: " + + response.statusText + ); + } + + const data = await response.json(); + return data; + } + + // URLs to fetch + let urls = {}; + if (this.TIMELINE_TYPE === "profile") { + urls.timeline = `${this.INSTANCE_URL}/api/v1/accounts/${this.USER_ID}/statuses?limit=${this.TOOTS_LIMIT}`; + } else if (this.TIMELINE_TYPE === "hashtag") { + urls.timeline = `${this.INSTANCE_URL}/api/v1/timelines/tag/${this.HASHTAG_NAME}?limit=${this.TOOTS_LIMIT}`; + } else if (this.TIMELINE_TYPE === "local") { + urls.timeline = `${this.INSTANCE_URL}/api/v1/timelines/public?local=true&limit=${this.TOOTS_LIMIT}`; + } + if (!this.HIDE_EMOJOS) { + urls.emojos = this.INSTANCE_URL + "/api/v1/custom_emojis"; + } + + const urlsPromises = Object.entries(urls).map(([key, url]) => { + return fetchData(url) + .then((data) => ({ [key]: data })) + .catch((error) => { + reject(new Error("Something went wrong fetching data")); + this.mtBodyContainer.innerHTML = + '
Sorry, request failed:
' +
+ '
" +
+ "";
+
+ // User name and url
+ userName = this.showEmojos(
+ c.reblog.account.display_name
+ ? c.reblog.account.display_name
+ : c.reblog.account.username,
+ this.FETCHED_DATA.emojos
+ );
+ user =
+ '' +
+ '
' +
+ "
" +
+ '' +
+ '
' +
+ "
" +
+ "' +
+ '' +
+ userName +
+ ' account' +
+ "" +
+ "
";
+
+ // Date
+ date = c.reblog.created_at;
+
+ // Counter bar
+ repliesCount = c.reblog.replies_count;
+ reblogCount = c.reblog.reblogs_count;
+ favoritesCount = c.reblog.favourites_count;
+ } else {
+ // STANDARD toot
+ // Toot url
+ url = c.url;
+
+ // Avatar
+ avatar =
+ '' +
+ '' +
+ '
" +
+ "";
+
+ // User name and url
+ userName = this.showEmojos(
+ c.account.display_name ? c.account.display_name : c.account.username,
+ this.FETCHED_DATA.emojos
+ );
+ user =
+ '' +
+ '' +
+ "
" +
+ "' +
+ '' +
+ userName +
+ ' account' +
+ "" +
+ "
";
+
+ // Date
+ date = c.created_at;
+
+ // Counter bar
+ repliesCount = c.replies_count;
+ reblogCount = c.reblogs_count;
+ favoritesCount = c.favourites_count;
+ }
+
+ // Date
+ formattedDate = this.formatDate(date);
+ const timestamp =
+ '' +
+ '' +
+ '" +
+ "" +
+ "
";
+
+ // Main text
+ let text_css = "";
+ if (this.TEXT_MAX_LINES !== "0") {
+ text_css = "truncate";
+ document.documentElement.style.setProperty(
+ "--text-max-lines",
+ this.TEXT_MAX_LINES
+ );
+ }
+
+ let content = "";
+ if (c.spoiler_text !== "") {
+ content =
+ '' +
+ c.spoiler_text +
+ ' ' +
+ '
";
+ } else if (
+ c.reblog &&
+ c.reblog.content !== "" &&
+ c.reblog.spoiler_text !== ""
+ ) {
+ content =
+ '' +
+ this.formatTootText(c.content) +
+ "
" +
+ "' +
+ c.reblog.spoiler_text +
+ ' ' +
+ '
";
+ } else if (
+ c.reblog &&
+ c.reblog.content !== "" &&
+ c.reblog.spoiler_text === ""
+ ) {
+ content =
+ '' +
+ this.formatTootText(c.reblog.content) +
+ "
" +
+ "' +
+ '
";
+ } else {
+ content =
+ '' +
+ this.formatTootText(c.reblog.content) +
+ "
" +
+ "' +
+ '
";
+ }
+
+ // Media attachments
+ let media = [];
+ if (c.media_attachments.length > 0) {
+ for (let picid in c.media_attachments) {
+ media.push(this.placeMedias(c.media_attachments[picid], c.sensitive));
+ }
+ }
+ if (c.reblog && c.reblog.media_attachments.length > 0) {
+ for (let picid in c.reblog.media_attachments) {
+ media.push(
+ this.placeMedias(c.reblog.media_attachments[picid], c.reblog.sensitive)
+ );
+ }
+ }
+
+ // Preview link
+ let previewLink = "";
+ if (!this.HIDE_PREVIEW_LINK && c.card) {
+ if(media.length === 0) {
+ previewLink = this.placePreviewLink(c.card);
+ }
+ }
+
+ // Poll
+ let poll = "";
+ if (c.poll) {
+ let pollOption = "";
+ for (let i in c.poll.options) {
+ pollOption += "' +
+ this.formatTootText(c.content) +
+ "
" +
+ "' +
+ "
";
+ }
+
+ // Counter bar
+ let counterBar = "";
+ if (!this.HIDE_COUNTER_BAR) {
+ const repliesTag =
+ '";
+
+ const reblogTag =
+ '";
+
+ const favoritesTag =
+ '";
+
+ counterBar =
+ '";
+ }
+
+ // Add all to main toot container
+ const toot =
+ '- " +
+ pollOption +
+ "
>", + "
", + "" + ); + } + + return content; +}; + +/** + * Add target="_blank" to all #hashtags and @mentions in the toot + * @param {string} c Text content + * @returns {string} Text content modified + */ +MastodonApi.prototype.addTarget2hashtagMention = function (c) { + let content = c.replaceAll('rel="tag"', 'rel="tag" target="_blank"'); + content = content.replaceAll( + 'class="u-url mention"', + 'class="u-url mention" target="_blank"' + ); + + return content; +}; + +/** + * Find all custom emojis shortcode and replace by image + * @param {string} c Text content + * @param {array} e List with all custom emojis + * @returns {string} Text content modified + */ +MastodonApi.prototype.showEmojos = function (c, e) { + if (c.includes(":")) { + for (const emojo of e) { + const regex = new RegExp(`\\:${emojo.shortcode}\\:`, "g"); + c = c.replace( + regex, + `", + "
' +
+ (spoiler ? '' : "") +
+ '
' +
+ "
";
+
+ return pic;
+};
+
+/**
+ * Place preview link
+ * @param {object} c Preview link content
+ * @returns {string} Preview link in HTML format
+ */
+MastodonApi.prototype.placePreviewLink = function (c) {
+ const card =
+ '' +
+ (c.image
+ ? '' +
+ (c.provider_name
+ ? '' +
+ this.parseHTMLstring(c.provider_name) +
+ ""
+ : "") +
+ '' +
+ c.title +
+ "" +
+ (c.author_name
+ ? '"
+ : "") +
+ "
" +
+ "";
+
+ return card;
+};
+
+/**
+ * Format date
+ * @param {string} d Date in ISO format (YYYY-MM-DDTHH:mm:ss.sssZ)
+ * @returns {string} Date formated (MM DD, YYYY)
+ */
+MastodonApi.prototype.formatDate = function (d) {
+ const monthNames = [
+ "Jan",
+ "Feb",
+ "Mar",
+ "Apr",
+ "May",
+ "Jun",
+ "Jul",
+ "Aug",
+ "Sep",
+ "Oct",
+ "Nov",
+ "Dec",
+ ];
+
+ const date = new Date(d);
+
+ const displayDate =
+ monthNames[date.getMonth()] +
+ " " +
+ date.getDate() +
+ ", " +
+ date.getFullYear();
+
+ return displayDate;
+};
+
+/**
+ * Parse HTML string
+ * @param {string} s HTML string
+ * @returns {string} Plain text
+ */
+MastodonApi.prototype.parseHTMLstring = function (s) {
+ const parser = new DOMParser();
+ const txt = parser.parseFromString(s, "text/html");
+ return txt.body.textContent;
+};
+
+/**
+ * Escape quotes and other special characters, to make them safe to add
+ * to HTML content and attributes as plain text
+ * @param {string} s String
+ * @returns {string} String
+ */
+MastodonApi.prototype.escapeHtml = function (s) {
+ return (s ?? "")
+ .replaceAll("&", "&")
+ .replaceAll("<", "<")
+ .replaceAll(">", ">")
+ .replaceAll('"', """)
+ .replaceAll("'", "'");
+};
+
+/**
+ * Add/Remove event listener for loading spinner
+ */
+MastodonApi.prototype.manageSpinner = function () {
+ // Remove CSS class to container and listener to images
+ const spinnerCSS = this.SPINNER_CLASS;
+ const removeSpinner = function () {
+ this.parentNode.classList.remove(spinnerCSS);
+ this.removeEventListener("load", removeSpinner);
+ this.removeEventListener("error", removeSpinner);
+ };
+
+ // Add listener to images
+ this.mtBodyContainer
+ .querySelectorAll(`.${this.SPINNER_CLASS} > img`)
+ .forEach((e) => {
+ e.addEventListener("load", removeSpinner);
+ e.addEventListener("error", removeSpinner);
+ });
+};
\ No newline at end of file