moanos/include-fedi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Load only upon consent
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse Source
This commit is contained in:
moanos [he/him] 2023-11-27 09:55:44 +01:00
parent 3ba24997a2
commit 2d0440c517
2 changed files with 55 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/index.html
View File

@ -8,7 +8,8 @@
</head> </head>
<body> <body>
<div class="include-mastodon-feed dark" id="fedi-feed">Loading...</div> <div class="include-mastodon-feed dark" id="fedi-feed"></div>
<button onclick="activate()">Feed laden</button>
</body> </body>
</html> </html>

104
src/script.js
View File

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