ng-drag-to-reorder - npm Package Compare versions

Comparing version 0.1.5 to 0.1.6

bower.json

 {
   "name": "ng-drag-to-reorder",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Lightweight AngularJS drag and drop functionality to reorder lists without any dependencies other than Angular.",
@@ -28,2 +28,1 @@ "main": "./ngDragToReorder.js",
 }
-

ngDragToReorder.js

@@ -6,28 +6,23 @@ (function () {
     .factory('ngDragToReorder', function () {
-
-      var _list = [];
-
       return {
-        isSupported: draggable,
-        setList: setList,
-        getList: getList
+        isSupported:  function (){
+          var div = document.createElement('div');
+          return ('draggable' in div) || ('ondragstart' in div && 'ondrop' in div);
+        }
       };
-
-      function setList(array) {
-        if (array && array.length) _list = array;
+    })
+    .directive('dragToReorder', function () {
+      return {
+        restrict: 'A',
+        bindToController: true,
+        scope: {
+          dragToReorder: '='
+        },
+        controller: function () {}
       }
-
-      function getList() {
-        return _list;
-      }
-
-      function draggable() {
-        var div = document.createElement('div');
-        return ('draggable' in div) || ('ondragstart' in div && 'ondrop' in div);
-      }
-
     })
-    .directive('dragToReorder', ['ngDragToReorder', '$parse', function (ngDragToReorder, $parse) {
+    .directive('dtrDraggable', ['ngDragToReorder', function (ngDragToReorder) {
       return {
         restrict: 'A',
+        require: '^^dragToReorder',
         link: function (scope, element, attrs, ctrl) {
@@ -37,12 +32,13 @@
 
-          ngDragToReorder.setList($parse(attrs.dragToReorder)((scope)));
-
           var el = element[0], list, stringIdx, int, item,
             newIdx, startIndex, target, offsetY, dragging = 'dtr-dragging', over = 'dtr-over',
             droppingAbove = 'dtr-dropping-above', droppingBelow = 'dtr-dropping-below', transition = 'dtr-transition',
-            delay = 1000, loaded = false, above = [],  below = [], i, j;
+            eventName = 'dropped', delay = 1000, loaded = false, above = [], below = [], i, j;
 
-          //console.log('list:', list);
 
-          if (attrs.hasOwnProperty('dtrInit')) {
+          if (attrs.dtrEvent) {
+            eventName = attrs.dtrEvent || 'dropped';
+          }
+
+          if (attrs.dtrInit) {
             attrs.$observe('dtrInit', function (val) {
@@ -60,3 +56,3 @@ if (val && val !== 'false') {
 
-          if (attrs.hasOwnProperty('dtrTransitionTimeout')) {
+          if (attrs.dtrTransitionTimeout) {
             int = parseInt(attrs.dtrTransitionTimeout, 10);
@@ -66,3 +62,2 @@ delay = int ? int : 1000;
 
-
           function addListeners() {
@@ -88,3 +83,2 @@ el.draggable = true;
 
-
           function drop(e) {
@@ -109,10 +103,8 @@ e.preventDefault();
 
-            list = ngDragToReorder.getList();
+            list = ctrl.dragToReorder;
             item = list.splice(startIndex, 1)[0];
             list.splice(newIdx, 0, item);
 
-            ngDragToReorder.setList(list);
-
             scope.$apply(function () {
-              scope.$emit('dragToReorder_drop', {
+              scope.$emit('dragToReorder.' + eventName, {
                 item: item,
@@ -138,11 +130,6 @@ newIndex: newIdx,
             }
-
           }
 
-
           function dragStart(e) {
             e.dataTransfer.effectAllowed = 'move';
-            // **IMPORTANT** In order for this to work in IE, 'text' MUST
-            // not 'Text', ot 'text/plain' etc...
-            // Also the value (idx) needs to be a string
             stringIdx = scope.$index.toString();
@@ -165,3 +152,2 @@ e.dataTransfer.setData('text', stringIdx);
 
-
           function dragOver(e) {
@@ -202,4 +188,3 @@ e.preventDefault();
 
-
-          function cleanupClasses () {
+          function cleanupClasses() {
             above = document.querySelectorAll('.' + droppingAbove);
@@ -213,4 +198,4 @@ below = document.querySelectorAll('.' + droppingBelow);
             if (below.length) {
-              for (i = 0; i < below.length; i++) {
-                below[i].classList.remove(droppingBelow);
+              for (j = 0; j < below.length; j++) {
+                below[j].classList.remove(droppingBelow);
               }
@@ -220,3 +205,2 @@ }
 
-
         }
@@ -223,0 +207,0 @@ };

package.json

 {
   "name": "ng-drag-to-reorder",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Lightweight AngularJS drag and drop functionality to reorder lists without any dependencies other than Angular.",
@@ -5,0 +5,0 @@ "main": "ngDragToReorder.js",

README.md

@@ -7,3 +7,3 @@ # ng-drag-to-reorder
 
-- [`Simple List`](http://htmlpreview.github.io/?https://github.com/mhthompson86/ng-drag-to-reorder/blob/master/demo/index.html)
+- [`Such Demo`](http://htmlpreview.github.io/?https://github.com/mhthompson86/ng-drag-to-reorder/blob/master/demo/index.html)
 
@@ -30,6 +30,8 @@ ## Install:
 
-- For the most basic usage just add the `drag-to-reorder` attribute to your list items and pass it the list.
+- For the most basic usage just add the `drag-to-reorder` attribute to the parent element and pass it the list you want it to track.
+Then on the draggable elements, add the `dtr-draggable` attribute. And that's it!
+
 ```html
-<ul>
-  <li ng-repeat="avenger in $ctrl.avengers" drag-to-reorder="$ctrl.avengers">
+<ul drag-to-reorder="$ctrl.avengers">
+  <li ng-repeat="avenger in $ctrl.avengers" dtr-draggable>
     <span ng-bind="avenger.rank"></span>
@@ -41,6 +43,9 @@ <span ng-bind="avenger.name"></span>
 
-- When you drop an item, the `dragToReorder_drop` event is broadcasted and will contain the relevant data, allowing your controllers to know when the list has been reordered and react to the changes.
+- When you drop an item, the `dragToReorder.dropped` event is broadcasted and will contain the relevant data,
+allowing your controllers to know when the list has been reordered and react to the changes. 
+(See #4`dtrEvent` in **Options** below on how you can customize the event name.)
 - In your controller, you can listen for the event with something similar to below:
+
 ```js
-$scope.$on('dragToReorder_drop', function (evt, data) {   
+$scope.$on('dragToReorder.dropped', function (evt, data) {   
     
@@ -64,3 +69,3 @@ // The dragged item
 When you start dragging the element, different classes are added to the element being dragged as well as the elements you are dragging over. 
-(All classes are added to the elements containing the `drag-to-reorder` attribute)
+(All classes are added to the elements containing the `dtr-draggable` attribute)
 
@@ -79,3 +84,4 @@
 
-**E.g.**  If you have Elements 1-10.  And you begin dragging Element 1.  Element 1 will have the `dtr-dragging` and `dtr-transition` classes added to it.
+**E.g. - [`CSS Classes Demo`](http://htmlpreview.github.io/?https://github.com/mhthompson86/ng-drag-to-reorder/blob/master/demo/index.html)**
+If you have Elements 1-10.  And you begin dragging Element 1.  Element 1 will have the `dtr-dragging` and `dtr-transition` classes added to it.
 Let's say you drag Element 1 and are hovering over Element 5. Element 5 will have the `dtr-over` class and either the `dtr-dropping-above` class if the mouse is above the
@@ -88,2 +94,3 @@ halfway point (offsetY) or `dtr-dropping-below` if below it.  If above it, the previous sibling above (Element 4) will have the `dtr-dropping-below` class added to it.
 
+
 ## Options:
@@ -95,5 +102,5 @@
 <!-- In your template (example) -->
-<ul>
+<ul drag-to-reorder="$ctrl.avengers">
   <li ng-repeat="avenger in $ctrl.avengers" 
-    drag-to-reorder="$ctrl.avengers" 
+    dtr-draggable
     dtr-init="{{$ctrl.draggable}}">
@@ -122,5 +129,5 @@ <span ng-bind="avenger.rank"></span>
 <!-- In your template (example) -->
-<ul>
+<ul drag-to-reorder="$ctrl.avengers">
   <li ng-repeat="avenger in $ctrl.avengers" 
-    drag-to-reorder="$ctrl.avengers"  
+    dtr-draggable
     dtr-transition-timeout="5000">
@@ -135,3 +142,3 @@ <span ng-bind="avenger.rank"></span>
 3. You can import the **ngDragToReorder** service into your controller and check to see if drag and drop functionality is supported by your 
-browser. The `drag-to-reorder` directive uses this service to prevent itself from wiring up event listeners if the browser doesn't support 
+browser. The `dtr-draggable` directive uses this service to prevent itself from wiring up event listeners if the browser doesn't support 
 it. You can use the same service if you want to show or hide any buttons or other UI based on browser support.  
@@ -141,5 +148,5 @@
 <!-- In your template (example) -->
-<ul>
+<ul drag-to-reorder="$ctrl.avengers">
   <li ng-repeat="avenger in $ctrl.avengers" 
-   drag-to-reorder="$ctrl.avengers" 
+    dtr-draggable
     dtr-init="{{$ctrl.draggable}}">
@@ -166,1 +173,34 @@ <span ng-bind="avenger.rank"></span>
 ```
+
+4. `dtr-event` allows you to customize the name of the event broadcasted when an element is dropped.
+This is particularly helpful if you have more than one list and/or do not want multiple controllers reacting to the same event.
+The name passed in will replace the 'dropped' in 'dragToReorder.dropped'.  See below for example.
+
+```html
+<!-- In your template (example) -->
+<ul drag-to-reorder="$ctrl.avengers">
+  <li ng-repeat="avenger in $ctrl.avengers" 
+    dtr-draggable
+    dtr-event="suchEvent">
+    <span ng-bind="avenger.rank"></span>
+    <span ng-bind="avenger.name"></span>
+  </li>
+</ul>
+<ul drag-to-reorder="$ctrl.list">
+  <li ng-repeat="item in $ctrl.list" 
+    dtr-draggable
+    dtr-event="myListChanged">
+    {{item}}
+  </li>
+</ul>
+```
+
+```js
+$scope.$on('dragToReorder.suchEvent', function (evt, data) {   
+    //do something only when suchEvent is fired
+});
+
+$scope.$on('dragToReorder.myListChanged', function (evt, data) {   
+    //do something only when myListChanged is fired
+});
+```

No alert changes

Improved metrics

Total package byte prevSize

61202

increased by39.05%

Number of lines in readme file

196

increased by25.64%

Worsened metrics

Number of package files

12

decreased by-14.29%

Lines of code

205

decreased by-0.97%

No dependency changes