mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-24 23:48:13 -05:00
Koenig - Don't display toolbar for keyboard selections
refs https://github.com/TryGhost/Ghost/issues/9505 - implements similar `mousemove` event handling in `{{koenig-toolbar}}` as we use in `{{koenig-card}}` to not show the toolbar until we are sure there's mouse interaction
This commit is contained in:
parent
3ef3ebfd6b
commit
775e59f55b
1 changed files with 33 additions and 6 deletions
|
@ -36,6 +36,7 @@ export default Component.extend({
|
||||||
_isMouseDown: false,
|
_isMouseDown: false,
|
||||||
_hasSelectedRange: false,
|
_hasSelectedRange: false,
|
||||||
_onMousedownHandler: null,
|
_onMousedownHandler: null,
|
||||||
|
_onMousemoveHandler: null,
|
||||||
_onMouseupHandler: null,
|
_onMouseupHandler: null,
|
||||||
_onResizeHandler: null,
|
_onResizeHandler: null,
|
||||||
|
|
||||||
|
@ -90,6 +91,7 @@ export default Component.extend({
|
||||||
this._removeStyleElement();
|
this._removeStyleElement();
|
||||||
run.cancel(this._throttleResize);
|
run.cancel(this._throttleResize);
|
||||||
window.removeEventListener('mousedown', this._onMousedownHandler);
|
window.removeEventListener('mousedown', this._onMousedownHandler);
|
||||||
|
window.removeEventListener('mousemove', this._onMousemoveHandler);
|
||||||
window.removeEventListener('mouseup', this._onMouseupHandler);
|
window.removeEventListener('mouseup', this._onMouseupHandler);
|
||||||
window.removeEventListener('resize', this._onResizeHandler);
|
window.removeEventListener('resize', this._onResizeHandler);
|
||||||
},
|
},
|
||||||
|
@ -106,8 +108,8 @@ export default Component.extend({
|
||||||
|
|
||||||
/* private methods ------------------------------------------------------ */
|
/* private methods ------------------------------------------------------ */
|
||||||
|
|
||||||
_toggleVisibility: task(function* () {
|
_toggleVisibility: task(function* (skipMousemove = false) {
|
||||||
// debounce for 100ms to account for "click to deselect" otherwise we
|
// debounce for 50ms to account for "click to deselect" otherwise we
|
||||||
// run twice and the fade out animation jumps position
|
// run twice and the fade out animation jumps position
|
||||||
yield timeout(50);
|
yield timeout(50);
|
||||||
|
|
||||||
|
@ -121,7 +123,7 @@ export default Component.extend({
|
||||||
|
|
||||||
// if we have a range, show the toolbnar once the mouse is lifted
|
// if we have a range, show the toolbnar once the mouse is lifted
|
||||||
if (this._hasSelectedRange && !this._isMouseDown) {
|
if (this._hasSelectedRange && !this._isMouseDown) {
|
||||||
this._showToolbar();
|
this._showToolbar(skipMousemove);
|
||||||
} else {
|
} else {
|
||||||
this._hideToolbar();
|
this._hideToolbar();
|
||||||
}
|
}
|
||||||
|
@ -134,10 +136,26 @@ export default Component.extend({
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
_handleMousemove() {
|
||||||
|
if (!this.get('showToolbar')) {
|
||||||
|
this.set('showToolbar', true);
|
||||||
|
}
|
||||||
|
|
||||||
|
this._removeMousemoveHandler();
|
||||||
|
},
|
||||||
|
|
||||||
|
_removeMousemoveHandler() {
|
||||||
|
window.removeEventListener('mousemove', this._onMousemoveHandler);
|
||||||
|
this._onMousemoveHandler = null;
|
||||||
|
},
|
||||||
|
|
||||||
_handleMouseup(event) {
|
_handleMouseup(event) {
|
||||||
if (event.which === 1) {
|
if (event.which === 1) {
|
||||||
this._isMouseDown = false;
|
this._isMouseDown = false;
|
||||||
this.get('_toggleVisibility').perform();
|
// we want to skip the mousemove handler here because we know the
|
||||||
|
// selection (if there was one) was via the mouse and we don't want
|
||||||
|
// to wait for another mousemove before showing the toolbar
|
||||||
|
this.get('_toggleVisibility').perform(true);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -147,9 +165,17 @@ export default Component.extend({
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
_showToolbar() {
|
_showToolbar(skipMousemove) {
|
||||||
this._positionToolbar();
|
this._positionToolbar();
|
||||||
this.set('showToolbar', true);
|
|
||||||
|
if (skipMousemove) {
|
||||||
|
this.set('showToolbar', true);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.get('showToolbar') && !this._onMousemoveHandler) {
|
||||||
|
this._onMousemoveHandler = run.bind(this, this._handleMousemove);
|
||||||
|
window.addEventListener('mousemove', this._onMousemoveHandler);
|
||||||
|
}
|
||||||
|
|
||||||
// track displayed range so that we don't re-position unnecessarily
|
// track displayed range so that we don't re-position unnecessarily
|
||||||
this._lastRange = this.get('editorRange');
|
this._lastRange = this.get('editorRange');
|
||||||
|
@ -158,6 +184,7 @@ export default Component.extend({
|
||||||
_hideToolbar() {
|
_hideToolbar() {
|
||||||
this.set('showToolbar', false);
|
this.set('showToolbar', false);
|
||||||
this._lastRange = null;
|
this._lastRange = null;
|
||||||
|
this._removeMousemoveHandler();
|
||||||
},
|
},
|
||||||
|
|
||||||
_positionToolbar() {
|
_positionToolbar() {
|
||||||
|
|
Loading…
Add table
Reference in a new issue