This repository has been archived by the owner on Nov 28, 2022. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 1.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
✨ auto-expanding editor title input (#699)
closes TryGhost/Ghost#8463 - move generic text input handling into `text-input` mixin so it applies to text inputs and textareas - adds `autoExpand` property to `gh-textarea` that accepts a selector to watch for resize changes, if the property is set then auto-expanding behaviour is triggered any time the textarea value is changed or when the selector element is resized (this prevents change in textarea width from toggling nav or split screen mode resulting in textarea content being hidden or the textarea being taller than it's contents) - adds `ember-element-resize-detector` addon to allow watching of element resizes rather than window resizes (this was already included as a sub-dependency via `ember-light-table`->`ember-scrollable`->`ember-element-resize-detector`)
- Loading branch information
1 parent
c00af25
commit d49484a
Showing
6 changed files
with
111 additions
and
44 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,68 @@ | ||
import OneWayTextarea from 'ember-one-way-controls/components/one-way-textarea'; | ||
import TextInputMixin from 'ghost-admin/mixins/text-input'; | ||
import run from 'ember-runloop'; | ||
import injectService from 'ember-service/inject'; | ||
|
||
export default OneWayTextarea.extend(TextInputMixin, { | ||
classNames: 'gh-input' | ||
resizeDetector: injectService(), | ||
|
||
classNames: 'gh-input', | ||
|
||
autoExpand: false, | ||
|
||
willInsertElement() { | ||
this._super(...arguments); | ||
|
||
// disable the draggable resize element that browsers add to textareas | ||
if (this.get('autoExpand')) { | ||
this.element.style.resize = 'none'; | ||
} | ||
}, | ||
|
||
didInsertElement() { | ||
this._super(...arguments); | ||
|
||
// set up resize handler on element insert so that we can autoexpand | ||
// when the element container changes size | ||
if (this.get('autoExpand')) { | ||
run.scheduleOnce('afterRender', this, this._setupAutoExpand); | ||
} | ||
}, | ||
|
||
didReceiveAttrs() { | ||
this._super(...arguments); | ||
|
||
// trigger auto-expand any time the value changes | ||
if (this.get('autoExpand')) { | ||
run.scheduleOnce('afterRender', this, this._autoExpand); | ||
} | ||
}, | ||
|
||
willDestroyElement() { | ||
this._teardownAutoExpand(); | ||
this._super(...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 | ||
el.style.height = 0; | ||
el.style.height = `${el.scrollHeight}px`; | ||
}, | ||
|
||
_setupAutoExpand() { | ||
this._resizeCallback = run.bind(this, this._onResize); | ||
this.get('resizeDetector').setup(this.get('autoExpand'), this._resizeCallback); | ||
this._autoExpand(); | ||
}, | ||
|
||
_onResize() { | ||
this._autoExpand(); | ||
}, | ||
|
||
_teardownAutoExpand() { | ||
this.get('resizeDetector').teardown(this.get('autoExpand'), this._resizeCallback); | ||
} | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters