-
-
Notifications
You must be signed in to change notification settings - Fork 5.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Make tasklist checkboxes clickable (#15791)
Co-authored-by: silverwind <[email protected]> Co-authored-by: Lauris BH <[email protected]>
- Loading branch information
3 people
authored
May 23, 2021
1 parent
b4d1059
commit 6021fbf
Showing
9 changed files
with
96 additions
and
24 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,12 @@ | ||
| import {renderMermaid} from './mermaid.js'; | ||
| import {initMarkupTasklist} from './tasklist.js'; | ||
|
|
||
| export async function renderMarkupContent() { | ||
| // code that runs for all markup content | ||
| export async function initMarkupContent() { | ||
| await renderMermaid(document.querySelectorAll('code.language-mermaid')); | ||
| } | ||
|
|
||
| // code that only runs for comments | ||
| export function initCommentContent() { | ||
| initMarkupTasklist(); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,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; | ||
| } | ||
| } | ||
| } |