Mooeypoo has uploaded a new change for review.
https://gerrit.wikimedia.org/r/110234
Change subject: [WIP] Image type inline to block and vise versa
......................................................................
[WIP] Image type inline to block and vise versa
Adding an option to change to or from inline images in the edit media
dialog.
Change-Id: Idaafcb56b4c4edf1473446e7aaff6221a3c68254
---
M VisualEditor.php
M modules/ve-mw/ce/nodes/ve.ce.MWInlineImageNode.js
M modules/ve-mw/i18n/en.json
M modules/ve-mw/i18n/qqq.json
M modules/ve-mw/ui/dialogs/ve.ui.MWMediaEditDialog.js
5 files changed, 140 insertions(+), 55 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/VisualEditor
refs/changes/34/110234/1
diff --git a/VisualEditor.php b/VisualEditor.php
index f12395c..cf1da03 100644
--- a/VisualEditor.php
+++ b/VisualEditor.php
@@ -651,11 +651,6 @@
'visualeditor-dialog-media-page-advanced',
'visualeditor-dialog-media-page-general',
'visualeditor-dialog-media-position-center',
- 'visualeditor-dialog-media-type-border',
- 'visualeditor-dialog-media-type-frame',
- 'visualeditor-dialog-media-type-frameless',
- 'visualeditor-dialog-media-type-section',
- 'visualeditor-dialog-media-type-thumb',
'visualeditor-dialog-media-position-left',
'visualeditor-dialog-media-position-none',
'visualeditor-dialog-media-position-right',
@@ -663,6 +658,12 @@
'visualeditor-dialog-media-size-originalsize-error',
'visualeditor-dialog-media-size-section',
'visualeditor-dialog-media-title',
+ 'visualeditor-dialog-media-type-border',
+ 'visualeditor-dialog-media-type-frame',
+ 'visualeditor-dialog-media-type-frameless',
+ 'visualeditor-dialog-media-type-inline',
+ 'visualeditor-dialog-media-type-section',
+ 'visualeditor-dialog-media-type-thumb',
'visualeditor-dialog-meta-categories-category',
'visualeditor-dialog-meta-categories-data-label',
'visualeditor-dialog-meta-categories-defaultsort-label',
diff --git a/modules/ve-mw/ce/nodes/ve.ce.MWInlineImageNode.js
b/modules/ve-mw/ce/nodes/ve.ce.MWInlineImageNode.js
index 5d39f6f..2c80423 100644
--- a/modules/ve-mw/ce/nodes/ve.ce.MWInlineImageNode.js
+++ b/modules/ve-mw/ce/nodes/ve.ce.MWInlineImageNode.js
@@ -17,8 +17,6 @@
* @param {Object} [config] Configuration options
*/
ve.ce.MWInlineImageNode = function VeCeMWInlineImageNode( model, config ) {
- var valign;
-
// Parent constructor
ve.ce.LeafNode.call( this, model, config );
@@ -33,6 +31,7 @@
this.$image = this.$( '<img>' ).appendTo( this.$element );
}
+
// Mixin constructors
ve.ce.MWImageNode.call( this, this.$element, this.$image );
@@ -41,20 +40,13 @@
.attr( 'width', this.model.getAttribute( 'width' ) )
.attr( 'height', this.model.getAttribute( 'height' ) );
- if ( this.model.getAttribute( 'border' ) ) {
- this.$image.addClass( 'thumbborder' );
- }
+// if ( this.model.getAttribute( 'border' ) ) {
+// this.$image.addClass( 'thumbborder' );
+// }
+ this.$image.toggleClass( 'thumbborder', !!this.model.getAttribute(
'border' ) );
- valign = this.model.getAttribute( 'valign' );
- if ( valign !== 'default' ) {
- this.$image.css( 'vertical-align', valign );
- }
-
- if ( this.$element.css( 'direction' ) === 'rtl' ) {
- this.showHandles( ['sw'] );
- } else {
- this.showHandles( ['se'] );
- }
+// valign = this.model.getAttribute( 'valign' );
+ this.changeAlignment( this.model.getAttribute( 'valign' ) );
// DOM changes
this.$element.addClass( 've-ce-mwInlineImageNode' );
@@ -79,6 +71,25 @@
/* Methods */
/**
+ * Update the valign property and css classes
+ *
+ * @param {String} valign Vertical alignment value
+ */
+ve.ce.MWInlineImageNode.prototype.changeAlignment = function ( valign ) {
+ this.valign = valign;
+
+ if ( valign !== 'default' ) {
+ this.$image.css( 'vertical-align', valign );
+ }
+
+ if ( this.$element.css( 'direction' ) === 'rtl' ) {
+ this.showHandles( ['sw'] );
+ } else {
+ this.showHandles( ['se'] );
+ }
+};
+
+/**
* Update the rendering of the 'src', 'width' and 'height' attributes when
they change in the model.
*
* @method
@@ -94,12 +105,29 @@
if ( from !== to ) {
switch ( key ) {
// TODO: 'align', 'src', 'valign', 'border'
+ case 'src':
+ this.$image.attr( 'src',
this.getResolvedAttribute( 'src' ) );
+ break;
+ case 'border':
+ // This should pass a boolean
+ this.$image.toggleClass( 'thumbborder', !!to );
+ break;
+ case 'valign':
+ this.changeAlignment( to );
+ break;
case 'width':
this.$image.css( 'width', to );
break;
case 'height':
this.$image.css( 'height', to );
break;
+ case 'alt':
+ if ( !to ) {
+ this.$image.removeAttr( key );
+ } else {
+ this.$image.attr( key, to );
+ }
+ break;
}
}
};
diff --git a/modules/ve-mw/i18n/en.json b/modules/ve-mw/i18n/en.json
index be476ef..5efbc20 100644
--- a/modules/ve-mw/i18n/en.json
+++ b/modules/ve-mw/i18n/en.json
@@ -44,16 +44,17 @@
"visualeditor-dialog-media-page-advanced": "Advanced settings",
"visualeditor-dialog-media-page-general": "General settings",
"visualeditor-dialog-media-position-center": "Center",
- "visualeditor-dialog-media-type-border": "Border",
- "visualeditor-dialog-media-type-frame": "Frame",
- "visualeditor-dialog-media-type-frameless": "Frameless",
- "visualeditor-dialog-media-type-section": "Image type",
- "visualeditor-dialog-media-type-thumb": "Thumbnail",
"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-type-border": "Border",
+ "visualeditor-dialog-media-type-frame": "Frame",
+ "visualeditor-dialog-media-type-frameless": "Frameless",
+ "visualeditor-dialog-media-type-inline": "Inline",
+ "visualeditor-dialog-media-type-section": "Image type",
+ "visualeditor-dialog-media-type-thumb": "Thumbnail",
"visualeditor-dialog-media-size-section": "Image size",
"visualeditor-dialog-media-title": "Media settings",
"visualeditor-dialog-meta-categories-category": "Category",
diff --git a/modules/ve-mw/i18n/qqq.json b/modules/ve-mw/i18n/qqq.json
index 29fbf5e..9230206 100644
--- a/modules/ve-mw/i18n/qqq.json
+++ b/modules/ve-mw/i18n/qqq.json
@@ -54,13 +54,14 @@
"visualeditor-dialog-media-position-right": "Label for the image position
option for aligning to 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",
"visualeditor-dialog-media-type-border": "Label for the image type option
for bordered image.",
"visualeditor-dialog-media-type-frame": "Label for the image type option
for framed image.",
"visualeditor-dialog-media-type-frameless": "Label for the image type
option for frameless.",
+ "visualeditor-dialog-media-type-inline": "Label for the image type option
for inline image.",
"visualeditor-dialog-media-type-section": "Label for the image type
sub-section.",
"visualeditor-dialog-media-type-thumb": "Label for the image type option
for thumbnail.",
- "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",
"visualeditor-dialog-meta-categories-category": "Title of popup for
editing category options.\n{{Identical|Category}}",
"visualeditor-dialog-meta-categories-data-label": "Label for the
categories sub-section.\n{{Identical|Category}}",
"visualeditor-dialog-meta-categories-defaultsort-label": "Label for field
setting the category default sort",
diff --git a/modules/ve-mw/ui/dialogs/ve.ui.MWMediaEditDialog.js
b/modules/ve-mw/ui/dialogs/ve.ui.MWMediaEditDialog.js
index 565eb61..faaad88 100644
--- a/modules/ve-mw/ui/dialogs/ve.ui.MWMediaEditDialog.js
+++ b/modules/ve-mw/ui/dialogs/ve.ui.MWMediaEditDialog.js
@@ -172,7 +172,9 @@
'$': this.$
} );
this.typeInput.addItems( [
- // TODO: Inline images require a bit of further work, will be
coming soon
+ new OO.ui.OptionWidget( 'inline', {
+ 'label': ve.msg(
'visualeditor-dialog-media-type-inline' )
+ } ),
new OO.ui.OptionWidget( 'thumb', {
'label': ve.msg( 'visualeditor-dialog-media-type-thumb'
)
} ),
@@ -315,36 +317,18 @@
* @inheritdoc
*/
ve.ui.MWMediaEditDialog.prototype.teardown = function ( data ) {
- var newDoc, doc, originalAlt, attr, attrs = {},
+ var newDoc, doc, originalAlt, originalType,
+ attr, attrs = {}, originalNodeRange, newNode,
surfaceModel = this.surface.getModel();
// Data initialization
data = data || {};
if ( data.action === 'apply' ) {
- newDoc =
this.captionSurface.getSurface().getModel().getDocument();
doc = surfaceModel.getDocument();
- if ( !this.captionNode ) {
- // Insert a new caption at the beginning of the image
node
- surfaceModel.getFragment()
- .adjustRange( 1 )
- .collapseRangeToStart()
- .insertContent( [ { 'type': 'mwImageCaption' },
{ 'type': '/mwImageCaption' } ] );
- this.captionNode = this.mediaNode.getCaptionNode();
- }
- // Replace the contents of the caption
- surfaceModel.change(
- ve.dm.Transaction.newFromRemoval( doc,
this.captionNode.getRange(), true )
- );
- surfaceModel.change(
- ve.dm.Transaction.newFromDocumentInsertion( doc,
this.captionNode.getRange().start, newDoc )
- );
- // Change attributes only if the values are valid
- if ( this.sizeWidget.isCurrentDimensionsValid() ) {
- attrs = this.sizeWidget.getCurrentDimensions();
- }
-
+ // Alt works on both inline and block images, so we check
+ // for changes on it first
attr = $.trim( this.altTextInput.getValue() );
originalAlt = this.mediaNode.getAttribute( 'alt' );
// Allow the user to submit an empty alternate text but
@@ -362,19 +346,89 @@
attrs.alt = attr;
}
+ // Check if the type changed from inline to block or
+ // vise vera
+ attr = this.typeInput.getSelectedItem();
+ originalType = this.mediaNode.getAttribute( 'type' );
+ if ( attr !== 'inline' ) {
+ // Update type for block image
+ attrs.type = attr.getData();
+ }
+
+ if (
+ attrs.type !== originalType &&
+ ( attrs.type === 'inline' || originalType === 'inline' )
+ ) {
+ originalNodeRange = this.mediaNode.getOuterRange();
+ // Add a new image node instead
+ if ( attr === 'inline' ) {
+ // Change to inline
+ newNode = [
+ {
+ 'type': 'mwInlineImage',
+ 'attributes': attrs
+ },
+ { 'type': '/mwInlineImage' }
+ ];
+ } else if ( originalType === 'inline' ) {
+ // Change to block
+ newNode = [
+ {
+ 'type': 'mwBlockImage',
+ 'attributes': attrs
+ },
+ { 'type': '/mwBlockImage' }
+ ];
+ }
+ // Insert the new node
+ surfaceModel.change(
+ ve.dm.Transaction.newFromInsertion( doc,
originalNodeRange.start, newNode )
+ );
+ // Remove the current node
+ surfaceModel.change(
+ ve.dm.Transaction.newFromRemoval( doc,
this.mediaNode.getOuterRange(), true )
+ );
+ }
+
+ // Change attributes only if the values are valid
+ if ( this.sizeWidget.isCurrentDimensionsValid() ) {
+ attr = this.sizeWidget.getCurrentDimensions();
+ if ( attr.width ) {
+ attrs.width = attr.width;
+ }
+ if ( attr.height ) {
+ attrs.height = attr.height;
+ }
+ }
+
+
attr = this.positionInput.getSelectedItem();
if ( attr ) {
attrs.align = attr.getData();
}
- attr = this.typeInput.getSelectedItem();
- if ( attr ) {
- attrs.type = attr.getData();
- }
-
+ // Change attributes
surfaceModel.change(
ve.dm.Transaction.newFromAttributeChanges( doc,
this.mediaNode.getOffset(), attrs )
);
+
+ // Change caption
+ newDoc =
this.captionSurface.getSurface().getModel().getDocument();
+ if ( !this.captionNode ) {
+ // Insert a new caption at the beginning of the image
node
+ surfaceModel.getFragment()
+ .adjustRange( 1 )
+ .collapseRangeToStart()
+ .insertContent( [ { 'type': 'mwImageCaption' },
{ 'type': '/mwImageCaption' } ] );
+ this.captionNode = this.mediaNode.getCaptionNode();
+ }
+ // Replace the contents of the caption
+ surfaceModel.change(
+ ve.dm.Transaction.newFromRemoval( doc,
this.captionNode.getRange(), true )
+ );
+ surfaceModel.change(
+ ve.dm.Transaction.newFromDocumentInsertion( doc,
this.captionNode.getRange().start, newDoc )
+ );
}
// Cleanup
--
To view, visit https://gerrit.wikimedia.org/r/110234
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Idaafcb56b4c4edf1473446e7aaff6221a3c68254
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
