Expand all

OO.ui.StackLayout

Extends

Constructor

new OO.ui.StackLayout([config]) #

StackLayouts contain a series of panel layouts. By default, only one panel is displayed at a time, though the stack layout can also be configured to show all contained panels, one after another, by setting the #continuous option to 'true'.

Example

// A stack layout with two panels, configured to be displayed continuously
    const myStack = new OO.ui.StackLayout( {
        items: [
            new OO.ui.PanelLayout( {
                $content: $( '<p>Panel One</p>' ),
                padded: true,
                framed: true
            } ),
            new OO.ui.PanelLayout( {
                $content: $( '<p>Panel Two</p>' ),
                padded: true,
                framed: true
            } )
        ],
        continuous: true
    } );
    $( document.body ).append( myStack.$element );

Parameters:

Name Type Attributes Description
config Object optional

Configuration options

Properties:
Name Type Attributes Default Description
continuous boolean optional
 false

Show all panels, one after another. By default, only one panel is displayed at a time.
items Array.<OO.ui.Layout> optional

Panel layouts to add to the stack layout.
hideUntilFound boolean optional

Hide panels using hidden="until-found", meaning they will be shown when matched with the browser's find-and-replace feature if supported.
Mixes in:
Source:
StackLayouts contain a series of panel layouts.

Methods

addItems([items], [index]) → {OO.ui.StackLayout}chainable #

Add panel layouts to the stack layout.

Panels will be added to the end of the stack layout array unless the optional index parameter specifies a different insertion point. Adding a panel that is already in the stack will move it to the end of the array or the point specified by the index.

Parameters:

Name Type Attributes Description
items Array.<OO.ui.Layout> optional

Panels to add
index number optional

Index of the insertion point
Source:

Returns:

The layout, for chaining

Type
OO.ui.StackLayout
Add panel layouts to the stack layout.

clearItems() → {OO.ui.StackLayout}chainable #

Clear all panels from the stack layout.

Cleared panels are detached from the DOM, not removed, so that they may be reused. To remove only a subset of panels, use the #removeItems method.

Source:

Returns:

The layout, for chaining

Type
OO.ui.StackLayout

Fires:

Clear all panels from the stack layout.

focus() #

Focus the panel layout

The default implementation just focuses the first focusable element in the panel

Inherited from:
Source:

Focus the panel layout

The default implementation just focuses the first focusable element in the panel

getClosestScrollableElementContainer() → {HTMLElement} #

Get closest scrollable container.

Inherited from:
Source:

Returns:

Closest scrollable container

Type
HTMLElement
Get closest scrollable container.

getCurrentItem() → {OO.ui.Layout|null} #

Get the current panel.

Source:

Returns:

Type
OO.ui.Layout | null
Get the current panel.

getData() → {any} #

Get element data.

Inherited from:
Source:

Returns:

Element data

Type
any
Get element data.

getElementDocument() → {HTMLDocument} #

Get the DOM document.

Inherited from:
Source:

Returns:

Document object

Type
HTMLDocument
Get the DOM document.

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
Get group element is in.

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

Ensure that the element has an 'id' attribute, setting it to an unique value if it's missing, and return its value.

getElementWindow() → {Window} #

Get the DOM window.

Inherited from:
Source:

Returns:

Window object

Type
Window
Get the DOM window.

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
Get the HTML tag name.

isContinuous() → {boolean} #

Check if the layout is in continuous mode

Source:

Returns:

The layout is in continuous mode

Type
boolean
Check if the layout is in continuous mode

isElementAttached() → {boolean} #

Check if the element is attached to the DOM

Inherited from:
Source:

Returns:

The element is attached to the DOM

Type
boolean
Check if the element is attached to the DOM

isVisible() → {boolean} #

Check if element is visible.

Inherited from:
Source:

Returns:

element is visible

Type
boolean
Check if element is visible.

removeItems(itemsToRemove) → {OO.ui.StackLayout}chainable #

Remove the specified panels from the stack layout.

Removed panels are detached from the DOM, not removed, so that they may be reused. To remove all panels, you may wish to use the #clearItems method instead.

Parameters:

Name Type Description
itemsToRemove Array.<OO.ui.Layout>

Panels to remove
Source:

Returns:

The layout, for chaining

Type
OO.ui.StackLayout

Fires:

Remove the specified panels from the stack layout.

resetScroll() → {OO.ui.Layout}chainable #

Reset scroll offsets

Overrides:
Source:

Returns:

The layout, for chaining

Type
OO.ui.Layout
Reset scroll offsets

restorePreInfuseState(state)protected #

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:
Restore the pre-infusion dynamic state for this widget.

scrollElementIntoView([config]) → {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
Scroll element into view.

setContinuous(continuous) #

Set the layout to continuous mode or not

Parameters:

Name Type Description
continuous boolean

Continuous mode
Source:
Set the layout to continuous mode or not

setData(data) → {OO.ui.Element}chainable #

Set element data.

Parameters:

Name Type Description
data any

Element data
Inherited from:
Source:

Returns:

The element, for chaining

Type
OO.ui.Element
Set element data.

setElementGroup(group) → {OO.ui.Element}chainable #

Set group element is in.

Parameters:

Name Type Description
group OO.ui.mixin.GroupElement | null

Group element, null if none
Inherited from:
Source:

Returns:

The element, for chaining

Type
OO.ui.Element
Set group element is in.

setElementId(id) → {OO.ui.Element}chainable #

Set the element has an 'id' attribute.

Parameters:

Name Type Description
id string
Inherited from:
Source:

Returns:

The element, for chaining

Type
OO.ui.Element
Set the element has an 'id' attribute.

setHideUntilFound(hideUntilFound) #

Set the hideUntilFound config (see contructor)

Parameters:

Name Type Description
hideUntilFound boolean
Source:
Set the hideUntilFound config (see contructor)

setItem(item) → {OO.ui.StackLayout}chainable #

Show the specified panel.

If another panel is currently displayed, it will be hidden.

Parameters:

Name Type Description
item OO.ui.Layout

Panel to show
Source:

Returns:

The layout, for chaining

Type
OO.ui.StackLayout

Fires:

Show the specified panel.

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
Check if element supports one or more methods.

toggle([show]) → {OO.ui.Element}chainable #

Toggle visibility of an element.

Parameters:

Name Type Attributes Description
show boolean optional

Make element visible, omit to toggle visibility
Inherited from:
Source:

Returns:

The element, for chaining

Type
OO.ui.Element

Fires:

Toggle visibility of an element.

updateThemeClasses() #

Update the theme-provided classes.

This is called in element mixins and widget classes any time state changes. Updating is debounced, minimizing overhead of changing multiple attributes and guaranteeing that theme updates do not occur within an element's constructor

Inherited from:
Source:
Update the theme-provided classes.

Events

set(item) #

A 'set' event is emitted when panels are added, removed, cleared or displayed.

Parameters:

Name Type Description
item OO.ui.Layout | null

Current panel or null if no panel is shown
Source:

A 'set' event is emitted when panels are added, removed, cleared or displayed.