moparisthebest/kaiwa
1
0
Fork 0
mirror of https://github.com/moparisthebest/kaiwa synced 2024-11-25 18:52:20 -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.listenTo(this.model.messages, 'add', this.handleChatAdded);
this.listenToAndRun(this.model, 'change:jingleResources', this.handleJingleResourcesChanged); 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, { this.registerBindings(me, {
srcBindings: { srcBindings: {
@ -99,7 +99,7 @@ module.exports = BasePage.extend({
}, },
handlePageLoaded: function () { handlePageLoaded: function () {
this.staydown.checkdown(); this.staydown.checkdown();
//this.resizeInput(); this.resizeInput();
}, },
handleCallClick: function (e) { handleCallClick: function (e) {
e.preventDefault(); e.preventDefault();
@ -142,7 +142,7 @@ module.exports = BasePage.extend({
} }
}, },
handleKeyUp: function (e) { handleKeyUp: function (e) {
//this.resizeInput(); this.resizeInput();
app.composing[this.model.jid] = this.$chatInput.val(); app.composing[this.model.jid] = this.$chatInput.val();
if (this.typing && this.$chatInput.val().length === 0) { if (this.typing && this.$chatInput.val().length === 0) {
this.typing = false; this.typing = false;
@ -328,24 +328,29 @@ module.exports = BasePage.extend({
resizeInput: _.throttle(function () { resizeInput: _.throttle(function () {
var height; var height;
var scrollHeight; var scrollHeight;
var heightDiff;
var newHeight; var newHeight;
var newPadding; var newMargin;
var paddingDelta; var marginDelta;
var maxHeight = 102; var maxHeight = parseInt(this.$chatInput.css('max-height'), 10);
this.$chatInput.removeAttr('style'); this.$chatInput.removeAttr('style');
height = this.$chatInput.height() + 10; height = this.$chatInput.outerHeight(),
scrollHeight = this.$chatInput.get(0).scrollHeight; 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 > maxHeight) newHeight = maxHeight;
if (newHeight > height) { if (newHeight > height) {
this.$chatInput.css('height', newHeight); this.$chatInput.css('height', newHeight+heightDiff);
newPadding = newHeight + 21; this.$chatInput.scrollTop(this.$chatInput[0].scrollHeight - this.$chatInput.height());
paddingDelta = newPadding - parseInt(this.$messageList.css('paddingBottom'), 10); newMargin = newHeight - height + heightDiff;
if (!!paddingDelta) { marginDelta = newMargin - parseInt(this.$messageList.css('marginBottom'), 10);
this.$messageList.css('paddingBottom', newPadding); if (!!marginDelta) {
this.$messageList.css('marginBottom', newMargin);
} }
} else {
this.$messageList.css('marginBottom', 0);
} }
}, 300) }, 300)
}); });

31
clientapp/pages/groupchat.js
View File

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

6
public/css/otalk.css
View File

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

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

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