Following comments

lemonde · Aug 19, 2015 · c08a9c6 · c08a9c6
1 parent dfd3172
commit c08a9c6
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 39 deletions.
diff --git a/README.md b/README.md
@@ -7,14 +7,20 @@ Drag and drop directives for Angular using native HTML5 API.
 
 
 ## introduction
-This module defines 2 directives :
+
+This module is a simple Angular wrapping of the native HTML5 drag & drop API + a few common utilities.
+Callbacks are invoked in Angular context.
+
+It defines 2 directives :
 * "draggable" for a draggable element
 * "drop" for a drop zone
-It handles data type control.
+It handles data type control, adding a CSS class on drag and on hover and takes care of one HTML5 quirk.
 
-Note HTML5 drag&drop is not trivial. Recommended reads :
-* http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html
-* https://html.spec.whatwg.org/multipage/interaction.html#dnd
+**CAUTION** The HTML5 drag&drop API is NOT trivial.
+* If you know it and want to use it, proceed with this package
+* If you don't know it, consider using a 3rd-party re-implementation : http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html
+* Reference doc for drag&drop API :
+ * https://html.spec.whatwg.org/multipage/interaction.html#dnd
 
 
 ## Install
@@ -31,9 +37,11 @@ bower install angular-draganddrop
 npm install angular-draganddrop
 ```
 
+
 ## Usage
 
-HTML :
+1. read the warning in introduction (really)
+2. HTML :
 
 ```html
 <!-- Load files. -->
@@ -51,7 +59,7 @@ HTML :
 </div>
 ```
 
-JavaScript :
+3. JavaScript :
 
 ```js
 angular.module('controllers.dragDrop', ['draganddrop'])
@@ -105,7 +113,7 @@ Parameters :
 - "drag-leave" (optional) an Angular expression to be evaluated on drag leave ("dragleave" event).
 - "drop" (optional) an Angular expression to be evaluated on drag over ("drop" event).
 
-Handlers are : `(scope, { $data: data, $event: event })`
+Handlers are called with : `(data, event)`
 
 
 ## Browsers support

diff --git a/angular-draganddrop.js b/angular-draganddrop.js
@@ -4,7 +4,8 @@ angular
 .directive('drop', ['$parse', dropDirective]);
 
 
-// for developers
+// log hooks for developers
+// @see https://github.com/lemonde/angular-draganddrop/wiki#possible-implementations-of-debug-hooks-
 function debugDraggable(scope) {}
 function debugDroppable(scope) {}
 
@@ -29,6 +30,8 @@ function debugDroppable(scope) {}
  */
 
 function draggableDirective($parse) {
+  'use strict';
+
   return {
     restrict: 'A',
     link: function (scope, element, attrs) {
@@ -145,6 +148,8 @@ function draggableDirective($parse) {
  */
 
 function dropDirective($parse) {
+  'use strict';
+
   return {
     restrict: 'A',
     link: function (scope, element, attrs) {
@@ -183,29 +188,26 @@ function dropDirective($parse) {
           return true;
         }
 
-        // Set up drop effect to link.
-        event.dataTransfer.dropEffect = dropEffect || event.dataTransfer.dropEffect;
-
         // Prevent default to accept drag and drop.
         event.preventDefault();
 
+        // Set up drop effect to link.
+        event.dataTransfer.dropEffect = dropEffect || event.dataTransfer.dropEffect;
+
         if (dragOverClass) element.addClass(dragOverClass);
 
+        // throttling to avoid loading CPU
         var now = new Date().getTime();
         if (now - throttledDragover < 200) {
           debugDroppable(scope, 'dragover throttled');
           return;
         }
         throttledDragover = now;
 
-        if (! attrs.dragOver) {
-          debugDroppable(scope, 'no dragover callback');
-          return;
-        }
-
-        var data = getData(event);
+        if (! attrs.dragOver) return;
 
         // Call custom handler
+        var data = getData(event);
         scope.$apply(function () {
           debugDroppable(scope, 'dragover callback !');
           dragOverHandler(scope, { $data: data, $event: event });
@@ -221,11 +223,12 @@ function dropDirective($parse) {
         // Prevent default to accept drag and drop.
         event.preventDefault();
 
-        if (! attrs.dragEnter) return;
+        if (dragOverClass) element.addClass(dragOverClass);
 
-        var data = getData(event);
+        if (! attrs.dragEnter) return;
 
         // Call custom handler
+        var data = getData(event);
         scope.$apply(function () {
           dragEnterHandler(scope, { $data: data, $event: event });
         });
@@ -240,13 +243,12 @@ function dropDirective($parse) {
         // Prevent default to accept drag and drop.
         event.preventDefault();
 
-        removeDragOverClass();
+        element.removeClass(dragOverClass);
 
         if (! attrs.dragLeave) return;
 
-        var data = getData(event);
-
         // Call custom handler
+        var data = getData(event);
         scope.$apply(function () {
           dragLeaveHandler(scope, { $data: data, $event: event });
         });
@@ -255,25 +257,16 @@ function dropDirective($parse) {
       function dropListener(event) {
         debugDroppable(scope, 'drop');
 
-        var data = getData(event);
+        // Prevent default navigator behaviour.
+        event.preventDefault();
 
-        removeDragOverClass();
+        element.removeClass(dragOverClass);
 
         // Call custom handler
+        var data = getData(event);
         scope.$apply(function () {
           dropHandler(scope, { $data: data, $event: event });
         });
-
-        // Prevent default navigator behaviour.
-        event.preventDefault();
-      }
-
-      /**
-       * Remove the drag over class.
-       */
-
-      function removeDragOverClass() {
-        element.removeClass(dragOverClass);
       }
 
       /**

diff --git a/test/drop.js b/test/drop.js
@@ -19,9 +19,9 @@ describe('Drop directive', function () {
     var dragDataStore = {
       // pre-filled with test data
       'json/image': {foo: 'bar'},
-      //'json': {foo: 'bar'},
+      'json': {foo: 'bar'},
       'text/uri-list': 'http://dragdrop.com',
-      //'text': 'http://dragdrop.com'*/
+      'text': 'http://dragdrop.com'
     };
 
     // "dragover" event.
@@ -314,7 +314,13 @@ describe('Drop directive', function () {
   });
 
   describe('throttling', function() {
-    it('should limit the calls to the drag-over callback');
+    // https://github.com/lemonde/angular-draganddrop/issues/2
+    it.skip('should limit the calls to the drag-over callback');
+  });
+
+  describe('automatic handling of HTML5 API quirks', function() {
+    // https://github.com/lemonde/angular-draganddrop/issues/2
+    it.skip('should call preventDefault() on selected events');
   });
 
 });