new MenuTagMultiselectWidget(configopt)
MenuTagMultiselectWidget is a OO.ui.TagMultiselectWidget intended
to use a menu of selectable options.
Parameters:
Name | Type | Attributes | Description | ||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
config |
Object |
<optional> |
Configuration object
Properties
|
Example
// Example: A basic MenuTagMultiselectWidget.
var widget = new OO.ui.MenuTagMultiselectWidget( {
inputPosition: 'outline',
options: [
{ data: 'option1', label: 'Option 1' },
{ data: 'option2', label: 'Option 2' },
{ data: 'option3', label: 'Option 3' },
],
selected: [ 'option1', 'option2' ]
} );
$( 'body' ).append( widget.$element );
Extends
Methods
addAllowedValue(value)
Add a value to the allowed values list
Parameters:
Name | Type | Description |
---|---|---|
value |
string | Allowed data value |
- Inherited From:
- Source:
addOptions(menuOptions)
Add options to the menu
Parameters:
Name | Type | Description |
---|---|---|
menuOptions |
Array.<Object> | Object defining options |
addTag(data, labelopt) → {boolean}
Add tag to the display area
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
data |
string | Object | Tag data | |
label |
string |
<optional> |
Tag label. If no label is provided, the stringified version of the data will be used instead. |
- Inherited From:
- Source:
Returns:
Item was added successfully
- Type
- boolean
addTagFromInput()
Add tag from input value
- Overrides:
- Source:
checkValidity() → {boolean}
Check whether all items in the widget are valid
- Inherited From:
- Source:
Returns:
Widget is valid
- Type
- boolean
clearInput()
Clear the input
- Inherited From:
- Source:
createMenuOptionWidget(data, labelopt) → {OO.ui.OptionWidget}
Create a menu option widget.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
data |
string | Item data | |
label |
string |
<optional> |
Item label |
Returns:
Option widget
- Type
- OO.ui.OptionWidget
createMenuWidget(menuConfig) → {OO.ui.MenuSelectWidget}
Create the menu for this widget. This is in a separate method so that
child classes can override this without polluting the constructor with
unnecessary extra objects that will be overidden.
Parameters:
Name | Type | Description |
---|---|---|
menuConfig |
Object | Configuration options |
Returns:
Menu widget
(protected) createTagItemWidget(data, label) → {OO.ui.TagItemWidget}
Construct a OO.ui.TagItemWidget (or a subclass thereof) from given label and data.
Parameters:
Name | Type | Description |
---|---|---|
data |
string | Item data |
label |
string | The label text. |
- Inherited From:
- Source:
Returns:
- Type
- OO.ui.TagItemWidget
doInputArrow(e, direction, withMetaKeyopt)
Perform an action after the arrow key on the input, select the previous
or next item from the input.
See #getPreviousItem and #getNextItem
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
e |
jQuery.Event | Event data | |
direction |
string | Direction of the movement; forwards or backwards | |
withMetaKey |
boolean |
<optional> |
Whether this key was pressed with a meta key like 'ctrl' |
- Inherited From:
- Source:
doInputBackspace(e, withMetaKeyopt) → {boolean}
Perform an action responding to the enter key on the input
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
e |
jQuery.Event | Event data | |
withMetaKey |
boolean |
<optional> |
Whether this key was pressed with a meta key like 'ctrl' |
- Inherited From:
- Source:
Returns:
Whether to prevent defaults
- Type
- boolean
doInputEnter(e, withMetaKeyopt) → {boolean}
Perform an action after the enter key on the input
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
e |
jQuery.Event | Event data | |
withMetaKey |
boolean |
<optional> |
Whether this key was pressed with a meta key like 'ctrl' |
- Inherited From:
- Source:
Returns:
Whether to prevent defaults
- Type
- boolean
doInputEscape(e)
Perform an action after the escape key on the input
Parameters:
Name | Type | Description |
---|---|---|
e |
jQuery.Event | Event data |
- Inherited From:
- Source:
getAllowedValues() → {Array.<string>}
Get the allowed values list
- Overrides:
- Source:
Returns:
Allowed data values
- Type
- Array.<string>
getClosestScrollableElementContainer() → {HTMLElement}
Get closest scrollable container.
- Inherited From:
- Source:
Returns:
Closest scrollable container
- Type
- HTMLElement
getData() → {Mixed}
Get element data.
- Inherited From:
- Source:
Returns:
Element data
- Type
- Mixed
getElementDocument() → {HTMLDocument}
Get the DOM document.
- Inherited From:
- Source:
Returns:
Document object
- Type
- HTMLDocument
getElementGroup() → {OO.ui.mixin.GroupElement|null}
Get group element is in.
- Inherited From:
- Source:
Returns:
Group element, null if none
- Type
- OO.ui.mixin.GroupElement | null
getElementId() → {string}
Ensure that the element has an 'id' attribute, setting it to an unique value if it's missing,
and return its value.
- Inherited From:
- Source:
Returns:
- Type
- string
getElementWindow() → {Window}
Get the DOM window.
- Inherited From:
- Source:
Returns:
Window object
- Type
- Window
getInputId() → {string|null}
Get an ID of a labelable node which is part of this widget, if any, to be used for `
- Inherited From:
- Source:
Returns:
The ID of the labelable element
- Type
- string | null
getMenu() → {OO.ui.MenuSelectWidget}
Get the menu
Returns:
Menu
getMenuVisibleItems() → {Array.<OO.ui.MenuOptionWidget>}
Return the visible items in the menu. This is mainly used for when
the menu is filtering results.
Returns:
Visible results
- Type
- Array.<OO.ui.MenuOptionWidget>
(protected) getNextItem(itemopt) → {OO.ui.Widget}
Given an item, returns the item after it. If the item is already the
last item, return `this.input`. If no item is passed, returns the
very first item.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
item |
OO.ui.TagItemWidget |
<optional> |
Tag item |
- Inherited From:
- Source:
Returns:
The next widget available.
- Type
- OO.ui.Widget
(protected) getPreviousItem(itemopt) → {OO.ui.Widget}
Given an item, returns the item before it. If the item is already the
first item, return `this.input`. If no item is passed, returns the
very last item.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
item |
OO.ui.TagItemWidget |
<optional> |
Tag item |
- Inherited From:
- Source:
Returns:
The previous widget available.
- Type
- OO.ui.Widget
getTagName() → {string}
Get the HTML tag name.
Override this method to base the result on instance information.
- Inherited From:
- Source:
Returns:
HTML tag name
- Type
- string
getValue() → {Array.<string>|Array.<Object>}
Get the datas of the currently selected items
- Inherited From:
- Source:
Returns:
Datas of currently selected items
- Type
- Array.<string> | Array.<Object>
isAllowedData(data) → {boolean}
Check whether a given value is allowed to be added
Parameters:
Name | Type | Description |
---|---|---|
data |
string | Object | Requested value |
- Inherited From:
- Source:
Returns:
Value is allowed
- Type
- boolean
isDisabled() → {boolean}
Check if the widget is disabled.
- Inherited From:
- Source:
Returns:
Widget is disabled
- Type
- boolean
isDuplicateData(data) → {boolean}
Check whether the given value is a duplicate of an existing
tag already in the list.
Parameters:
Name | Type | Description |
---|---|---|
data |
string | Object | Requested value |
- Inherited From:
- Source:
Returns:
Value is duplicate
- Type
- boolean
isElementAttached() → {boolean}
Check if the element is attached to the DOM
- Inherited From:
- Source:
Returns:
The element is attached to the DOM
- Type
- boolean
isValid() → {boolean}
Get the current valid state of the widget
- Inherited From:
- Source:
Returns:
Widget is valid
- Type
- boolean
isVisible() → {boolean}
Check if element is visible.
- Inherited From:
- Source:
Returns:
element is visible
- Type
- boolean
onChangeTags()
Respond to change event, where items were added, removed, or cleared.
- Inherited From:
- Source:
onInputBlur()
Respond to input blur event
- Inherited From:
- Source:
onInputChange()
Respond to input change event
onInputFocus()
Respond to input focus event
- Overrides:
- Source:
onMenuChoose(menuItem)
Respond to menu choose event
Parameters:
Name | Type | Description |
---|---|---|
menuItem |
OO.ui.OptionWidget | Chosen menu item |
onMenuToggle(isVisible)
Respond to menu toggle event. Reset item highlights on hide.
Parameters:
Name | Type | Description |
---|---|---|
isVisible |
boolean | The menu is visible |
onResize()
Respond to resize event
onTagNavigate(item, direction)
Respond to navigate event on the tag
Parameters:
Name | Type | Description |
---|---|---|
item |
OO.ui.TagItemWidget | Removed tag |
direction |
string | Direction of movement; 'forwards' or 'backwards' |
- Inherited From:
- Source:
onTagRemove(item)
Respond to tag remove event
Parameters:
Name | Type | Description |
---|---|---|
item |
OO.ui.TagItemWidget | Removed tag |
- Inherited From:
- Source:
onTagSelect(item)
Respond to item select event
Parameters:
Name | Type | Description |
---|---|---|
item |
OO.ui.TagItemWidget | Selected item |
- Overrides:
- Source:
removeTagByData(data)
Remove tag by its data property.
Parameters:
Name | Type | Description |
---|---|---|
data |
string | Object | Tag data |
- Inherited From:
- Source:
(protected) restorePreInfuseState(state)
Restore the pre-infusion dynamic state for this widget.
This method is called after #$element has been inserted into DOM. The parameter is the return
value of #gatherPreInfuseState.
Parameters:
Name | Type | Description |
---|---|---|
state |
Object |
- Inherited From:
- Source:
scrollElementIntoView(configopt) → {jQuery.Promise}
Scroll element into view.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
config |
Object |
<optional> |
Configuration options |
- Inherited From:
- Source:
Returns:
Promise which resolves when the scroll is complete
- Type
- jQuery.Promise
setData(data)
Set element data.
Parameters:
Name | Type | Description |
---|---|---|
data |
Mixed | Element data |
- Inherited From:
- Source:
setDisabled(disabled)
Set the 'disabled' state of the widget.
When a widget is disabled, it cannot be used and its appearance is updated to reflect this state.
Parameters:
Name | Type | Description |
---|---|---|
disabled |
boolean | Disable widget |
- Inherited From:
- Source:
setElementGroup(group)
Set group element is in.
Parameters:
Name | Type | Description |
---|---|---|
group |
OO.ui.mixin.GroupElement | null | Group element, null if none |
- Inherited From:
- Source:
setElementId(id)
Set the element has an 'id' attribute.
Parameters:
Name | Type | Description |
---|---|---|
id |
string |
- Inherited From:
- Source:
setValue(valueObject)
Set the value of this widget by datas.
Parameters:
Name | Type | Description |
---|---|---|
valueObject |
string | Array.<string> | Object | Array.<Object> | An object representing the data and label of the value. If the widget allows arbitrary values, the items will be added as-is. Otherwise, the data value will be checked against allowedValues. This object must contain at least a data key. Example: { data: 'foo', label: 'Foo item' } For multiple items, use an array of objects. For example: [ { data: 'foo', label: 'Foo item' }, { data: 'bar', label: 'Bar item' } ] Value can also be added with plaintext array, for example: [ 'foo', 'bar', 'bla' ] or a single string, like 'foo' |
- Inherited From:
- Source:
simulateLabelClick()
Simulate the behavior of clicking on a label (a HTML `
- Inherited From:
- Source:
supports(methods) → {boolean}
Check if element supports one or more methods.
Parameters:
Name | Type | Description |
---|---|---|
methods |
string | Array.<string> | Method or list of methods to check |
- Inherited From:
- Source:
Returns:
All methods are supported
- Type
- boolean
toggle(showopt)
Toggle visibility of an element.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
show |
boolean |
<optional> |
Make element visible, omit to toggle visibility |
- Inherited From:
- Source:
Fires:
- event:visible
toggleValid(validopt)
Set the valid state of this item
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
valid |
boolean |
<optional> |
Item is valid |
- Inherited From:
- Source:
Fires:
updateDisabled()
Update the disabled state, in case of changes in parent widget.
- Inherited From:
- Source:
updateThemeClasses()
Update the theme-provided classes.
- Inherited From:
- Source: