js improvements

Author: silverwind

web_src/js/markup/tasklist.js

@@ -1,47 +1,59 @@
 /**
- * Attaches `change` handlers to markdown rendered tasklist checkboxes in comments.
- * When a checkbox value changes, the corresponding [ ] or [x] in the markdown string is set accordingly and sent to the server.
- * On success it updates the raw-content on error it resets the checkbox to its original value.
+ * Attaches `input` handlers to markdown rendered tasklist checkboxes in comments.
+ * When a checkbox value changes, the corresponding [ ] or [x] in the markdown string
+ * is set accordingly and sent to the server. On success it updates the raw-content on
+ * error it resets the checkbox to its original value.
  */
-export default function initMarkupTasklist() {
-  document.querySelectorAll(`.render-content.markup[data-can-edit='true']`).forEach((el) => {
-    const container = el.parentNode;
-    const checkboxes = container.querySelectorAll(`.task-list-item input[type=checkbox]`);
 
-    checkboxes.forEach((cb) => cb.addEventListener('change', async (ev) => {
-      const checkbox = ev.target;
-      const checkboxCharacter = checkbox.checked ? 'x' : ' ';
-      const position = parseInt(checkbox.dataset.sourcePosition) + 1;
+const preventListener = (e) => e.preventDefault();
 
-      const rawContent = container.querySelector('.raw-content');
-      const oldContent = rawContent.textContent;
-      const newContent = oldContent.substring(0, position) + checkboxCharacter + oldContent.substring(position + 1);
-
-      if (newContent !== oldContent) {
-        checkboxes.forEach((cb) => cb.disabled = true);
+export default function initMarkupTasklist() {
+  for (const el of document.querySelectorAll(`.markup[data-can-edit='true']`) || []) {
+    const container = el.parentNode;
+    const checkboxes = el.querySelectorAll(`.task-list-item input[type=checkbox]`);
+
+    for (const checkbox of checkboxes) {
+      checkbox.addEventListener('input', async () => {
+        const checkboxCharacter = checkbox.checked ? 'x' : ' ';
+        const position = parseInt(checkbox.dataset.sourcePosition) + 1;
+
+        const rawContent = container.querySelector('.raw-content');
+        const oldContent = rawContent.textContent;
+        const newContent = oldContent.substring(0, position) + checkboxCharacter + oldContent.substring(position + 1);
+        if (newContent === oldContent) return;
+
+        // Prevent further inputs until the request is done. This does not use the
+        // `disabled` attribute because it causes the border to flash on click.
+        for (const checkbox of checkboxes) {
+          checkbox.addEventListener('click', preventListener);
+        }
 
         try {
-          const contentZone = container.querySelector('.edit-content-zone');
-          const url = contentZone.dataset.updateUrl;
-          const context = contentZone.dataset.context;
+          const editContentZone = container.querySelector('.edit-content-zone');
+          const {updateUrl, context} = editContentZone.dataset;
 
-          await $.post(url, {
+          await $.post(updateUrl, {
             _csrf: window.config.csrf,
             content: newContent,
             context,
           });
 
           rawContent.textContent = newContent;
-        } catch (e) {
+        } catch (err) {
           checkbox.checked = !checkbox.checked;
-
-          console.error(e);
-        } finally {
-          checkboxes.forEach((cb) => cb.disabled = false);
+          console.error(err);
         }
-      }
-    }));
 
-    checkboxes.forEach((cb) => cb.disabled = false);
-  });
+        // Enable input on checkboxes again
+        for (const checkbox of checkboxes) {
+          checkbox.removeEventListener('click', preventListener);
+        }
+      });
+    }
+
+    // Enable the checkboxes as they are initially disabled by the markdown renderer
+    for (const checkbox of checkboxes) {
+      checkbox.disabled = false;
+    }
+  }
 }