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

Auto-resize text input

Browse Source
This commit is contained in:
Sébastien Hut 2015-02-17 16:44:46 +01:00 committed by Sébastien Hut
parent 83dd33b9a2
commit aec49670ed
4 changed files with 43 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
clientapp/pages/chat.js
View File

@ -87,7 +87,7 @@ module.exports = BasePage.extend({
this.listenTo(this.model.messages, 'add', this.handleChatAdded);
this.listenToAndRun(this.model, 'change:jingleResources', this.handleJingleResourcesChanged);
//$(window).on('resize', _.bind(this.resizeInput, this));
$(window).on('resize', _.bind(this.resizeInput, this));
this.registerBindings(me, {
srcBindings: {
@ -99,7 +99,7 @@ module.exports = BasePage.extend({
},
handlePageLoaded: function () {
this.staydown.checkdown();
//this.resizeInput();
this.resizeInput();
},
handleCallClick: function (e) {
e.preventDefault();
@ -142,7 +142,7 @@ module.exports = BasePage.extend({
}
},
handleKeyUp: function (e) {
//this.resizeInput();
this.resizeInput();
app.composing[this.model.jid] = this.$chatInput.val();
if (this.typing && this.$chatInput.val().length === 0) {
this.typing = false;
@ -328,24 +328,29 @@ module.exports = BasePage.extend({
resizeInput: _.throttle(function () {
var height;
var scrollHeight;
var heightDiff;
var newHeight;
var newPadding;
var paddingDelta;
var maxHeight = 102;
var newMargin;
var marginDelta;
var maxHeight = parseInt(this.$chatInput.css('max-height'), 10);
this.$chatInput.removeAttr('style');
height = this.$chatInput.height() + 10;
scrollHeight = this.$chatInput.get(0).scrollHeight;
newHeight = scrollHeight + 2;
height = this.$chatInput.outerHeight(),
scrollHeight = this.$chatInput.get(0).scrollHeight,
newHeight = Math.max(height, scrollHeight);
heightDiff = height - this.$chatInput.innerHeight();
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);
this.$chatInput.css('height', newHeight+heightDiff);
this.$chatInput.scrollTop(this.$chatInput[0].scrollHeight - this.$chatInput.height());
newMargin = newHeight - height + heightDiff;
marginDelta = newMargin - parseInt(this.$messageList.css('marginBottom'), 10);
if (!!marginDelta) {
this.$messageList.css('marginBottom', newMargin);
}
} else {
this.$messageList.css('marginBottom', 0);
}
}, 300)
});

31
clientapp/pages/groupchat.js
View File

@ -85,7 +85,7 @@ module.exports = BasePage.extend({
this.listenTo(this.model.messages, 'add', this.handleChatAdded);
//$(window).on('resize', _.bind(this.resizeInput, this));
$(window).on('resize', _.bind(this.resizeInput, this));
this.registerBindings();
@ -105,7 +105,7 @@ module.exports = BasePage.extend({
},
handlePageLoaded: function () {
this.staydown.checkdown();
//this.resizeInput();
this.resizeInput();
},
handleKeyDown: function (e) {
if (e.which === 13 && !e.shiftKey) {
@ -137,7 +137,7 @@ module.exports = BasePage.extend({
}
},
handleKeyUp: function (e) {
//this.resizeInput();
this.resizeInput();
app.composing[this.model.jid] = this.$chatInput.val();
if (this.typing && this.$chatInput.val().length === 0) {
this.typing = false;
@ -154,24 +154,29 @@ module.exports = BasePage.extend({
resizeInput: _.throttle(function () {
var height;
var scrollHeight;
var heightDiff;
var newHeight;
var newPadding;
var paddingDelta;
var maxHeight = 102;
var newMargin;
var marginDelta;
var maxHeight = parseInt(this.$chatInput.css('max-height'), 10);
this.$chatInput.removeAttr('style');
height = this.$chatInput.height() + 10,
height = this.$chatInput.outerHeight(),
scrollHeight = this.$chatInput.get(0).scrollHeight,
newHeight = scrollHeight + 2;
newHeight = Math.max(height, scrollHeight);
heightDiff = height - this.$chatInput.innerHeight();
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);
this.$chatInput.css('height', newHeight+heightDiff);
this.$chatInput.scrollTop(this.$chatInput[0].scrollHeight - this.$chatInput.height());
newMargin = newHeight - height + heightDiff;
marginDelta = newMargin - parseInt(this.$messageList.css('marginBottom'), 10);
if (!!marginDelta) {
this.$messageList.css('marginBottom', newMargin);
}
} else {
this.$messageList.css('marginBottom', 0);
}
}, 300),
pausedTyping: _.debounce(function () {

6
public/css/otalk.css
View File

@ -1179,7 +1179,7 @@ button.secondary:hover:not(:disabled) {
display: inline-block;
vertical-align: middle;
background: none repeat scroll 0% 0% padding-box #fff;
font-size: 14px;
font-size: 13px;
border-width: 2px;
border-style: solid;
border-color: #e0e0e0;
@ -1188,14 +1188,14 @@ button.secondary:hover:not(:disabled) {
font-family: "Lato", sans-serif;
margin: 0;
color: #3d3c40;
overflow-y: hidden;
overflow-y: auto;
box-shadow: none;
outline: 0px none;
position: absolute;
bottom: 0px;
height: 38px;
padding: 9px 5px 9px 8px;
max-height: 10rem;
max-height: 102px;
resize: none !important;
}
.conversation .chatBox textarea.editing {

6
public/css/pages/chat.styl
View File

@ -206,7 +206,7 @@
display: inline-block
vertical-align: middle
background: none repeat scroll 0% 0% padding-box #fff
font-size: $font-size-base
font-size: 13px
border-width: 2px
border-style: solid
border-color: $gray-lighter
@ -215,14 +215,14 @@
font-family: "Lato",sans-serif
margin: 0
color: #3D3C40
overflow-y: hidden
overflow-y: auto
box-shadow: none
outline: 0px none
position: absolute
bottom: 0px
height: 38px
padding: 9px 5px 9px 8px
max-height: 10rem
max-height: 102px
resize: none !important
&.editing