Browse files

Stop propagation of mouse events on warning toggle button

In Firefox, Blockly seems to handle mouse events differently than in
Chrome. This generally isn't a problem, but it affects the warning
indicator toggle button. Blockly starts a drag at the mousedown but
then we never will see a mouseup or click event.

This change registers a mouse down listener on the toggle to stop
propagation to Blockly so that the warning indicator can receive the
click event. We also update to include support for touch events on the
toggle button to support App Inventor on tablets.

Change-Id: Iba4e1e274dd3eac86939bb122a1c7f15cc7d41f9
  • Loading branch information...
ewpatton authored and SusanRatiLane committed Nov 7, 2018
1 parent cef1f87 commit c1e9dc7e38600eb702373cf3d78c896508a9eb98
Showing with 12 additions and 4 deletions.
  1. +12 −4 appinventor/blocklyeditor/src/warningIndicator.js
@@ -115,12 +115,13 @@ Blockly.WarningIndicator.prototype.createDom = function() {
//'d': 'M 3.1931458,3.1931458 12.756854,12.756854 8,8 3.0931458,12.756854 12.756854,3.0931458'},

this.warningToggleGroup_ = Blockly.utils.createSvgElement('g', {}, this.svgGroup_);
this.warningToggle_ = Blockly.utils.createSvgElement('rect',
{'fill': "#eeeeee",'width':"120", 'height':"20", 'x':"-15",'y':"20",'style':"stroke:black;stroke-width:1;cursor:pointer;"},
this.warningToggleText_ = Blockly.utils.createSvgElement('text',
{'fill': "black", 'transform':"translate(45,35)",'text-anchor':"middle",'style':"font-size:10pt;cursor:pointer;"},
this.warningToggleText_.textContent = Blockly.Msg.SHOW_WARNINGS;

return this.svgGroup_;
@@ -133,8 +134,15 @@ Blockly.WarningIndicator.prototype.init = function() {
// If the document resizes, reposition the warning indicator.
Blockly.bindEvent_(window, 'resize', this, this.position_);
Blockly.bindEvent_(this.warningToggle_, 'mouseup', this, Blockly.WarningIndicator.prototype.onclickWarningToggle);
Blockly.bindEvent_(this.warningToggleText_, 'mouseup', this, Blockly.WarningIndicator.prototype.onclickWarningToggle);
Blockly.bindEvent_(this.warningToggleGroup_, 'click', this, Blockly.WarningIndicator.prototype.onclickWarningToggle);

// We stop propagating the mousedown event so that Blockly doesn't prevent click events in Firefox, which breaks
// the click event handler above.
Blockly.bindEvent_(this.warningToggleGroup_, 'mousedown', this, function(e) { e.stopPropagation() });

// Stopping propagation of the mousedown event breaks touch events on tablets. We register here for touchend on the
// toggle button so that we can simulate a click event.
Blockly.bindEvent_(this.warningToggleGroup_, 'touchend', this, Blockly.WarningIndicator.prototype.onclickWarningToggle);


0 comments on commit c1e9dc7

Please sign in to comment.