Ghost/ghost/admin/app/components/gh-textarea.js

77 lines
2.1 KiB
JavaScript
Raw Normal View History

import TextArea from '@ember/component/text-area';
import TextInputMixin from 'ghost-admin/mixins/text-input';
import classic from 'ember-classic-decorator';
import {classNames} from '@ember-decorators/component';
import {run} from '@ember/runloop';
import {inject as service} from '@ember/service';
@classic
@classNames('gh-input')
export default class GhTextarea extends TextArea.extend(TextInputMixin) {
@service resizeDetector;
autoExpand = false;
didReceiveAttrs() {
super.didReceiveAttrs(...arguments);
// trigger auto-expand any time the value changes
if (this.autoExpand) {
run.scheduleOnce('afterRender', this, this._autoExpand);
}
}
willInsertElement() {
super.willInsertElement(...arguments);
// disable the draggable resize element that browsers add to textareas
if (this.autoExpand) {
this.element.style.resize = 'none';
}
}
didInsertElement() {
super.didInsertElement(...arguments);
// set up resize handler on element insert so that we can autoexpand
// when the element container changes size
if (this.autoExpand) {
run.scheduleOnce('afterRender', this, this._setupAutoExpand);
}
if (this.didCreateTextarea) {
this.didCreateTextarea(this.element);
}
}
willDestroyElement() {
this._teardownAutoExpand();
super.willDestroyElement(...arguments);
}
_autoExpand() {
let el = this.element;
// collapse the element first so that we can shrink as well as expand
// then set the height to match the text height
if (el) {
el.style.height = 0;
el.style.height = `${el.scrollHeight}px`;
}
}
_setupAutoExpand() {
this._resizeCallback = run.bind(this, this._onResize);
this.resizeDetector.setup(this.autoExpand, this._resizeCallback);
this._autoExpand();
}
_onResize() {
this._autoExpand();
}
_teardownAutoExpand() {
this.resizeDetector.teardown(this.autoExpand, this._resizeCallback);
}
}