Events

Usage

ThreadTalk.JS fires many events for you to be able to change the default behaviour. All the events are fired on window, so to listen to them, you can do something like:

window.addEventListener('event-name', event => {
 event.preventDefault()
 console.log(event.detail.data)
 // run your code
})

JS

Almost all events are cancellable, thus you can easily call event.preventDefault() to stop the execution of the default code. Some events also pass on some data which you can access using event.detail.data.

Explanation

The available events have been classified into a few categories. This is because, three primary actions are relevant; adding a comment, loading comments and preview a comment. Each of these categories has three events, doing, done, and error. Please note that the names of the events are kept in sync with the grammar and thus, lack uniformity. For example, you can only add or preview one comment at a time, thus their events are prefixed ‘comment’, while multiple comments can be loaded at the same time, thus its events are prefixed ‘comments’.

Adding comment

These events fire at various stages during adding a comment.

comment-adding

Fired after the form is submitted, but before the setupComments API is called.

comment-added

Fired after the comment is added in the database and before it’s appended to the DOM. event.detail.data consists of:

let commentData = event.detail.data

commentData.ref['@ref'].id // ID of the comment
commentData.ts // Timestamp in UNIX milliseconds
commentData.data.name // Name of the person who commented
commentData.data.parent // ID of the parent of the comment
commentData.data.comment // HTML of the comment

JS

comment-add-error

Fired after the fetch request for the API failed or encountered an error, but before showing a notification. event.detail.data consists of the error text.

Loading comments

These events fire at various stages during loading all comments.

comments-loading

Fired after the loading has started, but before the setupComments API is called.

comments-loaded

Fired after the comments are fetched from the database and before it’s appended to the DOM. event.detail.data consists of:

let comments = event.detail.data // [[comment1], [comment2],...]

let commentData = comments[0]

commentData[0] // Timestamp in UNIX milliseconds
commentData[1]['@ref'].id // ID of the comment
commentData[2] // Name of the person who commented
commentData[3] // HTML of the comment
commentData[4] // ID of the parent of the comment

JS

comments-load-error

Fired after the fetch request for the API failed or encountered an error, but before showing a notification. event.detail.data consists of the error text.

Previewing comment

These events fire at various stages during previewing a comment.

comment-previewing

Fired after the user clicks on the Preview button but before making a call to the API.

comment-previewed

Fired after the preview is fetched from the API and before it’s appended to the DOM. event.detail.data consists of the generated HTML.

comment-preview-error

Fired after the fetch request for the API failed or encountered an error, but before showing a notification. event.detail.data consists of the error text.

Others

These events fire at arbitrary stages of the code.

comments-init

Fired after the library has finished initializing and is ready to process data. This event is non-cancellable because the initialization has already completed by the time it’s fired.

comments-destroy

Fired after the library has finished destroying its instance. This event is non-cancellable because the instance has already been destroyed by the time it’s fired.