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
This commit is contained in:
Ed Sanders 2013-06-19 16:04:02 +01:00
parent 1ea9016cf8
commit f1e1dd7fcb
2 changed files with 50 additions and 9 deletions

View file

@ -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();

View file

@ -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();
};