Trevor Parscal has uploaded a new change for review.
https://gerrit.wikimedia.org/r/112142
Change subject: Invert dependencies for OutlineItemWidget and PageLayout
......................................................................
Invert dependencies for OutlineItemWidget and PageLayout
Problem:
* Properties for OutlineItemWidget were being set at instantiation in the page
and then copied over though getters, making it a one-way trip and a lot of
messy maintenance when adding new features
* BookletOutlineItemWidget was superfluous since it only copied page properties
and didn't even keep a reference to the page
* OutlineItemWidget movability property was not settable
* OutlineItemWidget was not flaggable, so additional styling was difficult or
impossible
Solution:
* Add missing movability setter to OutlineItemWidget
* Mix FlaggableWidget into OutlineItemWidget
* Remove BookletOutlineItemWidget
* Add some basic flag styles to OutlineItemWidget
* Remove OutlineItemWidget property shuffling in PageLayout
* Add methods to set, get and clear an OutlineItemWidget to PageLayout
* Adjust BookletLayout to set and clear OutlineItemWidget on PageLayout
* Fix bug in FlaggableElement which caused setting with object not to work
Change-Id: I58a279dd949a867a4698a791103d5a6f2bd4b67f
---
M build/modules.json
M src/elements/OO.ui.FlaggableElement.js
M src/layouts/OO.ui.BookletLayout.js
M src/layouts/OO.ui.PageLayout.js
M src/styles/OO.ui.Widget.css
D src/widgets/OO.ui.BookletOutlineItemWidget.js
M src/widgets/OO.ui.OptionWidget.js
M src/widgets/OO.ui.OutlineItemWidget.js
8 files changed, 60 insertions(+), 87 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/42/112142/1
diff --git a/build/modules.json b/build/modules.json
index 8caa0f8..22eb6aa 100644
--- a/build/modules.json
+++ b/build/modules.json
@@ -49,7 +49,6 @@
"src/widgets/OO.ui.OutlineWidget.js",
"src/widgets/OO.ui.OutlineControlsWidget.js",
"src/widgets/OO.ui.OutlineItemWidget.js",
- "src/widgets/OO.ui.BookletOutlineItemWidget.js",
"src/widgets/OO.ui.ButtonOptionWidget.js",
"src/widgets/OO.ui.ButtonSelectWidget.js",
"src/widgets/OO.ui.PopupWidget.js",
diff --git a/src/elements/OO.ui.FlaggableElement.js
b/src/elements/OO.ui.FlaggableElement.js
index ee8fe58..8adb731 100644
--- a/src/elements/OO.ui.FlaggableElement.js
+++ b/src/elements/OO.ui.FlaggableElement.js
@@ -63,7 +63,7 @@
}
} else if ( OO.isPlainObject( flags ) ) {
for ( flag in flags ) {
- if ( flags[flags] ) {
+ if ( flags[flag] ) {
// Set
this.flags[flag] = true;
this.$element.addClass( classPrefix + flag );
diff --git a/src/layouts/OO.ui.BookletLayout.js
b/src/layouts/OO.ui.BookletLayout.js
index a4be7a0..2065a4e 100644
--- a/src/layouts/OO.ui.BookletLayout.js
+++ b/src/layouts/OO.ui.BookletLayout.js
@@ -220,7 +220,7 @@
* @chainable
*/
OO.ui.BookletLayout.prototype.addPages = function ( pages, index ) {
- var i, len, name, page,
+ var i, len, name, page, item,
items = [],
remove = [];
@@ -233,7 +233,9 @@
}
this.pages[page.getName()] = page;
if ( this.outlined ) {
- items.push( new OO.ui.BookletOutlineItemWidget( name,
page, { '$': this.$ } ) );
+ item = new OO.ui.OutlineItemWidget( name, page, { '$':
this.$ } );
+ page.setOutlineItem( item );
+ items.push( item );
}
}
if ( remove.length ) {
@@ -267,6 +269,7 @@
delete this.pages[name];
if ( this.outlined ) {
items.push( this.outlineWidget.getItemFromData( name )
);
+ page.clearOutlineItem();
}
}
if ( this.outlined && items.length ) {
@@ -287,12 +290,16 @@
* @chainable
*/
OO.ui.BookletLayout.prototype.clearPages = function () {
- var pages = this.stackLayout.getItems();
+ var i, len,
+ pages = this.stackLayout.getItems();
this.pages = {};
this.currentPageName = null;
if ( this.outlined ) {
this.outlineWidget.clearItems();
+ for ( i = 0, len = pages.length; i < len; i++ ) {
+ pages[i].clearOutlineItem();
+ }
}
this.stackLayout.clearItems();
diff --git a/src/layouts/OO.ui.PageLayout.js b/src/layouts/OO.ui.PageLayout.js
index b330d99..19aad63 100644
--- a/src/layouts/OO.ui.PageLayout.js
+++ b/src/layouts/OO.ui.PageLayout.js
@@ -7,12 +7,7 @@
* @constructor
* @param {string} name Unique symbolic name of page
* @param {Object} [config] Configuration options
- * @param {string} [icon=''] Symbolic name of icon to display in outline
- * @param {string} [indicator=''] Symbolic name of indicator to display in
outline
- * @param {string} [indicatorTitle=''] Description of indicator meaning 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
+ * @param {string} [outlineItem] Outline item widget
*/
OO.ui.PageLayout = function OoUiPageLayout( name, config ) {
// Configuration initialization
@@ -23,12 +18,7 @@
// Properties
this.name = name;
- this.icon = config.icon || '';
- this.indicator = config.indicator || '';
- this.indicatorTitle = config.indicatorTitle || '';
- this.label = config.label || '';
- this.level = config.level || 0;
- this.movable = !!config.movable;
+ this.outlineItem = config.outlineItem || null;
// Initialization
this.$element.addClass( 'oo-ui-pageLayout' );
@@ -50,55 +40,31 @@
};
/**
- * Get page icon.
+ * Get outline item.
*
- * @returns {string} Symbolic name of icon
+ * @returns {OO.ui.OutlineItemWidget|null} Outline item widget
*/
-OO.ui.PageLayout.prototype.getIcon = function () {
- return this.icon;
+OO.ui.PageLayout.prototype.getOutlineItem = function () {
+ return this.outlineItem;
};
/**
- * Get page indicator.
+ * Get outline item.
*
- * @returns {string} Symbolic name of indicator
+ * @param {OO.ui.OutlineItemWidget} outlineItem Outline item widget
+ * @chainable
*/
-OO.ui.PageLayout.prototype.getIndicator = function () {
- return this.indicator;
+OO.ui.PageLayout.prototype.setOutlineItem = function ( outlineItem ) {
+ this.outlineItem = outlineItem;
+ return this;
};
/**
- * Get page indicator label.
+ * Clear outline item.
*
- * @returns {string} Description of indicator meaning
+ * @chainable
*/
-OO.ui.PageLayout.prototype.getIndicatorTitle = function () {
- return this.indicatorTitle;
-};
-
-/**
- * Get page label.
- *
- * @returns {string} Label text
- */
-OO.ui.PageLayout.prototype.getLabel = function () {
- return this.label;
-};
-
-/**
- * Get outline item indentation level.
- *
- * @returns {number} Indentation level
- */
-OO.ui.PageLayout.prototype.getLevel = function () {
- return this.level;
-};
-
-/**
- * Check if page is movable using outline controls.
- *
- * @returns {boolean} Page is movable
- */
-OO.ui.PageLayout.prototype.isMovable = function () {
- return this.movable;
+OO.ui.PageLayout.prototype.clearOutlineItem = function () {
+ this.outlineItem = null;
+ return this;
};
diff --git a/src/styles/OO.ui.Widget.css b/src/styles/OO.ui.Widget.css
index 4ef0889..78ea926 100644
--- a/src/styles/OO.ui.Widget.css
+++ b/src/styles/OO.ui.Widget.css
@@ -139,6 +139,22 @@
left: 4em;
}
+.oo-ui-outlineItemWidget.oo-ui-flaggableElement-important {
+ font-weight: bold;
+}
+
+.oo-ui-outlineItemWidget.oo-ui-flaggableElement-placeholder {
+ font-style: italic;
+}
+
+.oo-ui-outlineItemWidget.oo-ui-flaggableElement-empty
.oo-ui-iconedElement-icon,
+.oo-ui-outlineItemWidget.oo-ui-flaggableElement-empty
.oo-ui-indicatedElement-indicator {
+ opacity: 0.5;
+}
+.oo-ui-outlineItemWidget.oo-ui-flaggableElement-empty
.oo-ui-labeledElement-label {
+ color: #698AA0;
+}
+
/* OO.ui.OutlineControlsWidget */
.oo-ui-outlineControlsWidget {
diff --git a/src/widgets/OO.ui.BookletOutlineItemWidget.js
b/src/widgets/OO.ui.BookletOutlineItemWidget.js
deleted file mode 100644
index f449b85..0000000
--- a/src/widgets/OO.ui.BookletOutlineItemWidget.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * Creates an OO.ui.BookletOutlineItemWidget object.
- *
- * @class
- * @extends OO.ui.OutlineItemWidget
- *
- * @constructor
- * @param {Mixed} data Item data
- * @param {Object} [config] Configuration options
- */
-OO.ui.BookletOutlineItemWidget = function OoUiBookletOutlineItemWidget( data,
page, config ) {
- // Configuration intialization
- config = $.extend( {
- 'label': page.getLabel() || data,
- 'level': page.getLevel(),
- 'icon': page.getIcon(),
- 'indicator': page.getIndicator(),
- 'indicatorTitle': page.getIndicatorTitle(),
- 'movable': page.isMovable()
- }, config );
-
- // Parent constructor
- OO.ui.OutlineItemWidget.call( this, data, config );
-
- // Initialization
- this.$element.addClass( 'oo-ui-bookletOutlineItemWidget' );
-};
-
-/* Inheritance */
-
-OO.inheritClass( OO.ui.BookletOutlineItemWidget, OO.ui.OutlineItemWidget );
diff --git a/src/widgets/OO.ui.OptionWidget.js
b/src/widgets/OO.ui.OptionWidget.js
index 6d81eb7..d23274e 100644
--- a/src/widgets/OO.ui.OptionWidget.js
+++ b/src/widgets/OO.ui.OptionWidget.js
@@ -7,6 +7,7 @@
* @mixins OO.ui.IconedElement
* @mixins OO.ui.LabeledElement
* @mixins OO.ui.IndicatedElement
+ * @mixins OO.ui.FlaggableElement
*
* @constructor
* @param {Mixed} data Option data
@@ -28,6 +29,7 @@
OO.ui.IconedElement.call( this, this.$( '<span>' ), config );
OO.ui.LabeledElement.call( this, this.$( '<span>' ), config );
OO.ui.IndicatedElement.call( this, this.$( '<span>' ), config );
+ OO.ui.FlaggableElement.call( this, config );
// Properties
this.data = data;
@@ -56,6 +58,7 @@
OO.mixinClass( OO.ui.OptionWidget, OO.ui.IconedElement );
OO.mixinClass( OO.ui.OptionWidget, OO.ui.LabeledElement );
OO.mixinClass( OO.ui.OptionWidget, OO.ui.IndicatedElement );
+OO.mixinClass( OO.ui.OptionWidget, OO.ui.FlaggableElement );
/* Static Properties */
diff --git a/src/widgets/OO.ui.OutlineItemWidget.js
b/src/widgets/OO.ui.OutlineItemWidget.js
index 637c21f..e769047 100644
--- a/src/widgets/OO.ui.OutlineItemWidget.js
+++ b/src/widgets/OO.ui.OutlineItemWidget.js
@@ -63,6 +63,19 @@
};
/**
+ * Set movability.
+ *
+ * Moveablilty is used by outline controls.
+ *
+ * @param {boolean} movable Item is movable
+ * @chainable
+ */
+OO.ui.OutlineItemWidget.prototype.setMovable = function ( movable ) {
+ this.movable = !!movable;
+ return this;
+};
+
+/**
* Set indentation level.
*
* @method
--
To view, visit https://gerrit.wikimedia.org/r/112142
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I58a279dd949a867a4698a791103d5a6f2bd4b67f
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Trevor Parscal <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
