Robmoen has uploaded a new change for review.
https://gerrit.wikimedia.org/r/75147
Change subject: WIP: media location editing
......................................................................
WIP: media location editing
Needs location icons
Dependant on media-settings base
Change-Id: I83dff90586b9536aba10ffdf0ec0d6165d0f9849
---
M VisualEditor.php
M modules/ve-mw/ui/dialogs/ve.ui.MWMediaEditDialog.js
M modules/ve/ui/styles/ve.ui.Widget.css
A modules/ve/ui/widgets/ve.ui.IconOptionWidget.js
A modules/ve/ui/widgets/ve.ui.MediaLocationWidget.js
5 files changed, 135 insertions(+), 1 deletion(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/VisualEditor
refs/changes/47/75147/1
diff --git a/VisualEditor.php b/VisualEditor.php
index 17166d0..5851c16 100644
--- a/VisualEditor.php
+++ b/VisualEditor.php
@@ -486,6 +486,8 @@
've/ui/widgets/ve.ui.TextInputMenuWidget.js',
've/ui/widgets/ve.ui.NumberInputWidget.js',
've/ui/widgets/ve.ui.MediaSizeWidget.js',
+ 've/ui/widgets/ve.ui.MediaLocationWidget.js',
+ 've/ui/widgets/ve.ui.IconOptionWidget.js',
've/ui/widgets/ve.ui.LinkTargetInputWidget.js',
've-mw/ui/widgets/ve.ui.MWLinkTargetInputWidget.js',
've-mw/ui/widgets/ve.ui.MWCategoryInputWidget.js',
diff --git a/modules/ve-mw/ui/dialogs/ve.ui.MWMediaEditDialog.js
b/modules/ve-mw/ui/dialogs/ve.ui.MWMediaEditDialog.js
index 7697aaf..139f3e8 100644
--- a/modules/ve-mw/ui/dialogs/ve.ui.MWMediaEditDialog.js
+++ b/modules/ve-mw/ui/dialogs/ve.ui.MWMediaEditDialog.js
@@ -59,11 +59,21 @@
this.mediaSizeWidget = new ve.ui.MediaSizeWidget( { '$$': this.frame.$$
} );
this.sizeFieldset.$.append( this.mediaSizeWidget.$ );
+ // Media location
+ this.locationFieldset = new ve.ui.FieldsetLayout( {
+ '$$': this.frame.$$,
+ 'label': 'Location',
+ 'icon': 'parameter'
+ } );
+ this.locationWidget = new ve.ui.MediaLocationWidget( { '$$':
this.frame.$$ } );
+ this.locationFieldset.$.append( this.locationWidget.$ );
+
this.contentFieldset = new ve.ui.FieldsetLayout( {
'$$': this.frame.$$,
'label': ve.msg( 'visualeditor-dialog-media-content-section' ),
'icon': 'parameter'
} );
+
this.applyButton = new ve.ui.ButtonWidget( {
'$$': this.$$, 'label': ve.msg(
'visualeditor-dialog-action-apply' ), 'flags': ['primary']
} );
@@ -73,7 +83,7 @@
// Initialization
this.$body.addClass( 've-ui-mwMediaEditDialog-body' );
- this.$body.append( this.sizeFieldset.$, this.contentFieldset.$ );
+ this.$body.append( this.sizeFieldset.$, this.locationFieldset.$,
this.contentFieldset.$ );
this.$foot.append( this.applyButton.$ );
};
@@ -98,6 +108,9 @@
'height': model.getAttribute( 'height' ),
'width': model.getAttribute( 'width' )
} );
+
+ this.locationAlignment = model.getAttribute( 'align' );
+ this.locationWidget.setAlignment( this.locationAlignment );
// Init caption
if ( this.captionNode && this.captionNode.getLength() > 0 ) {
@@ -143,6 +156,16 @@
// Is this needed?
this.surface.getView().getFocusedNode().emit( 'resize'
);
}
+
+ // Location
+ if ( this.locationWidget.getAlignment() !==
this.locationAlignment ) {
+ // Change location alignment.
+ surfaceModel.change(
+ ve.dm.Transaction.newFromAttributeChanges(
+ doc, this.node.getModel().getOffset(),
{ 'align': this.locationWidget.getAlignment() } ), surfaceModel.getSelection()
+ );
+ }
+
// Get caption data
data = this.captionSurface.getModel().getDocument().getData();
if ( this.captionNode ) {
diff --git a/modules/ve/ui/styles/ve.ui.Widget.css
b/modules/ve/ui/styles/ve.ui.Widget.css
index 9b33f35..ccefaf6 100644
--- a/modules/ve/ui/styles/ve.ui.Widget.css
+++ b/modules/ve/ui/styles/ve.ui.Widget.css
@@ -489,3 +489,18 @@
margin-left: 0.5em;
margin-right: 1em;
}
+
+.ve-ui-iconOptionWidget {
+ margin: 0 1em;
+ border-radius: 0.5em;
+ display: inline-block;
+ padding: 0.5em 2em 0.5em 2em;
+ text-align: center;
+}
+
+.ve-ui-iconOptionWidget .ve-ui-icon {
+ height: 50px;
+ width: 50px;
+ background-position: center center;
+ background-size: 50px 50px;
+}
diff --git a/modules/ve/ui/widgets/ve.ui.IconOptionWidget.js
b/modules/ve/ui/widgets/ve.ui.IconOptionWidget.js
new file mode 100644
index 0000000..cf3c1fd
--- /dev/null
+++ b/modules/ve/ui/widgets/ve.ui.IconOptionWidget.js
@@ -0,0 +1,37 @@
+/*!
+ * VisualEditor UserInterface IconOptionWidget class.
+ *
+ * @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+/*global mw */
+
+/**
+ * Creates an ve.ui.IconOptionWidget object.
+ *
+ * @class
+ * @extends ve.ui.OptionWidget
+ *
+ * @constructor
+ * @param {Mixed} data Item data
+ * @param {Object} [config] Config options
+ * @cfg {number} [size] Media thumbnail size
+ */
+ve.ui.IconOptionWidget = function VeUiMWMediaResultWidget( data, config ) {
+ // Configuration intialization
+ config = config || {};
+
+ // Parent constructor
+ ve.ui.OptionWidget.call( this, data, config );
+
+ // Properties
+ this.$icon = this.$$( '<div>' ).addClass( 've-ui-icon ve-ui-icon-' +
data );
+
+ // Initialization
+ this.$.addClass( 've-ui-iconOptionWidget' ).prepend( this.$icon );
+};
+
+/* Inheritance */
+
+ve.inheritClass( ve.ui.IconOptionWidget, ve.ui.OptionWidget );
diff --git a/modules/ve/ui/widgets/ve.ui.MediaLocationWidget.js
b/modules/ve/ui/widgets/ve.ui.MediaLocationWidget.js
new file mode 100644
index 0000000..19997dd
--- /dev/null
+++ b/modules/ve/ui/widgets/ve.ui.MediaLocationWidget.js
@@ -0,0 +1,57 @@
+ve.ui.MediaLocationWidget = function VeUiMediaLocationWidget( config ) {
+ config = ve.extendObject( {}, config );
+ // Parent constructor
+ ve.ui.Widget.call( this, config );
+
+ // Props
+ this.options = new ve.ui.SelectWidget( { '$$': this.$$ } );
+ this.options.addItems( [
+ new ve.ui.IconOptionWidget( 'left', { '$$': this.$$, 'label':
'Left' } ),
+ new ve.ui.IconOptionWidget( 'center', { '$$': this.$$, 'label':
'Center' } ),
+ new ve.ui.IconOptionWidget( 'right', { '$$': this.$$, 'label':
'Right' } ),
+ new ve.ui.IconOptionWidget( 'none', { '$$': this.$$, 'label':
'None' } )
+ ] );
+
+ this.options.connect( this, {
+ 'highlight': 'onOptionsHighlight',
+ 'select': 'onOptionsSelect'
+ } );
+
+ this.$.append( this.options.$ );
+};
+
+/* Inheritance */
+
+ve.inheritClass( ve.ui.MediaLocationWidget, ve.ui.Widget );
+
+ve.ui.MediaLocationWidget.prototype.setAlignment = function ( alignment ) {
+ this.options.getItemFromData( alignment ).setSelected( true );
+ this.alignment = alignment;
+};
+
+ve.ui.MediaLocationWidget.prototype.getAlignment = function () {
+ return this.alignment;
+};
+
+/**
+ * Handle select widget highlight events.
+ *
+ * @method
+ * @param {ve.ui.OptionWidget} item Highlighted item
+ * @emits highlight
+ */
+ve.ui.MediaLocationWidget.prototype.onOptionsHighlight = function ( item ) {
+ this.emit( 'highlight', item ? item.getData() : null );
+};
+
+/**
+ * Handle select widget select events.
+ *
+ * @method
+ * @param {ve.ui.OptionWidget} item Selected item
+ * @emits select
+ */
+ve.ui.MediaLocationWidget.prototype.onOptionsSelect = function ( item ) {
+ this.emit( 'select', item ? item.getData() : null );
+ this.setAlignment( item.getData() );
+};
--
To view, visit https://gerrit.wikimedia.org/r/75147
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I83dff90586b9536aba10ffdf0ec0d6165d0f9849
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Robmoen <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
