Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit d0a1c16

Browse files
koddssonkoddsson
committed
Assume list items are task list items
1 parent 0516131 commit d0a1c16

File tree

4 files changed

+28
-28
lines changed

4 files changed

+28
-28
lines changed

‎README.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -29,23 +29,23 @@ With a script tag:
2929
```html
3030
<task-lists sortable>
3131
<ul class="contains-task-list">
32-
<li class="task-list-item">
33-
<input type="checkbox" class="task-list-item-checkbox">
32+
<li>
33+
<input type="checkbox" class="task-list-item-checkbox" />
3434
Hubot
3535
</li>
36-
<li class="task-list-item">
37-
<input type="checkbox" class="task-list-item-checkbox">
36+
<li>
37+
<input type="checkbox" class="task-list-item-checkbox" />
3838
Bender
3939
</li>
4040
</ul>
4141
4242
<ul class="contains-task-list">
43-
<li class="task-list-item">
44-
<input type="checkbox" class="task-list-item-checkbox">
43+
<li>
44+
<input type="checkbox" class="task-list-item-checkbox" />
4545
BB-8
4646
</li>
47-
<li class="task-list-item">
48-
<input type="checkbox" class="task-list-item-checkbox">
47+
<li>
48+
<input type="checkbox" class="task-list-item-checkbox" />
4949
WALL-E
5050
</li>
5151
</ul>
@@ -57,12 +57,12 @@ With a script tag:
5757
```js
5858
const list = document.querySelector('task-lists')
5959
60-
list.addEventListener('task-lists-check', function(event) {
60+
list.addEventListener('task-lists-check', function (event) {
6161
const {position, checked} = event.detail
6262
console.log(position, checked)
6363
})
6464
65-
list.addEventListener('task-lists-move', function(event) {
65+
list.addEventListener('task-lists-move', function (event) {
6666
const {src, dst} = event.detail
6767
console.log(src, dst)
6868
})

‎examples/index.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@
99
<body>
1010
<task-lists sortable>
1111
<ul class="contains-task-list">
12-
<li class="task-list-item">
12+
<li>
1313
<label>
1414
<input type="checkbox" class="task-list-item-checkbox" />
1515
Hubot
1616
</label>
1717
</li>
18-
<li class="task-list-item">
18+
<li>
1919
<label>
2020
<input type="checkbox" class="task-list-item-checkbox" />
2121
Bender
@@ -28,28 +28,28 @@
2828
Nested
2929

3030
<ul class="contains-task-list">
31-
<li class="task-list-item">
31+
<li>
3232
<label>
3333
<input type="checkbox" class="task-list-item-checkbox" />
3434
WALL-E
3535
</label>
3636
</li>
37-
<li class="task-list-item">
37+
<li>
3838
<label>
3939
<input type="checkbox" class="task-list-item-checkbox" />
4040
R2-D2
4141
</label>
4242

4343
<ul class="contains-task-list">
44-
<li class="task-list-item">
44+
<li>
4545
<label>
4646
<input type="checkbox" class="task-list-item-checkbox" />
4747
Baymax
4848
</label>
4949
</li>
5050
</ul>
5151
</li>
52-
<li class="task-list-item">
52+
<li>
5353
<label>
5454
<input type="checkbox" class="task-list-item-checkbox" />
5555
BB-8

‎src/task-lists-element.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ function initItem(el: HTMLElement) {
9999
if (!(currentTaskList instanceof TaskListsElement)) return
100100

101101
// Single item task lists are not draggable.
102-
if (currentTaskList.querySelectorAll('.task-list-item').length <= 1) return
102+
if (currentTaskList.querySelectorAll('li').length <= 1) return
103103

104104
const fragment = handleTemplate.content.cloneNode(true)
105105
const handle = (fragment as DocumentFragment).querySelector<HTMLElement>('.handle')
@@ -138,7 +138,7 @@ function onListItemMouseOut(event: MouseEvent) {
138138
function position(checkbox: HTMLInputElement): [number, number] {
139139
const list = taskList(checkbox)
140140
if (!list) throw new Error('.contains-task-list not found')
141-
const item = checkbox.closest('.task-list-item')
141+
const item = checkbox.closest('li')
142142
const index = item ? Array.from(list.children).indexOf(item) : -1
143143
return [listIndex(list), index]
144144
}
@@ -161,7 +161,7 @@ function rootTaskList(node: Element): Element | null {
161161
}
162162

163163
function syncState(list: TaskListsElement) {
164-
const items = list.querySelectorAll<HTMLElement>('.contains-task-list > .task-list-item')
164+
const items = list.querySelectorAll<HTMLElement>('.contains-task-list > li')
165165
for (const el of items) {
166166
if (isRootTaskList(el)) {
167167
initItem(el)
@@ -171,7 +171,7 @@ function syncState(list: TaskListsElement) {
171171
}
172172

173173
function syncDisabled(list: TaskListsElement) {
174-
for (const el of list.querySelectorAll('.task-list-item')) {
174+
for (const el of list.querySelectorAll('li')) {
175175
el.classList.toggle('enabled', !list.disabled)
176176
}
177177
for (const el of list.querySelectorAll('.task-list-item-checkbox')) {
@@ -222,7 +222,7 @@ function onHandleMouseOver(event: MouseEvent) {
222222
const target = event.currentTarget
223223
if (!(target instanceof Element)) return
224224

225-
const item = target.closest('.task-list-item')
225+
const item = target.closest('li')
226226
if (!item) return
227227

228228
const list = item.closest('task-lists')
@@ -240,7 +240,7 @@ function onHandleMouseOut(event: MouseEvent) {
240240
const target = event.currentTarget
241241
if (!(target instanceof Element)) return
242242

243-
const item = target.closest('.task-list-item')
243+
const item = target.closest('li')
244244
if (!item) return
245245

246246
item.setAttribute('draggable', 'false')

‎test/test.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,19 +18,19 @@ describe('task-lists element', function () {
1818
container.innerHTML = `
1919
<task-lists>
2020
<ul class="contains-task-list">
21-
<li class="task-list-item">
21+
<li>
2222
<input type="checkbox" class="task-list-item-checkbox"> Hubot
2323
</li>
24-
<li class="task-list-item">
24+
<li>
2525
<input type="checkbox" class="task-list-item-checkbox"> Bender
2626
</li>
2727
</ul>
2828
2929
<ul class="contains-task-list">
30-
<li class="task-list-item">
30+
<li>
3131
<input type="checkbox" class="task-list-item-checkbox"> BB-8
3232
</li>
33-
<li class="task-list-item">
33+
<li>
3434
<input id="wall-e" type="checkbox" class="task-list-item-checkbox"> WALL-E
3535
</li>
3636
</ul>
@@ -39,14 +39,14 @@ describe('task-lists element', function () {
3939
<li>
4040
Nested
4141
<ul class="contains-task-list">
42-
<li class="task-list-item">
42+
<li>
4343
<label>
4444
<input type="checkbox" class="task-list-item-checkbox">
4545
R2-D2
4646
</label>
4747
4848
<ul class="contains-task-list">
49-
<li class="task-list-item">
49+
<li>
5050
<label>
5151
<input id="baymax" type="checkbox" class="task-list-item-checkbox">
5252
Baymax

0 commit comments

Comments
 (0)