Koenig - Close (+) menu when pressing Escape

refs https://github.com/TryGhost/Ghost/issues/9311
- close menu and reset the caret position in the editor when <kbd>Esacape</kbd> is pressed whilst the (+) menu is open
This commit is contained in:
Kevin Ansfield 2018-03-14 10:42:36 +00:00
parent 5a28c80f7a
commit eb26d0baca

View File

@ -24,6 +24,7 @@ export default Component.extend({
_lastEditorRange: null, _lastEditorRange: null,
_hasCursorButton: false, _hasCursorButton: false,
_onMousemoveHandler: null, _onMousemoveHandler: null,
_onKeydownHandler: null,
// closure actions // closure actions
replaceWithCardSection() {}, replaceWithCardSection() {},
@ -69,6 +70,7 @@ export default Component.extend({
window.removeEventListener('mousedown', this._onWindowMousedownHandler); window.removeEventListener('mousedown', this._onWindowMousedownHandler);
window.removeEventListener('resize', this._onResizeHandler); window.removeEventListener('resize', this._onResizeHandler);
window.removeEventListener('mousemove', this._onMousemoveHandler); window.removeEventListener('mousemove', this._onMousemoveHandler);
window.removeEventListener('keydown', this._onKeydownHandler);
}, },
actions: { actions: {
@ -152,10 +154,7 @@ export default Component.extend({
// gets inserted in the correct place because editorRange will be // gets inserted in the correct place because editorRange will be
// wherever the cursor currently is if the menu was opened via a // wherever the cursor currently is if the menu was opened via a
// mouseover button // mouseover button
this.set('editorRange', this._editorRange); this._moveCaretToCachedEditorRange();
this.get('editor').run((postEditor) => {
postEditor.setRange(this._editorRange);
});
// focus the search immediately so that you can filter immediately // focus the search immediately so that you can filter immediately
run.schedule('afterRender', this, function () { run.schedule('afterRender', this, function () {
@ -164,10 +163,12 @@ export default Component.extend({
// watch the window for mousedown events so that we can close the menu // watch the window for mousedown events so that we can close the menu
// when we detect a click outside // when we detect a click outside
this._onWindowMousedownHandler = run.bind(this, (event) => { this._onWindowMousedownHandler = run.bind(this, this._handleWindowMousedown);
this._handleWindowMousedown(event);
});
window.addEventListener('mousedown', this._onWindowMousedownHandler); window.addEventListener('mousedown', this._onWindowMousedownHandler);
// watch for keydown events so that we can close the mnu on Escape
this._onKeydownHandler = run.bind(this, this._handleKeydown);
window.addEventListener('keydown', this._onKeydownHandler);
}, },
_hideMenu() { _hideMenu() {
@ -175,8 +176,9 @@ export default Component.extend({
// reset our cached editorRange // reset our cached editorRange
this._editorRange = null; this._editorRange = null;
// stop watching the body for clicks // stop watching the body for clicks and keydown
window.removeEventListener('mousedown', this._onWindowMousedownHandler); window.removeEventListener('mousedown', this._onWindowMousedownHandler);
window.removeEventListener('keydown', this._onKeydownHandler);
// hide the menu // hide the menu
this.set('showMenu', false); this.set('showMenu', false);
@ -236,10 +238,25 @@ export default Component.extend({
this._mousemoveTicking = false; this._mousemoveTicking = false;
}, },
_handleKeydown(event) {
if (event.code === 'Escape') {
// reset the caret position so we have a caret after closing
this._moveCaretToCachedEditorRange();
this._hideMenu();
}
},
_handleResize() { _handleResize() {
if (this.get('showButton')) { if (this.get('showButton')) {
this._throttleResize = run.throttle(this, this._positionMenu, 100); this._throttleResize = run.throttle(this, this._positionMenu, 100);
} }
},
_moveCaretToCachedEditorRange() {
this.set('editorRange', this._editorRange);
this.get('editor').run((postEditor) => {
postEditor.setRange(this._editorRange);
});
} }
}); });