nested-sort - npm Package Compare versions

Comparing version 4.0.0 to 4.1.0

dist/nested-sort.cjs.js

@@ -198,2 +198,3 @@ 'use strict';
    * @param {array|string} listClassNames
+   * @param {array|string} listItemClassNames
    * @param {object} [propertyMap={}]
@@ -207,2 +208,3 @@ */
     listClassNames,
+    listItemClassNames,
     propertyMap = {}
@@ -218,2 +220,3 @@ } = {}) {
     this.listClassNames = this.createListClassNamesArray(listClassNames);
+    this.listItemClassNames = this.createListClassNamesArray(listItemClassNames);
     this.propertyMap = propertyMap;
@@ -293,3 +296,12 @@ this.actions = {
   addListAttributes() {
-    this.getSortableList().classList.add(...this.listClassNames);
+    const list = this.getSortableList();
+
+    list.classList.add(...this.listClassNames);
+    list.querySelectorAll('ul').forEach(ul => {
+      ul.classList.add(...this.listClassNames);
+    });
+
+    list.querySelectorAll('li').forEach(li => {
+      li.classList.add(...this.listItemClassNames);
+    });
   }
@@ -531,3 +543,3 @@
     this.placeholderUl = document.createElement('ul');
-    this.placeholderUl.classList.add(this.classNames.placeholder);
+    this.placeholderUl.classList.add(this.classNames.placeholder, ...this.listClassNames);
   }
@@ -534,0 +546,0 @@

dist/nested-sort.esm.js

@@ -196,2 +196,3 @@ class DataEngine {
    * @param {array|string} listClassNames
+   * @param {array|string} listItemClassNames
    * @param {object} [propertyMap={}]
@@ -205,2 +206,3 @@ */
     listClassNames,
+    listItemClassNames,
     propertyMap = {}
@@ -216,2 +218,3 @@ } = {}) {
     this.listClassNames = this.createListClassNamesArray(listClassNames);
+    this.listItemClassNames = this.createListClassNamesArray(listItemClassNames);
     this.propertyMap = propertyMap;
@@ -291,3 +294,12 @@ this.actions = {
   addListAttributes() {
-    this.getSortableList().classList.add(...this.listClassNames);
+    const list = this.getSortableList();
+
+    list.classList.add(...this.listClassNames);
+    list.querySelectorAll('ul').forEach(ul => {
+      ul.classList.add(...this.listClassNames);
+    });
+
+    list.querySelectorAll('li').forEach(li => {
+      li.classList.add(...this.listItemClassNames);
+    });
   }
@@ -529,3 +541,3 @@
     this.placeholderUl = document.createElement('ul');
-    this.placeholderUl.classList.add(this.classNames.placeholder);
+    this.placeholderUl.classList.add(this.classNames.placeholder, ...this.listClassNames);
   }
@@ -532,0 +544,0 @@

dist/nested-sort.umd.js

@@ -308,2 +308,3 @@ (function (global, factory) {
      * @param {array|string} listClassNames
+     * @param {array|string} listItemClassNames
      * @param {object} [propertyMap={}]
@@ -322,2 +323,3 @@ */
           listClassNames = _ref.listClassNames,
+          listItemClassNames = _ref.listItemClassNames,
           _ref$propertyMap = _ref.propertyMap,
@@ -336,2 +338,3 @@ propertyMap = _ref$propertyMap === void 0 ? {} : _ref$propertyMap;
       this.listClassNames = this.createListClassNamesArray(listClassNames);
+      this.listItemClassNames = this.createListClassNamesArray(listItemClassNames);
       this.propertyMap = propertyMap;
@@ -414,5 +417,19 @@ this.actions = {
       value: function addListAttributes() {
-        var _this$getSortableList;
+        var _list$classList,
+            _this = this;
 
-        (_this$getSortableList = this.getSortableList().classList).add.apply(_this$getSortableList, _toConsumableArray(this.listClassNames));
+        var list = this.getSortableList();
+
+        (_list$classList = list.classList).add.apply(_list$classList, _toConsumableArray(this.listClassNames));
+
+        list.querySelectorAll('ul').forEach(function (ul) {
+          var _ul$classList;
+
+          (_ul$classList = ul.classList).add.apply(_ul$classList, _toConsumableArray(_this.listClassNames));
+        });
+        list.querySelectorAll('li').forEach(function (li) {
+          var _li$classList;
+
+          (_li$classList = li.classList).add.apply(_li$classList, _toConsumableArray(_this.listItemClassNames));
+        });
       }
@@ -422,3 +439,3 @@ }, {
       value: function initDragAndDrop() {
-        var _this = this;
+        var _this2 = this;
 
@@ -429,10 +446,10 @@ document.addEventListener('dragover', this.dragListener.bind(this), false);
           el.setAttribute('draggable', 'true');
-          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);
+          el.addEventListener('dragstart', _this2.onDragStart.bind(_this2), false);
+          el.addEventListener('dragenter', _this2.onDragEnter.bind(_this2), false);
+          el.addEventListener('dragover', _this2.onDragOver.bind(_this2), false);
+          el.addEventListener('dragleave', _this2.onDragLeave.bind(_this2), false);
+          el.addEventListener('dragend', _this2.onDragEnd.bind(_this2), false);
+          el.addEventListener('drop', _this2.onDrop.bind(_this2), false);
 
-          _this.addListItemStyles(el);
+          _this2.addListItemStyles(el);
         });
@@ -604,3 +621,3 @@ }
       value: function managePlaceholderLists(e) {
-        var _this2 = this;
+        var _this3 = this;
 
@@ -611,5 +628,5 @@ var actions = this.analysePlaceHolderSituation(e);
             case 'add':
-              _this2.cleanupPlaceholderLists();
+              _this3.cleanupPlaceholderLists();
 
-              _this2.addPlaceholderList();
+              _this3.addPlaceholderList();
 
@@ -619,3 +636,3 @@ break;
             case 'cleanup':
-              _this2.cleanupPlaceholderLists();
+              _this3.cleanupPlaceholderLists();
 
@@ -676,3 +693,3 @@ break;
       value: function cleanupPlaceholderLists() {
-        var _this3 = this;
+        var _this4 = this;
 
@@ -682,4 +699,4 @@ this.getSortableList().querySelectorAll('ul').forEach(function (ul) {
             ul.remove();
-          } else if (ul.classList.contains(_this3.classNames.placeholder)) {
-            ul.classList.remove(_this3.classNames.placeholder);
+          } else if (ul.classList.contains(_this4.classNames.placeholder)) {
+            ul.classList.remove(_this4.classNames.placeholder);
             ul.style.minHeight = 'auto';
@@ -693,4 +710,7 @@ ul.dataset.id = ul.parentNode.dataset.id;
       value: function initPlaceholderList() {
+        var _this$placeholderUl$c;
+
         this.placeholderUl = document.createElement('ul');
-        this.placeholderUl.classList.add(this.classNames.placeholder);
+
+        (_this$placeholderUl$c = this.placeholderUl.classList).add.apply(_this$placeholderUl$c, [this.classNames.placeholder].concat(_toConsumableArray(this.listClassNames)));
       }
@@ -697,0 +717,0 @@ }, {

package.json

 {
   "name": "nested-sort",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "author": "Hesam Bahrami (Genzo)",
@@ -5,0 +5,0 @@ "description": "A JavaScript library to create a nested list of elements",

README.md

 # Nested Sort
 
-A JavaScript library to create a nested list of elements
+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)
+
+## Docs
+
+[https://gilgaz.com/demo/nested-sort](https://gilgaz.com/demo/nested-sort)
+
 ## Download
@@ -9,3 +15,2 @@
 
-
 ## Installation
@@ -15,7 +20,14 @@
 ```shell
-$ npm i nested-sort
+$ npm install nested-sort
 ```
 
-## Developer environment requirements
+Using yarn:
+```shell
+$ yarn add nested-sort
+```
 
+## Contribution
+
+### Developer environment requirements
+
 To run this project, you will need:
@@ -26,3 +38,3 @@
 
-## Running tests
+### Running tests
 
@@ -36,3 +48,3 @@ ```sh
 
-## Dev mode
+### Dev mode
 
@@ -47,8 +59,2 @@ When developing you can run:
 
-### Previewing umd build in the browser
-
-If your package works in the browser, you can open `dev/index.html` to try it out.
-
-## Demo
-
-There are some samples in the `dev` folder. In order to see them in action, first run `yarn watch` and then navigate to: `http://127.0.0.1:5000/dev/`
+You can navigate to http://127.0.0.1:5000/dev/ in order to see the samples.

No alert changes

Improved metrics

Total package byte prevSize

67279

increased by24.29%

Number of package files

7

increased by16.67%

Lines of code

1589

increased by5.23%

Number of lines in readme file

56

increased by12%

No dependency changes