TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-28 22:43:30 +03:00
Code Issues Projects Releases Wiki Activity

Koenig - Don't display toolbar for keyboard selections

Browse Source 
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
1 changed files with 33 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
ghost/admin/lib/koenig-editor/addon/components/koenig-toolbar.js
View File

@ -36,6 +36,7 @@ export default Component.extend({
_isMouseDown: false,
_hasSelectedRange: false,
_onMousedownHandler: null,
_onMousemoveHandler: null,
_onMouseupHandler: null,
_onResizeHandler: null,
@ -90,6 +91,7 @@ export default Component.extend({
this._removeStyleElement();
run.cancel(this._throttleResize);
window.removeEventListener('mousedown', this._onMousedownHandler);
window.removeEventListener('mousemove', this._onMousemoveHandler);
window.removeEventListener('mouseup', this._onMouseupHandler);
window.removeEventListener('resize', this._onResizeHandler);
},
@ -106,8 +108,8 @@ export default Component.extend({
/* private methods ------------------------------------------------------ */
_toggleVisibility: task(function* () {
// debounce for 100ms to account for "click to deselect" otherwise we
_toggleVisibility: task(function* (skipMousemove = false) {
// debounce for 50ms to account for "click to deselect" otherwise we
// run twice and the fade out animation jumps position
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 (this._hasSelectedRange && !this._isMouseDown) {
this._showToolbar();
this._showToolbar(skipMousemove);
} else {
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) {
if (event.which === 1) {
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.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
this._lastRange = this.get('editorRange');
@ -158,6 +184,7 @@ export default Component.extend({
_hideToolbar() {
this.set('showToolbar', false);
this._lastRange = null;
this._removeMousemoveHandler();
},
_positionToolbar() {