Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add option to let the user check/uncheck the checkboxes #249

Merged
merged 1 commit into from
Mar 2, 2018
Merged

Add option to let the user check/uncheck the checkboxes #249

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ var/
.installed.cfg
*.egg


# PyInstaller
# Usually these files are written by a python script from a template
# before PyInstaller builds the exe, so as to inject date/other infos into it.
Expand Down Expand Up @@ -66,4 +67,10 @@ node_modules/*
*.js.map

manifest.json
*.dic
*.dic

# IDE
.vscode/

# cache
.pytest_cache
33 changes: 24 additions & 9 deletions docs/src/markdown/extensions/tasklist.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,12 +63,26 @@ If `custom_checkbox` is enabled the structure will be as follows:
</ul>
```

Classes | Description
--------------------- | ------------
`task-list` | Attached to either the `ul` or `ol` tag and represents the entire list element.
`task-list-item` | This is attached the `li` tag and represents an item in the list.
`task-list-control` | This is attached to the `label` tag and represents the control object.
`task-list-indicator` | This is attached to the `span` directly following the input and is used to style the visual indicator.
If `clickable_checkbox` is enabled checkboxes will be enabled:

```html
<ul class="task-list">
<li class="task-list-item">
<label class="task-list-control">
<input type="checkbox" checked="">
<span class="task-list-indicator"></span>
</label>
item 1
</li>
</ul>
```

| Classes | Description |
| --------------------- | ------------------------------------------------------------------------------------------------------ |
| `task-list` | Attached to either the `ul` or `ol` tag and represents the entire list element. |
| `task-list-item` | This is attached the `li` tag and represents an item in the list. |
| `task-list-control` | This is attached to the `label` tag and represents the control object. |
| `task-list-indicator` | This is attached to the `span` directly following the input and is used to style the visual indicator. |

??? settings "Basic Tasklist CSS"

Expand Down Expand Up @@ -141,9 +155,10 @@ Classes | Description

## Options

Option | Type | Default | Description
----------------- | ---- | ------------ | ------------
`custom_checkbox` | bool | `#!py3 False` | Generate task lists in such a way as to allow for styling the check box with CSS.
Option | Type | Default | Description
-------------------- | ---- | ------------ | ------------
`custom_checkbox` | bool | `#!py3 False` | Generate task lists in such a way as to allow for styling the check box with CSS.
`clickable_checkbox` | bool | `#!py3 False` | Enable user to interact with checkboxes.


--8<-- "abbr.md"
19 changes: 14 additions & 5 deletions pymdownx/tasklist.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,16 +31,20 @@
RE_CHECKBOX = re.compile(r"^(?P<checkbox> *\[(?P<state>(?:x|X| ){1})\] +)(?P<line>.*)")


def get_checkbox(state, custom_checkbox=False):
def get_checkbox(state, custom_checkbox=False, clickable_checkbox=False):
"""Get checkbox tag."""

if custom_checkbox:
return (
'<label class="task-list-control">' +
'<input type="checkbox" disabled%s/>' % (' checked' if state.lower() == 'x' else '') +
'<input type="checkbox"%s%s/>' % (
' disabled' if not clickable_checkbox else '',
' checked' if state.lower() == 'x' else '') +
'<span class="task-list-indicator"></span></label> '
)
return '<input type="checkbox" disabled%s> ' % (' checked' if state.lower() == 'x' else '')
return '<input type="checkbox"%s%s/> ' % (
' disabled' if not clickable_checkbox else '',
' checked' if state.lower() == 'x' else '')


class TasklistTreeprocessor(Treeprocessor):
Expand All @@ -53,7 +57,7 @@ def inline(self, li):
m = RE_CHECKBOX.match(li.text)
if m is not None:
li.text = self.markdown.htmlStash.store(
get_checkbox(m.group('state'), self.custom_checkbox),
get_checkbox(m.group('state'), self.custom_checkbox, self.clickable_checkbox),
safe=True
) + m.group('line')
found = True
Expand All @@ -69,7 +73,7 @@ def sub_paragraph(self, li):
m = RE_CHECKBOX.match(first.text)
if m is not None:
first.text = self.markdown.htmlStash.store(
get_checkbox(m.group('state'), self.custom_checkbox),
get_checkbox(m.group('state'), self.custom_checkbox, self.clickable_checkbox),
safe=True
) + m.group('line')
found = True
Expand All @@ -79,6 +83,7 @@ def run(self, root):
"""Find list items that start with [ ] or [x] or [X]."""

self.custom_checkbox = bool(self.config["custom_checkbox"])
self.clickable_checkbox = bool(self.config["clickable_checkbox"])
parent_map = dict((c, p) for p in root.iter() for c in p)
task_items = []
lilinks = root.iter('li')
Expand Down Expand Up @@ -117,6 +122,10 @@ def __init__(self, *args, **kwargs):
False,
"Add an empty label tag after the input tag to allow for custom styling - Default: False"
],
'clickable_checkbox': [
False,
"Allow user to check/uncheck the checkbox - Default: False"
],
'delete': [True, "Enable delete - Default: True"],
'subscript': [True, "Enable subscript - Default: True"]
}
Expand Down
72 changes: 72 additions & 0 deletions tests/extensions/tasklist/tasklist (checkable).html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../_assets/tasklist.css"/>
</head>
<body>
<div class="markdown-body">
<h1>Task List</h1>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" checked/> item 1<ul class="task-list">
<li class="task-list-item"><input type="checkbox" checked/> item A</li>
<li class="task-list-item"><input type="checkbox"/> item B<ul class="task-list">
<li class="task-list-item"><input type="checkbox" checked/> item a</li>
<li class="task-list-item"><input type="checkbox"/> item b</li>
<li class="task-list-item"><input type="checkbox" checked/> item c</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" checked/> item C</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox"/> item 2</li>
<li class="task-list-item"><input type="checkbox"/> item 3</li>
</ul>
<h1>Mixed Lists</h1>
<ul>
<li>item 1<ul class="task-list">
<li class="task-list-item"><input type="checkbox" checked/> item A</li>
<li class="task-list-item"><input type="checkbox"/> item B<ol>
<li>item a</li>
<li>item b</li>
<li>item c</li>
</ol>
</li>
<li class="task-list-item"><input type="checkbox" checked/> item C</li>
</ul>
</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<h1>Really Mixed Lists</h1>
<ul class="task-list">
<li>item 1<ul class="task-list">
<li class="task-list-item"><input type="checkbox" checked/> item A</li>
<li>item B
more text<ol class="task-list">
<li>item a</li>
<li>item b</li>
<li class="task-list-item"><input type="checkbox"/> item c</li>
</ol>
</li>
<li>item C</li>
</ul>
</li>
<li>item 2</li>
<li class="task-list-item"><input type="checkbox" checked/> item 3</li>
</ul>
<h1>Test Tasklists in Subparagraphs</h1>
<ul class="task-list">
<li class="task-list-item">
<p><input type="checkbox" checked/> item 1</p>
<ul class="task-list">
<li class="task-list-item">
<p><input type="checkbox" checked/> item A</p>
</li>
<li>
<p>item a</p>
</li>
</ul>
</li>
</ul>
</div>
</body>
46 changes: 46 additions & 0 deletions tests/extensions/tasklist/tasklist (checkable).txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
# Task List

- [X] item 1
* [X] item A
* [ ] item B
more text
+ [x] item a
+ [ ] item b
+ [x] item c
* [X] item C
- [ ] item 2
- [ ] item 3

# Mixed Lists

- item 1
* [X] item A
* [ ] item B
more text
1. item a
2. item b
3. item c
* [X] item C
- item 2
- item 3

# Really Mixed Lists

- item 1
* [X] item A
- item B
more text
1. item a
+ item b
+ [ ] item c
3. item C
2. item 2
- [X] item 3

# Test Tasklists in Subparagraphs

- [X] item 1

- [X] item A

- item a
72 changes: 72 additions & 0 deletions tests/extensions/tasklist/tasklist (custom checkable).html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../_assets/tasklist_custom.css"/>
</head>
<body>
<div class="markdown-body">
<h1>Task List</h1>
<ul class="task-list">
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" checked/><span class="task-list-indicator"></span></label> item 1<ul class="task-list">
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" checked/><span class="task-list-indicator"></span></label> item A</li>
<li class="task-list-item"><label class="task-list-control"><input type="checkbox"/><span class="task-list-indicator"></span></label> item B<ul class="task-list">
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" checked/><span class="task-list-indicator"></span></label> item a</li>
<li class="task-list-item"><label class="task-list-control"><input type="checkbox"/><span class="task-list-indicator"></span></label> item b</li>
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" checked/><span class="task-list-indicator"></span></label> item c</li>
</ul>
</li>
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" checked/><span class="task-list-indicator"></span></label> item C</li>
</ul>
</li>
<li class="task-list-item"><label class="task-list-control"><input type="checkbox"/><span class="task-list-indicator"></span></label> item 2</li>
<li class="task-list-item"><label class="task-list-control"><input type="checkbox"/><span class="task-list-indicator"></span></label> item 3</li>
</ul>
<h1>Mixed Lists</h1>
<ul>
<li>item 1<ul class="task-list">
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" checked/><span class="task-list-indicator"></span></label> item A</li>
<li class="task-list-item"><label class="task-list-control"><input type="checkbox"/><span class="task-list-indicator"></span></label> item B<ol>
<li>item a</li>
<li>item b</li>
<li>item c</li>
</ol>
</li>
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" checked/><span class="task-list-indicator"></span></label> item C</li>
</ul>
</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<h1>Really Mixed Lists</h1>
<ul class="task-list">
<li>item 1<ul class="task-list">
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" checked/><span class="task-list-indicator"></span></label> item A</li>
<li>item B
more text<ol class="task-list">
<li>item a</li>
<li>item b</li>
<li class="task-list-item"><label class="task-list-control"><input type="checkbox"/><span class="task-list-indicator"></span></label> item c</li>
</ol>
</li>
<li>item C</li>
</ul>
</li>
<li>item 2</li>
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" checked/><span class="task-list-indicator"></span></label> item 3</li>
</ul>
<h1>Test Tasklists in Subparagraphs</h1>
<ul class="task-list">
<li class="task-list-item">
<p><label class="task-list-control"><input type="checkbox" checked/><span class="task-list-indicator"></span></label> item 1</p>
<ul class="task-list">
<li class="task-list-item">
<p><label class="task-list-control"><input type="checkbox" checked/><span class="task-list-indicator"></span></label> item A</p>
</li>
<li>
<p>item a</p>
</li>
</ul>
</li>
</ul>
</div>
</body>
46 changes: 46 additions & 0 deletions tests/extensions/tasklist/tasklist (custom checkable).txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
# Task List

- [X] item 1
* [X] item A
* [ ] item B
more text
+ [x] item a
+ [ ] item b
+ [x] item c
* [X] item C
- [ ] item 2
- [ ] item 3

# Mixed Lists

- item 1
* [X] item A
* [ ] item B
more text
1. item a
2. item b
3. item c
* [X] item C
- item 2
- item 3

# Really Mixed Lists

- item 1
* [X] item A
- item B
more text
1. item a
+ item b
+ [ ] item c
3. item C
2. item 2
- [X] item 3

# Test Tasklists in Subparagraphs

- [X] item 1

- [X] item A

- item a
Loading