jenkins-bot has submitted this change and it was merged.
Change subject: Layouts, grids and panels
......................................................................
Layouts, grids and panels
Layouts
* Makes widget inherit from element
* Adds layout which also inherits from element
* Adds grid and panel layouts
* Uses grid layout in meta dialog
Other changes
* Corrects issues with several of the stand-alone files by fixing and using
makeStaticLoader.php
Change-Id: I6b92c0204e176c914c26eff8c03ea417578e080c
---
M .docs/categories.json
M VisualEditor.php
M demos/ve/index.php
M maintenance/makeStaticLoader.php
M modules/ve/test/index.php
M modules/ve/ui/dialogs/ve.ui.MetaDialog.js
A modules/ve/ui/layouts/ve.ui.GridLayout.js
A modules/ve/ui/layouts/ve.ui.PanelLayout.js
M modules/ve/ui/styles/ve.ui.Dialog.css
A modules/ve/ui/styles/ve.ui.Layout.css
A modules/ve/ui/ve.ui.Element.js
A modules/ve/ui/ve.ui.Layout.js
M modules/ve/ui/ve.ui.Widget.js
M modules/ve/ui/ve.ui.Window.js
14 files changed, 402 insertions(+), 35 deletions(-)
Approvals:
Robmoen: Looks good to me, approved
jenkins-bot: Verified
diff --git a/.docs/categories.json b/.docs/categories.json
index 96e04d1..c8d0ad1 100644
--- a/.docs/categories.json
+++ b/.docs/categories.json
@@ -13,7 +13,13 @@
"groups": [
{
"name": "General",
- "classes": ["ve.ce", "ve.ce.NodeFactory",
"ve.ce.Surface", "ve.ce.SurfaceObserver", "ve.ce.DomRange"]
+ "classes": [
+ "ve.ce",
+ "ve.ce.NodeFactory",
+ "ve.ce.Surface",
+ "ve.ce.SurfaceObserver",
+ "ve.ce.DomRange"
+ ]
},
{
"name": "Nodes",
@@ -77,7 +83,19 @@
"groups": [
{
"name": "General",
- "classes": ["ve.ui", "ve.ui.Context",
"ve.ui.Frame", "ve.ui.InspectorFactory", "ve.ui.Toolbar", "ve.ui.ToolFactory",
"ve.ui.Dialog"]
+ "classes": [
+ "ve.ui",
+ "ve.ui.Context",
+ "ve.ui.Frame",
+ "ve.ui.Toolbar",
+ "ve.ui.Element",
+ "ve.ui.Window",
+ "ve.ui.WindowSet"
+ ]
+ },
+ {
+ "name": "Factories",
+ "classes": ["ve.ui.*Factory"]
},
{
"name": "Tools",
@@ -90,6 +108,10 @@
{
"name": "Widgets",
"classes": ["ve.ui.*Widget"]
+ },
+ {
+ "name": "Layouts",
+ "classes": ["ve.ui.*Layout"]
},
{
"name": "Dialogs",
@@ -135,7 +157,9 @@
},
{
"name": "JavaScript",
- "classes": ["Array", "Boolean", "Date",
"Function", "Number", "Object", "RegExp", "String"]
+ "classes": [
+ "Array", "Boolean", "Date", "Function",
"Number", "Object", "RegExp", "String"
+ ]
}
]
}
diff --git a/VisualEditor.php b/VisualEditor.php
index 1d9d98d..ddd2aa4 100644
--- a/VisualEditor.php
+++ b/VisualEditor.php
@@ -309,10 +309,15 @@
've/ui/ve.ui.InspectorFactory.js',
've/ui/ve.ui.Dialog.js',
've/ui/ve.ui.DialogFactory.js',
+ 've/ui/ve.ui.Element.js',
+ 've/ui/ve.ui.Layout.js',
've/ui/ve.ui.Widget.js',
've/ui/ve.ui.Tool.js',
've/ui/ve.ui.Toolbar.js',
've/ui/ve.ui.ToolFactory.js',
+
+ 've/ui/layouts/ve.ui.GridLayout.js',
+ 've/ui/layouts/ve.ui.PanelLayout.js',
've/ui/widgets/ve.ui.LabeledWidget.js',
've/ui/widgets/ve.ui.FlaggableWidget.js',
@@ -370,6 +375,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.Layout.css',
've/ui/styles/ve.ui.Widget.css',
),
'dependencies' => array(
diff --git a/demos/ve/index.php b/demos/ve/index.php
index e6640c0..13a1fff 100644
--- a/demos/ve/index.php
+++ b/demos/ve/index.php
@@ -23,9 +23,16 @@
<meta charset="UTF-8">
<title>VisualEditor Standalone Demo</title>
- <!-- Generated by maintenance/makeStaticLoader.php -->
+ <!-- Generated by makeStaticLoader.php -->
<!-- Standalone Init -->
<link rel=stylesheet
href="../../modules/ve/init/sa/styles/ve.init.sa.css">
+ <script>
+ if ( window.devicePixelRatio > 1 ) {
+ document.write( '<link rel="stylesheet"
href="../../modules/ve/ui/styles/ve.ui.Icons-vector.css">' );
+ } else {
+ document.write( '<link rel="stylesheet"
href="../../modules/ve/ui/styles/ve.ui.Icons-raster.css">' );
+ }
+ </script>
<!-- ext.visualEditor.core -->
<link rel=stylesheet
href="../../modules/ve/styles/ve.Surface.css">
<link rel=stylesheet
href="../../modules/ve/ce/styles/ve.ce.DocumentNode.css">
@@ -36,17 +43,10 @@
<link rel=stylesheet
href="../../modules/ve/ui/styles/ve.ui.Window.css">
<link rel=stylesheet
href="../../modules/ve/ui/styles/ve.ui.Dialog.css">
<link rel=stylesheet
href="../../modules/ve/ui/styles/ve.ui.Inspector.css">
- <link rel=stylesheet
href="../../modules/ve/ui/styles/ve.ui.Tool.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.Layout.css">
<link rel=stylesheet
href="../../modules/ve/ui/styles/ve.ui.Widget.css">
-
- <script>
- if ( window.devicePixelRatio > 1 ) {
- document.write( '<link rel="stylesheet"
href="../../modules/ve/ui/styles/ve.ui.Icons-vector.css">' );
- } else {
- document.write( '<link rel="stylesheet"
href="../../modules/ve/ui/styles/ve.ui.Icons-raster.css">' );
- }
- </script>
<!-- demo -->
<link rel="stylesheet" href="demo.css">
@@ -63,7 +63,7 @@
</ul>
<div class="ve-demo-editor"></div>
- <!-- Generated by maintenance/makeStaticLoader.php -->
+ <!-- Generated by makeStaticLoader.php -->
<!-- Dependencies -->
<script src="../../modules/jquery/jquery.js"></script>
<script src="../../modules/rangy/rangy-core.js"></script>
@@ -82,7 +82,7 @@
<script>
<?php
require(
'../../modules/../VisualEditor.i18n.php' );
- echo 've.init.platform.addMessages( ' .
json_encode( $messages['en'] ) . ');';
+ echo 've.init.platform.addMessages( ' .
json_encode( $messages['en'] ) . ');' . "\n";
?>
ve.init.platform.setModulesUrl( '../../modules/' );
</script>
@@ -146,6 +146,10 @@
<script
src="../../modules/ve/dm/nodes/ve.dm.TableRowNode.js"></script>
<script
src="../../modules/ve/dm/nodes/ve.dm.TableSectionNode.js"></script>
<script
src="../../modules/ve/dm/nodes/ve.dm.TextNode.js"></script>
+ <script
src="../../modules/ve/dm/nodes/ve.dm.MWEntityNode.js"></script>
+ <script
src="../../modules/ve/dm/nodes/ve.dm.MWHeadingNode.js"></script>
+ <script
src="../../modules/ve/dm/nodes/ve.dm.MWMetaNode.js"></script>
+ <script
src="../../modules/ve/dm/nodes/ve.dm.MWPreformattedNode.js"></script>
<script
src="../../modules/ve/dm/annotations/ve.dm.LinkAnnotation.js"></script>
<script
src="../../modules/ve/dm/annotations/ve.dm.MWExternalLinkAnnotation.js"></script>
<script
src="../../modules/ve/dm/annotations/ve.dm.MWInternalLinkAnnotation.js"></script>
@@ -174,7 +178,6 @@
<script
src="../../modules/ve/ce/nodes/ve.ce.ImageNode.js"></script>
<script
src="../../modules/ve/ce/nodes/ve.ce.ListItemNode.js"></script>
<script
src="../../modules/ve/ce/nodes/ve.ce.ListNode.js"></script>
- <script
src="../../modules/ve/ce/nodes/ve.ce.MWEntityNode.js"></script>
<script
src="../../modules/ve/ce/nodes/ve.ce.ParagraphNode.js"></script>
<script
src="../../modules/ve/ce/nodes/ve.ce.PreformattedNode.js"></script>
<script
src="../../modules/ve/ce/nodes/ve.ce.TableCellNode.js"></script>
@@ -182,6 +185,9 @@
<script
src="../../modules/ve/ce/nodes/ve.ce.TableRowNode.js"></script>
<script
src="../../modules/ve/ce/nodes/ve.ce.TableSectionNode.js"></script>
<script
src="../../modules/ve/ce/nodes/ve.ce.TextNode.js"></script>
+ <script
src="../../modules/ve/ce/nodes/ve.ce.MWEntityNode.js"></script>
+ <script
src="../../modules/ve/ce/nodes/ve.ce.MWHeadingNode.js"></script>
+ <script
src="../../modules/ve/ce/nodes/ve.ce.MWPreformattedNode.js"></script>
<script src="../../modules/ve/ui/ve.ui.js"></script>
<script src="../../modules/ve/ui/ve.ui.Context.js"></script>
<script src="../../modules/ve/ui/ve.ui.Frame.js"></script>
@@ -191,10 +197,14 @@
<script
src="../../modules/ve/ui/ve.ui.InspectorFactory.js"></script>
<script src="../../modules/ve/ui/ve.ui.Dialog.js"></script>
<script
src="../../modules/ve/ui/ve.ui.DialogFactory.js"></script>
+ <script src="../../modules/ve/ui/ve.ui.Element.js"></script>
+ <script src="../../modules/ve/ui/ve.ui.Layout.js"></script>
<script src="../../modules/ve/ui/ve.ui.Widget.js"></script>
<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/layouts/ve.ui.GridLayout.js"></script>
+ <script
src="../../modules/ve/ui/layouts/ve.ui.PanelLayout.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/widgets/ve.ui.ButtonWidget.js"></script>
@@ -227,8 +237,10 @@
<script
src="../../modules/ve/ui/tools/buttons/ve.ui.RedoButtonTool.js"></script>
<script
src="../../modules/ve/ui/tools/buttons/ve.ui.UndoButtonTool.js"></script>
<script
src="../../modules/ve/ui/tools/dropdowns/ve.ui.FormatDropdownTool.js"></script>
+ <script
src="../../modules/ve/ui/tools/dropdowns/ve.ui.MWFormatDropdownTool.js"></script>
<script
src="../../modules/ve/ui/inspectors/ve.ui.LinkInspector.js"></script>
<script
src="../../modules/ve/ui/inspectors/ve.ui.MWLinkInspector.js"></script>
+
<!-- demo -->
<script>
$( document ).ready( function () {
diff --git a/maintenance/makeStaticLoader.php b/maintenance/makeStaticLoader.php
index 978f181..071e32c 100644
--- a/maintenance/makeStaticLoader.php
+++ b/maintenance/makeStaticLoader.php
@@ -52,6 +52,7 @@
'scripts' => array(
've/init/sa/ve.init.sa.js',
've/init/sa/ve.init.sa.Platform.js',
+ 've/init/sa/ve.init.sa.Target.js',
),
'headAdd' => '
<script>
diff --git a/modules/ve/test/index.php b/modules/ve/test/index.php
index 87698b2..e8be043 100644
--- a/modules/ve/test/index.php
+++ b/modules/ve/test/index.php
@@ -8,7 +8,7 @@
<link rel="stylesheet" href="../../qunit/qunit.css">
<script src="../../qunit/qunit.js"></script>
- <!-- Generated by maintenance/makeStaticLoader.php -->
+ <!-- Generated by makeStaticLoader.php -->
<!-- Dependencies -->
<script src="../../jquery/jquery.js"></script>
<script src="../../rangy/rangy-core.js"></script>
@@ -27,7 +27,7 @@
<script>
<?php
require( '../../../VisualEditor.i18n.php' );
- echo 've.init.platform.addMessages( ' .
json_encode( $messages['en'] ) . ');';
+ echo 've.init.platform.addMessages( ' .
json_encode( $messages['en'] ) . ');' . "\n";
?>
ve.init.platform.setModulesUrl( '../../' );
</script>
@@ -140,10 +140,14 @@
<script src="../../ve/ui/ve.ui.InspectorFactory.js"></script>
<script src="../../ve/ui/ve.ui.Dialog.js"></script>
<script src="../../ve/ui/ve.ui.DialogFactory.js"></script>
+ <script src="../../ve/ui/ve.ui.Element.js"></script>
+ <script src="../../ve/ui/ve.ui.Layout.js"></script>
<script src="../../ve/ui/ve.ui.Widget.js"></script>
<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/layouts/ve.ui.GridLayout.js"></script>
+ <script src="../../ve/ui/layouts/ve.ui.PanelLayout.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/widgets/ve.ui.ButtonWidget.js"></script>
diff --git a/modules/ve/ui/dialogs/ve.ui.MetaDialog.js
b/modules/ve/ui/dialogs/ve.ui.MetaDialog.js
index fa2cf06..265ad6f 100644
--- a/modules/ve/ui/dialogs/ve.ui.MetaDialog.js
+++ b/modules/ve/ui/dialogs/ve.ui.MetaDialog.js
@@ -35,6 +35,30 @@
*/
ve.ui.MetaDialog.static.titleMessage = 'visualeditor-dialog-meta-title';
+/* Methods */
+
+/**
+ * Handle frame ready events.
+ *
+ * @method
+ */
+ve.ui.MetaDialog.prototype.initialize = function () {
+ // Call parent method
+ ve.ui.Dialog.prototype.initialize.call( this );
+
+ // Properties
+ this.outlinePanel = new ve.ui.PanelLayout( { '$$': this.$$ } );
+ this.editorPanel = new ve.ui.PanelLayout( { '$$': this.$$ } );
+ this.layout = new ve.ui.GridLayout(
+ [this.outlinePanel, this.editorPanel],
+ { '$$': this.$$, 'widths': [1, 2] }
+ );
+
+ // Initialization
+ this.$body.append( this.layout.$ );
+ this.layout.update();
+};
+
/* Registration */
ve.ui.dialogFactory.register( 'meta', ve.ui.MetaDialog );
diff --git a/modules/ve/ui/layouts/ve.ui.GridLayout.js
b/modules/ve/ui/layouts/ve.ui.GridLayout.js
new file mode 100644
index 0000000..d2acd70
--- /dev/null
+++ b/modules/ve/ui/layouts/ve.ui.GridLayout.js
@@ -0,0 +1,159 @@
+/*!
+ * VisualEditor UserInterface GridLayout class.
+ *
+ * @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+/**
+ * Grid layout.
+ *
+ * @class
+ * @extends ve.ui.Layout
+ *
+ * @constructor
+ * @param {ve.ui.PanelLayout[]} panels Panels in the grid
+ * @param {Object} [config] Config options
+ * @cfg {number[]} [widths] Widths of columns as ratios
+ * @cfg {number[]} [heights] Heights of columns as ratios
+ */
+ve.ui.GridLayout = function VeUiGridLayout( panels, config ) {
+ var i, len, widths;
+
+ // Config initialization
+ config = config || {};
+
+ // Parent constructor
+ ve.ui.Layout.call( this, config );
+
+ // Properties
+ this.panels = [];
+ this.widths = [];
+ this.heights = [];
+
+ // Initialization
+ this.$.addClass( 've-ui-gridLayout' );
+ for ( i = 0, len = panels.length; i < len; i++ ) {
+ this.panels.push( panels[i] );
+ this.$.append( panels[i].$ );
+ }
+ if ( config.widths || config.heights ) {
+ this.layout( config.widths || [1], config.heights || [1] );
+ } else {
+ // Arrange in columns by default
+ widths = [];
+ for ( i = 0, len = this.panels.length; i < len; i++ ) {
+ widths[i] = 1;
+ }
+ this.layout( widths, [1] );
+ }
+};
+
+/* Inheritance */
+
+ve.inheritClass( ve.ui.GridLayout, ve.ui.Layout );
+
+/* Events */
+
+/**
+ * @event layout
+ */
+
+/**
+ * @event update
+ */
+
+/* Static Properties */
+
+ve.ui.GridLayout.static.tagName = 'div';
+
+/* Methods */
+
+/**
+ * Set grid dimensions.
+ *
+ * @method
+ * @param {number[]} widths Widths of columns as ratios
+ * @param {number[]} heights Heights of rows as ratios
+ * @throws {Error} If grid is not large enough to fit all panels
+ */
+ve.ui.GridLayout.prototype.layout = function ( widths, heights ) {
+ var x, y,
+ xd = 0,
+ yd = 0,
+ cols = widths.length,
+ rows = heights.length;
+
+ // Verify grid is big enough to fit panels
+ if ( cols * rows < this.panels.length ) {
+ throw new Error( 'Grid is not large enough to fit ' +
this.panels.length + 'panels' );
+ }
+
+ // Sum up denominators
+ for ( x = 0; x < cols; x++ ) {
+ xd += widths[x];
+ }
+ for ( y = 0; y < rows; y++ ) {
+ yd += heights[y];
+ }
+ // Store factors
+ this.widths = [];
+ this.heights = [];
+ for ( x = 0; x < cols; x++ ) {
+ this.widths[x] = widths[x] / xd;
+ }
+ for ( y = 0; y < rows; y++ ) {
+ this.heights[y] = heights[y] / yd;
+ }
+ // Synchronize view
+ this.update();
+ this.emit( 'layout' );
+};
+
+/**
+ * Update panel positions and sizes.
+ *
+ * @method
+ */
+ve.ui.GridLayout.prototype.update = function () {
+ var x, y, panel,
+ i = 0,
+ left = 0,
+ top = 0,
+ width = 0,
+ height = 0,
+ cols = this.widths.length,
+ rows = this.heights.length;
+
+ for ( y = 0; y < rows; y++ ) {
+ for ( x = 0; x < cols; x++ ) {
+ panel = this.panels[i];
+ width = this.widths[x];
+ height = this.heights[y];
+ panel.$.css( {
+ 'width': Math.round( width * 100 ) + '%',
+ 'height': Math.round( height * 100 ) + '%',
+ 'left': Math.round( left * 100 ) + '%',
+ 'top': Math.round( top * 100 ) + '%'
+ } );
+ i++;
+ left += width;
+ }
+ top += height;
+ left = 0;
+ }
+ this.emit( 'update' );
+};
+
+/**
+ * Get a panel at a given position.
+ *
+ * The x and y position is affected by the current grid layout.
+ *
+ * @method
+ * @param {number} x Horizontal position
+ * @param {number} y Vertical position
+ */
+ve.ui.GridLayout.prototype.getPanel = function ( x, y ) {
+ return this.panels[( x * this.widths.length ) + y];
+};
diff --git a/modules/ve/ui/layouts/ve.ui.PanelLayout.js
b/modules/ve/ui/layouts/ve.ui.PanelLayout.js
new file mode 100644
index 0000000..bea6fef
--- /dev/null
+++ b/modules/ve/ui/layouts/ve.ui.PanelLayout.js
@@ -0,0 +1,34 @@
+/*!
+ * VisualEditor UserInterface PanelLayout class.
+ *
+ * @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+/**
+ * Panel layout.
+ *
+ * @class
+ * @extends ve.ui.Layout
+ *
+ * @constructor
+ * @param {Object} [config] Config options
+ * @cfg {boolean} [scroll] Allow vertical scrolling
+ */
+ve.ui.PanelLayout = function VeUiPanelLayout( config ) {
+ // Config initialization
+ config = config || {};
+
+ // Parent constructor
+ ve.ui.Layout.call( this, config );
+
+ // Initialization
+ this.$.addClass( 've-ui-panelLayout' );
+ if ( config.scroll ) {
+ this.$.css( 'overflow-x', 'auto' );
+ }
+};
+
+/* Inheritance */
+
+ve.inheritClass( ve.ui.PanelLayout, ve.ui.Layout );
diff --git a/modules/ve/ui/styles/ve.ui.Dialog.css
b/modules/ve/ui/styles/ve.ui.Dialog.css
index 8c5f15e..f7862b0 100644
--- a/modules/ve/ui/styles/ve.ui.Dialog.css
+++ b/modules/ve/ui/styles/ve.ui.Dialog.css
@@ -58,3 +58,11 @@
float: right;
margin: 0.125em 0.25em;
}
+
+.ve-ui-window-body {
+ position: absolute;
+ top: 3.8em;
+ left: 0;
+ right: 0;
+ bottom: 0;
+}
diff --git a/modules/ve/ui/styles/ve.ui.Layout.css
b/modules/ve/ui/styles/ve.ui.Layout.css
new file mode 100644
index 0000000..59549eb
--- /dev/null
+++ b/modules/ve/ui/styles/ve.ui.Layout.css
@@ -0,0 +1,22 @@
+/*!
+ * VisualEditor UserInterface Layout styles.
+ *
+ * @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+/* ve.ui.GridLayout */
+
+.ve-ui-gridLayout {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+}
+
+/* ve.ui.PanelLayout */
+
+.ve-ui-panelLayout {
+ position: absolute;
+}
diff --git a/modules/ve/ui/ve.ui.Element.js b/modules/ve/ui/ve.ui.Element.js
new file mode 100644
index 0000000..3d01262
--- /dev/null
+++ b/modules/ve/ui/ve.ui.Element.js
@@ -0,0 +1,44 @@
+/*!
+ * VisualEditor UserInterface Element class.
+ *
+ * @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+/**
+ * Creates an ve.ui.Element object.
+ *
+ * @class
+ * @abstract
+ *
+ * @constructor
+ * @param {Object} [config] Config options
+ * @cfg {Function} [$$=$] jQuery for the frame the widget is in
+ */
+ve.ui.Element = function VeUiElement( config ) {
+ // Initialize config
+ config = ve.extendObject( { '$$': $ }, config );
+
+ // Properties
+ this.$$ = config.$$;
+ this.$ = this.$$( '<' + this.constructor.static.tagName + '>' );
+};
+
+/* Static Properties */
+
+/**
+ * @static
+ * @property
+ * @inheritable
+ */
+ve.ui.Element.static = {};
+
+/**
+ * HTML element name.
+ *
+ * @static
+ * @property
+ * @type {string}
+ * @inheritable
+ */
+ve.ui.Element.static.tagName = 'div';
diff --git a/modules/ve/ui/ve.ui.Layout.js b/modules/ve/ui/ve.ui.Layout.js
new file mode 100644
index 0000000..ac70fc1
--- /dev/null
+++ b/modules/ve/ui/ve.ui.Layout.js
@@ -0,0 +1,37 @@
+/*!
+ * VisualEditor UserInterface Layout class.
+ *
+ * @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+/**
+ * Creates an ve.ui.Layout object.
+ *
+ * @class
+ * @abstract
+ * @extends ve.ui.Element
+ * @mixin ve.EventEmitter
+ *
+ * @constructor
+ * @param {Object} [config] Config options
+ */
+ve.ui.Layout = function VeUiLayout( config ) {
+ // Initialize config
+ config = config || {};
+
+ // Parent constructor
+ ve.ui.Element.call( this, config );
+
+ // Mixin constructors
+ ve.EventEmitter.call( this );
+
+ // Initialization
+ this.$.addClass( 've-ui-layout' );
+};
+
+/* Inheritance */
+
+ve.inheritClass( ve.ui.Layout, ve.ui.Element );
+
+ve.mixinClass( ve.ui.Layout, ve.EventEmitter );
diff --git a/modules/ve/ui/ve.ui.Widget.js b/modules/ve/ui/ve.ui.Widget.js
index cfdfdc9..8bf0211 100644
--- a/modules/ve/ui/ve.ui.Widget.js
+++ b/modules/ve/ui/ve.ui.Widget.js
@@ -10,23 +10,24 @@
*
* @class
* @abstract
- * @extends ve.EventEmitter
+ * @extends ve.ui.Element
+ * @mixin ve.EventEmitter
*
* @constructor
* @param {Object} [config] Config options
- * @cfg {Function} [$$=$] jQuery for the frame the widget is in
* @cfg {boolean} [disabled=false] Disable
*/
ve.ui.Widget = function VeUiWidget( config ) {
// Initialize config
- config = ve.extendObject( { '$$': $, 'disabled': false }, config );
+ config = ve.extendObject( { 'disabled': false }, config );
// Parent constructor
ve.EventEmitter.call( this );
+ // Mixin constructors
+ ve.ui.Element.call( this, config );
+
// Properties
- this.$$ = config.$$;
- this.$ = this.$$( '<' + this.constructor.static.tagName + '>' );
this.disabled = config.disabled;
// Initialization
@@ -36,19 +37,9 @@
/* Inheritance */
-ve.inheritClass( ve.ui.Widget, ve.EventEmitter );
+ve.inheritClass( ve.ui.Widget, ve.ui.Element );
-/* Static Properties */
-
-/**
- * HTML element name.
- *
- * @static
- * @property
- * @type {string}
- * @inheritable
- */
-ve.ui.Widget.static.tagName = 'div';
+ve.mixinClass( ve.ui.Widget, ve.EventEmitter );
/* Methods */
diff --git a/modules/ve/ui/ve.ui.Window.js b/modules/ve/ui/ve.ui.Window.js
index 1f27537..99a9880 100644
--- a/modules/ve/ui/ve.ui.Window.js
+++ b/modules/ve/ui/ve.ui.Window.js
@@ -84,6 +84,7 @@
ve.ui.Window.static.stylesheets = [
've.ui.Frame.css',
've.ui.Window.css',
+ 've.ui.Layout.css',
've.ui.Widget.css',
( window.devicePixelRatio > 1 ? 've.ui.Icons-vector.css' :
've.ui.Icons-raster.css' )
];
--
To view, visit https://gerrit.wikimedia.org/r/53901
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I6b92c0204e176c914c26eff8c03ea417578e080c
Gerrit-PatchSet: 6
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Trevor Parscal <[email protected]>
Gerrit-Reviewer: Robmoen <[email protected]>
Gerrit-Reviewer: Trevor Parscal <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
