feat!: remove jquery from staticman comments

daattali · Sep 20, 2024 · 98188bb · 98188bb
1 parent ba84b36
commit 98188bb
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 28 deletions.
diff --git a/_includes/staticman-comments.html b/_includes/staticman-comments.html
@@ -72,12 +72,6 @@ <h3 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_labe
   </div>
 
   <!-- Load script to handle comment form submission -->
-  <!-- doing something a bit funky here because I want to be careful not to include JQuery twice! -->
-  <script>
-    if (typeof jQuery == 'undefined') {
-      document.write('<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-5AkRS45j4ukf+JbWAfHL8P4onPA9p0KwwP7pUdjSQA3ss9edbJUJc/XcYAiheSSz" crossorigin="anonymous"></scr' + 'ipt>');
-    }
-  </script>
   <script src="{{ "/assets/js/staticman.js" | relative_url }}"></script>
 </div>
 {% endif %}
diff --git a/assets/js/staticman.js b/assets/js/staticman.js
@@ -2,18 +2,19 @@
 layout: null
 ---
 
-(function ($) {
-  $('#new_comment').submit(function () {
+document.addEventListener('DOMContentLoaded', function() {
+  document.getElementById('new_comment').addEventListener('submit', function(event) {
+    event.preventDefault();
     const form = this;
 
-    $(form).addClass('disabled');
+    form.classList.add('disabled');
 
     {% assign sm = site.staticman -%}
     const endpoint = '{{ sm.endpoint }}';
     const repository = '{{ sm.repository }}';
     const branch = '{{ sm.branch }}';
     const url = endpoint + repository + '/' + branch + '/comments';
-    const data = $(this).serialize();
+    const data = new URLSearchParams(new FormData(form)).toString();
 
     const xhr = new XMLHttpRequest();
     xhr.open("POST", url);
@@ -31,35 +32,36 @@ layout: null
     };
 
     function formSubmitted() {
-      $('#comment-form-submit').addClass('d-none');
-      $('#comment-form-submitted').removeClass('d-none');
-      $('.page__comments-form .js-notice').removeClass('alert-danger');
-      $('.page__comments-form .js-notice').addClass('alert-success');
+      document.getElementById('comment-form-submit').classList.add('d-none');
+      document.getElementById('comment-form-submitted').classList.remove('d-none');
+      const notice = document.querySelector('.page__comments-form .js-notice');
+      notice.classList.remove('alert-danger');
+      notice.classList.add('alert-success');
       showAlert('success');
     }
 
     function formError() {
-      $('#comment-form-submitted').addClass('d-none');
-      $('#comment-form-submit').removeClass('d-none');
-      $('.page__comments-form .js-notice').removeClass('alert-success');
-      $('.page__comments-form .js-notice').addClass('alert-danger');
+      document.getElementById('comment-form-submitted').classList.add('d-none');
+      document.getElementById('comment-form-submit').classList.remove('d-none');
+      const notice = document.querySelector('.page__comments-form .js-notice');
+      notice.classList.remove('alert-success');
+      notice.classList.add('alert-danger');
       showAlert('failure');
-      $(form).removeClass('disabled');
+      form.classList.remove('disabled');
     }
 
     xhr.send(data);
-
-    return false;
   });
 
   function showAlert(message) {
-    $('.page__comments-form .js-notice').removeClass('d-none');
-    if (message == 'success') {
-      $('.page__comments-form .js-notice-text-success').removeClass('d-none');
-      $('.page__comments-form .js-notice-text-failure').addClass('d-none');
+    const notice = document.querySelector('.page__comments-form .js-notice');
+    notice.classList.remove('d-none');
+    if (message === 'success') {
+      document.querySelector('.page__comments-form .js-notice-text-success').classList.remove('d-none');
+      document.querySelector('.page__comments-form .js-notice-text-failure').classList.add('d-none');
     } else {
-      $('.page__comments-form .js-notice-text-success').addClass('d-none');
-      $('.page__comments-form .js-notice-text-failure').removeClass('d-none');
+      document.querySelector('.page__comments-form .js-notice-text-success').classList.add('d-none');
+      document.querySelector('.page__comments-form .js-notice-text-failure').classList.remove('d-none');
     }
   }
-})(jQuery);
+});