/*!
- * OOjs UI v0.24.4
- * https://www.mediawiki.org/wiki/OOjs_UI
+ * OOUI v0.25.2
+ * 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-02T19:08:58Z
+ * Date: 2018-02-07T00:27:24Z
*/
( 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() );
}
};
prev = pages[ index - 1 ];
// Prefer adjacent pages at the same level
if ( this.outlined ) {
- level = this.outlineSelectWidget.getItemFromData( page.getName() ).getLevel();
+ level = this.outlineSelectWidget.findItemFromData( page.getName() ).getLevel();
if (
prev &&
- level === this.outlineSelectWidget.getItemFromData( prev.getName() ).getLevel()
+ level === this.outlineSelectWidget.findItemFromData( prev.getName() ).getLevel()
) {
return prev;
}
if (
next &&
- level === this.outlineSelectWidget.getItemFromData( next.getName() ).getLevel()
+ level === this.outlineSelectWidget.findItemFromData( next.getName() ).getLevel()
) {
return next;
}
return prev || next || null;
};
-/**
- * Get the page closest to the specified page.
- *
- * @deprecated 0.23.0 Use {@link OO.ui.BookletLayout#findClosestPage} instead.
- * @param {OO.ui.PageLayout} page Page to use as a reference point
- * @return {OO.ui.PageLayout|null} Page closest to the specified page
- */
-OO.ui.BookletLayout.prototype.getClosestPage = function ( page ) {
- OO.ui.warnDeprecation( 'BookletLayout#getClosestPage: Deprecated function. Use findClosestPage instead. See T76630.' );
- return this.findClosestPage( page );
-};
-
/**
* Get the outline widget.
*
name = page.getName();
delete this.pages[ name ];
if ( this.outlined ) {
- items.push( this.outlineSelectWidget.getItemFromData( name ) );
+ items.push( this.outlineSelectWidget.findItemFromData( name ) );
page.setOutlineItem( null );
}
}
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() );
}
next = tabPanels[ index + 1 ];
prev = tabPanels[ index - 1 ];
// Prefer adjacent tab panels at the same level
- level = this.tabSelectWidget.getItemFromData( tabPanel.getName() ).getLevel();
+ level = this.tabSelectWidget.findItemFromData( tabPanel.getName() ).getLevel();
if (
prev &&
- level === this.tabSelectWidget.getItemFromData( prev.getName() ).getLevel()
+ level === this.tabSelectWidget.findItemFromData( prev.getName() ).getLevel()
) {
return prev;
}
if (
next &&
- level === this.tabSelectWidget.getItemFromData( next.getName() ).getLevel()
+ level === this.tabSelectWidget.findItemFromData( next.getName() ).getLevel()
) {
return next;
}
tabPanel = tabPanels[ i ];
name = tabPanel.getName();
delete this.tabPanels[ name ];
- items.push( this.tabSelectWidget.getItemFromData( name ) );
+ items.push( this.tabSelectWidget.findItemFromData( name ) );
tabPanel.setTabItem( null );
}
if ( items.length ) {
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();
* 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;
$.each( datas, function ( i, data ) {
var j, label,
- item = menu.getItemFromData( data );
+ item = menu.findItemFromData( data );
if ( item ) {
label = item.label;
$.each( datas, function ( i, data ) {
var item;
- if ( !widget.getItemFromData( data ) || widget.allowDuplicates ) {
- item = menu.getItemFromData( data );
+ if ( !widget.findItemFromData( data ) || widget.allowDuplicates ) {
+ item = menu.findItemFromData( data );
if ( item ) {
item = widget.createItemWidget( data, item.label );
} else if ( widget.allowArbitrary ) {
items = [];
$.each( datas, function ( i, data ) {
- var item = widget.getItemFromData( data );
+ var item = widget.findItemFromData( data );
if ( item ) {
items.push( item );
}
* A basic tag multiselect widget, similar in concept to {@link OO.ui.ComboBoxInputWidget combo box widget}
* that allows the user to add multiple values that are displayed in a tag area.
*
- * For more information about menus and options, please see the [OOjs UI documentation on MediaWiki][1].
- *
* This widget is a base widget; see {@link OO.ui.MenuTagMultiselectWidget MenuTagMultiselectWidget} and
* {@link OO.ui.PopupTagMultiselectWidget PopupTagMultiselectWidget} for the implementations that use
* a menu and a popup respectively.
* } );
* $( 'body' ).append( widget.$element );
*
- * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Selects_and_Options#Menu_selects_and_options
- *
* @class
* @extends OO.ui.Widget
* @mixins OO.ui.mixin.GroupWidget
* @return {boolean} Value is duplicate
*/
OO.ui.TagMultiselectWidget.prototype.isDuplicateData = function ( data ) {
- return !!this.getItemFromData( data );
+ return !!this.findItemFromData( data );
};
/**
* @param {string|Object} data Tag data
*/
OO.ui.TagMultiselectWidget.prototype.removeTagByData = function ( data ) {
- var item = this.getItemFromData( data );
+ var item = this.findItemFromData( data );
this.removeItems( [ item ] );
};
* PopupTagMultiselectWidget is a {@link OO.ui.TagMultiselectWidget OO.ui.TagMultiselectWidget} intended
* to use a popup. The popup can be configured to have a default input to insert values into the widget.
*
- * For more information about menus and options, please see the [OOjs UI documentation on MediaWiki][1].
- *
* @example
* // Example: A basic PopupTagMultiselectWidget.
* var widget = new OO.ui.PopupTagMultiselectWidget();
* } );
* $( 'body' ).append( widget.$element );
*
- * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Selects_and_Options#Menu_selects_and_options
- *
* @class
* @extends OO.ui.TagMultiselectWidget
* @mixins OO.ui.mixin.PopupElement
*
* @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
* MenuTagMultiselectWidget is a {@link OO.ui.TagMultiselectWidget OO.ui.TagMultiselectWidget} intended
* to use a menu of selectable options.
*
- * For more information about menus and options, please see the [OOjs UI documentation on MediaWiki][1].
- *
* @example
* // Example: A basic MenuTagMultiselectWidget.
* var widget = new OO.ui.MenuTagMultiselectWidget( {
* } );
* $( 'body' ).append( widget.$element );
*
- * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Selects_and_Options#Menu_selects_and_options
- *
* @class
* @extends OO.ui.TagMultiselectWidget
*
* @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,
$input: this.hasInput ? this.input.$input : null,
filterFromInput: !!this.hasInput,
$autoCloseIgnore: this.hasInput ?
- this.input.$element.add( this.$overlay ) : this.$overlay,
+ this.input.$element : $( [] ),
$floatableContainer: this.hasInput && this.inputPosition === 'outline' ?
this.input.$element : this.$element,
$overlay: this.$overlay,
OO.ui.MenuTagMultiselectWidget.prototype.onMenuChoose = function ( menuItem ) {
// Add tag
this.addTag( menuItem.getData(), menuItem.getLabel() );
+ if ( this.hasInput && this.clearInputOnChoose ) {
+ this.input.setValue( '' );
+ }
};
/**
* @inheritdoc
*/
OO.ui.MenuTagMultiselectWidget.prototype.onTagSelect = function ( tagItem ) {
- var menuItem = this.menu.getItemFromData( tagItem.getData() );
+ var menuItem = this.menu.findItemFromData( tagItem.getData() );
// Override the base behavior from TagMultiselectWidget; the base behavior
// in TagMultiselectWidget is to remove the tag to edit it in the input,
// but in our case, we want to utilize the menu selection behavior, and
// definitely not remove the item.
+ // If there is an input that is used for filtering, erase the value so we don't filter
+ if ( this.hasInput && this.menu.filterFromInput ) {
+ this.input.setValue( '' );
+ }
+
// Select the menu item
this.menu.selectItem( menuItem );
var inputValue = this.input.getValue(),
validated = false,
highlightedItem = this.menu.findHighlightedItem(),
- item = this.menu.getItemFromData( inputValue );
+ item = this.menu.findItemFromData( inputValue );
// 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 );