# all files / src/layouts/ PageLayout.js

26.67% Statements 8/30
0% Branches 0/10
0% Functions 0/7
26.67% Lines 8/30

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139

    1×

    1×

    1×

    1×

    1×

    1×

    1×

    1×

     /**
     * PageLayouts are used within {@link OO.ui.BookletLayout booklet layouts} to create pages that users can select and display
     * from the booklet's optional {@link OO.ui.OutlineSelectWidget outline} navigation. Pages are usually not instantiated directly,
     * rather extended to include the required content and functionality.
     *
     * Each page must have a unique symbolic name, which is passed to the constructor. In addition, the page's outline
     * item is customized (with a label, outline level, etc.) using the #setupOutlineItem method. See
     * {@link OO.ui.BookletLayout BookletLayout} for an example.
     *
     * @class
     * @extends OO.ui.PanelLayout
     *
     * @constructor
     * @param {string} name Unique symbolic name of page
     * @param {Object} [config] Configuration options
     */
    OO.ui.PageLayout = function OoUiPageLayout( name, config ) {
    	// Allow passing positional parameters inside the config object
    	if ( OO.isPlainObject( name ) && config === undefined ) {
    		config = name;
    		name = config.name;
    	}

    	// Configuration initialization
    	config = $.extend( { scrollable: true }, config );

    	// Parent constructor
    	OO.ui.PageLayout.parent.call( this, config );

    	// Properties
    	this.name = name;
    	this.outlineItem = null;
    	this.active = false;

    	// Initialization
    	this.$element.addClass( 'oo-ui-pageLayout' );
    };

    /* Setup */

    OO.inheritClass( OO.ui.PageLayout, OO.ui.PanelLayout );

    /* Events */

    /**
     * An 'active' event is emitted when the page becomes active. Pages become active when they are
     * shown in a booklet layout that is configured to display only one page at a time.
     *
     * @event active
     * @param {boolean} active Page is active
     */

    /* Methods */

    /**
     * Get the symbolic name of the page.
     *
     * @return {string} Symbolic name of page
     */
    OO.ui.PageLayout.prototype.getName = function () {
    	return this.name;
    };

    /**
     * Check if page is active.
     *
     * Pages become active when they are shown in a {@link OO.ui.BookletLayout booklet layout} that is configured to display
     * only one page at a time. Additional CSS is applied to the page's outline item to reflect the active state.
     *
     * @return {boolean} Page is active
     */
    OO.ui.PageLayout.prototype.isActive = function () {
    	return this.active;
    };

    /**
     * Get outline item.
     *
     * The outline item allows users to access the page from the booklet's outline
     * navigation. The outline item itself can be customized (with a label, level, etc.) using the #setupOutlineItem method.
     *
     * @return {OO.ui.OutlineOptionWidget|null} Outline option widget
     */
    OO.ui.PageLayout.prototype.getOutlineItem = function () {
    	return this.outlineItem;
    };

    /**
     * Set or unset the outline item.
     *
     * Specify an {@link OO.ui.OutlineOptionWidget outline option} to set it,
     * or `null` to clear the outline item. To customize the outline item itself (e.g., to set a label or outline
     * level), use #setupOutlineItem instead of this method.
     *
     * @param {OO.ui.OutlineOptionWidget|null} outlineItem Outline option widget, null to clear
     * @chainable
     */
    OO.ui.PageLayout.prototype.setOutlineItem = function ( outlineItem ) {
    	this.outlineItem = outlineItem || null;
    	if ( outlineItem ) {
    		this.setupOutlineItem();
    	}
    	return this;
    };

    /**
     * Set up the outline item.
     *
     * Use this method to customize the outline item (e.g., to add a label or outline level). To set or unset
     * the outline item itself (with an {@link OO.ui.OutlineOptionWidget outline option} or `null`), use
     * the #setOutlineItem method instead.
     *
     * @param {OO.ui.OutlineOptionWidget} outlineItem Outline option widget to set up
     * @chainable
     */
    OO.ui.PageLayout.prototype.setupOutlineItem = function () {
    	return this;
    };

    /**
     * Set the page to its 'active' state.
     *
     * Pages become active when they are shown in a booklet layout that is configured to display only one page at a time. Additional
     * CSS is applied to the outline item to reflect the page's active state. Outside of the booklet
     * context, setting the active state on a page does nothing.
     *
     * @param {boolean} active Page is active
     * @fires active
     */
    OO.ui.PageLayout.prototype.setActive = function ( active ) {
    	active = !!active;

    	if ( active !== this.active ) {
    		this.active = active;
    		this.$element.toggleClass( 'oo-ui-pageLayout-active', active );
    		this.emit( 'active', this.active );
    	}
    };