Methods

Usage

ThreadTalk.JS has made quite a few methods available for you so that you can easily integrate it with your webpage and customise the look and feel as much as you want. Many methods accept some arguments. It is important to note that, when skipping over optional arguments, you need to pass either an empty string or null.

let comments = new ThreadTalk.JS({config})

comments.addComments()
comments.calculateTop(element)
comments.callbackScroll(top, callback)
comments.createComment(id, name, time, comment, parent)
comments.createElement(tagName, {attributes}, innerHTML, appendTo, insertBefore)
comments.createNotification(innerHTML, timeout, callback)
comments.destroy()
comments.loadComments(autoScrollTo)
comments.manageShake(element)
comments.removeNotification(element, callback)
comments.removeReply()
comments.showPreview()

JS

Explanation

The following section of the document explains how each of those methods can be used, what possible arguments are and what they can return.

addComment()

This method is used to submit the comment form with the data. It then calls the setupComments API, then the addComment API. Then, if the comments are already loaded on the page, it just adds this new comment to the top of the list of loads all the comments.

calculateTop()

This method is used to calculate the top of the current element relative to the current scroll position.

Arguments:

  • element (Required, Element): A valid DOM element.

Returns: +ve integer which indicates the scroll position of the given element from the top.

callbackScroll()

This method is used to enable callbacks for the window.scroll() method. It does not provide a native callback, thus to run functions after the scrolling is done, we need this method.

Arguments:

  • top (Required, +ve integer or 0): The value in pixels to scroll to from the top of the element on which the scroll method is used. 0 = top of the element.
  • callback (Optional, Function): The function to call after the scroll completes.

createComment()

This method is used to create a comment element and append it to the DOM. The arguments used by the method are usually fetched from the API.

Arguments:

  • id (Required, +ve integer): The unique identifier or each comment. It’s a random integer generated by FaunaDB. This is also set as the id attribute of the comment element.
  • name (Required, String): The name of the person who commented. The first letter of this string is used to create a profile photo.
  • time (Required, UNIX milliseconds): The timestamp of the comment.
  • comment (Required, String): The HTML body of the comment generated by Showdown.
  • parent (Optional, +ve integer): The ID of the parent comment. When this argument is passed, a reply label is added which indicates that this comment has been added as a reply to a previous comment.

createElement()

This method is used to create an element and append it to the DOM.

Arguments:

  • tagName (Required, String): Name of the tag. A valid HTML tag name without the < and > should be used.
  • attributes (Required, Object): Object with attribute name and value; useful for adding class names and IDs. If no attributes are needed, an empty object must be passed.
  • innerHTML (Required, String): The HTML content of the tag.
  • appendTo (Required, Element): Valid DOM element that the new element will be appended to. It will get appended before the closing tag of the specified element.
  • insertBefore (Optional, Element): Valid DOM element within the element specified in appendTo. If this is specified, the new element will be appended before the start of this element.

Returns: The generated element.

createNotification()

This method is used to create a notification in the DOM.

Arguments:

  • innerHTML (Required, String): The HTML content of the notification. When using the default CSS, you can add <div></div> at the start to create a loading indicator.
  • timeout (Optional, +ve integer): The duration in milliseconds to automatically dismiss the notification after.
  • callback (Optional, Function): The function to be called after the notification is dismissed.

Returns: The notification element.

destroy()

While ThreadTalk.JS takes care of removing unnecessary event listeners, elements and variables from the DOM and memory as soon as they’re not required anymore, in some cases, you might want to reset the entire thing. The destroy() method helps with that. All the variables, elements, etc. including the form will be removed from DOM and memory.

loadComments()

This method forces the comments to load. It is added as an event listener to the load button but can also be programmatically called.

Arguments:

  • autoScrollTo (Optional, +ve integer): It’s the ID of the comment to which the content should be automatically scrolled to once the comments are loaded.

manageShake()

This method can be used to apply the shake animation to any element.

Arguments:

  • element (Required, Element): A valid DOM element.

removeNotification()

This method removes any notification currently existing in DOM along with all of its event listeners.

Arguments:

  • element (Required, Element): A valid DOM element. This element must be the notification.
  • callback (Optional, Function): A function to call after the notification has been removed.

removeReply()

This method removes the replying to label from the DOM as well as the attribute from the form.

showPreview()

This method generates and displays a preview of the generated HTML of the Markdown in the textarea. It only works when the textarea has at least some text.