Trevor Parscal has uploaded a new change for review.
https://gerrit.wikimedia.org/r/56355
Change subject: Stack panel, element mixins, cleanup
......................................................................
Stack panel, element mixins, cleanup
TODO: Write commit message
Hey rob! Rebase your stuff on this man… You feel me? Watch out for that group
widget parent class becoming a group element mixin bro.
Change-Id: I32f504c844dba7aae1b286eef06ca046627bdc8d
---
M VisualEditor.php
M demos/ve/index.php
M modules/ve/test/index.php
M modules/ve/ui/dialogs/ve.ui.MetaDialog.js
R modules/ve/ui/elements/ve.ui.FlaggableElement.js
A modules/ve/ui/elements/ve.ui.GroupElement.js
R modules/ve/ui/elements/ve.ui.LabeledElement.js
M modules/ve/ui/layouts/panels/ve.ui.EditorPanelLayout.js
A modules/ve/ui/layouts/panels/ve.ui.StackPanelLayout.js
D modules/ve/ui/layouts/panels/ve.ui.TitledPanelLayout.js
A modules/ve/ui/styles/ve.ui.Element.css
M modules/ve/ui/styles/ve.ui.Layout.css
M modules/ve/ui/styles/ve.ui.Tool.css
M modules/ve/ui/styles/ve.ui.Widget.css
M modules/ve/ui/ve.ui.Window.js
M modules/ve/ui/widgets/ve.ui.ButtonWidget.js
D modules/ve/ui/widgets/ve.ui.GroupWidget.js
M modules/ve/ui/widgets/ve.ui.InputLabelWidget.js
M modules/ve/ui/widgets/ve.ui.OptionWidget.js
M modules/ve/ui/widgets/ve.ui.SelectWidget.js
20 files changed, 321 insertions(+), 246 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/VisualEditor
refs/changes/55/56355/1
diff --git a/VisualEditor.php b/VisualEditor.php
index 900c1f4..d7f1fe5 100644
--- a/VisualEditor.php
+++ b/VisualEditor.php
@@ -328,10 +328,11 @@
've/ui/ve.ui.Toolbar.js',
've/ui/ve.ui.ToolFactory.js',
- 've/ui/widgets/ve.ui.LabeledWidget.js',
- 've/ui/widgets/ve.ui.FlaggableWidget.js',
+ 've/ui/elements/ve.ui.LabeledWidget.js',
+ 've/ui/elements/ve.ui.GroupWidget.js',
+ 've/ui/elements/ve.ui.FlaggableElement.js',
+
've/ui/widgets/ve.ui.PopupWidget.js',
- 've/ui/widgets/ve.ui.GroupWidget.js',
've/ui/widgets/ve.ui.SelectWidget.js',
've/ui/widgets/ve.ui.OptionWidget.js',
've/ui/widgets/ve.ui.ButtonWidget.js',
@@ -350,7 +351,7 @@
've/ui/layouts/ve.ui.GridLayout.js',
've/ui/layouts/ve.ui.PanelLayout.js',
- 've/ui/layouts/panels/ve.ui.TitledPanelLayout.js',
+ 've/ui/layouts/panels/ve.ui.StackPanelLayout.js',
've/ui/layouts/panels/ve.ui.EditorPanelLayout.js',
've/ui/dialogs/ve.ui.ContentDialog.js',
@@ -396,6 +397,7 @@
've/ui/styles/ve.ui.Inspector.css',
've/ui/styles/ve.ui.Toolbar.css',
've/ui/styles/ve.ui.Tool.css',
+ 've/ui/styles/ve.ui.Element.css',
've/ui/styles/ve.ui.Layout.css',
've/ui/styles/ve.ui.Widget.css',
),
diff --git a/demos/ve/index.php b/demos/ve/index.php
index f3852f3..8e63ad2 100644
--- a/demos/ve/index.php
+++ b/demos/ve/index.php
@@ -45,6 +45,7 @@
<link rel=stylesheet
href="../../modules/ve/ui/styles/ve.ui.Inspector.css">
<link rel=stylesheet
href="../../modules/ve/ui/styles/ve.ui.Toolbar.css">
<link rel=stylesheet
href="../../modules/ve/ui/styles/ve.ui.Tool.css">
+ <link rel=stylesheet
href="../../modules/ve/ui/styles/ve.ui.Element.css">
<link rel=stylesheet
href="../../modules/ve/ui/styles/ve.ui.Layout.css">
<link rel=stylesheet
href="../../modules/ve/ui/styles/ve.ui.Widget.css">
@@ -209,10 +210,10 @@
<script src="../../modules/ve/ui/ve.ui.Tool.js"></script>
<script src="../../modules/ve/ui/ve.ui.Toolbar.js"></script>
<script src="../../modules/ve/ui/ve.ui.ToolFactory.js"></script>
- <script
src="../../modules/ve/ui/widgets/ve.ui.LabeledWidget.js"></script>
- <script
src="../../modules/ve/ui/widgets/ve.ui.FlaggableWidget.js"></script>
+ <script
src="../../modules/ve/ui/elements/ve.ui.LabeledElement.js"></script>
+ <script
src="../../modules/ve/ui/elements/ve.ui.GroupElement.js"></script>
+ <script
src="../../modules/ve/ui/elements/ve.ui.FlaggableElement.js"></script>
<script
src="../../modules/ve/ui/widgets/ve.ui.PopupWidget.js"></script>
- <script
src="../../modules/ve/ui/widgets/ve.ui.GroupWidget.js"></script>
<script
src="../../modules/ve/ui/widgets/ve.ui.SelectWidget.js"></script>
<script
src="../../modules/ve/ui/widgets/ve.ui.OptionWidget.js"></script>
<script
src="../../modules/ve/ui/widgets/ve.ui.ButtonWidget.js"></script>
@@ -230,8 +231,8 @@
<script
src="../../modules/ve/ui/widgets/ve.ui.MWLinkTargetInputWidget.js"></script>
<script
src="../../modules/ve/ui/layouts/ve.ui.GridLayout.js"></script>
<script
src="../../modules/ve/ui/layouts/ve.ui.PanelLayout.js"></script>
- <script
src="../../modules/ve/ui/layouts/panels/ve.ui.TitledPanelLayout.js"></script>
<script
src="../../modules/ve/ui/layouts/panels/ve.ui.EditorPanelLayout.js"></script>
+ <script
src="../../modules/ve/ui/layouts/panels/ve.ui.StackPanelLayout.js"></script>
<script
src="../../modules/ve/ui/dialogs/ve.ui.ContentDialog.js"></script>
<script
src="../../modules/ve/ui/dialogs/ve.ui.MetaDialog.js"></script>
<script
src="../../modules/ve/ui/tools/ve.ui.ButtonTool.js"></script>
diff --git a/modules/ve/test/index.php b/modules/ve/test/index.php
index ada2221..bae0fd0 100644
--- a/modules/ve/test/index.php
+++ b/modules/ve/test/index.php
@@ -154,10 +154,10 @@
<script src="../../ve/ui/ve.ui.Tool.js"></script>
<script src="../../ve/ui/ve.ui.Toolbar.js"></script>
<script src="../../ve/ui/ve.ui.ToolFactory.js"></script>
- <script
src="../../ve/ui/widgets/ve.ui.LabeledWidget.js"></script>
- <script
src="../../ve/ui/widgets/ve.ui.FlaggableWidget.js"></script>
+ <script
src="../../ve/ui/elements/ve.ui.LabeledElement.js"></script>
+ <script
src="../../ve/ui/elements/ve.ui.GroupElement.js"></script>
+ <script
src="../../ve/ui/elements/ve.ui.FlaggableElements.js"></script>
<script src="../../ve/ui/widgets/ve.ui.PopupWidget.js"></script>
- <script src="../../ve/ui/widgets/ve.ui.GroupWidget.js"></script>
<script
src="../../ve/ui/widgets/ve.ui.SelectWidget.js"></script>
<script
src="../../ve/ui/widgets/ve.ui.OptionWidget.js"></script>
<script
src="../../ve/ui/widgets/ve.ui.ButtonWidget.js"></script>
@@ -175,8 +175,8 @@
<script
src="../../ve/ui/widgets/ve.ui.MWLinkTargetInputWidget.js"></script>
<script src="../../ve/ui/layouts/ve.ui.GridLayout.js"></script>
<script src="../../ve/ui/layouts/ve.ui.PanelLayout.js"></script>
- <script
src="../../ve/ui/layouts/panels/ve.ui.TitledPanelLayout.js"></script>
<script
src="../../ve/ui/layouts/panels/ve.ui.EditorPanelLayout.js"></script>
+ <script
src="../../ve/ui/layouts/panels/ve.ui.StackPanelLayout.js"></script>
<script
src="../../ve/ui/dialogs/ve.ui.ContentDialog.js"></script>
<script src="../../ve/ui/dialogs/ve.ui.MetaDialog.js"></script>
<script src="../../ve/ui/tools/ve.ui.ButtonTool.js"></script>
diff --git a/modules/ve/ui/dialogs/ve.ui.MetaDialog.js
b/modules/ve/ui/dialogs/ve.ui.MetaDialog.js
index 4d3a063..8ebc2b8 100644
--- a/modules/ve/ui/dialogs/ve.ui.MetaDialog.js
+++ b/modules/ve/ui/dialogs/ve.ui.MetaDialog.js
@@ -50,13 +50,20 @@
// Properties
this.outlinePanel = new ve.ui.PanelLayout( { '$$': this.$$ } );
- this.editorPanel = new ve.ui.EditorPanelLayout( {
- '$$': this.$$, 'title': 'Categories', 'icon': 'categories'
- } );
+ this.editorPanel = new ve.ui.StackPanelLayout( { '$$': this.$$ } );
+ this.editorPanels = {
+ 'categories': new ve.ui.EditorPanelLayout( {
+ '$$': this.$$, 'icon': 'categories', 'label':
'Categories'
+ } ),
+ 'languages': new ve.ui.EditorPanelLayout( {
+ '$$': this.$$, 'icon': 'language', 'label': 'Languages'
+ } )
+ };
this.layout = new ve.ui.GridLayout(
[this.outlinePanel, this.editorPanel],
{ '$$': this.$$, 'widths': [1, 2] }
);
+ this.editorPanel.addItems( ve.getObjectValues( this.editorPanels ) );
// HACK
this.outlineWidget = new ve.ui.OutlineWidget( { '$$': this.$$ } );
@@ -68,7 +75,11 @@
'languages', { '$$': this.$$, 'icon': 'language',
'label': 'Languages' }
)
] );
- this.outlineWidget.selectItem(
this.outlineWidget.getClosestSelectableItem( 0 ) );
+ this.outlineWidget
+ .on( 'select', ve.bind( function ( item ) {
+ this.editorPanel.showItem(
this.editorPanels[item.getData()] );
+ }, this ) )
+ .selectItem( this.outlineWidget.getClosestSelectableItem( 0 ) );
// Initialization
this.outlinePanel.$.addClass( 've-ui-metaDialog-outlinePanel' );
diff --git a/modules/ve/ui/widgets/ve.ui.FlaggableWidget.js
b/modules/ve/ui/elements/ve.ui.FlaggableElement.js
similarity index 78%
rename from modules/ve/ui/widgets/ve.ui.FlaggableWidget.js
rename to modules/ve/ui/elements/ve.ui.FlaggableElement.js
index 2763dbb..465ab30 100644
--- a/modules/ve/ui/widgets/ve.ui.FlaggableWidget.js
+++ b/modules/ve/ui/elements/ve.ui.FlaggableElement.js
@@ -1,12 +1,12 @@
/*!
- * VisualEditor UserInterface FlaggableWidget class.
+ * VisualEditor UserInterface FlaggableElement class.
*
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
/**
- * Creates an ve.ui.FlaggableWidget object.
+ * Flaggable element.
*
* @class
* @abstract
@@ -15,7 +15,7 @@
* @param {Object} [config] Config options
* @cfg {string[]} [flags=[]] Styling flags, e.g. 'primary', 'destructive' or
'constructive'
*/
-ve.ui.FlaggableWidget = function VeUiFlaggableWidget( config ) {
+ve.ui.FlaggableElement = function VeUiFlaggableElement( config ) {
// Config initialization
config = config || {};
@@ -35,7 +35,7 @@
* @param {string} flag Flag name to check
* @returns {boolean} Has flag
*/
-ve.ui.FlaggableWidget.prototype.hasFlag = function ( flag ) {
+ve.ui.FlaggableElement.prototype.hasFlag = function ( flag ) {
return flag in this.flags;
};
@@ -45,7 +45,7 @@
* @method
* @returns {string[]} flags Flag names
*/
-ve.ui.FlaggableWidget.prototype.getFlags = function () {
+ve.ui.FlaggableElement.prototype.getFlags = function () {
return ve.getObjectKeys( this.flags );
};
@@ -57,9 +57,9 @@
* values, keyed by flag name
* @chainable
*/
-ve.ui.FlaggableWidget.prototype.setFlags = function ( flags ) {
+ve.ui.FlaggableElement.prototype.setFlags = function ( flags ) {
var i, len, flag,
- classPrefix = 've-ui-flaggableWidget-';
+ classPrefix = 've-ui-flaggableElement-';
if ( ve.isArray( flags ) ) {
for ( i = 0, len = flags.length; i < len; i++ ) {
diff --git a/modules/ve/ui/elements/ve.ui.GroupElement.js
b/modules/ve/ui/elements/ve.ui.GroupElement.js
new file mode 100644
index 0000000..904a7f7
--- /dev/null
+++ b/modules/ve/ui/elements/ve.ui.GroupElement.js
@@ -0,0 +1,101 @@
+/*!
+ * VisualEditor UserInterface GroupElement class.
+ *
+ * @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+/**
+ * Group element.
+ *
+ * @class
+ * @abstract
+ *
+ * @constructor
+ * @param {jQuery} $group Group element
+ */
+ve.ui.GroupElement = function VeUiGroupElement( $group ) {
+ // Properties
+ this.$group = $group;
+ this.items = [];
+ this.$items = this.$$( [] );
+};
+
+/* Methods */
+
+/**
+ * Get items.
+ *
+ * @method
+ * @returns {ve.ui.Element[]} Items
+ */
+ve.ui.GroupElement.prototype.getItems = function () {
+ return this.items.slice( 0 );
+};
+
+/**
+ * Add items.
+ *
+ * @method
+ * @param {ve.ui.Element[]} items Item
+ * @chainable
+ */
+ve.ui.GroupElement.prototype.addItems = function ( items ) {
+ var i, len, item;
+
+ for ( i = 0, len = items.length; i < len; i++ ) {
+ item = items[i];
+
+ // Check if item exists then remove it first, effectively
"moving" it
+ if ( this.items.indexOf( item ) !== -1 ) {
+ this.removeItems( [item] );
+ }
+ // Add the item
+ this.items.push( item );
+ this.$group.append( item.$ );
+ this.$items = this.$items.add( item.$ );
+ }
+
+ return this;
+};
+
+/**
+ * Remove items.
+ *
+ * Items will be detached, not removed, so they can be used later.
+ *
+ * @method
+ * @param {ve.ui.Element[]} items Items to remove
+ * @chainable
+ */
+ve.ui.GroupElement.prototype.removeItems = function ( items ) {
+ var i, len, item, index;
+
+ // Remove specific items
+ for ( i = 0, len = items.length; i < len; i++ ) {
+ item = items[i];
+ index = this.items.indexOf( item );
+ if ( index !== -1 ) {
+ this.items.splice( index, 1 );
+ item.$.detach();
+ this.$items = this.$items.not( item.$ );
+ }
+ }
+
+ return this;
+};
+
+/**
+ * Clear all items.
+ *
+ * Items will be detached, not removed, so they can be used later.
+ *
+ * @method
+ * @chainable
+ */
+ve.ui.GroupElement.prototype.clearItems = function () {
+ this.items = [];
+ this.$items.detach();
+
+ return this;
+};
diff --git a/modules/ve/ui/widgets/ve.ui.LabeledWidget.js
b/modules/ve/ui/elements/ve.ui.LabeledElement.js
similarity index 75%
rename from modules/ve/ui/widgets/ve.ui.LabeledWidget.js
rename to modules/ve/ui/elements/ve.ui.LabeledElement.js
index 48cc54f..d4bbe50 100644
--- a/modules/ve/ui/widgets/ve.ui.LabeledWidget.js
+++ b/modules/ve/ui/elements/ve.ui.LabeledElement.js
@@ -1,12 +1,12 @@
/*!
- * VisualEditor UserInterface LabeledWidget class.
+ * VisualEditor UserInterface LabeledElement class.
*
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
/**
- * Creates an ve.ui.LabeledWidget object.
+ * Labeled element.
*
* @class
* @abstract
@@ -16,7 +16,7 @@
* @param {Object} [config] Config options
* @cfg {jQuery|string} [label=''] Label text
*/
-ve.ui.LabeledWidget = function VeUiLabeledWidget( $label, config ) {
+ve.ui.LabeledElement = function VeUiLabeledElement( $label, config ) {
// Config intialization
config = config || {};
@@ -24,7 +24,7 @@
this.$label = $label;
// Initialization
- this.$label.addClass( 've-ui-labeledWidget-label' );
+ this.$label.addClass( 've-ui-labeledElement-label' );
this.setLabel( config.label );
};
@@ -37,7 +37,7 @@
* @param {jQuery|string} [value] jQuery HTML node selection or string text
value to use for label
* @chainable
*/
-ve.ui.LabeledWidget.prototype.setLabel = function ( value ) {
+ve.ui.LabeledElement.prototype.setLabel = function ( value ) {
if ( typeof value === 'string' && value.length && /[^\s]*/.test( value
) ) {
this.$label.text( value );
} else if ( value instanceof jQuery ) {
@@ -54,7 +54,7 @@
* @method
* @chainable
*/
-ve.ui.LabeledWidget.prototype.fitLabel = function () {
+ve.ui.LabeledElement.prototype.fitLabel = function () {
if ( this.$label.autoEllipsis ) {
this.$label.autoEllipsis( { 'hasSpan': false, 'tooltip': true }
);
}
diff --git a/modules/ve/ui/layouts/panels/ve.ui.EditorPanelLayout.js
b/modules/ve/ui/layouts/panels/ve.ui.EditorPanelLayout.js
index 325437d..59cd3f7 100644
--- a/modules/ve/ui/layouts/panels/ve.ui.EditorPanelLayout.js
+++ b/modules/ve/ui/layouts/panels/ve.ui.EditorPanelLayout.js
@@ -10,7 +10,7 @@
*
* @class
* @extends ve.ui.PanelLayout
- * @mixins ve.ui.LabeledWidget
+ * @mixins ve.ui.LabeledElement
*
* @constructor
* @param {Object} [config] Config options
@@ -24,15 +24,15 @@
ve.ui.PanelLayout.call( this, config );
// Mixin constructors
- ve.ui.TitledPanelLayout.call( this, this.$$( '<div>' ), config );
+ ve.ui.LabeledElement.call( this, this.$$( '<div>' ), config );
// Initialization
- this.$title.addClass( 've-ui-icon-' + config.icon + '-big' );
- this.$.append( this.$title ).addClass( 've-ui-editorPanelLayout' );
+ this.$label.addClass( 've-ui-icon-' + config.icon + '-big' );
+ this.$.append( this.$label ).addClass( 've-ui-editorPanelLayout' );
};
/* Inheritance */
ve.inheritClass( ve.ui.EditorPanelLayout, ve.ui.PanelLayout );
-ve.mixinClass( ve.ui.EditorPanelLayout, ve.ui.TitledPanelLayout );
+ve.mixinClass( ve.ui.EditorPanelLayout, ve.ui.LabeledElement );
diff --git a/modules/ve/ui/layouts/panels/ve.ui.StackPanelLayout.js
b/modules/ve/ui/layouts/panels/ve.ui.StackPanelLayout.js
new file mode 100644
index 0000000..51e432e
--- /dev/null
+++ b/modules/ve/ui/layouts/panels/ve.ui.StackPanelLayout.js
@@ -0,0 +1,118 @@
+/*!
+ * VisualEditor UserInterface StackPanelLayout class.
+ *
+ * @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+/**
+ * Stack panel layout.
+ *
+ * @class
+ * @extends ve.ui.PanelLayout
+ * @mixins ve.ui.GroupElement
+ *
+ * @constructor
+ * @param {Object} [config] Config options
+ * @cfg {string} [icon=''] Symbolic icon name
+ */
+ve.ui.StackPanelLayout = function VeUiStackPanelLayout( config ) {
+ // Config initialization
+ config = ve.extendObject( config, { 'scroll': true } );
+
+ // Parent constructor
+ ve.ui.PanelLayout.call( this, config );
+
+ // Mixin constructors
+ ve.ui.GroupElement.call( this, this.$, config );
+
+ // Properties
+ this.currentItem = null;
+
+ // Initialization
+ this.$.addClass( 've-ui-stackPanelLayout' );
+};
+
+/* Inheritance */
+
+ve.inheritClass( ve.ui.StackPanelLayout, ve.ui.PanelLayout );
+
+ve.mixinClass( ve.ui.StackPanelLayout, ve.ui.GroupElement );
+
+/* Methods */
+
+/**
+ * Add items.
+ *
+ * Adding an existing item (by value) will move it.
+ *
+ * @method
+ * @param {ve.ui.PanelLayout[]} items Items to add
+ * @chainable
+ */
+ve.ui.StackPanelLayout.prototype.addItems = function ( items ) {
+ var i, len;
+
+ for ( i = 0, len = items.length; i < len; i++ ) {
+ if ( !this.currentItem ) {
+ items[i].$.show();
+ } else {
+ items[i].$.hide();
+ }
+ }
+ ve.ui.GroupElement.prototype.addItems.call( this, items );
+
+ return this;
+};
+
+/**
+ * Remove items.
+ *
+ * Items will be detached, not removed, so they can be used later.
+ *
+ * @method
+ * @param {ve.ui.PanelLayout[]} items Items to remove
+ * @chainable
+ */
+ve.ui.StackPanelLayout.prototype.removeItems = function ( items ) {
+ ve.ui.GroupElement.prototype.removeItems.call( this, items );
+ if ( items.indexOf( this.currentItem ) !== -1 ) {
+ this.currentItem = null;
+ if ( !this.currentItem && this.items.length ) {
+ this.showItem( this.items[0] );
+ }
+ }
+
+ return this;
+};
+
+/**
+ * Clear all items.
+ *
+ * Items will be detached, not removed, so they can be used later.
+ *
+ * @method
+ * @chainable
+ */
+ve.ui.StackPanelLayout.prototype.clearItems = function () {
+ this.currentItem = null;
+ ve.ui.GroupElement.prototype.clearItems.call( this );
+
+ return this;
+};
+
+/**
+ * Show item.
+ *
+ * Any currently shown item will be hidden.
+ *
+ * @method
+ * @param {ve.ui.PanelLayout} item Item to show
+ * @chainable
+ */
+ve.ui.StackPanelLayout.prototype.showItem = function ( item ) {
+ this.$items.hide();
+ item.$.show();
+
+ return this;
+};
diff --git a/modules/ve/ui/layouts/panels/ve.ui.TitledPanelLayout.js
b/modules/ve/ui/layouts/panels/ve.ui.TitledPanelLayout.js
deleted file mode 100644
index a872180..0000000
--- a/modules/ve/ui/layouts/panels/ve.ui.TitledPanelLayout.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/*!
- * VisualEditor UserInterface TitledPanelLayout class.
- *
- * @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
- * @license The MIT License (MIT); see LICENSE.txt
- */
-
-/**
- * Creates an ve.ui.TitledPanelLayout object.
- *
- * @class
- * @abstract
- *
- * @constructor
- * @param {jQuery} $title Label element
- * @param {Object} [config] Config options
- * @cfg {jQuery|string} [title=''] Title text
- */
-ve.ui.TitledPanelLayout = function VeUiTitledPanelLayout( $title, config ) {
- // Config intialization
- config = config || {};
-
- // Properties
- this.$title = $title;
-
- // Initialization
- this.$title.addClass( 've-ui-titledPanelLayout-title' );
- this.setTitle( config.title );
-};
-
-/* Methods */
-
-/**
- * Set the title.
- *
- * @method
- * @param {jQuery|string} [value] jQuery HTML node selection or string text
value to use for label
- * @chainable
- */
-ve.ui.TitledPanelLayout.prototype.setTitle = function ( value ) {
- if ( typeof value === 'string' && value.length && /[^\s]*/.test( value
) ) {
- this.$title.text( value );
- } else if ( value instanceof jQuery ) {
- this.$title.empty().append( value );
- } else {
- this.$title.html( ' ' );
- }
- return this;
-};
diff --git a/modules/ve/ui/styles/ve.ui.Element.css
b/modules/ve/ui/styles/ve.ui.Element.css
new file mode 100644
index 0000000..0f72aaa
--- /dev/null
+++ b/modules/ve/ui/styles/ve.ui.Element.css
@@ -0,0 +1,12 @@
+/*!
+ * VisualEditor UserInterface Element styles.
+ *
+ * @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+/* ve.ui.LabeledElement */
+
+.ve-ui-labeledElement-label {
+ display: block;
+}
diff --git a/modules/ve/ui/styles/ve.ui.Layout.css
b/modules/ve/ui/styles/ve.ui.Layout.css
index de23348..a7ca079 100644
--- a/modules/ve/ui/styles/ve.ui.Layout.css
+++ b/modules/ve/ui/styles/ve.ui.Layout.css
@@ -30,7 +30,7 @@
box-sizing:border-box;
}
-.ve-ui-editorPanelLayout .ve-ui-titledPanelLayout-title {
+.ve-ui-editorPanelLayout > .ve-ui-labeledElement-label {
font-size: 1.5em;
padding-left: 1.75em;
margin-bottom: 1em;
diff --git a/modules/ve/ui/styles/ve.ui.Tool.css
b/modules/ve/ui/styles/ve.ui.Tool.css
index 8f28026..d5f2d80 100644
--- a/modules/ve/ui/styles/ve.ui.Tool.css
+++ b/modules/ve/ui/styles/ve.ui.Tool.css
@@ -125,7 +125,7 @@
top: 2.5em;
}
-.ve-ui-dropdownTool .ve-ui-labeledWidget-label {
+.ve-ui-dropdownTool .ve-ui-labeledElement-label {
display: block;
padding: 0.33em 0 0.33em 0;
}
@@ -134,40 +134,40 @@
width: 8em;
}
-.ve-ui-dropdownTool-format .ve-ui-optionWidget[rel="paragraph"]
.ve-ui-labeledWidget-label {
+.ve-ui-dropdownTool-format .ve-ui-optionWidget[rel="paragraph"]
.ve-ui-labeledElement-label {
font-weight: normal;
}
-.ve-ui-dropdownTool-format .ve-ui-optionWidget[rel="heading-1"]
.ve-ui-labeledWidget-label {
+.ve-ui-dropdownTool-format .ve-ui-optionWidget[rel="heading-1"]
.ve-ui-labeledElement-label {
font-size: 188%;
font-weight: normal;
}
-.ve-ui-dropdownTool-format .ve-ui-optionWidget[rel="heading-2"]
.ve-ui-labeledWidget-label {
+.ve-ui-dropdownTool-format .ve-ui-optionWidget[rel="heading-2"]
.ve-ui-labeledElement-label {
font-size: 150%;
font-weight: normal;
}
-.ve-ui-dropdownTool-format .ve-ui-optionWidget[rel="heading-3"]
.ve-ui-labeledWidget-label {
+.ve-ui-dropdownTool-format .ve-ui-optionWidget[rel="heading-3"]
.ve-ui-labeledElement-label {
font-size: 132%;
font-weight: bold;
}
-.ve-ui-dropdownTool-format .ve-ui-optionWidget[rel="heading-4"]
.ve-ui-labeledWidget-label {
+.ve-ui-dropdownTool-format .ve-ui-optionWidget[rel="heading-4"]
.ve-ui-labeledElement-label {
font-size: 116%;
font-weight: bold;
}
-.ve-ui-dropdownTool-format .ve-ui-optionWidget[rel="heading-5"]
.ve-ui-labeledWidget-label {
+.ve-ui-dropdownTool-format .ve-ui-optionWidget[rel="heading-5"]
.ve-ui-labeledElement-label {
font-size: 100%;
font-weight: bold;
}
-.ve-ui-dropdownTool-format .ve-ui-optionWidget[rel="heading-6"]
.ve-ui-labeledWidget-label {
+.ve-ui-dropdownTool-format .ve-ui-optionWidget[rel="heading-6"]
.ve-ui-labeledElement-label {
font-size: 80%;
font-weight: bold;
}
-.ve-ui-dropdownTool-format .ve-ui-optionWidget[rel="preformatted"]
.ve-ui-labeledWidget-label {
+.ve-ui-dropdownTool-format .ve-ui-optionWidget[rel="preformatted"]
.ve-ui-labeledElement-label {
font-family: monospace, "Courier New";
}
diff --git a/modules/ve/ui/styles/ve.ui.Widget.css
b/modules/ve/ui/styles/ve.ui.Widget.css
index ef84a4e..562b01c 100644
--- a/modules/ve/ui/styles/ve.ui.Widget.css
+++ b/modules/ve/ui/styles/ve.ui.Widget.css
@@ -5,12 +5,6 @@
* @license The MIT License (MIT); see LICENSE.txt
*/
-/* ve.ui.LabeledWidget */
-
-.ve-ui-labeledWidget-label {
- display: block;
-}
-
/* ve.ui.IconButtonWidget */
.ve-ui-iconButtonWidget {
@@ -99,18 +93,18 @@
box-shadow: none;
}
-.ve-ui-buttonWidget .ve-ui-labeledWidget-label {
+.ve-ui-buttonWidget .ve-ui-labeledElement-label {
display: inline-block;
vertical-align: middle;
line-height: 1.9em;
}
-.ve-ui-flaggableWidget-destructive.ve-ui-buttonWidget {
+.ve-ui-flaggableElement-destructive.ve-ui-buttonWidget {
/* Red text */
color: #d45353;
}
-.ve-ui-flaggableWidget-constructive.ve-ui-buttonWidget {
+.ve-ui-flaggableElement-constructive.ve-ui-buttonWidget {
/* Green */
border: solid 1px #c3e59a;
background-color: #f0fbe1;
@@ -127,11 +121,11 @@
background-image: linear-gradient(top, #f0fbe1 0%, #c3e59a 100%);
}
-.ve-ui-flaggableWidget-constructive.ve-ui-buttonWidget:hover {
+.ve-ui-flaggableElement-constructive.ve-ui-buttonWidget:hover {
border-color: #a6cf74;
}
-.ve-ui-flaggableWidget-primary.ve-ui-buttonWidget {
+.ve-ui-flaggableElement-primary.ve-ui-buttonWidget {
/* Blue */
border: solid 1px #b0d9ee;
background-color: #eaf4fa;
@@ -148,7 +142,7 @@
background-image: linear-gradient(top, #eaf4fa 0%, #b0d9ee 100%);
}
-.ve-ui-flaggableWidget-primary.ve-ui-buttonWidget:hover {
+.ve-ui-flaggableElement-primary.ve-ui-buttonWidget:hover {
border-color: #84b9d4;
}
@@ -171,7 +165,7 @@
cursor: pointer;
}
-.ve-ui-optionWidget .ve-ui-labeledWidget-label {
+.ve-ui-optionWidget .ve-ui-labeledElement-label {
white-space: nowrap;
}
diff --git a/modules/ve/ui/ve.ui.Window.js b/modules/ve/ui/ve.ui.Window.js
index 9692362..b1f2ca8 100644
--- a/modules/ve/ui/ve.ui.Window.js
+++ b/modules/ve/ui/ve.ui.Window.js
@@ -92,6 +92,7 @@
ve.ui.Window.static.stylesheets = [
've.ui.Frame.css',
've.ui.Window.css',
+ 've.ui.Element.css',
've.ui.Layout.css',
've.ui.Widget.css',
( window.devicePixelRatio > 1 ? 've.ui.Icons-vector.css' :
've.ui.Icons-raster.css' )
diff --git a/modules/ve/ui/widgets/ve.ui.ButtonWidget.js
b/modules/ve/ui/widgets/ve.ui.ButtonWidget.js
index 6617bcc..30bd0a8b 100644
--- a/modules/ve/ui/widgets/ve.ui.ButtonWidget.js
+++ b/modules/ve/ui/widgets/ve.ui.ButtonWidget.js
@@ -10,8 +10,8 @@
*
* @class
* @extends ve.ui.Widget
- * @mixins ve.ui.FlaggableWidget
- * @mixins ve.ui.LabeledWidget
+ * @mixins ve.ui.FlaggableElement
+ * @mixins ve.ui.LabeledElement
*
* @constructor
* @param {Object} [config] Config options
@@ -21,8 +21,8 @@
ve.ui.Widget.call( this, config );
// Mixin constructors
- ve.ui.FlaggableWidget.call( this, config );
- ve.ui.LabeledWidget.call( this, this.$$( '<span>' ), config );
+ ve.ui.FlaggableElement.call( this, config );
+ ve.ui.LabeledElement.call( this, this.$$( '<span>' ), config );
// Events
this.$.on( 'click', ve.bind( this.onClick, this ) );
@@ -35,9 +35,9 @@
ve.inheritClass( ve.ui.ButtonWidget, ve.ui.Widget );
-ve.mixinClass( ve.ui.ButtonWidget, ve.ui.FlaggableWidget );
+ve.mixinClass( ve.ui.ButtonWidget, ve.ui.FlaggableElement );
-ve.mixinClass( ve.ui.ButtonWidget, ve.ui.LabeledWidget );
+ve.mixinClass( ve.ui.ButtonWidget, ve.ui.LabeledElement );
/* Events */
diff --git a/modules/ve/ui/widgets/ve.ui.GroupWidget.js
b/modules/ve/ui/widgets/ve.ui.GroupWidget.js
deleted file mode 100644
index ed1b92a..0000000
--- a/modules/ve/ui/widgets/ve.ui.GroupWidget.js
+++ /dev/null
@@ -1,122 +0,0 @@
-/*!
- * VisualEditor UserInterface GroupWidget class.
- *
- * @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
- * @license The MIT License (MIT); see LICENSE.txt
- */
-
-/**
- * Create an ve.ui.GroupWidget object.
- *
- * @class
- * @abstract
- * @extends ve.ui.Widget
- *
- * @constructor
- * @param {Object} [config] Config options
- */
-ve.ui.GroupWidget = function VeUiGroupWidget( config ) {
- // Config intialization
- config = config || {};
-
- // Parent constructor
- ve.ui.Widget.call( this, config );
-
- // Properties
- this.items = [];
- this.$items = $( [] );
-};
-
-/* Inheritance */
-
-ve.inheritClass( ve.ui.GroupWidget, ve.ui.Widget );
-
-/* Events */
-
-/**
- * @event select
- * @param {ve.ui.OutlineItemWidget|null} item Selected item or null if no item
is selected
- */
-
-/* Static Properties */
-
-ve.ui.GroupWidget.static.tagName = 'div';
-
-/* Methods */
-
-/**
- * Get items.
- *
- * @method
- * @returns {ve.ui.OutlineItemWidget[]} Items
- */
-ve.ui.GroupWidget.prototype.getItems = function () {
- return this.items.slice( 0 );
-};
-
-/**
- * Add items.
- *
- * @method
- * @param {ve.ui.Widget[]} items Item
- * @chainable
- */
-ve.ui.GroupWidget.prototype.addItems = function ( items ) {
- var i, len, item;
-
- for ( i = 0, len = items.length; i < len; i++ ) {
- item = items[i];
-
- // Check if item exists then remove it first, effectively
"moving" it
- if ( this.items.indexOf( item ) !== -1 ) {
- this.removeItems( [item] );
- }
- // Add the item
- this.items.push( item );
- this.$.append( item.$ );
- this.$items = this.$items.add( item.$ );
- }
-
- return this;
-};
-
-/**
- * Remove items.
- *
- * Items will be detached, not removed, so they can be used later.
- *
- * @method
- * @param {ve.ui.Widget[]} items Items to remove
- * @chainable
- */
-ve.ui.GroupWidget.prototype.removeItems = function ( items ) {
- var i, len, item, index;
-
- // Remove specific items
- for ( i = 0, len = items.length; i < len; i++ ) {
- item = items[i];
- index = this.items.indexOf( item );
- if ( index !== -1 ) {
- this.items.splice( index, 1 );
- item.$.detach();
- this.$items = this.$items.not( item.$ );
- }
- }
-
- return this;
-};
-
-/**
- * Clear all items.
- *
- * Items will be detached, not removed, so they can be used later.
- *
- * @method
- * @chainable
- */
-ve.ui.GroupWidget.prototype.clearItems = function () {
- this.items = [];
- this.$items.detach();
-
- return this;
-};
diff --git a/modules/ve/ui/widgets/ve.ui.InputLabelWidget.js
b/modules/ve/ui/widgets/ve.ui.InputLabelWidget.js
index 73baca9..ba6d7aa 100644
--- a/modules/ve/ui/widgets/ve.ui.InputLabelWidget.js
+++ b/modules/ve/ui/widgets/ve.ui.InputLabelWidget.js
@@ -12,7 +12,7 @@
*
* @class
* @extends ve.ui.Widget
- * @mixins ve.ui.LabeledWidget
+ * @mixins ve.ui.LabeledElement
*
* @constructor
* @param {Object} [config] Config options
@@ -26,7 +26,7 @@
ve.ui.Widget.call( this, config );
// Mixin constructors
- ve.ui.LabeledWidget.call( this, this.$, config );
+ ve.ui.LabeledElement.call( this, this.$, config );
// Properties
this.input = config.input;
@@ -42,7 +42,7 @@
ve.inheritClass( ve.ui.InputLabelWidget, ve.ui.Widget );
-ve.mixinClass( ve.ui.InputLabelWidget, ve.ui.LabeledWidget );
+ve.mixinClass( ve.ui.InputLabelWidget, ve.ui.LabeledElement );
/* Static Properties */
diff --git a/modules/ve/ui/widgets/ve.ui.OptionWidget.js
b/modules/ve/ui/widgets/ve.ui.OptionWidget.js
index fb7d602..cf0386b 100644
--- a/modules/ve/ui/widgets/ve.ui.OptionWidget.js
+++ b/modules/ve/ui/widgets/ve.ui.OptionWidget.js
@@ -11,7 +11,7 @@
* @class
* @abstract
* @extends ve.ui.Widget
- * @mixins ve.ui.LabeledWidget
+ * @mixins ve.ui.LabeledElement
*
* @constructor
* @param {Mixed} data Option data
@@ -29,7 +29,7 @@
ve.ui.Widget.call( this, config );
// Mixin constructors
- ve.ui.LabeledWidget.call( this, this.$$( '<span>' ), config );
+ ve.ui.LabeledElement.call( this, this.$$( '<span>' ), config );
// Properties
this.data = data;
@@ -50,7 +50,7 @@
ve.inheritClass( ve.ui.OptionWidget, ve.ui.Widget );
-ve.mixinClass( ve.ui.OptionWidget, ve.ui.LabeledWidget );
+ve.mixinClass( ve.ui.OptionWidget, ve.ui.LabeledElement );
/* Static Properties */
diff --git a/modules/ve/ui/widgets/ve.ui.SelectWidget.js
b/modules/ve/ui/widgets/ve.ui.SelectWidget.js
index 2857e23..8266903 100644
--- a/modules/ve/ui/widgets/ve.ui.SelectWidget.js
+++ b/modules/ve/ui/widgets/ve.ui.SelectWidget.js
@@ -10,7 +10,8 @@
*
* @class
* @abstract
- * @extends ve.ui.GroupWidget
+ * @extends ve.ui.Widget
+ * @mixin ve.ui.GroupWidget
*
* @constructor
* @param {Object} [config] Config options
@@ -20,7 +21,10 @@
config = config || {};
// Parent constructor
- ve.ui.GroupWidget.call( this, config );
+ ve.ui.Widget.call( this, config );
+
+ // Mixin constructors
+ ve.ui.GroupElement.call( this, this.$, config );
// Properties
this.dragging = false;
@@ -41,7 +45,9 @@
/* Inheritance */
-ve.inheritClass( ve.ui.SelectWidget, ve.ui.GroupWidget );
+ve.inheritClass( ve.ui.SelectWidget, ve.ui.Widget );
+
+ve.mixinClass( ve.ui.SelectWidget, ve.ui.GroupElement );
/* Events */
@@ -336,7 +342,7 @@
this.hashes[hash] = item;
}
}
- ve.ui.GroupWidget.prototype.addItems.call( this, items );
+ ve.ui.GroupElement.prototype.addItems.call( this, items );
return this;
};
@@ -361,7 +367,7 @@
delete this.hashes[hash];
}
}
- ve.ui.GroupWidget.prototype.removeItems.call( this, items );
+ ve.ui.GroupElement.prototype.removeItems.call( this, items );
return this;
};
@@ -377,7 +383,7 @@
ve.ui.SelectWidget.prototype.clearItems = function () {
// Clear all items
this.hashes = {};
- ve.ui.GroupWidget.prototype.clearItems.call( this );
+ ve.ui.GroupElement.prototype.clearItems.call( this );
return this;
};
--
To view, visit https://gerrit.wikimedia.org/r/56355
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I32f504c844dba7aae1b286eef06ca046627bdc8d
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Trevor Parscal <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
