refactor: Drag start function to remove dependence on the scope() method of the node's element + add tests

Author: Niels Dequeker

source/directives/uiTreeNode.js

@@ -65,29 +65,29 @@
             });
 
             dragStart = function (e) {
-              if (!hasTouch && (e.button == 2 || e.which == 3)) {
-                // disable right click
+              // disable right click
+              if (!hasTouch && (e.button === 2 || e.which === 3)) {
                 return;
               }
-              if (e.uiTreeDragging || (e.originalEvent && e.originalEvent.uiTreeDragging)) { // event has already fired in other scope.
+
+              // event has already fired in other scope
+              if (e.uiTreeDragging || (e.originalEvent && e.originalEvent.uiTreeDragging)) {
                 return;
               }
 
               // the element which is clicked.
               var eventElm = angular.element(e.target),
-                eventScope = eventElm.scope(),
                 cloneElm = element.clone(),
                 eventElmTagName, tagName,
-                eventObj, tdElm, hStyle;
-              if (!eventScope || !eventScope.$type) {
-                return;
-              }
-              if (eventScope.$type != 'uiTreeNode'
-                && eventScope.$type != 'uiTreeHandle') { // Check if it is a node or a handle
+                eventObj, tdElm, hStyle,
+                isTreeNode = UiTreeHelper.elementIsTreeNode(eventElm),
+                isTreeNodeHandle = UiTreeHelper.elementIsTreeNodeHandle(eventElm);
+
+              if (!isTreeNode && !isTreeNodeHandle) {
                 return;
               }
-              if (eventScope.$type == 'uiTreeNode'
-                && eventScope.$handleScope) { // If the node has a handle, then it should be clicked by the handle
+
+              if (isTreeNode && UiTreeHelper.elementContainsTreeNodeHandler(eventElm)) {
                 return;
               }
 

source/services/helper.js

@@ -315,6 +315,18 @@
             }
 
             pos.dirAx = newAx;
+          },
+
+          elementIsTreeNode: function (element) {
+            return typeof element.attr('ui-tree-node') !== 'undefined';
+          },
+
+          elementIsTreeNodeHandle: function (element) {
+            return typeof element.attr('ui-tree-handle') !== 'undefined';
+          },
+
+          elementContainsTreeNodeHandler: function (element) {
+            return element[0].querySelectorAll('[ui-tree-handle]').length >= 1;
           }
         };
       }

source/services/helper.spec.js

@@ -0,0 +1,43 @@
+(function () {
+  'use strict';
+
+  describe('the UiTreeHelper service', function () {
+    var UiTreeHelper;
+
+    beforeEach(module('ui.tree'));
+    beforeEach(inject(function ($injector) {
+      UiTreeHelper = $injector.get('UiTreeHelper');
+    }));
+
+    describe('the check if an element is a tree node', function () {
+      it('should work for elements using the node directives', function () {
+        var nodeElement = angular.element('<div ui-tree-node></div>'),
+            notANodeElement = angular.element('<div></div>');
+
+        expect(UiTreeHelper.elementIsTreeNode(nodeElement)).toEqual(true);
+        expect(UiTreeHelper.elementIsTreeNode(notANodeElement)).toEqual(false);
+      });
+    });
+
+    describe('the check if an element is a tree node', function () {
+      it('should work for elements using the node directives', function () {
+        var handleElement = angular.element('<div ui-tree-handle=""></div>'),
+          notAHandleElement = angular.element('<div></div>');
+
+        expect(UiTreeHelper.elementIsTreeNodeHandle(handleElement)).toEqual(true);
+        expect(UiTreeHelper.elementIsTreeNodeHandle(notAHandleElement)).toEqual(false);
+      });
+    });
+
+    describe('the check if an element contains a node handler', function () {
+      it('should work for elements using the node directives', function () {
+        var withHandle = angular.element('<div ui-tree-node><div ui-tree-handle></div></div>'),
+          withoutHandle = angular.element('<div ui-tree-node></div>');
+
+        expect(UiTreeHelper.elementContainsTreeNodeHandler(withHandle)).toEqual(true);
+        expect(UiTreeHelper.elementContainsTreeNodeHandler(withoutHandle)).toEqual(false);
+      });
+    });
+  });
+
+})();