Trevor Parscal has uploaded a new change for review.
https://gerrit.wikimedia.org/r/77839
Change subject: Add ve.ui.ToolGroup and use within toolbar setup
......................................................................
Add ve.ui.ToolGroup and use within toolbar setup
Objectives:
* Use a class for toolbar groups to add more functionality later
* Rename addTools method to setup
Changes:
*.php
* Add link to new file
* Move ui element classes up for more general use
ve.init.mw.ViewPageTarget.js, ve.init.sa.Target.js, ve.ui.Context.js,
ve.ui.SurfaceWidget.js
* Update use of addTools method
ve.ui.Tool.css, ve.ui.Toolbar.css
* Move styles between sheets
ve.ui.Toolbar.js
* Rename addTools to setup
* Use ve.ui.ToolGroup objects when building tools
ve.ui.ToolGroup.js
* New class, encapsulates tools
Change-Id: Ic3a643634a80a8ac7d6f6f47f031d001c7efaee7
---
M VisualEditor.php
M demos/ve/index.php
M modules/ve-mw/init/targets/ve.init.mw.ViewPageTarget.js
M modules/ve-mw/test/index.php
M modules/ve/init/sa/ve.init.sa.Target.js
M modules/ve/test/index.php
M modules/ve/ui/styles/ve.ui.Tool.css
M modules/ve/ui/styles/ve.ui.Toolbar.css
M modules/ve/ui/ve.ui.Context.js
A modules/ve/ui/ve.ui.ToolGroup.js
M modules/ve/ui/ve.ui.Toolbar.js
M modules/ve/ui/widgets/ve.ui.SurfaceWidget.js
12 files changed, 100 insertions(+), 57 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/VisualEditor
refs/changes/39/77839/1
diff --git a/VisualEditor.php b/VisualEditor.php
index ba067d3..7eef8eb 100644
--- a/VisualEditor.php
+++ b/VisualEditor.php
@@ -421,6 +421,11 @@
// ui
've/ui/ve.ui.js',
+
+ 've/ui/elements/ve.ui.LabeledElement.js',
+ 've/ui/elements/ve.ui.GroupElement.js',
+ 've/ui/elements/ve.ui.FlaggableElement.js',
+
've/ui/ve.ui.Surface.js',
've/ui/ve.ui.Context.js',
've/ui/ve.ui.Frame.js',
@@ -433,6 +438,7 @@
've/ui/ve.ui.Layout.js',
've/ui/ve.ui.Widget.js',
've/ui/ve.ui.Tool.js',
+ 've/ui/ve.ui.ToolGroup.js',
've/ui/ve.ui.ToolFactory.js',
've/ui/ve.ui.Toolbar.js',
've/ui/ve.ui.SurfaceToolbar.js',
@@ -450,10 +456,6 @@
've/ui/actions/ve.ui.IndentationAction.js',
've/ui/actions/ve.ui.InspectorAction.js',
've/ui/actions/ve.ui.ListAction.js',
-
- 've/ui/elements/ve.ui.LabeledElement.js',
- 've/ui/elements/ve.ui.GroupElement.js',
- 've/ui/elements/ve.ui.FlaggableElement.js',
've/ui/widgets/ve.ui.PopupWidget.js',
've/ui/widgets/ve.ui.SelectWidget.js',
diff --git a/demos/ve/index.php b/demos/ve/index.php
index 42a3904..cd84377 100644
--- a/demos/ve/index.php
+++ b/demos/ve/index.php
@@ -210,6 +210,9 @@
<script
src="../../modules/ve/ce/annotations/ve.ce.LinkAnnotation.js"></script>
<script
src="../../modules/ve/ce/annotations/ve.ce.TextStyleAnnotation.js"></script>
<script src="../../modules/ve/ui/ve.ui.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/ve.ui.Surface.js"></script>
<script src="../../modules/ve/ui/ve.ui.Context.js"></script>
<script src="../../modules/ve/ui/ve.ui.Frame.js"></script>
@@ -222,6 +225,7 @@
<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.ToolGroup.js"></script>
<script src="../../modules/ve/ui/ve.ui.ToolFactory.js"></script>
<script src="../../modules/ve/ui/ve.ui.Toolbar.js"></script>
<script
src="../../modules/ve/ui/ve.ui.SurfaceToolbar.js"></script>
@@ -237,9 +241,6 @@
<script
src="../../modules/ve/ui/actions/ve.ui.IndentationAction.js"></script>
<script
src="../../modules/ve/ui/actions/ve.ui.InspectorAction.js"></script>
<script
src="../../modules/ve/ui/actions/ve.ui.ListAction.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.SelectWidget.js"></script>
<script
src="../../modules/ve/ui/widgets/ve.ui.OptionWidget.js"></script>
diff --git a/modules/ve-mw/init/targets/ve.init.mw.ViewPageTarget.js
b/modules/ve-mw/init/targets/ve.init.mw.ViewPageTarget.js
index 600c83c..5856153 100644
--- a/modules/ve-mw/init/targets/ve.init.mw.ViewPageTarget.js
+++ b/modules/ve-mw/init/targets/ve.init.mw.ViewPageTarget.js
@@ -1887,7 +1887,7 @@
ve.init.mw.ViewPageTarget.prototype.setUpToolbar = function () {
this.toolbar = new ve.ui.SurfaceToolbar( this.surface, { 'shadow':
true, 'actions': true } );
this.toolbar.connect( this, { 'position': 'onToolbarPosition' } );
- this.toolbar.addTools( this.constructor.static.toolbarTools );
+ this.toolbar.setup( this.constructor.static.toolbarTools );
this.surface.addCommands( this.constructor.static.surfaceCommands );
if ( !this.isMobileDevice ) {
this.toolbar.enableFloatable();
diff --git a/modules/ve-mw/test/index.php b/modules/ve-mw/test/index.php
index b0392da..f504a5e 100644
--- a/modules/ve-mw/test/index.php
+++ b/modules/ve-mw/test/index.php
@@ -196,6 +196,9 @@
<script
src="../../ve/ce/annotations/ve.ce.TextStyleAnnotation.js"></script>
<script
src="../../ve-mw/ce/annotations/ve.ce.MWNowikiAnnotation.js"></script>
<script src="../../ve/ui/ve.ui.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.FlaggableElement.js"></script>
<script src="../../ve/ui/ve.ui.Surface.js"></script>
<script src="../../ve/ui/ve.ui.Context.js"></script>
<script src="../../ve/ui/ve.ui.Frame.js"></script>
@@ -209,6 +212,7 @@
<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.ToolGroup.js"></script>
<script src="../../ve/ui/ve.ui.ToolFactory.js"></script>
<script src="../../ve/ui/ve.ui.Toolbar.js"></script>
<script src="../../ve/ui/ve.ui.SurfaceToolbar.js"></script>
@@ -224,9 +228,6 @@
<script
src="../../ve/ui/actions/ve.ui.IndentationAction.js"></script>
<script
src="../../ve/ui/actions/ve.ui.InspectorAction.js"></script>
<script src="../../ve/ui/actions/ve.ui.ListAction.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.FlaggableElement.js"></script>
<script src="../../ve/ui/widgets/ve.ui.PopupWidget.js"></script>
<script
src="../../ve/ui/widgets/ve.ui.SelectWidget.js"></script>
<script
src="../../ve/ui/widgets/ve.ui.OptionWidget.js"></script>
diff --git a/modules/ve/init/sa/ve.init.sa.Target.js
b/modules/ve/init/sa/ve.init.sa.Target.js
index b9d86df..ca4b965 100644
--- a/modules/ve/init/sa/ve.init.sa.Target.js
+++ b/modules/ve/init/sa/ve.init.sa.Target.js
@@ -30,7 +30,7 @@
// Initialization
this.toolbar.$.addClass( 've-init-sa-target-toolbar' );
- this.toolbar.addTools( this.constructor.static.toolbarTools );
+ this.toolbar.setup( this.constructor.static.toolbarTools );
this.toolbar.enableFloatable();
this.$.append( this.toolbar.$, this.surface.$ );
diff --git a/modules/ve/test/index.php b/modules/ve/test/index.php
index 8f771e8..a09e86a 100644
--- a/modules/ve/test/index.php
+++ b/modules/ve/test/index.php
@@ -165,6 +165,9 @@
<script
src="../../ve/ce/annotations/ve.ce.LinkAnnotation.js"></script>
<script
src="../../ve/ce/annotations/ve.ce.TextStyleAnnotation.js"></script>
<script src="../../ve/ui/ve.ui.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.FlaggableElement.js"></script>
<script src="../../ve/ui/ve.ui.Surface.js"></script>
<script src="../../ve/ui/ve.ui.Context.js"></script>
<script src="../../ve/ui/ve.ui.Frame.js"></script>
@@ -177,6 +180,7 @@
<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.ToolGroup.js"></script>
<script src="../../ve/ui/ve.ui.ToolFactory.js"></script>
<script src="../../ve/ui/ve.ui.Toolbar.js"></script>
<script src="../../ve/ui/ve.ui.SurfaceToolbar.js"></script>
@@ -192,9 +196,6 @@
<script
src="../../ve/ui/actions/ve.ui.IndentationAction.js"></script>
<script
src="../../ve/ui/actions/ve.ui.InspectorAction.js"></script>
<script src="../../ve/ui/actions/ve.ui.ListAction.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.FlaggableElement.js"></script>
<script src="../../ve/ui/widgets/ve.ui.PopupWidget.js"></script>
<script
src="../../ve/ui/widgets/ve.ui.SelectWidget.js"></script>
<script
src="../../ve/ui/widgets/ve.ui.OptionWidget.js"></script>
diff --git a/modules/ve/ui/styles/ve.ui.Tool.css
b/modules/ve/ui/styles/ve.ui.Tool.css
index ec6b5eb..ac83650 100644
--- a/modules/ve/ui/styles/ve.ui.Tool.css
+++ b/modules/ve/ui/styles/ve.ui.Tool.css
@@ -24,6 +24,29 @@
border-bottom-right-radius: 0.25em;
}
+/* ve.ui.ToolGroup */
+
+.ve-ui-toolGroup {
+ display: inline-block;
+ margin: 0.3em;
+ vertical-align: middle;
+ border-radius: 0.25em;
+ border: solid 1px transparent;
+}
+
+.ve-ui-toolGroup:hover {
+ border-color: rgba(0,0,0,0.05);
+}
+
+.ve-ui-toolGroup .ve-ui-labeledWidget-label {
+ display: inline-block;
+ padding: 0.5em 0.75em;
+ line-height: 22px;
+ font-size: 0.8em;
+ color: #555;
+ vertical-align: top;
+}
+
/* ve.ui.ButtonTool */
/* ve.ui.DropdownTool */
diff --git a/modules/ve/ui/styles/ve.ui.Toolbar.css
b/modules/ve/ui/styles/ve.ui.Toolbar.css
index de10cb8..d96b370 100644
--- a/modules/ve/ui/styles/ve.ui.Toolbar.css
+++ b/modules/ve/ui/styles/ve.ui.Toolbar.css
@@ -51,27 +51,6 @@
user-select: none;
}
-.ve-ui-toolbar-group {
- display: inline-block;
- margin: 0.3em;
- vertical-align: middle;
- border-radius: 0.25em;
- border: solid 1px transparent;
-}
-
-.ve-ui-toolbar-group:hover {
- border-color: rgba(0,0,0,0.05);
-}
-
-.ve-ui-toolbar-label {
- display: inline-block;
- padding: 0.5em 0.75em;
- line-height: 22px;
- font-size: 0.8em;
- color: #555;
- vertical-align: top;
-}
-
.ve-ui-toolbar-shadow {
/* @embed */
background-image: url(images/toolbar-shadow.png);
diff --git a/modules/ve/ui/ve.ui.Context.js b/modules/ve/ui/ve.ui.Context.js
index 33d7cca..bfb96f8 100644
--- a/modules/ve/ui/ve.ui.Context.js
+++ b/modules/ve/ui/ve.ui.Context.js
@@ -222,7 +222,7 @@
this.toolbar.destroy();
}
this.toolbar = new ve.ui.SurfaceToolbar( this.surface );
- this.toolbar.addTools( [{ 'name': 'inspectors', 'items'
: tools }] );
+ this.toolbar.setup( [ { 'items' : tools } ] );
this.$menu.append( this.toolbar.$ );
this.show();
this.toolbar.initialize();
diff --git a/modules/ve/ui/ve.ui.ToolGroup.js b/modules/ve/ui/ve.ui.ToolGroup.js
new file mode 100644
index 0000000..707887a
--- /dev/null
+++ b/modules/ve/ui/ve.ui.ToolGroup.js
@@ -0,0 +1,41 @@
+/*!
+ * VisualEditor UserInterface ToolGroup class.
+ *
+ * @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+/**
+ * UserInterface tool group.
+ *
+ * @class
+ * @abstract
+ * @extends ve.ui.Widget
+ * @mixins ve.ui.GroupElement
+ *
+ * @constructor
+ * @param {ve.ui.Toolbar} toolbar
+ * @param {Object} [config] Config options
+ */
+ve.ui.ToolGroup = function VeUiToolGroup( toolbar, config ) {
+ // Parent constructor
+ ve.ui.Widget.call( this, config );
+
+ // Mixin constructors
+ ve.ui.GroupElement.call( this, this.$ );
+
+ // Properties
+ this.toolbar = toolbar;
+
+ // Events
+ this.$.on( { 'mousedown': false } );
+
+ // Initialization
+ this.$.addClass( 've-ui-toolGroup' );
+};
+
+/* Inheritance */
+
+ve.inheritClass( ve.ui.ToolGroup, ve.ui.Widget );
+
+ve.mixinClass( ve.ui.ToolGroup, ve.ui.GroupElement );
diff --git a/modules/ve/ui/ve.ui.Toolbar.js b/modules/ve/ui/ve.ui.Toolbar.js
index f2af99a..9b7be98 100644
--- a/modules/ve/ui/ve.ui.Toolbar.js
+++ b/modules/ve/ui/ve.ui.Toolbar.js
@@ -62,32 +62,27 @@
/**
* Initialize all tools and groups.
+ *
+ * @method
+ * @param {Object[]} config List of tool group configurations
*/
-ve.ui.Toolbar.prototype.addTools = function ( tools ) {
- var i, j, group, $group, tool;
+ve.ui.Toolbar.prototype.setup = function ( config ) {
+ var i, j, group, tools;
- for ( i = 0; i < tools.length; i++ ) {
- group = tools[i];
- // Create group
- $group = this.$$( '<div class="ve-ui-toolbar-group"></div>' )
- .on( 'mousedown', false );
- if ( group.label ) {
- $group.append(
- this.$$( '<div
class="ve-ui-toolbar-label"></div>' ).html( group.label )
- );
- }
+ for ( i = 0; i < config.length; i++ ) {
+ tools = config[i].items;
+ group = new ve.ui.ToolGroup( this, { '$$': this.$$ } );
+
// Add tools
- for ( j = 0; j < group.items.length; j++ ) {
- tool = false;
+ for ( j = 0; j < tools.length; j++ ) {
try {
- tool = ve.ui.toolFactory.create(
group.items[j], this );
+ tools[j] = ve.ui.toolFactory.create( tools[j],
this );
} catch( e ) {}
- if ( tool ) {
- $group.append( tool.$ );
- }
}
+ group.addItems( tools );
+
// Append group
- this.$tools.append( $group );
+ this.$tools.append( group.$ );
}
};
diff --git a/modules/ve/ui/widgets/ve.ui.SurfaceWidget.js
b/modules/ve/ui/widgets/ve.ui.SurfaceWidget.js
index f947491..9b85224 100644
--- a/modules/ve/ui/widgets/ve.ui.SurfaceWidget.js
+++ b/modules/ve/ui/widgets/ve.ui.SurfaceWidget.js
@@ -36,7 +36,7 @@
.addClass( 've-ui-surfaceWidget' )
.append( this.toolbar.$, this.surface.$ );
if ( config.tools ) {
- this.toolbar.addTools( config.tools );
+ this.toolbar.setup( config.tools );
}
if ( config.commands ) {
this.surface.addCommands( config.commands );
--
To view, visit https://gerrit.wikimedia.org/r/77839
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ic3a643634a80a8ac7d6f6f47f031d001c7efaee7
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
