Merge pull request marceljuenemann#8 from marceljuenemann/development

Release version 1.0.1

Author: marceljuenemann

CHANGELOG.md

@@ -0,0 +1,37 @@
+# 1.0.1 (2014-08-31)
+
+## Bug Fixes
+
+- **jQuery compatibility**: jQuery wraps browser events in event.originalEvent
+
+## Features
+
+- **dnd-disable-if attribute**: allows to dynamically disable the drag and drop functionality
+- **dnd-type and dnd-allowed-types**: allows to restrict an item to specifc lists depending on it's type
+
+## Tested browsers
+
+- Chrome 34 (Ubuntu)
+- Chrome 37 (Mac)
+- Chrome 37 (Win7)
+- Firefox 28 (Win7)
+- Firefox 31 (Ubuntu)
+- Safari 7.0.6 (Mac)
+- Internet Explorer 11 (IE9 & 10 in compatibility mode)
+
+# 1.0.0 (2014-04-11)
+
+Initial release
+
+# Release checklist
+
+- Bump versions
+  - bower.json
+  - package.json
+  - JS files
+- Minify (and test)
+- Test different OS & browsers (npm start)
+- Update README and CHANGELOG
+- Merge to master
+- Tag release
+- Merge to gh-pages

README.md

@@ -5,6 +5,7 @@ Angular directives that allow you to build sortable lists with the native HTML5
 ## Demo
 * [Nested Lists](http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/nested) 
 * [Simple Lists](http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/simple) 
+* [Typed Lists](http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/types) 
 
 ## Why another drag & drop library?
 There are tons of other drag & drop libraries out there, but none of them met my three requirements:
@@ -15,18 +16,17 @@ There are tons of other drag & drop libraries out there, but none of them met my
 
 If this doesn't fit your requirements, check out one of the other awesome drag & drop libraries:
 
-* [angular-ui-tree](https://github.com/JimLiu/angular-ui-tree): Very similar to this library, but does not use the HTML5 API. Therefore you need to write some more markup and to see what you are dragging it will create another DOM node that you have to style.
+* [angular-ui-tree](https://github.com/JimLiu/angular-ui-tree): Very similar to this library, but does not use the HTML5 API. Therefore you need to write some more markup to see what you are dragging and it will create another DOM node that you have to style. However, if you plan to support touch devices this is probably your best choice.
 * [angular-dragdrop](https://github.com/ganarajpr/angular-dragdrop): One of many libraries with the same name. This one uses the HTML5 API, but if you want to build (nested) sortable lists, you're on your own, because it does not calculate the correct element position for you. 
 * [more...](https://www.google.de/search?q=angular+drag+and+drop)
 
 
 ## Supported browsers
 
-Tested in recent versions of
-* Chrome
-* Firefox
-* Safari
-* IE >= 9
+Internet Explorer 8 or lower is *not supported*, but all modern browsers are (see changelog for tested versions).
+
+Note that *touch devices* are *not supported*, because the HTML5 drag & drop standard doesn't cover those.
+
 
 ## Usage
 
@@ -48,6 +48,8 @@ Use the dnd-draggable directive to make your element draggable
     * HTML5 also specifies the `link` option, but this library does not actively support it yet, so use it at your own risk.
 * `dnd-moved` Callback that is invoked when the element was moved. Usually you will remove your element from the original list in this callback, since the directive is not doing that for you automatically.
 * `dnd-copied` Same as dnd-moved, just that it is called when the element was copied instead of moved.
+* `dnd-type` Use this attribute if you have different kinds of items in your application and you want to limit which items can be dropped into which lists. Combine with dnd-allowed-types on the dnd-list(s). This attribute should evaluate to a string, although this restriction is not enforced (at the moment).
+* `dnd-disable-if` You can use this attribute to dynamically disable the draggability of the element. This is useful if you have certain list items that you don't want to be draggable, or if you want to disable drag & drop completely without having two different code branches (e.g. only allow for admins). *Note*: If your element is not draggable, the user is probably able to select text or images inside of it. Since a selection is always draggable, this breaks your UI. You most likely want to disable user selection via CSS (see [user-select](http://stackoverflow.com/a/4407335)).
 
 **CSS classes**
 * `dndDragging` This class will be added to the element while the element is being dragged. It will affect both the element you see while dragging and the source element that stays at it's position. Do not try to hide the source element with this class, because that will abort the drag operation.
@@ -58,6 +60,8 @@ Use the dnd-list attribute to make your list element a dropzone. Usually you wil
 
 **Attributes**
 * `dnd-list` Required attribute. The value has to be the array in which the data of the dropped element should be inserted.
+* `dnd-allowed-types` Optional array of allowed item types. When used, only items that had a matching dnd-type attribute will be dropable.
+* `dnd-disable-if` Optional boolean expresssion. When it evaluates to true, no dropping into the list is possible. Note that this also disables rearranging items inside the list.
 
 **CSS classes**
 * `dndPlaceholder` When an element is dragged over the list, a new placeholder child element will be added. This element is of type li and has the class dndPlaceholder set.

angular-drag-and-drop-lists.js

@@ -1,5 +1,5 @@
 /**
- * angular-drag-and-drop-lists v1.0.0
+ * angular-drag-and-drop-lists v1.0.1
  *
  * Copyright (c) 2014 Marcel Juenemann mail@marcel-junemann.de
  * https://github.com/marceljuenemann/angular-drag-and-drop-lists
@@ -32,6 +32,17 @@ angular.module('dndLists', [])
      *                      is not doing that for you automatically.
      * - dnd-copied         Same as dnd-moved, just that it is called when the element was copied
      *                      instead of moved.
+     * - dnd-type           Use this attribute if you have different kinds of items in your application
+     *                      and you want to limit which items can be dropped into which lists. Combine with
+     *                      dnd-allowed-types on the dnd-list(s). This attribute should evaluate to a string,
+     *                      although this restriction is not enforced (at the moment).
+     * - dnd-disable-if     You can use this attribute to dynamically disable the draggability of the element.
+     *                      This is useful if you have certain list items that you don't want to be draggable,
+     *                      or if you want to disable drag & drop completely without having two different
+     *                      code branches (e.g. only allow for admins). **Note**: If your element is not
+     *                      draggable, the user is probably able to select text or images inside of it. Since
+     *                      a selection is always draggable, this breaks your UI. You most likely want to
+     *                      disable user selection via CSS (see user-select).
      *
      * CSS classes:
      * - dndDragging        This class will be added to the element while the element is being dragged.
@@ -48,11 +59,20 @@ angular.module('dndLists', [])
             // Set the HTML5 draggable attribute on the element
             element.attr("draggable", "true");
 
+            // If the dnd-disable-if attribute is set, we have to watch that
+            if (attr.dndDisableIf) {
+                scope.$watch(attr.dndDisableIf, function(disabled) {
+                    element.attr("draggable", !disabled);
+                });
+            }
+
             /**
              * When the drag operation is started we have to prepare the dataTransfer object,
              * which is the primary way we communicate with the target element
              */
             element.on('dragstart', function(event) {
+                event = event.originalEvent || event;
+
                 // Serialize the data associated with this element. IE only supports the Text drag type
                 event.dataTransfer.setData("Text", angular.toJson(scope.$eval(attr.dndDraggable)));
 
@@ -67,6 +87,10 @@ angular.module('dndLists', [])
                 dndDropEffectWorkaround.dropEffect = "none";
                 dndDragTypeWorkaround.isDragging = true;
 
+                // Save type of item in global state. Usually, this would go into the dataTransfer
+                // typename, but we have to use "Text" there to support IE
+                dndDragTypeWorkaround.dragType = attr.dndType ? scope.$eval(attr.dndType) : undefined;
+
                 event.stopPropagation();
             });
 
@@ -76,6 +100,8 @@ angular.module('dndLists', [])
              * we will invoke the callbacks specified with the dnd-moved or dnd-copied attribute.
              */
             element.on('dragend', function(event) {
+                event = event.originalEvent || event;
+
                 // If the dropEffect is none it means that the drag action was aborted or
                 // that the browser does not support this field. In either case we use
                 // the fallback which was initialized to none
@@ -107,6 +133,8 @@ angular.module('dndLists', [])
              * specified with the dnd-selected attribute.
              */
             element.on('click', function(event) {
+                event = event.originalEvent || event;
+
                 scope.$apply(function() {
                     $parse(attr.dndSelected)(scope);
                 });
@@ -118,7 +146,7 @@ angular.module('dndLists', [])
              * Workaround to make element draggable in IE9
              */
             element.on('selectstart', function() {
-                this.dragDrop();
+                if (this.dragDrop) this.dragDrop();
                 return false;
             });
         };
@@ -136,6 +164,10 @@ angular.module('dndLists', [])
      * Attributes:
      * - dnd-list           Required attribute. The value has to be the array in which the data of the
      *                      dropped element should be inserted.
+     * - dnd-allowed-types  Optional array of allowed item types. When used, only items that had a matching
+     *                      dnd-type attribute will be dropable.
+     * - dnd-disable-if     Optional boolean expresssion. When it evaluates to true, no dropping into
+     *                      the list is possible. Note that this also disables rearranging items inside the list.
      *
      * CSS classes:
      * - dndPlaceholder     When an element is dragged over the list, a new placeholder child element will be
@@ -156,11 +188,24 @@ angular.module('dndLists', [])
              * is being dragged over our list, or over an child element.
              */
             element.on('dragover', function(event) {
+                event = event.originalEvent || event;
+
                 // Disallow drop if it comes from an external source or is not text.
                 // Usually we would use a custom drag type for this, but IE doesn't support that.
                 if (!dndDragTypeWorkaround.isDragging) return true;
                 if (!isDropAllowed(event.dataTransfer.types)) return true;
 
+                // Now check the dnd-allowed-types against the type of the incoming element
+                if (attr.dndAllowedTypes) {
+                    var allowed = scope.$eval(attr.dndAllowedTypes);
+                    if (angular.isArray(allowed) && allowed.indexOf(dndDragTypeWorkaround.dragType) === -1) {
+                        return true;
+                    }
+                }
+
+                // Check whether droping is disabled completely
+                if (attr.dndDisableIf && scope.$eval(attr.dndDisableIf)) return true;
+
                 // First of all, make sure that the placeholder is shown
                 // This is especially important if the list is empty
                 if (placeholderNode.parentNode != listNode) {
@@ -220,6 +265,8 @@ angular.module('dndLists', [])
              * one child element per array element.
              */
             element.on('drop', function(event) {
+                event = event.originalEvent || event;
+
                 // Unserialize the data that was serialized in dragstart. According to the HTML5 specs,
                 // the "Text" drag type will be converted to text/plain, but IE does not do that.
                 var transferredObject = JSON.parse(event.dataTransfer.getData("Text")
@@ -260,6 +307,8 @@ angular.module('dndLists', [])
              * is still dragging over the list. If you know a better way of doing this, please tell me!
              */
             element.on('dragleave', function(event) {
+                event = event.originalEvent || event;
+
                 element.removeClass("dndDragover");
                 $timeout(function() {
                     if (!element.hasClass("dndDragover")) {

angular-drag-and-drop-lists.min.js

@@ -1,7 +1,7 @@
 {
   "name": "angular-drag-and-drop-lists",
   "main": "angular-drag-and-drop-lists.js",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "homepage": "https://github.com/marceljuenemann/angular-drag-and-drop-lists",
   "authors": [
     "Marcel Juenemann <mail@marcel-juenemann.de>"

bower.json

@@ -9,6 +9,10 @@ angular.module("demo", ["ngRoute", "dndLists"])
                 templateUrl: 'nested/nested-frame.html',
                 controller: 'NestedListsDemoController'
             })
+            .when('/types', {
+                templateUrl: 'types/types-frame.html',
+                controller: 'TypesDemoController'
+            })
             .otherwise({redirectTo: '/nested'});
     })
 
@@ -21,6 +25,7 @@ angular.module("demo", ["ngRoute", "dndLists"])
                 scope.options = [
                     {label: "Nested Containers", href: "#/nested"},
                     {label: "Simple Demo", href: "#/simple"},
+                    {label: "Item Types", href: "#/types"},
                     {label: "Github", href: "https://github.com/marceljuenemann/angular-drag-and-drop-lists"}
                 ];