Merge pull request #1 from github/nested

Fix nested task list position determination

Author: muan

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">

package-lock.json

@@ -28,16 +28,16 @@
     "babel-preset-es2015-rollup": "^3.0.0",
     "babel-preset-flow": "^6.23.0",
     "chai": "^4.1.2",
-    "eslint": "^5.4.0",
+    "eslint": "^5.5.0",
     "eslint-plugin-github": "^1.2.1",
-    "flow-bin": "^0.79.1",
+    "flow-bin": "^0.80.0",
     "karma": "^3.0.0",
     "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^2.2.0",
     "karma-mocha": "^1.3.0",
     "karma-mocha-reporter": "^2.2.5",
     "mocha": "^5.2.0",
-    "rollup": "^0.64.1",
+    "rollup": "^0.65.2",
     "rollup-plugin-babel": "^3.0.7"
   }
 }

package.json

@@ -1,6 +1,7 @@
 /* @flow */
 
-type SortHandler = ({
+type SortStartHandler = (srcList: Element) => mixed
+type SortEndHandler = ({
   src: {list: Element, index: number},
   dst: {list: Element, index: number}
 }) => mixed
@@ -21,8 +22,8 @@ export function isDragging(): boolean {
   return !!state
 }
 
-export function sortable(el: Element, fn: SortHandler) {
-  sortHandlers.set(el, fn)
+export function sortable(el: Element, sortStarted: SortStartHandler, sortFinished: SortEndHandler) {
+  sortHandlers.set(el, {sortStarted, sortFinished})
   el.addEventListener('dragstart', onDragStart)
   el.addEventListener('dragenter', onDragEnter)
   el.addEventListener('dragend', onDragEnd)
@@ -67,6 +68,11 @@ function onDragStart(event: DragEvent) {
   const siblings = Array.from(target.parentElement.children)
   const sourceIndex = siblings.indexOf(target)
 
+  const handlers = sortHandlers.get(target)
+  if (handlers) {
+    handlers.sortStarted(sourceList)
+  }
+
   state = {
     didDrop: false,
     dragging: target,
@@ -136,8 +142,10 @@ function onDrop(event: DragEvent) {
 
   const src = {list: state.sourceList, index: state.sourceIndex}
   const dst = {list: currentList, index: newIndex}
-  const fn = sortHandlers.get(state.dragging)
-  if (fn) fn({src, dst})
+  const handlers = sortHandlers.get(state.dragging)
+  if (handlers) {
+    handlers.sortFinished({src, dst})
+  }
 }
 
 function onDragEnd() {

src/sortable.js

@@ -110,7 +110,7 @@ function initItem(el: HTMLElement) {
   handle.addEventListener('mouseenter', onHandleMouseOver)
   handle.addEventListener('mouseleave', onHandleMouseOut)
 
-  sortable(el, onSorted)
+  sortable(el, onSortStart, onSorted)
 
   // Drag operations don't remove :hover styles, so manage drag handle hover state.
   el.addEventListener('mouseenter', onListItemMouseOver)
@@ -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]
 }
 
@@ -187,22 +185,33 @@ function syncDisabled(list: TaskListsElement) {
 // lists in the container, not just task lists, are indexed to match the
 // server-side Markdown parser's indexing.
 function listIndex(list: Element): number {
-  const container = list.parentElement
+  const container = list.closest('task-lists')
   if (!container) throw new Error('parent not found')
-  const top = Array.from(container.children).filter(el => el.nodeName === 'OL' || el.nodeName === 'UL')
-  return top.indexOf(list)
+  return Array.from(container.querySelectorAll('ol, ul')).indexOf(list)
+}
+
+const originalLists = new WeakMap()
+
+function onSortStart(srcList: Element) {
+  const container = srcList.closest('task-lists')
+  if (!container) throw new Error('parent not found')
+  originalLists.set(container, Array.from(container.querySelectorAll('ol, ul')))
 }
 
 function onSorted({src, dst}) {
   const container = src.list.closest('task-lists')
   if (!container) return
 
+  const lists = originalLists.get(container)
+  if (!lists) return
+  originalLists.delete(container)
+
   container.dispatchEvent(
     new CustomEvent('task-lists:move', {
       bubbles: true,
       detail: {
-        src: [listIndex(src.list), src.index],
-        dst: [listIndex(dst.list), dst.index]
+        src: [lists.indexOf(src.list), src.index],
+        dst: [lists.indexOf(dst.list), dst.index]
       }
     })
   )