Class: PopupTagMultiselectWidget

.ui.PopupTagMultiselectWidget(config)

new PopupTagMultiselectWidget(config)

PopupTagMultiselectWidget is a OO.ui.TagMultiselectWidget intended to use a popup. The popup can be configured to have a default input to insert values into the widget.
Parameters:
Name Type Description
config Object Configuration object
Properties
Name Type Attributes Description
$overlay jQuery <optional>
An overlay for the popup. See .
popup Object <optional>
Configuration options for the popup
popupInput OO.ui.InputWidget <optional>
An input widget inside the popup that will be focused when the popup is opened and will be used as replacement for the general input in the widget.
Mixes In:
Source:
Example
// Example: A basic PopupTagMultiselectWidget.
    var widget = new OO.ui.PopupTagMultiselectWidget();
    $( 'body' ).append( widget.$element );

    // Example: A PopupTagMultiselectWidget with an external popup.
    var popupInput = new OO.ui.TextInputWidget(),
        widget = new OO.ui.PopupTagMultiselectWidget( {
           popupInput: popupInput,
           popup: {
              $content: popupInput.$element
           }
        } );
    $( '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:

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

addTagByPopupValue(data, labelopt)

Add a tag by the popup value. Whatever is responsible for setting the value in the popup should call this method to add a tag, or use the regular methods like #addTag or #setValue directly.
Parameters:
Name Type Attributes Description
data string The value of item
label string <optional>
The label of the tag. If not given, the data is used.
Source:

addTagFromInput()

Add tag from input value
Inherited From:
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:

(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
Inherited From:
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

(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:

onInputFocus()

Respond to input focus event
Inherited From:
Source:

onPopupInputEnter()

Respond to popup input enter event
Source:

onPopupToggle(isVisible)

Respond to popup toggle event
Parameters:
Name Type Description
isVisible boolean Popup is visible
Source:

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: