diff options
Diffstat (limited to 'vendor/oojs/oojs-ui/src/layouts/PageLayout.js')
-rw-r--r-- | vendor/oojs/oojs-ui/src/layouts/PageLayout.js | 138 |
1 files changed, 138 insertions, 0 deletions
diff --git a/vendor/oojs/oojs-ui/src/layouts/PageLayout.js b/vendor/oojs/oojs-ui/src/layouts/PageLayout.js new file mode 100644 index 00000000..4753b7db --- /dev/null +++ b/vendor/oojs/oojs-ui/src/layouts/PageLayout.js @@ -0,0 +1,138 @@ +/** + * 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.super.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} value 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 ); + } +}; |