Mooeypoo has uploaded a new change for review.
https://gerrit.wikimedia.org/r/92767
Change subject: [WIP] Adding image attributes to media dialog
......................................................................
[WIP] Adding image attributes to media dialog
Adding image attributes to the media dialog. Also, this commit transforms the
media dialog into a OO.ui.PagedOutlineLayout() for organization.
Change-Id: I49a30bf16f51d07d72343a0b5dd2263a94c6831b
---
M VisualEditor.i18n.php
M VisualEditor.php
M modules/ve-mw/ce/nodes/ve.ce.MWBlockImageNode.js
M modules/ve-mw/dm/nodes/ve.dm.MWBlockImageNode.js
M modules/ve-mw/ui/dialogs/ve.ui.MWMediaEditDialog.js
5 files changed, 118 insertions(+), 14 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/VisualEditor
refs/changes/67/92767/1
diff --git a/VisualEditor.i18n.php b/VisualEditor.i18n.php
index 14dc896..fbdac67 100644
--- a/VisualEditor.i18n.php
+++ b/VisualEditor.i18n.php
@@ -63,9 +63,13 @@
'visualeditor-dialog-beta-welcome-action-continue' => 'Continue',
'visualeditor-dialog-beta-welcome-content' => 'This is our new, easier
way to edit. It\'s still in beta, which means you might find parts of the page
you can\'t edit, or encounter issues that need to be fixed. We encourage you to
review your changes, and we welcome reports about any issues you might
encounter in using VisualEditor (click the \'{{int:visualeditor-beta-label}}\'
button to submit feedback). You can keep using the wikitext editor by clicking
the "$1" tab instead – unsaved changes will be lost.',
'visualeditor-dialog-beta-welcome-title' => '{{GENDER:$1|Welcome}} to
VisualEditor',
- 'visualeditor-dialog-media-content-section' => 'Caption',
+ 'visualeditor-dialog-media-alttext-label' => 'Alternate text',
+ 'visualeditor-dialog-media-attributes-section' => 'Attributes',
+ 'visualeditor-dialog-media-caption-section' => 'Caption',
+ 'visualeditor-dialog-media-caption-label' => 'Caption',
'visualeditor-dialog-media-insert-button' => 'Insert media',
'visualeditor-dialog-media-insert-title' => 'Insert media',
+ 'visualeditor-dialog-media-position-label' => 'Position',
'visualeditor-dialog-media-title' => 'Media settings',
'visualeditor-dialog-meta-categories-category' => 'Category',
'visualeditor-dialog-meta-categories-data-label' => 'Categories',
@@ -368,12 +372,16 @@
See also:
* {{msg-mw|Visualeditor-beta-label}}',
'visualeditor-dialog-beta-welcome-title' => 'Title of the beta welcome
dialog',
- 'visualeditor-dialog-media-content-section' => 'Label for the image
content sub-section.
+ 'visualeditor-dialog-media-alttext-label' => 'Label of the alternate
text field in the media dialog',
+ 'visualeditor-dialog-media-attributes-section' => 'Label for the image
attributes sub-section.',
+ 'visualeditor-dialog-media-caption-section' => 'Label for the image
caption sub-section.
{{Identical|Caption}}',
+ 'visualeditor-dialog-media-caption-label' => 'Label of the caption
field in the media dialog {{Identical:Caption}}',
'visualeditor-dialog-media-insert-button' => 'Used as label for the
button.
{{Identical|Insert media}}',
'visualeditor-dialog-media-insert-title' => 'Media insert dialog title
text.
{{Identical|Insert media}}',
+ 'visualeditor-dialog-media-position-label' => 'Label of the position
field in the media dialog',
'visualeditor-dialog-media-title' => 'Title for the editing dialog to
set how a media item is displayed on the page',
'visualeditor-dialog-meta-categories-category' => 'Title of popup for
editing category options.
{{Identical|Category}}',
diff --git a/VisualEditor.php b/VisualEditor.php
index ee53c70..f13fdc3 100644
--- a/VisualEditor.php
+++ b/VisualEditor.php
@@ -628,9 +628,13 @@
'visualeditor-dialog-beta-welcome-action-continue',
'visualeditor-dialog-beta-welcome-content',
'visualeditor-dialog-beta-welcome-title',
- 'visualeditor-dialog-media-content-section',
+ 'visualeditor-dialog-media-alttext-label',
+ 'visualeditor-dialog-media-attributes-section',
+ 'visualeditor-dialog-media-caption-section',
+ 'visualeditor-dialog-media-caption-label',
'visualeditor-dialog-media-insert-button',
'visualeditor-dialog-media-insert-title',
+ 'visualeditor-dialog-media-position-label',
'visualeditor-dialog-media-title',
'visualeditor-dialog-meta-categories-category',
'visualeditor-dialog-meta-categories-data-label',
diff --git a/modules/ve-mw/ce/nodes/ve.ce.MWBlockImageNode.js
b/modules/ve-mw/ce/nodes/ve.ce.MWBlockImageNode.js
index 1859003..8e588bb 100644
--- a/modules/ve-mw/ce/nodes/ve.ce.MWBlockImageNode.js
+++ b/modules/ve-mw/ce/nodes/ve.ce.MWBlockImageNode.js
@@ -17,7 +17,7 @@
* @param {Object} [config] Configuration options
*/
ve.ce.MWBlockImageNode = function VeCeMWBlockImageNode( model, config ) {
- var captionModel, captionView, type;
+ var captionModel, captionView, type, attr;
// Parent constructor
ve.ce.BranchNode.call( this, model, config );
@@ -45,6 +45,11 @@
.attr( 'height', this.model.getAttribute( 'height' ) )
.appendTo( this.$a );
+ // add image attributes:
+ attr = this.model.getAttribute( 'alt' );
+ if ( attr ) {
+ this.$image.attr( 'alt', attr );
+ }
this.$inner = this.$$( '<div>' ).addClass(
've-ce-mwBlockImageNode-inner' );
if ( type === 'none' || type === 'frameless' ) {
@@ -218,6 +223,10 @@
case 'height':
this.$image.css( 'height', to );
break;
+ // Other image attributes if they exist:
+ case 'alt':
+ this.$image.attr( key, to );
+ break;
}
}
};
diff --git a/modules/ve-mw/dm/nodes/ve.dm.MWBlockImageNode.js
b/modules/ve-mw/dm/nodes/ve.dm.MWBlockImageNode.js
index bdd6485..7d266a1 100644
--- a/modules/ve-mw/dm/nodes/ve.dm.MWBlockImageNode.js
+++ b/modules/ve-mw/dm/nodes/ve.dm.MWBlockImageNode.js
@@ -73,6 +73,7 @@
type: this.rdfaToType[typeofAttr],
href: $imgWrapper.attr( 'href' ) || '',
src: $img.attr( 'src' ),
+ alt: $img.attr( 'alt' ),
resource: $img.attr( 'resource' ),
originalClasses: classes
},
@@ -190,6 +191,7 @@
imgWrapper.setAttribute( 'href', dataElement.attributes.href );
}
img.setAttribute( 'src', dataElement.attributes.src );
+ img.setAttribute( 'alt', dataElement.attributes.alt );
img.setAttribute( 'width', dataElement.attributes.width );
img.setAttribute( 'height', dataElement.attributes.height );
img.setAttribute( 'resource', dataElement.attributes.resource );
diff --git a/modules/ve-mw/ui/dialogs/ve.ui.MWMediaEditDialog.js
b/modules/ve-mw/ui/dialogs/ve.ui.MWMediaEditDialog.js
index 806c68e..8adf346 100644
--- a/modules/ve-mw/ui/dialogs/ve.ui.MWMediaEditDialog.js
+++ b/modules/ve-mw/ui/dialogs/ve.ui.MWMediaEditDialog.js
@@ -60,35 +60,92 @@
// Parent method
ve.ui.MWDialog.prototype.initialize.call( this );
- // Properties
- this.editPanel = new OO.ui.PanelLayout( {
+ // Pages layout
+ this.pagedOutlineLayout = new OO.ui.PagedOutlineLayout( {
+ '$$': this.frame.$$
+ } );
+
+ // Caption page:
+/* this.editPanel = new OO.ui.PanelLayout( {
'$$': this.frame.$$,
'padded': true,
'scrollable': true
- } );
+ } );*/
this.captionFieldset = new OO.ui.FieldsetLayout( {
'$$': this.frame.$$,
- 'label': ve.msg( 'visualeditor-dialog-media-content-section' ),
+ 'label': ve.msg( 'visualeditor-dialog-media-caption-label' ),
'icon': 'parameter'
} );
+
+ // Attributes page:
+ // Alternate Text:
+ this.altTextFieldset = new OO.ui.FieldsetLayout( {
+ '$$': this.frame.$$,
+ 'label': ve.msg( 'visualeditor-dialog-media-alttext-label' ),
+ 'icon': 'parameter'
+ } );
+ this.inputAltText = new OO.ui.TextInputWidget( {
+ '$$': this.frame.$$,
+ '$overlay': this.$localOverlays,
+ } );
+ this.altTextFieldset.$.append( this.inputAltText.$ );
+
+ // Position
+ // (coming soon)
+ this.positionTextFieldset = new OO.ui.FieldsetLayout( {
+ '$$': this.frame.$$,
+ 'label': ve.msg( 'visualeditor-dialog-media-position-label' ),
+ 'icon': 'parameter'
+ } );
+
+ this.positionSelection = new OO.ui.SelectWidget( {
+ '$$': this.frame.$$
+ } );
+ // TODO: make the labels ve.msg() :
+ this.positionSelection.addItems( [
+ new OO.ui.OptionWidget( 'left', { 'label': 'left' } ),
+ new OO.ui.OptionWidget( 'right', { 'label': 'right' } ),
+ new OO.ui.OptionWidget( 'center', { 'label': 'center' } ),
+ new OO.ui.OptionWidget( 'none', { 'label': 'none' } ),
+ ], 0 );
+ this.positionTextFieldset.$.append( this.positionSelection.$ );
+
+ // Apply button:
this.applyButton = new OO.ui.PushButtonWidget( {
'$$': this.$$,
'label': ve.msg( 'visualeditor-dialog-action-apply' ),
'flags': ['primary']
} );
- // Events
+ // Events:
this.applyButton.connect( this, { 'click': [ 'close', 'apply' ] } );
- // Initialization
- this.editPanel.$.append( this.captionFieldset.$ );
- this.$body.append( this.editPanel.$ );
+ // Build the pages:
+ this.pagedOutlineLayout
+ .addPage( 'caption', {
+ '$content': this.captionFieldset.$,
+ 'label': ve.msg(
'visualeditor-dialog-media-caption-section' ),
+ 'icon': 'tag'
+ } )
+ .addPage( 'attributes', {
+ '$content': [
+ this.altTextFieldset.$,
+ this.positionTextFieldset.$
+ ],
+ 'label': ve.msg(
'visualeditor-dialog-media-attributes-section' ),
+ 'icon': 'language'
+ } );
+
+ // Initialize the dialog:
+ this.$body.append( this.pagedOutlineLayout.$ );
this.$foot.append( this.applyButton.$ );
+
+
};
/** */
ve.ui.MWMediaEditDialog.prototype.onOpen = function () {
- var newDoc, doc = this.surface.getModel().getDocument();
+ var newDoc, attr, doc = this.surface.getModel().getDocument();
// Parent method
ve.ui.MWDialog.prototype.onOpen.call( this );
@@ -116,6 +173,16 @@
}
);
+ // Attributes:
+ attr = this.mediaNode.getAttribute( 'alt' );
+ if ( attr ) {
+ this.inputAltText.setValue( attr );
+ }
+ attr = this.mediaNode.getAttribute( 'align' );
+ if ( attr ) {
+ attr = this.positionSelection.getItemFromData( attr );
+ this.positionSelection.selectItem( attr );
+ }
// Initialization
this.captionFieldset.$.append( this.captionSurface.$ );
this.captionSurface.initialize();
@@ -123,7 +190,9 @@
/** */
ve.ui.MWMediaEditDialog.prototype.onClose = function ( action ) {
- var newDoc, doc, surfaceModel = this.surface.getModel();
+ var newDoc, doc, attr,
+ attrs = {},
+ surfaceModel = this.surface.getModel();
// Parent method
ve.ui.MWDialog.prototype.onClose.call( this );
@@ -143,6 +212,18 @@
surfaceModel.change(
ve.dm.Transaction.newFromDocumentReplace( doc,
this.captionNode, newDoc )
);
+ // Change attributes:
+ attr = this.inputAltText.getValue();
+ if ( attr ) {
+ attrs.alt = attr;
+ }
+ attr = this.positionSelection.getSelectedItem();
+ if ( attr ) {
+ attrs.align = attr.getData();
+ }
+ surfaceModel.change(
+ ve.dm.Transaction.newFromAttributeChanges( doc,
this.mediaNode.getOffset(), attrs )
+ );
}
// Cleanup
--
To view, visit https://gerrit.wikimedia.org/r/92767
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I49a30bf16f51d07d72343a0b5dd2263a94c6831b
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Mooeypoo <mor...@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
