Esanders has uploaded a new change for review.
https://gerrit.wikimedia.org/r/189737
Change subject: Simplify AlignableNode by inheriting from ClassAttributeNode
......................................................................
Simplify AlignableNode by inheriting from ClassAttributeNode
Change-Id: Ifdc7bf513aefa23648c0b885cd6de1153f56a9ae
---
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
M src/ce/ve.ce.AlignableNode.js
A src/ce/ve.ce.ClassAttributeNode.js
M src/dm/nodes/ve.dm.BlockImageNode.js
M src/dm/ve.dm.AlignableNode.js
M src/dm/ve.dm.ClassAttributeNode.js
M tests/index.html
11 files changed, 81 insertions(+), 107 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/VisualEditor/VisualEditor
refs/changes/37/189737/1
diff --git a/.docs/eg-iframe.html b/.docs/eg-iframe.html
index 610ecde..11fea38 100644
--- a/.docs/eg-iframe.html
+++ b/.docs/eg-iframe.html
@@ -230,6 +230,7 @@
<script src="../src/ce/ve.ce.BranchNode.js"></script>
<script src="../src/ce/ve.ce.ContentBranchNode.js"></script>
<script src="../src/ce/ve.ce.LeafNode.js"></script>
+ <script src="../src/ce/ve.ce.ClassAttributeNode.js"></script>
<script src="../src/ce/ve.ce.AlignableNode.js"></script>
<script src="../src/ce/ve.ce.FocusableNode.js"></script>
<script src="../src/ce/ve.ce.ResizableNode.js"></script>
diff --git a/build/modules.json b/build/modules.json
index 501d33e..c74e063 100644
--- a/build/modules.json
+++ b/build/modules.json
@@ -257,6 +257,7 @@
"src/ce/ve.ce.BranchNode.js",
"src/ce/ve.ce.ContentBranchNode.js",
"src/ce/ve.ce.LeafNode.js",
+ "src/ce/ve.ce.ClassAttributeNode.js",
"src/ce/ve.ce.AlignableNode.js",
"src/ce/ve.ce.FocusableNode.js",
"src/ce/ve.ce.ResizableNode.js",
diff --git a/demos/ve/desktop.html b/demos/ve/desktop.html
index 8054a4c..0ce5bd6 100644
--- a/demos/ve/desktop.html
+++ b/demos/ve/desktop.html
@@ -247,6 +247,7 @@
<script src="../../src/ce/ve.ce.BranchNode.js"></script>
<script src="../../src/ce/ve.ce.ContentBranchNode.js"></script>
<script src="../../src/ce/ve.ce.LeafNode.js"></script>
+ <script src="../../src/ce/ve.ce.ClassAttributeNode.js"></script>
<script src="../../src/ce/ve.ce.AlignableNode.js"></script>
<script src="../../src/ce/ve.ce.FocusableNode.js"></script>
<script src="../../src/ce/ve.ce.ResizableNode.js"></script>
diff --git a/demos/ve/mobile.html b/demos/ve/mobile.html
index 7579576..eec79d1 100644
--- a/demos/ve/mobile.html
+++ b/demos/ve/mobile.html
@@ -248,6 +248,7 @@
<script src="../../src/ce/ve.ce.BranchNode.js"></script>
<script src="../../src/ce/ve.ce.ContentBranchNode.js"></script>
<script src="../../src/ce/ve.ce.LeafNode.js"></script>
+ <script src="../../src/ce/ve.ce.ClassAttributeNode.js"></script>
<script src="../../src/ce/ve.ce.AlignableNode.js"></script>
<script src="../../src/ce/ve.ce.FocusableNode.js"></script>
<script src="../../src/ce/ve.ce.ResizableNode.js"></script>
diff --git a/src/ce/nodes/ve.ce.BlockImageNode.js
b/src/ce/nodes/ve.ce.BlockImageNode.js
index 1a6aa7b..17f5732 100644
--- a/src/ce/nodes/ve.ce.BlockImageNode.js
+++ b/src/ce/nodes/ve.ce.BlockImageNode.js
@@ -52,6 +52,9 @@
OO.mixinClass( ve.ce.BlockImageNode, ve.ce.ImageNode );
+// Mixin Alignable's parent class
+OO.mixinClass( ve.ce.BlockImageNode, ve.ce.ClassAttributeNode );
+
OO.mixinClass( ve.ce.BlockImageNode, ve.ce.AlignableNode );
/* Static Properties */
diff --git a/src/ce/ve.ce.AlignableNode.js b/src/ce/ve.ce.AlignableNode.js
index 94af427..95c66f0 100644
--- a/src/ce/ve.ce.AlignableNode.js
+++ b/src/ce/ve.ce.AlignableNode.js
@@ -1,30 +1,22 @@
-/*!
- * VisualEditor ContentEditable AlignableNode class.
- *
- * @copyright 2011-2015 VisualEditor Team and others; see
http://ve.mit-license.org
- */
-
/**
* ContentEditable Alignable node.
*
* @class
* @abstract
+ * @extends ve.ce.ClassAttributeNode
*
* @constructor
*/
-ve.ce.AlignableNode = function VeCeAlignableNode( $alignable, config ) {
- config = config || {};
+ve.ce.AlignableNode = function VeCeAlignableNode() {
+ // Parent constructor
+ ve.ce.AlignableNode.super.apply( this, arguments );
- this.$alignable = $alignable || this.$element;
-
- // Events
- this.connect( this, { setup: 'onAlignableSetup' } );
- this.model.connect( this, { attributeChange:
'onAlignableAttributeChange' } );
+ this.align = null;
};
/* Inheritance */
-OO.initClass( ve.ce.AlignableNode );
+OO.inheritClass( ve.ce.AlignableNode, ve.ce.ClassAttributeNode );
/* Events */
@@ -34,34 +26,13 @@
*/
/**
- * Handle attribute change events
- *
- * @param {string} key Key
- * @param {string} from Old value
- * @param {string} to New value
+ * @inheritdoc
*/
-ve.ce.AlignableNode.prototype.onAlignableAttributeChange = function ( key,
from, to ) {
- var cssClasses;
- if ( key === 'align' ) {
- cssClasses = this.model.constructor.static.cssClasses;
- if ( from && cssClasses[from] ) {
- this.$alignable.removeClass( cssClasses[from] );
- }
- if ( to && cssClasses[to] ) {
- this.$alignable.addClass( cssClasses[to] );
- }
- this.emit( 'align', to );
- }
-};
-
-/**
- * Handle node setup
- */
-ve.ce.AlignableNode.prototype.onAlignableSetup = function () {
- var align = this.model.getAttribute( 'align' ),
- cssClasses = this.model.constructor.static.cssClasses;
- if ( align && cssClasses[align] ) {
- this.$alignable.addClass( cssClasses[align] );
+ve.ce.AlignableNode.prototype.updateAttributeClasses = function () {
+ ve.ce.AlignableNode.super.prototype.updateAttributeClasses.apply( this,
arguments );
+ var align = this.model.getAttribute( 'align' );
+ if ( align && align !== this.align ) {
this.emit( 'align', align );
+ this.align = align;
}
};
diff --git a/src/ce/ve.ce.ClassAttributeNode.js
b/src/ce/ve.ce.ClassAttributeNode.js
new file mode 100644
index 0000000..62b5cdc
--- /dev/null
+++ b/src/ce/ve.ce.ClassAttributeNode.js
@@ -0,0 +1,39 @@
+/*!
+ * VisualEditor ContentEditable ClassAttributeNode class.
+ *
+ * @copyright 2011-2015 VisualEditor Team and others; see
http://ve.mit-license.org
+ */
+
+/**
+ * ContentEditable class-attribute node.
+ *
+ * @class
+ * @abstract
+ *
+ * @constructor
+ * @param {jQuery} [$classedElement=this.$element] Element to which
attribute-based classes are attached
+ */
+ve.ce.ClassAttributeNode = function VeCeClassAttributeNode( $classedElement,
config ) {
+ config = config || {};
+
+ // Properties
+ this.$classedElement = $classedElement || this.$element;
+ this.currentAttributeClasses = '';
+
+ // Events
+ this.connect( this, { setup: 'updateAttributeClasses' } );
+ this.model.connect( this, { attributeChange: 'updateAttributeClasses' }
);
+};
+
+/* Inheritance */
+
+OO.initClass( ve.ce.ClassAttributeNode );
+
+/**
+ * Update classes from attributes
+ */
+ve.ce.ClassAttributeNode.prototype.updateAttributeClasses = function () {
+ this.$classedElement.removeClass( this.currentAttributeClasses );
+ this.currentAttributeClasses =
this.model.constructor.static.getClassAttrFromAttributes(
this.model.element.attributes );
+ this.$classedElement.addClass( this.currentAttributeClasses );
+};
diff --git a/src/dm/nodes/ve.dm.BlockImageNode.js
b/src/dm/nodes/ve.dm.BlockImageNode.js
index 2df7333..d23a2f8 100644
--- a/src/dm/nodes/ve.dm.BlockImageNode.js
+++ b/src/dm/nodes/ve.dm.BlockImageNode.js
@@ -31,6 +31,9 @@
OO.mixinClass( ve.dm.BlockImageNode, ve.dm.ImageNode );
+// Mixin Alignable's parent class
+OO.mixinClass( ve.dm.BlockImageNode, ve.dm.ClassAttributeNode );
+
OO.mixinClass( ve.dm.BlockImageNode, ve.dm.AlignableNode );
/* Static Properties */
@@ -60,6 +63,7 @@
var dataElement,
figure = domElements[0],
+ classAttr = figure.getAttribute( 'class' ),
img = findChildren( figure, 'img' )[0] || null,
caption = findChildren( figure, 'figcaption' )[0] || null,
attributes = {
@@ -73,12 +77,14 @@
attributes.alt = altText;
}
+ this.setClassAttributes( attributes, classAttr );
+
attributes.width = width !== undefined && width !== '' ? Number( width
) : null;
attributes.height = height !== undefined && height !== '' ? Number(
height ) : null;
dataElement = {
type: this.name,
- attributes: ve.extendObject(
ve.dm.AlignableNode.static.toDataElementAttributes( domElements, converter ),
attributes )
+ attributes: attributes
};
if ( !caption ) {
@@ -102,6 +108,7 @@
var dataElement = data[0],
width = dataElement.attributes.width,
height = dataElement.attributes.height,
+ classAttr = this.getClassAttrFromAttributes(
dataElement.attributes ),
figure = doc.createElement( 'figure' ),
img = doc.createElement( 'img' ),
wrapper = doc.createElement( 'div' ),
@@ -115,6 +122,10 @@
}
figure.appendChild( img );
+ if ( classAttr ) {
+ figure.className = classAttr;
+ }
+
// If length of captionData is smaller or equal to 2 it means that
there is no caption or that
// it is empty - in both cases we are going to skip appending
<figcaption>.
if ( captionData.length > 2 ) {
@@ -123,8 +134,6 @@
figure.appendChild( wrapper.firstChild );
}
}
-
- ve.dm.AlignableNode.static.modifyDomElement( figure, dataElement );
return [ figure ];
};
diff --git a/src/dm/ve.dm.AlignableNode.js b/src/dm/ve.dm.AlignableNode.js
index 00abcfc..9d33770 100644
--- a/src/dm/ve.dm.AlignableNode.js
+++ b/src/dm/ve.dm.AlignableNode.js
@@ -9,75 +9,23 @@
*
* @class
* @abstract
+ * @extends ve.dm.ClassAttributeNode
+ *
* @constructor
*/
ve.dm.AlignableNode = function VeDmAlignableNode() {
+ // Parent constructor
+ ve.dm.AlignableNode.super.apply( this, arguments );
};
/* Inheritance */
-OO.initClass( ve.dm.AlignableNode );
+OO.inheritClass( ve.dm.AlignableNode, ve.dm.ClassAttributeNode );
/* Static properties */
-/**
- * CSS class to use for each alignment
- *
- * @static
- * @property {Object}
- * @inheritable
- */
-ve.dm.AlignableNode.static.cssClasses = {
- left: 've-align-left',
- right: 've-align-right',
- center: 've-align-center'
-};
-
-/**
- * Creates attributes for the data element from DOM elements
- *
- * @static
- * @param {Node[]} domElements DOM elements from converter
- * @param {ve.dm.Converter} converter Converter object
- * @return {Object} Attributes for data element
- */
-ve.dm.AlignableNode.static.toDataElementAttributes = function ( domElements ) {
- var a, align,
- classList = domElements[0].classList,
- cssClasses = this.cssClasses;
-
- for ( a in cssClasses ) {
- if ( classList.contains( cssClasses[a] ) ) {
- align = a;
- break;
- }
- }
-
- if ( align ) {
- return {
- align: align,
- originalAlign: align
- };
- } else {
- return {};
- }
-};
-
-/**
- * Modify DOM element from the data element during toDomElements
- *
- * @param {Node} domElement Parent DOM element
- * @param {Object} dataElement Linear model element
- * @param {HTMLDocument} doc HTML document for creating elements
- * @return {Object} Attributes for DOM element
- */
-ve.dm.AlignableNode.static.modifyDomElement = function ( domElement,
dataElement ) {
- if ( dataElement.attributes.align !==
dataElement.attributes.originalAlign ) {
- if ( dataElement.attributes.originalAlign ) {
- $( domElement ).removeClass( 've-align-' +
dataElement.attributes.originalAlign );
- }
- if ( dataElement.attributes.align ) {
- $( domElement ).addClass( 've-align-' +
dataElement.attributes.align );
- }
- }
+ve.dm.AlignableNode.static.classAttributes = {
+ 've-align-left': { align: 'left' },
+ 've-align-right': { align: 'right' },
+ 've-align-center': { align: 'center' }
};
diff --git a/src/dm/ve.dm.ClassAttributeNode.js
b/src/dm/ve.dm.ClassAttributeNode.js
index 6cb5cc9..fbd2c16 100644
--- a/src/dm/ve.dm.ClassAttributeNode.js
+++ b/src/dm/ve.dm.ClassAttributeNode.js
@@ -1,8 +1,7 @@
/*!
* VisualEditor DataModel ClassAttribute class.
*
- * @copyright 2011-2015 VisualEditor Team and others; see AUTHORS.txt
- * @license The MIT License (MIT); see LICENSE.txt
+ * @copyright 2011-2015 VisualEditor Team and others; see
http://ve.mit-license.org
*/
/**
diff --git a/tests/index.html b/tests/index.html
index 43bd38c..f72b089 100644
--- a/tests/index.html
+++ b/tests/index.html
@@ -189,6 +189,7 @@
<script src="../src/ce/ve.ce.BranchNode.js"></script>
<script src="../src/ce/ve.ce.ContentBranchNode.js"></script>
<script src="../src/ce/ve.ce.LeafNode.js"></script>
+ <script src="../src/ce/ve.ce.ClassAttributeNode.js"></script>
<script src="../src/ce/ve.ce.AlignableNode.js"></script>
<script src="../src/ce/ve.ce.FocusableNode.js"></script>
<script src="../src/ce/ve.ce.ResizableNode.js"></script>
--
To view, visit https://gerrit.wikimedia.org/r/189737
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ifdc7bf513aefa23648c0b885cd6de1153f56a9ae
Gerrit-PatchSet: 1
Gerrit-Project: VisualEditor/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Esanders <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
