From 03b1e7f8d46131f3bf84f3381aabea774febe736 Mon Sep 17 00:00:00 2001 From: Sam El-Husseini Date: Fri, 30 Aug 2019 10:23:42 -0700 Subject: [PATCH] Fixes toolbox and menu dropdown on mobile. (#2931) * Fixes toolbox and menu dropdown for mobile. --- core/components/menu/menu.js | 14 +++++++------- core/components/menu/menuitem.js | 4 ++-- core/components/tree/treecontrol.js | 30 ++++------------------------- core/field_colour.js | 6 +++--- 4 files changed, 16 insertions(+), 38 deletions(-) diff --git a/core/components/menu/menu.js b/core/components/menu/menu.js index 0b3712500..b2d3a7a1d 100644 --- a/core/components/menu/menu.js +++ b/core/components/menu/menu.js @@ -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(); } }; diff --git a/core/components/menu/menuitem.js b/core/components/menu/menuitem.js index de92e9c38..b89bf5f87 100644 --- a/core/components/menu/menuitem.js +++ b/core/components/menu/menuitem.js @@ -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(); diff --git a/core/components/tree/treecontrol.js b/core/components/tree/treecontrol.js index dea08f25b..884b7b4d2 100644 --- a/core/components/tree/treecontrol.js +++ b/core/components/tree/treecontrol.js @@ -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(); } diff --git a/core/field_colour.js b/core/field_colour.js index f9d5431b7..04c815914 100644 --- a/core/field_colour.js +++ b/core/field_colour.js @@ -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_);