mediawiki-extensions-VisualEditor/modules/oojs-ui/layouts/OO.ui.PagedLayout.js

/*!
 * ObjectOriented UserInterface PagedLayout class.
 *
 * @copyright 2011-2013 OOJS Team and others; see AUTHORS.txt
 * @license The MIT License (MIT); see LICENSE.txt
 */

/**
 * Layout containing a series of pages.
 *
 * @class
 * @extends OO.ui.Layout
 *
 * @constructor
 * @param {Object} [config] Configuration options
 * @param {boolean} [config.attachPagesPanel] Whether or not to attach pagesPanel to this.$element on
 *  initialization.
 */
OO.ui.PagedLayout = function OoUiPagedLayout( config ) {
	// Initialize configuration
	config = config || {};

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

	// Properties
	this.attached = !!config.attachPagesPanel;
	this.currentPageName = null;
	this.pages = {};
	this.pagesPanel = new OO.ui.StackPanelLayout( { '$': this.$ } );

	// Initialization
	this.$element.addClass( 'oo-ui-pagedLayout' );
	this.pagesPanel.$element.addClass( 'oo-ui-pagedLayout-pagesPanel' );

	if ( this.attached ) {
		this.$element.append( this.pagesPanel.$element );
	}
};

/* Inheritance */

OO.inheritClass( OO.ui.PagedLayout, OO.ui.Layout );

/* Events */

/**
 * @event add
 * @param {string} name The name of the page added.
 * @param {OO.ui.PanelLayout} page The page panel.
 */

/**
 * @event remove
 * @param {OO.ui.PanelLayout[]} pages An array of page panels that were removed.
 */

/**
 * @event set
 * @param {OO.ui.PanelLayout} page The page panel that is now the current page.
 */

/* Methods */

/**
 * Add a page to the layout.
 *
 * @method
 * @param {string} name Symbolic name of page
 * @param {Object} [config] Condifugration options
 * @param {number} [config.index] Specific index to insert page at
 * @param {jQuery} [config.$content] Page content
 * @fires add
 * @chainable
 */
OO.ui.PagedLayout.prototype.addPage = function ( name, config ) {
	var page = new OO.ui.PanelLayout( { '$': this.$, 'scrollable': true } );

	config = config || {};

	if ( config.$content ) {
		page.$element.append( config.$content );
	}

	this.pages[name] = page;
	this.pagesPanel.addItems( [ page ], config.index );
	this.emit( 'add', name, page );

	return this;
};

/**
 * Clear all pages from the layout.
 *
 * @method
 * @fires remove
 * @chainable
 */
OO.ui.PagedLayout.prototype.clearPages = function () {
	var pages = this.pagesPanel.getItems();

	this.currentPageName = null;
	this.pages = {};
	this.pagesPanel.clearItems();
	this.emit( 'remove', pages );

	return this;
};

/**
 * Get a page by name.
 *
 * @method
 * @param {string} name Symbolic name of page
 * @returns {OO.ui.PanelLayout|undefined} Page, if found
 */
OO.ui.PagedLayout.prototype.getPage = function ( name ) {
	return this.pages[name];
};


/**
 * Get the current page name.
 *
 * @method
 * @returns {string|null} Current page name
 */
OO.ui.PagedLayout.prototype.getPageName = function () {
	return this.currentPageName;
};

/**
 * Remove a page from the layout.
 *
 * @method
 * @fires remove
 * @chainable
 */
OO.ui.PagedLayout.prototype.removePage = function ( name ) {
	var page = this.pages[name];

	if ( page ) {
		page = [ page ];
		delete this.pages[name];
		this.pagesPanel.removeItems( page );
		this.emit( 'remove', page );
	}

	return this;
};

/**
 * Set the current page by name.
 *
 * @method
 * @fires set
 * @param {string} name Symbolic name of page
 */
OO.ui.PagedLayout.prototype.setPage = function ( name ) {
	var page = this.pages[name];

	if ( page ) {
		this.currentPageName = name;
		this.pagesPanel.showItem( page );
		this.emit( 'set', page );
	}
};