jenkins-bot has submitted this change and it was merged.
Change subject: Ignore SelectWidget mouseup events that started outside the
widget
......................................................................
Ignore SelectWidget mouseup events that started outside the widget
When pressing the mouse down from outside the widget, selection shouldn't
occur if the user drags into the widget and mouses up.
Changes:
* Button elements can be configured not to return false on mouse down
* Only bind mouse move and mouse up events after mouse down on a select,
and unbind them on mouse up - this actually saves a lot of useless event
handling too
Change-Id: I5d17555aa3a85cb951c7f77a3480f7a3b0d8920c
---
M src/elements/ButtonedElement.js
M src/widgets/ButtonOptionWidget.js
M src/widgets/SelectWidget.js
3 files changed, 46 insertions(+), 9 deletions(-)
Approvals:
Esanders: Looks good to me, approved
jenkins-bot: Verified
diff --git a/src/elements/ButtonedElement.js b/src/elements/ButtonedElement.js
index 9fdded9..00a0f28 100644
--- a/src/elements/ButtonedElement.js
+++ b/src/elements/ButtonedElement.js
@@ -36,6 +36,21 @@
}
};
+/* Setup */
+
+OO.initClass( OO.ui.ButtonedElement );
+
+/* Static Properties */
+
+/**
+ * Cancel mouse down events.
+ *
+ * @static
+ * @inheritable
+ * @property {boolean}
+ */
+OO.ui.ButtonedElement.static.cancelButtonMouseDownEvents = true;
+
/* Methods */
/**
@@ -47,16 +62,20 @@
if ( this.isDisabled() || e.which !== 1 ) {
return false;
}
- // tabIndex should generally be interacted with via the property,
- // but it's not possible to reliably unset a tabIndex via a property
- // so we use the (lowercase) "tabindex" attribute instead.
+ // tabIndex should generally be interacted with via the property, but
it's not possible to
+ // reliably unset a tabIndex via a property so we use the (lowercase)
"tabindex" attribute
this.tabIndex = this.$button.attr( 'tabindex' );
- // Remove the tab-index while the button is down to prevent the button
from stealing focus
this.$button
+ // Remove the tab-index while the button is down to prevent the
button from stealing focus
.removeAttr( 'tabindex' )
.addClass( 'oo-ui-buttonedElement-pressed' );
+ // Run the mouseup handler no matter where the mouse is when the button
is let go, so we can
+ // reliably reapply the tabindex and remove the pressed class
this.getElementDocument().addEventListener( 'mouseup',
this.onMouseUpHandler, true );
- return false;
+ // Prevent change of focus unless specifically configured otherwise
+ if ( this.constructor.static.cancelButtonMouseDownEvents ) {
+ return false;
+ }
};
/**
@@ -68,10 +87,11 @@
if ( this.isDisabled() || e.which !== 1 ) {
return false;
}
- // Restore the tab-index after the button is up to restore the button's
accesssibility
this.$button
+ // Restore the tab-index after the button is up to restore the
button's accesssibility
.attr( 'tabindex', this.tabIndex )
.removeClass( 'oo-ui-buttonedElement-pressed' );
+ // Stop listening for mouseup, since we only needed this once
this.getElementDocument().removeEventListener( 'mouseup',
this.onMouseUpHandler, true );
};
diff --git a/src/widgets/ButtonOptionWidget.js
b/src/widgets/ButtonOptionWidget.js
index e949e08..2f47eeb 100644
--- a/src/widgets/ButtonOptionWidget.js
+++ b/src/widgets/ButtonOptionWidget.js
@@ -32,6 +32,11 @@
OO.mixinClass( OO.ui.ButtonOptionWidget, OO.ui.ButtonedElement );
OO.mixinClass( OO.ui.ButtonOptionWidget, OO.ui.FlaggableElement );
+/* Static Properties */
+
+// Allow button mouse down events to pass through so they can be handled by
the parent select widget
+OO.ui.ButtonOptionWidget.static.cancelButtonMouseDownEvents = false;
+
/* Methods */
/**
diff --git a/src/widgets/SelectWidget.js b/src/widgets/SelectWidget.js
index ea8b2e2..5988c55 100644
--- a/src/widgets/SelectWidget.js
+++ b/src/widgets/SelectWidget.js
@@ -25,12 +25,12 @@
this.pressed = false;
this.selecting = null;
this.hashes = {};
+ this.onMouseUpHandler = OO.ui.bind( this.onMouseUp, this );
+ this.onMouseMoveHandler = OO.ui.bind( this.onMouseMove, this );
// Events
this.$element.on( {
'mousedown': OO.ui.bind( this.onMouseDown, this ),
- 'mouseup': OO.ui.bind( this.onMouseUp, this ),
- 'mousemove': OO.ui.bind( this.onMouseMove, this ),
'mouseover': OO.ui.bind( this.onMouseOver, this ),
'mouseleave': OO.ui.bind( this.onMouseLeave, this )
} );
@@ -104,7 +104,12 @@
if ( item && item.isSelectable() ) {
this.pressItem( item );
this.selecting = item;
- this.$( this.$.context ).one( 'mouseup', OO.ui.bind(
this.onMouseUp, this ) );
+ this.getElementDocument().addEventListener(
+ 'mouseup', this.onMouseUpHandler, true
+ );
+ this.getElementDocument().addEventListener(
+ 'mousemove', this.onMouseMoveHandler, true
+ );
}
}
return false;
@@ -132,6 +137,13 @@
this.selecting = null;
}
+ this.getElementDocument().removeEventListener(
+ 'mouseup', this.onMouseUpHandler, true
+ );
+ this.getElementDocument().removeEventListener(
+ 'mousemove', this.onMouseMoveHandler, true
+ );
+
return false;
};
--
To view, visit https://gerrit.wikimedia.org/r/133284
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I5d17555aa3a85cb951c7f77a3480f7a3b0d8920c
Gerrit-PatchSet: 7
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Trevor Parscal <[email protected]>
Gerrit-Reviewer: Esanders <[email protected]>
Gerrit-Reviewer: Trevor Parscal <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
