jenkins-bot has submitted this change and it was merged.
Change subject: Create ImageNode mixin to share logic between Block & Inline
......................................................................
Create ImageNode mixin to share logic between Block & Inline
Change-Id: I90b543e1a91ab950ff9e857c038bf670dde5634d
---
M .docs/eg-iframe.html
M build/modules.json
M demos/ve/desktop.html
M demos/ve/mobile.html
M src/ce/nodes/ve.ce.BlockImageNode.js
A src/ce/nodes/ve.ce.ImageNode.js
M src/ce/nodes/ve.ce.InlineImageNode.js
M src/dm/nodes/ve.dm.BlockImageNode.js
A src/dm/nodes/ve.dm.ImageNode.js
M src/dm/nodes/ve.dm.InlineImageNode.js
M tests/index.html
11 files changed, 158 insertions(+), 123 deletions(-)
Approvals:
Catrope: Looks good to me, approved
jenkins-bot: Verified
diff --git a/.docs/eg-iframe.html b/.docs/eg-iframe.html
index 20d3ad6..db8c60e 100644
--- a/.docs/eg-iframe.html
+++ b/.docs/eg-iframe.html
@@ -175,6 +175,7 @@
<script src="../src/dm/nodes/ve.dm.TableRowNode.js"></script>
<script
src="../src/dm/nodes/ve.dm.TableSectionNode.js"></script>
<script src="../src/dm/nodes/ve.dm.TextNode.js"></script>
+ <script src="../src/dm/nodes/ve.dm.ImageNode.js"></script>
<script src="../src/dm/nodes/ve.dm.BlockImageNode.js"></script>
<script
src="../src/dm/nodes/ve.dm.BlockImageCaptionNode.js"></script>
<script src="../src/dm/nodes/ve.dm.InlineImageNode.js"></script>
@@ -239,6 +240,7 @@
<script src="../src/ce/nodes/ve.ce.TableRowNode.js"></script>
<script
src="../src/ce/nodes/ve.ce.TableSectionNode.js"></script>
<script src="../src/ce/nodes/ve.ce.TextNode.js"></script>
+ <script src="../src/ce/nodes/ve.ce.ImageNode.js"></script>
<script src="../src/ce/nodes/ve.ce.BlockImageNode.js"></script>
<script
src="../src/ce/nodes/ve.ce.BlockImageCaptionNode.js"></script>
<script src="../src/ce/nodes/ve.ce.InlineImageNode.js"></script>
diff --git a/build/modules.json b/build/modules.json
index 40fd4d4..e2aea3b 100644
--- a/build/modules.json
+++ b/build/modules.json
@@ -197,6 +197,7 @@
"src/dm/nodes/ve.dm.TableRowNode.js",
"src/dm/nodes/ve.dm.TableSectionNode.js",
"src/dm/nodes/ve.dm.TextNode.js",
+ "src/dm/nodes/ve.dm.ImageNode.js",
"src/dm/nodes/ve.dm.BlockImageNode.js",
"src/dm/nodes/ve.dm.BlockImageCaptionNode.js",
"src/dm/nodes/ve.dm.InlineImageNode.js",
@@ -261,6 +262,7 @@
"src/ce/nodes/ve.ce.TableRowNode.js",
"src/ce/nodes/ve.ce.TableSectionNode.js",
"src/ce/nodes/ve.ce.TextNode.js",
+ "src/ce/nodes/ve.ce.ImageNode.js",
"src/ce/nodes/ve.ce.BlockImageNode.js",
"src/ce/nodes/ve.ce.BlockImageCaptionNode.js",
"src/ce/nodes/ve.ce.InlineImageNode.js",
diff --git a/demos/ve/desktop.html b/demos/ve/desktop.html
index 3379a4c..fb3c4d3 100644
--- a/demos/ve/desktop.html
+++ b/demos/ve/desktop.html
@@ -187,6 +187,7 @@
<script src="../../src/dm/nodes/ve.dm.TableRowNode.js"></script>
<script
src="../../src/dm/nodes/ve.dm.TableSectionNode.js"></script>
<script src="../../src/dm/nodes/ve.dm.TextNode.js"></script>
+ <script src="../../src/dm/nodes/ve.dm.ImageNode.js"></script>
<script
src="../../src/dm/nodes/ve.dm.BlockImageNode.js"></script>
<script
src="../../src/dm/nodes/ve.dm.BlockImageCaptionNode.js"></script>
<script
src="../../src/dm/nodes/ve.dm.InlineImageNode.js"></script>
@@ -251,6 +252,7 @@
<script src="../../src/ce/nodes/ve.ce.TableRowNode.js"></script>
<script
src="../../src/ce/nodes/ve.ce.TableSectionNode.js"></script>
<script src="../../src/ce/nodes/ve.ce.TextNode.js"></script>
+ <script src="../../src/ce/nodes/ve.ce.ImageNode.js"></script>
<script
src="../../src/ce/nodes/ve.ce.BlockImageNode.js"></script>
<script
src="../../src/ce/nodes/ve.ce.BlockImageCaptionNode.js"></script>
<script
src="../../src/ce/nodes/ve.ce.InlineImageNode.js"></script>
diff --git a/demos/ve/mobile.html b/demos/ve/mobile.html
index 9f8f2fa..a62c906 100644
--- a/demos/ve/mobile.html
+++ b/demos/ve/mobile.html
@@ -188,6 +188,7 @@
<script src="../../src/dm/nodes/ve.dm.TableRowNode.js"></script>
<script
src="../../src/dm/nodes/ve.dm.TableSectionNode.js"></script>
<script src="../../src/dm/nodes/ve.dm.TextNode.js"></script>
+ <script src="../../src/dm/nodes/ve.dm.ImageNode.js"></script>
<script
src="../../src/dm/nodes/ve.dm.BlockImageNode.js"></script>
<script
src="../../src/dm/nodes/ve.dm.BlockImageCaptionNode.js"></script>
<script
src="../../src/dm/nodes/ve.dm.InlineImageNode.js"></script>
@@ -252,6 +253,7 @@
<script src="../../src/ce/nodes/ve.ce.TableRowNode.js"></script>
<script
src="../../src/ce/nodes/ve.ce.TableSectionNode.js"></script>
<script src="../../src/ce/nodes/ve.ce.TextNode.js"></script>
+ <script src="../../src/ce/nodes/ve.ce.ImageNode.js"></script>
<script
src="../../src/ce/nodes/ve.ce.BlockImageNode.js"></script>
<script
src="../../src/ce/nodes/ve.ce.BlockImageCaptionNode.js"></script>
<script
src="../../src/ce/nodes/ve.ce.InlineImageNode.js"></script>
diff --git a/src/ce/nodes/ve.ce.BlockImageNode.js
b/src/ce/nodes/ve.ce.BlockImageNode.js
index 822cf09..5130f43 100644
--- a/src/ce/nodes/ve.ce.BlockImageNode.js
+++ b/src/ce/nodes/ve.ce.BlockImageNode.js
@@ -10,8 +10,7 @@
*
* @class
* @extends ve.ce.BranchNode
- * @mixins ve.ce.FocusableNode
- * @mixins ve.ce.ResizableNode
+ * @mixins ve.ce.ImageNode
*
* @constructor
* @param {ve.dm.BlockImageNode} model Model to observe
@@ -31,15 +30,10 @@
.prependTo( this.$element );
// Mixin constructors
- ve.ce.FocusableNode.call( this );
- ve.ce.ResizableNode.call( this, this.$image, config );
-
- // Events
- this.$image.on( 'load', ve.bind( this.onLoad, this ) );
- this.model.connect( this, { attributeChange: 'onAttributeChange' } );
+ ve.ce.ImageNode.call( this, this.$element, this.$image, config );
// Initialization
- this.$element.addClass( 've-ce-imageNode' );
+ this.$element.addClass( 've-ce-blockImageNode' );
this.$image
.attr( {
alt: this.model.getAttribute( 'alt' ),
@@ -55,46 +49,13 @@
OO.inheritClass( ve.ce.BlockImageNode, ve.ce.BranchNode );
-OO.mixinClass( ve.ce.BlockImageNode, ve.ce.FocusableNode );
-OO.mixinClass( ve.ce.BlockImageNode, ve.ce.ResizableNode );
+OO.mixinClass( ve.ce.BlockImageNode, ve.ce.ImageNode );
/* Static Properties */
ve.ce.BlockImageNode.static.name = 'blockImage';
ve.ce.BlockImageNode.static.tagName = 'figure';
-
-/* Methods */
-
-/**
- * Update the rendering of the 'src', 'width' and 'height' attributes when
they change in the model.
- *
- * @method
- * @param {string} key Attribute key
- * @param {string} from Old value
- * @param {string} to New value
- */
-ve.ce.BlockImageNode.prototype.onAttributeChange = function ( key, from, to ) {
- if ( key === 'src' ) {
- this.$image.attr( 'src', this.getResolvedAttribute( 'src' ) );
- }
- if ( key === 'width' || key === 'height' ) {
- this.$image.css( key, to !== null ? to : '' );
- }
-};
-
-/**
- * Handle the image load
- *
- * @method
- * @param {jQuery.Event} e Load event
- */
-ve.ce.BlockImageNode.prototype.onLoad = function () {
- this.setOriginalDimensions( {
- width: this.$image.prop( 'naturalWidth' ),
- height: this.$image.prop( 'naturalHeight' )
- } );
-};
/* Registration */
diff --git a/src/ce/nodes/ve.ce.ImageNode.js b/src/ce/nodes/ve.ce.ImageNode.js
new file mode 100644
index 0000000..b80e652
--- /dev/null
+++ b/src/ce/nodes/ve.ce.ImageNode.js
@@ -0,0 +1,92 @@
+/*!
+ * VisualEditor ContentEditable ImageNode class.
+ *
+ * @copyright 2011-2014 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+/**
+ * ContentEditable image node.
+ *
+ * @class
+ * @abstract
+ * @mixins ve.ce.FocusableNode
+ * @mixins ve.ce.ResizableNode
+ *
+ * @constructor
+ * @param {jQuery} $figure Image or figure element
+ * @param {jQuery} [$image] Actual image element, if $figure is just a
container
+ * @param {Object} [config] Configuration options
+ */
+ve.ce.ImageNode = function VeCeImageNode( $figure, $image, config ) {
+ config = ve.extendObject( {
+ enforceMax: false,
+ minDimensions: { width: 1, height: 1 }
+ }, config );
+
+ this.$figure = $figure;
+ this.$image = $image || $figure;
+
+ // Mixin constructors
+ ve.ce.FocusableNode.call( this, this.$figure, config );
+ ve.ce.ResizableNode.call( this, this.$image, config );
+
+ // Events
+ this.$image.on( 'load', ve.bind( this.onLoad, this ) );
+ this.model.connect( this, { attributeChange: 'onAttributeChange' } );
+
+ // Initialization
+ this.$element.addClass( 've-ce-imageNode' );
+};
+
+/* Inheritance */
+
+OO.mixinClass( ve.ce.ImageNode, ve.ce.FocusableNode );
+
+OO.mixinClass( ve.ce.ImageNode, ve.ce.ResizableNode );
+
+/* Static Methods */
+
+/**
+ * @inheritdoc ve.ce.Node
+ */
+ve.ce.ImageNode.static.getDescription = function ( model ) {
+ return model.getAttribute( 'src' );
+};
+
+/* Methods */
+
+/**
+ * Update the rendering of the 'align', src', 'width' and 'height' attributes
+ * when they change in the model.
+ *
+ * @method
+ * @param {string} key Attribute key
+ * @param {string} from Old value
+ * @param {string} to New value
+ */
+ve.ce.ImageNode.prototype.onAttributeChange = function ( key, from, to ) {
+ switch ( key ) {
+ case 'src':
+ this.$image.attr( 'src', this.getResolvedAttribute(
'src' ) );
+ break;
+
+ case 'width':
+ case 'height':
+ this.$image.css( key, to !== null ? to : '' );
+ break;
+ }
+};
+
+/**
+ * Handle the image load
+ *
+ * @method
+ * @param {jQuery.Event} e Load event
+ */
+ve.ce.ImageNode.prototype.onLoad = function () {
+ this.setOriginalDimensions( {
+ width: this.$image.prop( 'naturalWidth' ),
+ height: this.$image.prop( 'naturalHeight' )
+ } );
+};
diff --git a/src/ce/nodes/ve.ce.InlineImageNode.js
b/src/ce/nodes/ve.ce.InlineImageNode.js
index 898ee19..d23c6eb 100644
--- a/src/ce/nodes/ve.ce.InlineImageNode.js
+++ b/src/ce/nodes/ve.ce.InlineImageNode.js
@@ -10,7 +10,7 @@
*
* @class
* @extends ve.ce.LeafNode
- * @mixins ve.ce.FocusableNode
+ * @mixins ve.ce.ImageNode
* @mixins ve.ce.ResizableNode
*
* @constructor
@@ -26,16 +26,11 @@
ve.ce.LeafNode.call( this, model, config );
// Mixin constructors
- ve.ce.FocusableNode.call( this );
- ve.ce.ResizableNode.call( this, this.$element, config );
-
- // Events
- this.$element.on( 'load', ve.bind( this.onLoad, this ) );
- this.model.connect( this, { attributeChange: 'onAttributeChange' } );
+ ve.ce.ImageNode.call( this, this.$element, null, config );
// Initialization
this.$element
- .addClass( 've-ce-imageNode' )
+ .addClass( 've-ce-inlineImageNode' )
.attr( {
alt: this.model.getAttribute( 'alt' ),
src: this.getResolvedAttribute( 'src' )
@@ -50,46 +45,13 @@
OO.inheritClass( ve.ce.InlineImageNode, ve.ce.LeafNode );
-OO.mixinClass( ve.ce.InlineImageNode, ve.ce.FocusableNode );
-OO.mixinClass( ve.ce.InlineImageNode, ve.ce.ResizableNode );
+OO.mixinClass( ve.ce.InlineImageNode, ve.ce.ImageNode );
/* Static Properties */
ve.ce.InlineImageNode.static.name = 'inlineImage';
ve.ce.InlineImageNode.static.tagName = 'img';
-
-/* Methods */
-
-/**
- * Update the rendering of the 'src', 'width' and 'height' attributes when
they change in the model.
- *
- * @method
- * @param {string} key Attribute key
- * @param {string} from Old value
- * @param {string} to New value
- */
-ve.ce.InlineImageNode.prototype.onAttributeChange = function ( key, from, to )
{
- if ( key === 'src' ) {
- this.$element.attr( 'src', this.getResolvedAttribute( 'src' ) );
- }
- if ( key === 'width' || key === 'height' ) {
- this.$element.css( key, to !== null ? to : '' );
- }
-};
-
-/**
- * Handle the image load
- *
- * @method
- * @param {jQuery.Event} e Load event
- */
-ve.ce.InlineImageNode.prototype.onLoad = function () {
- this.setOriginalDimensions( {
- width: this.$element.prop( 'naturalWidth' ),
- height: this.$element.prop( 'naturalHeight' )
- } );
-};
/* Registration */
diff --git a/src/dm/nodes/ve.dm.BlockImageNode.js
b/src/dm/nodes/ve.dm.BlockImageNode.js
index 6015ad9..68139ac 100644
--- a/src/dm/nodes/ve.dm.BlockImageNode.js
+++ b/src/dm/nodes/ve.dm.BlockImageNode.js
@@ -10,7 +10,7 @@
*
* @class
* @extends ve.dm.BranchNode
- * @mixins ve.dm.ResizableNode
+ * @mixins ve.dm.ImageNode
*
* @constructor
* @param {Object} [element] Reference to element in linear model
@@ -21,14 +21,14 @@
ve.dm.BranchNode.apply( this, arguments );
// Mixin constructor
- ve.dm.ResizableNode.call( this );
+ ve.dm.ImageNode.call( this );
};
/* Inheritance */
OO.inheritClass( ve.dm.BlockImageNode, ve.dm.BranchNode );
-OO.mixinClass( ve.dm.BlockImageNode, ve.dm.ResizableNode );
+OO.mixinClass( ve.dm.BlockImageNode, ve.dm.ImageNode );
/* Static Properties */
@@ -123,22 +123,6 @@
ve.dm.BlockImageNode.prototype.getCaptionNode = function () {
var node = this.children[0];
return node instanceof ve.dm.BlockImageCaptionNode ? node : null;
-};
-
-/**
- * @inheritdoc
- */
-ve.dm.BlockImageNode.prototype.createScalable = function () {
- return new ve.dm.Scalable( {
- currentDimensions: {
- width: this.getAttribute( 'width' ),
- height: this.getAttribute( 'height' )
- },
- minDimensions: {
- width: 1,
- height: 1
- }
- } );
};
/* Registration */
diff --git a/src/dm/nodes/ve.dm.ImageNode.js b/src/dm/nodes/ve.dm.ImageNode.js
new file mode 100644
index 0000000..073cc5b
--- /dev/null
+++ b/src/dm/nodes/ve.dm.ImageNode.js
@@ -0,0 +1,42 @@
+/*!
+ * VisualEditor DataModel ImageNode class.
+ *
+ * @copyright 2011-2014 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+/**
+ * DataModel image node.
+ *
+ * @class
+ * @abstract
+ * @mixins ve.dm.ResizableNode
+ *
+ * @constructor
+ */
+ve.dm.ImageNode = function VeDmImageNode() {
+ // Mixin constructor
+ ve.dm.ResizableNode.call( this );
+};
+
+/* Inheritance */
+
+OO.mixinClass( ve.dm.ImageNode, ve.dm.ResizableNode );
+
+/* Methods */
+
+/**
+ * @inheritdoc
+ */
+ve.dm.ImageNode.prototype.createScalable = function () {
+ return new ve.dm.Scalable( {
+ currentDimensions: {
+ width: this.getAttribute( 'width' ),
+ height: this.getAttribute( 'height' )
+ },
+ minDimensions: {
+ width: 1,
+ height: 1
+ }
+ } );
+};
diff --git a/src/dm/nodes/ve.dm.InlineImageNode.js
b/src/dm/nodes/ve.dm.InlineImageNode.js
index 7cd9387..f77ff1e 100644
--- a/src/dm/nodes/ve.dm.InlineImageNode.js
+++ b/src/dm/nodes/ve.dm.InlineImageNode.js
@@ -10,7 +10,7 @@
*
* @class
* @extends ve.dm.LeafNode
- * @mixins ve.dm.ResizableNode
+ * @mixins ve.dm.ImageNode
*
* @constructor
* @param {Object} [element] Reference to element in linear model
@@ -20,14 +20,14 @@
ve.dm.LeafNode.apply( this, arguments );
// Mixin constructor
- ve.dm.ResizableNode.call( this );
+ ve.dm.ImageNode.call( this );
};
/* Inheritance */
OO.inheritClass( ve.dm.InlineImageNode, ve.dm.LeafNode );
-OO.mixinClass( ve.dm.InlineImageNode, ve.dm.ResizableNode );
+OO.mixinClass( ve.dm.InlineImageNode, ve.dm.ImageNode );
/* Static Properties */
@@ -58,22 +58,6 @@
var domElement = doc.createElement( 'img' );
ve.setDomAttributes( domElement, dataElement.attributes, [ 'alt',
'src', 'width', 'height' ] );
return [ domElement ];
-};
-
-/**
- * @inheritdoc
- */
-ve.dm.InlineImageNode.prototype.createScalable = function () {
- return new ve.dm.Scalable( {
- currentDimensions: {
- width: this.getAttribute( 'width' ),
- height: this.getAttribute( 'height' )
- },
- minDimensions: {
- width: 1,
- height: 1
- }
- } );
};
/* Registration */
diff --git a/tests/index.html b/tests/index.html
index f969b27..0a86837 100644
--- a/tests/index.html
+++ b/tests/index.html
@@ -136,6 +136,7 @@
<script src="../src/dm/nodes/ve.dm.TableRowNode.js"></script>
<script
src="../src/dm/nodes/ve.dm.TableSectionNode.js"></script>
<script src="../src/dm/nodes/ve.dm.TextNode.js"></script>
+ <script src="../src/dm/nodes/ve.dm.ImageNode.js"></script>
<script src="../src/dm/nodes/ve.dm.BlockImageNode.js"></script>
<script
src="../src/dm/nodes/ve.dm.BlockImageCaptionNode.js"></script>
<script src="../src/dm/nodes/ve.dm.InlineImageNode.js"></script>
@@ -200,6 +201,7 @@
<script src="../src/ce/nodes/ve.ce.TableRowNode.js"></script>
<script
src="../src/ce/nodes/ve.ce.TableSectionNode.js"></script>
<script src="../src/ce/nodes/ve.ce.TextNode.js"></script>
+ <script src="../src/ce/nodes/ve.ce.ImageNode.js"></script>
<script src="../src/ce/nodes/ve.ce.BlockImageNode.js"></script>
<script
src="../src/ce/nodes/ve.ce.BlockImageCaptionNode.js"></script>
<script src="../src/ce/nodes/ve.ce.InlineImageNode.js"></script>
--
To view, visit https://gerrit.wikimedia.org/r/155023
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I90b543e1a91ab950ff9e857c038bf670dde5634d
Gerrit-PatchSet: 6
Gerrit-Project: VisualEditor/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Esanders <[email protected]>
Gerrit-Reviewer: Catrope <[email protected]>
Gerrit-Reviewer: Esanders <[email protected]>
Gerrit-Reviewer: Jforrester <[email protected]>
Gerrit-Reviewer: Mooeypoo <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
