2022-11-21 13:47:46 +01:00
class Fedicomment {
container ;
2022-11-24 09:52:47 +01:00
postid ;
2022-11-21 13:47:46 +01:00
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" ) ;
2022-11-21 16:48:07 +01:00
let errorContainer = document . createElement ( "div" ) ;
errorContainer . innerHTML = "Failed to initialize Fedicomment (see the console for details)" ;
errorContainer . classList . add ( "fedicomment-alert" , "fedicomment-error" ) ;
this . container . replaceChildren ( errorContainer ) ;
2022-11-21 13:47:46 +01:00
return ;
}
this . mastodonurl = this . container . dataset . mastodonurl ;
if ( typeof this . mastodonurl != "string" ) {
console . error ( "Fedicomment: expected mastodonurl" ) ;
2022-11-21 16:48:07 +01:00
let errorContainer = document . createElement ( "div" ) ;
errorContainer . innerHTML = "Failed to initialize Fedicomment (see the console for details)" ;
errorContainer . classList . add ( "fedicomment-alert" , "fedicomment-error" ) ;
this . container . replaceChildren ( errorContainer ) ;
2022-11-21 13:47:46 +01:00
return ;
}
2022-11-21 16:48:07 +01:00
let enableButton = document . createElement ( "button" ) ;
enableButton . innerHTML = "Enable Fedicomment" ;
enableButton . id = "fedicomment-button" ;
enableButton . onclick = function ( ) {
2022-11-21 13:47:46 +01:00
fedicomment . enable ( ) ;
}
2022-11-21 16:48:07 +01:00
this . container . replaceChildren ( enableButton ) ;
2022-11-21 13:47:46 +01:00
console . log ( "Fedicomment successfully initialized" ) ;
}
enable ( ) {
fetch ( ` ${ this . mastodonurl } /api/v1/statuses/ ${ this . postid } ` )
. then ( ( resp ) => {
if ( resp . ok ) {
resp . json ( ) . then ( ( data ) => {
2022-11-24 09:52:47 +01:00
this . container . innerHTML = ` <details><summary>Interact with this post</summary>Copy and paste this URL in your Mastodon application: ${ data . url } </details><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> ` ;
2022-11-21 13:47:46 +01:00
} )
}
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" ;
}
} )
2022-11-21 16:48:07 +01:00
. catch ( ( error ) => {
let errorContainer = document . createElement ( "div" ) ;
errorContainer . innerHTML = "Failed to fetch comments (see the console for details)" ;
errorContainer . classList . add ( "fedicomment-alert" , "fedicomment-error" ) ;
this . container . replaceChildren ( errorContainer ) ;
console . error ( "Fedicomment: failed to fetch comments:" , error )
} ) ;
2022-11-21 13:47:46 +01:00
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 ( ) ;