From e7966065a2ff77c5efbb307b118188751bd4e3ac Mon Sep 17 00:00:00 2001 From: Paul-Julien Vauthier Date: Tue, 13 Sep 2016 21:15:13 +0200 Subject: [PATCH 1/3] Add IntelliJ to gitignore --- .gitignore | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/.gitignore b/.gitignore index 8cec646..aeab889 100644 --- a/.gitignore +++ b/.gitignore @@ -36,4 +36,9 @@ ehthumbs.db Thumbs.db +# IDE # +####### +.idea/ +*.iml + node_modules \ No newline at end of file From 78c7699212bb50c7125ab8dc74073f3f3c42183b Mon Sep 17 00:00:00 2001 From: Paul-Julien Vauthier Date: Tue, 13 Sep 2016 22:55:59 +0200 Subject: [PATCH 2/3] Directive should not create new scope --- src/angular-resizable.js | 63 ++++++++++++++++++++++------------------ 1 file changed, 34 insertions(+), 29 deletions(-) diff --git a/src/angular-resizable.js b/src/angular-resizable.js index 4a6e24a..f158809 100644 --- a/src/angular-resizable.js +++ b/src/angular-resizable.js @@ -1,5 +1,5 @@ angular.module('angularResizable', []) - .directive('resizable', function() { + .directive('resizable', function($parse) { var toCall; function throttle(fun) { if (toCall === undefined) { @@ -14,31 +14,36 @@ angular.module('angularResizable', []) } return { restrict: 'AE', - scope: { - rDirections: '=', - rCenteredX: '=', - rCenteredY: '=', - rWidth: '=', - rHeight: '=', - rFlex: '=', - rGrabber: '@', - rDisabled: '@', - rNoThrottle: '=', - resizable: '@', - }, + /* + Do not use isolated scope. Use attr instead. Attr should behave like the following isolated scope: + rDirections: '=', + rCenteredX: '=', + rCenteredY: '=', + rWidth: '=', + rHeight: '=', + rFlex: '=', + rGrabber: '@', + rDisabled: '@', + rNoThrottle: '=', + resizable: '@', + */ + scope: false, link: function(scope, element, attr) { - if (scope.resizable === 'false') return; + if (attr.resizable === 'false') return; var flexBasis = 'flexBasis' in document.documentElement.style ? 'flexBasis' : 'webkitFlexBasis' in document.documentElement.style ? 'webkitFlexBasis' : 'msFlexPreferredSize' in document.documentElement.style ? 'msFlexPreferredSize' : 'flexBasis'; + var rFlex = $parse(attr.rFlex)(); + var rNoThrottle = $parse(attr.rNoThrottle); + // register watchers on width and height attributes if they are set - scope.$watch('rWidth', function(value){ - element[0].style[scope.rFlex ? flexBasis : 'width'] = scope.rWidth + 'px'; + scope.$watch(attr.rWidth, function(value){ + element[0].style[rFlex ? flexBasis : 'width'] = value + 'px'; }); scope.$watch('rHeight', function(value){ - element[0].style[scope.rFlex ? flexBasis : 'height'] = scope.rHeight + 'px'; + element[0].style[rFlex ? flexBasis : 'height'] = value + 'px'; }); element.addClass('resizable'); @@ -46,10 +51,10 @@ angular.module('angularResizable', []) var style = window.getComputedStyle(element[0], null), w, h, - dir = scope.rDirections || ['right'], - vx = scope.rCenteredX ? 2 : 1, // if centered double velocity - vy = scope.rCenteredY ? 2 : 1, // if centered double velocity - inner = scope.rGrabber ? scope.rGrabber : '', + dir = $parse(attr.rDirections)() || ['right'], + vx = $parse(attr.rCenteredX)() ? 2 : 1, // if centered double velocity + vy = $parse(attr.rCenteredY)() ? 2 : 1, // if centered double velocity + inner = attr.rGrabber ? attr.rGrabber : '', start, dragDir, axis, @@ -58,9 +63,9 @@ angular.module('angularResizable', []) var updateInfo = function(e) { info.width = false; info.height = false; if(axis === 'x') - info.width = parseInt(element[0].style[scope.rFlex ? flexBasis : 'width']); + info.width = parseInt(element[0].style[rFlex ? flexBasis : 'width']); else - info.height = parseInt(element[0].style[scope.rFlex ? flexBasis : 'height']); + info.height = parseInt(element[0].style[rFlex ? flexBasis : 'height']); info.id = element[0].id; info.evt = e; }; @@ -77,19 +82,19 @@ angular.module('angularResizable', []) var prop, offset = axis === 'x' ? start - getClientX(e) : start - getClientY(e); switch(dragDir) { case 'top': - prop = scope.rFlex ? flexBasis : 'height'; + prop = rFlex ? flexBasis : 'height'; element[0].style[prop] = h + (offset * vy) + 'px'; break; case 'bottom': - prop = scope.rFlex ? flexBasis : 'height'; + prop = rFlex ? flexBasis : 'height'; element[0].style[prop] = h - (offset * vy) + 'px'; break; case 'right': - prop = scope.rFlex ? flexBasis : 'width'; + prop = rFlex ? flexBasis : 'width'; element[0].style[prop] = w - (offset * vx) + 'px'; break; case 'left': - prop = scope.rFlex ? flexBasis : 'width'; + prop = rFlex ? flexBasis : 'width'; element[0].style[prop] = w + (offset * vx) + 'px'; break; } @@ -97,7 +102,7 @@ angular.module('angularResizable', []) function resizingEmit(){ scope.$emit('angular-resizable.resizing', info); } - if (scope.rNoThrottle) { + if (rNoThrottle()) { resizingEmit(); } else { throttle(resizingEmit); @@ -149,7 +154,7 @@ angular.module('angularResizable', []) grabber.ondragstart = function() { return false; }; var down = function(e) { - var disabled = (scope.rDisabled === 'true'); + var disabled = (attr.rDisabled === 'true'); if (!disabled && (e.which === 1 || e.touches)) { // left mouse click or touch screen dragStart(e, direction); From 86e643c4c527881f29566d659e9aee8f0806545d Mon Sep 17 00:00:00 2001 From: Paul-Julien Vauthier Date: Sun, 25 Jun 2017 19:47:04 +0800 Subject: [PATCH 3/3] Directive attributes passed using array notation --- src/angular-resizable.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/angular-resizable.js b/src/angular-resizable.js index f158809..fa32bfb 100644 --- a/src/angular-resizable.js +++ b/src/angular-resizable.js @@ -1,5 +1,5 @@ angular.module('angularResizable', []) - .directive('resizable', function($parse) { + .directive('resizable', ['$parse', function($parse) { var toCall; function throttle(fun) { if (toCall === undefined) { @@ -165,4 +165,4 @@ angular.module('angularResizable', []) }); } }; - }); + }]);