Base list indexes on original list order

Because nested lists are now included in the index, the original list
order must be captured before list items are moved in the tree.

Co-authored-by: Mu-An Chiou <muan@github.com>

Author: dgraham

src/sortable.js

@@ -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/task-lists-element.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)
@@ -190,16 +190,27 @@ function listIndex(list: Element): number {
   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
+
   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]
       }
     })
   )