329 lines
12 KiB
JavaScript
329 lines
12 KiB
JavaScript
const mastodonFeedCreateElement = function(type, className = null) {
|
|
let element = document.createElement(type);
|
|
if(null !== className) {
|
|
element.className = className;
|
|
}
|
|
return element;
|
|
}
|
|
|
|
const mastodonFeedCreateElementAccountLink = function(account) {
|
|
let accountLinkElem = mastodonFeedCreateElement('a');
|
|
accountLinkElem.href = account.url;
|
|
|
|
let accountImageElem = mastodonFeedCreateElement('img', 'avatar');
|
|
accountImageElem.src = account.avatar_static;
|
|
|
|
accountLinkElem.addEventListener('mouseover', (event) => {
|
|
accountLinkElem.querySelector('.avatar').src = account.avatar;
|
|
});
|
|
accountLinkElem.addEventListener('mouseout', (event) => {
|
|
accountLinkElem.querySelector('.avatar').src = account.avatar_static;
|
|
});
|
|
|
|
accountLinkElem.appendChild(accountImageElem);
|
|
// inject emojis
|
|
let displayName = account.display_name;
|
|
if(account.emojis.length > 0) {
|
|
account.emojis.forEach(function(emoji) {
|
|
displayName = mastodonFeedInjectEmoji(displayName, emoji);
|
|
});
|
|
}
|
|
accountLinkElem.innerHTML += ' ' + displayName;
|
|
return accountLinkElem;
|
|
}
|
|
|
|
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) {
|
|
let attachments = status.media_attachments;
|
|
let mediaWrapperElem = mastodonFeedCreateElement('div', 'media');
|
|
for(let mediaIndex = 0; mediaIndex < attachments.length; mediaIndex++) {
|
|
let media = attachments[mediaIndex];
|
|
let mediaElem = mastodonFeedCreateElement('div', media.type);
|
|
if('image' == media.type) {
|
|
let mediaElemImgLink = mastodonFeedCreateElement('a');
|
|
mediaElemImgLink.href = status.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) {
|
|
mediaElem.title = media.description;
|
|
}
|
|
mediaElem.appendChild(mediaElemImgLink);
|
|
}
|
|
else if('gifv' == media.type) {
|
|
let mediaElemGifvLink = mastodonFeedCreateElement('a');
|
|
mediaElemGifvLink.href = status.url;
|
|
let mediaElemGifv = mastodonFeedCreateElement('video', 'requiresInteraction');
|
|
if(null === media.remote_url) {
|
|
mediaElemGifv.src = media.url;
|
|
}
|
|
else {
|
|
mediaElemGifv.src = media.remote_url;
|
|
}
|
|
mediaElemGifv.loop = true;
|
|
mediaElemGifv.muted = 'muted';
|
|
if(null !== media.description) {
|
|
mediaElemGifv.title = media.description;
|
|
}
|
|
mediaElemGifvLink.appendChild(mediaElemGifv);
|
|
mediaElem.appendChild(mediaElemGifvLink);
|
|
|
|
mediaElemGifv.addEventListener('mouseover', (event) => {
|
|
mediaElemGifv.play();
|
|
});
|
|
mediaElemGifv.addEventListener('mouseout', (event) => {
|
|
mediaElemGifv.pause();
|
|
mediaElemGifv.currentTime = 0;
|
|
});
|
|
}
|
|
else {
|
|
// TODO implement support for other media types
|
|
// currently only image and gifv support implemented
|
|
mediaElem.innerHTML = 'Stripped ' + media.type + ' - only available on instance<br />';
|
|
let permalinkElem = mastodonFeedCreateElement('span', 'permalink');
|
|
permalinkElem.appendChild(mastodonFeedCreateElementPermalink(status, options.text.viewOnInstance));
|
|
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');
|
|
cardElemImage.src = card.image;
|
|
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.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)));
|
|
}
|
|
createdInfo.innerHTML += ' ' + options.text.permalinkPost + ' ';
|
|
if(null !== status.edited_at) {
|
|
createdInfo.innerHTML += ' ' + options.text.edited;
|
|
}
|
|
return createdInfo;
|
|
}
|
|
|
|
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) {
|
|
console.log(options);
|
|
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('div', 'status');
|
|
|
|
// add account meta info
|
|
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));
|
|
accountElem.appendChild(mastodonFeedCreateElementTimeinfo(status, options, (isReblog ? false : status.url)));
|
|
|
|
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.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);
|
|
}
|
|
}
|
|
if('_self' != options.linkTarget) {
|
|
rootElem.querySelectorAll('a').forEach(function(e) {
|
|
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();
|
|
}
|
|
|
|
apiUrl = 'https://social.queereszentrumtuebingen.de/api/v1/accounts/01JFERHG3QG06PQ7QGYEZ6288P/statuses';
|
|
|
|
window.addEventListener("load", () => {
|
|
mastodonFeedLoad(
|
|
apiUrl,
|
|
"fedi-feed",
|
|
{
|
|
linkTarget: "_self",
|
|
showPreviewCards: true,
|
|
excludeConversationStarters: false,
|
|
text: {
|
|
boosted: false,
|
|
noStatuses: false,
|
|
viewOnInstance: "view on instance",
|
|
showContent: "Show content",
|
|
permalinkPre: "on",
|
|
permalinkPost: "",
|
|
edited: "(edited)",
|
|
},
|
|
localization: {
|
|
date: {
|
|
locale: "de-DE",
|
|
options: {},
|
|
}
|
|
}
|
|
}
|
|
);
|
|
});
|