/*!
- * OOjs UI v0.25.0
- * https://www.mediawiki.org/wiki/OOjs_UI
+ * OOUI v0.26.1
+ * https://www.mediawiki.org/wiki/OOUI
*
- * Copyright 2011–2018 OOjs UI Team and other contributors.
+ * Copyright 2011–2018 OOUI Team and other contributors.
* Released under the MIT license
* http://oojs.mit-license.org
*
- * Date: 2018-01-10T00:26:02Z
+ * Date: 2018-03-23T23:42:32Z
*/
( function ( OO ) {
// We must set up a dataTransfer data property or Firefox seems to
// ignore the fact the element is draggable.
try {
- dataTransfer.setData( 'application-x/OOjs-UI-draggable', this.getIndex() );
+ dataTransfer.setData( 'application-x/OOUI-draggable', this.getIndex() );
} catch ( err ) {
// The above is only for Firefox. Move on if it fails.
}
* not the desired behavior, disable lookup menus with the #setLookupsDisabled method, then set the value, then
* re-enable lookups.
*
- * See the [OOjs UI demos][1] for an example.
+ * See the [OOUI demos][1] for an example.
*
- * [1]: https://tools.wmflabs.org/oojs-ui/oojs-ui/demos/index.html#widgets-apex-vector-ltr
+ * [1]: https://doc.wikimedia.org/oojs-ui/master/demos/#LookupElement-try-inputting-an-integer
*
* @class
* @abstract
* @constructor
* @param {Object} [config] Configuration options
* @cfg {jQuery} [$overlay] Overlay for the lookup menu; defaults to relative positioning.
- * See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>.
+ * See <https://www.mediawiki.org/wiki/OOUI/Concepts#Overlays>.
* @cfg {jQuery} [$container=this.$element] The container element. The lookup menu is rendered beneath the specified element.
* @cfg {boolean} [allowSuggestionsWhenEmpty=false] Request and display a lookup menu when the text input is empty.
* By default, the lookup menu is not generated and displayed until the user begins to type.
* @chainable
*/
OO.ui.mixin.LookupElement.prototype.initializeLookupMenuSelection = function () {
- if ( this.lookupHighlightFirstItem && !this.lookupMenu.getSelectedItem() ) {
+ if ( this.lookupHighlightFirstItem && !this.lookupMenu.findSelectedItem() ) {
this.lookupMenu.highlightItem( this.lookupMenu.findFirstSelectableItem() );
}
};
if ( name !== this.currentPageName ) {
if ( this.outlined ) {
- selectedItem = this.outlineSelectWidget.getSelectedItem();
+ selectedItem = this.outlineSelectWidget.findSelectedItem();
if ( selectedItem && selectedItem.getData() !== name ) {
this.outlineSelectWidget.selectItemByData( name );
}
* @chainable
*/
OO.ui.BookletLayout.prototype.selectFirstSelectablePage = function () {
- if ( !this.outlineSelectWidget.getSelectedItem() ) {
+ if ( !this.outlineSelectWidget.findSelectedItem() ) {
this.outlineSelectWidget.selectItem( this.outlineSelectWidget.findFirstSelectableItem() );
}
previousTabPanel = this.currentTabPanelName && this.tabPanels[ this.currentTabPanelName ];
if ( name !== this.currentTabPanelName ) {
- selectedItem = this.tabSelectWidget.getSelectedItem();
+ selectedItem = this.tabSelectWidget.findSelectedItem();
if ( selectedItem && selectedItem.getData() !== name ) {
this.tabSelectWidget.selectItemByData( name );
}
* @chainable
*/
OO.ui.IndexLayout.prototype.selectFirstSelectableTabPanel = function () {
- if ( !this.tabSelectWidget.getSelectedItem() ) {
+ if ( !this.tabSelectWidget.findSelectedItem() ) {
this.tabSelectWidget.selectItem( this.tabSelectWidget.findFirstSelectableItem() );
}
* configured with {@link OO.ui.mixin.IconElement icons}, {@link OO.ui.mixin.IndicatorElement indicators},
* {@link OO.ui.mixin.TitledElement titles}, {@link OO.ui.mixin.FlaggedElement styling flags},
* and {@link OO.ui.mixin.LabelElement labels}. Please see
- * the [OOjs UI documentation][1] on MediaWiki for more information.
+ * the [OOUI documentation][1] on MediaWiki for more information.
*
* @example
* // Toggle buttons in the 'off' and 'on' state.
* // Append the buttons to the DOM.
* $( 'body' ).append( toggleButton1.$element, toggleButton2.$element );
*
- * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Buttons_and_Switches#Toggle_buttons
+ * [1]: https://www.mediawiki.org/wiki/OOUI/Widgets/Buttons_and_Switches#Toggle_buttons
*
* @class
* @extends OO.ui.ToggleWidget
OO.ui.OutlineControlsWidget.prototype.onOutlineChange = function () {
var i, len, firstMovable, lastMovable,
items = this.outline.getItems(),
- selectedItem = this.outline.getSelectedItem(),
+ selectedItem = this.outline.findSelectedItem(),
movable = this.abilities.move && selectedItem && selectedItem.isMovable(),
removable = this.abilities.remove && selectedItem && selectedItem.isRemovable();
*/
OO.ui.OutlineOptionWidget.prototype.setPressed = function ( state ) {
OO.ui.OutlineOptionWidget.parent.prototype.setPressed.call( this, state );
- if ( this.pressed ) {
- this.setFlags( { progressive: true } );
- } else if ( !this.selected ) {
- this.setFlags( { progressive: false } );
- }
return this;
};
*/
OO.ui.OutlineOptionWidget.prototype.setSelected = function ( state ) {
OO.ui.OutlineOptionWidget.parent.prototype.setSelected.call( this, state );
- if ( this.selected ) {
- this.setFlags( { progressive: true } );
- } else {
- this.setFlags( { progressive: false } );
- }
return this;
};
* ButtonOptionWidget is a special type of {@link OO.ui.mixin.ButtonElement button element} that
* can be selected and configured with data. The class is
* used with OO.ui.ButtonSelectWidget to create a selection of button options. Please see the
- * [OOjs UI documentation on MediaWiki] [1] for more information.
+ * [OOUI documentation on MediaWiki] [1] for more information.
*
- * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Selects_and_Options#Button_selects_and_options
+ * [1]: https://www.mediawiki.org/wiki/OOUI/Widgets/Selects_and_Options#Button_selects_and_options
*
* @class
* @extends OO.ui.OptionWidget
* button options and is used together with
* OO.ui.ButtonOptionWidget. The ButtonSelectWidget provides an interface for
* highlighting, choosing, and selecting mutually exclusive options. Please see
- * the [OOjs UI documentation on MediaWiki] [1] for more information.
+ * the [OOUI documentation on MediaWiki] [1] for more information.
*
* @example
* // Example: A ButtonSelectWidget that contains three ButtonOptionWidgets
* } );
* $( 'body' ).append( buttonSelect.$element );
*
- * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Selects_and_Options
+ * [1]: https://www.mediawiki.org/wiki/OOUI/Widgets/Selects_and_Options
*
* @class
* @extends OO.ui.SelectWidget
* 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].
+ * For more information about menus and options, please see the [OOUI documentation on MediaWiki][1].
*
* @example
* // Example: A CapsuleMultiselectWidget.
* } );
* $( 'body' ).append( capsule.$element );
*
- * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Selects_and_Options#Menu_selects_and_options
+ * [1]: https://www.mediawiki.org/wiki/OOUI/Widgets/Selects_and_Options#Menu_selects_and_options
*
* @class
* @extends OO.ui.Widget
* 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.
- * See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>.
+ * See <https://www.mediawiki.org/wiki/OOUI/Concepts#Overlays>.
*/
OO.ui.CapsuleMultiselectWidget = function OoUiCapsuleMultiselectWidget( config ) {
var $tabFocus;
* Item validity has changed
*/
+/**
+ * @event disabled
+ * @param {boolean} isDisabled Item is disabled
+ *
+ * Item disabled state has changed
+ */
+
/* Methods */
/**
* @inheritdoc
+ * @fires disabled
*/
OO.ui.TagItemWidget.prototype.setDisabled = function ( state ) {
// Parent method
if ( this.closeButton ) {
this.closeButton.setDisabled( state );
}
+
+ this.emit( 'disabled', this.isDisabled() );
return this;
};
OO.ui.TagItemWidget.prototype.onKeyDown = function ( e ) {
var movement;
- if ( e.keyCode === OO.ui.Keys.BACKSPACE || e.keyCode === OO.ui.Keys.DELETE ) {
+ if ( !this.isDisabled() && e.keyCode === OO.ui.Keys.BACKSPACE || e.keyCode === OO.ui.Keys.DELETE ) {
this.remove();
return false;
} else if ( e.keyCode === OO.ui.Keys.ENTER ) {
this.aggregate( {
remove: 'itemRemove',
navigate: 'itemNavigate',
- select: 'itemSelect'
+ select: 'itemSelect',
+ disabled: 'itemDisabled'
} );
this.connect( this, {
itemRemove: 'onTagRemove',
itemSelect: 'onTagSelect',
+ itemDisabled: 'onTagDisabled',
itemNavigate: 'onTagNavigate',
change: 'onChangeTags'
} );
* @return {boolean} False to prevent defaults
*/
OO.ui.TagMultiselectWidget.prototype.onMouseDown = function ( e ) {
- if ( !this.isDisabled() && e.which === OO.ui.MouseButtons.LEFT ) {
+ if (
+ !this.isDisabled() &&
+ ( !this.hasInput || e.target !== this.input.$input[ 0 ] ) &&
+ e.which === OO.ui.MouseButtons.LEFT
+ ) {
this.focus();
return false;
}
// Delete the last item
items = this.getItems();
item = items[ items.length - 1 ];
- this.removeItems( [ item ] );
- // If Ctrl/Cmd was pressed, delete item entirely.
- // Otherwise put it into the text field for editing.
- if ( !withMetaKey ) {
- this.input.setValue( item.getData() );
+
+ if ( !item.isDisabled() ) {
+ this.removeItems( [ item ] );
+ // If Ctrl/Cmd was pressed, delete item entirely.
+ // Otherwise put it into the text field for editing.
+ if ( !withMetaKey ) {
+ this.input.setValue( item.getData() );
+ }
}
return false;
}
};
+/**
+ * Respond to item disabled state change
+ *
+ * @param {OO.ui.TagItemWidget} item Selected item
+ * @param {boolean} isDisabled Item is disabled
+ */
+OO.ui.TagMultiselectWidget.prototype.onTagDisabled = function ( item, isDisabled ) {
+ if ( isDisabled ) {
+ // Move item to start if it is disabled
+ this.addItems( item, 0 );
+ }
+};
/**
* Respond to change event, where items were added, removed, or cleared.
*/
*
* @param {Object} config Configuration object
* @cfg {jQuery} [$overlay] An overlay for the popup.
- * See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>.
+ * See <https://www.mediawiki.org/wiki/OOUI/Concepts#Overlays>.
* @cfg {Object} [popup] Configuration options for the popup
* @cfg {OO.ui.InputWidget} [popupInput] An input widget inside the popup that will be
* focused when the popup is opened and will be used as replacement for the
*
* @constructor
* @param {Object} [config] Configuration object
+ * @cfg {boolean} [clearInputOnChoose=true] Clear the text input value when a menu option is chosen
* @cfg {Object} [menu] Configuration object for the menu widget
* @cfg {jQuery} [$overlay] An overlay for the menu.
- * See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>.
+ * See <https://www.mediawiki.org/wiki/OOUI/Concepts#Overlays>.
* @cfg {Object[]} [options=[]] Array of menu options in the format `{ data: …, label: … }`
*/
OO.ui.MenuTagMultiselectWidget = function OoUiMenuTagMultiselectWidget( config ) {
OO.ui.MenuTagMultiselectWidget.parent.call( this, config );
this.$overlay = ( config.$overlay === true ? OO.ui.getDefaultOverlay() : config.$overlay ) || this.$element;
-
+ this.clearInputOnChoose = config.clearInputOnChoose === undefined || !!config.clearInputOnChoose;
this.menu = this.createMenuWidget( $.extend( {
widget: this,
input: this.hasInput ? this.input : null,
*/
OO.ui.MenuTagMultiselectWidget.prototype.onInputChange = function () {
this.menu.toggle( true );
+ this.initializeMenuSelection();
};
/**
OO.ui.MenuTagMultiselectWidget.prototype.onMenuChoose = function ( menuItem ) {
// Add tag
this.addTag( menuItem.getData(), menuItem.getLabel() );
+ if ( this.hasInput && this.clearInputOnChoose ) {
+ this.input.setValue( '' );
+ }
};
/**
if ( !isVisible ) {
this.menu.selectItem( null );
this.menu.highlightItem( null );
+ } else {
+ this.initializeMenuSelection();
}
};
this.focus();
};
+/**
+ * Highlight the first selectable item in the menu, if configured.
+ *
+ * @private
+ * @chainable
+ */
+OO.ui.MenuTagMultiselectWidget.prototype.initializeMenuSelection = function () {
+ if ( !this.menu.findSelectedItem() ) {
+ this.menu.highlightItem( this.menu.findFirstSelectableItem() );
+ }
+};
+
/**
* @inheritdoc
*/
highlightedItem = this.menu.findHighlightedItem(),
item = this.menu.findItemFromData( inputValue );
+ if ( !inputValue ) {
+ return;
+ }
+
// Override the parent method so we add from the menu
// rather than directly from the input
* SelectFileWidgets allow for selecting files, using the HTML5 File API. These
* widgets can be configured with {@link OO.ui.mixin.IconElement icons} and {@link
* OO.ui.mixin.IndicatorElement indicators}.
- * Please see the [OOjs UI documentation on MediaWiki] [1] for more information and examples.
+ * Please see the [OOUI documentation on MediaWiki] [1] for more information and examples.
*
* @example
* // Example of a file select widget
* var selectFile = new OO.ui.SelectFileWidget();
* $( 'body' ).append( selectFile.$element );
*
- * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets
+ * [1]: https://www.mediawiki.org/wiki/OOUI/Widgets
*
* @class
* @extends OO.ui.Widget
* In general, search widgets are used inside a separate {@link OO.ui.Dialog dialog} window.
*
* Each time the query is changed, the search result menu is cleared and repopulated. Please see
- * the [OOjs UI demos][1] for an example.
+ * the [OOUI demos][1] for an example.
*
- * [1]: https://tools.wmflabs.org/oojs-ui/oojs-ui/demos/#dialogs-mediawiki-vector-ltr
+ * [1]: https://doc.wikimedia.org/oojs-ui/master/demos/#SearchInputWidget-type-search
*
* @class
* @extends OO.ui.Widget
if ( dir ) {
highlightedItem = this.results.findHighlightedItem();
if ( !highlightedItem ) {
- highlightedItem = this.results.getSelectedItem();
+ highlightedItem = this.results.findSelectedItem();
}
nextItem = this.results.findRelativeSelectableItem( highlightedItem, dir );
this.results.highlightItem( nextItem );