thegamer/Cable-Desktop
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

239 Auto-expand message area when typing

Browse source
This commit is contained in:
adambar 2015-06-16 22:43:40 +02:00
parent 1696898112
commit 07ac0ae9cc
9 changed files with 522 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
background.html
View file

@ -45,7 +45,7 @@
<input type='file' class='file-input'> <input type='file' class='file-input'>
</div> </div>
<input class="send-btn" type='submit' value='' /> <input class="send-btn" type='submit' value='' />
<input class='send-message' type='textarea' placeholder="Send a message"> <textarea class='send-message' placeholder="Send a message" rows="1"></textarea>
</form> </form>
</div> </div>
</script> </script>

9
bower.json
View file

@ -22,7 +22,8 @@
"blueimp-load-image": "~1.13.0", "blueimp-load-image": "~1.13.0",
"blueimp-canvas-to-blob": "~2.1.1", "blueimp-canvas-to-blob": "~2.1.1",
"twemoji": "~1.2.1", "twemoji": "~1.2.1",
"emojijs": "iamcal/js-emoji" "emojijs": "iamcal/js-emoji",
"autosize": "~3.0.6"
}, },
"devDependencies": { "devDependencies": {
"mocha": "~2.0.1", "mocha": "~2.0.1",
@ -111,6 +112,9 @@
], ],
"mock-socket": [ "mock-socket": [
"dist/mock-socket.js" "dist/mock-socket.js"
],
"autosize": [
"dist/autosize.js"
] ]
}, },
"concat": { "concat": {
@ -131,7 +135,8 @@
"blueimp-load-image", "blueimp-load-image",
"blueimp-canvas-to-blob", "blueimp-canvas-to-blob",
"twemoji", "twemoji",
"emojijs" "emojijs",
"autosize"
], ],
"libtextsecure": [ "libtextsecure": [
"jquery", "jquery",

211
components/autosize/dist/autosize.js vendored Normal file
View file

@ -0,0 +1,211 @@
/*!
Autosize 3.0.5
license: MIT
http://www.jacklmoore.com/autosize
*/
(function (global, factory) {
if (typeof define === 'function' && define.amd) {
define(['exports', 'module'], factory);
} else if (typeof exports !== 'undefined' && typeof module !== 'undefined') {
factory(exports, module);
} else {
var mod = {
exports: {}
};
factory(mod.exports, mod);
global.autosize = mod.exports;
}
})(this, function (exports, module) {
'use strict';
function assign(ta) {
var _ref = arguments[1] === undefined ? {} : arguments[1];
var _ref$setOverflowX = _ref.setOverflowX;
var setOverflowX = _ref$setOverflowX === undefined ? true : _ref$setOverflowX;
var _ref$setOverflowY = _ref.setOverflowY;
var setOverflowY = _ref$setOverflowY === undefined ? true : _ref$setOverflowY;
if (!ta || !ta.nodeName || ta.nodeName !== 'TEXTAREA' || ta.hasAttribute('data-autosize-on')) return;
var heightOffset = null;
var overflowY = 'hidden';
function init() {
var style = window.getComputedStyle(ta, null);
if (style.resize === 'vertical') {
ta.style.resize = 'none';
} else if (style.resize === 'both') {
ta.style.resize = 'horizontal';
}
if (style.boxSizing === 'content-box') {
heightOffset = -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom));
} else {
heightOffset = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
}
update();
}
function changeOverflow(value) {
{
// Chrome/Safari-specific fix:
// When the textarea y-overflow is hidden, Chrome/Safari do not reflow the text to account for the space
// made available by removing the scrollbar. The following forces the necessary text reflow.
var width = ta.style.width;
ta.style.width = '0px';
// Force reflow:
/* jshint ignore:start */
ta.offsetWidth;
/* jshint ignore:end */
ta.style.width = width;
}
overflowY = value;
if (setOverflowY) {
ta.style.overflowY = value;
}
update();
}
function update() {
var startHeight = ta.style.height;
var htmlTop = document.documentElement.scrollTop;
var bodyTop = document.body.scrollTop;
var originalHeight = ta.style.height;
ta.style.height = 'auto';
var endHeight = ta.scrollHeight + heightOffset;
if (ta.scrollHeight === 0) {
// If the scrollHeight is 0, then the element probably has display:none or is detached from the DOM.
ta.style.height = originalHeight;
return;
}
ta.style.height = endHeight + 'px';
// prevents scroll-position jumping
document.documentElement.scrollTop = htmlTop;
document.body.scrollTop = bodyTop;
var style = window.getComputedStyle(ta, null);
if (style.height !== ta.style.height) {
if (overflowY !== 'visible') {
changeOverflow('visible');
return;
}
} else {
if (overflowY !== 'hidden') {
changeOverflow('hidden');
return;
}
}
if (startHeight !== ta.style.height) {
var evt = document.createEvent('Event');
evt.initEvent('autosize:resized', true, false);
ta.dispatchEvent(evt);
}
}
var destroy = (function (style) {
window.removeEventListener('resize', update);
ta.removeEventListener('input', update);
ta.removeEventListener('keyup', update);
ta.removeAttribute('data-autosize-on');
ta.removeEventListener('autosize:destroy', destroy);
Object.keys(style).forEach(function (key) {
ta.style[key] = style[key];
});
}).bind(ta, {
height: ta.style.height,
resize: ta.style.resize,
overflowY: ta.style.overflowY,
overflowX: ta.style.overflowX,
wordWrap: ta.style.wordWrap });
ta.addEventListener('autosize:destroy', destroy);
// IE9 does not fire onpropertychange or oninput for deletions,
// so binding to onkeyup to catch most of those events.
// There is no way that I know of to detect something like 'cut' in IE9.
if ('onpropertychange' in ta && 'oninput' in ta) {
ta.addEventListener('keyup', update);
}
window.addEventListener('resize', update);
ta.addEventListener('input', update);
ta.addEventListener('autosize:update', update);
ta.setAttribute('data-autosize-on', true);
if (setOverflowY) {
ta.style.overflowY = 'hidden';
}
if (setOverflowX) {
ta.style.overflowX = 'hidden';
ta.style.wordWrap = 'break-word';
}
init();
}
function destroy(ta) {
if (!(ta && ta.nodeName && ta.nodeName === 'TEXTAREA')) return;
var evt = document.createEvent('Event');
evt.initEvent('autosize:destroy', true, false);
ta.dispatchEvent(evt);
}
function update(ta) {
if (!(ta && ta.nodeName && ta.nodeName === 'TEXTAREA')) return;
var evt = document.createEvent('Event');
evt.initEvent('autosize:update', true, false);
ta.dispatchEvent(evt);
}
var autosize = null;
// Do nothing in Node.js environment and IE8 (or lower)
if (typeof window === 'undefined' || typeof window.getComputedStyle !== 'function') {
autosize = function (el) {
return el;
};
autosize.destroy = function (el) {
return el;
};
autosize.update = function (el) {
return el;
};
} else {
autosize = function (el, options) {
if (el) {
Array.prototype.forEach.call(el.length ? el : [el], function (x) {
return assign(x, options);
});
}
return el;
};
autosize.destroy = function (el) {
if (el) {
Array.prototype.forEach.call(el.length ? el : [el], destroy);
}
return el;
};
autosize.update = function (el) {
if (el) {
Array.prototype.forEach.call(el.length ? el : [el], update);
}
return el;
};
}
module.exports = autosize;
});

212
js/components.js
View file

@ -29667,3 +29667,215 @@ function emoji(){}
}).call(function(){ }).call(function(){
return this || (typeof window !== 'undefined' ? window : global); return this || (typeof window !== 'undefined' ? window : global);
}()); }());
/*!
Autosize 3.0.5
license: MIT
http://www.jacklmoore.com/autosize
*/
(function (global, factory) {
if (typeof define === 'function' && define.amd) {
define(['exports', 'module'], factory);
} else if (typeof exports !== 'undefined' && typeof module !== 'undefined') {
factory(exports, module);
} else {
var mod = {
exports: {}
};
factory(mod.exports, mod);
global.autosize = mod.exports;
}
})(this, function (exports, module) {
'use strict';
function assign(ta) {
var _ref = arguments[1] === undefined ? {} : arguments[1];
var _ref$setOverflowX = _ref.setOverflowX;
var setOverflowX = _ref$setOverflowX === undefined ? true : _ref$setOverflowX;
var _ref$setOverflowY = _ref.setOverflowY;
var setOverflowY = _ref$setOverflowY === undefined ? true : _ref$setOverflowY;
if (!ta || !ta.nodeName || ta.nodeName !== 'TEXTAREA' || ta.hasAttribute('data-autosize-on')) return;
var heightOffset = null;
var overflowY = 'hidden';
function init() {
var style = window.getComputedStyle(ta, null);
if (style.resize === 'vertical') {
ta.style.resize = 'none';
} else if (style.resize === 'both') {
ta.style.resize = 'horizontal';
}
if (style.boxSizing === 'content-box') {
heightOffset = -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom));
} else {
heightOffset = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
}
update();
}
function changeOverflow(value) {
{
// Chrome/Safari-specific fix:
// When the textarea y-overflow is hidden, Chrome/Safari do not reflow the text to account for the space
// made available by removing the scrollbar. The following forces the necessary text reflow.
var width = ta.style.width;
ta.style.width = '0px';
// Force reflow:
/* jshint ignore:start */
ta.offsetWidth;
/* jshint ignore:end */
ta.style.width = width;
}
overflowY = value;
if (setOverflowY) {
ta.style.overflowY = value;
}
update();
}
function update() {
var startHeight = ta.style.height;
var htmlTop = document.documentElement.scrollTop;
var bodyTop = document.body.scrollTop;
var originalHeight = ta.style.height;
ta.style.height = 'auto';
var endHeight = ta.scrollHeight + heightOffset;
if (ta.scrollHeight === 0) {
// If the scrollHeight is 0, then the element probably has display:none or is detached from the DOM.
ta.style.height = originalHeight;
return;
}
ta.style.height = endHeight + 'px';
// prevents scroll-position jumping
document.documentElement.scrollTop = htmlTop;
document.body.scrollTop = bodyTop;
var style = window.getComputedStyle(ta, null);
if (style.height !== ta.style.height) {
if (overflowY !== 'visible') {
changeOverflow('visible');
return;
}
} else {
if (overflowY !== 'hidden') {
changeOverflow('hidden');
return;
}
}
if (startHeight !== ta.style.height) {
var evt = document.createEvent('Event');
evt.initEvent('autosize:resized', true, false);
ta.dispatchEvent(evt);
}
}
var destroy = (function (style) {
window.removeEventListener('resize', update);
ta.removeEventListener('input', update);
ta.removeEventListener('keyup', update);
ta.removeAttribute('data-autosize-on');
ta.removeEventListener('autosize:destroy', destroy);
Object.keys(style).forEach(function (key) {
ta.style[key] = style[key];
});
}).bind(ta, {
height: ta.style.height,
resize: ta.style.resize,
overflowY: ta.style.overflowY,
overflowX: ta.style.overflowX,
wordWrap: ta.style.wordWrap });
ta.addEventListener('autosize:destroy', destroy);
// IE9 does not fire onpropertychange or oninput for deletions,
// so binding to onkeyup to catch most of those events.
// There is no way that I know of to detect something like 'cut' in IE9.
if ('onpropertychange' in ta && 'oninput' in ta) {
ta.addEventListener('keyup', update);
}
window.addEventListener('resize', update);
ta.addEventListener('input', update);
ta.addEventListener('autosize:update', update);
ta.setAttribute('data-autosize-on', true);
if (setOverflowY) {
ta.style.overflowY = 'hidden';
}
if (setOverflowX) {
ta.style.overflowX = 'hidden';
ta.style.wordWrap = 'break-word';
}
init();
}
function destroy(ta) {
if (!(ta && ta.nodeName && ta.nodeName === 'TEXTAREA')) return;
var evt = document.createEvent('Event');
evt.initEvent('autosize:destroy', true, false);
ta.dispatchEvent(evt);
}
function update(ta) {
if (!(ta && ta.nodeName && ta.nodeName === 'TEXTAREA')) return;
var evt = document.createEvent('Event');
evt.initEvent('autosize:update', true, false);
ta.dispatchEvent(evt);
}
var autosize = null;
// Do nothing in Node.js environment and IE8 (or lower)
if (typeof window === 'undefined' || typeof window.getComputedStyle !== 'function') {
autosize = function (el) {
return el;
};
autosize.destroy = function (el) {
return el;
};
autosize.update = function (el) {
return el;
};
} else {
autosize = function (el, options) {
if (el) {
Array.prototype.forEach.call(el.length ? el : [el], function (x) {
return assign(x, options);
});
}
return el;
};
autosize.destroy = function (el) {
if (el) {
Array.prototype.forEach.call(el.length ? el : [el], destroy);
}
return el;
};
autosize.update = function (el) {
if (el) {
Array.prototype.forEach.call(el.length ? el : [el], update);
}
return el;
};
}
module.exports = autosize;
});

27
js/views/conversation_view.js
View file

@ -59,6 +59,8 @@
events: { events: {
'submit .send': 'sendMessage', 'submit .send': 'sendMessage',
'input .send-message': 'updateMessageFieldSize',
'keydown .send-message': 'updateMessageFieldSize',
'close': 'remove', 'close': 'remove',
'click .destroy': 'destroyMessages', 'click .destroy': 'destroyMessages',
'click .end-session': 'endSession', 'click .end-session': 'endSession',
@ -161,7 +163,7 @@
sendMessage: function(e) { sendMessage: function(e) {
e.preventDefault(); e.preventDefault();
var input = this.$('.send input.send-message'); var input = this.$('.send .send-message');
var message = this.replace_colons(input.val()); var message = this.replace_colons(input.val());
var convo = this.model; var convo = this.model;
@ -170,9 +172,11 @@
convo.sendMessage(message, attachments); convo.sendMessage(message, attachments);
}); });
input.val(""); input.val("");
window.autosize(input);
this.fileInput.deleteFiles(); this.fileInput.deleteFiles();
} }
}, },
replace_colons: function(str) { replace_colons: function(str) {
return str.replace(emoji.rx_colons, function(m){ return str.replace(emoji.rx_colons, function(m){
var idx = m.substr(1, m.length-2); var idx = m.substr(1, m.length-2);
@ -187,6 +191,27 @@
updateTitle: function() { updateTitle: function() {
this.$('.conversation-title').text(this.model.getTitle()); this.$('.conversation-title').text(this.model.getTitle());
},
updateMessageFieldSize: function (event) {
var keyCode = event.which || event.keyCode;
if (keyCode === 13) {
// enter pressed - submit the form now
return this.$('.bottom-bar form').submit();
}
var $messageField = this.$('.send-message'),
$discussionContainer = this.$('.discussion-container'),
$discussionContainerPrevHeight = $discussionContainer.outerHeight(),
$bottomBar = this.$('.bottom-bar'),
$bottomBarPrevHeight = $bottomBar.outerHeight();
window.autosize($messageField);
$bottomBar.outerHeight($messageField.outerHeight() + 1);
var $bottomBarNewHeight = $bottomBar.outerHeight();
$discussionContainer.outerHeight($discussionContainerPrevHeight - ($bottomBarNewHeight - $bottomBarPrevHeight));
} }
}); });
})(); })();

67
stylesheets/_conversation.scss
View file

@ -1,6 +1,4 @@
.conversation { .conversation {
padding: $header-height 0;
.file-input .close { .file-input .close {
top: -10px; top: -10px;
} }
@ -8,10 +6,18 @@
.conversation-title { .conversation-title {
line-height: $header-height; line-height: $header-height;
} }
#header {
position: inherit;
}
.discussion-container {
height: calc(100% - 2 * #{$header-height});
}
} }
.conversation + .new-group-update-form, .conversation + .new-group-update-form,
.conversation, .discussion-container, .message-list, .message-detail, .key-verification { .conversation, .message-list, .message-detail, .key-verification {
height: 100%; height: 100%;
} }
@ -29,6 +35,7 @@
padding: 0 1em; padding: 0 1em;
} }
} }
.message-detail { .message-detail {
padding: $header-height 0 0; padding: $header-height 0 0;
background: $grey_l; background: $grey_l;
@ -100,6 +107,7 @@
.outgoing .sender { .outgoing .sender {
display: none; display: none;
} }
.sender { .sender {
font-size: smaller; font-size: smaller;
opacity: 0.8; opacity: 0.8;
@ -110,10 +118,9 @@
} }
.entry.delivered .checkmark { .entry.delivered .checkmark {
display: inline; display: inline;
} }
.message-list { .message-list {
margin: 0; margin: 0;
padding: 1em 0; padding: 1em 0;
@ -237,7 +244,9 @@
font-style: italic; font-style: italic;
} }
&::before, &::after { display: none; } &::before, &::after {
display: none;
}
} }
} }
@ -308,6 +317,8 @@
} }
.bottom-bar { .bottom-bar {
$button-width: 36px;
position: fixed; position: fixed;
bottom: 1; // offset 1 for window frame. bottom: 1; // offset 1 for window frame.
height: 36px; height: 36px;
@ -315,7 +326,7 @@
border-top: 1px solid $grey_l; border-top: 1px solid $grey_l;
background: white; background: white;
button, input { button, input, textarea {
color: $grey_d; color: $grey_d;
} }
@ -323,7 +334,7 @@
position: absolute; position: absolute;
top: 0; top: 0;
height: 100%; height: 100%;
width: 36px; width: $button-width;
padding: 0; padding: 0;
border: 0; border: 0;
outline: 0; outline: 0;
@ -352,16 +363,19 @@
} }
} }
form, input { form, input, textarea {
height: 100%; height: 100%;
} }
input[type=textarea] { .send-message {
display: block; display: block;
height: 100%; width: calc(100% - 2 * #{$button-width} - 20px);
border: 0; min-height: $header-height - 1px;
outline: 0; max-height: 100px;
z-index: 5; padding: 10px;
border: 0;
outline: 0;
z-index: 5;
} }
} }
@ -376,17 +390,20 @@
border-radius: 20px; border-radius: 20px;
font-size: small; font-size: small;
} }
.confirmation-dialog { .confirmation-dialog {
position: absolute; position: absolute;
top: $header-height; top: $header-height;
padding: 1em; padding: 1em;
background: white; background: white;
border: solid 2px $blue; border: solid 2px $blue;
.message { text-align: center; } .message {
text-align: center;
}
button { button {
float: right; float: right;
margin-left: 10px; margin-left: 10px;
} }
} }

10
stylesheets/_global.scss
View file

@ -130,16 +130,12 @@ button.back {
margin-right: 10px; margin-right: 10px;
cursor: pointer; cursor: pointer;
.thumbnail {
width: 36px;
height: 36px;
}
.paperclip { .paperclip {
width: 36px; width: 36px;
height: 36px; height: 100%;
background: url('/images/paperclip.png') no-repeat; background: url('/images/paperclip.png') no-repeat center center;
background-size: 90%; background-size: 90%;
background-position: center 6px; margin-top: 4px;
} }
input[type=file] { input[type=file] {

36
stylesheets/manifest.css
View file

@ -116,15 +116,12 @@ button.back {
position: relative; position: relative;
margin-right: 10px; margin-right: 10px;
cursor: pointer; } cursor: pointer; }
.file-input .thumbnail {
width: 36px;
height: 36px; }
.file-input .paperclip { .file-input .paperclip {
width: 36px; width: 36px;
height: 36px; height: 100%;
background: url("/images/paperclip.png") no-repeat; background: url("/images/paperclip.png") no-repeat center center;
background-size: 90%; background-size: 90%;
background-position: center 6px; } margin-top: 4px; }
.file-input input[type=file] { .file-input input[type=file] {
display: none; display: none;
position: absolute; position: absolute;
@ -427,15 +424,17 @@ input.search {
.conversations .unread .contact-details .last-timestamp { .conversations .unread .contact-details .last-timestamp {
font-weight: bold; } font-weight: bold; }
.conversation { .conversation .file-input .close {
padding: 36px 0; } top: -10px; }
.conversation .file-input .close { .conversation .conversation-title {
top: -10px; } line-height: 36px; }
.conversation .conversation-title { .conversation #header {
line-height: 36px; } position: inherit; }
.conversation .discussion-container {
height: calc(100% - 2 * 36px); }
.conversation + .new-group-update-form, .conversation + .new-group-update-form,
.conversation, .discussion-container, .message-list, .message-detail, .key-verification { .conversation, .message-list, .message-detail, .key-verification {
height: 100%; } height: 100%; }
.key-verification { .key-verification {
@ -666,7 +665,7 @@ input.search {
width: calc(100% - 2px); width: calc(100% - 2px);
border-top: 1px solid #f3f3f3; border-top: 1px solid #f3f3f3;
background: white; } background: white; }
.bottom-bar button, .bottom-bar input { .bottom-bar button, .bottom-bar input, .bottom-bar textarea {
color: #454545; } color: #454545; }
.bottom-bar button { .bottom-bar button {
position: absolute; position: absolute;
@ -693,11 +692,14 @@ input.search {
cursor: pointer; } cursor: pointer; }
.bottom-bar .send-btn::before { .bottom-bar .send-btn::before {
content: '+'; } content: '+'; }
.bottom-bar form, .bottom-bar input { .bottom-bar form, .bottom-bar input, .bottom-bar textarea {
height: 100%; } height: 100%; }
.bottom-bar input[type=textarea] { .bottom-bar .send-message {
display: block; display: block;
height: 100%; width: calc(100% - 2 * 36px - 20px);
min-height: 35px;
max-height: 100px;
padding: 10px;
border: 0; border: 0;
outline: 0; outline: 0;
z-index: 5; } z-index: 5; }

2
stylesheets/manifest.css.map
View file

File diff suppressed because one or more lines are too long