diff --git a/CHANGELOG b/CHANGELOG index b6a88a7..c97608c 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -1,3 +1,7 @@ +v3.5.1 - 08/05/2023 +- Add feature, hide unlisted toots +- Add message if no toots are shown due to filters applied + v3.4.2 - 22/04/2023 - Add support for hashtag timeline - Fix query url when showing local instance toots diff --git a/README.md b/README.md index dd1988b..4225378 100644 --- a/README.md +++ b/README.md @@ -12,32 +12,32 @@ Source code running at: ## 🗂️ User guide -Just copy both files (*mastodon-timeline.css* and *mastodon-timeline.js* from /src folder) in your project folder. +Just copy both files (_mastodon-timeline.css_ and _mastodon-timeline.js_ from /src folder) in your project folder. Now call each one in your page using the `` and ` + ``` Then copy the following html structure: ```html
-
- -
+
+ +
``` Great, you have a Mastodon timeline running in your page. The next step will be to setup the timeline. -Edit the the JS file *mastodon-timeline.js* and at the beginning find these two lines: +Edit the the JS file _mastodon-timeline.js_ and at the beginning find these two lines: ```javascript instance_url: 'Your Mastodon instance', @@ -62,24 +62,26 @@ If you prefer to show a timeline with a specific hashtag then change the `timeli Also you have some parameters to customize your embed timeline: ```javascript - // Preferred color theme 'light' or 'dark' (default: auto) - default_theme: 'auto' +// Preferred color theme 'light' or 'dark' (default: auto) +default_theme: "auto"; - // Maximum amount of toots to get (default: 20) - toots_limit: '20' +// Maximum amount of toots to get (default: 20) +toots_limit: "20"; - // Hide boosted toots (default: don't hide) - hide_reblog: false +// Hide unlisted toots (default: don't hide) +hide_unlisted: false; - // Hide replies toots (default: don't hide) - hide_replies: false +// Hide boosted toots (default: don't hide) +hide_reblog: false; - // Limit the text content to a maximum number of lines (default: unlimited) - text_max_lines: '0' +// Hide replies toots (default: don't hide) +hide_replies: false; - // Customize the text of the link pointing to the Mastodon page (appears after the last toot) - btn_see_more: 'See more posts at Mastodon' +// Limit the text content to a maximum number of lines (default: unlimited) +text_max_lines: "0"; +// Customize the text of the link pointing to the Mastodon page (appears after the last toot) +btn_see_more: "See more posts at Mastodon"; ``` ### Tip @@ -87,12 +89,12 @@ Also you have some parameters to customize your embed timeline: If you don't know your `user_id`, you have two ways to get it: - Right click on your avatar image and inspect the element. -You will see in your html code a line like this one: -`xxxx` -Check the `src=""` url, your user id is between `/accounts/avatars/` and `/original/`. So removing the slashs `/` you will get your user id, like in the example: `000180745` + You will see in your html code a line like this one: + `xxxx` + Check the `src=""` url, your user id is between `/accounts/avatars/` and `/original/`. So removing the slashs `/` you will get your user id, like in the example: `000180745` - Other option, just copy your profile name and instance uri here: -https://prouser123.me/mastodon-userid-lookup/ + https://prouser123.me/mastodon-userid-lookup/ ## 🚀 Improve me diff --git a/src/index.html b/src/index.html index 58d791f..daabac1 100644 --- a/src/index.html +++ b/src/index.html @@ -1,51 +1,48 @@ - + + + + Mastodon embed timeline + + + + + + + - .dummy-container { - width: 100%; - max-width: 26rem; - height: calc(100% - 4rem); - margin: 2rem auto; - } - - + +
+
+
+ +
+
+
- -
-
-
- -
-
-
- - - - - \ No newline at end of file + + + diff --git a/src/mastodon-timeline.css b/src/mastodon-timeline.css index 692e9f9..048f7d7 100644 --- a/src/mastodon-timeline.css +++ b/src/mastodon-timeline.css @@ -1,4 +1,4 @@ -/* Mastodon embed feed timeline v3.4.2 */ +/* Mastodon embed feed timeline v3.5.1 */ /* More info at: */ /* https://gitlab.com/idotj/mastodon-embed-feed-timeline */ @@ -53,7 +53,7 @@ html[data-theme="dark"] { .mt-timeline::-webkit-scrollbar-thumb { border: 0 var(--content-text); border-radius: 2rem; - background: var(--bg-hover-color); + background: var(--bg-hover-color); } .mt-timeline::-webkit-scrollbar-track { border: 0 var(--content-text); @@ -170,6 +170,13 @@ html[data-theme="dark"] { text-align: center; } +.mt-error-icon { + font-size: 2rem; +} +.mt-error-message { + padding: 1rem 0; +} + /* Poll */ .toot-poll { margin-bottom: 0.25rem; diff --git a/src/mastodon-timeline.js b/src/mastodon-timeline.js index bb69835..69d0556 100644 --- a/src/mastodon-timeline.js +++ b/src/mastodon-timeline.js @@ -1,372 +1,507 @@ -// Mastodon embed feed timeline v3.4.2 +// Mastodon embed feed timeline v3.5.1 // More info at: // https://gitlab.com/idotj/mastodon-embed-feed-timeline // Timeline settings document.addEventListener("DOMContentLoaded", () => { - let mapi = new MastodonApi({ - // Id of the
containing the timeline. - container_body_id: 'mt-body', + let mapi = new MastodonApi({ + // Id of the
containing the timeline. + container_body_id: "mt-body", - // Preferred color theme: 'light', 'dark' or 'auto' (default: auto). - default_theme: 'auto', + // Preferred color theme: 'light', 'dark' or 'auto' (default: auto). + default_theme: "auto", - // Your Mastodon instance. - instance_url: 'https://mastodon.online', + // Your Mastodon instance. + instance_url: "https://mastodon.online", - // Choose type of toots to show in the timeline: 'local', 'profile', 'hashtag' (default: local). - timeline_type: 'local', + // Choose type of toots to show in the timeline: 'local', 'profile', 'hashtag' (default: local). + timeline_type: "local", - // Your user ID on Mastodon instance. Leave empty if you didn't choose 'profile' as type of timeline. - user_id: '', + // Your user ID on Mastodon instance. Leave empty if you didn't choose 'profile' as type of timeline. + user_id: "", - // Your user name on Mastodon instance. Leave empty if you didn't choose 'profile' as type of timeline. - profile_name: '', + // Your user name on Mastodon instance. Leave empty if you didn't choose 'profile' as type of timeline. + profile_name: "", - // The name of the hashtag. Leave empty if you didn't choose 'hashtag' as type of timeline. - hashtag_name: '', + // The name of the hashtag. Leave empty if you didn't choose 'hashtag' as type of timeline. + hashtag_name: "", - // Maximum amount of toots to get (default: 20). - toots_limit: '20', + // Maximum amount of toots to get (default: 20). + toots_limit: "20", - // Hide boosted toots (default: don't hide). - hide_reblog: false, + // Hide unlisted toots (default: don't hide). + hide_unlisted: false, - // Hide replies toots (default: don't hide). - hide_replies: false, + // Hide boosted toots (default: don't hide). + hide_reblog: false, - // Limit the text content to a maximum number of lines (default: unlimited). - text_max_lines: '0', + // Hide replies toots (default: don't hide). + hide_replies: false, - // Customize the text of the link pointing to the Mastodon page (appears after the last toot). - link_see_more: 'See more posts at Mastodon' - }); + // Limit the text content to a maximum number of lines (default: unlimited). + text_max_lines: "0", + + // Customize the text of the link pointing to the Mastodon page (appears after the last toot). + link_see_more: "See more posts at Mastodon", + }); }); let MastodonApi = function (params_) { - // Endpoint access settings / default values - this.DEFAULT_THEME = params_.default_theme || 'auto'; - this.INSTANCE_URL = params_.instance_url; - this.USER_ID = params_.user_id || ''; - this.PROFILE_NAME = this.USER_ID ? params_.profile_name : ''; - this.TIMELINE_TYPE = params_.timeline_type || 'local'; - this.HASHTAG_NAME = params_.hashtag_name || ''; - this.TOOTS_LIMIT = params_.toots_limit || '20'; - this.HIDE_REBLOG = typeof params_.hide_reblog !== 'undefined' ? params_.hide_reblog : false; - this.HIDE_REPLIES = typeof params_.hide_replies !== 'undefined' ? params_.hide_replies : false; - this.TEXT_MAX_LINES = params_.text_max_lines || '0'; - this.LINK_SEE_MORE = params_.link_see_more; + // Endpoint access settings / default values + this.DEFAULT_THEME = params_.default_theme || "auto"; + this.INSTANCE_URL = params_.instance_url; + this.USER_ID = params_.user_id || ""; + this.PROFILE_NAME = this.USER_ID ? params_.profile_name : ""; + this.TIMELINE_TYPE = params_.timeline_type || "local"; + this.HASHTAG_NAME = params_.hashtag_name || ""; + this.TOOTS_LIMIT = params_.toots_limit || "20"; + this.HIDE_UNLISTED = + typeof params_.hide_unlisted !== "undefined" + ? params_.hide_unlisted + : false; + this.HIDE_REBLOG = + typeof params_.hide_reblog !== "undefined" ? params_.hide_reblog : false; + this.HIDE_REPLIES = + typeof params_.hide_replies !== "undefined" ? params_.hide_replies : false; + this.TEXT_MAX_LINES = params_.text_max_lines || "0"; + this.LINK_SEE_MORE = params_.link_see_more; - // Target selector - this.mtBodyContainer = document.getElementById(params_.container_body_id); + // Target selector + this.mtBodyContainer = document.getElementById(params_.container_body_id); - // Apply selected appearance - this.applyTheme(); + // Apply selected appearance + this.applyTheme(); - // Get the toots - this.getToots(); -} + // Get the toots + this.getToots(); +}; // Theme style MastodonApi.prototype.applyTheme = function () { - 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'); - systemTheme.addEventListener('change', event => { - event.matches ? setTheme('dark') : setTheme('light'); - }); - } else { - setTheme(this.DEFAULT_THEME); - } -} + 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"); + systemTheme.addEventListener("change", (event) => { + event.matches ? setTheme("dark") : setTheme("light"); + }); + } else { + setTheme(this.DEFAULT_THEME); + } +}; // Listing toots function MastodonApi.prototype.getToots = function () { - let mapi = this; - let requestURL = ''; + let mapi = this; + let requestURL = ""; - // Get request - if (this.TIMELINE_TYPE === 'profile') { - requestURL = this.INSTANCE_URL + '/api/v1/accounts/' + this.USER_ID + '/statuses?limit=' + this.TOOTS_LIMIT; - } else if (this.TIMELINE_TYPE === 'hashtag') { - requestURL = this.INSTANCE_URL + '/api/v1/timelines/tag/' + this.HASHTAG_NAME + '?limit=' + this.TOOTS_LIMIT; - } else if (this.TIMELINE_TYPE === 'local') { - requestURL = this.INSTANCE_URL + '/api/v1/timelines/public?local=true&limit=' + this.TOOTS_LIMIT; - } + // Get request + if (this.TIMELINE_TYPE === "profile") { + requestURL = + this.INSTANCE_URL + + "/api/v1/accounts/" + + this.USER_ID + + "/statuses?limit=" + + this.TOOTS_LIMIT; + } else if (this.TIMELINE_TYPE === "hashtag") { + requestURL = + this.INSTANCE_URL + + "/api/v1/timelines/tag/" + + this.HASHTAG_NAME + + "?limit=" + + this.TOOTS_LIMIT; + } else if (this.TIMELINE_TYPE === "local") { + requestURL = + this.INSTANCE_URL + + "/api/v1/timelines/public?local=true&limit=" + + this.TOOTS_LIMIT; + } - fetch(requestURL, { - method: 'get' - }) - .then( - response => { - if (response.ok) { - return response.json() - } else if (response.status === 404) { - throw new Error("404 Not found", { cause: response }); - } else { - throw new Error(response.status); - } - } - ) - .then(jsonData => { - // console.log('jsonData: ', jsonData); + fetch(requestURL, { + method: "get", + }) + .then((response) => { + if (response.ok) { + return response.json(); + } else if (response.status === 404) { + throw new Error("404 Not found", { cause: response }); + } else { + throw new Error(response.status); + } + }) + .then((jsonData) => { + // console.log('jsonData: ', jsonData); - // Empty the
container - this.mtBodyContainer.innerHTML = ''; + // Empty the
container + this.mtBodyContainer.innerHTML = ""; - // Add toots - for (let i in jsonData) { - // List only public toots - if (jsonData[i].visibility == 'public' || jsonData[i].visibility == 'unlisted') { - if (mapi.HIDE_REBLOG && jsonData[i].reblog || mapi.HIDE_REPLIES && jsonData[i].in_reply_to_id) { - // Nothing here (Don't append boosts and/or replies toots) - } else { - appendToot.call(mapi, jsonData[i], i); - } - } - } + // Add toots + for (let i in jsonData) { + // First filter (Public / Unlisted) + if ( + jsonData[i].visibility == "public" || + (!this.HIDE_UNLISTED && jsonData[i].visibility == "unlisted") + ) { + // Second filter (Reblog / Replies) + if ( + (mapi.HIDE_REBLOG && jsonData[i].reblog) || + (mapi.HIDE_REPLIES && jsonData[i].in_reply_to_id) + ) { + // Nothing here (Don't append toots) + } else { + appendToot.call(mapi, jsonData[i], i); + } + } + } - // Add target="_blank" to all #hashtags and @mentions - let linksToBlank = document.querySelectorAll('#mt-body .hashtag, .u-url.mention'); - for (let j = 0; j < linksToBlank.length; j++) { - linksToBlank[j].target = '_blank'; - linksToBlank[j].hasAttribute('rel', 'tag') ? linksToBlank[j].setAttribute('rel', 'tag nofollow noopener noreferrer') : linksToBlank[j].setAttribute('rel', 'nofollow noopener noreferrer'); - } + // 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
Got ' + + jsonData.length + + ' toots from the server but due to the "hide filters" applied, no toot is shown
'; + } else { + // Add target="_blank" to all #hashtags and @mentions + let linksToBlank = document.querySelectorAll( + "#mt-body .hashtag, .u-url.mention" + ); + for (let j = 0; j < linksToBlank.length; j++) { + linksToBlank[j].target = "_blank"; + linksToBlank[j].hasAttribute("rel", "tag") + ? linksToBlank[j].setAttribute( + "rel", + "tag nofollow noopener noreferrer" + ) + : linksToBlank[j].setAttribute( + "rel", + "nofollow noopener noreferrer" + ); + } - // Insert link after last toot to visit Mastodon page - if (mapi.LINK_SEE_MORE) { - let linkHtml = ''; - if (this.TIMELINE_TYPE === 'profile') { - linkHtml = '
' + mapi.LINK_SEE_MORE + '
'; - } else if (this.TIMELINE_TYPE === 'hashtag') { - linkHtml = '
' + mapi.LINK_SEE_MORE + '
'; - } else if (this.TIMELINE_TYPE === 'local') { - linkHtml = '
' + mapi.LINK_SEE_MORE + '
'; - } - this.mtBodyContainer.parentNode.insertAdjacentHTML('beforeend', linkHtml); - } - }) - .catch(err => { - this.mtBodyContainer.innerHTML = '
✖️
Request Failed:
' + err + '
'; - this.mtBodyContainer.setAttribute('role', 'none'); - }); + // Insert link after last toot to visit Mastodon page + if (mapi.LINK_SEE_MORE) { + let linkHtml = ""; + if (this.TIMELINE_TYPE === "profile") { + linkHtml = + '
' + + mapi.LINK_SEE_MORE + + "
"; + } else if (this.TIMELINE_TYPE === "hashtag") { + linkHtml = + '
' + + mapi.LINK_SEE_MORE + + "
"; + } else if (this.TIMELINE_TYPE === "local") { + linkHtml = + '
' + + mapi.LINK_SEE_MORE + + "
"; + } + this.mtBodyContainer.parentNode.insertAdjacentHTML( + "beforeend", + linkHtml + ); + } + } + }) + .catch((err) => { + this.mtBodyContainer.innerHTML = + '
❌
Sorry, request failed:
' + + err + + "
"; + this.mtBodyContainer.setAttribute("role", "none"); + }); - // Inner function to add each toot content in container - let appendToot = function (status_, index) { - let avatar, user, content, url, date; + // Inner function to add each toot content in container + let appendToot = function (status_, index) { + let avatar, user, content, url, date; - if (status_.reblog) { - // BOOSTED toot - // Toot url - url = status_.reblog.url; + if (status_.reblog) { + // BOOSTED toot + // Toot url + url = status_.reblog.url; - // Boosted avatar - avatar = - '' - + '
' - + '
' - + '' - + ''; + // Boosted avatar + avatar = + '' + + '
' + + "
" + + '" + + ""; - // User name and url - user = - '
' - + '' - + status_.reblog.account.username + '' - + '' - + '
'; + // User name and url + user = + '
' + + '' + + status_.reblog.account.username + + '' + + "" + + "
"; - // Date - date = this.formatDate(status_.reblog.created_at); - } else { - // STANDARD toot - // Toot url - url = status_.url; + // Date + date = this.formatDate(status_.reblog.created_at); + } else { + // STANDARD toot + // Toot url + url = status_.url; - // Avatar - avatar = - '' - + '' - + ''; + // Avatar + avatar = + '' + + '" + + ""; - // User name and url - user = - '
' - + '' - + status_.account.username + '' - + '' - + '
'; + // User name and url + user = + '
' + + '' + + status_.account.username + + '' + + "" + + "
"; - // Date - date = this.formatDate(status_.created_at); - } + // Date + date = this.formatDate(status_.created_at); + } - // 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); - } + // 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 + ); + } - if (status_.spoiler_text !== '') { - content = - '
' - + status_.spoiler_text - + ' ' - + '
' - + status_.content - + '
' - + '
'; - } else if (status_.reblog && status_.reblog.content !== '') { - content = - '
' - + '
' - + status_.reblog.content - + '
' - + '
'; - } else { - content = - '
' - + '
' - + status_.content - + '
' - + '
'; - } + if (status_.spoiler_text !== "") { + content = + '
' + + status_.spoiler_text + + ' ' + + '
' + + status_.content + + "
" + + "
"; + } else if (status_.reblog && status_.reblog.content !== "") { + content = + '
' + + "
" + + status_.reblog.content + + "
" + + "
"; + } else { + content = + '
' + + "
" + + status_.content + + "
" + + "
"; + } - // Media attachments - let media = ''; - if (status_.media_attachments.length > 0) { - for (let picid in status_.media_attachments) { - media = this.replaceMedias(status_.media_attachments[picid], status_.sensitive); - } - } - if (status_.reblog && status_.reblog.media_attachments.length > 0) { - for (let picid in status_.reblog.media_attachments) { - media = this.replaceMedias(status_.reblog.media_attachments[picid], status_.sensitive); - } - } + // Media attachments + let media = ""; + if (status_.media_attachments.length > 0) { + for (let picid in status_.media_attachments) { + media = this.replaceMedias( + status_.media_attachments[picid], + status_.sensitive + ); + } + } + if (status_.reblog && status_.reblog.media_attachments.length > 0) { + for (let picid in status_.reblog.media_attachments) { + media = this.replaceMedias( + status_.reblog.media_attachments[picid], + status_.sensitive + ); + } + } - // Poll - let poll = ''; - let pollOption = ''; - if (status_.poll) { - for (let i in status_.poll.options) { - pollOption += - '
  • ' - + status_.poll.options[i].title - + '
    • '; - } - poll = - '
    ' - + '
      ' - + pollOption - + '
    ' - + '
    '; - } + // Poll + let poll = ""; + let pollOption = ""; + if (status_.poll) { + for (let i in status_.poll.options) { + pollOption += "
  • " + status_.poll.options[i].title + "
    • "; + } + poll = + '
    ' + "
      " + pollOption + "
    " + "
    "; + } - // Date - let timestamp = - '
    ' - + '' - + date - + '' - + '
    '; + // Date + let timestamp = + '
    ' + + '' + + date + + "" + + "
    "; - // Add all to main toot container - let toot = - '
    ' - + avatar - + user - + content - + media - + poll - + timestamp - + '
    '; + // Add all to main toot container + let toot = + '
    ' + + avatar + + user + + content + + media + + poll + + timestamp + + "
    "; - this.mtBodyContainer.insertAdjacentHTML('beforeend', toot); - }; + this.mtBodyContainer.insertAdjacentHTML("beforeend", toot); + }; - // Toot interactions - this.mtBodyContainer.addEventListener('click', function (event) { - // Check if clicked in a toot - if (event.target.localName == 'article' || event.target.offsetParent.localName == 'article' || event.target.localName == 'img') { - openTootURL(event); - } - // Check if clicked in Show More/Less button - if (event.target.localName == 'button' && event.target.className == 'spoiler-link') { - toogleSpoiler(event); - } - }); - this.mtBodyContainer.addEventListener('keydown', function (event) { - // Check if Enter key pressed with focus in an article - if (event.code === 'Enter' && event.target.localName == 'article') { - openTootURL(event); - } - }); + // Toot interactions + this.mtBodyContainer.addEventListener("click", function (event) { + // Check if clicked in a toot + if ( + event.target.localName == "article" || + event.target.offsetParent.localName == "article" || + event.target.localName == "img" + ) { + openTootURL(event); + } + // Check if clicked in Show More/Less button + if ( + event.target.localName == "button" && + event.target.className == "spoiler-link" + ) { + toogleSpoiler(event); + } + }); + this.mtBodyContainer.addEventListener("keydown", function (event) { + // Check if Enter key pressed with focus in an article + if (event.code === "Enter" && event.target.localName == "article") { + openTootURL(event); + } + }); - // Open Toot in a new page avoiding any other natural link - openTootURL = function (event_) { - let urlToot = event_.target.closest('.mt-toot').dataset.location; - if (event_.target.localName !== 'a' && event_.target.localName !== 'span' && event_.target.localName !== 'button' && urlToot) { - window.open(urlToot, '_blank'); - } - } - - // Spoiler button - toogleSpoiler = function (event_) { - let spoilerText = event_.target.nextSibling; - let spoilerBtnText = event_.target.textContent; - spoilerText.classList.toggle('spoiler-text'); - if (spoilerBtnText == 'Show more') { - spoilerBtnText = 'Show less'; - event_.target.setAttribute('aria-expanded', 'true'); - } else { - spoilerBtnText = 'Show more'; - event_.target.setAttribute('aria-expanded', 'false'); - } - } + // Open Toot in a new page avoiding any other natural link + openTootURL = function (event_) { + let urlToot = event_.target.closest(".mt-toot").dataset.location; + if ( + event_.target.localName !== "a" && + event_.target.localName !== "span" && + event_.target.localName !== "button" && + urlToot + ) { + window.open(urlToot, "_blank"); + } + }; + // Spoiler button + toogleSpoiler = function (event_) { + let spoilerText = event_.target.nextSibling; + let spoilerBtnText = event_.target.textContent; + spoilerText.classList.toggle("spoiler-text"); + if (spoilerBtnText == "Show more") { + spoilerBtnText = "Show less"; + event_.target.setAttribute("aria-expanded", "true"); + } else { + spoilerBtnText = "Show more"; + event_.target.setAttribute("aria-expanded", "false"); + } + }; }; // Place media MastodonApi.prototype.replaceMedias = function (media_, spoiler_) { - let spoiler = spoiler_ || false; - let pic = - ''; + let spoiler = spoiler_ || false; + let pic = + '
    ' + + '' + + "
    "; - return pic; + return pic; }; // Format date MastodonApi.prototype.formatDate = function (date_) { - const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", - "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" - ]; + const monthNames = [ + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "Jun", + "Jul", + "Aug", + "Sep", + "Oct", + "Nov", + "Dec", + ]; - let date = new Date(date_); + let date = new Date(date_); - let displayDate = monthNames[date.getMonth()] - + " " + date.getDate() - + ", " + date.getFullYear(); + let displayDate = + monthNames[date.getMonth()] + + " " + + date.getDate() + + ", " + + date.getFullYear(); - return displayDate; + return displayDate; }; // Loading spinner removeSpinner = function (element) { - const spinnerCSS = 'loading-spinner'; - // Find closest parent container (1st, 2nd or 3rd level) - let spinnerContainer = element.closest('.' + spinnerCSS); - if (spinnerContainer) { - spinnerContainer.classList.remove(spinnerCSS); - } -} + const spinnerCSS = "loading-spinner"; + // Find closest parent container (1st, 2nd or 3rd level) + let spinnerContainer = element.closest("." + spinnerCSS); + if (spinnerContainer) { + spinnerContainer.classList.remove(spinnerCSS); + } +}; diff --git a/src/mastodon-timeline.min.css b/src/mastodon-timeline.min.css index 94f0a1e..4fd48b0 100644 --- a/src/mastodon-timeline.min.css +++ b/src/mastodon-timeline.min.css @@ -1 +1 @@ -:root{--text-max-lines:none}:root,html[data-theme=light]{--bg-color:#fff;--bg-hover-color:#d9e1e8;--line-gray-color:#c0cdd9;--content-text:#000;--link-color:#3a3bff;--error-text-color:#8b0000}html[data-theme=dark]{--bg-color:#282c37;--bg-hover-color:#313543;--line-gray-color:#393f4f;--content-text:#fff;--link-color:#8c8dff;--error-text-color:#fe6c6c}.mt-timeline{height:100%;overflow-y:auto;position:relative;background:var(--bg-color);scrollbar-color:var(--bg-hover-color) rgba(0,0,0,.1)}.mt-timeline a,.mt-timeline a:active,.mt-timeline a:link{text-decoration:none;color:var(--link-color)}.mt-timeline a:hover{text-decoration:underline}.mt-timeline::-webkit-scrollbar{width:.75rem;height:.75rem}.mt-timeline::-webkit-scrollbar-corner{background:0 0}.mt-timeline::-webkit-scrollbar-thumb{border:0 var(--content-text);border-radius:2rem;background:var(--bg-hover-color)}.mt-timeline::-webkit-scrollbar-track{border:0 var(--content-text);border-radius:0;background:rgba(0,0,0,.1)}.mt-body{padding:1rem 1.5rem;white-space:pre-wrap;word-wrap:break-word}.mt-body .invisible{font-size:0;line-height:0;display:inline-block;width:0;height:0;position:absolute}.mt-toot{margin:.25rem;padding:1rem .5rem 2rem 4rem;position:relative;min-height:3.75rem;background-color:transparent;border-bottom:1px solid var(--line-gray-color)}.mt-toot:focus,.mt-toot:hover{cursor:pointer;background-color:var(--bg-hover-color)}.mt-toot p:last-child{margin-bottom:0}.mt-avatar{position:absolute;top:1rem;left:5px;width:3rem;height:3rem;background-color:transparent;background-repeat:no-repeat;background-position:50% 50%;background-size:contain;background-color:var(--bg-color);border-radius:5px}.mt-avatar-boosted{width:2.5rem;height:2.5rem}.mt-avatar-booster{width:1.5rem;height:1.5rem;top:1.5rem;left:1.5rem}.mt-user{display:table;font-weight:600}.mt-user>a{color:var(--content-text)!important}.toot-text{margin-bottom:.25rem;color:var(--content-text)}.toot-text .spoiler-link{display:inline-block;border-radius:2px;background-color:var(--bg-hover-color);border:0;color:var(--content-text);font-weight:700;font-size:.7rem;padding:0 .35rem;text-transform:uppercase;line-height:1.25rem;cursor:pointer;vertical-align:top}.toot-text .spoiler-text{display:none}.toot-text.truncate{display:-webkit-box;overflow:hidden;-webkit-line-clamp:var(--text-max-lines);-webkit-box-orient:vertical}.toot-text:not(.truncate) .ellipsis::after{content:"..."}.mt-error{position:absolute;display:flex;flex-direction:column;height:calc(100% - 3.5rem);width:calc(100% - 4.5rem);justify-content:center;align-items:center;color:var(--error-text-color);padding:.75rem;text-align:center}.toot-poll{margin-bottom:.25rem;color:var(--content-text)}.toot-poll ul{list-style:none;padding:0;margin:0}.toot-poll ul li{font-size:.9rem;margin-bottom:.5rem}.toot-poll ul li:not(:last-child){margin-bottom:.25rem}.toot-poll ul li:before{content:"◯";padding-right:.5rem}.toot-media{overflow:hidden;margin-bottom:.25rem}.toot-media-preview{position:relative;margin-top:.25rem;height:auto;text-align:center;width:100%}.toot-media-spoiler>img{filter:blur(2rem)}.toot-media-preview a{display:block;position:absolute;top:0;right:0;bottom:0;left:0}.img-ratio14_7{position:relative;padding-top:48.95%;width:100%}.img-ratio14_7>img{width:100%;height:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.toot-date{font-size:.75rem}.mt-body>.loading-spinner{position:absolute;width:3rem;height:3rem;margin:auto;top:calc(50% - 1.5rem);right:calc(50% - 1.5rem)}.loading-spinner{height:100%;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.0' viewBox='0 0 128 128' %3E%3Cg%3E%3Cpath d='M64 128A64 64 0 0 1 18.34 19.16L21.16 22a60 60 0 1 0 52.8-17.17l.62-3.95A64 64 0 0 1 64 128z' fill='%23404040'/%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 64 64' to='360 64 64' dur='1000ms' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center center;background-color:transparent;background-size:min(2.5rem,calc(100% - .5rem))}.mt-footer{margin:1rem auto 2rem auto;padding:0 2rem;text-align:center}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} \ No newline at end of file +:root{--text-max-lines:none}:root,html[data-theme=light]{--bg-color:#fff;--bg-hover-color:#d9e1e8;--line-gray-color:#c0cdd9;--content-text:#000;--link-color:#3a3bff;--error-text-color:#8b0000}html[data-theme=dark]{--bg-color:#282c37;--bg-hover-color:#313543;--line-gray-color:#393f4f;--content-text:#fff;--link-color:#8c8dff;--error-text-color:#fe6c6c}.mt-timeline{height:100%;overflow-y:auto;position:relative;background:var(--bg-color);scrollbar-color:var(--bg-hover-color) rgba(0,0,0,.1)}.mt-timeline a,.mt-timeline a:active,.mt-timeline a:link{text-decoration:none;color:var(--link-color)}.mt-timeline a:hover{text-decoration:underline}.mt-timeline::-webkit-scrollbar{width:.75rem;height:.75rem}.mt-timeline::-webkit-scrollbar-corner{background:0 0}.mt-timeline::-webkit-scrollbar-thumb{border:0 var(--content-text);border-radius:2rem;background:var(--bg-hover-color)}.mt-timeline::-webkit-scrollbar-track{border:0 var(--content-text);border-radius:0;background:rgba(0,0,0,.1)}.mt-body{padding:1rem 1.5rem;white-space:pre-wrap;word-wrap:break-word}.mt-body .invisible{font-size:0;line-height:0;display:inline-block;width:0;height:0;position:absolute}.mt-toot{margin:.25rem;padding:1rem .5rem 2rem 4rem;position:relative;min-height:3.75rem;background-color:transparent;border-bottom:1px solid var(--line-gray-color)}.mt-toot:focus,.mt-toot:hover{cursor:pointer;background-color:var(--bg-hover-color)}.mt-toot p:last-child{margin-bottom:0}.mt-avatar{position:absolute;top:1rem;left:5px;width:3rem;height:3rem;background-color:transparent;background-repeat:no-repeat;background-position:50% 50%;background-size:contain;background-color:var(--bg-color);border-radius:5px}.mt-avatar-boosted{width:2.5rem;height:2.5rem}.mt-avatar-booster{width:1.5rem;height:1.5rem;top:1.5rem;left:1.5rem}.mt-user{display:table;font-weight:600}.mt-user>a{color:var(--content-text)!important}.toot-text{margin-bottom:.25rem;color:var(--content-text)}.toot-text .spoiler-link{display:inline-block;border-radius:2px;background-color:var(--bg-hover-color);border:0;color:var(--content-text);font-weight:700;font-size:.7rem;padding:0 .35rem;text-transform:uppercase;line-height:1.25rem;cursor:pointer;vertical-align:top}.toot-text .spoiler-text{display:none}.toot-text.truncate{display:-webkit-box;overflow:hidden;-webkit-line-clamp:var(--text-max-lines);-webkit-box-orient:vertical}.toot-text:not(.truncate) .ellipsis::after{content:"..."}.mt-error{position:absolute;display:flex;flex-direction:column;height:calc(100% - 3.5rem);width:calc(100% - 4.5rem);justify-content:center;align-items:center;color:var(--error-text-color);padding:.75rem;text-align:center}.mt-error-icon{font-size:2rem}.mt-error-message{padding:1rem 0}.toot-poll{margin-bottom:.25rem;color:var(--content-text)}.toot-poll ul{list-style:none;padding:0;margin:0}.toot-poll ul li{font-size:.9rem;margin-bottom:.5rem}.toot-poll ul li:not(:last-child){margin-bottom:.25rem}.toot-poll ul li:before{content:"◯";padding-right:.5rem}.toot-media{overflow:hidden;margin-bottom:.25rem}.toot-media-preview{position:relative;margin-top:.25rem;height:auto;text-align:center;width:100%}.toot-media-spoiler>img{filter:blur(2rem)}.toot-media-preview a{display:block;position:absolute;top:0;right:0;bottom:0;left:0}.img-ratio14_7{position:relative;padding-top:48.95%;width:100%}.img-ratio14_7>img{width:100%;height:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.toot-date{font-size:.75rem}.mt-body>.loading-spinner{position:absolute;width:3rem;height:3rem;margin:auto;top:calc(50% - 1.5rem);right:calc(50% - 1.5rem)}.loading-spinner{height:100%;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.0' viewBox='0 0 128 128' %3E%3Cg%3E%3Cpath d='M64 128A64 64 0 0 1 18.34 19.16L21.16 22a60 60 0 1 0 52.8-17.17l.62-3.95A64 64 0 0 1 64 128z' fill='%23404040'/%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 64 64' to='360 64 64' dur='1000ms' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center center;background-color:transparent;background-size:min(2.5rem,calc(100% - .5rem))}.mt-footer{margin:1rem auto 2rem auto;padding:0 2rem;text-align:center}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} \ No newline at end of file diff --git a/src/mastodon-timeline.min.js b/src/mastodon-timeline.min.js index 0b533f2..5032f11 100644 --- a/src/mastodon-timeline.min.js +++ b/src/mastodon-timeline.min.js @@ -1 +1 @@ -document.addEventListener("DOMContentLoaded",()=>{new MastodonApi({container_body_id:"mt-body",default_theme:"auto",instance_url:"https://mastodon.online",timeline_type:"local",user_id:"",profile_name:"",hashtag_name:"",toots_limit:"20",hide_reblog:!1,hide_replies:!1,text_max_lines:"0",link_see_more:"See more posts at Mastodon"})});let MastodonApi=function(t){this.DEFAULT_THEME=t.default_theme||"auto",this.INSTANCE_URL=t.instance_url,this.USER_ID=t.user_id||"",this.PROFILE_NAME=this.USER_ID?t.profile_name:"",this.TIMELINE_TYPE=t.timeline_type||"local",this.HASHTAG_NAME=t.hashtag_name||"",this.TOOTS_LIMIT=t.toots_limit||"20",this.HIDE_REBLOG=void 0!==t.hide_reblog&&t.hide_reblog,this.HIDE_REPLIES=void 0!==t.hide_replies&&t.hide_replies,this.TEXT_MAX_LINES=t.text_max_lines||"0",this.LINK_SEE_MORE=t.link_see_more,this.mtBodyContainer=document.getElementById(t.container_body_id),this.applyTheme(),this.getToots()};MastodonApi.prototype.applyTheme=function(){let t=function(t){document.documentElement.setAttribute("data-theme",t)};if("auto"===this.DEFAULT_THEME){let e=window.matchMedia("(prefers-color-scheme: dark)");e.matches?t("dark"):t("light"),e.addEventListener("change",e=>{e.matches?t("dark"):t("light")})}else t(this.DEFAULT_THEME)},MastodonApi.prototype.getToots=function(){let t=this,e="";"profile"===this.TIMELINE_TYPE?e=this.INSTANCE_URL+"/api/v1/accounts/"+this.USER_ID+"/statuses?limit="+this.TOOTS_LIMIT:"hashtag"===this.TIMELINE_TYPE?e=this.INSTANCE_URL+"/api/v1/timelines/tag/"+this.HASHTAG_NAME+"?limit="+this.TOOTS_LIMIT:"local"===this.TIMELINE_TYPE&&(e=this.INSTANCE_URL+"/api/v1/timelines/public?local=true&limit="+this.TOOTS_LIMIT),fetch(e,{method:"get"}).then(t=>{if(t.ok)return t.json();if(404===t.status)throw Error("404 Not found",{cause:t});throw Error(t.status)}).then(e=>{for(let o in this.mtBodyContainer.innerHTML="",e)("public"==e[o].visibility||"unlisted"==e[o].visibility)&&(t.HIDE_REBLOG&&e[o].reblog||t.HIDE_REPLIES&&e[o].in_reply_to_id||a.call(t,e[o],o));let i=document.querySelectorAll("#mt-body .hashtag, .u-url.mention");for(let r=0;r'+t.LINK_SEE_MORE+"
    ":"hashtag"===this.TIMELINE_TYPE?n='
    '+t.LINK_SEE_MORE+"
    ":"local"===this.TIMELINE_TYPE&&(n='
    '+t.LINK_SEE_MORE+"
    "),this.mtBodyContainer.parentNode.insertAdjacentHTML("beforeend",n)}}).catch(t=>{this.mtBodyContainer.innerHTML='
    ✖️
    Request Failed:
    '+t+"
    ",this.mtBodyContainer.setAttribute("role","none")});let a=function(t,e){let a,o,i,r,n;t.reblog?(r=t.reblog.url,a='
    ",o='
    '+t.reblog.account.username+'
    ',n=this.formatDate(t.reblog.created_at)):(r=t.url,a='",o='
    '+t.account.username+'
    ',n=this.formatDate(t.created_at));let l="";"0"!==this.TEXT_MAX_LINES&&(l="truncate",document.documentElement.style.setProperty("--text-max-lines",this.TEXT_MAX_LINES)),i=""!==t.spoiler_text?'
    '+t.spoiler_text+'
    '+t.content+"
    ":t.reblog&&""!==t.reblog.content?'
    '+t.reblog.content+"
    ":'
    '+t.content+"
    ";let s="";if(t.media_attachments.length>0)for(let d in t.media_attachments)s=this.replaceMedias(t.media_attachments[d],t.sensitive);if(t.reblog&&t.reblog.media_attachments.length>0)for(let c in t.reblog.media_attachments)s=this.replaceMedias(t.reblog.media_attachments[c],t.sensitive);let h="",m="";if(t.poll){for(let u in t.poll.options)m+="
  • "+t.poll.options[u].title+"
    • ";h='
      '+m+"
    "}let p='
    '+n+"
    ",E='
    '+a+o+i+s+h+p+"
    ";this.mtBodyContainer.insertAdjacentHTML("beforeend",E)};this.mtBodyContainer.addEventListener("click",function(t){("article"==t.target.localName||"article"==t.target.offsetParent.localName||"img"==t.target.localName)&&openTootURL(t),"button"==t.target.localName&&"spoiler-link"==t.target.className&&toogleSpoiler(t)}),this.mtBodyContainer.addEventListener("keydown",function(t){"Enter"===t.code&&"article"==t.target.localName&&openTootURL(t)}),openTootURL=function(t){let e=t.target.closest(".mt-toot").dataset.location;"a"!==t.target.localName&&"span"!==t.target.localName&&"button"!==t.target.localName&&e&&window.open(e,"_blank")},toogleSpoiler=function(t){let e=t.target.nextSibling,a=t.target.textContent;e.classList.toggle("spoiler-text"),"Show more"==a?(a="Show less",t.target.setAttribute("aria-expanded","true")):(a="Show more",t.target.setAttribute("aria-expanded","false"))}},MastodonApi.prototype.replaceMedias=function(t,e){return'
    '},MastodonApi.prototype.formatDate=function(t){let e=new Date(t);return["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"][e.getMonth()]+" "+e.getDate()+", "+e.getFullYear()},removeSpinner=function(t){let e="loading-spinner",a=t.closest("."+e);a&&a.classList.remove(e)}; \ No newline at end of file +document.addEventListener("DOMContentLoaded",()=>{new MastodonApi({container_body_id:"mt-body",default_theme:"auto",instance_url:"https://mastodon.online",timeline_type:"local",user_id:"",profile_name:"",hashtag_name:"",toots_limit:"20",hide_unlisted:!1,hide_reblog:!1,hide_replies:!1,text_max_lines:"0",link_see_more:"See more posts at Mastodon"})});let MastodonApi=function(t){this.DEFAULT_THEME=t.default_theme||"auto",this.INSTANCE_URL=t.instance_url,this.USER_ID=t.user_id||"",this.PROFILE_NAME=this.USER_ID?t.profile_name:"",this.TIMELINE_TYPE=t.timeline_type||"local",this.HASHTAG_NAME=t.hashtag_name||"",this.TOOTS_LIMIT=t.toots_limit||"20",this.HIDE_UNLISTED=void 0!==t.hide_unlisted&&t.hide_unlisted,this.HIDE_REBLOG=void 0!==t.hide_reblog&&t.hide_reblog,this.HIDE_REPLIES=void 0!==t.hide_replies&&t.hide_replies,this.TEXT_MAX_LINES=t.text_max_lines||"0",this.LINK_SEE_MORE=t.link_see_more,this.mtBodyContainer=document.getElementById(t.container_body_id),this.applyTheme(),this.getToots()};MastodonApi.prototype.applyTheme=function(){let t=function(t){document.documentElement.setAttribute("data-theme",t)};if("auto"===this.DEFAULT_THEME){let e=window.matchMedia("(prefers-color-scheme: dark)");e.matches?t("dark"):t("light"),e.addEventListener("change",e=>{e.matches?t("dark"):t("light")})}else t(this.DEFAULT_THEME)},MastodonApi.prototype.getToots=function(){let t=this,e="";"profile"===this.TIMELINE_TYPE?e=this.INSTANCE_URL+"/api/v1/accounts/"+this.USER_ID+"/statuses?limit="+this.TOOTS_LIMIT:"hashtag"===this.TIMELINE_TYPE?e=this.INSTANCE_URL+"/api/v1/timelines/tag/"+this.HASHTAG_NAME+"?limit="+this.TOOTS_LIMIT:"local"===this.TIMELINE_TYPE&&(e=this.INSTANCE_URL+"/api/v1/timelines/public?local=true&limit="+this.TOOTS_LIMIT),fetch(e,{method:"get"}).then(t=>{if(t.ok)return t.json();if(404===t.status)throw Error("404 Not found",{cause:t});throw Error(t.status)}).then(e=>{for(let a in this.mtBodyContainer.innerHTML="",e)("public"==e[a].visibility||!this.HIDE_UNLISTED&&"unlisted"==e[a].visibility)&&(t.HIDE_REBLOG&&e[a].reblog||t.HIDE_REPLIES&&e[a].in_reply_to_id||o.call(t,e[a],a));if(""===this.mtBodyContainer.innerHTML)this.mtBodyContainer.setAttribute("role","none"),this.mtBodyContainer.innerHTML='
    \uD83D\uDCED
    Sorry, no toots to show
    Got '+e.length+' toots from the server but due to the "hide filters" applied, no toot is shown
    ';else{let i=document.querySelectorAll("#mt-body .hashtag, .u-url.mention");for(let r=0;r'+t.LINK_SEE_MORE+"
    ":"hashtag"===this.TIMELINE_TYPE?n='
    '+t.LINK_SEE_MORE+"
    ":"local"===this.TIMELINE_TYPE&&(n='
    '+t.LINK_SEE_MORE+"
    "),this.mtBodyContainer.parentNode.insertAdjacentHTML("beforeend",n)}}}).catch(t=>{this.mtBodyContainer.innerHTML='
    ❌
    Sorry, request failed:
    '+t+"
    ",this.mtBodyContainer.setAttribute("role","none")});let o=function(t,e){let o,a,i,r,n;t.reblog?(r=t.reblog.url,o='
    ",a='
    '+t.reblog.account.username+'
    ',n=this.formatDate(t.reblog.created_at)):(r=t.url,o='",a='
    '+t.account.username+'
    ',n=this.formatDate(t.created_at));let s="";"0"!==this.TEXT_MAX_LINES&&(s="truncate",document.documentElement.style.setProperty("--text-max-lines",this.TEXT_MAX_LINES)),i=""!==t.spoiler_text?'
    '+t.spoiler_text+'
    '+t.content+"
    ":t.reblog&&""!==t.reblog.content?'
    '+t.reblog.content+"
    ":'
    '+t.content+"
    ";let l="";if(t.media_attachments.length>0)for(let d in t.media_attachments)l=this.replaceMedias(t.media_attachments[d],t.sensitive);if(t.reblog&&t.reblog.media_attachments.length>0)for(let c in t.reblog.media_attachments)l=this.replaceMedias(t.reblog.media_attachments[c],t.sensitive);let h="",m="";if(t.poll){for(let u in t.poll.options)m+="
  • "+t.poll.options[u].title+"
    • ";h='
      '+m+"
    "}let p='
    '+n+"
    ",E='
    '+o+a+i+l+h+p+"
    ";this.mtBodyContainer.insertAdjacentHTML("beforeend",E)};this.mtBodyContainer.addEventListener("click",function(t){("article"==t.target.localName||"article"==t.target.offsetParent.localName||"img"==t.target.localName)&&openTootURL(t),"button"==t.target.localName&&"spoiler-link"==t.target.className&&toogleSpoiler(t)}),this.mtBodyContainer.addEventListener("keydown",function(t){"Enter"===t.code&&"article"==t.target.localName&&openTootURL(t)}),openTootURL=function(t){let e=t.target.closest(".mt-toot").dataset.location;"a"!==t.target.localName&&"span"!==t.target.localName&&"button"!==t.target.localName&&e&&window.open(e,"_blank")},toogleSpoiler=function(t){let e=t.target.nextSibling,o=t.target.textContent;e.classList.toggle("spoiler-text"),"Show more"==o?(o="Show less",t.target.setAttribute("aria-expanded","true")):(o="Show more",t.target.setAttribute("aria-expanded","false"))}},MastodonApi.prototype.replaceMedias=function(t,e){return'
    '},MastodonApi.prototype.formatDate=function(t){let e=new Date(t);return["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec",][e.getMonth()]+" "+e.getDate()+", "+e.getFullYear()},removeSpinner=function(t){let e="loading-spinner",o=t.closest("."+e);o&&o.classList.remove(e)}; \ No newline at end of file