diff --git a/CHANGELOG b/CHANGELOG index 1a00425..b6a88a7 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -1,5 +1,6 @@ -v3.4.0 - 12/04/2023 +v3.4.2 - 22/04/2023 - Add support for hashtag timeline +- Fix query url when showing local instance toots v3.3.1 - 01/03/2023 - Apply scroll-bar styles to timeline container @@ -67,4 +68,4 @@ v1.5.1 - 17/05/2021 v1.0.0 - 06/04/2021 - First commit - +- Project forked from: https://github.com/AzetJP/mastodon-timeline-widget diff --git a/README.md b/README.md index d2d1667..dd1988b 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ ![Mastodon timeline widget screenshot](screenshot-light-dark.jpg "Mastodon timeline widget screenshot") -Embed a mastodon feed timeline in your page, only with a css and js file. +Embed a mastodon feed timeline in your page, only with a CSS and JS file. Working version running at: @@ -15,17 +15,18 @@ Source code running at: 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
@@ -36,27 +37,31 @@ Then copy the following html structure: 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 replace the following values: +Edit the the JS file *mastodon-timeline.js* and at the beginning find these two lines: + +```javascript + instance_url: 'Your Mastodon instance', + timeline_type: 'local', ``` - instance_uri: 'Your Mastodon instance', + +Enter your Mastodon instance URL (not including the last `/` symbol) and reload the page. You should see toots from your local instance in your timeline. + +If you want to show a profile timeline then change the `timeline_type` to `profile` and set the following values: + +```javascript user_id: 'Your user ID on Mastodon instance', profile_name: 'Your user name on Mastodon instance', ``` -Leave `user_id` and `profile_name` empty if you just want to show your instance local 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` - - -- Other option, just copy your @profile_name and @instance_uri here: -https://prouser123.me/mastodon-userid-lookup/ - -Here you have some parameters to customize your embed timeline: +If you prefer to show a timeline with a specific hashtag then change the `timeline_type` to `hashtag` and enter the name of the hashtag (not including the `#` symbol): +```javascript + hashtag_name: 'YourHashtag', ``` + +Also you have some parameters to customize your embed timeline: + +```javascript // Preferred color theme 'light' or 'dark' (default: auto) default_theme: 'auto' @@ -77,7 +82,17 @@ Here you have some parameters to customize your embed timeline: ``` -*Project forked from: https://github.com/AzetJP/mastodon-timeline-widget +### Tip + +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` + +- Other option, just copy your profile name and instance uri here: +https://prouser123.me/mastodon-userid-lookup/ ## 🚀 Improve me diff --git a/src/mastodon-timeline.css b/src/mastodon-timeline.css index e997fe3..692e9f9 100644 --- a/src/mastodon-timeline.css +++ b/src/mastodon-timeline.css @@ -1,4 +1,4 @@ -/* Mastodon embed feed timeline v3.3.1 */ +/* Mastodon embed feed timeline v3.4.2 */ /* More info at: */ /* https://gitlab.com/idotj/mastodon-embed-feed-timeline */ diff --git a/src/mastodon-timeline.js b/src/mastodon-timeline.js index 6c0c944..bb69835 100644 --- a/src/mastodon-timeline.js +++ b/src/mastodon-timeline.js @@ -1,41 +1,44 @@ -// Mastodon embed feed timeline v3.3.1 +// Mastodon embed feed timeline v3.4.2 // 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 + // Id of the
containing the timeline. container_body_id: 'mt-body', - // Preferred color theme: 'light', 'dark' or 'auto' (default: auto) + // Preferred color theme: 'light', 'dark' or 'auto' (default: auto). default_theme: 'auto', - // Your Mastodon instance - instance_uri: 'https://mastodon.online', + // Your Mastodon instance. + instance_url: 'https://mastodon.online', - // Your user ID on Mastodon instance. Leave empty if you prefer to show local instance toots - user_id: '000180745', + // Choose type of toots to show in the timeline: 'local', 'profile', 'hashtag' (default: local). + timeline_type: 'local', - // Your user name on Mastodon instance - profile_name: '@idotj', + // Your user ID on Mastodon instance. Leave empty if you didn't choose 'profile' as type of timeline. + user_id: '', - // Show toots from a hashtag instead of user timeline. - hashtag: 'introduction', + // Your user name on Mastodon instance. Leave empty if you didn't choose 'profile' as type of timeline. + profile_name: '', - // Maximum amount of toots to get (default: 20) + // 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', - // Hide boosted toots (default: don't hide) + // Hide boosted toots (default: don't hide). hide_reblog: false, - // Hide replies toots (default: don't hide) + // Hide replies toots (default: don't hide). hide_replies: false, - // Limit the text content to a maximum number of lines (default: unlimited) + // 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) + // Customize the text of the link pointing to the Mastodon page (appears after the last toot). link_see_more: 'See more posts at Mastodon' }); }); @@ -43,10 +46,11 @@ document.addEventListener("DOMContentLoaded", () => { let MastodonApi = function (params_) { // Endpoint access settings / default values this.DEFAULT_THEME = params_.default_theme || 'auto'; - this.INSTANCE_URI = params_.instance_uri; + this.INSTANCE_URL = params_.instance_url; this.USER_ID = params_.user_id || ''; this.PROFILE_NAME = this.USER_ID ? params_.profile_name : ''; - this.HASHTAG = params_.hashtag || ''; + 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; @@ -84,13 +88,13 @@ MastodonApi.prototype.getToots = function () { let mapi = this; let requestURL = ''; - // Get request (user toots or local timeline toots) - if (this.HASHTAG) { - requestURL = this.INSTANCE_URI + '/api/v1/timelines/tag/' + this.HASHTAG + '?limit=' + this.TOOTS_LIMIT; - } else if (this.USER_ID) { - requestURL = this.INSTANCE_URI + '/api/v1/accounts/' + this.USER_ID + '/statuses?limit=' + this.TOOTS_LIMIT; - } else { - requestURL = this.INSTANCE_URI + '/api/v1/timelines/public?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, { @@ -135,13 +139,13 @@ MastodonApi.prototype.getToots = function () { // Insert link after last toot to visit Mastodon page if (mapi.LINK_SEE_MORE) { let linkHtml = ''; - if (this.HASHTAG) { - linkHtml = '
' + mapi.LINK_SEE_MORE + '
'; - } else if (this.USER_ID) { - linkHtml = '
' + mapi.LINK_SEE_MORE + '
'; - } else { - linkHtml = '
' + mapi.LINK_SEE_MORE + '
'; - } + 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); } }) diff --git a/src/mastodon-timeline.min.css b/src/mastodon-timeline.min.css index c49b6cd..94f0a1e 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,0.1)}.mt-timeline a:link,.mt-timeline a:active,.mt-timeline a{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:transparent}.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,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:hover,.mt-toot:focus{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,%3Csvgxmlns: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='00128128'%3E%3Cg%3E%3Cpathd='M64128A646400118.3419.16L21.1622a606001052.8-17.17l.62-3.95A646400164128z'fill='%23404040'/%3E%3CanimateTransformattributeName='transform'type='rotate'from='06464'to='3606464'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} +: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 diff --git a/src/mastodon-timeline.min.js b/src/mastodon-timeline.min.js index 893999c..0b533f2 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_uri:"https://mastodon.online",user_id:"000180745",profile_name:"@idotj",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_URI=t.instance_uri,this.USER_ID=t.user_id||"",this.PROFILE_NAME=this.USER_ID?t.profile_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="";fetch(e=this.USER_ID?this.INSTANCE_URI+"/api/v1/accounts/"+this.USER_ID+"/statuses?limit="+this.TOOTS_LIMIT:this.INSTANCE_URI+"/api/v1/timelines/public?limit="+this.TOOTS_LIMIT,{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 r=document.querySelectorAll("#mt-body .hashtag, .u-url.mention");for(let i=0;i'+t.LINK_SEE_MORE+"
":'
'+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,r,i,n;t.reblog?(i=t.reblog.url,a='
",o='
'+t.reblog.account.username+'
',n=this.formatDate(t.reblog.created_at)):(i=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)),r=""!==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 m="",u="";if(t.poll){for(let h in t.poll.options)u+="
  • "+t.poll.options[h].title+"
    • ";m='
      '+u+"
    "}let p='
    '+n+"
    ",g='
    '+a+o+r+s+m+p+"
    ";this.mtBodyContainer.insertAdjacentHTML("beforeend",g)};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_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