jenkins-bot has submitted this change and it was merged.
Change subject: Handle touch events in toolbars and toolgroups
......................................................................
Handle touch events in toolbars and toolgroups
Change names of event handlers to onPointerDown and onPointerUp so that
they are not mouse-specific.
Change-Id: I538260f57944bf8a102b562784e2efca0a98f5bb
---
M src/ToolGroup.js
M src/Toolbar.js
M src/toolgroups/PopupToolGroup.js
3 files changed, 22 insertions(+), 18 deletions(-)
Approvals:
Catrope: Looks good to me, approved
jenkins-bot: Verified
diff --git a/src/ToolGroup.js b/src/ToolGroup.js
index 466c27e..3ba4d7b 100644
--- a/src/ToolGroup.js
+++ b/src/ToolGroup.js
@@ -43,8 +43,8 @@
// Events
this.$element.on( {
- 'mousedown': OO.ui.bind( this.onMouseDown, this ),
- 'mouseup': OO.ui.bind( this.onMouseUp, this ),
+ 'mousedown touchstart': OO.ui.bind( this.onPointerDown, this ),
+ 'mouseup touchend': OO.ui.bind( this.onPointerUp, this ),
'mouseover': OO.ui.bind( this.onMouseOver, this ),
'mouseout': OO.ui.bind( this.onMouseOut, this )
} );
@@ -133,8 +133,9 @@
*
* @param {jQuery.Event} e Mouse down event
*/
-OO.ui.ToolGroup.prototype.onMouseDown = function ( e ) {
- if ( !this.isDisabled() && e.which === 1 ) {
+OO.ui.ToolGroup.prototype.onPointerDown = function ( e ) {
+ // e.which is 0 for touch events, 1 for left mouse button
+ if ( !this.isDisabled() && e.which <= 1 ) {
this.pressed = this.getTargetTool( e );
if ( this.pressed ) {
this.pressed.setActive( true );
@@ -153,9 +154,9 @@
*/
OO.ui.ToolGroup.prototype.onCapturedMouseUp = function ( e ) {
this.getElementDocument().removeEventListener( 'mouseup',
this.onCapturedMouseUpHandler, true );
- // onMouseUp may be called a second time, depending on where the mouse
is when the button is
+ // onPointerUp may be called a second time, depending on where the
mouse is when the button is
// released, but since `this.pressed` will no longer be true, the
second call will be ignored.
- this.onMouseUp( e );
+ this.onPointerUp( e );
};
/**
@@ -163,10 +164,11 @@
*
* @param {jQuery.Event} e Mouse up event
*/
-OO.ui.ToolGroup.prototype.onMouseUp = function ( e ) {
+OO.ui.ToolGroup.prototype.onPointerUp = function ( e ) {
var tool = this.getTargetTool( e );
- if ( !this.isDisabled() && e.which === 1 && this.pressed &&
this.pressed === tool ) {
+ // e.which is 0 for touch events, 1 for left mouse button
+ if ( !this.isDisabled() && e.which <= 1 && this.pressed && this.pressed
=== tool ) {
this.pressed.onSelect();
}
diff --git a/src/Toolbar.js b/src/Toolbar.js
index a75758c..84cfb95 100644
--- a/src/Toolbar.js
+++ b/src/Toolbar.js
@@ -36,7 +36,7 @@
// Events
this.$element
.add( this.$bar ).add( this.$group ).add( this.$actions )
- .on( 'mousedown', OO.ui.bind( this.onMouseDown, this ) );
+ .on( 'mousedown touchstart', OO.ui.bind( this.onPointerDown,
this ) );
// Initialization
this.$group.addClass( 'oo-ui-toolbar-tools' );
@@ -83,7 +83,7 @@
*
* @param {jQuery.Event} e Mouse down event
*/
-OO.ui.Toolbar.prototype.onMouseDown = function ( e ) {
+OO.ui.Toolbar.prototype.onPointerDown = function ( e ) {
var $closestWidgetToEvent = this.$( e.target ).closest( '.oo-ui-widget'
),
$closestWidgetToToolbar = this.$element.closest(
'.oo-ui-widget' );
if ( !$closestWidgetToEvent.length || $closestWidgetToEvent[0] ===
$closestWidgetToToolbar[0] ) {
diff --git a/src/toolgroups/PopupToolGroup.js b/src/toolgroups/PopupToolGroup.js
index 90c329b..3b48dd5 100644
--- a/src/toolgroups/PopupToolGroup.js
+++ b/src/toolgroups/PopupToolGroup.js
@@ -37,8 +37,8 @@
// Events
this.$handle.on( {
- 'mousedown': OO.ui.bind( this.onHandleMouseDown, this ),
- 'mouseup': OO.ui.bind( this.onHandleMouseUp, this )
+ 'mousedown touchstart': OO.ui.bind( this.onHandlePointerDown,
this ),
+ 'mouseup touchend': OO.ui.bind( this.onHandlePointerUp, this )
} );
// Initialization
@@ -102,11 +102,12 @@
/**
* @inheritdoc
*/
-OO.ui.PopupToolGroup.prototype.onMouseUp = function ( e ) {
- if ( !this.isDisabled() && e.which === 1 ) {
+OO.ui.PopupToolGroup.prototype.onPointerUp = function ( e ) {
+ // e.which is 0 for touch events, 1 for left mouse button
+ if ( !this.isDisabled() && e.which <= 1 ) {
this.setActive( false );
}
- return OO.ui.PopupToolGroup.super.prototype.onMouseUp.call( this, e );
+ return OO.ui.PopupToolGroup.super.prototype.onPointerUp.call( this, e );
};
/**
@@ -114,7 +115,7 @@
*
* @param {jQuery.Event} e Mouse up event
*/
-OO.ui.PopupToolGroup.prototype.onHandleMouseUp = function () {
+OO.ui.PopupToolGroup.prototype.onHandlePointerUp = function () {
return false;
};
@@ -123,8 +124,9 @@
*
* @param {jQuery.Event} e Mouse down event
*/
-OO.ui.PopupToolGroup.prototype.onHandleMouseDown = function ( e ) {
- if ( !this.isDisabled() && e.which === 1 ) {
+OO.ui.PopupToolGroup.prototype.onHandlePointerDown = function ( e ) {
+ // e.which is 0 for touch events, 1 for left mouse button
+ if ( !this.isDisabled() && e.which <= 1 ) {
this.setActive( !this.active );
}
return false;
--
To view, visit https://gerrit.wikimedia.org/r/146640
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I538260f57944bf8a102b562784e2efca0a98f5bb
Gerrit-PatchSet: 4
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: JGonera <[email protected]>
Gerrit-Reviewer: Catrope <[email protected]>
Gerrit-Reviewer: Esanders <[email protected]>
Gerrit-Reviewer: JGonera <[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
