jenkins-bot has submitted this change and it was merged.
Change subject: Mix alignable into block images
......................................................................
Mix alignable into block images
Change-Id: I3c94ad93254265e990cc761a6e106a08055d8886
---
M demos/ve/pages/image.html
M src/ce/nodes/ve.ce.BlockImageNode.js
M src/dm/nodes/ve.dm.BlockImageNode.js
M tests/dm/ve.dm.example.js
4 files changed, 36 insertions(+), 8 deletions(-)
Approvals:
Catrope: Looks good to me, approved
jenkins-bot: Verified
diff --git a/demos/ve/pages/image.html b/demos/ve/pages/image.html
index 3d363b8..6ac8daa 100644
--- a/demos/ve/pages/image.html
+++ b/demos/ve/pages/image.html
@@ -1,8 +1,18 @@
-<figure style="float: right;">
+<figure class="ve-align-right">
<img alt="VisualEditor logo" src="VisualEditor-logo.svg" width="160"
height="56">
<figcaption>Block image with <i>caption</i></figcaption>
</figure>
<p>This is a local image: <img alt="VisualEditor logo"
src="VisualEditor-logo.svg" width="160" height="56">foo</p>
<p>Remote image outside of paragraph:</p>
<img alt="Wikipedia Logo"
src="//upload.wikimedia.org/wikipedia/commons/b/b3/Wikipedia-logo-v2-en.svg"
width="135" height="155">
-<p>Image without dimensions attributes: <img
src="//upload.wikimedia.org/wikipedia/commons/0/03/Dialog-information.svg"
alt="Lightbulb"></p>
\ No newline at end of file
+<p>Image without dimensions attributes: <img
src="//upload.wikimedia.org/wikipedia/commons/0/03/Dialog-information.svg"
alt="Lightbulb"></p>
+<figure class="ve-align-center">
+ <img alt="VisualEditor logo" src="VisualEditor-logo.svg" width="160"
height="56">
+ <figcaption>Center</figcaption>
+</figure>
+<p>Text</p>
+<figure class="ve-align-left">
+ <img alt="VisualEditor logo" src="VisualEditor-logo.svg" width="160"
height="56">
+ <figcaption>Left aligned</figcaption>
+</figure>
+<p>More text</p>
diff --git a/src/ce/nodes/ve.ce.BlockImageNode.js
b/src/ce/nodes/ve.ce.BlockImageNode.js
index bfcc2b8..1a6aa7b 100644
--- a/src/ce/nodes/ve.ce.BlockImageNode.js
+++ b/src/ce/nodes/ve.ce.BlockImageNode.js
@@ -10,6 +10,7 @@
* @class
* @extends ve.ce.BranchNode
* @mixins ve.ce.ImageNode
+ * @mixins ve.ce.AlignableNode
*
* @constructor
* @param {ve.dm.BlockImageNode} model Model to observe
@@ -30,6 +31,7 @@
// Mixin constructors
ve.ce.ImageNode.call( this, this.$element, this.$image, config );
+ ve.ce.AlignableNode.call( this, this.$element, config );
// Initialization
this.$element.addClass( 've-ce-blockImageNode' );
@@ -50,6 +52,8 @@
OO.mixinClass( ve.ce.BlockImageNode, ve.ce.ImageNode );
+OO.mixinClass( ve.ce.BlockImageNode, ve.ce.AlignableNode );
+
/* Static Properties */
ve.ce.BlockImageNode.static.name = 'blockImage';
diff --git a/src/dm/nodes/ve.dm.BlockImageNode.js
b/src/dm/nodes/ve.dm.BlockImageNode.js
index c5c7ad1..6904532 100644
--- a/src/dm/nodes/ve.dm.BlockImageNode.js
+++ b/src/dm/nodes/ve.dm.BlockImageNode.js
@@ -10,6 +10,7 @@
* @class
* @extends ve.dm.BranchNode
* @mixins ve.dm.ImageNode
+ * @mixins ve.dm.AlignableNode
*
* @constructor
* @param {Object} [element] Reference to element in linear model
@@ -19,8 +20,9 @@
// Parent constructor
ve.dm.BlockImageNode.super.apply( this, arguments );
- // Mixin constructor
+ // Mixin constructors
ve.dm.ImageNode.call( this );
+ ve.dm.AlignableNode.call( this );
};
/* Inheritance */
@@ -29,12 +31,14 @@
OO.mixinClass( ve.dm.BlockImageNode, ve.dm.ImageNode );
+OO.mixinClass( ve.dm.BlockImageNode, ve.dm.AlignableNode );
+
/* Static Properties */
ve.dm.BlockImageNode.static.name = 'blockImage';
ve.dm.BlockImageNode.static.storeHtmlAttributes = {
- blacklist: [ 'typeof', 'class', 'src', 'resource', 'width', 'height',
'href', 'rel' ]
+ blacklist: [ 'src', 'width', 'height', 'href' ]
};
ve.dm.BlockImageNode.static.handlesOwnChildren = true;
@@ -64,7 +68,10 @@
attributes.width = width !== undefined && width !== '' ? Number( width
) : null;
attributes.height = height !== undefined && height !== '' ? Number(
height ) : null;
- dataElement = { type: this.name, attributes: attributes };
+ dataElement = {
+ type: this.name,
+ attributes: ve.extendObject(
ve.dm.AlignableNode.static.toDataElementAttributes( domElements, converter ),
attributes )
+ };
if ( $caption.length === 0 ) {
return [
@@ -108,6 +115,9 @@
figure.appendChild( wrapper.firstChild );
}
}
+
+ ve.dm.AlignableNode.static.modifyDomElement( figure, dataElement );
+
return [ figure ];
};
diff --git a/tests/dm/ve.dm.example.js b/tests/dm/ve.dm.example.js
index a7b304f..adab5a2 100644
--- a/tests/dm/ve.dm.example.js
+++ b/tests/dm/ve.dm.example.js
@@ -197,7 +197,7 @@
};
ve.dm.example.blockImage = {
- html: '<figure><img src="' + ve.dm.example.imgSrc + '" alt="Example"
width="100" height="50"><figcaption>caption</figcaption></figure>',
+ html: '<figure class="ve-align-right"><img src="' +
ve.dm.example.imgSrc + '" alt="Example" width="100"
height="50"><figcaption>caption</figcaption></figure>',
data: [
{
type: 'blockImage',
@@ -205,11 +205,15 @@
src: ve.dm.example.imgSrc,
alt: 'Example',
width: 100,
- height: 50
+ height: 50,
+ originalAlign: 'right',
+ align: 'right'
},
htmlAttributes: [
{
- values: {},
+ values: {
+ class: 've-align-right'
+ },
children: [
{
values: {
--
To view, visit https://gerrit.wikimedia.org/r/189230
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I3c94ad93254265e990cc761a6e106a08055d8886
Gerrit-PatchSet: 2
Gerrit-Project: VisualEditor/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Esanders <[email protected]>
Gerrit-Reviewer: Catrope <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
