Expand all

OO.ui.BookletLayout

Extends

Constructor

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

BookletLayouts contain page layouts as well as an outline that allows users to easily navigate through the pages and select which one to display. By default, only one page is displayed at a time and the outline is hidden. When a user navigates to a new page, the booklet layout automatically focuses on the first focusable element, unless the default setting is changed. Optionally, booklets can be configured to show controls for adding, moving, and removing items.

Example

// Example of a BookletLayout that contains two PageLayouts.

    function PageOneLayout( name, config ) {
        PageOneLayout.super.call( this, name, config );
        this.$element.append( '<p>First page</p><p>(This booklet has an outline, displayed on ' +
        'the left)</p>' );
    }
    OO.inheritClass( PageOneLayout, OO.ui.PageLayout );
    PageOneLayout.prototype.setupOutlineItem = function () {
        this.outlineItem.setLabel( 'Page One' );
    };

    function PageTwoLayout( name, config ) {
        PageTwoLayout.super.call( this, name, config );
        this.$element.append( '<p>Second page</p>' );
    }
    OO.inheritClass( PageTwoLayout, OO.ui.PageLayout );
    PageTwoLayout.prototype.setupOutlineItem = function () {
        this.outlineItem.setLabel( 'Page Two' );
    };

    const page1 = new PageOneLayout( 'one' ),
        page2 = new PageTwoLayout( 'two' );

    const booklet = new OO.ui.BookletLayout( {
        outlined: true
    } );

    booklet.addPages( [ page1, page2 ] );
    $( document.body ).append( booklet.$element );

Parameters:

Name Type Attributes Description
config Object optional

Configuration options

Properties:
Name Type Attributes Default Description
continuous boolean optional
 false

Show all pages, one after another
autoFocus boolean optional
 true

Focus on the first focusable element when a new page is displayed. Disabled on mobile.
outlined boolean optional
 false

Show the outline. The outline is used to navigate through the pages of the booklet.
editable boolean optional
 false

Show controls for adding, removing and reordering pages.
Source:

BookletLayouts contain page layouts as well as an outline that allows users to easily navigate through the pages and select which one to display.

Properties

$content #

Content DOM node

Properties:

Type Description
jQuery
Inherited from:
Source:
Content DOM node

$menu #

Menu DOM node

Properties:

Type Description
jQuery
Inherited from:
Source:
Menu DOM node

Methods

addPages(pages, index) → {OO.ui.BookletLayout}chainable #

Add pages to the booklet layout

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

Parameters:

Name Type Description
pages Array.<OO.ui.PageLayout>

Pages to add
index number

Index of the insertion point

Returns:

The layout, for chaining

Type
OO.ui.BookletLayout

Fires:

Source:

Add pages to the booklet layout

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

clearContentPanel() #

Clear the content panel.

Inherited from:
Source:
Clear the content panel.

clearMenuPanel() #

Clear the menu panel.

Inherited from:
Source:
Clear the menu panel.

clearPages() → {OO.ui.BookletLayout}chainable #

Clear all pages from the booklet layout.

To remove only a subset of pages from the booklet, use the #removePages method.

Returns:

The layout, for chaining

Type
OO.ui.BookletLayout

Fires:

Source:
Clear all pages from the booklet layout.

findClosestPage(page) → {OO.ui.PageLayout|null} #

Find the page closest to the specified page.

Parameters:

Name Type Description
page OO.ui.PageLayout

Page to use as a reference point

Returns:

Page closest to the specified page

Type
OO.ui.PageLayout | null
Source:
Find the page closest to the specified page.

focus([itemIndex]) #

Focus the first input in the current page.

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

Parameters:

Name Type Attributes Description
itemIndex number optional

A specific item to focus on
Source:
Focus the first input in the current page.

focusFirstFocusable() #

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

Source:

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

getClosestScrollableElementContainer() → {HTMLElement} #

Get closest scrollable container.

Returns:

Closest scrollable container

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

getCurrentPage() → {OO.ui.PageLayout|undefined} #

Get the current page.

Returns:

Current page, if found

Type
OO.ui.PageLayout | undefined
Source:
Get the current page.

getCurrentPageName() → {string|null} #

Get the symbolic name of the current page.

Returns:

Symbolic name of the current page

Type
string | null
Source:
Get the symbolic name of the current page.

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.

getMenuPosition() → {string} #

Get menu position.

Returns:

Menu position

Type
string
Inherited from:
Source:
Get menu position.

getOutline() → {OO.ui.OutlineSelectWidget|null} #

Get the outline widget.

If the booklet is not outlined, the method will return null.

Returns:

Outline widget, or null if the booklet is not outlined

Type
OO.ui.OutlineSelectWidget | null
Source:
Get the outline widget.

getOutlineControls() → {OO.ui.OutlineControlsWidget|null} #

Get the outline controls widget.

If the outline is not editable, the method will return null.

Returns:

The outline controls widget.

Type
OO.ui.OutlineControlsWidget | null
Source:
Get the outline controls widget.

getPage(name) → {OO.ui.PageLayout|undefined} #

Get a page by its symbolic name.

Parameters:

Name Type Description
name string

Symbolic name of page

Returns:

Page, if found

Type
OO.ui.PageLayout | undefined
Source:
Get a page by its symbolic name.

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.

isEditable() → {boolean} #

Check if booklet has editing controls.

Returns:

Booklet is editable

Type
boolean
Source:
Check if booklet has editing controls.

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

isMenuVisible() → {boolean} #

Check if menu is visible

Returns:

Menu is visible

Type
boolean
Inherited from:
Source:
Check if menu is visible

isOutlineVisible() → {boolean} #

Check if booklet has a visible outline.

Returns:

Outline is visible

Type
boolean
Source:
Check if booklet has a visible outline.

isOutlined() → {boolean} #

Check if booklet has an outline.

Returns:

Booklet has an outline

Type
boolean
Source:
Check if booklet has an outline.

isVisible() → {boolean} #

Check if element is visible.

Returns:

element is visible

Type
boolean
Inherited from:
Source:
Check if element is visible.

removePages(pages) → {OO.ui.BookletLayout}chainable #

Remove the specified pages from the booklet layout.

To remove all pages from the booklet, you may wish to use the #clearPages method instead.

Parameters:

Name Type Description
pages Array.<OO.ui.PageLayout>

An array of pages to remove

Returns:

The layout, for chaining

Type
OO.ui.BookletLayout

Fires:

Source:
Remove the specified pages from the booklet 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.

selectFirstSelectablePage() → {OO.ui.BookletLayout}chainable #

Select the first selectable page.

Returns:

The layout, for chaining

Type
OO.ui.BookletLayout
Source:
Select the first selectable page.

setContentPanel(contentPanel) #

Set the content panel.

Parameters:

Name Type Description
contentPanel OO.ui.PanelLayout

Content panel
Inherited from:
Source:
Set the content panel.

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.

setMenuPanel(menuPanel) #

Set the menu panel.

Parameters:

Name Type Description
menuPanel OO.ui.PanelLayout

Menu panel
Inherited from:
Source:
Set the menu panel.

setMenuPosition(position) → {OO.ui.MenuLayout}chainable #

Set menu position.

Parameters:

Name Type Description
position string

Position of menu, either top, after, bottom or before

Returns:

The layout, for chaining

Type
OO.ui.MenuLayout
Inherited from:
Source:
Set menu position.

setPage(name) #

Set the current page by symbolic name.

Parameters:

Name Type Description
name string

Symbolic name of page

Fires:

Source:
Set the current page by symbolic name.

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.

toggleMenu([showMenu]) → {OO.ui.MenuLayout}chainable #

Toggle menu.

Parameters:

Name Type Attributes Description
showMenu boolean optional

Show menu, omit to toggle

Returns:

The layout, for chaining

Type
OO.ui.MenuLayout
Inherited from:
Source:
Toggle menu.

toggleOutline([show]) → {OO.ui.BookletLayout}chainable #

Hide or show the outline.

Parameters:

Name Type Attributes Description
show boolean optional

Show outline, omit to invert current state

Returns:

The layout, for chaining

Type
OO.ui.BookletLayout
Source:
Hide or show the outline.

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

add(page, index) #

An 'add' event is emitted when pages are added to the booklet layout.

Parameters:

Name Type Description
page Array.<OO.ui.PageLayout>

Added pages
index number

Index pages were added at
Source:
An 'add' event is emitted when pages are added to the booklet layout.

remove(pages) #

A 'remove' event is emitted when pages are cleared or removed from the booklet.

Parameters:

Name Type Description
pages Array.<OO.ui.PageLayout>

Removed pages
Source:

A 'remove' event is emitted when pages are cleared or removed from the booklet.

set(page) #

A 'set' event is emitted when a page is set to be displayed by the booklet layout.

Parameters:

Name Type Description
page OO.ui.PageLayout

Current page
Source:

A 'set' event is emitted when a page is set to be displayed by the booklet layout.