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 <label for> value.

If this function returns null, the widget should have a meaningful #simulateLabelClick method instead.

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 <label> element) bound to this input. HTML only allows <label> to act on specific "labelable" elements; complex widgets might need to override this method to provide intuitive, accessible behavior.

By default, this does nothing. OO.ui.mixin.TabIndexedElement overrides it for focusable widgets. Individual widgets may override it too.

This method is called by OO.ui.LabelWidget and OO.ui.FieldLayout. It should not be called directly.

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: