aboutsummaryrefslogtreecommitdiffstats
path: root/web_src/js/markup/tasklist.js
blob: 5a7291b4d0083667d5dddba42c91f664c1e4174e (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
/**
 * 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.
 */

const preventListener = (e) => e.preventDefault();

export 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) {
      if (checkbox.dataset.editable) return;
      checkbox.dataset.editable = 'true';
      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 editContentZone = container.querySelector('.edit-content-zone');
          const {updateUrl, context} = editContentZone.dataset;

          await $.post(updateUrl, {
            _csrf: window.config.csrf,
            content: newContent,
            context,
          });

          rawContent.textContent = newContent;
        } catch (err) {
          checkbox.checked = !checkbox.checked;
          console.error(err);
        }

        // 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;
    }
  }
}