'; let permalinkElem = mastodonFeedCreateElement('span', 'permalink'); permalinkElem.appendChild(mastodonFeedCreateElementPermalink(status, options.text.viewOnInstance, 'Link to Mastodon post')); mediaElem.appendChild(permalinkElem); } mediaWrapperElem.appendChild(mediaElem); } return mediaWrapperElem; } const mastodonFeedCreateElementPreviewCard = function(card) { let cardElem = mastodonFeedCreateElement('div', 'card'); if(null === card.html || card.html.length < 1) { let cardElemMeta = mastodonFeedCreateElement('div', 'meta'); if(null !== card.image) { let cardElemImageWrapper = mastodonFeedCreateElement('div', 'image'); let cardElemImage = mastodonFeedCreateElement('img'); if(null === card.image_description) { cardElemImage.alt = 'Preview image content card'; } else { cardElemImage.alt = card.image_description; } cardElemImage.src = card.image; cardElemImage.loading = 'lazy'; cardElemImageWrapper.appendChild(cardElemImage); cardElemMeta.appendChild(cardElemImageWrapper); } let cardElemTitle = mastodonFeedCreateElement('div', 'title'); cardElemTitle.innerHTML = card.title; cardElemMeta.appendChild(cardElemTitle); let cardElemDescription = mastodonFeedCreateElement('div', 'description'); cardElemDescription.innerHTML = card.description; cardElemMeta.appendChild(cardElemDescription); if(card.url === null) { cardElem.appendChild(cardElemMeta); } else { let cardElemLink = mastodonFeedCreateElement('a'); cardElemLink.href = card.url; cardElemLink.setAttribute('aria-label', 'Link embedded in Mastodon post'); cardElemLink.appendChild(cardElemMeta); cardElem.appendChild(cardElemLink); } } else { cardElem.innerHTML = card.html; } return cardElem; } const mastodonFeedCreateElementTimeinfo = function(status, options, url = false) { let createdInfo = mastodonFeedCreateElement('span', 'permalink'); createdInfo.innerHTML = ' ' + options.text.permalinkPre + ' '; if(false === url) { createdInfo.innerHTML += new Date(status.created_at).toLocaleString(options.localization.date.locale, options.localization.date.options); } else { createdInfo.appendChild(mastodonFeedCreateElementPermalink(status, new Date(status.created_at).toLocaleString(options.localization.date.locale, options.localization.date.options), 'Link to Mastodon post')); } createdInfo.innerHTML += ' ' + options.text.permalinkPost; return createdInfo; } const mastodonFeedInjectEmoji = function(string, emoji) { return string.replaceAll(':' + emoji.shortcode + ':', ''); } const mastodonFeedRenderStatuses = function(statuses, rootElem, options) { if(statuses.length < 1) { rootElem.innerHTML = options.text.noStatuses; } else { for(let i = 0; i < statuses.length; i++) { let status = statuses[i]; let isEdited = (null === status.edited_at ? true : false); let isReblog = (null === status.reblog ? false : true); let statusElem = mastodonFeedCreateElement('li', 'status'); // add account meta info if(!options.content.hideStatusMeta) { let accountElem = mastodonFeedCreateElement('div', 'account'); if(isReblog) { let boosterElem = mastodonFeedCreateElement('span', 'booster'); boosterElem.appendChild(document.createTextNode( options.text.boosted )); accountElem.appendChild(boosterElem); } accountElem.appendChild(mastodonFeedCreateElementAccountLink(status.account)); if(!options.content.hideDateTime) { accountElem.appendChild(mastodonFeedCreateElementTimeinfo(status, options, (isReblog ? false : status.url))); } if(null !== status.edited_at) { accountElem.innerHTML += ' ' + options.text.edited; } statusElem.appendChild(accountElem); } // prepare content rendering let showStatus = status; if(isReblog) { showStatus = status.reblog; } let contentWrapperElem = mastodonFeedCreateElement('div', 'contentWrapper' + (isReblog ? ' boosted' : '')); // add boosted post meta info if(isReblog) { let boostElem = mastodonFeedCreateElement('div', 'account'); let boostAccountLink = mastodonFeedCreateElementAccountLink(showStatus.account); boostElem.appendChild(boostAccountLink); boostElem.appendChild(mastodonFeedCreateElementTimeinfo(showStatus, options, showStatus.url)); contentWrapperElem.appendChild(boostElem); } let contentElem = mastodonFeedCreateElement('div', 'content'); // handle content warnings if(showStatus.sensitive || showStatus.spoiler_text.length > 0) { let cwElem = mastodonFeedCreateElement('div', 'contentWarning'); if(showStatus.spoiler_text.length > 0) { let cwTitleElem = mastodonFeedCreateElement('div', 'title'); cwTitleElem.innerHTML = showStatus.spoiler_text; cwElem.appendChild(cwTitleElem); } let cwLinkElem = mastodonFeedCreateElement('a'); cwLinkElem.href = '#'; cwLinkElem.setAttribute('aria-label', 'Show content despite warning'); cwLinkElem.onclick = function() { this.parentElement.style = 'display: none;'; this.parentElement.nextSibling.style = 'display: block;'; return false; } cwLinkElem.innerHTML = options.text.showContent; cwElem.appendChild(cwLinkElem); contentWrapperElem.appendChild(cwElem); contentElem.style = 'display: none;'; } // add regular content let renderContent = showStatus.content; // inject emojis if(showStatus.emojis.length > 0) { showStatus.emojis.forEach(function(emoji) { renderContent = mastodonFeedInjectEmoji(renderContent, emoji); }); } contentElem.innerHTML += renderContent; // handle media attachments if(showStatus.media_attachments.length > 0) { let mediaAttachmentsElem = mastodonFeedCreateElementMediaAttachments(showStatus, options); contentElem.appendChild(mediaAttachmentsElem); } // handle preview card if(options.showPreviewCards && showStatus.card != null) { let cardElem = mastodonFeedCreateElementPreviewCard(showStatus.card); contentElem.appendChild(cardElem); } contentWrapperElem.appendChild(contentElem); statusElem.appendChild(contentWrapperElem); rootElem.appendChild(statusElem); } } rootElem.querySelectorAll('a').forEach(function(e) { if('_self' != options.linkTarget) { e.target = options.linkTarget; } }); } const mastodonFeedLoad = function(url, elementId, options) { const xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.responseType = 'json'; xhr.onload = function() { const statuses = xhr.response; const rootElem = document.getElementById(elementId); rootElem.innerHTML = ''; if (xhr.status === 200) { if(options.excludeConversationStarters && statuses.length > 0) { const filteredStatuses = []; for(let i = 0; i < statuses.length; i++) { let includeStatus = true; if(statuses[i].mentions.length > 0) { const statusContent = document.createElement('div'); statusContent.innerHTML = statuses[i].content; const mentionUsername = statuses[i].mentions[0].acct.split('@')[0]; const plainTextContent = statusContent.textContent || statusContent.innerText; if(plainTextContent.substring(1, ('@' + mentionUsername).length) == mentionUsername) { includeStatus = false; } } if(includeStatus) { filteredStatuses.push(statuses[i]); } } mastodonFeedRenderStatuses(filteredStatuses, rootElem, options); } else { mastodonFeedRenderStatuses(statuses, rootElem, options); } } else { rootElem.appendChild(document.createTextNode(xhr.response.error)); } }; xhr.send(); }