feat: Load only upon consent
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
This commit is contained in:
parent
3ba24997a2
commit
2d0440c517
@ -8,7 +8,8 @@
|
||||
</head>
|
||||
|
||||
<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>
|
||||
|
||||
</html>
|
||||
104
src/script.js
104
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 + ':', '<img class="emoji" src="' + emoji.url + '" title="' + 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", () => {
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user