Bartosz Dziewoński has uploaded a new change for review.
https://gerrit.wikimedia.org/r/230566
Change subject: Don't directly use #addEventListener for compatibility with IE 8
......................................................................
Don't directly use #addEventListener for compatibility with IE 8
Introduces two methods:
* OO.ui.addCaptureEventListener( node, eventName, handler ), to be
used instead of node.addEventListener( eventName, handler, true ).
* OO.ui.removeCaptureEventListener( node, eventName, handler ), to be
used instead of node.removeEventListener( eventName, handler, true ).
On IE 8, fall back to using #attachEvent, which does not support
capturing event listeners, but should still mostly work and at least
won't throw exceptions.
For non-capturing event listeners, we already use jQuery's .on()
method everywhere.
Change-Id: I3967d893b9afd6dbe94186cba808ac656e70b9fe
---
M src/ToolGroup.js
M src/core.js
M src/mixins/ButtonElement.js
M src/toolgroups/PopupToolGroup.js
M src/widgets/MenuSelectWidget.js
M src/widgets/PopupWidget.js
M src/widgets/SelectWidget.js
7 files changed, 64 insertions(+), 42 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/66/230566/1
diff --git a/src/ToolGroup.js b/src/ToolGroup.js
index 4e6e845..bb1b56c 100644
--- a/src/ToolGroup.js
+++ b/src/ToolGroup.js
@@ -175,8 +175,8 @@
this.pressed = this.getTargetTool( e );
if ( this.pressed ) {
this.pressed.setActive( true );
- this.getElementDocument().addEventListener( 'mouseup',
this.onCapturedMouseKeyUpHandler, true );
- this.getElementDocument().addEventListener( 'keyup',
this.onCapturedMouseKeyUpHandler, true );
+ OO.ui.addCaptureEventListener(
this.getElementDocument(), 'mouseup', this.onCapturedMouseKeyUpHandler );
+ OO.ui.addCaptureEventListener(
this.getElementDocument(), 'keyup', this.onCapturedMouseKeyUpHandler );
}
return false;
}
@@ -189,8 +189,8 @@
* @param {Event} e Mouse up or key up event
*/
OO.ui.ToolGroup.prototype.onCapturedMouseKeyUp = function ( e ) {
- this.getElementDocument().removeEventListener( 'mouseup',
this.onCapturedMouseKeyUpHandler, true );
- this.getElementDocument().removeEventListener( 'keyup',
this.onCapturedMouseKeyUpHandler, true );
+ OO.ui.removeCaptureEventListener( this.getElementDocument(), 'mouseup',
this.onCapturedMouseKeyUpHandler );
+ OO.ui.removeCaptureEventListener( this.getElementDocument(), 'keyup',
this.onCapturedMouseKeyUpHandler );
// onMouseKeyUp 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.onMouseKeyUp( e );
diff --git a/src/core.js b/src/core.js
index 433e65a..b4bf0e3 100644
--- a/src/core.js
+++ b/src/core.js
@@ -185,6 +185,38 @@
};
/**
+ * Proxy for `node.addEventListener( eventName, handler, true )`, if the
browser supports it.
+ * Otherwise falls back to non-capturing event listeners.
+ *
+ * @param {HTMLElement} node
+ * @param {string} eventName
+ * @param {Function} handler
+ */
+OO.ui.addCaptureEventListener = function ( node, eventName, handler ) {
+ if ( node.addEventListener ) {
+ node.addEventListener( eventName, handler, true );
+ } else {
+ node.attachEvent( 'on' + eventName, handler );
+ }
+};
+
+/**
+ * Proxy for `node.removeEventListener( eventName, handler, true )`, if the
browser supports it.
+ * Otherwise falls back to non-capturing event listeners.
+ *
+ * @param {HTMLElement} node
+ * @param {string} eventName
+ * @param {Function} handler
+ */
+OO.ui.removeCaptureEventListener = function ( node, eventName, handler ) {
+ if ( node.addEventListener ) {
+ node.removeEventListener( eventName, handler, true );
+ } else {
+ node.detachEvent( 'on' + eventName, handler );
+ }
+};
+
+/**
* Reconstitute a JavaScript object corresponding to a widget created by
* the PHP implementation.
*
diff --git a/src/mixins/ButtonElement.js b/src/mixins/ButtonElement.js
index 44e8606..1099ceb 100644
--- a/src/mixins/ButtonElement.js
+++ b/src/mixins/ButtonElement.js
@@ -113,7 +113,7 @@
this.$element.addClass( 'oo-ui-buttonElement-pressed' );
// Run the mouseup handler no matter where the mouse is when the button
is let go, so we can
// reliably remove the pressed class
- this.getElementDocument().addEventListener( 'mouseup',
this.onMouseUpHandler, true );
+ OO.ui.addCaptureEventListener( this.getElementDocument(), 'mouseup',
this.onMouseUpHandler );
// Prevent change of focus unless specifically configured otherwise
if ( this.constructor.static.cancelButtonMouseDownEvents ) {
return false;
@@ -132,7 +132,7 @@
}
this.$element.removeClass( 'oo-ui-buttonElement-pressed' );
// Stop listening for mouseup, since we only needed this once
- this.getElementDocument().removeEventListener( 'mouseup',
this.onMouseUpHandler, true );
+ OO.ui.removeCaptureEventListener( this.getElementDocument(), 'mouseup',
this.onMouseUpHandler );
};
/**
@@ -163,7 +163,7 @@
this.$element.addClass( 'oo-ui-buttonElement-pressed' );
// Run the keyup handler no matter where the key is when the button is
let go, so we can
// reliably remove the pressed class
- this.getElementDocument().addEventListener( 'keyup',
this.onKeyUpHandler, true );
+ OO.ui.addCaptureEventListener( this.getElementDocument(), 'keyup',
this.onKeyUpHandler );
};
/**
@@ -178,7 +178,7 @@
}
this.$element.removeClass( 'oo-ui-buttonElement-pressed' );
// Stop listening for keyup, since we only needed this once
- this.getElementDocument().removeEventListener( 'keyup',
this.onKeyUpHandler, true );
+ OO.ui.removeCaptureEventListener( this.getElementDocument(), 'keyup',
this.onKeyUpHandler );
};
/**
diff --git a/src/toolgroups/PopupToolGroup.js b/src/toolgroups/PopupToolGroup.js
index 16844f1..fdaf280 100644
--- a/src/toolgroups/PopupToolGroup.js
+++ b/src/toolgroups/PopupToolGroup.js
@@ -168,8 +168,8 @@
if ( this.active !== value ) {
this.active = value;
if ( value ) {
- this.getElementDocument().addEventListener( 'mouseup',
this.onBlurHandler, true );
- this.getElementDocument().addEventListener( 'keyup',
this.onBlurHandler, true );
+ OO.ui.addCaptureEventListener(
this.getElementDocument(), 'mouseup', this.onBlurHandler );
+ OO.ui.addCaptureEventListener(
this.getElementDocument(), 'keyup', this.onBlurHandler );
this.$clippable.css( 'left', '' );
// Try anchoring the popup to the left first
@@ -197,8 +197,8 @@
} );
}
} else {
- this.getElementDocument().removeEventListener(
'mouseup', this.onBlurHandler, true );
- this.getElementDocument().removeEventListener( 'keyup',
this.onBlurHandler, true );
+ OO.ui.removeCaptureEventListener(
this.getElementDocument(), 'mouseup', this.onBlurHandler );
+ OO.ui.removeCaptureEventListener(
this.getElementDocument(), 'keyup', this.onBlurHandler );
this.$element.removeClass(
'oo-ui-popupToolGroup-active
oo-ui-popupToolGroup-left oo-ui-popupToolGroup-right'
);
diff --git a/src/widgets/MenuSelectWidget.js b/src/widgets/MenuSelectWidget.js
index 40c3690..dbdb744 100644
--- a/src/widgets/MenuSelectWidget.js
+++ b/src/widgets/MenuSelectWidget.js
@@ -293,16 +293,12 @@
// Auto-hide
if ( this.autoHide ) {
- this.getElementDocument().addEventListener(
- 'mousedown',
this.onDocumentMouseDownHandler, true
- );
+ OO.ui.addCaptureEventListener(
this.getElementDocument(), 'mousedown', this.onDocumentMouseDownHandler );
}
} else {
this.unbindKeyDownListener();
this.unbindKeyPressListener();
- this.getElementDocument().removeEventListener(
- 'mousedown', this.onDocumentMouseDownHandler,
true
- );
+ OO.ui.removeCaptureEventListener(
this.getElementDocument(), 'mousedown', this.onDocumentMouseDownHandler );
this.toggleClipping( false );
}
}
diff --git a/src/widgets/PopupWidget.js b/src/widgets/PopupWidget.js
index 98deec9..a2e078c 100644
--- a/src/widgets/PopupWidget.js
+++ b/src/widgets/PopupWidget.js
@@ -168,7 +168,7 @@
*/
OO.ui.PopupWidget.prototype.bindMouseDownListener = function () {
// Capture clicks outside popup
- this.getElementWindow().addEventListener( 'mousedown',
this.onMouseDownHandler, true );
+ OO.ui.addCaptureEventListener( this.getElementWindow(), 'mousedown',
this.onMouseDownHandler );
};
/**
@@ -188,7 +188,7 @@
* @private
*/
OO.ui.PopupWidget.prototype.unbindMouseDownListener = function () {
- this.getElementWindow().removeEventListener( 'mousedown',
this.onMouseDownHandler, true );
+ OO.ui.removeCaptureEventListener( this.getElementWindow(), 'mousedown',
this.onMouseDownHandler );
};
/**
@@ -214,7 +214,7 @@
* @private
*/
OO.ui.PopupWidget.prototype.bindKeyDownListener = function () {
- this.getElementWindow().addEventListener( 'keydown',
this.onDocumentKeyDownHandler, true );
+ OO.ui.addCaptureEventListener( this.getElementWindow(), 'keydown',
this.onDocumentKeyDownHandler );
};
/**
@@ -223,7 +223,7 @@
* @private
*/
OO.ui.PopupWidget.prototype.unbindKeyDownListener = function () {
- this.getElementWindow().removeEventListener( 'keydown',
this.onDocumentKeyDownHandler, true );
+ OO.ui.removeCaptureEventListener( this.getElementWindow(), 'keydown',
this.onDocumentKeyDownHandler );
};
/**
diff --git a/src/widgets/SelectWidget.js b/src/widgets/SelectWidget.js
index 14b71f2..c4d8f3c 100644
--- a/src/widgets/SelectWidget.js
+++ b/src/widgets/SelectWidget.js
@@ -161,15 +161,15 @@
if ( item && item.isSelectable() ) {
this.pressItem( item );
this.selecting = item;
- this.getElementDocument().addEventListener(
+ OO.ui.addCaptureEventListener(
+ this.getElementDocument(),
'mouseup',
- this.onMouseUpHandler,
- true
+ this.onMouseUpHandler
);
- this.getElementDocument().addEventListener(
+ OO.ui.addCaptureEventListener(
+ this.getElementDocument(),
'mousemove',
- this.onMouseMoveHandler,
- true
+ this.onMouseMoveHandler
);
}
}
@@ -198,16 +198,10 @@
this.selecting = null;
}
- this.getElementDocument().removeEventListener(
- 'mouseup',
- this.onMouseUpHandler,
- true
- );
- this.getElementDocument().removeEventListener(
- 'mousemove',
- this.onMouseMoveHandler,
- true
- );
+ OO.ui.removeCaptureEventListener( this.getElementDocument(), 'mouseup',
+ this.onMouseUpHandler );
+ OO.ui.removeCaptureEventListener( this.getElementDocument(),
'mousemove',
+ this.onMouseMoveHandler );
return false;
};
@@ -327,7 +321,7 @@
* @protected
*/
OO.ui.SelectWidget.prototype.bindKeyDownListener = function () {
- this.getElementWindow().addEventListener( 'keydown',
this.onKeyDownHandler, true );
+ OO.ui.addCaptureEventListener( this.getElementWindow(), 'keydown',
this.onKeyDownHandler );
};
/**
@@ -336,7 +330,7 @@
* @protected
*/
OO.ui.SelectWidget.prototype.unbindKeyDownListener = function () {
- this.getElementWindow().removeEventListener( 'keydown',
this.onKeyDownHandler, true );
+ OO.ui.removeCaptureEventListener( this.getElementWindow(), 'keydown',
this.onKeyDownHandler );
};
/**
@@ -445,7 +439,7 @@
* @protected
*/
OO.ui.SelectWidget.prototype.bindKeyPressListener = function () {
- this.getElementWindow().addEventListener( 'keypress',
this.onKeyPressHandler, true );
+ OO.ui.addCaptureEventListener( this.getElementWindow(), 'keypress',
this.onKeyPressHandler );
};
/**
@@ -457,7 +451,7 @@
* @protected
*/
OO.ui.SelectWidget.prototype.unbindKeyPressListener = function () {
- this.getElementWindow().removeEventListener( 'keypress',
this.onKeyPressHandler, true );
+ OO.ui.removeCaptureEventListener( this.getElementWindow(), 'keypress',
this.onKeyPressHandler );
this.clearKeyPressBuffer();
};
--
To view, visit https://gerrit.wikimedia.org/r/230566
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I3967d893b9afd6dbe94186cba808ac656e70b9fe
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
