moparisthebest/kaiwa
1
0
Fork 0
mirror of https://github.com/moparisthebest/kaiwa synced 2024-11-10 11:35:02 -05:00
Code Issues Releases Wiki Activity

Auto-resize chat input

Browse Source
This commit is contained in:
Lance Stout 2013-09-15 15:06:37 -07:00
parent a110e218df
commit 5a50847015
1 changed files with 34 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
clientapp/pages/chat.js
View File

@ -29,7 +29,8 @@ module.exports = BasePage.extend({
render: function () { render: function () {
this.renderAndBind(); this.renderAndBind();
this.typingTimer = null; this.typingTimer = null;
this.$chatBuffer = this.$('#chatBuffer'); this.$chatInput = this.$('#chatBuffer');
this.$messageList = this.$('#conversation');
this.renderCollection(this.model.messages, Message, this.$('#conversation')); this.renderCollection(this.model.messages, Message, this.$('#conversation'));
this.registerBindings(); this.registerBindings();
return this; return this;
@ -40,15 +41,15 @@ module.exports = BasePage.extend({
this.sendChat(); this.sendChat();
e.preventDefault(); e.preventDefault();
return false; return false;
} else if (e.which === 38 && this.$chatBuffer.val() === '' && this.model.lastSentMessage) { } else if (e.which === 38 && this.$chatInput.val() === '' && this.model.lastSentMessage) {
this.editMode = true; this.editMode = true;
this.$chatBuffer.addClass('editing'); this.$chatInput.addClass('editing');
this.$chatBuffer.val(this.model.lastSentMessage.body); this.$chatInput.val(this.model.lastSentMessage.body);
e.preventDefault(); e.preventDefault();
return false; return false;
} else if (e.which === 40 && this.editMode) { } else if (e.which === 40 && this.editMode) {
this.editMode = false; this.editMode = false;
this.$chatBuffer.removeClass('editing'); this.$chatInput.removeClass('editing');
e.preventDefault(); e.preventDefault();
return false; return false;
} else if (!e.ctrlKey) { } else if (!e.ctrlKey) {
@ -62,8 +63,9 @@ module.exports = BasePage.extend({
} }
}, },
handleKeyUp: function (e) { handleKeyUp: function (e) {
this.resizeInput();
this.typingTimer = setTimeout(this.pausedTyping.bind(this), 5000); this.typingTimer = setTimeout(this.pausedTyping.bind(this), 5000);
if (this.typing && this.$chatBuffer.val().length === 0) { if (this.typing && this.$chatInput.val().length === 0) {
this.typing = false; this.typing = false;
client.sendMessage({ client.sendMessage({
to: this.model.lockedResource || this.model.jid, to: this.model.lockedResource || this.model.jid,
@ -71,6 +73,29 @@ module.exports = BasePage.extend({
}); });
} }
}, },
resizeInput: function () {
var height;
var scrollHeight;
var newHeight;
var newPadding;
var paddingDelta;
var maxHeight = 102;
this.$chatInput.removeAttr('style');
height = this.$chatInput.height() + 10,
scrollHeight = this.$chatInput.get(0).scrollHeight,
newHeight = scrollHeight + 2;
if (newHeight > maxHeight) newHeight = maxHeight;
if (newHeight > height) {
this.$chatInput.css('height', newHeight);
newPadding = newHeight + 21;
paddingDelta = newPadding - parseInt(this.$messageList.css('paddingBottom'), 10);
if (!!paddingDelta) {
this.$messageList.css('paddingBottom', newPadding);
}
}
},
pausedTyping: function () { pausedTyping: function () {
if (this.typing) { if (this.typing) {
this.typing = false; this.typing = false;
@ -82,7 +107,7 @@ module.exports = BasePage.extend({
}, },
sendChat: function () { sendChat: function () {
var message; var message;
var val = this.$chatBuffer.val(); var val = this.$chatInput.val();
if (val) { if (val) {
message = { message = {
@ -110,7 +135,7 @@ module.exports = BasePage.extend({
} }
this.editMode = false; this.editMode = false;
this.typing = false; this.typing = false;
this.$chatBuffer.removeClass('editing'); this.$chatInput.removeClass('editing');
this.$chatBuffer.val(''); this.$chatInput.val('');
} }
}); });