From b52299434458f6e316c397d95c6cea26340edf0b Mon Sep 17 00:00:00 2001 From: Moriel Schottlender Date: Sat, 28 Dec 2013 22:49:06 -0500 Subject: [PATCH] Adding position setting to media edit dialog This adds an image position/alignment to the media edit dialog. Bug: 51293 Change-Id: I15fbd1ed0998a9093fa039b76624395d661af05b --- VisualEditor.php | 5 +++ modules/ve-mw/i18n/en.json | 5 +++ modules/ve-mw/i18n/qqq.json | 5 +++ .../ui/dialogs/ve.ui.MWMediaEditDialog.js | 38 ++++++++++++++++++- 4 files changed, 51 insertions(+), 2 deletions(-) diff --git a/VisualEditor.php b/VisualEditor.php index e5851d9223..df8e6aed37 100644 --- a/VisualEditor.php +++ b/VisualEditor.php @@ -650,6 +650,11 @@ $wgResourceModules += array( 'visualeditor-dialog-media-insert-title', 'visualeditor-dialog-media-page-advanced', 'visualeditor-dialog-media-page-general', + 'visualeditor-dialog-media-position-center', + 'visualeditor-dialog-media-position-left', + 'visualeditor-dialog-media-position-none', + 'visualeditor-dialog-media-position-right', + 'visualeditor-dialog-media-position-section', 'visualeditor-dialog-media-size-originalsize-error', 'visualeditor-dialog-media-size-section', 'visualeditor-dialog-media-title', diff --git a/modules/ve-mw/i18n/en.json b/modules/ve-mw/i18n/en.json index 4986c61582..598394f382 100644 --- a/modules/ve-mw/i18n/en.json +++ b/modules/ve-mw/i18n/en.json @@ -43,6 +43,11 @@ "visualeditor-dialog-media-insert-title": "Insert media", "visualeditor-dialog-media-page-advanced": "Advanced settings", "visualeditor-dialog-media-page-general": "General settings", + "visualeditor-dialog-media-position-center": "Center", + "visualeditor-dialog-media-position-left": "Left", + "visualeditor-dialog-media-position-none": "None", + "visualeditor-dialog-media-position-right": "Right", + "visualeditor-dialog-media-position-section": "Position", "visualeditor-dialog-media-size-originalsize-error": "Could not retrieve original file size.", "visualeditor-dialog-media-size-section": "Image size", "visualeditor-dialog-media-title": "Media settings", diff --git a/modules/ve-mw/i18n/qqq.json b/modules/ve-mw/i18n/qqq.json index 521a77db1a..75804de422 100644 --- a/modules/ve-mw/i18n/qqq.json +++ b/modules/ve-mw/i18n/qqq.json @@ -48,6 +48,11 @@ "visualeditor-dialog-media-insert-title": "Media insert dialog title text.\n{{Identical|Insert media}}", "visualeditor-dialog-media-page-advanced": "Label for the advanced settings page in the media edit dialog", "visualeditor-dialog-media-page-general": "Label for the general settings page in the media edit dialog.\n{{Identical|General settings}}", + "visualeditor-dialog-media-position-center": "Label for the image position option for aligning to the center.", + "visualeditor-dialog-media-position-left": "Label for the image position option for aligning to the left.", + "visualeditor-dialog-media-position-none": "Label for the image position option for no alignment.", + "visualeditor-dialog-media-position-right": "Label for the image position option for aligning to the right.", + "visualeditor-dialog-media-position-section": "Label for the image position sub-section.", "visualeditor-dialog-media-size-originalsize-error": "Error message for failing to retrieve original file size from the API.", "visualeditor-dialog-media-size-section": "Label for the image size sub-section.\n{{Identical|Image size}}", "visualeditor-dialog-media-title": "Title for the editing dialog to set how a media item is displayed on the page", diff --git a/modules/ve-mw/ui/dialogs/ve.ui.MWMediaEditDialog.js b/modules/ve-mw/ui/dialogs/ve.ui.MWMediaEditDialog.js index d12a73de46..1584ae0411 100644 --- a/modules/ve-mw/ui/dialogs/ve.ui.MWMediaEditDialog.js +++ b/modules/ve-mw/ui/dialogs/ve.ui.MWMediaEditDialog.js @@ -118,7 +118,7 @@ ve.ui.MWMediaEditDialog.static.pasteRules = ve.extendObject( * @inheritdoc */ ve.ui.MWMediaEditDialog.prototype.initialize = function () { - var altTextFieldset; + var altTextFieldset, positionFieldset; // Parent method ve.ui.MWDialog.prototype.initialize.call( this ); @@ -168,6 +168,24 @@ ve.ui.MWMediaEditDialog.prototype.initialize = function () { altTextFieldset.$element .append( this.altTextInput.$element ); + // Position + positionFieldset = new OO.ui.FieldsetLayout( { + '$': this.$, + 'label': ve.msg( 'visualeditor-dialog-media-position-section' ), + 'icon': 'parameter' + } ); + this.positionInput = new OO.ui.SelectWidget( { + '$': this.$ + } ); + this.positionInput.addItems( [ + new OO.ui.OptionWidget( 'left', { 'label': ve.msg( 'visualeditor-dialog-media-position-left' ) } ), + new OO.ui.OptionWidget( 'right', { 'label': ve.msg( 'visualeditor-dialog-media-position-right' ) } ), + new OO.ui.OptionWidget( 'center', { 'label': ve.msg( 'visualeditor-dialog-media-position-center' ) } ), + new OO.ui.OptionWidget( 'none', { 'label': ve.msg( 'visualeditor-dialog-media-position-none' ) } ) + ], 0 ); + // Build position fieldset + positionFieldset.$element.append( this.positionInput.$element ); + // Size this.sizeFieldset = new OO.ui.FieldsetLayout( { '$': this.$, @@ -204,7 +222,11 @@ ve.ui.MWMediaEditDialog.prototype.initialize = function () { this.captionFieldset.$element, altTextFieldset.$element ] ); - this.advancedSettingsPage.$element.append( this.sizeFieldset.$element ); + + this.advancedSettingsPage.$element.append( [ + positionFieldset.$element, + this.sizeFieldset.$element + ] ); this.$body.append( this.bookletLayout.$element ); this.$foot.append( this.applyButton.$element ); @@ -265,6 +287,13 @@ ve.ui.MWMediaEditDialog.prototype.setup = function ( data ) { // Set initial alt text this.altTextInput.setValue( this.mediaNode.getAttribute( 'alt' ) || '' ); + // Set initial position + if ( this.mediaNode.getAttribute( 'align' ) !== undefined ) { + this.positionInput.selectItem( + this.positionInput.getItemFromData( this.mediaNode.getAttribute( 'align' ) ) + ); + } + // Initialization this.captionFieldset.$element.append( this.captionSurface.$element ); this.captionSurface.initialize(); @@ -321,6 +350,11 @@ ve.ui.MWMediaEditDialog.prototype.teardown = function ( data ) { attrs.alt = attr; } + attr = this.positionInput.getSelectedItem(); + if ( attr ) { + attrs.align = attr.getData(); + } + surfaceModel.change( ve.dm.Transaction.newFromAttributeChanges( doc, this.mediaNode.getOffset(), attrs ) );