0
Fork 0
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:
Kevin Ansfield 2018-03-15 15:15:53 +00:00
parent 3ef3ebfd6b
commit 775e59f55b

View file

@ -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() {