2018-02-28 14:44:03 +03:00
|
|
|
import TextArea from '@ember/component/text-area';
|
2016-05-24 15:06:59 +03:00
|
|
|
import TextInputMixin from 'ghost-admin/mixins/text-input';
|
2022-02-01 12:34:03 +03:00
|
|
|
import classic from 'ember-classic-decorator';
|
|
|
|
import {classNames} from '@ember-decorators/component';
|
2017-08-22 10:53:26 +03:00
|
|
|
import {run} from '@ember/runloop';
|
2017-10-30 12:38:01 +03:00
|
|
|
import {inject as service} from '@ember/service';
|
2014-09-19 03:42:07 +04:00
|
|
|
|
2022-02-01 12:34:03 +03:00
|
|
|
@classic
|
|
|
|
@classNames('gh-input')
|
|
|
|
export default class GhTextarea extends TextArea.extend(TextInputMixin) {
|
|
|
|
@service
|
|
|
|
resizeDetector;
|
2017-05-18 11:01:30 +03:00
|
|
|
|
2022-02-01 12:34:03 +03:00
|
|
|
autoExpand = false;
|
2017-05-18 11:01:30 +03:00
|
|
|
|
2018-01-11 20:43:23 +03:00
|
|
|
didReceiveAttrs() {
|
2022-02-01 12:34:03 +03:00
|
|
|
super.didReceiveAttrs(...arguments);
|
2017-05-18 11:01:30 +03:00
|
|
|
|
2018-01-11 20:43:23 +03:00
|
|
|
// trigger auto-expand any time the value changes
|
2019-03-06 16:53:54 +03:00
|
|
|
if (this.autoExpand) {
|
2018-01-11 20:43:23 +03:00
|
|
|
run.scheduleOnce('afterRender', this, this._autoExpand);
|
2017-05-18 11:01:30 +03:00
|
|
|
}
|
2022-02-01 12:34:03 +03:00
|
|
|
}
|
2017-05-18 11:01:30 +03:00
|
|
|
|
2018-03-19 14:54:54 +03:00
|
|
|
willInsertElement() {
|
2022-02-01 12:34:03 +03:00
|
|
|
super.willInsertElement(...arguments);
|
2018-03-19 14:54:54 +03:00
|
|
|
|
|
|
|
// disable the draggable resize element that browsers add to textareas
|
2019-03-06 16:53:54 +03:00
|
|
|
if (this.autoExpand) {
|
2018-03-19 14:54:54 +03:00
|
|
|
this.element.style.resize = 'none';
|
|
|
|
}
|
2022-02-01 12:34:03 +03:00
|
|
|
}
|
2018-03-19 14:54:54 +03:00
|
|
|
|
2017-05-18 11:01:30 +03:00
|
|
|
didInsertElement() {
|
2022-02-01 12:34:03 +03:00
|
|
|
super.didInsertElement(...arguments);
|
2017-05-18 11:01:30 +03:00
|
|
|
|
|
|
|
// set up resize handler on element insert so that we can autoexpand
|
|
|
|
// when the element container changes size
|
2019-03-06 16:53:54 +03:00
|
|
|
if (this.autoExpand) {
|
2017-05-18 11:01:30 +03:00
|
|
|
run.scheduleOnce('afterRender', this, this._setupAutoExpand);
|
|
|
|
}
|
2018-01-30 13:01:07 +03:00
|
|
|
|
2019-03-06 16:53:54 +03:00
|
|
|
if (this.didCreateTextarea) {
|
|
|
|
this.didCreateTextarea(this.element);
|
2018-01-30 13:01:07 +03:00
|
|
|
}
|
2022-02-01 12:34:03 +03:00
|
|
|
}
|
2017-05-18 11:01:30 +03:00
|
|
|
|
2018-01-11 20:43:23 +03:00
|
|
|
willDestroyElement() {
|
|
|
|
this._teardownAutoExpand();
|
2022-02-01 12:34:03 +03:00
|
|
|
super.willDestroyElement(...arguments);
|
|
|
|
}
|
2017-05-18 11:01:30 +03:00
|
|
|
|
|
|
|
_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
|
2017-07-10 18:09:50 +03:00
|
|
|
if (el) {
|
|
|
|
el.style.height = 0;
|
|
|
|
el.style.height = `${el.scrollHeight}px`;
|
|
|
|
}
|
2022-02-01 12:34:03 +03:00
|
|
|
}
|
2017-05-18 11:01:30 +03:00
|
|
|
|
|
|
|
_setupAutoExpand() {
|
|
|
|
this._resizeCallback = run.bind(this, this._onResize);
|
2019-03-06 16:53:54 +03:00
|
|
|
this.resizeDetector.setup(this.autoExpand, this._resizeCallback);
|
2017-05-18 11:01:30 +03:00
|
|
|
this._autoExpand();
|
2022-02-01 12:34:03 +03:00
|
|
|
}
|
2017-05-18 11:01:30 +03:00
|
|
|
|
|
|
|
_onResize() {
|
|
|
|
this._autoExpand();
|
2022-02-01 12:34:03 +03:00
|
|
|
}
|
2017-05-18 11:01:30 +03:00
|
|
|
|
|
|
|
_teardownAutoExpand() {
|
2019-03-06 16:53:54 +03:00
|
|
|
this.resizeDetector.teardown(this.autoExpand, this._resizeCallback);
|
2017-05-18 11:01:30 +03:00
|
|
|
}
|
2022-02-01 12:34:03 +03:00
|
|
|
}
|