fix(draggable): disable the cursor when dragging disabled events

Closes #307

src/directives/mwlDraggable.js

@@ -27,10 +27,6 @@ angular
  .css('transform', transformValue);
  }
 
- function canDrag() {
- return $parse($attrs.mwlDraggable)($scope);
- }
-
  function getUnitsMoved(x, y, gridDimensions) {
 
  var result = {x: x, y: y};
@@ -50,76 +46,76 @@ angular
  interact($element[0]).draggable({
  snap: snap,
  onstart: function(event) {
- if (canDrag()) {
- angular.element(event.target).addClass('dragging-active');
- event.target.dropData = $parse($attrs.dropData)($scope);
- event.target.style.pointerEvents = 'none';
- if ($attrs.onDragStart) {
- $parse($attrs.onDragStart)($scope);
- $scope.$apply();
- }
+ angular.element(event.target).addClass('dragging-active');
+ event.target.dropData = $parse($attrs.dropData)($scope);
+ event.target.style.pointerEvents = 'none';
+ if ($attrs.onDragStart) {
+ $parse($attrs.onDragStart)($scope);
+ $scope.$apply();
  }
  },
  onmove: function(event) {
 
- if (canDrag()) {
- var elm = angular.element(event.target);
- var x = (parseFloat(elm.attr('data-x')) || 0) + (event.dx || 0);
- var y = (parseFloat(elm.attr('data-y')) || 0) + (event.dy || 0);
+ var elm = angular.element(event.target);
+ var x = (parseFloat(elm.attr('data-x')) || 0) + (event.dx || 0);
+ var y = (parseFloat(elm.attr('data-y')) || 0) + (event.dy || 0);
 
-  switch ($parse($attrs.axis)($scope)) {
-  case 'x':
-  y = 0;
-  break;
+ switch ($parse($attrs.axis)($scope)) {
+ case 'x':
+ y = 0;
+ break;
 
-  case 'y':
-  x = 0;
-  break;
+ case 'y':
+ x = 0;
+ break;
 
-  default:
-  }
+ default:
+ }
 
-  if ($window.getComputedStyle(elm[0]).position === 'static') {
-  elm.css('position', 'relative');
-  }
+ if ($window.getComputedStyle(elm[0]).position === 'static') {
+ elm.css('position', 'relative');
+ }
 
-  translateElement(elm, 'translate(' + x + 'px, ' + y + 'px)')
-  .css('z-index', 50)
-  .attr('data-x', x)
-  .attr('data-y', y);
+ translateElement(elm, 'translate(' + x + 'px, ' + y + 'px)')
+ .css('z-index', 50)
+ .attr('data-x', x)
+ .attr('data-y', y);
 
- if ($attrs.onDrag) {
- $parse($attrs.onDrag)($scope, getUnitsMoved(x, y, snapGridDimensions));
- $scope.$apply();
- }
+ if ($attrs.onDrag) {
+ $parse($attrs.onDrag)($scope, getUnitsMoved(x, y, snapGridDimensions));
+ $scope.$apply();
  }
 
  },
  onend: function(event) {
 
- if (canDrag()) {
- var elm = angular.element(event.target);
- var x = elm.attr('data-x');
- var y = elm.attr('data-y');
-
- event.target.style.pointerEvents = 'auto';
- if ($attrs.onDragEnd) {
- $parse($attrs.onDragEnd)($scope, getUnitsMoved(x, y, snapGridDimensions));
- $scope.$apply();
- }
-
- $timeout(function() {
- translateElement(elm, '')
- .css('z-index', 'auto')
- .removeAttr('data-x')
- .removeAttr('data-y')
- .removeClass('dragging-active');
- });
+ var elm = angular.element(event.target);
+ var x = elm.attr('data-x');
+ var y = elm.attr('data-y');
+
+ event.target.style.pointerEvents = 'auto';
+ if ($attrs.onDragEnd) {
+ $parse($attrs.onDragEnd)($scope, getUnitsMoved(x, y, snapGridDimensions));
+ $scope.$apply();
  }
 
+ $timeout(function() {
+ translateElement(elm, '')
+ .css('z-index', 'auto')
+ .removeAttr('data-x')
+ .removeAttr('data-y')
+ .removeClass('dragging-active');
+ });
+
  }
  });
 
+ $scope.$watch($attrs.mwlDraggable, function(enabled) {
+ interact($element[0]).draggable({
+ enabled: enabled
+ });
+ });
+
  $scope.$on('$destroy', function() {
  interact($element[0]).unset();
  });

test/unit/directives/mwlDraggable.spec.js

@@ -121,4 +121,10 @@ describe('mwlDraggable directive', function() {
  expect(interactInstance.unset).to.have.been.called;
  });
 
+ it('should disable dragging on the event', function() {
+ scope.draggable = false;
+ scope.$apply();
+ expect(interactInstance.draggable).to.have.been.calledWith({enabled: false});
+ });
+
 });