diff --git a/src/index.html b/src/index.html index dbb1cbc..e585913 100644 --- a/src/index.html +++ b/src/index.html @@ -8,7 +8,8 @@ -
Loading...
+
+ \ No newline at end of file diff --git a/src/script.js b/src/script.js index b9b39db..d972356 100644 --- a/src/script.js +++ b/src/script.js @@ -2,15 +2,15 @@ const instance = "chaos.social" const account_id = "109116460625306131" -const mastodonFeedCreateElement = function(type, className = null) { +const mastodonFeedCreateElement = function (type, className = null) { let element = document.createElement(type); - if(null !== className) { + if (null !== className) { element.className = className; } return element; } -const mastodonFeedCreateElementAccountLink = function(account) { +const mastodonFeedCreateElementAccountLink = function (account) { let accountLinkElem = mastodonFeedCreateElement('a'); accountLinkElem.href = account.url; @@ -27,8 +27,8 @@ const mastodonFeedCreateElementAccountLink = function(account) { accountLinkElem.appendChild(accountImageElem); // inject emojis let displayName = account.display_name; - if(account.emojis.length > 0) { - account.emojis.forEach(function(emoji) { + if (account.emojis.length > 0) { + account.emojis.forEach(function (emoji) { displayName = mastodonFeedInjectEmoji(displayName, emoji); }); } @@ -36,38 +36,38 @@ const mastodonFeedCreateElementAccountLink = function(account) { return accountLinkElem; } -const mastodonFeedCreateElementPermalink = function(status, label) { +const mastodonFeedCreateElementPermalink = function (status, label) { let linkElem = mastodonFeedCreateElement('a'); linkElem.href = status.url; linkElem.appendChild(document.createTextNode(label)); return linkElem; } -const mastodonFeedCreateElementMediaAttachments = function(status, options) { +const mastodonFeedCreateElementMediaAttachments = function (status, options) { let attachments = status.media_attachments; let mediaWrapperElem = mastodonFeedCreateElement('div', 'media'); - for(let mediaIndex = 0; mediaIndex < attachments.length; mediaIndex++) { + for (let mediaIndex = 0; mediaIndex < attachments.length; mediaIndex++) { let media = attachments[mediaIndex]; let mediaElem = mastodonFeedCreateElement('div', media.type); - if('image' == media.type) { + if ('image' == media.type) { let mediaElemImgLink = mastodonFeedCreateElement('a'); mediaElemImgLink.href = status.url; - if(null === media.remote_url) { + if (null === media.remote_url) { mediaElemImgLink.style.backgroundImage = 'url("' + media.preview_url + '")'; } else { mediaElemImgLink.style.backgroundImage = 'url("' + media.remote_url + '")'; } - if(null !== media.description) { + if (null !== media.description) { mediaElem.title = media.description; } mediaElem.appendChild(mediaElemImgLink); } - else if('gifv' == media.type) { + else if ('gifv' == media.type) { let mediaElemGifvLink = mastodonFeedCreateElement('a'); mediaElemGifvLink.href = status.url; let mediaElemGifv = mastodonFeedCreateElement('video', 'requiresInteraction'); - if(null === media.remote_url) { + if (null === media.remote_url) { mediaElemGifv.src = media.url; } else { @@ -75,7 +75,7 @@ const mastodonFeedCreateElementMediaAttachments = function(status, options) { } mediaElemGifv.loop = true; mediaElemGifv.muted = 'muted'; - if(null !== media.description) { + if (null !== media.description) { mediaElemGifv.title = media.description; } mediaElemGifvLink.appendChild(mediaElemGifv); @@ -102,13 +102,13 @@ const mastodonFeedCreateElementMediaAttachments = function(status, options) { return mediaWrapperElem; } -const mastodonFeedCreateElementPreviewCard = function(card) { +const mastodonFeedCreateElementPreviewCard = function (card) { let cardElem = mastodonFeedCreateElement('div', 'card'); - - if(null === card.html || card.html.length < 1) { + + if (null === card.html || card.html.length < 1) { let cardElemMeta = mastodonFeedCreateElement('div', 'meta'); - if(null !== card.image) { + if (null !== card.image) { let cardElemImageWrapper = mastodonFeedCreateElement('div', 'image'); let cardElemImage = mastodonFeedCreateElement('img'); cardElemImage.src = card.image; @@ -123,8 +123,8 @@ const mastodonFeedCreateElementPreviewCard = function(card) { let cardElemDescription = mastodonFeedCreateElement('div', 'description'); cardElemDescription.innerHTML = card.description; cardElemMeta.appendChild(cardElemDescription); - - if(card.url === null) { + + if (card.url === null) { cardElem.appendChild(cardElemMeta); } else { @@ -140,33 +140,33 @@ const mastodonFeedCreateElementPreviewCard = function(card) { return cardElem; } -const mastodonFeedCreateElementTimeinfo = function(status, options, url = false) { +const mastodonFeedCreateElementTimeinfo = function (status, options, url = false) { let createdInfo = mastodonFeedCreateElement('span', 'permalink'); createdInfo.innerHTML = ' ' + options.text.permalinkPre + ' '; - if(false === url) { + 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))); } createdInfo.innerHTML += ' ' + options.text.permalinkPost + ' '; - if(null !== status.edited_at) { + if (null !== status.edited_at) { createdInfo.innerHTML += ' ' + options.text.edited; } return createdInfo; } -const mastodonFeedInjectEmoji = function(string, emoji) { +const mastodonFeedInjectEmoji = function (string, emoji) { return string.replace(':' + emoji.shortcode + ':', ''); } -const mastodonFeedRenderStatuses = function(statuses, rootElem, options) { - if(statuses.length < 1) { +const mastodonFeedRenderStatuses = function (statuses, rootElem, options) { + if (statuses.length < 1) { console.log(options); rootElem.innerHTML = options.text.noStatuses; } else { - for(let i = 0; i < statuses.length; i++) { + 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); @@ -176,25 +176,25 @@ const mastodonFeedRenderStatuses = function(statuses, rootElem, options) { // add account meta info let accountElem = mastodonFeedCreateElement('div', 'account'); - if(isReblog) { + if (isReblog) { let boosterElem = mastodonFeedCreateElement('span', 'booster'); - boosterElem.appendChild(document.createTextNode( options.text.boosted )); + boosterElem.appendChild(document.createTextNode(options.text.boosted)); accountElem.appendChild(boosterElem); } accountElem.appendChild(mastodonFeedCreateElementAccountLink(status.account)); accountElem.appendChild(mastodonFeedCreateElementTimeinfo(status, options, (isReblog ? false : status.url))); - + statusElem.appendChild(accountElem); // prepare content rendering let showStatus = status; - if(isReblog) { + if (isReblog) { showStatus = status.reblog; } let contentWrapperElem = mastodonFeedCreateElement('div', 'contentWrapper' + (isReblog ? ' boosted' : '')); // add boosted post meta info - if(isReblog) { + if (isReblog) { let boostElem = mastodonFeedCreateElement('div', 'account'); let boostAccountLink = mastodonFeedCreateElementAccountLink(showStatus.account); boostElem.appendChild(boostAccountLink); @@ -206,10 +206,10 @@ const mastodonFeedRenderStatuses = function(statuses, rootElem, options) { let contentElem = mastodonFeedCreateElement('div', 'content'); // handle content warnings - if(showStatus.sensitive || showStatus.spoiler_text.length > 0) { + if (showStatus.sensitive || showStatus.spoiler_text.length > 0) { let cwElem = mastodonFeedCreateElement('div', 'contentWarning'); - if(showStatus.spoiler_text.length > 0) { + if (showStatus.spoiler_text.length > 0) { let cwTitleElem = mastodonFeedCreateElement('div', 'title'); cwTitleElem.innerHTML = showStatus.spoiler_text; cwElem.appendChild(cwTitleElem); @@ -217,7 +217,7 @@ const mastodonFeedRenderStatuses = function(statuses, rootElem, options) { let cwLinkElem = mastodonFeedCreateElement('a'); cwLinkElem.href = '#'; - cwLinkElem.onclick = function() { + cwLinkElem.onclick = function () { this.parentElement.style = 'display: none;'; this.parentElement.nextSibling.style = 'display: block;'; return false; @@ -232,21 +232,21 @@ const mastodonFeedRenderStatuses = function(statuses, rootElem, options) { // add regular content let renderContent = showStatus.content; // inject emojis - if(showStatus.emojis.length > 0) { - showStatus.emojis.forEach(function(emoji) { + 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) { + if (showStatus.media_attachments.length > 0) { let mediaAttachmentsElem = mastodonFeedCreateElementMediaAttachments(showStatus, options); contentElem.appendChild(mediaAttachmentsElem); } // handle preview card - if(options.showPreviewCards && showStatus.card != null) { + if (options.showPreviewCards && showStatus.card != null) { let cardElem = mastodonFeedCreateElementPreviewCard(showStatus.card); contentElem.appendChild(cardElem); } @@ -256,42 +256,42 @@ const mastodonFeedRenderStatuses = function(statuses, rootElem, options) { rootElem.appendChild(statusElem); } } - if('_self' != options.linkTarget) { - rootElem.querySelectorAll('a').forEach(function(e) { + if ('_self' != options.linkTarget) { + rootElem.querySelectorAll('a').forEach(function (e) { e.target = options.linkTarget; }); } } -const mastodonFeedLoad = function(url, elementId, options) { +const mastodonFeedLoad = function (url, elementId, options) { const xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.responseType = 'json'; - xhr.onload = function() { + xhr.onload = function () { const statuses = xhr.response; const rootElem = document.getElementById(elementId); rootElem.innerHTML = ''; if (xhr.status === 200) { - if(options.excludeConversationStarters && statuses.length > 0) { + if (options.excludeConversationStarters && statuses.length > 0) { const filteredStatuses = []; - for(let i = 0; i < statuses.length; i++) { + for (let i = 0; i < statuses.length; i++) { let includeStatus = true; - if(statuses[i].mentions.length > 0) { + 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) { + if (plainTextContent.substring(1, ('@' + mentionUsername).length) == mentionUsername) { includeStatus = false; } } - if(includeStatus) { + if (includeStatus) { filteredStatuses.push(statuses[i]); } } mastodonFeedRenderStatuses(filteredStatuses, rootElem, options); } - else { + else { mastodonFeedRenderStatuses(statuses, rootElem, options); } } @@ -304,7 +304,9 @@ const mastodonFeedLoad = function(url, elementId, options) { apiUrl = 'https://' + instance + '/api/v1/accounts/' + account_id + '/statuses'; -window.addEventListener("load", () => { + + +function activate() { mastodonFeedLoad( apiUrl, "fedi-feed", @@ -329,4 +331,4 @@ window.addEventListener("load", () => { } } ); -}); +}