Esanders has uploaded a new change for review.
https://gerrit.wikimedia.org/r/82043
Change subject: Use a frame wrapper for all highlights on MWBlockImageNode
......................................................................
Use a frame wrapper for all highlights on MWBlockImageNode
This prevents the highlight for a centred image being full width.
Change-Id: I4d5a46766276e36f5720f330a5a856fe2906cd72
---
M modules/ve-mw/ce/nodes/ve.ce.MWBlockImageNode.js
M modules/ve-mw/ce/styles/ve.ce.Node.css
2 files changed, 28 insertions(+), 8 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/VisualEditor
refs/changes/43/82043/1
diff --git a/modules/ve-mw/ce/nodes/ve.ce.MWBlockImageNode.js
b/modules/ve-mw/ce/nodes/ve.ce.MWBlockImageNode.js
index 8931ab7..0b385e2 100644
--- a/modules/ve-mw/ce/nodes/ve.ce.MWBlockImageNode.js
+++ b/modules/ve-mw/ce/nodes/ve.ce.MWBlockImageNode.js
@@ -25,12 +25,6 @@
// Parent constructor
ve.ce.BranchNode.call( this, model, config );
- // Mixin constructors
- ve.ce.ProtectedNode.call( this );
- ve.ce.FocusableNode.call( this );
- ve.ce.RelocatableNode.call( this );
- ve.ce.MWResizableNode.call( this );
-
type = this.model.getAttribute( 'type' );
if ( this.model.getAttribute( 'align' ) === 'center' ) {
@@ -39,6 +33,8 @@
} else {
this.$thumb = this.$;
}
+
+ this.$.addClass( 've-ce-mwBlockImageNode' );
this.$thumbInner = this.$$( '<div>' )
.addClass( 'thumbinner' )
@@ -54,11 +50,19 @@
.attr( 'height', this.model.getAttribute( 'height' ) )
.appendTo( this.$a );
- if ( type === 'none' || type ==='frameless' ) {
+ this.$inner = this.$$( '<div>' ).addClass(
've-ce-mwBlockImageNode-inner' );
+
+ if ( type === 'none' || type === 'frameless' ) {
this.$thumb.addClass(
this.getCssClass( 'none', this.model.getAttribute(
'align' ) )
);
this.$a.appendTo( this.$thumb );
+
+ // For centered images, this.$thumb is full width, so wrap
+ // this.$image in another div and use that for selection
+ this.$inner
+ .append( this.$image )
+ .appendTo( this.$a );
} else {
// Type "frame", "thumb" and the default
this.$image.addClass( 'thumbimage' );
@@ -66,9 +70,19 @@
.addClass( 'thumb' );
this.$a.appendTo( this.$thumbInner );
this.$thumbInner.appendTo( this.$thumb );
+
+ // For centered images, this.$thumb is full width, so wrap
+ // this.$thumbInner in another div and use that for selection
+ this.$inner
+ .append( this.$thumbInner )
+ .appendTo( this.$thumb );
}
- this.$resizable = this.$image;
+ // Mixin constructors
+ ve.ce.ProtectedNode.call( this, this.$inner );
+ ve.ce.FocusableNode.call( this, this.$inner );
+ ve.ce.RelocatableNode.call( this, this.$inner );
+ ve.ce.MWResizableNode.call( this, this.$image );
// I smell a caption!
if ( type !== 'none' && type !== 'frameless' &&
this.model.children.length === 1 ) {
diff --git a/modules/ve-mw/ce/styles/ve.ce.Node.css
b/modules/ve-mw/ce/styles/ve.ce.Node.css
index 48d35b0..4c6e8cf 100644
--- a/modules/ve-mw/ce/styles/ve.ce.Node.css
+++ b/modules/ve-mw/ce/styles/ve.ce.Node.css
@@ -45,6 +45,12 @@
display: inline-block;
}
+/* ve.ce.MWBlockImageNode */
+
+.ve-ce-mwBlockImageNode-inner {
+ display: inline-block;
+}
+
/* ve.ce.MWAlienExtensionNode */
.ve-ce-mwAlienExtensionNode {
--
To view, visit https://gerrit.wikimedia.org/r/82043
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I4d5a46766276e36f5720f330a5a856fe2906cd72
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Esanders <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
