Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Raise events for grow and shrink actions #11

Merged
merged 4 commits into from
Mar 8, 2016
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 26 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ autogrow.js

Basic usage ([Interactive Demo](http://jsfiddle.net/edelman/HrnHb/)):

$('textarea').autogrow(); //or some selector that will grab textareas
```javascript
$('textarea').autogrow(); //or some selector that will grab textareas
```

**autogrow.js** has some options that you can set:

Expand All @@ -20,9 +22,26 @@ Basic usage ([Interactive Demo](http://jsfiddle.net/edelman/HrnHb/)):

Example:

var opts = {
context: $('li')
, animate: false
, cloneClass: 'faketextarea'
};
$('.mytextareas').autogrow(opts);
```javascript
var opts = {
context: $('li')
, animate: false
, cloneClass: 'faketextarea'
};
$('.mytextareas').autogrow(opts);
```

### Events

`autogrow:grow` and `autogrow:shrink` events will fire when a grow or shrink animation completes (or immediately if there are no animations). You can get the textarea this applies to by looking at the `event.target`

The event will be raised against the `context` you pass into the options.

Example:

```javascript
$('#context-element').on('autogrow:grow', function(e) {
var box = $(e.target);
console.log(box.height());
});
```
29 changes: 27 additions & 2 deletions autogrow.js
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,13 @@
;
if (oldHeight < newHeight) { //user is typing
this.scrollTop = 0; //try to reduce the top of the content hiding for a second
opts.animate ? box.stop().animate({height: newHeight}, opts.speed) : box.innerHeight(newHeight);
if(opts.animate) {
box.stop().animate({height: newHeight}, {duration: opts.speed, complete: notifyGrown});
} else {
box.innerHeight(newHeight);
notifyGrown();
}

} else if (!e || e.which == 8 || e.which == 46 || (e.ctrlKey && e.which == 88)) { //user is deleting, backspacing, or cutting
if (oldHeight > minHeight) { //shrink!
//this cloning part is not particularly necessary. however, it helps with animation
Expand Down Expand Up @@ -85,12 +91,31 @@
//if user selects all and deletes or holds down delete til beginning
//user could get here and shrink whole box
newHeight < minHeight && (newHeight = minHeight);
oldHeight > newHeight && opts.animate ? box.stop().animate({height: newHeight}, opts.speed) : box.innerHeight(newHeight);
if(oldHeight > newHeight) {
if(opts.animate) {
box.stop().animate({height: newHeight}, {duration: opts.speed, complete: notifyShrunk});
} else {
box.innerHeight(newHeight);
notifyShrunk();
}
}

} else { //just set to the minHeight
box.innerHeight(minHeight);
}
}
}

// Trigger event to indicate a textarea has grown.
function notifyGrown() {
opts.context.trigger('autogrow:grow');
}

// Trigger event to indicate a textarea has shrunk.
function notifyShrunk() {
opts.context.trigger('autogrow:shrink');
}

return that;
}
})(jQuery);