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

/*!
 * user interface PagedPagedOutlineLayout 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 and an outline controlling their visibility.
 *
 * The outline takes up the left third, the pages taking up the remaining two-thirds on the right.
 *
 * @class
 * @extends OO.ui.PagedLayout
 *
 * @constructor
 * @param {Object} [config] Configuration options
 * @param {boolean} [config.editable] Show controls for adding, removing and reordering items in
 *  the outline
 * @param {Object[]} [config.adders] List of adders for controls, each an object with name, icon
 *  and title properties
 */
OO.ui.PagedOutlineLayout = function OoUiPagedOutlineLayout( config ) {
	// Initialize configuration
	config = config || {};
	config.attachPagesPanel = false;

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

	// Properties
	this.adders = config.adders || null;
	this.editable = !!config.editable;
	this.outlineControlsWidget = null;
	this.outlinePanel = new OO.ui.PanelLayout( { '$': this.$, 'scrollable': true } );
	this.outlineWidget = new OO.ui.OutlineWidget( { '$': this.$ } );
	this.gridLayout = new OO.ui.GridLayout(
		[this.outlinePanel, this.pagesPanel], { '$': this.$, 'widths': [1, 2] }
	);

	if ( this.editable ) {
		this.outlineControlsWidget = new OO.ui.OutlineControlsWidget(
			this.outlineWidget, { '$': this.$, 'adders': this.adders }
		);
	}

	// Events
	this.outlineWidget.connect( this, { 'select': 'onPageOutlineSelect' } );
	this.pagesPanel.connect( this, { 'set': 'onPagedLayoutSet' } );

	// Initialization
	this.outlinePanel.$element
		.addClass( 'oo-ui-pagedOutlineLayout-outlinePanel' )
		.append( this.outlineWidget.$element );

	if ( this.editable ) {
		this.outlinePanel.$element
			.addClass( 'oo-ui-pagedOutlineLayout-outlinePanel-editable' )
			.append( this.outlineControlsWidget.$element );
	}

	this.$element
		.addClass( 'oo-ui-pagedOutlineLayout' )
		.append( this.gridLayout.$element );
};

/* Inheritance */

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

/* Methods */

/**
 * Add a page to the layout.
 *
 * @method
 * @param {string} name Symbolic name of page
 * @param {Object} [config] Condifugration options
 * @param {jQuery|string} [config.label=name] Page label
 * @param {string} [config.icon] Symbolic name of icon
 * @param {number} [config.level=0] Indentation level
 * @param {number} [config.index] Specific index to insert page at
 * @param {jQuery} [config.$content] Page content
 * @param {jQuery} [config.moveable] Allow page to be moved in the outline
 * @chainable
 */
OO.ui.PagedOutlineLayout.prototype.addPage = function ( name, config ) {
	config = config || {};

	this.outlineWidget.addItems(
		[
			new OO.ui.OutlineItemWidget( name, {
				'$': this.$,
				'label': config.label || name,
				'level': config.level || 0,
				'icon': config.icon,
				'moveable': config.moveable
			} )
		],
		config.index
	);

	this.updateOutlineWidget();

	// Parent method
	return OO.ui.PagedLayout.prototype.addPage.call( this, name, config );
};

/**
 * Clear all pages.
 *
 * @method
 * @chainable
 */
OO.ui.PagedOutlineLayout.prototype.clearPages = function () {
	this.outlineWidget.clearItems();

	// Parent method
	return OO.ui.PagedLayout.prototype.clearPages.call( this );
};

/**
 * Get the outline widget.
 *
 * @method
 * @returns {OO.ui.OutlineWidget} The outline widget.
 */
OO.ui.PagedOutlineLayout.prototype.getOutline = function () {
	return this.outlineWidget;
};

/**
 * Get the outline controls widget. If the outline is not editable, null is returned.
 *
 * @method
 * @returns {OO.ui.OutlineControlsWidget|null} The outline controls widget.
 */
OO.ui.PagedOutlineLayout.prototype.getOutlineControls = function () {
	return this.outlineControlsWidget;
};

/**
 * Handle PagedLayout set events.
 *
 * @method
 * @param {OO.ui.PanelLayout} page The page panel that is now the current panel.
 */
OO.ui.PagedOutlineLayout.prototype.onPagedLayoutSet = function ( page ) {
	page.$element.find( ':input:first' ).focus();
};

/**
 * Handle outline select events.
 *
 * @method
 * @param {OO.ui.OptionWidget} item Selected item
 */
OO.ui.PagedOutlineLayout.prototype.onPageOutlineSelect = function ( item ) {
	if ( item ) {
		OO.ui.PagedLayout.prototype.setPage.call( this, item.getData() );
	}
};

/**
 * Remove a page.
 *
 * @method
 * @chainable
 */
OO.ui.PagedOutlineLayout.prototype.removePage = function ( name ) {
	var page = this.pages[name];

	if ( page ) {
		this.outlineWidget.removeItems( [ this.outlineWidget.getItemFromData( name ) ] );
		this.updateOutlineWidget();
	}

	// Parent method
	return OO.ui.PagedLayout.prototype.removePage.call( this, name );
};

/**
 * Call this after adding or removing items from the OutlineWidget.
 *
 * @method
 * @chainable
 */
OO.ui.PagedOutlineLayout.prototype.updateOutlineWidget = function () {
	// Auto-select first item when nothing is selected anymore
	if ( !this.outlineWidget.getSelectedItem() ) {
		this.outlineWidget.selectItem( this.outlineWidget.getFirstSelectableItem() );
	}

	return this;
};

/**
 * @inheritdoc
 */
OO.ui.PagedOutlineLayout.prototype.setPage = function ( name ) {
	if ( name !== this.outlineWidget.getSelectedItem().getData() ) {
		this.outlineWidget.selectItem( this.outlineWidget.getItemFromData( name ) );
	}
};