Jforrester has uploaded a new change for review.
https://gerrit.wikimedia.org/r/97865
Change subject: Refactor paged dialogs
......................................................................
Refactor paged dialogs
Make each page an object with its own class. Make PagedLayout take
PagedPanelLayout objects instead of plain objects.
Transposed from I51e74b322ae in the VisualEditor repository.
Change-Id: Id0fb0aab1999d0ba93fcfd192ac33e97e97e93e0
---
M src/layouts/OO.ui.PagedLayout.js
M src/layouts/OO.ui.PagedOutlineLayout.js
A src/layouts/OO.ui.PagedPanelLayout.js
3 files changed, 157 insertions(+), 105 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/65/97865/1
diff --git a/src/layouts/OO.ui.PagedLayout.js b/src/layouts/OO.ui.PagedLayout.js
index 87725d1..6b37f2d 100644
--- a/src/layouts/OO.ui.PagedLayout.js
+++ b/src/layouts/OO.ui.PagedLayout.js
@@ -6,8 +6,8 @@
*
* @constructor
* @param {Object} [config] Configuration options
- * @param {boolean} [config.attachPagesPanel] Whether or not to attach
pagesPanel to this.$element on
- * initialization.
+ * @param {boolean} [config.attachPagesPanel] Whether or not to attach
pagesPanel to this.$element
+ * on initialization.
*/
OO.ui.PagedLayout = function OoUiPagedLayout( config ) {
// Initialize configuration
@@ -40,77 +40,31 @@
/**
* @event add
* @param {string} name The name of the page added.
- * @param {OO.ui.PanelLayout} page The page panel.
+ * @param {OO.ui.PagedPanelLayout} page The page panel.
*/
/**
* @event remove
- * @param {OO.ui.PanelLayout[]} pages An array of page panels that were
removed.
+ * @param {OO.ui.PagedPanelLayout[]} 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.
+ * @param {OO.ui.PagedPanelLayout} 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
+ * @returns {OO.ui.PagedPanelLayout|undefined} Page, if found
*/
OO.ui.PagedLayout.prototype.getPage = function ( name ) {
return this.pages[name];
};
-
/**
* Get the current page name.
@@ -120,6 +74,23 @@
*/
OO.ui.PagedLayout.prototype.getPageName = function () {
return this.currentPageName;
+};
+
+/**
+ * Add a page to the layout.
+ *
+ * @method
+ * @param {string} name Symbolic name of page
+ * @param {OO.ui.PageLayout} page Page to add
+ * @param {number} index Specific index to insert page at
+ * @emits add
+ * @chainable
+ */
+OO.ui.PagedLayout.prototype.addPage = function ( name, page, index ) {
+ this.pages[name] = page;
+ this.pagesPanel.addItems( [ page ], index );
+ this.emit( 'add', name, page );
+ return this;
};
/**
@@ -143,6 +114,24 @@
};
/**
+ * Clear all pages from the layout. 124
+ *
+ * @method
+ * @emits 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;
+};
+
+/**
* Set the current page by name.
*
* @method
diff --git a/src/layouts/OO.ui.PagedOutlineLayout.js
b/src/layouts/OO.ui.PagedOutlineLayout.js
index 37d5dd2..8f1e3ea 100644
--- a/src/layouts/OO.ui.PagedOutlineLayout.js
+++ b/src/layouts/OO.ui.PagedOutlineLayout.js
@@ -1,4 +1,4 @@
-/**
+ /**
* 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.
@@ -64,52 +64,25 @@
/* Methods */
/**
- * Add a page to the layout.
+ * Handle PagedLayout set events.
*
* @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
+ * @param {OO.ui.PanelLayout} page The page panel that is now the current
panel.
*/
-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 );
+OO.ui.PagedOutlineLayout.prototype.onPagedLayoutSet = function ( page ) {
+ page.$element.find( ':input:first' ).focus();
};
/**
- * Clear all pages.
+ * Handle outline select events.
*
* @method
- * @chainable
+ * @param {OO.ui.OptionWidget} item Selected item
*/
-OO.ui.PagedOutlineLayout.prototype.clearPages = function () {
- this.outlineWidget.clearItems();
-
- // Parent method
- return OO.ui.PagedLayout.prototype.clearPages.call( this );
+OO.ui.PagedOutlineLayout.prototype.onPageOutlineSelect = function ( item ) {
+ if ( item ) {
+ this.setPage( item.getData() );
+ }
};
/**
@@ -133,25 +106,31 @@
};
/**
- * Handle PagedLayout set events.
+ * Add a page to the layout.
*
* @method
- * @param {OO.ui.PanelLayout} page The page panel that is now the current
panel.
+ * @param {string} name Symbolic name of page
+ * @param {OO.ui.PagedPanelLayout} page Page to add
+ * @param {number} index Specific index to insert page at
+ * @chainable
*/
-OO.ui.PagedOutlineLayout.prototype.onPagedLayoutSet = function ( page ) {
- page.$element.find( ':input:first' ).focus();
-};
+OO.ui.PagedOutlineLayout.prototype.addPage = function ( name, page, index ) {
+ this.outlineWidget.addItems(
+ [
+ new OO.ui.OutlineItemWidget( name, {
+ '$': this.$,
+ 'label': page.getLabel() || name,
+ 'level': page.getLevel(),
+ 'icon': page.getIcon(),
+ 'moveable': page.isMovable()
+ } )
+ ],
+ index
+ );
-/**
- * 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()
);
- }
+ this.updateOutlineWidget();
+
+ return OO.ui.PagedLayout.prototype.addPage.call( this, name, page,
index );
};
/**
@@ -170,6 +149,19 @@
// Parent method
return OO.ui.PagedLayout.prototype.removePage.call( this, name );
+};
+
+/**
+ * Clear all pages.
+ *
+ * @method
+ * @chainable
+ */
+OO.ui.PagedOutlineLayout.prototype.clearPages = function () {
+ this.outlineWidget.clearItems();
+
+ // Parent method
+ return OO.ui.PagedLayout.prototype.clearPages.call( this );
};
/**
@@ -194,4 +186,7 @@
if ( name !== this.outlineWidget.getSelectedItem().getData() ) {
this.outlineWidget.selectItem(
this.outlineWidget.getItemFromData( name ) );
}
+
+ // Parent method
+ OO.ui.PagedLayout.prototype.setPage.call( this, name );
};
diff --git a/src/layouts/OO.ui.PagedPanelLayout.js
b/src/layouts/OO.ui.PagedPanelLayout.js
new file mode 100644
index 0000000..7f74254
--- /dev/null
+++ b/src/layouts/OO.ui.PagedPanelLayout.js
@@ -0,0 +1,68 @@
+/**
+ * Page within an OO.ui.PagedLayout.
+ *
+ * @class
+ * @extends OO.ui.PanelLayout
+ *
+ * @constructor
+ * @param {Object} [config] Configuration options
+ * @param {string} [icon=''] Symbolic name of icon to display in outline
+ * @param {string} [label=''] Label to display in outline
+ * @param {number} [level=0] Indentation level of item in outline
+ * @param {boolean} [movable=false] Page should be movable using outline
controls
+ */
+OO.ui.PagedPanelLayout = function OoUiPagedPanelLayout( config ) {
+ // Configuration initialization
+ config = OO.extendObject( { 'scrollable': true }, config );
+
+ // Parent constructor
+ OO.ui.PanelLayout.call( this, config );
+
+ // Properties
+ this.icon = config.icon || '';
+ this.label = config.label || '';
+ this.level = config.level || 0;
+ this.movable = !!config.movable;
+};
+
+/* Inheritance */
+
+OO.inheritClass( OO.ui.PagedPanelLayout, OO.ui.PanelLayout );
+
+/* Methods */
+
+/**
+ * Get page icon.
+ *
+ * @returns {string} Symbolic name of icon
+ */
+OO.ui.PagedPanelLayout.prototype.getIcon = function () {
+ return this.icon;
+};
+
+/**
+ * Get page label.
+ *
+ * @returns {string} Label text
+ */
+OO.ui.PagedPanelLayout.prototype.getLabel = function () {
+ return this.label;
+};
+
+/**
+ * Get outline item indentation level.
+ *
+ * @returns {number} Indentation level
+ */
+OO.ui.PagedPanelLayout.prototype.getLevel = function () {
+ return this.level;
+};
+
+/**
+ * Check if page is movable using outline controls.
+ *
+ * @returns {boolean} Page is movable
+ */
+OO.ui.PagedPanelLayout.prototype.isMovable = function () {
+ return this.movable;
+};
\ No newline at end of file
--
To view, visit https://gerrit.wikimedia.org/r/97865
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Id0fb0aab1999d0ba93fcfd192ac33e97e97e93e0
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Jforrester <jforres...@wikimedia.org>
Gerrit-Reviewer: Trevor Parscal <tpars...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
