mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-11-24 22:35:41 +00:00
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:
parent
1ea9016cf8
commit
f1e1dd7fcb
|
@ -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();
|
||||
|
|
|
@ -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();
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue