From ad9beb7422bd5926d8d5a9be1f35d35e517d6f1e Mon Sep 17 00:00:00 2001 From: Matt Lewis Date: Tue, 22 Mar 2016 09:32:47 +0000 Subject: [PATCH] fix(resizeable): disable the cursor when resizing disabled events Closes #307 --- src/directives/mwlResizable.js | 63 +++++++++++------------ test/unit/directives/mwlResizable.spec.js | 6 +++ 2 files changed, 36 insertions(+), 33 deletions(-) diff --git a/src/directives/mwlResizable.js b/src/directives/mwlResizable.js index 22b13357..382e24ee 100644 --- 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 index d80fc5df..e52d2dad 100644 --- 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}); + }); + });