fix(mail(js)): skrink autogrow md-input when content is removed

This commit is contained in:
Francis Lachapelle
2020-02-12 10:59:06 -05:00
parent dda13e602b
commit 95b3e9d4fa
2 changed files with 24 additions and 10 deletions
@@ -19,26 +19,39 @@
<textarea rows="9" md-no-autogrow sg-autogrow /> <textarea rows="9" md-no-autogrow sg-autogrow />
*/ */
sgAutogrow.$inject = ['$timeout']; sgAutogrow.$inject = ['$document', '$timeout'];
function sgAutogrow($timeout) { function sgAutogrow($document, $timeout) {
return { return {
restrict: 'A', restrict: 'A',
link: function(scope, elem, attr) { link: function(scope, elem, attr) {
var textarea = elem[0]; var textarea = elem[0];
var hiddenDiv = $document[0].createElement('div');
var content = null;
hiddenDiv.classList.add('md-input');
hiddenDiv.classList.add('plain-text');
hiddenDiv.style.display = 'none';
hiddenDiv.style.whiteSpace = 'pre-wrap';
hiddenDiv.style.wordWrap = 'break-word';
textarea.parentNode.appendChild(hiddenDiv);
textarea.style.resize = 'none';
textarea.style.overflow = 'hidden';
function AutoGrowTextArea() { function AutoGrowTextArea() {
$timeout(function() { $timeout(function() {
if (textarea.clientHeight < textarea.scrollHeight) { content = textarea.value;
textarea.style.height = textarea.scrollHeight + 'px'; content = content.replace(/\n/g, '<br>');
if (textarea.clientHeight < textarea.scrollHeight) { hiddenDiv.innerHTML = content + '<br style="line-height: 3px;">';
textarea.style.height = (textarea.scrollHeight * 2 - textarea.clientHeight) + 'px'; hiddenDiv.style.visibility = 'hidden';
} hiddenDiv.style.display = 'block';
} textarea.style.height = hiddenDiv.offsetHeight + 'px';
console.debug('resize to ' + hiddenDiv.offsetHeight + 'px');
hiddenDiv.style.visibility = 'visible';
hiddenDiv.style.display = 'none';
}); });
} }
textarea.style.overflow = 'hidden';
elem.on('keyup', AutoGrowTextArea); elem.on('keyup', AutoGrowTextArea);
elem.on('paste', AutoGrowTextArea); elem.on('paste', AutoGrowTextArea);
@@ -2,6 +2,7 @@
// Plain text editor // Plain text editor
md-input-container .md-input.plain-text { md-input-container .md-input.plain-text {
height: auto;
padding-left: $mg; padding-left: $mg;
padding-right: $mg; padding-right: $mg;
} }