This commit is contained in:
Valeria Fadeeva 2023-12-15 20:34:37 +05:00
parent 0080dab4f0
commit 7612773807
3 changed files with 86 additions and 81 deletions

View File

@ -1,106 +1,110 @@
let tplUrl = 'json/mastodon-tpl.html'; let query = window.location.pathname;
let response = await fetch(tplUrl);
var tpl = "";
let log = document.getElementById('log');
log.innerHTML = "";
const controller = new AbortController(); if(query == "/mastodon") {
const signal = controller.signal; let tplUrl = 'json/mastodon-tpl.html';
let response = await fetch(tplUrl);
var tpl = "";
let log = document.getElementById('log');
log.innerHTML = "";
// Cancel the fetch request in 500ms const controller = new AbortController();
setTimeout(() => controller.abort(), 500); const signal = controller.signal;
try { // Cancel the fetch request in 500ms
const response = await fetch(tplUrl, { signal }); setTimeout(() => controller.abort(), 500);
tpl = await response.text();
} catch (error) { try {
// DOMException: The user aborted a request. const response = await fetch(tplUrl, {signal});
console.log('Error: ', error) tpl = await response.text();
log.innerHTML = "<p>1) Ой всё сломалось :(</p>";
}
if (!tpl) { } catch(error) {
log.innerHTML = "<p>2) Ой всё сломалось :(</p>"; // DOMException: The user aborted a request.
} console.log('Error: ', error);
// else { log.innerHTML = "<p>1) Ой всё сломалось :(</p>";
// log.innerHTML = tpl; }
// }
async function fetchData() { if(!tpl) {
var log = document.getElementById('log'); log.innerHTML = "<p>2) Ой всё сломалось :(</p>";
}
// else {
// log.innerHTML = tpl;
// }
var server_address = `techhub.social`; async function fetchData() {
var log = document.getElementById('log');
const response = await fetch('json/posts.json'); var server_address = `techhub.social`;
// const response = await fetch(`https://${server_address}/api/v1/accounts/111518136987654656/statuses`); const response = await fetch('json/posts.json');
const data = await response.json(); // const response = await fetch(`https://${server_address}/api/v1/accounts/111518136987654656/statuses`);
data.forEach(obj => { const data = await response.json();
let post_tpl = tpl;
var media_link = "";
Object.entries(obj).forEach(([key, value]) => {
if (key == "id") {
post_tpl = post_tpl.replace(/{post_id}/g, `${value}`);
}
if (key == "account") { data.forEach(obj => {
post_tpl = post_tpl.replace(/{id}/g, `${value.id}`); let post_tpl = tpl;
post_tpl = post_tpl.replace(/{name}/g, `${value.display_name}`); var media_link = "";
post_tpl = post_tpl.replace(/{server_address}/g, `${server_address}`); Object.entries(obj).forEach(([key, value]) => {
post_tpl = post_tpl.replace(/{account_name}/g, `<a href="https://${server_address}/@${value.username}" target="_blank">@${value.username}@${server_address}</a>`); if(key == "id") {
// post_tpl = post_tpl.replace('{avatar}', `<img src="${value.avatar}" alt="${value.username}'s Avatar" style="width:48px;height:48px;">`); post_tpl = post_tpl.replace(/{post_id}/g, `${value}`);
post_tpl = post_tpl.replace(/{avatar}/g, `${value.avatar}`); }
post_tpl = post_tpl.replace(/{profile_link}/g, `${value.url}`);
}
if (key == "content") { if(key == "account") {
post_tpl = post_tpl.replace('{content}', `${value}`); post_tpl = post_tpl.replace(/{id}/g, `${value.id}`);
} post_tpl = post_tpl.replace(/{name}/g, `${value.display_name}`);
post_tpl = post_tpl.replace(/{server_address}/g, `${server_address}`);
post_tpl = post_tpl.replace(/{account_name}/g, `<a href="https://${server_address}/@${value.username}" target="_blank">@${value.username}@${server_address}</a>`);
// post_tpl = post_tpl.replace('{avatar}', `<img src="${value.avatar}" alt="${value.username}'s Avatar" style="width:48px;height:48px;">`);
post_tpl = post_tpl.replace(/{avatar}/g, `${value.avatar}`);
post_tpl = post_tpl.replace(/{profile_link}/g, `${value.url}`);
}
if (key == "media_attachments") { if(key == "content") {
value.forEach(obj1 => { post_tpl = post_tpl.replace('{content}', `${value}`);
Object.entries(obj1).forEach(([k, v]) => { }
if (k == "preview_url") {
media_link += `<img src="${v}">`;
}
if(key == "media_attachments") {
value.forEach(obj1 => {
Object.entries(obj1).forEach(([k, v]) => {
if(k == "preview_url") {
media_link += `<img src="${v}">`;
}
});
}); });
});
post_tpl = post_tpl.replace('{media_attachments}', `${media_link}`); post_tpl = post_tpl.replace('{media_attachments}', `${media_link}`);
} }
if (key == "created_at") { if(key == "created_at") {
post_tpl = post_tpl.replace(/{created_at}/g, `${value}`); post_tpl = post_tpl.replace(/{created_at}/g, `${value}`);
} }
if (key == "edited_at") { if(key == "edited_at") {
post_tpl = post_tpl.replace(/{edited_at}/g, `${value}`); post_tpl = post_tpl.replace(/{edited_at}/g, `${value}`);
} }
if (key == "favorites_count") { if(key == "favorites_count") {
post_tpl = post_tpl.replace(/{favorites_count}/g, `${value}`); post_tpl = post_tpl.replace(/{favorites_count}/g, `${value}`);
} }
if (key == "replies_count") { if(key == "replies_count") {
post_tpl = post_tpl.replace(/{replies_count}/g, `${value}`); post_tpl = post_tpl.replace(/{replies_count}/g, `${value}`);
} }
if (key == "reblogs_count") { if(key == "reblogs_count") {
post_tpl = post_tpl.replace(/{reblogs_count}/g, `${value}`); post_tpl = post_tpl.replace(/{reblogs_count}/g, `${value}`);
} }
// log.innerHTML = log.innerHTML + `${key} ${value}` + '<br>'; // log.innerHTML = log.innerHTML + `${key} ${value}` + '<br>';
});
log.innerHTML += `${post_tpl}<br>`;
}); });
log.innerHTML += `${post_tpl}<br>`; }
});
}
async function openInNewTab(url) { async function openInNewTab(url) {
window.open(url, '_blank').focus(); window.open(url, '_blank').focus();
} }
fetchData(); fetchData();
}

View File

@ -287,6 +287,8 @@
<script src="assets/js/script.js"></script> <script src="assets/js/script.js"></script>
<script src="assets/js/mastodon.js" type="module" async="async"></script>
<script> <script>
</script> </script>

View File

@ -2,5 +2,4 @@
<link rel="stylesheet" href="assets/css/mastodon.css" media="all"> <link rel="stylesheet" href="assets/css/mastodon.css" media="all">
<div id="log"></div> <div id="log"></div>
<script src="assets/js/mastodon.js" type="module" async="async"></script>
</div><!-- /.container --> </div><!-- /.container -->