Paged dialog upgrades

Objective:

* Add functionality to paged dialogs to work with the pages and select
  them programmatically

Changes:

ve.ui.PagedDialog.js
* Keep track of the current page name
* Add setPage method, which is can be used publicly and is also used
  internally when items in the outline are selected
* Add a page content config option which auto-appends to the inside of
  the page
* Add removePage method for removing pages by name
* Add getPageName method which gets the current page name

Change-Id: I2a2f0c329d274796b8c9e7572ecff8294f472f7f
This commit is contained in:
Trevor Parscal 2013-06-11 12:07:34 -07:00 committed by Trevor Parscal
parent 8e8ddd9cad
commit 252e9b3d12

View file

@ -26,6 +26,7 @@ ve.ui.PagedDialog = function VeUiPagedDialog( surface, config ) {
// Properties
this.pages = {};
this.currentPageName = null;
};
/* Inheritance */
@ -68,7 +69,7 @@ ve.ui.PagedDialog.prototype.initialize = function () {
*/
ve.ui.PagedDialog.prototype.onOutlineSelect = function ( item ) {
if ( item ) {
this.pagesPanel.showItem( this.pages[item.getData()] );
this.setPage( item.getData() );
}
};
@ -82,11 +83,15 @@ ve.ui.PagedDialog.prototype.onOutlineSelect = function ( item ) {
* @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
* @chainable
*/
ve.ui.PagedDialog.prototype.addPage = function ( name, config ) {
// Create and add page panel and outline item
this.pages[name] = new ve.ui.PanelLayout( { '$$': this.frame.$$, 'scroll': true } );
if ( config.$content ) {
this.pages[name].$.append( config.$content );
}
this.pagesPanel.addItems( [this.pages[name]], config.index );
this.outlineWidget.addItems(
[
@ -108,6 +113,29 @@ ve.ui.PagedDialog.prototype.addPage = function ( name, config ) {
return this;
};
/**
* Remove a page.
*
* @method
* @chainable
*/
ve.ui.PagedDialog.prototype.removePage = function ( name ) {
var page = this.pages[name];
if ( page ) {
delete this.pages[name];
this.pagesPanel.removeItems( [ page ] );
this.outlineWidget.removeItems( [ this.outlineWidget.getItemFromData( name ) ] );
}
// Auto-select first item when nothing is selected anymore
if ( !this.outlineWidget.getSelectedItem() ) {
this.outlineWidget.selectItem( this.outlineWidget.getClosestSelectableItem( 0 ) );
}
return this;
};
/**
* Clear all pages.
*
@ -118,6 +146,7 @@ ve.ui.PagedDialog.prototype.clearPages = function () {
this.pages = [];
this.pagesPanel.clearItems();
this.outlineWidget.clearItems();
this.currentPageName = null;
return this;
};
@ -132,3 +161,27 @@ ve.ui.PagedDialog.prototype.clearPages = function () {
ve.ui.PagedDialog.prototype.getPage = function ( name ) {
return this.pages[name];
};
/**
* Set the page by name.
*
* @method
* @param {string} name Symbolic name of page
*/
ve.ui.PagedDialog.prototype.setPage = function ( name ) {
if ( name in this.pages ) {
this.currentPageName = name;
this.pagesPanel.showItem( this.pages[name] );
this.pages[name].$.find( ':input:first' ).focus();
}
};
/**
* Get current page name.
*
* @method
* @returns {string|null} Current page name
*/
ve.ui.PagedDialog.prototype.getPageName = function () {
return this.currentPageName;
};