Class: IndexLayout

.ui.IndexLayout(configopt)

new IndexLayout(configopt)

IndexLayouts contain tab panel layouts as well as tabs that allow users to easily navigate through the tab panels and select which one to display. By default, only one tab panel is displayed at a time. When a user navigates to a new tab panel, the index layout automatically focuses on the first focusable element, unless the default setting is changed.

TODO: This class is similar to BookletLayout, we may want to refactor to reduce duplication

Parameters:
Name Type Attributes Description
config Object <optional>

Configuration options

Properties
Name Type Attributes Default Description
continuous boolean <optional>
 false

Show all tab panels, one after another
autoFocus boolean <optional>
 true

Focus on the first focusable element when a new tab panel is displayed. Disabled on mobile.
Source:
Example
// Example of a IndexLayout that contains two TabPanelLayouts.

    function TabPanelOneLayout( name, config ) {
        TabPanelOneLayout.parent.call( this, name, config );
        this.$element.append( '<p>First tab panel</p>' );
    }
    OO.inheritClass( TabPanelOneLayout, OO.ui.TabPanelLayout );
    TabPanelOneLayout.prototype.setupTabItem = function () {
        this.tabItem.setLabel( 'Tab panel one' );
    };

    var tabPanel1 = new TabPanelOneLayout( 'one' ),
        tabPanel2 = new OO.ui.TabPanelLayout( 'two', { label: 'Tab panel two' } );

    tabPanel2.$element.append( '<p>Second tab panel</p>' );

    var index = new OO.ui.IndexLayout();

    index.addTabPanels ( [ tabPanel1, tabPanel2 ] );
    $( 'body' ).append( index.$element );

Extends

Members

$content

Content DOM node

Properties:
Type Description
jQuery
Inherited From:
Source:

$menu

Menu DOM node

Properties:
Type Description
jQuery
Inherited From:
Source:

Methods

addTabPanels(tabPanels, index)

Add tab panels to the index layout

When tab panels are added with the same names as existing tab panels, the existing tab panels will be automatically removed before the new tab panels are added.

Parameters:
Name Type Description
tabPanels Array.<OO.ui.TabPanelLayout>

Tab panels to add
index number

Index of the insertion point
Source:
Fires:

clearTabPanels()

Clear all tab panels from the index layout.

To remove only a subset of tab panels from the index, use the #removeTabPanels method.

Source:
Fires:

focus(itemIndexopt)

Focus the first input in the current tab panel.

If no tab panel is selected, the first selectable tab panel will be selected. If the focus is already in an element on the current tab panel, nothing will happen.

Parameters:
Name Type Attributes Description
itemIndex number <optional>

A specific item to focus on
Source:

focusFirstFocusable()

Find the first focusable input in the index layout and focus on it.

Source:

getClosestScrollableElementContainer() → {HTMLElement}

Get closest scrollable container.

Inherited From:
Source:
Returns:

Closest scrollable container

Type
HTMLElement

getClosestTabPanel(tabPanel) → {OO.ui.TabPanelLayout|null}

Get the tab panel closest to the specified tab panel.

Parameters:
Name Type Description
tabPanel OO.ui.TabPanelLayout

Tab panel to use as a reference point
Source:
Returns:

Tab panel closest to the specified

Type
OO.ui.TabPanelLayout | null

getCurrentTabPanel() → {OO.ui.TabPanelLayout|undefined}

Get the current tab panel.

Source:
Returns:

Current tab panel, if found

Type
OO.ui.TabPanelLayout | undefined

getCurrentTabPanelName() → {string|null}

Get the symbolic name of the current tab panel.

Source:
Returns:

Symbolic name of the current tab panel

Type
string | null

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

getMenuPosition() → {string}

Get menu position.

Inherited From:
Source:
Returns:

Menu position

Type
string

getTabPanel(name) → {OO.ui.TabPanelLayout|undefined}

Get a tab panel by its symbolic name.

Parameters:
Name Type Description
name string

Symbolic name of tab panel
Source:
Returns:

Tab panel, if found

Type
OO.ui.TabPanelLayout | undefined

getTabs() → {OO.ui.TabSelectWidget}

Get the tabs widget.

Source:
Returns:

Tabs widget

Type
OO.ui.TabSelectWidget

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

isElementAttached() → {boolean}

Check if the element is attached to the DOM

Inherited From:
Source:
Returns:

The element is attached to the DOM

Type
boolean

isMenuVisible() → {boolean}

Check if menu is visible

Inherited From:
Source:
Returns:

Menu is visible

Type
boolean

isVisible() → {boolean}

Check if element is visible.

Inherited From:
Source:
Returns:

element is visible

Type
boolean

removeTabPanels(tabPanels)

Remove the specified tab panels from the index layout.

To remove all tab panels from the index, you may wish to use the #clearTabPanels method instead.

Parameters:
Name Type Description
tabPanels Array.<OO.ui.TabPanelLayout>

An array of tab panels to remove
Source:
Fires:

(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

selectFirstSelectableTabPanel()

Select the first selectable tab panel.

Source:

setData(data)

Set element data.

Parameters:
Name Type Description
data Mixed

Element data
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:

setMenuPosition(position)

Set menu position.

Parameters:
Name Type Description
position string

Position of menu, either top, after, bottom or before
Inherited From:
Source:
Throws:

If position value is not supported

Type
Error

setTabPanel(name)

Set the current tab panel by symbolic name.

Parameters:
Name Type Description
name string

Symbolic name of tab panel
Source:
Fires:

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

toggleMenu(showMenu)

Toggle menu.

Parameters:
Name Type Description
showMenu boolean

Show menu, omit to toggle
Inherited From:
Source:

updateThemeClasses()

Update the theme-provided classes.

Inherited From:
Source: