Initial commit
This commit is contained in:
commit
64a4083c54
GPG Key ID:
534845FADDF0C329
|
|
@ -0,0 +1,57 @@
|
|||
.fedicomment-alert {
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
padding: 30px;
|
||||
width: 60%;
|
||||
border-radius: 15px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.fedicomment-error {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.fedicomment-warning {
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.fedicomment-comment {
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
border: solid grey 1px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.fedicomment-comment .fedicomment-comment {
|
||||
border: none;
|
||||
border-radius: initial;
|
||||
margin: 0;
|
||||
margin-left: 5px;
|
||||
padding: 0;
|
||||
border-left: solid grey 1px;
|
||||
}
|
||||
|
||||
.fedicomment-comment-header img {
|
||||
height: 25px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.fedicomment-comment-header * {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.fedicomment-reactions {
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
border: solid grey 1px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.fedicomment-share::before {
|
||||
content: '🔄';
|
||||
}
|
||||
|
||||
.fedicomment-fav::before{
|
||||
content: '❤️';
|
||||
}
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
class Fedicomment {
|
||||
enableButton;
|
||||
container;
|
||||
postod;
|
||||
mastodonurl;
|
||||
|
||||
constructor() {
|
||||
this.container = document.getElementById("fedicomment-container");
|
||||
if (this.container == null) {
|
||||
console.error("Fedicomment: could not find fedicomment container");
|
||||
return;
|
||||
}
|
||||
|
||||
this.postid = this.container.dataset.postid;
|
||||
if (typeof this.postid != "string") {
|
||||
console.error("Fedicomment: expected postid");
|
||||
return;
|
||||
}
|
||||
|
||||
this.mastodonurl = this.container.dataset.mastodonurl;
|
||||
if (typeof this.mastodonurl != "string") {
|
||||
console.error("Fedicomment: expected mastodonurl");
|
||||
return;
|
||||
}
|
||||
|
||||
this.enableButton = document.createElement("button");
|
||||
this.enableButton.innerHTML = "Enable Fedicomment";
|
||||
this.enableButton.onclick = function() {
|
||||
fedicomment.enable();
|
||||
}
|
||||
|
||||
this.container.replaceChildren(this.enableButton);
|
||||
|
||||
console.log("Fedicomment successfully initialized");
|
||||
}
|
||||
|
||||
enable() {
|
||||
fetch(`${this.mastodonurl}/api/v1/statuses/${this.postid}`)
|
||||
.then((resp) => {
|
||||
if (resp.ok) {
|
||||
resp.json().then((data) => {
|
||||
this.container.innerHTML = `<div class="fedicomment-reactions"><span class="fedicomment-share">${data.reblogs_count}</span> - <span class="fedicomment-fav">${data.favourites_count}</span> - ${data.replies_count} replies</div>`;
|
||||
})
|
||||
}
|
||||
else {
|
||||
throw "Mastodon instance failed";
|
||||
}
|
||||
})
|
||||
.catch((error) => console.error("Fedicomment: failed to fetch comments:", error));
|
||||
fetch(`${this.mastodonurl}/api/v1/statuses/${this.postid}/context`)
|
||||
.then((resp) => {
|
||||
if (resp.ok) {
|
||||
resp.json().then((data) => {
|
||||
// comments is maps post id to replies to this post
|
||||
let comments = new Map();
|
||||
data.descendants.forEach((comment) => {
|
||||
if (comments.has(comment.in_reply_to_id)) {
|
||||
comments.set(comment.in_reply_to_id, [...comments.get(comment.in_reply_to_id), comment]);
|
||||
}
|
||||
else {
|
||||
comments.set(comment.in_reply_to_id, [comment]);
|
||||
}
|
||||
})
|
||||
this.container.innerHTML += this.commentsToHTML(comments, this.postid);
|
||||
})
|
||||
}
|
||||
else {
|
||||
throw "Mastodon instance failed";
|
||||
}
|
||||
})
|
||||
.catch((error) => console.error("Fedicomment: failed to fetch comments:", error));
|
||||
console.log("Fedicomment: Successfully got comments and reactions");
|
||||
}
|
||||
|
||||
commentsToHTML(comments, id) {
|
||||
let result = "";
|
||||
if (comments.has(id)) {
|
||||
comments.get(id).forEach((comment) => {
|
||||
result += `<div class="fedicomment-comment"><div class="fedicomment-comment-header"><img src="${comment.account.avatar}" alt="${comment.account.username} avatar"> <a href="${comment.account.url}">${comment.account.username}</a></div>${comment.content}${this.commentsToHTML(comments, comment.id)}</div>`
|
||||
})
|
||||
}
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
||||
let fedicomment = new Fedicomment();
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf8" />
|
||||
<link rel="stylesheet" href="main.css" />
|
||||
<link rel="stylesheet" href="fedicomment.css" />
|
||||
<link rel="favicon" href="icon.png" />
|
||||
<title>Fedicomment demo</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Les Connards Pro™, capter les données des cons–</h1>
|
||||
<article>
|
||||
–sommateurs. Les données des consommateurs. Cet épisode inédit des Connards Professionnels™ vous invite à découvrir le monde merveilleux du capitalisme de surveillance, où l’on donne ce qui nous est le plus personnel : notre attention.
|
||||
|
||||
<h2>Le retour des Connards Pros™ avec des épisodes inédits !</h2>
|
||||
|
||||
Afin de fêter leur retour, le Framablog souhaite publier, chaque semaine pendant un mois, un des épisodes inédits de ce travail… de connards, il faut bien le dire !
|
||||
|
||||
Le Guide du Connard Professionnel est un livre-BD scénarisé par Pouhiou et dessiné par Gee, placé dans le domaine public volontaire. Nos comparses viennent d’ailleurs de le publier en un joli livre, qui se télécharge librement mais s’achète aussi dans sa version papier si vous voulez soutenir les auteurs.
|
||||
|
||||
<a href="https://framablog.org/2022/11/17/les-connards-pro-capter-les-donnees-des-cons/">L'article utilisé en exemple ici provient du Framablog et a été plublié le 17 novembre 2022.</a>
|
||||
|
||||
Les réponses viennent de Mastodon, depuis <a href="https://framapiaf.org/@Framasoft/109357906602593256">le pouet d'annonce de l'article</a>.
|
||||
</article>
|
||||
<div id="fedicomment-container" data-mastodonurl="https://framapiaf.org" data-postid="109357906602593256">
|
||||
<div class="fedicomment-alert fedicomment-warning">Your browser must support JS to view comments</div>
|
||||
</div>
|
||||
<script src="fedicomment.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue