Index list items within their parent list

dgraham · muan · dgraham · commit dcbc960f43ea · 2018-09-06T16:20:16.000-06:00
Co-authored-by: Mu-An Chiou &lt;muan@github.com&gt;
diff --git a/examples/index.html b/examples/index.html
@@ -34,6 +34,21 @@
               WALL-E
             </label>
           </li>
+          <li class="task-list-item">
+            <label>
+              <input type="checkbox" class="task-list-item-checkbox">
+              R2-D2
+            </label>
+
+            <ul class="contains-task-list">
+              <li class="task-list-item">
+                <label>
+                  <input type="checkbox" class="task-list-item-checkbox">
+                  Baymax
+                </label>
+              </li>
+            </ul>
+          </li>
           <li class="task-list-item">
             <label>
               <input type="checkbox" class="task-list-item-checkbox">
diff --git a/src/task-lists-element.js b/src/task-lists-element.js
@@ -136,12 +136,10 @@ function onListItemMouseOut(event: MouseEvent) {
 }
 
 // Returns the list item position as a (list index, item index) tuple.
-// Listen on top-level task lists because item indexing includes nested task lists.
-function position(el: Element): [number, number] {
-  const list = rootTaskList(el)
+function position(checkbox: HTMLInputElement): [number, number] {
+  const list = taskList(checkbox)
   if (!list) throw new Error('.contains-task-list not found')
-  const flattened = Array.from(list.querySelectorAll('li'))
-  const index = flattened.indexOf(el.closest('.task-list-item'))
+  const index = Array.from(list.children).indexOf(checkbox.closest('.task-list-item'))
   return [listIndex(list), index]
 }
 
diff --git a/test/test.js b/test/test.js
@@ -34,15 +34,29 @@ describe('task-lists element', function() {
               <input id="wall-e" type="checkbox" class="task-list-item-checkbox"> WALL-E
             </li>
           </ul>
-          <ul>
+
+          <ol>
             <li>
+              Nested
               <ul class="contains-task-list">
                 <li class="task-list-item">
-                  <input id="baymax" type="checkbox" class="task-list-item-checkbox"> Baymax
+                  <label>
+                    <input type="checkbox" class="task-list-item-checkbox">
+                    R2-D2
+                  </label>
+
+                  <ul class="contains-task-list">
+                    <li class="task-list-item">
+                      <label>
+                        <input id="baymax" type="checkbox" class="task-list-item-checkbox">
+                        Baymax
+                      </label>
+                    </li>
+                  </ul>
                 </li>
               </ul>
             </li>
-          </ul>
+          </ol>
         </task-lists>`
       document.body.append(container)
     })
@@ -76,7 +90,7 @@ describe('task-lists element', function() {
       list.addEventListener('task-lists:check', function(event) {
         called = true
         const {position, checked} = event.detail
-        assert.deepEqual(position, [3, 0])
+        assert.deepEqual(position, [4, 0])
         assert(checked)
       })
 

Original file line number	Diff line number	Diff line change
`@@ -136,12 +136,10 @@ function onListItemMouseOut(event: MouseEvent) {`
`136`	`136`	`}`
`137`	`137`
`138`	`138`	`// Returns the list item position as a (list index, item index) tuple.`
`139`		`-// Listen on top-level task lists because item indexing includes nested task lists.`
`140`		`-function position(el: Element): [number, number] {`
`141`		`- const list = rootTaskList(el)`
	`139`	`+function position(checkbox: HTMLInputElement): [number, number] {`
	`140`	`+ const list = taskList(checkbox)`
`142`	`141`	`if (!list) throw new Error('.contains-task-list not found')`
`143`		`- const flattened = Array.from(list.querySelectorAll('li'))`
`144`		`- const index = flattened.indexOf(el.closest('.task-list-item'))`
	`142`	`+ const index = Array.from(list.children).indexOf(checkbox.closest('.task-list-item'))`
`145`	`143`	`return [listIndex(list), index]`
`146`	`144`	`}`
`147`	`145`