mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-12-01 01:16:30 +00:00
Merge "Resize focus highlights on generated content update"
This commit is contained in:
commit
d22053c017
|
@ -25,12 +25,29 @@ ve.ce.GeneratedContentNode = function VeCeGeneratedContentNode() {
|
||||||
this.onUpdate();
|
this.onUpdate();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/* Events */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @event setup
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @event teardown
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @event rerender
|
||||||
|
*/
|
||||||
|
|
||||||
/* Methods */
|
/* Methods */
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Handle update events.
|
* Handle update events.
|
||||||
*
|
*
|
||||||
* @method
|
* @method
|
||||||
|
* @emits setup
|
||||||
|
* @emits teardown
|
||||||
|
* @emits rerender
|
||||||
*/
|
*/
|
||||||
ve.ce.GeneratedContentNode.prototype.onUpdate = function () {
|
ve.ce.GeneratedContentNode.prototype.onUpdate = function () {
|
||||||
var doc = this.getElementDocument(),
|
var doc = this.getElementDocument(),
|
||||||
|
@ -45,6 +62,7 @@ ve.ce.GeneratedContentNode.prototype.onUpdate = function () {
|
||||||
);
|
);
|
||||||
if ( this.live ) {
|
if ( this.live ) {
|
||||||
this.emit( 'setup' );
|
this.emit( 'setup' );
|
||||||
|
this.emit( 'rerender' );
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
this.startGenerating();
|
this.startGenerating();
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
* node's DOM rendering.
|
* node's DOM rendering.
|
||||||
*
|
*
|
||||||
* If your focusable node changes size and the highlight must be redrawn, call redrawHighlight().
|
* 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
|
* @class
|
||||||
* @abstract
|
* @abstract
|
||||||
|
@ -34,7 +34,8 @@ ve.ce.FocusableNode = function VeCeFocusableNode( $focusable ) {
|
||||||
// Events
|
// Events
|
||||||
this.connect( this, {
|
this.connect( this, {
|
||||||
'setup': 'onFocusableSetup',
|
'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
|
* @method
|
||||||
*/
|
*/
|
||||||
ve.ce.FocusableNode.prototype.redrawHighlight = function () {
|
ve.ce.FocusableNode.prototype.onFocusableResize = function () {
|
||||||
this.clearHighlight();
|
if ( this.isFocused() ) {
|
||||||
this.createHighlight();
|
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
|
* @method
|
||||||
*/
|
*/
|
||||||
|
@ -113,7 +126,7 @@ ve.ce.FocusableNode.prototype.createHighlight = function () {
|
||||||
|
|
||||||
this.$.find( '*' ).add( this.$ ).each(
|
this.$.find( '*' ).add( this.$ ).each(
|
||||||
ve.bind( function( i, element ) {
|
ve.bind( function( i, element ) {
|
||||||
elementOffset = $(element).offset();
|
elementOffset = $( element ).offset();
|
||||||
this.$highlights = this.$highlights.add(
|
this.$highlights = this.$highlights.add(
|
||||||
$( '<div>' )
|
$( '<div>' )
|
||||||
.css( {
|
.css( {
|
||||||
|
@ -131,7 +144,7 @@ ve.ce.FocusableNode.prototype.createHighlight = function () {
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Clears highlight
|
* Clears highlight.
|
||||||
*
|
*
|
||||||
* @method
|
* @method
|
||||||
*/
|
*/
|
||||||
|
@ -139,3 +152,13 @@ ve.ce.FocusableNode.prototype.clearHighlight = function () {
|
||||||
this.$highlights = $( [] );
|
this.$highlights = $( [] );
|
||||||
this.surface.replaceHighlight( null );
|
this.surface.replaceHighlight( null );
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Redraws highlight.
|
||||||
|
*
|
||||||
|
* @method
|
||||||
|
*/
|
||||||
|
ve.ce.FocusableNode.prototype.redrawHighlight = function () {
|
||||||
|
this.clearHighlight();
|
||||||
|
this.createHighlight();
|
||||||
|
};
|
||||||
|
|
Loading…
Reference in a new issue