Staticman Script in Pure JS

The official Staticman script sample depends on jQuery. I have been using jQuery in my Staticman script for nested comments for more than six months.

Recently, in the new release of Hugo Swift Theme, in which I’m a collaborator, one has removed all jQuery methods at commit f137efa4. Here’s the structure of the script:

1. auxiliary functions like elem, elems, pushClass, deleteClass, etc.
2. A self-executing function comments()
   • some necessary local variables
   • handleForm() consisting merely of an event listener handling form submission.
     • formToJSON(form) for converting the comment form to a JSON string.
     • fetch(url, {...}).then(...).catch(...) for submitting a sever request and handling its response. It calls showModal(...) and it contains resetForm().
   • a conditional form ? handleForm(form) : false; to execute the above method provided the existence of the comment form.
   • closeModal() and showModal() for closing and showing the modal respectively.
   • a conditional containsClass(body, show) ? closeModal() : false;.
   • a self-executing toogleForm() function. Nesting a self-executing function inside another one limits the namespace of variables. Even though there’s no new variable defined inside this function, there’s a need to wrap it with parenthesis () because toggleForm() is not called elsewhere, unlike toggleMenu(). If the if(button){...} statement comes out directly, we will not know that it’s doing.