Class: BookletLayout

.ui.BookletLayout(configopt)

new BookletLayout(configopt)

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.
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:
Example
// Example of a BookletLayout that contains two PageLayouts.

    function PageOneLayout( name, config ) {
        PageOneLayout.parent.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.parent.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' );
    };

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

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

    booklet.addPages ( [ page1, page2 ] );
    $( 'body' ).append( booklet.$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

addPages(pages, index)

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

clearPages()

Clear all pages from the booklet layout. To remove only a subset of pages from the booklet, use the #removePages method.
Source:
Fires:

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
Source:
Returns:
Page closest to the specified page
Type
OO.ui.PageLayout | null

focus(itemIndexopt)

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:

focusFirstFocusable()

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

getClosestScrollableElementContainer() → {HTMLElement}

Get closest scrollable container.
Inherited From:
Source:
Returns:
Closest scrollable container
Type
HTMLElement

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

Get the current page.
Source:
Returns:
Current page, if found
Type
OO.ui.PageLayout | undefined

getCurrentPageName() → {string|null}

Get the symbolic name of the current page.
Source:
Returns:
Symbolic name of the current page
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

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

Get the outline widget. If the booklet is not outlined, the method will return `null`.
Source:
Returns:
Outline widget, or null if the booklet is not outlined
Type
OO.ui.OutlineSelectWidget | null

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

Get the outline controls widget. If the outline is not editable, the method will return `null`.
Source:
Returns:
The outline controls widget.
Type
OO.ui.OutlineControlsWidget | null

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

Get a page by its symbolic name.
Parameters:
Name Type Description
name string Symbolic name of page
Source:
Returns:
Page, if found
Type
OO.ui.PageLayout | undefined

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

isEditable() → {boolean}

Check if booklet has editing controls.
Source:
Returns:
Booklet is editable
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

isMenuVisible() → {boolean}

Check if menu is visible
Inherited From:
Source:
Returns:
Menu is visible
Type
boolean

isOutlined() → {boolean}

Check if booklet has an outline.
Source:
Returns:
Booklet has an outline
Type
boolean

isOutlineVisible() → {boolean}

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

isVisible() → {boolean}

Check if element is visible.
Inherited From:
Source:
Returns:
element is visible
Type
boolean

onStackLayoutVisibleItemChange(page)

Handle visibleItemChange events from the stackLayout The next visible page is set as the current page by selecting it in the outline
Parameters:
Name Type Description
page OO.ui.PageLayout The next visible page in the layout
Source:

removePages(pages)

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

selectFirstSelectablePage()

Select the first selectable page.
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

setPage(name)

Set the current page by symbolic name.
Parameters:
Name Type Description
name string Symbolic name of page
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:

toggleOutline(showopt)

Hide or show the outline.
Parameters:
Name Type Attributes Description
show boolean <optional>
Show outline, omit to invert current state
Source:

updateThemeClasses()

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