mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-26 12:21:36 +03:00
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:
parent
5a28c80f7a
commit
eb26d0baca
@ -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);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user