/*!
- * OOjs UI v0.16.6
+ * OOjs UI v0.17.3
* https://www.mediawiki.org/wiki/OOjs_UI
*
* Copyright 2011–2016 OOjs UI Team and other contributors.
* Released under the MIT license
* http://oojs.mit-license.org
*
- * Date: 2016-04-19T21:57:49Z
+ * Date: 2016-05-24T22:46:32Z
*/
( function ( OO ) {
* @fires reorder
*/
OO.ui.mixin.DraggableGroupElement.prototype.onDragOver = function ( e ) {
- var dragOverObj, $optionWidget, itemOffset, itemMidpoint, itemBoundingRect,
- itemSize, cssOutput, dragPosition, overIndex, itemPosition, after,
- targetIndex = null,
+ var overIndex, targetIndex,
item = this.getDragItem(),
- dragItemIndex = item.getIndex(),
- clientX = e.originalEvent.clientX,
- clientY = e.originalEvent.clientY;
+ dragItemIndex = item.getIndex();
// Get the OptionWidget item we are dragging over
- dragOverObj = this.getElementDocument().elementFromPoint( clientX, clientY );
- $optionWidget = $( dragOverObj ).closest( '.oo-ui-draggableElement' );
- if ( $optionWidget[ 0 ] ) {
- itemOffset = $optionWidget.offset();
- itemBoundingRect = $optionWidget[ 0 ].getBoundingClientRect();
- itemPosition = $optionWidget.position();
- overIndex = $optionWidget.data( 'index' );
- }
+ overIndex = $( e.target ).closest( '.oo-ui-draggableElement' ).data( 'index' );
+
+ if ( overIndex !== undefined && overIndex !== dragItemIndex ) {
+ targetIndex = overIndex + ( overIndex > dragItemIndex ? 1 : 0 );
- if (
- itemOffset &&
- overIndex !== dragItemIndex
- ) {
- if ( this.orientation === 'horizontal' ) {
- // Calculate where the mouse is relative to the item width
- itemSize = itemBoundingRect.width;
- itemMidpoint = itemBoundingRect.left + itemSize / 2;
- dragPosition = clientX;
- // Which side of the item we hover over will dictate
- // where to drop the selected item, on the left or
- // on the right
- cssOutput = {
- left: dragPosition < itemMidpoint ? itemPosition.left : itemPosition.left + itemSize,
- top: itemPosition.top
- };
- } else {
- // Calculate where the mouse is relative to the item height
- itemSize = itemBoundingRect.height;
- itemMidpoint = itemBoundingRect.top + itemSize / 2;
- dragPosition = clientY;
- // Which side of the item we hover over will dictate
- // where to drop the selected item, on the top or
- // on the bottom
- cssOutput = {
- top: dragPosition < itemMidpoint ? itemPosition.top : itemPosition.top + itemSize,
- left: itemPosition.left
- };
- }
- // Store whether we are before or after an item to rearrange
- // For horizontal layout, we need to account for RTL, as this is flipped
- if ( this.orientation === 'horizontal' && this.dir === 'rtl' ) {
- after = dragPosition < itemMidpoint;
- } else {
- after = dragPosition > itemMidpoint;
- }
- targetIndex = overIndex + ( after ? 1 : 0 );
- // Check the targetIndex isn't immediately to the left or right of the current item (a no-op)
- if ( targetIndex === dragItemIndex || targetIndex === dragItemIndex + 1 ) {
- targetIndex = null;
- }
- }
- if ( targetIndex !== null ) {
if ( targetIndex > 0 ) {
this.$group.children().eq( targetIndex - 1 ).after( item.$element );
} else {
this.$group.prepend( item.$element );
}
- // Move item in itemsOrder array. Needs to account for left shift if the item is moved forward.
- this.itemsOrder.splice( targetIndex - ( targetIndex > dragItemIndex ? 1 : 0 ), 0,
+ // Move item in itemsOrder array
+ this.itemsOrder.splice( overIndex, 0,
this.itemsOrder.splice( dragItemIndex, 1 )[ 0 ]
);
this.updateIndexes();
* @mixins OO.ui.mixin.ButtonElement
* @mixins OO.ui.mixin.IconElement
* @mixins OO.ui.mixin.IndicatorElement
- * @mixins OO.ui.mixin.TabIndexedElement
* @mixins OO.ui.mixin.TitledElement
*
* @constructor
OO.ui.mixin.IconElement.call( this, config );
OO.ui.mixin.IndicatorElement.call( this, config );
OO.ui.mixin.TitledElement.call( this, $.extend( {}, config, { $titled: this.$button } ) );
- OO.ui.mixin.TabIndexedElement.call( this, $.extend( {}, config, {
- $tabIndexed: this.$button,
- tabIndex: -1
- } ) );
// Initialization
this.$element.addClass( 'oo-ui-buttonOptionWidget' );
OO.mixinClass( OO.ui.ButtonOptionWidget, OO.ui.mixin.IconElement );
OO.mixinClass( OO.ui.ButtonOptionWidget, OO.ui.mixin.IndicatorElement );
OO.mixinClass( OO.ui.ButtonOptionWidget, OO.ui.mixin.TitledElement );
-OO.mixinClass( OO.ui.ButtonOptionWidget, OO.ui.mixin.TabIndexedElement );
/* Static Properties */
OO.mixinClass( OO.ui.TabSelectWidget, OO.ui.mixin.TabIndexedElement );
/**
- * CapsuleItemWidgets are used within a {@link OO.ui.CapsuleMultiSelectWidget
- * CapsuleMultiSelectWidget} to display the selected items.
+ * CapsuleItemWidgets are used within a {@link OO.ui.CapsuleMultiselectWidget
+ * CapsuleMultiselectWidget} to display the selected items.
*
* @class
* @extends OO.ui.Widget
};
/**
- * CapsuleMultiSelectWidgets are something like a {@link OO.ui.ComboBoxInputWidget combo box widget}
+ * CapsuleMultiselectWidgets are something like a {@link OO.ui.ComboBoxInputWidget combo box widget}
* that allows for selecting multiple values.
*
* For more information about menus and options, please see the [OOjs UI documentation on MediaWiki][1].
*
* @example
- * // Example: A CapsuleMultiSelectWidget.
- * var capsule = new OO.ui.CapsuleMultiSelectWidget( {
- * label: 'CapsuleMultiSelectWidget',
+ * // Example: A CapsuleMultiselectWidget.
+ * var capsule = new OO.ui.CapsuleMultiselectWidget( {
+ * label: 'CapsuleMultiselectWidget',
* selected: [ 'Option 1', 'Option 3' ],
* menu: {
* items: [
*
* @class
* @extends OO.ui.Widget
- * @mixins OO.ui.mixin.TabIndexedElement
* @mixins OO.ui.mixin.GroupElement
+ * @mixins OO.ui.mixin.PopupElement
+ * @mixins OO.ui.mixin.TabIndexedElement
+ * @mixins OO.ui.mixin.IndicatorElement
+ * @mixins OO.ui.mixin.IconElement
* @uses OO.ui.CapsuleItemWidget
* @uses OO.ui.FloatingMenuSelectWidget
*
* the containing `<div>` and has a larger area. By default, the menu uses
* relative positioning.
*/
-OO.ui.CapsuleMultiSelectWidget = function OoUiCapsuleMultiSelectWidget( config ) {
+OO.ui.CapsuleMultiselectWidget = function OoUiCapsuleMultiselectWidget( config ) {
var $tabFocus;
// Parent constructor
- OO.ui.CapsuleMultiSelectWidget.parent.call( this, config );
+ OO.ui.CapsuleMultiselectWidget.parent.call( this, config );
// Configuration initialization
config = $.extend( {
if ( config.data ) {
this.setItemsFromData( config.data );
}
- this.$content.addClass( 'oo-ui-capsuleMultiSelectWidget-content' )
+ this.$content.addClass( 'oo-ui-capsuleMultiselectWidget-content' )
.append( this.$group );
- this.$group.addClass( 'oo-ui-capsuleMultiSelectWidget-group' );
- this.$handle.addClass( 'oo-ui-capsuleMultiSelectWidget-handle' )
+ this.$group.addClass( 'oo-ui-capsuleMultiselectWidget-group' );
+ this.$handle.addClass( 'oo-ui-capsuleMultiselectWidget-handle' )
.append( this.$indicator, this.$icon, this.$content );
- this.$element.addClass( 'oo-ui-capsuleMultiSelectWidget' )
+ this.$element.addClass( 'oo-ui-capsuleMultiselectWidget' )
.append( this.$handle );
if ( this.popup ) {
this.$content.append( $tabFocus );
/* Setup */
-OO.inheritClass( OO.ui.CapsuleMultiSelectWidget, OO.ui.Widget );
-OO.mixinClass( OO.ui.CapsuleMultiSelectWidget, OO.ui.mixin.GroupElement );
-OO.mixinClass( OO.ui.CapsuleMultiSelectWidget, OO.ui.mixin.PopupElement );
-OO.mixinClass( OO.ui.CapsuleMultiSelectWidget, OO.ui.mixin.TabIndexedElement );
-OO.mixinClass( OO.ui.CapsuleMultiSelectWidget, OO.ui.mixin.IndicatorElement );
-OO.mixinClass( OO.ui.CapsuleMultiSelectWidget, OO.ui.mixin.IconElement );
+OO.inheritClass( OO.ui.CapsuleMultiselectWidget, OO.ui.Widget );
+OO.mixinClass( OO.ui.CapsuleMultiselectWidget, OO.ui.mixin.GroupElement );
+OO.mixinClass( OO.ui.CapsuleMultiselectWidget, OO.ui.mixin.PopupElement );
+OO.mixinClass( OO.ui.CapsuleMultiselectWidget, OO.ui.mixin.TabIndexedElement );
+OO.mixinClass( OO.ui.CapsuleMultiselectWidget, OO.ui.mixin.IndicatorElement );
+OO.mixinClass( OO.ui.CapsuleMultiselectWidget, OO.ui.mixin.IconElement );
/* Events */
* @param {string} label The label text.
* @return {OO.ui.CapsuleItemWidget}
*/
-OO.ui.CapsuleMultiSelectWidget.prototype.createItemWidget = function ( data, label ) {
+OO.ui.CapsuleMultiselectWidget.prototype.createItemWidget = function ( data, label ) {
return new OO.ui.CapsuleItemWidget( { data: data, label: label } );
};
*
* @return {Mixed[]}
*/
-OO.ui.CapsuleMultiSelectWidget.prototype.getItemsData = function () {
- return $.map( this.getItems(), function ( e ) { return e.data; } );
+OO.ui.CapsuleMultiselectWidget.prototype.getItemsData = function () {
+ return this.getItems().map( function ( item ) {
+ return item.data;
+ } );
};
/**
*
* @chainable
* @param {Mixed[]} datas
- * @return {OO.ui.CapsuleMultiSelectWidget}
+ * @return {OO.ui.CapsuleMultiselectWidget}
*/
-OO.ui.CapsuleMultiSelectWidget.prototype.setItemsFromData = function ( datas ) {
+OO.ui.CapsuleMultiselectWidget.prototype.setItemsFromData = function ( datas ) {
var widget = this,
menu = this.menu,
items = this.getItems();
*
* @chainable
* @param {Mixed[]} datas
- * @return {OO.ui.CapsuleMultiSelectWidget}
+ * @return {OO.ui.CapsuleMultiselectWidget}
*/
-OO.ui.CapsuleMultiSelectWidget.prototype.addItemsFromData = function ( datas ) {
+OO.ui.CapsuleMultiselectWidget.prototype.addItemsFromData = function ( datas ) {
var widget = this,
menu = this.menu,
items = [];
* @param {string} label
* @return {boolean} Whether the item was added or not
*/
-OO.ui.CapsuleMultiSelectWidget.prototype.addItemFromLabel = function ( label ) {
+OO.ui.CapsuleMultiselectWidget.prototype.addItemFromLabel = function ( label ) {
var item = this.menu.getItemFromLabel( label, true );
if ( item ) {
this.addItemsFromData( [ item.data ] );
*
* @chainable
* @param {Mixed[]} datas
- * @return {OO.ui.CapsuleMultiSelectWidget}
+ * @return {OO.ui.CapsuleMultiselectWidget}
*/
-OO.ui.CapsuleMultiSelectWidget.prototype.removeItemsFromData = function ( datas ) {
+OO.ui.CapsuleMultiselectWidget.prototype.removeItemsFromData = function ( datas ) {
var widget = this,
items = [];
/**
* @inheritdoc
*/
-OO.ui.CapsuleMultiSelectWidget.prototype.addItems = function ( items ) {
+OO.ui.CapsuleMultiselectWidget.prototype.addItems = function ( items ) {
var same, i, l,
oldItems = this.items.slice();
*
* @param {Object} item
*/
-OO.ui.CapsuleMultiSelectWidget.prototype.editItem = function ( item ) {
+OO.ui.CapsuleMultiselectWidget.prototype.editItem = function ( item ) {
this.$input.val( item.label );
this.updateInputSize();
this.focus();
/**
* @inheritdoc
*/
-OO.ui.CapsuleMultiSelectWidget.prototype.removeItems = function ( items ) {
+OO.ui.CapsuleMultiselectWidget.prototype.removeItems = function ( items ) {
var same, i, l,
oldItems = this.items.slice();
/**
* @inheritdoc
*/
-OO.ui.CapsuleMultiSelectWidget.prototype.clearItems = function () {
+OO.ui.CapsuleMultiselectWidget.prototype.clearItems = function () {
if ( this.items.length ) {
OO.ui.mixin.GroupElement.prototype.clearItems.call( this );
this.emit( 'change', this.getItemsData() );
* @param {OO.ui.CapsuleItemWidget} [item]
* @return {OO.ui.CapsuleItemWidget|jQuery|boolean}
*/
-OO.ui.CapsuleMultiSelectWidget.prototype.getNextItem = function ( item ) {
+OO.ui.CapsuleMultiselectWidget.prototype.getNextItem = function ( item ) {
var itemIndex;
if ( item === undefined ) {
* @param {OO.ui.CapsuleItemWidget} [item]
* @return {OO.ui.CapsuleItemWidget|jQuery|boolean}
*/
-OO.ui.CapsuleMultiSelectWidget.prototype.getPreviousItem = function ( item ) {
+OO.ui.CapsuleMultiselectWidget.prototype.getPreviousItem = function ( item ) {
var itemIndex;
if ( item === undefined ) {
*
* @return {OO.ui.MenuSelectWidget} Menu widget
*/
-OO.ui.CapsuleMultiSelectWidget.prototype.getMenu = function () {
+OO.ui.CapsuleMultiselectWidget.prototype.getMenu = function () {
return this.menu;
};
* @private
* @param {jQuery.Event} event
*/
-OO.ui.CapsuleMultiSelectWidget.prototype.onInputFocus = function () {
+OO.ui.CapsuleMultiselectWidget.prototype.onInputFocus = function () {
if ( !this.isDisabled() ) {
this.menu.toggle( true );
}
* @private
* @param {jQuery.Event} event
*/
-OO.ui.CapsuleMultiSelectWidget.prototype.onInputBlur = function () {
+OO.ui.CapsuleMultiselectWidget.prototype.onInputBlur = function () {
this.addItemFromLabel( this.$input.val() );
this.clearInput();
};
* @private
* @param {jQuery.Event} event
*/
-OO.ui.CapsuleMultiSelectWidget.prototype.onFocusForPopup = function () {
+OO.ui.CapsuleMultiselectWidget.prototype.onFocusForPopup = function () {
if ( !this.isDisabled() ) {
this.popup.setSize( this.$handle.width() );
this.popup.toggle( true );
- this.popup.$element.find( '*' )
- .filter( function () { return OO.ui.isFocusableElement( $( this ), true ); } )
- .first()
- .focus();
+ OO.ui.findFocusable( this.popup.$element ).focus();
}
};
* @private
* @param {jQuery.Event} e Focus out event
*/
-OO.ui.CapsuleMultiSelectWidget.prototype.onPopupFocusOut = function () {
+OO.ui.CapsuleMultiselectWidget.prototype.onPopupFocusOut = function () {
var widget = this.popup;
setTimeout( function () {
* @private
* @param {jQuery.Event} e Mouse down event
*/
-OO.ui.CapsuleMultiSelectWidget.prototype.onMouseDown = function ( e ) {
+OO.ui.CapsuleMultiselectWidget.prototype.onMouseDown = function ( e ) {
if ( e.which === OO.ui.MouseButtons.LEFT ) {
this.focus();
return false;
* @private
* @param {jQuery.Event} e Key press event
*/
-OO.ui.CapsuleMultiSelectWidget.prototype.onKeyPress = function ( e ) {
+OO.ui.CapsuleMultiselectWidget.prototype.onKeyPress = function ( e ) {
if ( !this.isDisabled() ) {
if ( e.which === OO.ui.Keys.ESCAPE ) {
this.clearInput();
* @private
* @param {jQuery.Event} e Key down event
*/
-OO.ui.CapsuleMultiSelectWidget.prototype.onKeyDown = function ( e ) {
+OO.ui.CapsuleMultiselectWidget.prototype.onKeyDown = function ( e ) {
if (
!this.isDisabled() &&
this.$input.val() === '' &&
* @private
* @param {jQuery.Event} e Event of some sort
*/
-OO.ui.CapsuleMultiSelectWidget.prototype.updateInputSize = function () {
+OO.ui.CapsuleMultiselectWidget.prototype.updateInputSize = function () {
var $lastItem, direction, contentWidth, currentWidth, bestWidth;
if ( !this.isDisabled() ) {
this.$input.css( 'width', '1em' );
*
* @private
*/
-OO.ui.CapsuleMultiSelectWidget.prototype.updateIfHeightChanged = function () {
+OO.ui.CapsuleMultiselectWidget.prototype.updateIfHeightChanged = function () {
var height = this.$element.height();
if ( height !== this.height ) {
this.height = height;
* @private
* @param {OO.ui.OptionWidget} item Chosen item
*/
-OO.ui.CapsuleMultiSelectWidget.prototype.onMenuChoose = function ( item ) {
+OO.ui.CapsuleMultiselectWidget.prototype.onMenuChoose = function ( item ) {
if ( item && item.isVisible() ) {
this.addItemsFromData( [ item.getData() ] );
this.clearInput();
*
* @private
*/
-OO.ui.CapsuleMultiSelectWidget.prototype.onMenuItemsChange = function () {
+OO.ui.CapsuleMultiselectWidget.prototype.onMenuItemsChange = function () {
this.setItemsFromData( this.getItemsData() );
- this.$element.toggleClass( 'oo-ui-capsuleMultiSelectWidget-empty', this.menu.isEmpty() );
+ this.$element.toggleClass( 'oo-ui-capsuleMultiselectWidget-empty', this.menu.isEmpty() );
};
/**
*
* @private
*/
-OO.ui.CapsuleMultiSelectWidget.prototype.clearInput = function () {
+OO.ui.CapsuleMultiselectWidget.prototype.clearInput = function () {
if ( this.$input ) {
this.$input.val( '' );
this.updateInputSize();
/**
* @inheritdoc
*/
-OO.ui.CapsuleMultiSelectWidget.prototype.setDisabled = function ( disabled ) {
+OO.ui.CapsuleMultiselectWidget.prototype.setDisabled = function ( disabled ) {
var i, len;
// Parent method
- OO.ui.CapsuleMultiSelectWidget.parent.prototype.setDisabled.call( this, disabled );
+ OO.ui.CapsuleMultiselectWidget.parent.prototype.setDisabled.call( this, disabled );
if ( this.$input ) {
this.$input.prop( 'disabled', this.isDisabled() );
* Focus the widget
*
* @chainable
- * @return {OO.ui.CapsuleMultiSelectWidget}
+ * @return {OO.ui.CapsuleMultiselectWidget}
*/
-OO.ui.CapsuleMultiSelectWidget.prototype.focus = function () {
+OO.ui.CapsuleMultiselectWidget.prototype.focus = function () {
if ( !this.isDisabled() ) {
if ( this.popup ) {
this.popup.setSize( this.$handle.width() );
this.popup.toggle( true );
- this.popup.$element.find( '*' )
- .filter( function () { return OO.ui.isFocusableElement( $( this ), true ); } )
- .first()
- .focus();
+ OO.ui.findFocusable( this.popup.$element ).focus();
} else {
this.updateInputSize();
this.menu.toggle( true );
return this;
};
+/**
+ * @class
+ * @deprecated since 0.17.3; use OO.ui.CapsuleMultiselectWidget instead
+ */
+OO.ui.CapsuleMultiSelectWidget = OO.ui.CapsuleMultiselectWidget;
+
/**
* SelectFileWidgets allow for selecting files, using the HTML5 File API. These
* widgets can be configured with {@link OO.ui.mixin.IconElement icons} and {@link