From f1e1dd7fcbab513e354075b80197fe2c8577658c Mon Sep 17 00:00:00 2001
From: Ed Sanders <esanders@wikimedia.org>
Date: Wed, 19 Jun 2013 16:04:02 +0100
Subject: [PATCH] Resize focus highlights on generated content update

Create a new rerender event. Also added a check to see
if the node is actually focused.

Change-Id: I9f74e82f72a9ddfd1e4a9ab7d1c0c8289b6525e8
---
 .../ve/ce/nodes/ve.ce.GeneratedContentNode.js | 18 ++++++++
 modules/ve/ce/ve.ce.FocusableNode.js          | 41 +++++++++++++++----
 2 files changed, 50 insertions(+), 9 deletions(-)

diff --git a/modules/ve/ce/nodes/ve.ce.GeneratedContentNode.js b/modules/ve/ce/nodes/ve.ce.GeneratedContentNode.js
index e49fd628fa..395b8cb6e1 100644
--- a/modules/ve/ce/nodes/ve.ce.GeneratedContentNode.js
+++ b/modules/ve/ce/nodes/ve.ce.GeneratedContentNode.js
@@ -25,12 +25,29 @@ ve.ce.GeneratedContentNode = function VeCeGeneratedContentNode() {
 	this.onUpdate();
 };
 
+/* Events */
+
+/**
+ * @event setup
+ */
+
+/**
+ * @event teardown
+ */
+
+/**
+ * @event rerender
+ */
+
 /* Methods */
 
 /**
  * Handle update events.
  *
  * @method
+ * @emits setup
+ * @emits teardown
+ * @emits rerender
  */
 ve.ce.GeneratedContentNode.prototype.onUpdate = function () {
 	var doc = this.getElementDocument(),
@@ -45,6 +62,7 @@ ve.ce.GeneratedContentNode.prototype.onUpdate = function () {
 		);
 		if ( this.live ) {
 			this.emit( 'setup' );
+			this.emit( 'rerender' );
 		}
 	} else {
 		this.startGenerating();
diff --git a/modules/ve/ce/ve.ce.FocusableNode.js b/modules/ve/ce/ve.ce.FocusableNode.js
index 2659a74d45..9b7c7caaac 100644
--- a/modules/ve/ce/ve.ce.FocusableNode.js
+++ b/modules/ve/ce/ve.ce.FocusableNode.js
@@ -16,7 +16,7 @@
  * node's DOM rendering.
  *
  * If your focusable node changes size and the highlight must be redrawn, call redrawHighlight().
- * ResizableNode 'resize' event is already bound.
+ * 'resize' and 'rerender' are already bound to call this.
  *
  * @class
  * @abstract
@@ -34,7 +34,8 @@ ve.ce.FocusableNode = function VeCeFocusableNode( $focusable ) {
 	// Events
 	this.connect( this, {
 		'setup': 'onFocusableSetup',
-		'resize': 'redrawHighlight'
+		'resize': 'onFocusableResize',
+		'rerender': 'onFocusableRerender'
 	} );
 };
 
@@ -60,13 +61,25 @@ ve.ce.FocusableNode.prototype.onFocusableSetup = function () {
 };
 
 /**
- * Notification of dimension change
+ * Handle resize event.
  *
  * @method
  */
-ve.ce.FocusableNode.prototype.redrawHighlight = function () {
-	this.clearHighlight();
-	this.createHighlight();
+ve.ce.FocusableNode.prototype.onFocusableResize = function () {
+	if ( this.isFocused() ) {
+		this.redrawHighlight();
+	}
+};
+
+/**
+ * Handle rerender event.
+ *
+ * @method
+ */
+ve.ce.FocusableNode.prototype.onFocusableRerender = function () {
+	if ( this.isFocused() ) {
+		this.redrawHighlight();
+	}
 };
 
 /**
@@ -104,7 +117,7 @@ ve.ce.FocusableNode.prototype.setFocused = function ( value ) {
 };
 
 /**
- * Creates highlight
+ * Creates highlight.
  *
  * @method
  */
@@ -113,7 +126,7 @@ ve.ce.FocusableNode.prototype.createHighlight = function () {
 
 	this.$.find( '*' ).add( this.$ ).each(
 		ve.bind( function( i, element ) {
-			elementOffset = $(element).offset();
+			elementOffset = $( element ).offset();
 			this.$highlights = this.$highlights.add(
 				$( '<div>' )
 					.css( {
@@ -131,7 +144,7 @@ ve.ce.FocusableNode.prototype.createHighlight = function () {
 };
 
 /**
- * Clears highlight
+ * Clears highlight.
  *
  * @method
  */
@@ -139,3 +152,13 @@ ve.ce.FocusableNode.prototype.clearHighlight = function () {
 	this.$highlights = $( [] );
 	this.surface.replaceHighlight( null );
 };
+
+/**
+ * Redraws highlight.
+ *
+ * @method
+ */
+ve.ce.FocusableNode.prototype.redrawHighlight = function () {
+	this.clearHighlight();
+	this.createHighlight();
+};