/*!
- * OOUI v0.31.4
+ * OOUI v0.32.0
* https://www.mediawiki.org/wiki/OOUI
*
* Copyright 2011–2019 OOUI Team and other contributors.
* Released under the MIT license
* http://oojs.mit-license.org
*
- * Date: 2019-04-16T23:14:51Z
+ * Date: 2019-05-29T00:38:42Z
*/
( function ( OO ) {
*
* @protected
* @param {jQuery.Event} e Mouse down event
- * @return {undefined/boolean} False to prevent default if event is handled
+ * @return {undefined|boolean} False to prevent default if event is handled
*/
OO.ui.mixin.ButtonElement.prototype.onMouseDown = function ( e ) {
if ( this.isDisabled() || e.which !== OO.ui.MouseButtons.LEFT ) {
* @protected
* @param {jQuery.Event} e Mouse click event
* @fires click
- * @return {undefined/boolean} False to prevent default if event is handled
+ * @return {undefined|boolean} False to prevent default if event is handled
*/
OO.ui.mixin.ButtonElement.prototype.onClick = function ( e ) {
if ( !this.isDisabled() && e.which === OO.ui.MouseButtons.LEFT ) {
* @protected
* @param {jQuery.Event} e Key press event
* @fires click
- * @return {undefined/boolean} False to prevent default if event is handled
+ * @return {undefined|boolean} False to prevent default if event is handled
*/
OO.ui.mixin.ButtonElement.prototype.onKeyPress = function ( e ) {
if ( !this.isDisabled() && ( e.which === OO.ui.Keys.SPACE || e.which === OO.ui.Keys.ENTER ) ) {
// Initialization
this.$element
- // -depressed is a deprecated alias of -unpressed
- .addClass( 'oo-ui-selectWidget oo-ui-selectWidget-unpressed oo-ui-selectWidget-depressed' )
+ .addClass( 'oo-ui-selectWidget oo-ui-selectWidget-unpressed' )
.attr( 'role', 'listbox' );
this.setFocusOwner( this.$element );
if ( Array.isArray( config.items ) ) {
*
* @private
* @param {jQuery.Event} e Mouse down event
- * @return {undefined/boolean} False to prevent default if event is handled
+ * @return {undefined|boolean} False to prevent default if event is handled
*/
OO.ui.SelectWidget.prototype.onMouseDown = function ( e ) {
var item;
*
* @private
* @param {MouseEvent} e Mouse up event
- * @return {undefined/boolean} False to prevent default if event is handled
+ * @return {undefined|boolean} False to prevent default if event is handled
*/
OO.ui.SelectWidget.prototype.onDocumentMouseUp = function ( e ) {
var item;
*
* @private
* @param {jQuery.Event} e Mouse over event
- * @return {undefined/boolean} False to prevent default if event is handled
+ * @return {undefined|boolean} False to prevent default if event is handled
*/
OO.ui.SelectWidget.prototype.onMouseOver = function ( e ) {
var item;
*
* @private
* @param {jQuery.Event} e Mouse over event
- * @return {undefined/boolean} False to prevent default if event is handled
+ * @return {undefined|boolean} False to prevent default if event is handled
*/
OO.ui.SelectWidget.prototype.onMouseLeave = function () {
if ( !this.isDisabled() ) {
OO.ui.SelectWidget.prototype.onDocumentKeyDown = function ( e ) {
var nextItem,
handled = false,
- currentItem = this.findHighlightedItem(),
+ selected = this.findSelectedItems(),
+ currentItem = this.findHighlightedItem() || (
+ Array.isArray( selected ) ? selected[ 0 ] : selected
+ ),
firstItem = this.getItems()[ 0 ];
if ( !this.isDisabled() && this.isVisible() ) {
*
* @protected
* @param {KeyboardEvent} e Key press event
- * @return {undefined/boolean} False to prevent default if event is handled
+ * @return {undefined|boolean} False to prevent default if event is handled
*/
OO.ui.SelectWidget.prototype.onDocumentKeyPress = function ( e ) {
- var c, filter, item;
+ var c, filter, item, selected;
if ( !e.charCode ) {
if ( e.keyCode === OO.ui.Keys.BACKSPACE && this.keyPressBuffer !== '' ) {
}
this.keyPressBufferTimer = setTimeout( this.clearKeyPressBuffer.bind( this ), 1500 );
- item = this.findHighlightedItem() || this.findSelectedItem();
+ selected = this.findSelectedItems();
+ item = this.findHighlightedItem() || (
+ Array.isArray( selected ) ? selected[ 0 ] : selected
+ );
if ( this.keyPressBuffer === c ) {
// Common (if weird) special case: typing "xxxx" will cycle through all
if ( pressed !== this.pressed ) {
this.$element
.toggleClass( 'oo-ui-selectWidget-pressed', pressed )
- // -depressed is a deprecated alias of -unpressed
- .toggleClass( 'oo-ui-selectWidget-unpressed oo-ui-selectWidget-depressed', !pressed );
+ .toggleClass( 'oo-ui-selectWidget-unpressed', !pressed );
this.pressed = pressed;
}
};
this.getElementDocument().removeEventListener( 'mousedown', this.onDocumentMouseDownHandler, true );
this.togglePositioning( false );
this.toggleClipping( false );
+ this.lastHighlightedItem = null;
}
}
* @param {Object} [config] Configuration options
* @cfg {Object} [menu] Configuration options to pass to
* {@link OO.ui.MenuSelectWidget menu select widget}.
- * @cfg {jQuery} [$overlay] Render the menu into a separate layer. This configuration is useful
- * in cases where the expanded menu is larger than its containing `<div>`. The specified overlay
- * layer is usually on top of the containing `<div>` and has a larger area. By default, the menu
- * uses relative positioning.
+ * @cfg {jQuery|boolean} [$overlay] Render the menu into a separate layer. This configuration is
+ * useful in cases where the expanded menu is larger than its containing `<div>`. The specified
+ * overlay layer is usually on top of the containing `<div>` and has a larger area. By default,
+ * the menu uses relative positioning. Pass 'true' to use the default overlay.
* See <https://www.mediawiki.org/wiki/OOUI/Concepts#Overlays>.
*/
OO.ui.DropdownWidget = function OoUiDropdownWidget( config ) {
OO.ui.DropdownWidget.parent.call( this, config );
// Properties (must be set before TabIndexedElement constructor call)
- this.$handle = $( '<button>' );
+ this.$handle = $( '<span>' );
this.$overlay = ( config.$overlay === true ?
OO.ui.getDefaultOverlay() : config.$overlay ) || this.$element;
} );
// Initialization
+ this.$label
+ .attr( {
+ role: 'textbox',
+ 'aria-readonly': 'true'
+ } );
this.$handle
.addClass( 'oo-ui-dropdownWidget-handle' )
+ .append( this.$icon, this.$label, this.$indicator )
.attr( {
- type: 'button',
- 'aria-owns': this.menu.getElementId(),
- 'aria-haspopup': 'listbox'
- } )
- .append( this.$icon, this.$label, this.$indicator );
+ role: 'combobox',
+ 'aria-autocomplete': 'list',
+ 'aria-expanded': 'false',
+ 'aria-haspopup': 'true',
+ 'aria-owns': this.menu.getElementId()
+ } );
this.$element
.addClass( 'oo-ui-dropdownWidget' )
.append( this.$handle );
*
* @private
* @param {jQuery.Event} e Mouse click event
- * @return {undefined/boolean} False to prevent default if event is handled
+ * @return {undefined|boolean} False to prevent default if event is handled
*/
OO.ui.DropdownWidget.prototype.onClick = function ( e ) {
if ( !this.isDisabled() && e.which === OO.ui.MouseButtons.LEFT ) {
*
* @private
* @param {jQuery.Event} e Key down event
- * @return {undefined/boolean} False to prevent default if event is handled
+ * @return {undefined|boolean} False to prevent default if event is handled
*/
OO.ui.DropdownWidget.prototype.onKeyDown = function ( e ) {
if (
* @param {Object} [config] Configuration options
* @cfg {Object[]} [options=[]] Array of menu options in the format described above.
* @cfg {Object} [dropdown] Configuration options for {@link OO.ui.DropdownWidget DropdownWidget}
- * @cfg {jQuery} [$overlay] Render the menu into a separate layer. This configuration is useful
- * in cases where the expanded menu is larger than its containing `<div>`. The specified overlay
- * layer is usually on top of the containing `<div>` and has a larger area. By default, the menu
- * uses relative positioning.
+ * @cfg {jQuery|boolean} [$overlay] Render the menu into a separate layer. This configuration is
+ * useful in cases where the expanded menu is larger than its containing `<div>`. The specified
+ * overlay layer is usually on top of the containing `<div>` and has a larger area. By default,
+ * the menu uses relative positioning. Pass 'true' to use the default overlay.
* See <https://www.mediawiki.org/wiki/OOUI/Concepts#Overlays>.
*/
OO.ui.DropdownInputWidget = function OoUiDropdownInputWidget( config ) {
this.$element
.addClass( 'oo-ui-dropdownInputWidget' )
.append( this.dropdownWidget.$element );
+ if ( OO.ui.isMobile() ) {
+ this.$element.addClass( 'oo-ui-isMobile' );
+ }
this.setTabIndexedElement( this.dropdownWidget.$tabIndexed );
this.setTitledElement( this.dropdownWidget.$handle );
};
* @protected
*/
OO.ui.DropdownInputWidget.prototype.getInputElement = function () {
- return $( '<select>' );
+ return $( '<select>' ).addClass( 'oo-ui-indicator-down' );
};
/**
*
* @private
* @param {jQuery.Event} e Mouse down event
- * @return {undefined/boolean} False to prevent default if event is handled
+ * @return {undefined|boolean} False to prevent default if event is handled
*/
OO.ui.TextInputWidget.prototype.onIconMouseDown = function ( e ) {
if ( e.which === OO.ui.MouseButtons.LEFT ) {
*
* @private
* @param {jQuery.Event} e Mouse down event
- * @return {undefined/boolean} False to prevent default if event is handled
+ * @return {undefined|boolean} False to prevent default if event is handled
*/
OO.ui.TextInputWidget.prototype.onIndicatorMouseDown = function ( e ) {
if ( e.which === OO.ui.MouseButtons.LEFT ) {
var $listItem, $icon, message;
$listItem = $( '<li>' );
if ( kind === 'error' ) {
- $icon = new OO.ui.IconWidget( { icon: 'alert', flags: [ 'error' ] } ).$element;
+ $icon = new OO.ui.IconWidget( { icon: 'error', flags: [ 'error' ] } ).$element;
$listItem.attr( 'role', 'alert' );
} else if ( kind === 'warning' ) {
$icon = new OO.ui.IconWidget( { icon: 'alert', flags: [ 'warning' ] } ).$element;
*
* @private
* @param {jQuery.Event} event
- * @return {undefined/boolean} False to prevent default if event is handled
+ * @return {undefined|boolean} False to prevent default if event is handled
*/
OO.ui.NumberInputWidget.prototype.onWheel = function ( event ) {
var delta = 0;
- if ( !this.isDisabled() && this.$input.is( ':focus' ) ) {
+ if ( this.isDisabled() || this.isReadOnly() ) {
+ return;
+ }
+
+ if ( this.$input.is( ':focus' ) ) {
// Standard 'wheel' event
if ( event.originalEvent.deltaMode !== undefined ) {
this.sawWheelEvent = true;
*
* @private
* @param {jQuery.Event} e Key down event
- * @return {undefined/boolean} False to prevent default if event is handled
+ * @return {undefined|boolean} False to prevent default if event is handled
*/
OO.ui.NumberInputWidget.prototype.onKeyDown = function ( e ) {
- if ( !this.isDisabled() ) {
- switch ( e.which ) {
- case OO.ui.Keys.UP:
- this.adjustValue( this.buttonStep );
- return false;
- case OO.ui.Keys.DOWN:
- this.adjustValue( -this.buttonStep );
- return false;
- case OO.ui.Keys.PAGEUP:
- this.adjustValue( this.pageStep );
- return false;
- case OO.ui.Keys.PAGEDOWN:
- this.adjustValue( -this.pageStep );
- return false;
- }
+ if ( this.isDisabled() || this.isReadOnly() ) {
+ return;
+ }
+
+ switch ( e.which ) {
+ case OO.ui.Keys.UP:
+ this.adjustValue( this.buttonStep );
+ return false;
+ case OO.ui.Keys.DOWN:
+ this.adjustValue( -this.buttonStep );
+ return false;
+ case OO.ui.Keys.PAGEUP:
+ this.adjustValue( this.pageStep );
+ return false;
+ case OO.ui.Keys.PAGEDOWN:
+ this.adjustValue( -this.pageStep );
+ return false;
}
};
*
* @private
* @param {jQuery.Event} e Key press event
- * @return {undefined/boolean} False to prevent default if event is handled
+ * @return {undefined|boolean} False to prevent default if event is handled
*/
OO.ui.SelectFileInputWidget.prototype.onKeyPress = function ( e ) {
if ( !this.isDisabled() && this.$input &&