Merge gilgaz/release/4.2.0 into master #20

Hesam Bahrami · web-flow · commit adb8ff0ace07 · 2020-08-10T00:07:56.000+01:00
Release/4.2.0
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -0,0 +1,27 @@
+on:
+  pull_request:
+  push:
+    branches:
+      - master
+      - develop
+
+jobs:
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+
+    steps:
+      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+      - uses: actions/checkout@v2
+
+      - name: Use Node.js v14
+        uses: actions/setup-node@v1
+        with:
+          node-version: '14'
+          check-latest: true
+
+      - name: Install
+        run: yarn install
+
+      - name: Test
+        run: yarn test
diff --git a/.huskyrc b/.huskyrc
@@ -0,0 +1,6 @@
+{
+  "hooks": {
+    "pre-commit": "yarn test",
+    "pre-push": "yarn test"
+  }
+}
diff --git a/README.md b/README.md
@@ -1,5 +1,7 @@
 # Nested Sort
 
+[![npm version](https://badge.fury.io/js/nested-sort.svg)](https://badge.fury.io/js/nested-sort)
+
 Nested Sort is a vanilla JavaScript library, without any dependencies, which helps you to sort a nested list of items via drag and drop. Unfortunately, it does not support touch screens yet.
 
 ![](demo.gif)
diff --git a/demo.gif b/demo.gif
diff --git a/dev/index.html b/dev/index.html
@@ -17,6 +17,7 @@ <h1>Samples</h1>
     <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="ordered-data-driven-list.html" target="_blank">Ordered Data-driven List</a></li>
     <li><a href="mapped-data-driven-list.html" target="_blank">Mapped Data-driven List</a></li>
     <li><a href="styling-data-driven-list.html" target="_blank">Styling</a></li>
   </ol>
diff --git a/dev/mapped-data-driven-list.html b/dev/mapped-data-driven-list.html
@@ -23,17 +23,15 @@ <h1>A mapped data-driven list</h1>
 <script>
   (function() {
     const data = [
-      { item_id: 1, item_title: 'One' },
-      { item_id: 11, item_title: 'One-One', item_parent: 1 },
-      { item_id: 2, item_title: 'Two' },
-      { item_id: 3, item_title: 'Three' },
-      { item_id: 1121, item_title: 'One-One-Two-One', item_parent: 112 },
-      { item_id: 1122, item_title: 'One-One-Two-Two', item_parent: 112 },
-      { item_id: 1123, item_title: 'One-One-Two-Three', item_parent: 112 },
-      { item_id: 12, item_title: 'One-Two', item_parent: 1 },
-      { item_id: 111, item_title: 'One-One-One', item_parent: 11 },
-      { item_id: 112, item_title: 'One-One-Two', item_parent: 11 },
-      { item_id: 113, item_title: 'One-One-Three', item_parent: 11 },
+      { item_id: 1, item_title: 'One', position: 5 },
+      { item_id: 11, item_title: 'One-One', item_parent: 1, position: 1 },
+      { item_id: 2, item_title: 'Two', position: 1 },
+      { item_id: 3, item_title: 'Three', position: 2 },
+      { item_id: 1121, item_title: 'One-One-Two-One', item_parent: 112, position: 2 },
+      { item_id: 1123, item_title: 'One-One-Two-Three', item_parent: 112, position: 4 },
+      { item_id: 12, item_title: 'One-Two', item_parent: 1, position: 2 },
+      { item_id: 111, item_title: 'One-One-One', item_parent: 11, position: 1 },
+      { item_id: 112, item_title: 'One-One-Two', item_parent: 11, position: 2 },
     ]
 
     new NestedSort({
@@ -47,6 +45,7 @@ <h1>A mapped data-driven list</h1>
         id: 'item_id',
         parent: 'item_parent',
         text: 'item_title',
+        order: 'position',
       },
       el: '#draggable',
       droppingEdge: 5,
diff --git a/dev/ordered-data-driven-list.html b/dev/ordered-data-driven-list.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>Nested Sort Ordered Data-Driven List 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>An ordered data-driven 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>
+
+  <div id="draggable"></div>
+</div>
+
+<!-- Scripts -->
+<script src="../dist/nested-sort.umd.js"></script>
+<script>
+  (function() {
+    const data = [
+      { id: 1, text: 'One', order: 2 },
+      { id: 11, text: 'One-One', parent: 1, order: 3 },
+      { id: 2, text: 'Two', order: 1 },
+      { id: 3, text: 'Three', order: 3 },
+      { id: 4, text: 'Four', order: 5 },
+      { id: 5, text: 'Five', order: 4 },
+      { id: 12, text: 'One-Two', parent: 1, order: 1 },
+      { id: 111, text: 'One-One-One', parent: 11, order: 3 },
+      { id: 112, text: 'One-One-Two', parent: 11, order: 1 },
+      { id: 113, text: 'One-One-Three', parent: 11, order: 2 },
+    ]
+
+    new NestedSort({
+      actions: {
+        onDrop: function (data) {
+          console.log(data)
+        }
+      },
+      data: data,
+      el: '#draggable',
+      droppingEdge: 5,
+      listClassNames: ['nested-sort']
+    });
+  })();
+</script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nested-sort",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "author": "Hesam Bahrami (Genzo)",
   "description": "A JavaScript library to create a nested list of elements",
   "main": "dist/nested-sort.cjs.js",
@@ -17,6 +17,7 @@
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "24.9.0",
     "concurrently": "4.1.2",
+    "husky": "^4.2.5",
     "jest": "24.9.0",
     "rollup": "1.32.1",
     "rollup-plugin-babel": "4.4.0",
diff --git a/src/data-engine.js b/src/data-engine.js
@@ -38,14 +38,39 @@ class DataEngine {
     return prop
   }
 
+  isTopLevelItem(item) {
+    return !item.parent
+  }
+
   /**
    * @returns {object[]}
    */
   sortListItems() {
-    this.sortedData = [...this.data].sort((item1, item2) => {
-      if (!item1.parent && item2.parent) return -1
-      return (!item2.parent && item1.parent) ? 1 : 0;
-    });
+    const items = [...this.data]
+
+    const topLevelItems = items
+      .filter(a => this.isTopLevelItem(a))
+      .sort((a, b) => a.order && b.order ? a.order - b.order : 0)
+
+    const childItems = items
+      .filter(a => !this.isTopLevelItem(a))
+      .reduce((groups, item) => {
+        if (groups.hasOwnProperty(item.parent)) {
+          groups[item.parent].push(item)
+        } else {
+          groups[item.parent] = [item]
+        }
+        return groups
+      }, {})
+
+    Object.keys(childItems).forEach(parentId => {
+      childItems[parentId].sort((a, b) => a.order && b.order ? a.order - b.order : 0)
+    })
+
+    this.sortedData = [
+      ...topLevelItems,
+      ...Object.values(childItems).flat()
+    ]
 
     return this.sortedData
   }
@@ -166,10 +191,12 @@ class DataEngine {
     return Array.from(ul.querySelectorAll('li')).map(li => {
       const parentListItem = li.parentNode
       const parent = parentListItem.dataset.id
+      const order = Array.from(parentListItem.children).findIndex(item => item === li) + 1
 
       return {
         [this.getItemPropProxyName('id')]: li.dataset.id,
         [this.getItemPropProxyName('parent')]: parent,
+        [this.getItemPropProxyName('order')]: order,
       }
     })
   }
diff --git a/src/data-engine.test.js b/src/data-engine.test.js
diff --git a/yarn.lock b/yarn.lock
