Add resizing event and grabber attribute

README.md

@@ -24,6 +24,7 @@ rCenteredX | false | boolean | If set as true, the velocity of horizontal resizi
 rCenteredY | false | boolean | If set as true, the velocity of vertical resizing will be doubled.
 rWidth | false | integer or $scope variable | If set, the resizable element will be rendered with a predefined width relative to this value in pixels and a watcher will be set on the 'rWidth' attribute. [See this codepen](http://codepen.io/Reklino/pen/EjKXqg).
 rHeight | false | integer or $scope variable | If set, the resizable element will be rendered with a predefined height relative to this value in pixels and a watcher will be set on the 'rHeight' attribute. [See this codepen](http://codepen.io/Reklino/pen/EjKXqg).
+rGrabber | `<span></span>` | string | Defines custom inner html for the grabber.
 
 ## Events
 
@@ -33,16 +34,29 @@ For an example using the events, [see this codepen](http://codepen.io/Reklino/pe
 
 This event is emitted at the beginning of a resize with the following info object:
 - `info.width` : The width of the directive at time of resize start. **Will be false if resizing vertically
-- `info.height` : The height of the directive at time of resize start. **Will be false if resizing vertically
+- `info.height` : The height of the directive at time of resize start. **Will be false if resizing horizontally
 - `info.id` : The id of the directive. **Will be false if there is no id set.
 
+### angular-resizable.resizing
+
+This event is emitted during the resizing of the element with the following object as an argument:
+- `info.width` : The width of the directive at time of resize end. **Will be false if resizing vertically
+- `info.height` : The height of the directive at time of resize end. **Will be false if resizing horizontally
+- `info.id` : The id of the directive. **Will be false if there is no id
+
 ### angular-resizable.resizeEnd
 
 This event is emitted at the end of a resize with the following object as an argument:
 - `info.width` : The width of the directive at time of resize end. **Will be false if resizing vertically
-- `info.height` : The height of the directive at time of resize end. **Will be false if resizing vertically
+- `info.height` : The height of the directive at time of resize end. **Will be false if resizing horizontally
 - `info.id` : The id of the directive. **Will be false if there is no id set.
 
+## version notes
+
+### 1.2.0
+- Add angular-resizable.resizing event (see pull request #7)
+- Add attribute for providing custom inner html to the grabber element (see pull request #7)
+
 ## License
 
 MIT

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-resizable",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "homepage": "https://github.com/Reklino/angular-resizable",
   "authors": [
     "Reklino <[email protected]>"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-resizable",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A directive for creating resizable containers in angular.",
   "keywords": [
     "angular",

src/angular-resizable.js

@@ -1,5 +1,17 @@
 angular.module('angularResizable', [])
     .directive('resizable', function() {
+        var toCall;
+        function throttle(fun) {
+            if (toCall === undefined) {
+                toCall = fun;
+                setTimeout(function() {
+                    toCall();
+                    toCall = undefined;
+                }, 100);
+            } else {
+                toCall = fun;
+            }
+        }
         return {
             restrict: 'AE',
             scope: {
@@ -8,7 +20,8 @@ angular.module('angularResizable', [])
                 rCenteredY: "=",
                 rWidth: "=",
                 rHeight: "=",
-                rFlex: "="
+                rFlex: "=",
+                rGrabber: "@"
             },
             link: function(scope, element, attr) {
 
@@ -28,6 +41,7 @@ angular.module('angularResizable', [])
                     dir = scope.rDirections,
                     vx = scope.rCenteredX ? 2 : 1, // if centered double velocity
                     vy = scope.rCenteredY ? 2 : 1, // if centered double velocity
+                    inner = scope.rGrabber ? scope.rGrabber : '<span></span>',
                     start,
                     dragDir,
                     axis,
@@ -62,6 +76,8 @@ angular.module('angularResizable', [])
                             else {            element[0].style.width = w + (offset * vx) + 'px'; }
                             break;
                     }
+                    updateInfo();
+                    throttle(function() { scope.$emit("angular-resizable.resizing", info);});
                 };
                 var dragEnd = function(e) {
                     updateInfo();
@@ -70,7 +86,7 @@ angular.module('angularResizable', [])
                     document.removeEventListener('mouseup', dragEnd, false);
                     document.removeEventListener('mousemove', dragging, false);
                     element.removeClass('no-transition');
-                }
+                };
                 var dragStart = function(e, direction) {
                     dragDir = direction;
                     axis = dragDir == 'left' || dragDir == 'right' ? 'x' : 'y';
@@ -102,7 +118,7 @@ angular.module('angularResizable', [])
 
                         // add class for styling purposes
                         grabber.setAttribute('class', 'rg-' + dir[i]);
-                        grabber.innerHTML = '<span></span>';
+                        grabber.innerHTML = inner;
                         element[0].appendChild(grabber);
                         grabber.ondragstart = function() { return false }
                         grabber.addEventListener('mousedown', function(e) {