/*!
- * OOjs UI v0.16.0
+ * OOjs UI v0.16.5
* 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-02-22T22:33:33Z
+ * Date: 2016-04-07T15:12:41Z
*/
( function ( OO ) {
* Respond to mousedown event.
*
* @private
- * @param {jQuery.Event} event jQuery event
+ * @param {jQuery.Event} e jQuery event
*/
OO.ui.mixin.DraggableElement.prototype.onDragMouseDown = function ( e ) {
this.wasHandleUsed =
* Respond to dragstart event.
*
* @private
- * @param {jQuery.Event} event jQuery event
+ * @param {jQuery.Event} e jQuery event
* @fires dragstart
*/
OO.ui.mixin.DraggableElement.prototype.onDragStart = function ( e ) {
* Handle drop event.
*
* @private
- * @param {jQuery.Event} event jQuery event
+ * @param {jQuery.Event} e jQuery event
* @fires drop
*/
OO.ui.mixin.DraggableElement.prototype.onDrop = function ( e ) {
* Store it in the DOM so we can access from the widget drag event
*
* @private
- * @param {number} Item index
+ * @param {number} index Item index
*/
OO.ui.mixin.DraggableElement.prototype.setIndex = function ( index ) {
if ( this.index !== index ) {
originalIndex = this.items.indexOf( item );
// If the item has moved forward, add one to the index to account for the left shift
targetIndex = item.getIndex() + ( item.getIndex() > originalIndex ? 1 : 0 );
- this.reorder( this.getDragItem(), targetIndex );
- this.emit( 'reorder', this.getDragItem(), targetIndex );
+ if ( targetIndex !== originalIndex ) {
+ this.reorder( this.getDragItem(), targetIndex );
+ this.emit( 'reorder', this.getDragItem(), targetIndex );
+ }
this.updateIndexes();
}
this.unsetDragItem();
* Respond to dragover event
*
* @private
- * @param {jQuery.Event} event Dragover event
+ * @param {jQuery.Event} e Dragover event
* @fires reorder
*/
OO.ui.mixin.DraggableGroupElement.prototype.onDragOver = function ( e ) {
* CSS is applied to the tab item to reflect the card's active state. Outside of the index
* context, setting the active state on a card does nothing.
*
- * @param {boolean} value Card is active
+ * @param {boolean} active Card is active
* @fires active
*/
OO.ui.CardLayout.prototype.setActive = function ( active ) {
* CSS is applied to the outline item to reflect the page's active state. Outside of the booklet
* context, setting the active state on a page does nothing.
*
- * @param {boolean} value Page is active
+ * @param {boolean} active Page is active
* @fires active
*/
OO.ui.PageLayout.prototype.setActive = function ( active ) {
*
* If no page is selected, the first selectable page will be selected.
* If the focus is already in an element on the current page, nothing will happen.
+ *
* @param {number} [itemIndex] A specific item to focus on
*/
OO.ui.BookletLayout.prototype.focus = function ( itemIndex ) {
*
* If no card is selected, the first selectable card will be selected.
* If the focus is already in an element on the current card, nothing will happen.
+ *
* @param {number} [itemIndex] A specific item to focus on
*/
OO.ui.IndexLayout.prototype.focus = function ( itemIndex ) {
};
/**
- * @private
* Handle outline change events.
+ *
+ * @private
*/
OO.ui.OutlineControlsWidget.prototype.onOutlineChange = function () {
var i, len, firstMovable, lastMovable,
* @param {Mixed[]} datas Data of the now-selected items
*/
+/**
+ * @event resize
+ *
+ * A resize event is emitted when the widget's dimensions change to accomodate newly added items or
+ * current user input.
+ */
+
/* Methods */
/**
/**
* Get the data of the items in the capsule
+ *
* @return {Mixed[]}
*/
OO.ui.CapsuleMultiSelectWidget.prototype.getItemsData = function () {
/**
* Set the items in the capsule by providing data
+ *
* @chainable
* @param {Mixed[]} datas
* @return {OO.ui.CapsuleMultiSelectWidget}
/**
* Add items to the capsule by providing their data
+ *
* @chainable
* @param {Mixed[]} datas
* @return {OO.ui.CapsuleMultiSelectWidget}
/**
* Add items to the capsule by providing a label
+ *
* @param {string} label
* @return {boolean} Whether the item was added or not
*/
/**
* Remove items by data
+ *
* @chainable
* @param {Mixed[]} datas
* @return {OO.ui.CapsuleMultiSelectWidget}
}
if ( !same ) {
this.emit( 'change', this.getItemsData() );
- this.menu.position();
+ this.updateIfHeightChanged();
}
return this;
}
if ( !same ) {
this.emit( 'change', this.getItemsData() );
- this.menu.position();
+ this.updateIfHeightChanged();
}
return this;
if ( this.items.length ) {
OO.ui.mixin.GroupElement.prototype.clearItems.call( this );
this.emit( 'change', this.getItemsData() );
- this.menu.position();
+ this.updateIfHeightChanged();
}
return this;
};
/**
* Get the capsule widget's menu.
+ *
* @return {OO.ui.MenuSelectWidget} Menu widget
*/
OO.ui.CapsuleMultiSelectWidget.prototype.getMenu = function () {
bestWidth = this.$content.innerWidth() - 10;
}
this.$input.width( Math.floor( bestWidth ) );
+ this.updateIfHeightChanged();
+ }
+};
+/**
+ * Determine if widget height changed, and if so, update menu position and emit 'resize' event.
+ *
+ * @private
+ */
+OO.ui.CapsuleMultiSelectWidget.prototype.updateIfHeightChanged = function () {
+ var height = this.$element.height();
+ if ( height !== this.height ) {
+ this.height = height;
this.menu.position();
+ this.emit( 'resize' );
}
};
/**
* Clear the input field
+ *
* @private
*/
OO.ui.CapsuleMultiSelectWidget.prototype.clearInput = function () {
/**
* Focus the widget
+ *
* @chainable
* @return {OO.ui.CapsuleMultiSelectWidget}
*/
* @cfg {string} [notsupported] Text to display when file support is missing in the browser.
* @cfg {boolean} [droppable=true] Whether to accept files by drag and drop.
* @cfg {boolean} [showDropTarget=false] Whether to show a drop target. Requires droppable to be true.
- * @cfg {Number} [thumbnailSizeLimit=20] File size limit in MiB above which to not try and show a
+ * @cfg {number} [thumbnailSizeLimit=20] File size limit in MiB above which to not try and show a
* preview (for performance)
*/
OO.ui.SelectFileWidget = function OoUiSelectFileWidget( config ) {
* Determine if we should accept this file
*
* @private
- * @param {string} File MIME type
+ * @param {string} mimeType File MIME type
* @return {boolean}
*/
OO.ui.SelectFileWidget.prototype.isAllowedType = function ( mimeType ) {
* // Example: A NumberInputWidget.
* var numberInput = new OO.ui.NumberInputWidget( {
* label: 'NumberInputWidget',
- * input: { value: 5, min: 1, max: 10 }
+ * input: { value: 5 },
+ * min: 1,
+ * max: 10
* } );
* $( 'body' ).append( numberInput.$element );
*
* @cfg {number} [max=Infinity] Maximum allowed value
* @cfg {number} [step=1] Delta when using the buttons or up/down arrow keys
* @cfg {number|null} [pageStep] Delta when using the page-up/page-down keys. Defaults to 10 times #step.
+ * @cfg {boolean} [showButtons=true] Whether to show the plus and minus buttons.
*/
OO.ui.NumberInputWidget = function OoUiNumberInputWidget( config ) {
// Configuration initialization
min: -Infinity,
max: Infinity,
step: 1,
- pageStep: null
+ pageStep: null,
+ showButtons: true
}, config );
// Parent constructor
},
config.input
) );
- this.minusButton = new OO.ui.ButtonWidget( $.extend(
- {
- disabled: this.isDisabled(),
- tabIndex: -1
- },
- config.minusButton,
- {
- classes: [ 'oo-ui-numberInputWidget-minusButton' ],
- label: '−'
- }
- ) );
- this.plusButton = new OO.ui.ButtonWidget( $.extend(
- {
- disabled: this.isDisabled(),
- tabIndex: -1
- },
- config.plusButton,
- {
- classes: [ 'oo-ui-numberInputWidget-plusButton' ],
- label: '+'
- }
- ) );
+ if ( config.showButtons ) {
+ this.minusButton = new OO.ui.ButtonWidget( $.extend(
+ {
+ disabled: this.isDisabled(),
+ tabIndex: -1
+ },
+ config.minusButton,
+ {
+ classes: [ 'oo-ui-numberInputWidget-minusButton' ],
+ label: '−'
+ }
+ ) );
+ this.plusButton = new OO.ui.ButtonWidget( $.extend(
+ {
+ disabled: this.isDisabled(),
+ tabIndex: -1
+ },
+ config.plusButton,
+ {
+ classes: [ 'oo-ui-numberInputWidget-plusButton' ],
+ label: '+'
+ }
+ ) );
+ }
// Events
this.input.connect( this, {
keydown: this.onKeyDown.bind( this ),
'wheel mousewheel DOMMouseScroll': this.onWheel.bind( this )
} );
- this.plusButton.connect( this, {
- click: [ 'onButtonClick', +1 ]
- } );
- this.minusButton.connect( this, {
- click: [ 'onButtonClick', -1 ]
- } );
+ if ( config.showButtons ) {
+ this.plusButton.connect( this, {
+ click: [ 'onButtonClick', +1 ]
+ } );
+ this.minusButton.connect( this, {
+ click: [ 'onButtonClick', -1 ]
+ } );
+ }
// Initialization
this.setIsInteger( !!config.isInteger );
this.setStep( config.step, config.pageStep );
this.$field = $( '<div>' ).addClass( 'oo-ui-numberInputWidget-field' )
- .append(
- this.minusButton.$element,
- this.input.$element,
- this.plusButton.$element
- );
+ .append( this.input.$element );
this.$element.addClass( 'oo-ui-numberInputWidget' ).append( this.$field );
+ if ( config.showButtons ) {
+ this.$field
+ .prepend( this.minusButton.$element )
+ .append( this.plusButton.$element );
+ this.$element.addClass( 'oo-ui-numberInputWidget-buttoned' );
+ }
this.input.setValidation( this.validateNumber.bind( this ) );
};
/**
* Set whether only integers are allowed
+ *
* @param {boolean} flag
*/
OO.ui.NumberInputWidget.prototype.setIsInteger = function ( flag ) {
/**
* Get whether only integers are allowed
+ *
* @return {boolean} Flag value
*/
OO.ui.NumberInputWidget.prototype.getIsInteger = function () {
/**
* Set the range of allowed values
+ *
* @param {number} min Minimum allowed value
* @param {number} max Maximum allowed value
*/
/**
* Get the current range
+ *
* @return {number[]} Minimum and maximum values
*/
OO.ui.NumberInputWidget.prototype.getRange = function () {
/**
* Set the stepping deltas
+ *
* @param {number} step Normal step
* @param {number|null} pageStep Page step. If null, 10 * step will be used.
*/
/**
* Get the current stepping values
+ *
* @return {number[]} Step and page step
*/
OO.ui.NumberInputWidget.prototype.getStep = function () {
/**
* Get the current value of the widget
+ *
* @return {string}
*/
OO.ui.NumberInputWidget.prototype.getValue = function () {
/**
* Get the current value of the widget as a number
+ *
* @return {number} May be NaN, or an invalid number
*/
OO.ui.NumberInputWidget.prototype.getNumericValue = function () {
/**
* Set the value of the widget
+ *
* @param {string} value Invalid values are allowed
*/
OO.ui.NumberInputWidget.prototype.setValue = function ( value ) {
/**
* Adjust the value of the widget
+ *
* @param {number} delta Adjustment amount
*/
OO.ui.NumberInputWidget.prototype.adjustValue = function ( delta ) {
/**
* Validate input
+ *
* @private
* @param {string} value Field value
* @return {boolean}