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

Returns:

The layout, for chaining

Type
OO.ui.StackLayout
Source:
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.

Returns:

The layout, for chaining

Type
OO.ui.StackLayout

Fires:

Source:
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.

Returns:

Closest scrollable container

Type
HTMLElement
Inherited from:
Source:
Get closest scrollable container.

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

Get the current panel.

Returns:

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

getData() → {any} #

Get element data.

Returns:

Element data

Type
any
Inherited from:
Source:
Get element data.

getElementDocument() → {HTMLDocument} #

Get the DOM document.

Returns:

Document object

Type
HTMLDocument
Inherited from:
Source:
Get the DOM document.

getElementGroup() → {OO.ui.mixin.GroupElement|null} #

Get group element is in.

Returns:

Group element, null if none

Type
OO.ui.mixin.GroupElement | null
Inherited from:
Source:
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.

Returns:

Type
string
Inherited from:
Source:

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.

Returns:

Window object

Type
Window
Inherited from:
Source:
Get the DOM window.

getTagName() → {string} #

Get the HTML tag name.

Override this method to base the result on instance information.

Returns:

HTML tag name

Type
string
Inherited from:
Source:
Get the HTML tag name.

isContinuous() → {boolean} #

Check if the layout is in continuous mode

Returns:

The layout is in continuous mode

Type
boolean
Source:
Check if the layout is in continuous mode

isElementAttached() → {boolean} #

Check if the element is attached to the DOM

Returns:

The element is attached to the DOM

Type
boolean
Inherited from:
Source:
Check if the element is attached to the DOM

isVisible() → {boolean} #

Check if element is visible.

Returns:

element is visible

Type
boolean
Inherited from:
Source:
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

Returns:

The layout, for chaining

Type
OO.ui.StackLayout

Fires:

Source:
Remove the specified panels from the stack layout.

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

Reset scroll offsets

Returns:

The layout, for chaining

Type
OO.ui.Layout
Overrides:
Source:
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

Returns:

Promise which resolves when the scroll is complete

Type
jQuery.Promise
Inherited from:
Source:
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

Returns:

The element, for chaining

Type
OO.ui.Element
Inherited from:
Source:
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

Returns:

The element, for chaining

Type
OO.ui.Element
Inherited from:
Source:
Set group element is in.

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

Set the element has an 'id' attribute.

Parameters:

Name Type Description
id string

Returns:

The element, for chaining

Type
OO.ui.Element
Inherited from:
Source:
Set the element has an 'id' attribute.

setHideUntilFound(hideUntilFound) #

Set the hideUntilFound config (see constructor)

Parameters:

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

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

Returns:

The layout, for chaining

Type
OO.ui.StackLayout

Fires:

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

Returns:

All methods are supported

Type
boolean
Inherited from:
Source:
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

Returns:

The element, for chaining

Type
OO.ui.Element

Fires:

Inherited from:
Source:
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.