fix(resizeable): disable the cursor when resizing disabled events

Closes #307
mattlewis92 · Mar 22, 2016 · ad9beb7 · ad9beb7
1 parent 834e1ee
commit ad9beb7
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 33 deletions.
diff --git a/src/directives/mwlResizable.js b/src/directives/mwlResizable.js
@@ -24,10 +24,6 @@ angular
     var originalDimensionsStyle = {};
     var resizeEdge;
 
-    function canResize() {
-      return $parse($attrs.mwlResizable)($scope);
-    }
-
     function getUnitsResized(edge, elm, gridDimensions) {
       var unitsResized = {};
       unitsResized.edge = edge;
@@ -52,19 +48,17 @@ angular
       snap: snap,
       onstart: function(event) {
 
-        if (canResize()) {
-          resizeEdge = 'end';
-          var elm = angular.element(event.target);
-          originalDimensions.height = elm[0].offsetHeight;
-          originalDimensions.width = elm[0].offsetWidth;
-          originalDimensionsStyle.height = elm.css('height');
-          originalDimensionsStyle.width = elm.css('width');
-        }
+        resizeEdge = 'end';
+        var elm = angular.element(event.target);
+        originalDimensions.height = elm[0].offsetHeight;
+        originalDimensions.width = elm[0].offsetWidth;
+        originalDimensionsStyle.height = elm.css('height');
+        originalDimensionsStyle.width = elm.css('width');
 
       },
       onmove: function(event) {
 
-        if (canResize() && event.rect.width > 0 && event.rect.height > 0) {
+        if (event.rect.width > 0 && event.rect.height > 0) {
           var elm = angular.element(event.target);
           var x = parseFloat(elm.data('x') || 0);
           var y = parseFloat(elm.data('y') || 0);
@@ -97,31 +91,34 @@ angular
       },
       onend: function(event) {
 
-        if (canResize()) {
-
-          var elm = angular.element(event.target);
-          var unitsResized = getUnitsResized(resizeEdge, elm, snapGridDimensions);
-
-          $timeout(function() {
-            elm
-              .data('x', null)
-              .data('y', null)
-              .css({
-                transform: '',
-                width: originalDimensionsStyle.width,
-                height: originalDimensionsStyle.height
-              });
-          });
-
-          if ($attrs.onResizeEnd) {
-            $parse($attrs.onResizeEnd)($scope, unitsResized);
-            $scope.$apply();
-          }
+        var elm = angular.element(event.target);
+        var unitsResized = getUnitsResized(resizeEdge, elm, snapGridDimensions);
+
+        $timeout(function() {
+          elm
+            .data('x', null)
+            .data('y', null)
+            .css({
+              transform: '',
+              width: originalDimensionsStyle.width,
+              height: originalDimensionsStyle.height
+            });
+        });
+
+        if ($attrs.onResizeEnd) {
+          $parse($attrs.onResizeEnd)($scope, unitsResized);
+          $scope.$apply();
         }
 
       }
     });
 
+    $scope.$watch($attrs.mwlResizable, function(enabled) {
+      interact($element[0]).resizable({
+        enabled: enabled
+      });
+    });
+
     $scope.$on('$destroy', function() {
       interact($element[0]).unset();
     });

diff --git a/test/unit/directives/mwlResizable.spec.js b/test/unit/directives/mwlResizable.spec.js
@@ -179,4 +179,10 @@ describe('mwlresizable directive', function() {
     expect(interactInstance.unset).to.have.been.called;
   });
 
+  it('should disable resizing on the event', function() {
+    scope.resizable = false;
+    scope.$apply();
+    expect(interactInstance.resizable).to.have.been.calledWith({enabled: false});
+  });
+
 });