Release/3.0.0 (#10)

Hesam Bahrami · web-flow · commit cc02caa66caa · 2020-06-07T14:25:19.000+01:00
Adding the possibility of having multiple lists on the same page
diff --git a/dev/data-driven-list.html b/dev/data-driven-list.html
@@ -50,7 +50,7 @@ <h1>A data-driven list</h1>
         }
       },
       data: data,
-      el: 'draggable2',
+      el: '#draggable2',
       droppingEdge: 5,
       listClassNames: ['nested-sort']
     });
diff --git a/dev/index.html b/dev/index.html
@@ -15,6 +15,7 @@ <h1>Samples</h1>
 
   <ol>
     <li><a href="server-rendered-list.html" target="_blank">Server-rendered List</a></li>
+    <li><a href="server-rendered-multiple-lists.html" target="_blank">Server-rendered Multiple Lists</a></li>
     <li><a href="data-driven-list.html" target="_blank">Data-driven List</a></li>
     <li><a href="mapped-data-driven-list.html" target="_blank">Mapped Data-driven List</a></li>
   </ol>
diff --git a/dev/mapped-data-driven-list.html b/dev/mapped-data-driven-list.html
@@ -48,7 +48,7 @@ <h1>A mapped data-driven list</h1>
         parent: 'item_parent',
         text: 'item_title',
       },
-      el: 'draggable',
+      el: '#draggable',
       droppingEdge: 5,
       listClassNames: ['nested-sort']
     });
diff --git a/dev/server-rendered-list.html b/dev/server-rendered-list.html
@@ -11,7 +11,7 @@
 <body>
 
 <div class="container">
-  <h1>A server-rendered lists</h1>
+  <h1>A server-rendered list</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>
 
@@ -43,7 +43,7 @@ <h1>A server-rendered lists</h1>
           console.log(data)
         }
       },
-      el: 'draggable',
+      el: '#draggable',
       droppingEdge: 5,
       listClassNames: ['nested-sort']
     });
diff --git a/dev/server-rendered-multiple-lists.html b/dev/server-rendered-multiple-lists.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>Nested Sort Server-Rendered Multiple Lists Demo</title>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
+  <link href="css/main.css" rel="stylesheet">
+</head>
+<body>
+
+<div class="container">
+  <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">
+    <li data-id="1">Topic 1</li>
+    <li data-id="2">Topic 2</li>
+    <li data-id="3">Topic 3
+      <ul data-id="3">
+        <li data-id="4">Topic 4</li>
+      </ul>
+    </li>
+    <li data-id="5">Topic 5</li>
+  </ul>
+
+  <h2>List 2</h2>
+  <ul class="draggable">
+    <li data-id="2">Topic 2
+      <ul data-id="2">
+        <li data-id="1">Topic 1</li>
+        <li data-id="3">Topic 3</li>
+      </ul>
+    </li>
+    <li data-id="4">Topic 4</li>
+    <li data-id="5">Topic 5</li>
+  </ul>
+</div>
+
+<!-- Scripts -->
+<script src="../dist/nested-sort.umd.js"></script>
+<script>
+  (function() {
+    document.querySelectorAll('.draggable').forEach(function (list) {
+      new nestedSort({
+        actions: {
+          onDrop: function (data) {
+            console.log(data)
+          }
+        },
+        droppingEdge: 5,
+        el: list,
+        listClassNames: ['nested-sort']
+      });
+    })
+  })();
+</script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nested-sort",
-  "version": "2.3.1",
+  "version": "3.0.0",
   "author": "Hesam Bahrami (Genzo)",
   "description": "A JavaScript library to create a nested list of elements",
   "main": "dist/nested-sort.cjs.js",
diff --git a/src/main.js b/src/main.js
@@ -84,13 +84,19 @@ class nestedSort {
     if (!(Array.isArray(this.data) && this.data.length)) return;
 
     const list = this.getDataEngine().render()
-    document.getElementById(this.selector).appendChild(list);
+    document.querySelector(this.selector).appendChild(list)
   }
 
   getSortableList() {
     if (this.sortableList instanceof HTMLUListElement) return this.sortableList
-    const list = document.getElementById(this.selector)
-    this.sortableList = list.nodeName === 'UL' ? list : list.querySelector('ul')
+
+    if (this.selector instanceof HTMLUListElement) {
+      this.sortableList = this.selector
+    } else {
+      const list = document.querySelector(this.selector)
+      this.sortableList = list.nodeName === 'UL' ? list : list.querySelector('ul')
+    }
+
     return this.sortableList
   }
 
@@ -108,6 +114,8 @@ class nestedSort {
 
       el.addEventListener('dragstart', this.onDragStart.bind(this), false);
       el.addEventListener('dragenter', this.onDragEnter.bind(this), false);
+      el.addEventListener('dragover', this.onDragOver.bind(this), false);
+      el.addEventListener('dragleave', this.onDragLeave.bind(this), false);
       el.addEventListener('dragend', this.onDragEnd.bind(this), false);
       el.addEventListener('drop', this.onDrop.bind(this), false);
 
@@ -138,15 +146,14 @@ class nestedSort {
   }
 
   onDragEnter(e) {
+    if (!this.draggedNode) return
+
     if (['LI', 'UL'].includes(e.target.nodeName)) {
       e.preventDefault(); // prevent default to allow drop
 
       if (this.targetedNode) this.targetedNode.classList.remove(this.classNames.targeted);
       this.targetedNode = e.target;
       e.target.classList.add(this.classNames.targeted);
-
-      e.target.addEventListener('dragover', this.onDragOver.bind(this), false);
-      e.target.addEventListener('dragleave', this.onDragLeave.bind(this), false);
     }
   }
 
@@ -159,9 +166,11 @@ class nestedSort {
 
   onDragEnd(e) {
     e.preventDefault();
+    e.stopPropagation()
     this.draggedNode.classList.remove(this.classNames.dragged);
     this.targetedNode.classList.remove(this.classNames.targeted)
     this.cleanupPlaceholderLists();
+    this.draggedNode = null
   }
 
   onDrop(e) {
@@ -237,13 +246,7 @@ class nestedSort {
   }
 
   areNested(child, parent) {
-    let isChild = false;
-    parent.querySelectorAll('li').forEach(li => {
-      if (li === child) {
-        isChild = true;
-      }
-    });
-    return isChild;
+    return parent && Array.from(parent.querySelectorAll('li')).some(li => li === child)
   }
 
   cursorIsIndentedEnough() {

Original file line number	Diff line number	Diff line change
`@@ -50,7 +50,7 @@ <h1>A data-driven list</h1>`
`50`	`50`	`}`
`51`	`51`	`},`
`52`	`52`	`data: data,`
`53`		`- el: 'draggable2',`
	`53`	`+ el: '#draggable2',`
`54`	`54`	`droppingEdge: 5,`
`55`	`55`	`listClassNames: ['nested-sort']`
`56`	`56`	`});`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "nested-sort",`
`3`		`- "version": "2.3.1",`
	`3`	`+ "version": "3.0.0",`
`4`	`4`	`"author": "Hesam Bahrami (Genzo)",`
`5`	`5`	`"description": "A JavaScript library to create a nested list of elements",`
`6`	`6`	`"main": "dist/nested-sort.cjs.js",`