wikimedia/mediawiki-extensions-VisualEditor
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor synced 2024-09-25 11:16:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Cache multiple requests for $resizable's offset

Browse source 
Both the resize handles and the size label position themselves
using $resizable's relative offset, so we can optimise by
caching that result.

Change-Id: Ic225b15cfcece8d5c2e782e1e667d854f805c6fb
This commit is contained in:
Ed Sanders 2013-10-22 21:15:40 +01:00 committed by Catrope
parent 1efa327121
commit c543fef85f
1 changed files with 19 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
modules/ve/ce/ve.ce.ResizableNode.js
View file

@ -30,6 +30,7 @@ ve.ce.ResizableNode = function VeCeResizableNode( $resizable, config ) {
this.$sizeText = this.$$( '<span>' ).addClass( 've-ce-resizableNode-sizeText' ); this.$sizeText = this.$$( '<span>' ).addClass( 've-ce-resizableNode-sizeText' );
this.$sizeLabel = this.$$( '<div>' ).addClass( 've-ce-resizableNode-sizeLabel' ).append( this.$sizeText ); this.$sizeLabel = this.$$( '<div>' ).addClass( 've-ce-resizableNode-sizeLabel' ).append( this.$sizeText );
} }
this.resizableOffset = null;
// Events // Events
this.connect( this, { this.connect( this, {
@ -71,6 +72,20 @@ ve.ce.ResizableNode.static = {};
/* Methods */ /* Methods */
/**
* Get and cache the relative offset of the $resizable node
*
* @returns {Object} Position coordinates, containing top & left
*/
ve.ce.ResizableNode.prototype.getResizableOffset = function () {
if ( !this.resizableOffset ) {
this.resizableOffset = ve.Element.getRelativePosition(
this.$resizable, this.getRoot().getSurface().getSurface().$
);
}
return this.resizableOffset;
};
/** /**
* Update the contents and position of the size label * Update the contents and position of the size label
* *
@ -84,9 +99,7 @@ ve.ce.ResizableNode.prototype.updateSizeLabel = function ( dimensions ) {
} }
var offset, node, top, height; var offset, node, top, height;
if ( dimensions ) { if ( dimensions ) {
offset = ve.Element.getRelativePosition( offset = this.getResizableOffset();
this.$resizable, this.getRoot().getSurface().getSurface().$
);
// Things get a bit tight below 100px, so put the label on the outside // Things get a bit tight below 100px, so put the label on the outside
if ( dimensions.width < 100 ) { if ( dimensions.width < 100 ) {
top = offset.top + dimensions.height; top = offset.top + dimensions.height;
@ -185,6 +198,8 @@ ve.ce.ResizableNode.prototype.onResizableLive = function () {
* @param {Object} dimensions Dimension object containing width & height * @param {Object} dimensions Dimension object containing width & height
*/ */
ve.ce.ResizableNode.prototype.onResizableResizing = function ( dimensions ) { ve.ce.ResizableNode.prototype.onResizableResizing = function ( dimensions ) {
// Clear cached resizable offset position as it may have changed
this.resizableOffset = null;
if ( !this.outline ) { if ( !this.outline ) {
this.$resizable.css( { this.$resizable.css( {
'width': dimensions.width, 'width': dimensions.width,
@ -276,9 +291,7 @@ ve.ce.ResizableNode.prototype.setResizableHandlesSizeAndPosition = function () {
* @method * @method
*/ */
ve.ce.ResizableNode.prototype.setResizableHandlesPosition = function () { ve.ce.ResizableNode.prototype.setResizableHandlesPosition = function () {
var offset = ve.Element.getRelativePosition( var offset = this.getResizableOffset();
this.$resizable, this.getRoot().getSurface().getSurface().$
);
this.$resizeHandles.css( { this.$resizeHandles.css( {
'top': offset.top, 'top': offset.top,