Fixes toolbox and menu dropdown on mobile. (#2931)

* Fixes toolbox and menu dropdown for mobile.
This commit is contained in:
Sam El-Husseini
2019-08-30 10:23:42 -07:00
committed by GitHub
parent 3b81cb3f05
commit 03b1e7f8d4
4 changed files with 16 additions and 38 deletions

View File

@@ -145,8 +145,8 @@ Blockly.Menu.prototype.attachEvents_ = function() {
this.mouseOverHandler_ = Blockly.bindEventWithChecks_(el,
'mouseover', this, this.handleMouseOver_, true);
this.mouseUpHandler_ = Blockly.bindEventWithChecks_(el,
'mouseup', this, this.handleMouseUp_, true);
this.clickHandler_ = Blockly.bindEventWithChecks_(el,
'click', this, this.handleClick_, true);
this.mouseEnterHandler_ = Blockly.bindEventWithChecks_(el,
'mouseenter', this, this.handleMouseEnter_, true);
this.mouseLeaveHandler_ = Blockly.bindEventWithChecks_(el,
@@ -162,7 +162,7 @@ Blockly.Menu.prototype.attachEvents_ = function() {
*/
Blockly.Menu.prototype.detachEvents_ = function() {
Blockly.unbindEvent_(this.mouseOverHandler_);
Blockly.unbindEvent_(this.mouseUpHandler_);
Blockly.unbindEvent_(this.clickHandler_);
Blockly.unbindEvent_(this.mouseEnterHandler_);
Blockly.unbindEvent_(this.mouseLeaveHandler_);
Blockly.unbindEvent_(this.onKeyDownWrapper_);
@@ -392,15 +392,15 @@ Blockly.Menu.prototype.handleMouseOver_ = function(e) {
};
/**
* Handles mouse up events. Pass the event onto the child
* Handles click events. Pass the event onto the child
* menuitem to handle.
* @param {Event} e Mouse event to handle.
* @param {Event} e Click to handle.
* @private
*/
Blockly.Menu.prototype.handleMouseUp_ = function(e) {
Blockly.Menu.prototype.handleClick_ = function(e) {
var menuItem = this.getMenuItem(/** @type {Node} */ (e.target));
if (menuItem && menuItem.handleMouseUp(e)) {
if (menuItem && menuItem.handleClick(e)) {
e.preventDefault();
}
};

View File

@@ -266,12 +266,12 @@ Blockly.MenuItem.prototype.setEnabled = function(enabled) {
};
/**
* Handles mouseup events. If the component is enabled, trigger
* Handles click events. If the component is enabled, trigger
* the action assosiated with this menu item.
* @param {Event} _e Mouse event to handle.
* @package
*/
Blockly.MenuItem.prototype.handleMouseUp = function(_e) {
Blockly.MenuItem.prototype.handleClick = function(_e) {
if (this.isEnabled()) {
this.setHighlighted(true);
this.performActionInternal();

View File

@@ -30,6 +30,7 @@ goog.provide('Blockly.tree.TreeControl');
goog.require('Blockly.tree.TreeNode');
goog.require('Blockly.tree.BaseNode');
goog.require('Blockly.utils.aria');
goog.require('Blockly.utils.style');
/**
@@ -323,18 +324,11 @@ Blockly.tree.TreeControl.prototype.attachEvents_ = function() {
this.onBlurWrapper_ = Blockly.bindEvent_(el,
'blur', this, this.handleBlur_);
this.onMousedownWrapper_ = Blockly.bindEventWithChecks_(el,
'mousedown', this, this.handleMouseEvent_);
this.onClickWrapper_ = Blockly.bindEventWithChecks_(el,
'click', this, this.handleMouseEvent_);
this.onKeydownWrapper_ = Blockly.bindEvent_(el,
'keydown', this, this.handleKeyEvent_);
if (Blockly.Touch.TOUCH_ENABLED) {
this.onTouchEndWrapper_ = Blockly.bindEventWithChecks_(el,
'touchend', this, this.handleTouchEvent_);
}
};
/**
@@ -344,12 +338,8 @@ Blockly.tree.TreeControl.prototype.attachEvents_ = function() {
Blockly.tree.TreeControl.prototype.detachEvents_ = function() {
Blockly.unbindEvent_(this.onFocusWrapper_);
Blockly.unbindEvent_(this.onBlurWrapper_);
Blockly.unbindEvent_(this.onMousedownWrapper_);
Blockly.unbindEvent_(this.onClickWrapper_);
Blockly.unbindEvent_(this.onKeydownWrapper_);
if (this.onTouchEndWrapper_) {
Blockly.unbindEvent_(this.onTouchEndWrapper_);
}
};
/**
@@ -371,21 +361,6 @@ Blockly.tree.TreeControl.prototype.handleMouseEvent_ = function(e) {
}
};
/**
* Handles touch events.
* @param {!Event} e The browser event.
* @private
*/
Blockly.tree.TreeControl.prototype.handleTouchEvent_ = function(e) {
var node = this.getNodeFromEvent_(e);
if (node && e.type === 'touchend') {
// Fire asynchronously since onMouseDown takes long enough that the browser
// would fire the default mouse event before this method returns.
// Same behaviour for click and touch.
setTimeout(node.onClick_.bind(node, e), 1);
}
};
/**
* Handles key down on the tree.
* @param {!Event} e The browser event.
@@ -399,6 +374,9 @@ Blockly.tree.TreeControl.prototype.handleKeyEvent_ = function(e) {
handled = (this.selectedItem_ && this.selectedItem_.onKeyDown(e)) || handled;
if (handled) {
Blockly.utils.style.scrollIntoContainerView(
/** @type {!Element} */ (this.selectedItem_.getElement()),
/** @type {!Element} */ (this.getElement().parentNode));
e.preventDefault();
}

View File

@@ -557,8 +557,8 @@ Blockly.FieldColour.prototype.dropdownCreate_ = function() {
}
// Configure event handler on the table to listen for any event in a cell.
this.onMouseUpWrapper_ = Blockly.bindEventWithChecks_(table,
'mouseup', this, this.onClick_, true);
this.onClickWrapper_ = Blockly.bindEventWithChecks_(table,
'click', this, this.onClick_, true);
this.onMouseMoveWrapper_ = Blockly.bindEventWithChecks_(table,
'mousemove', this, this.onMouseMove_, true);
this.onMouseEnterWrapper_ = Blockly.bindEventWithChecks_(table,
@@ -576,7 +576,7 @@ Blockly.FieldColour.prototype.dropdownCreate_ = function() {
* @private
*/
Blockly.FieldColour.prototype.dropdownDispose_ = function() {
Blockly.unbindEvent_(this.onMouseUpWrapper_);
Blockly.unbindEvent_(this.onClickWrapper_);
Blockly.unbindEvent_(this.onMouseMoveWrapper_);
Blockly.unbindEvent_(this.onMouseEnterWrapper_);
Blockly.unbindEvent_(this.onMouseLeaveWrapper_);