Merge "Introduction of setup and teardown events for ve.ce.View nodes"

modules/ve/ce/ve.ce.BranchNode.js

@@ -32,9 +32,6 @@ ve.ce.BranchNode = function VeCeBranchNode( model, config ) {
 	// Events
 	this.model.connect( this, { 'splice': 'onSplice' } );
 
-	// DOM Changes
-	this.$.addClass( 've-ce-branchNode' );
-
 	// Initialization
 	this.onSplice.apply( this, [0, 0].concat( model.getChildren() ) );
 };
@@ -81,6 +78,26 @@ ve.ce.BranchNode.$blockSlugTemplate = $( '<span>' )
 
 /* Methods */
 
+/**
+ * Handle setup event.
+ *
+ * @method
+ */
+ve.ce.BranchNode.prototype.onSetup = function () {
+	ve.ce.Node.prototype.onSetup.call( this );
+	this.$.addClass( 've-ce-branchNode' );
+};
+
+/**
+ * Handle teardown event.
+ *
+ * @method
+ */
+ve.ce.BranchNode.prototype.onTeardown = function () {
+	ve.ce.Node.prototype.onTeardown.call( this );
+	this.$.removeClass( 've-ce-branchNode' );
+};
+
 /**
  * Update the DOM wrapper.
  *
@@ -97,19 +114,15 @@ ve.ce.BranchNode.prototype.updateTagName = function () {
 		tagName = this.getTagName();
 
 	if ( tagName !== this.tagName ) {
+		this.emit( 'teardown' );
 		$element = this.$$( this.$$.context.createElement( tagName ) );
-		// Copy classes
-		$element.attr( 'class', this.$.attr( 'class' ) );
-		// Copy .data( 'view' )
-		$element.data( 'view', this.$.data( 'view' ) );
 		// Move contents
 		$element.append( this.$.contents() );
-		// Emit an event that can be handled to copy other things over if needed
-		this.emit( 'rewrap', this.$, $element );
 		// Swap elements
 		this.$.replaceWith( $element );
 		// Use new element from now on
 		this.$ = $element;
+		this.emit( 'setup' );
 		// Remember which tag name we are using now
 		this.tagName = tagName;
 	}
@@ -250,8 +263,7 @@ ve.ce.BranchNode.prototype.getSlugAtOffset = function ( offset ) {
  * @emits live
  */
 ve.ce.BranchNode.prototype.setLive = function ( live ) {
-	this.live = live;
-	this.emit( 'live' );
+	ve.ce.Node.prototype.setLive.call( this, live );
 	for ( var i = 0; i < this.children.length; i++ ) {
 		this.children[i].setLive( live );
 	}

modules/ve/ce/ve.ce.LeafNode.js

@@ -43,6 +43,16 @@ ve.ce.LeafNode.static.tagName = 'span';
 
 /* Methods */
 
+ve.ce.LeafNode.prototype.onSetup = function () {
+	ve.ce.Node.prototype.onSetup.call( this );
+	this.$.addClass( 've-ce-leafNode' );
+};
+
+ve.ce.LeafNode.prototype.onTeardown = function () {
+	ve.ce.Node.prototype.onTeardown.call( this );
+	this.$.removeClass( 've-ce-leafNode' );
+};
+
 /**
  * Get annotated HTML fragments.
  *

modules/ve/ce/ve.ce.View.js

@@ -31,8 +31,13 @@ ve.ce.View = function VeCeView( model, config ) {
 	// Properties
 	this.live = false;
 
+	// Events
+	this.connect( this, {
+		'setup': 'onSetup',
+		'teardown': 'onTeardown'
+	} );
+
 	// Initialization
-	this.$.data( 'view', this );
 	this.renderAttributes( this.model.getAttributes() );
 };
 
@@ -86,6 +91,24 @@ ve.ce.View.static.renderHtmlAttributes = true;
 
 /* Methods */
 
+/**
+ * Handle setup event.
+ *
+ * @method
+ */
+ve.ce.View.prototype.onSetup = function () {
+	this.$.data( 'view', this );
+};
+
+/**
+ * Handle teardown event.
+ *
+ * @method
+ */
+ve.ce.View.prototype.onTeardown = function () {
+	this.$.removeData( 'view' );
+};
+
 /**
  * Get the model the view observes.
  *
@@ -116,6 +139,11 @@ ve.ce.View.prototype.isLive = function () {
 ve.ce.View.prototype.setLive = function ( live ) {
 	this.live = live;
 	this.emit( 'live' );
+	if ( this.live ) {
+		this.emit( 'setup' );
+	} else {
+		this.emit( 'teardown' );
+	}
 };
 
 /**

modules/ve/dm/ve.dm.Node.js

@@ -21,6 +21,7 @@ ve.dm.Node = function VeDmNode( length, element ) {
 	ve.dm.Model.call( this, element );
 	// Mixin constructor
 	ve.Node.call( this );
+	ve.EventEmitter.call( this );
 
 	// Properties
 	this.length = length || 0;
@@ -43,6 +44,8 @@ ve.inheritClass( ve.dm.Node, ve.dm.Model );
 
 ve.mixinClass( ve.dm.Node, ve.Node );
 
+ve.mixinClass( ve.dm.Node, ve.EventEmitter );
+
 /* Static Properties */
 
 /**

modules/ve/test/ce/ve.ce.BranchNode.test.js

@@ -49,21 +49,22 @@ QUnit.test( 'canHaveChildrenNotContent', 1, function ( assert ) {
 	assert.equal( node.canHaveChildrenNotContent(), true );
 } );
 
-QUnit.test( 'updateTagName', 3, function ( assert ) {
+QUnit.test( 'updateTagName', 4, function ( assert ) {
 	var attributes = { 'style': 'a' },
 		node = new ve.ce.BranchNodeStub( new ve.dm.BranchNodeStub( [], {
 		'type': 'branch-stub', 'attributes': attributes
 	} ) );
 
-	// Add classes and content to the node
-	node.$.addClass( 'test' ).text( 'hello' );
+	// Add content to the node
+	node.$.text( 'hello' );
 
 	// Modify attribute
 	attributes.style = 'b';
 	node.updateTagName();
 
 	assert.equal( node.$.get( 0 ).nodeName.toLowerCase(), 'b', 'DOM element type gets converted' );
-	assert.equal( node.$.hasClass( 'test' ), true, 'old classes are added to new wrapper' );
+	assert.equal( node.$.hasClass( 've-ce-branchNode' ), true, 'old classes are added to new wrapper' );
+	assert.equal( !!node.$.data( 'view' ), true, 'data added to new wrapper' );
 	assert.equal( node.$.text(), 'hello', 'contents are added to new wrapper' );
 } );
 

modules/ve/ve.Node.js

@@ -14,9 +14,6 @@
  * @constructor
  */
 ve.Node = function VeNode() {
-	// Mixin constructor
-	ve.EventEmitter.call( this );
-
 	// Properties
 	this.type = this.constructor.static.name;
 	this.parent = null;
@@ -34,10 +31,6 @@ ve.Node = function VeNode() {
  * @param {ve.Node} parent
  */
 
-/* Inheritance */
-
-ve.mixinClass( ve.Node, ve.EventEmitter );
-
 /* Abstract Methods */
 
 /**