feat: ordered list support (#41)

* rename the placeholderUL property to placeholderList

* remove some empty lines

* update the DataEngine class to only render ordered lists

* improve JSDoc on the DataEngine class getParentNodeOfItem method

* extend the initServerRenderedList function to generate both ol and ul lists

* add the getListInterface method

* set the listInterface property value upon instantiation

* add the getListTagName method

* update the NestedSort class to support both ol and ul lists

* update one of the samples to contain both ol and ul lists

* update the samples CSS code to support both ol and ul lists

* add a missing sample code link to the index page

* minor comment update

Author: Hesam Bahrami

dev/css/main.css

@@ -18,6 +18,7 @@ body {
   border: 1px solid #ccc;
 }
 
+.nested-sort li ol,
 .nested-sort li ul {
   padding: 0;
   margin-top: 10px;
@@ -47,6 +48,6 @@ body {
   background-color: rgb(115, 255, 117);
 }
 
-.list-group li ul {
+.list-group li ol {
   margin-top: 10px;
 }

dev/index.html

@@ -22,6 +22,7 @@ <h1>Samples</h1>
     <li><a href="styling-data-driven-list" target="_blank">Styling</a></li>
     <li><a href="data-persistence-in-local-storage" target="_blank">Persisting Data in Local Storage</a></li>
     <li><a href="enable-disable" target="_blank">Enable / Disable</a></li>
+    <li><a href="nesting-levels" target="_blank">Nesting Levels</a></li>
   </ol>
 
 </div>

dev/server-rendered-multiple-lists.html

@@ -15,19 +15,19 @@ <h1>Multiple server-rendered lists</h1>
 
   <p>The main goal is to create a tree-like list of nested items. You should be able to achieve that by simply dragging and dropping the items using your mouse. Touch screens are not supported yet! 😐</p>
 
-  <h2>List 1</h2>
-  <ul class="draggable">
+  <h2>List 1: Ordered List</h2>
+  <ol class="draggable">
     <li data-id="1">Topic 1</li>
     <li data-id="2">Topic 2</li>
     <li data-id="3">Topic 3
-      <ul data-id="3">
+      <ol data-id="3">
         <li data-id="4">Topic 4</li>
-      </ul>
+      </ol>
     </li>
     <li data-id="5">Topic 5</li>
-  </ul>
+  </ol>
 
-  <h2>List 2</h2>
+  <h2>List 2: Unordered List</h2>
   <ul class="draggable">
     <li data-id="2">Topic 2
       <ul data-id="2">

src/data-engine.js

@@ -102,7 +102,7 @@ class DataEngine {
    * @param {HTMLElement} node
    * @param {object} item
    * @param {string} nodeName
-   * @returns {HTMLElement|null}
+   * @returns {Element|null}
    */
   getParentNodeOfItem(node, item, nodeName) {
     return node.querySelector(`${nodeName}[data-id="${item.parent}"]`)
@@ -123,7 +123,7 @@ class DataEngine {
    * @returns {HTMLElement}
    */
   getDirectListParentOfItem(node, item) {
-    return this.getParentNodeOfItem(node, item, 'ul')
+    return this.getParentNodeOfItem(node, item, 'ol')
   }
 
   /**
@@ -142,8 +142,8 @@ class DataEngine {
     let directParentList = this.getDirectListParentOfItem(topParent, item)
 
     if (!directParentList) {
-      // so we need to create the direct parent UL and append it to the direct parent LI
-      directParentList = this.createItemElement({ id: parent }, 'ul')
+      // we need to create the direct parent OL and append it to the direct parent LI
+      directParentList = this.createItemElement({ id: parent }, 'ol')
       const directParentListItem = this.getParentNodeOfItem(topParent, item, 'li') || topParent
       directParentListItem.appendChild(directParentList)
     }
@@ -184,11 +184,11 @@ class DataEngine {
   }
 
   /**
-   * @param {HTMLUListElement} ul
+   * @param {HTMLOListElement|HTMLUListElement} list
    * @returns {object[]}
    */
-  convertDomToData(ul) {
-    return Array.from(ul.querySelectorAll('li')).map(li => {
+  convertDomToData(list) {
+    return Array.from(list.querySelectorAll('li')).map(li => {
       const parentListItem = li.parentNode
       const parent = parentListItem.dataset.id
       const order = Array.from(parentListItem.children).findIndex(item => item === li) + 1
@@ -202,10 +202,10 @@ class DataEngine {
   }
 
   /**
-   * @returns {HTMLUListElement}
+   * @returns {HTMLOListElement}
    */
   render() {
-    const list = document.createElement('ul')
+    const list = document.createElement('ol')
     this.getListItemsDom().forEach(listItem => list.appendChild(listItem))
     return list
   }

src/main.js

@@ -1,7 +1,6 @@
 import DataEngine from './data-engine'
 
 class NestedSort {
-
   /**
    * @constructor
    * @param {object} [actions={}]
@@ -28,7 +27,7 @@ class NestedSort {
     this.data = data
     this.selector = el
     this.sortableList = null
-    this.placeholderUl = null
+    this.placeholderList = null
     this.placeholderInUse = null
     this.draggedNode = null
     this.targetedNode = null
@@ -44,26 +43,22 @@ class NestedSort {
       X: null,
       Y: null,
     }
-
     this.distances = {
       droppingEdge,
       droppingEdgeNegative: droppingEdge * -1,
       mouseTo: {
         targetedElTop: undefined,
       },
     }
-
     this.dimensions = {
       targetedEl: {
         H: undefined,
       },
     }
-
     this.cursor = {
       X: null,
       Y: null,
     }
-
     this.classNames = {
       dragged: 'ns-dragged',
       placeholder: 'ns-placeholder',
@@ -76,15 +71,25 @@ class NestedSort {
       dragend: this.onDragEnd.bind(this),
       drop: this.onDrop.bind(this),
     }
-
     const intNestingLevels = parseInt(nestingLevels)
     this.nestingLevels = isNaN(intNestingLevels) ? -1 : intNestingLevels // values less than 0 mean infinite levels of nesting
+    this.listInterface = this.getListInterface()
 
     this.maybeInitDataDom()
     this.addListAttributes()
     if (init) this.initDragAndDrop()
   }
 
+  getListInterface() {
+    if (Array.isArray(this.data) && this.data.length) return HTMLOListElement
+
+    const el = this.selector instanceof HTMLElement
+      ? this.selector
+      : document.querySelector(this.selector)
+
+    return el instanceof HTMLOListElement ? HTMLOListElement : HTMLUListElement
+  }
+
   getDataEngine() {
     if (this.dataEngine instanceof DataEngine) {
       return this.dataEngine
@@ -107,14 +112,20 @@ class NestedSort {
     wrapper.appendChild(list)
   }
 
+  getListTagName() {
+    return this.listInterface === HTMLOListElement ? 'ol' : 'ul'
+  }
+
   getSortableList() {
-    if (this.sortableList instanceof HTMLUListElement) return this.sortableList
+    if (this.sortableList instanceof this.listInterface) return this.sortableList
 
-    if (this.selector instanceof HTMLUListElement) {
+    if (this.selector instanceof this.listInterface) {
       this.sortableList = this.selector
     } else {
       const list = document.querySelector(this.selector)
-      this.sortableList = list.nodeName === 'UL' ? list : list.querySelector('ul')
+      this.sortableList = list instanceof this.listInterface
+        ? list
+        : list.querySelector(this.getListTagName())
     }
 
     return this.sortableList
@@ -124,8 +135,8 @@ class NestedSort {
     const list = this.getSortableList()
 
     list.classList.add(...this.listClassNames.concat(this.mainListClassName))
-    list.querySelectorAll('ul').forEach(ul => {
-      ul.classList.add(...this.listClassNames)
+    list.querySelectorAll(this.getListTagName()).forEach(l => {
+      l.classList.add(...this.listClassNames)
     })
 
     list.querySelectorAll('li').forEach(li => {
@@ -187,7 +198,7 @@ class NestedSort {
 
   canBeTargeted(el) {
     if (!this.draggedNode || this.draggedNode === el) return false
-    return el.nodeName === 'LI' || (el.nodeName === 'UL' && el.classList.contains(this.classNames.placeholder))
+    return el.nodeName === 'LI' || (el instanceof this.listInterface && el.classList.contains(this.classNames.placeholder))
   }
 
   onDragStart(e) {
@@ -237,7 +248,7 @@ class NestedSort {
   getDropLocation() {
     if (this.canBeDropped()) {
       if (this.targetedNode.nodeName === 'LI' && !this.cursorIsIndentedEnough()) return 'before'
-      else if (this.targetedNode.nodeName === 'UL') return 'inside'
+      else if (this.targetedNode instanceof this.listInterface) return 'inside'
     }
   }
 
@@ -309,7 +320,8 @@ class NestedSort {
   }
 
   targetedNodeIsPlaceholder() {
-    return this.targetedNode.nodeName === 'UL' && this.targetedNode.classList.contains(this.classNames.placeholder)
+    return this.targetedNode instanceof this.listInterface
+      && this.targetedNode.classList.contains(this.classNames.placeholder)
   }
 
   getTargetedNodeDepth() {
@@ -318,7 +330,7 @@ class NestedSort {
     const list = this.getSortableList()
 
     while (list !== el.parentElement) {
-      if (el.parentElement.nodeName === 'UL') depth++
+      if (el.parentElement instanceof this.listInterface) depth++
       el = el.parentElement
     }
 
@@ -345,7 +357,7 @@ class NestedSort {
       }
     } else if (this.targetedNode !== this.draggedNode
       && this.targetedNode.nodeName === 'LI'
-      && !this.targetedNode.querySelectorAll('ul').length
+      && !this.targetedNode.querySelectorAll(this.getListTagName()).length
       && !this.nestingThresholdReached()) {
       actions.push('add')
     }
@@ -376,7 +388,7 @@ class NestedSort {
 
   targetNodeIsListWithItems() {
     return this.targetNodeIsIdentified()
-      && this.targetedNode.nodeName === 'UL'
+      && this.targetedNode instanceof this.listInterface
       && this.targetedNode.querySelectorAll('li').length
   }
 
@@ -388,7 +400,7 @@ class NestedSort {
   }
 
   cleanupPlaceholderLists() {
-    this.getSortableList().querySelectorAll('ul').forEach(ul => {
+    this.getSortableList().querySelectorAll(this.getListTagName()).forEach(ul => {
       if (!ul.querySelectorAll('li').length) {
         ul.remove()
       } else if (ul.classList.contains(this.classNames.placeholder)) {
@@ -400,12 +412,12 @@ class NestedSort {
   }
 
   initPlaceholderList() {
-    this.placeholderUl = document.createElement('ul')
-    this.placeholderUl.classList.add(this.classNames.placeholder, ...this.listClassNames)
+    this.placeholderList = document.createElement(this.getListTagName())
+    this.placeholderList.classList.add(this.classNames.placeholder, ...this.listClassNames)
   }
 
   getPlaceholderList() {
-    this.placeholderInUse = this.placeholderUl.cloneNode(true)
+    this.placeholderInUse = this.placeholderList.cloneNode(true)
     return this.placeholderInUse
   }
 }