From a29d261caf59b0c6ca713243958b5de12eb5416e Mon Sep 17 00:00:00 2001 From: "i.j" Date: Mon, 4 Sep 2023 07:01:21 +0000 Subject: [PATCH] Fix/CSP improvements --- CHANGELOG | 6 ++- src/mastodon-timeline.css | 79 ++++++++++++++++------------- src/mastodon-timeline.js | 95 +++++++++++++++++++++++------------ src/mastodon-timeline.min.css | 2 +- src/mastodon-timeline.min.js | 2 +- 5 files changed, 112 insertions(+), 72 deletions(-) diff --git a/CHANGELOG b/CHANGELOG index 4963a44..94be7fa 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -1,4 +1,8 @@ -v3.8.2 - xx/08/2023 +v3.9.0 - 02/09/2023 +- Fix Content Security Policy +- Fix account name shown + +v3.8.2 - 26/08/2023 - Add support to customized emojis - Javascript refactoring to allow multiple requests diff --git a/src/mastodon-timeline.css b/src/mastodon-timeline.css index 7522d7a..db35746 100644 --- a/src/mastodon-timeline.css +++ b/src/mastodon-timeline.css @@ -1,4 +1,4 @@ -/* Mastodon embed feed timeline v3.8.2 */ +/* Mastodon embed feed timeline v3.9.0 */ /* More info at: */ /* https://gitlab.com/idotj/mastodon-embed-feed-timeline */ @@ -93,28 +93,34 @@ html[data-theme="dark"] { margin-bottom: 0; } -/* User icon */ +/* User avatar and name */ .mt-avatar { + width: 3rem; + height: 3rem; position: absolute; top: 1rem; left: 0.25rem; - width: 3rem; - height: 3rem; - background-repeat: no-repeat; - background-position: 50% 50%; - background-size: contain; - background-color: var(--bg-color); border-radius: 0.25rem; + overflow: hidden; } -.mt-avatar-boosted { - width: 2.5rem; - height: 2.5rem; +.mt-avatar-image img { + width: 100%; + height: auto; } -.mt-avatar-booster { +.mt-avatar-image .mt-avatar-boosted { + width: 2.25rem; + height: 2.25rem; + border-radius: 0.25rem; + overflow: hidden; +} +.mt-avatar-image .mt-avatar-account { width: 1.5rem; height: 1.5rem; top: 1.5rem; left: 1.5rem; + position: absolute; + border-radius: 0.25rem; + overflow: hidden; } .mt-user { display: table; @@ -157,27 +163,6 @@ html[data-theme="dark"] { width: auto; } -.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: 0.75rem; - text-align: center; -} -.mt-error-icon { - font-size: 2rem; -} -.mt-error-message { - padding: 1rem 0; -} -.mt-error-message hr { - color: var(--line-gray-color); -} /* Poll */ .toot-poll { @@ -252,7 +237,6 @@ html[data-theme="dark"] { min-height: 4rem; display: flex; flex-direction: row; - border: 1px solid var(--line-gray-color); border-radius: 0.5rem; color: var(--link-color); @@ -308,7 +292,30 @@ html[data-theme="dark"] { font-size: 0.75rem; } -/* Loading-spinner */ +/* Error */ +.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: 0.75rem; + text-align: center; +} +.mt-error-icon { + font-size: 2rem; +} +.mt-error-message { + padding: 1rem 0; +} +.mt-error-message hr { + color: var(--line-gray-color); +} + +/* Loading spinner */ .mt-body > .loading-spinner { position: absolute; width: 3rem; @@ -332,7 +339,7 @@ html[data-theme="dark"] { text-align: center; } -/* Hidden element */ +/* Hidden elements */ .visually-hidden { position: absolute !important; width: 1px !important; diff --git a/src/mastodon-timeline.js b/src/mastodon-timeline.js index 22a0a0f..151b838 100644 --- a/src/mastodon-timeline.js +++ b/src/mastodon-timeline.js @@ -1,5 +1,5 @@ /** - * Mastodon embed feed timeline v3.8.2 + * Mastodon embed feed timeline v3.9.0 * More info at: * https://gitlab.com/idotj/mastodon-embed-feed-timeline */ @@ -13,6 +13,9 @@ window.addEventListener("load", () => { // Id of the
containing the timeline container_body_id: "mt-body", + // Class name for the loading spinner + spinner_class: "loading-spinner", + // Preferred color theme: 'light', 'dark' or 'auto'. Default: auto default_theme: "auto", @@ -66,6 +69,8 @@ window.addEventListener("load", () => { * Trigger main function to build the timeline */ const MastodonApi = function (params_) { + this.CONTAINER_BODY_ID = params_.container_body_id || "mt-body"; + this.SPINNER_CLASS = params_.spinner_class || "loading-spinner"; this.DEFAULT_THEME = params_.default_theme || "auto"; this.INSTANCE_URL = params_.instance_url; this.USER_ID = params_.user_id || ""; @@ -95,7 +100,7 @@ const MastodonApi = function (params_) { this.LINK_SEE_MORE = params_.link_see_more; this.FETCHED_DATA = {}; - this.mtBodyContainer = document.getElementById(params_.container_body_id); + this.mtBodyContainer = document.getElementById(this.CONTAINER_BODY_ID); this.buildTimeline(); }; @@ -164,6 +169,9 @@ MastodonApi.prototype.buildTimeline = async function () { linkSeeMore ); } + + // Control loading spinners + this.manageSpinner(); } // Toot interactions @@ -172,7 +180,9 @@ MastodonApi.prototype.buildTimeline = async function () { if ( e.target.localName == "article" || e.target.offsetParent.localName == "article" || - e.target.localName == "img" + (e.target.localName == "img" && + e.target.offsetParent.className !== "mt-avatar" && + e.target.offsetParent.className !== "mt-avatar-account") ) { openTootURL(e); } @@ -355,17 +365,23 @@ MastodonApi.prototype.assambleToot = function (c, i) { avatar = '' + + '
' + + '
' + + '' + - '
' + + '" alt="' + + c.reblog.account.username + + ' avatar" loading="lazy" />' + "
" + - '
" + ""; // User name and url @@ -374,8 +390,10 @@ MastodonApi.prototype.assambleToot = function (c, i) { '' + - c.reblog.account.username + - '' + + (c.reblog.account.display_name + ? c.reblog.account.display_name + : c.reblog.account.username) + + '' + "" + "
"; @@ -390,13 +408,14 @@ MastodonApi.prototype.assambleToot = function (c, i) { avatar = '' + + '
' + + '' + - '" + + ' avatar" loading="lazy" />' + + "
" + ""; // User name and url @@ -405,8 +424,8 @@ MastodonApi.prototype.assambleToot = function (c, i) { '' + - c.account.username + - '' + + (c.account.display_name ? c.account.display_name : c.account.username) + + '' + "" + "
"; @@ -636,9 +655,11 @@ MastodonApi.prototype.placeMedias = function (m, s) { const pic = '
' + + " img-ratio14_7 " + + this.SPINNER_CLASS + + '">' + (spoiler ? '' : "") + - '' + (m.description ? m.description : ' + (c.image - ? '
' : '
📄
') + @@ -714,16 +737,22 @@ MastodonApi.prototype.formatDate = function (d) { }; /** - * Loading spinner - * @param {object} e Image containing the spinner + * Add/Remove event listener for loading spinner */ -const removeSpinner = function (e) { - const spinnerCSS = "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); + }; - // Find closest parent container (1st, 2nd or 3rd level) - let spinnerContainer = e.closest("." + spinnerCSS); - - if (spinnerContainer) { - spinnerContainer.classList.remove(spinnerCSS); - } + // Add listener to images + this.mtBodyContainer + .querySelectorAll(`.${this.SPINNER_CLASS} > img`) + .forEach((e) => { + e.addEventListener("load", removeSpinner); + e.addEventListener("error", removeSpinner); + }); }; diff --git a/src/mastodon-timeline.min.css b/src/mastodon-timeline.min.css index 11f8238..c2af7a7 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:not(.toot-preview-link):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 1.5rem 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:.25rem;width:3rem;height:3rem;background-repeat:no-repeat;background-position:50% 50%;background-size:contain;background-color:var(--bg-color);border-radius:.25rem}.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;margin-bottom:1rem}.mt-user>a{color:var(--content-text)!important}.toot-text{margin-bottom:.25rem;color:var(--content-text)}.toot-text .spoiler-link{display:inline-block}.toot-text .spoiler-text-hidden{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:"..."}.toot-text blockquote{border-left:.25rem solid var(--line-gray-color);margin-left:0;padding-left:.5rem}.toot-text .custom-emoji{height:1.5rem;min-width:1.5rem;margin-bottom:-.25rem;width:auto}.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}.mt-error-message hr{color:var(--line-gray-color)}.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:.5rem}.toot-media-preview{position:relative;margin-top:.25rem;height:auto;text-align:center;width:100%}.toot-media>.spoiler-link{position:absolute;top:50%;left:50%;z-index:1;transform:translate(-50%,-50%)}.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:56.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-preview-link{min-height:4rem;display:flex;flex-direction:row;border:1px solid var(--line-gray-color);border-radius:.5rem;color:var(--link-color);font-size:.8rem;margin:1rem 0 .5rem 0;overflow:hidden}.toot-preview-image{width:40%;align-self:stretch}.toot-preview-image img{display:block;width:100%;height:100%;object-fit:cover}.toot-preview-noImage{width:40%;font-size:1.5rem;align-self:center;text-align:center}.toot-preview-content{width:60%;display:flex;align-self:center;flex-direction:column;padding:.5rem 1rem;gap:.5rem}.toot-preview-title{font-weight:600}.spoiler-link{border-radius:2px;background-color:var(--line-gray-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-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{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:not(.toot-preview-link):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 1.5rem 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{width:3rem;height:3rem;position:absolute;top:1rem;left:.25rem;border-radius:.25rem;overflow:hidden}.mt-avatar-image img{width:100%;height:auto}.mt-avatar-image .mt-avatar-boosted{width:2.25rem;height:2.25rem;border-radius:.25rem;overflow:hidden}.mt-avatar-image .mt-avatar-account{width:1.5rem;height:1.5rem;top:1.5rem;left:1.5rem;position:absolute;border-radius:.25rem;overflow:hidden}.mt-user{display:table;font-weight:600;margin-bottom:1rem}.mt-user>a{color:var(--content-text)!important}.toot-text{margin-bottom:.25rem;color:var(--content-text)}.toot-text .spoiler-link{display:inline-block}.toot-text .spoiler-text-hidden{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:"..."}.toot-text blockquote{border-left:.25rem solid var(--line-gray-color);margin-left:0;padding-left:.5rem}.toot-text .custom-emoji{height:1.5rem;min-width:1.5rem;margin-bottom:-.25rem;width:auto}.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:.5rem}.toot-media-preview{position:relative;margin-top:.25rem;height:auto;text-align:center;width:100%}.toot-media>.spoiler-link{position:absolute;top:50%;left:50%;z-index:1;transform:translate(-50%,-50%)}.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:56.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-preview-link{min-height:4rem;display:flex;flex-direction:row;border:1px solid var(--line-gray-color);border-radius:.5rem;color:var(--link-color);font-size:.8rem;margin:1rem 0 .5rem 0;overflow:hidden}.toot-preview-image{width:40%;align-self:stretch}.toot-preview-image img{display:block;width:100%;height:100%;object-fit:cover}.toot-preview-noImage{width:40%;font-size:1.5rem;align-self:center;text-align:center}.toot-preview-content{width:60%;display:flex;align-self:center;flex-direction:column;padding:.5rem 1rem;gap:.5rem}.toot-preview-title{font-weight:600}.spoiler-link{border-radius:2px;background-color:var(--line-gray-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-date{font-size:.75rem}.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}.mt-error-message hr{color:var(--line-gray-color)}.mt-body>.loading-spinner{position:absolute;width:3rem;height:3rem;margin:auto;top:calc(50% - 1.5rem);right:calc(50% - 1.5rem)}.loading-spinner{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 5f10740..0d140c6 100644 --- a/src/mastodon-timeline.min.js +++ b/src/mastodon-timeline.min.js @@ -1 +1 @@ -window.addEventListener("load",()=>{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,hide_preview_link:!1,hide_emojos:!1,markdown_blockquote:!1,text_max_lines:"0",link_see_more:"See more posts at Mastodon"})});const 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.HIDE_PREVIEW_LINK=void 0!==t.hide_preview_link&&t.hide_preview_link,this.HIDE_EMOJOS=void 0!==t.hide_emojos&&t.hide_emojos,this.MARKDOWN_BLOCKQUOTE=void 0!==t.markdown_blockquote&&t.markdown_blockquote,this.TEXT_MAX_LINES=t.text_max_lines||"0",this.LINK_SEE_MORE=t.link_see_more,this.FETCHED_DATA={},this.mtBodyContainer=document.getElementById(t.container_body_id),this.buildTimeline()};MastodonApi.prototype.buildTimeline=async function(){for(let t in this.setTheme(),await this.getTimelineData(),this.mtBodyContainer.innerHTML="",this.FETCHED_DATA.timeline)("public"==this.FETCHED_DATA.timeline[t].visibility||!this.HIDE_UNLISTED&&"unlisted"==this.FETCHED_DATA.timeline[t].visibility)&&(this.HIDE_REBLOG&&this.FETCHED_DATA.timeline[t].reblog||this.HIDE_REPLIES&&this.FETCHED_DATA.timeline[t].in_reply_to_id||this.appendToot(this.FETCHED_DATA.timeline[t],Number(t)));if(""===this.mtBodyContainer.innerHTML)this.mtBodyContainer.setAttribute("role","none"),this.mtBodyContainer.innerHTML='
\uD83D\uDCED
Sorry, no toots to show
Got '+this.FETCHED_DATA.timeline.length+' toots from the server but due to the "hide filters" applied, no toot is shown
';else if(this.LINK_SEE_MORE){let e="";"profile"===this.TIMELINE_TYPE?e=this.PROFILE_NAME:"hashtag"===this.TIMELINE_TYPE?e="tags/"+this.HASHTAG_NAME:"local"===this.TIMELINE_TYPE&&(e="public/local");let o='
'+this.LINK_SEE_MORE+"
";this.mtBodyContainer.parentNode.insertAdjacentHTML("beforeend",o)}this.mtBodyContainer.addEventListener("click",function(t){("article"==t.target.localName||"article"==t.target.offsetParent.localName||"img"==t.target.localName)&&i(t),"button"==t.target.localName&&"spoiler-link"==t.target.className&&a(t)}),this.mtBodyContainer.addEventListener("keydown",function(t){"Enter"===t.key&&"article"==t.target.localName&&i(t)});let i=function(t){let e=t.target.closest(".mt-toot").dataset.location;"a"!==t.target.localName&&"span"!==t.target.localName&&"button"!==t.target.localName&&"toot-preview-image"!==t.target.parentNode.className&&e&&window.open(e,"_blank")},a=function(t){let e=t.target.nextSibling;"img"===e.localName?(t.target.parentNode.classList.remove("toot-media-spoiler"),t.target.style.display="none"):(e.classList.contains("spoiler-text-hidden")||e.classList.contains("spoiler-text-visible"))&&("Show more"==t.target.textContent?(e.classList.remove("spoiler-text-hidden"),e.classList.add("spoiler-text-visible"),t.target.setAttribute("aria-expanded","true"),t.target.textContent="Show less"):(e.classList.remove("spoiler-text-visible"),e.classList.add("spoiler-text-hidden"),t.target.setAttribute("aria-expanded","false"),t.target.textContent="Show more"))}},MastodonApi.prototype.setTheme=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.getTimelineData=async function(){return new Promise((t,e)=>{async function o(t){let e=await fetch(t);if(!e.ok)throw Error("Failed to fetch the following URL: "+t+"
Error status: "+e.status+"
Error message: "+e.statusText);let o=await e.json();return o}let i={};"profile"===this.TIMELINE_TYPE?i.timeline=`${this.INSTANCE_URL}/api/v1/accounts/${this.USER_ID}/statuses?limit=${this.TOOTS_LIMIT}`:"hashtag"===this.TIMELINE_TYPE?i.timeline=`${this.INSTANCE_URL}/api/v1/timelines/tag/${this.HASHTAG_NAME}?limit=${this.TOOTS_LIMIT}`:"local"===this.TIMELINE_TYPE&&(i.timeline=`${this.INSTANCE_URL}/api/v1/timelines/public?local=true&limit=${this.TOOTS_LIMIT}`),this.HIDE_EMOJOS||(i.emojos=this.INSTANCE_URL+"/api/v1/custom_emojis");let a=Object.entries(i).map(([t,i])=>o(i).then(e=>({[t]:e})).catch(o=>(e(Error("Something went wrong fetching data")),this.mtBodyContainer.innerHTML='
❌
Sorry, request failed:
'+o.message+"
",this.mtBodyContainer.setAttribute("role","none"),{[t]:[]})));Promise.all(a).then(e=>{this.FETCHED_DATA=e.reduce((t,e)=>({...t,...e}),{}),t()})})},MastodonApi.prototype.appendToot=function(t,e){this.mtBodyContainer.insertAdjacentHTML("beforeend",this.assambleToot(t,e))},MastodonApi.prototype.assambleToot=function(t,e){let o,i,a,s,n;t.reblog?(s=t.reblog.url,o='
",i='
'+t.reblog.account.username+'
',n=this.formatDate(t.reblog.created_at)):(s=t.url,o='",i='
'+t.account.username+'
',n=this.formatDate(t.created_at));let r="";"0"!==this.TEXT_MAX_LINES&&(r="truncate",document.documentElement.style.setProperty("--text-max-lines",this.TEXT_MAX_LINES)),a=""!==t.spoiler_text?'
'+t.spoiler_text+'
'+this.formatTootText(t.content)+"
":t.reblog&&""!==t.reblog.content&&""!==t.reblog.spoiler_text?'
'+t.reblog.spoiler_text+'
'+this.formatTootText(t.reblog.content)+"
":t.reblog&&""!==t.reblog.content&&""===t.reblog.spoiler_text?'
'+this.formatTootText(t.reblog.content)+"
":'
'+this.formatTootText(t.content)+"
";let l="";if(t.media_attachments.length>0)for(let d in t.media_attachments)l=this.placeMedias(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.placeMedias(t.reblog.media_attachments[c],t.reblog.sensitive);let h="";!this.HIDE_PREVIEW_LINK&&t.card&&(h=this.placePreviewLink(t.card));let p="",m="";if(t.poll){for(let u in t.poll.options)m+="
  • "+t.poll.options[u].title+"
    • ";p='
      '+m+"
    "}let E='
    '+n+"
    ",g='
    '+o+i+a+l+h+p+E+"
    ";return g},MastodonApi.prototype.formatTootText=function(t){let e=t;return e=this.addTarget2hashtagMention(e),this.HIDE_EMOJOS||(e=this.showEmojos(e,this.FETCHED_DATA.emojos)),this.MARKDOWN_BLOCKQUOTE&&(e=this.replaceHTMLtag(e,"

    >","

    ","

    ","

    ")),e},MastodonApi.prototype.addTarget2hashtagMention=function(t){let e=t.replaceAll('rel="tag"','rel="tag" target="_blank"');return e.replaceAll('class="u-url mention"','class="u-url mention" target="_blank"')},MastodonApi.prototype.showEmojos=function(t,e){if(!t.includes(":"))return t;for(let o of e){let i=RegExp(`\\:${o.shortcode}\\:`,"g");t=t.replace(i,`Emoji ${o.shortcode}`)}return t},MastodonApi.prototype.replaceHTMLtag=function(t,e,o,i,a){if(!t.includes(e))return t;{let s=RegExp(e+"(.*?)"+o,"gi");return t.replace(s,i+"$1"+a)}},MastodonApi.prototype.placeMedias=function(t,e){let o=e||!1,i='
    '+(o?'':"")+''+(t.description?t.description:
    ';return i},MastodonApi.prototype.placePreviewLink=function(t){return''+(t.image?'
    ':'
    \uD83D\uDCC4
    ')+'
    '+(t.provider_name?''+t.provider_name+"":"")+''+t.title+""+(t.author_name?'By '+t.author_name+"":"")+"
    "},MastodonApi.prototype.formatDate=function(t){let e=new Date(t),o=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec",][e.getMonth()]+" "+e.getDate()+", "+e.getFullYear();return o};const removeSpinner=function(t){let e="loading-spinner",o=t.closest("."+e);o&&o.classList.remove(e)}; \ No newline at end of file +window.addEventListener("load",()=>{new MastodonApi({container_body_id:"mt-body",spinner_class:"loading-spinner",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,hide_preview_link:!1,hide_emojos:!1,markdown_blockquote:!1,text_max_lines:"0",link_see_more:"See more posts at Mastodon"})});const MastodonApi=function(t){this.CONTAINER_BODY_ID=t.container_body_id||"mt-body",this.SPINNER_CLASS=t.spinner_class||"loading-spinner",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.HIDE_PREVIEW_LINK=void 0!==t.hide_preview_link&&t.hide_preview_link,this.HIDE_EMOJOS=void 0!==t.hide_emojos&&t.hide_emojos,this.MARKDOWN_BLOCKQUOTE=void 0!==t.markdown_blockquote&&t.markdown_blockquote,this.TEXT_MAX_LINES=t.text_max_lines||"0",this.LINK_SEE_MORE=t.link_see_more,this.FETCHED_DATA={},this.mtBodyContainer=document.getElementById(this.CONTAINER_BODY_ID),this.buildTimeline()};MastodonApi.prototype.buildTimeline=async function(){for(let t in this.setTheme(),await this.getTimelineData(),this.mtBodyContainer.innerHTML="",this.FETCHED_DATA.timeline)("public"==this.FETCHED_DATA.timeline[t].visibility||!this.HIDE_UNLISTED&&"unlisted"==this.FETCHED_DATA.timeline[t].visibility)&&(this.HIDE_REBLOG&&this.FETCHED_DATA.timeline[t].reblog||this.HIDE_REPLIES&&this.FETCHED_DATA.timeline[t].in_reply_to_id||this.appendToot(this.FETCHED_DATA.timeline[t],Number(t)));if(""===this.mtBodyContainer.innerHTML)this.mtBodyContainer.setAttribute("role","none"),this.mtBodyContainer.innerHTML='
    \uD83D\uDCED
    Sorry, no toots to show
    Got '+this.FETCHED_DATA.timeline.length+' toots from the server but due to the "hide filters" applied, no toot is shown
    ';else{if(this.LINK_SEE_MORE){let e="";"profile"===this.TIMELINE_TYPE?e=this.PROFILE_NAME:"hashtag"===this.TIMELINE_TYPE?e="tags/"+this.HASHTAG_NAME:"local"===this.TIMELINE_TYPE&&(e="public/local");let i='
    '+this.LINK_SEE_MORE+"
    ";this.mtBodyContainer.parentNode.insertAdjacentHTML("beforeend",i)}this.manageSpinner()}this.mtBodyContainer.addEventListener("click",function(t){("article"==t.target.localName||"article"==t.target.offsetParent.localName||"img"==t.target.localName&&"mt-avatar"!==t.target.offsetParent.className&&"mt-avatar-account"!==t.target.offsetParent.className)&&o(t),"button"==t.target.localName&&"spoiler-link"==t.target.className&&a(t)}),this.mtBodyContainer.addEventListener("keydown",function(t){"Enter"===t.key&&"article"==t.target.localName&&o(t)});let o=function(t){let e=t.target.closest(".mt-toot").dataset.location;"a"!==t.target.localName&&"span"!==t.target.localName&&"button"!==t.target.localName&&"toot-preview-image"!==t.target.parentNode.className&&e&&window.open(e,"_blank")},a=function(t){let e=t.target.nextSibling;"img"===e.localName?(t.target.parentNode.classList.remove("toot-media-spoiler"),t.target.style.display="none"):(e.classList.contains("spoiler-text-hidden")||e.classList.contains("spoiler-text-visible"))&&("Show more"==t.target.textContent?(e.classList.remove("spoiler-text-hidden"),e.classList.add("spoiler-text-visible"),t.target.setAttribute("aria-expanded","true"),t.target.textContent="Show less"):(e.classList.remove("spoiler-text-visible"),e.classList.add("spoiler-text-hidden"),t.target.setAttribute("aria-expanded","false"),t.target.textContent="Show more"))}},MastodonApi.prototype.setTheme=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.getTimelineData=async function(){return new Promise((t,e)=>{async function i(t){let e=await fetch(t);if(!e.ok)throw Error("Failed to fetch the following URL: "+t+"
    Error status: "+e.status+"
    Error message: "+e.statusText);let i=await e.json();return i}let o={};"profile"===this.TIMELINE_TYPE?o.timeline=`${this.INSTANCE_URL}/api/v1/accounts/${this.USER_ID}/statuses?limit=${this.TOOTS_LIMIT}`:"hashtag"===this.TIMELINE_TYPE?o.timeline=`${this.INSTANCE_URL}/api/v1/timelines/tag/${this.HASHTAG_NAME}?limit=${this.TOOTS_LIMIT}`:"local"===this.TIMELINE_TYPE&&(o.timeline=`${this.INSTANCE_URL}/api/v1/timelines/public?local=true&limit=${this.TOOTS_LIMIT}`),this.HIDE_EMOJOS||(o.emojos=this.INSTANCE_URL+"/api/v1/custom_emojis");let a=Object.entries(o).map(([t,o])=>i(o).then(e=>({[t]:e})).catch(i=>(e(Error("Something went wrong fetching data")),this.mtBodyContainer.innerHTML='
    ❌
    Sorry, request failed:
    '+i.message+"
    ",this.mtBodyContainer.setAttribute("role","none"),{[t]:[]})));Promise.all(a).then(e=>{this.FETCHED_DATA=e.reduce((t,e)=>({...t,...e}),{}),t()})})},MastodonApi.prototype.appendToot=function(t,e){this.mtBodyContainer.insertAdjacentHTML("beforeend",this.assambleToot(t,e))},MastodonApi.prototype.assambleToot=function(t,e){let i,o,a,s,n;t.reblog?(s=t.reblog.url,i='
    '+t.reblog.account.username+' avatar
    ',o='
    '+(t.reblog.account.display_name?t.reblog.account.display_name:t.reblog.account.username)+'
    ',n=this.formatDate(t.reblog.created_at)):(s=t.url,i='
    '+t.account.username+' avatar
    ',o='
    '+(t.account.display_name?t.account.display_name:t.account.username)+'
    ',n=this.formatDate(t.created_at));let r="";"0"!==this.TEXT_MAX_LINES&&(r="truncate",document.documentElement.style.setProperty("--text-max-lines",this.TEXT_MAX_LINES)),a=""!==t.spoiler_text?'
    '+t.spoiler_text+'
    '+this.formatTootText(t.content)+"
    ":t.reblog&&""!==t.reblog.content&&""!==t.reblog.spoiler_text?'
    '+t.reblog.spoiler_text+'
    '+this.formatTootText(t.reblog.content)+"
    ":t.reblog&&""!==t.reblog.content&&""===t.reblog.spoiler_text?'
    '+this.formatTootText(t.reblog.content)+"
    ":'
    '+this.formatTootText(t.content)+"
    ";let l="";if(t.media_attachments.length>0)for(let d in t.media_attachments)l=this.placeMedias(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.placeMedias(t.reblog.media_attachments[c],t.reblog.sensitive);let h="";!this.HIDE_PREVIEW_LINK&&t.card&&(h=this.placePreviewLink(t.card));let m="",p="";if(t.poll){for(let u in t.poll.options)p+="
  • "+t.poll.options[u].title+"
    • ";m='
    "}let E='
    '+n+"
    ",g='
    '+i+o+a+l+h+m+E+"
    ";return g},MastodonApi.prototype.formatTootText=function(t){let e=t;return e=this.addTarget2hashtagMention(e),this.HIDE_EMOJOS||(e=this.showEmojos(e,this.FETCHED_DATA.emojos)),this.MARKDOWN_BLOCKQUOTE&&(e=this.replaceHTMLtag(e,"

    >","

    ","

    ","

    ")),e},MastodonApi.prototype.addTarget2hashtagMention=function(t){let e=t.replaceAll('rel="tag"','rel="tag" target="_blank"');return e.replaceAll('class="u-url mention"','class="u-url mention" target="_blank"')},MastodonApi.prototype.showEmojos=function(t,e){if(!t.includes(":"))return t;for(let i of e){let o=RegExp(`\\:${i.shortcode}\\:`,"g");t=t.replace(o,`Emoji ${i.shortcode}`)}return t},MastodonApi.prototype.replaceHTMLtag=function(t,e,i,o,a){if(!t.includes(e))return t;{let s=RegExp(e+"(.*?)"+i,"gi");return t.replace(s,o+"$1"+a)}},MastodonApi.prototype.placeMedias=function(t,e){let i=e||!1,o='
    '+(i?'':"")+''+(t.description?t.description:
    ';return o},MastodonApi.prototype.placePreviewLink=function(t){return''+(t.image?'
    ':'
    \uD83D\uDCC4
    ')+'
    '+(t.provider_name?''+t.provider_name+"":"")+''+t.title+""+(t.author_name?'By '+t.author_name+"":"")+"
    "},MastodonApi.prototype.formatDate=function(t){let e=new Date(t),i=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec",][e.getMonth()]+" "+e.getDate()+", "+e.getFullYear();return i},MastodonApi.prototype.manageSpinner=function(){let t=this.SPINNER_CLASS,e=function(){this.parentNode.classList.remove(t),this.removeEventListener("load",e),this.removeEventListener("error",e)};this.mtBodyContainer.querySelectorAll(`.${this.SPINNER_CLASS} > img`).forEach(t=>{t.addEventListener("load",e),t.addEventListener("error",e)})}; \ No newline at end of file