Fix resize listener leak problem.

Third try, merged latest changes and added a test.
Run loading test against a wikipedia.org image.

Change-Id: I4e5a137e0f6dbedc45ec2c8393590919e23a26be
This commit is contained in:
Aaron Arcos 2013-11-21 11:50:27 -08:00 committed by MarkTraceur
parent ec01c2a387
commit c38fa2fbfe
3 changed files with 69 additions and 15 deletions

View file

@ -26,6 +26,12 @@
oo.inheritClass( LightboxInterface, MLBInterface );
/**
* Expose base class for testing? There must be a better way !!!
* @private
*/
LightboxInterface.BaseClass = MLBInterface;
LIP = LightboxInterface.prototype;
LIP.load = function ( image ) {
@ -390,5 +396,6 @@
$( document ).off( 'keydown', handleKeyDown ).on( 'keydown', handleKeyDown );
};
// We are overwriting what is already set in window.LightboxInterface, shouldn't it be 'mw.LightboxInterface' ???
window.LightboxInterface = LightboxInterface;
}( mediaWiki, jQuery, OO, window.LightboxInterface ) );

View file

@ -94,6 +94,10 @@
this.$imageDiv.empty();
lightboxHooks.callAll( 'clearInterface', this );
if ( this.resizeListener ) {
window.removeEventListener( 'resize', this.resizeListener );
}
};
LIP.attach = function () {
@ -147,23 +151,42 @@
}
};
/**
* @protected
*/
LIP.resizeCallback = function() {
// TODO: This is called even when the Lightbox is not attached !
var result = lightboxHooks.callAll( 'imageResize', this );
if ( result !== false ) {
this.autoResizeImage();
}
};
/**
* @protected
*/
LIP.loadCallback = function ( image, ele ) {
var iface = this;
image.globalMaxWidth = ele.width;
image.globalMaxHeight = ele.height;
this.$image = $( ele );
this.autoResizeImage();
// Capture listener so we can remove it later, otherwise
// we are going to leak listeners !
this.resizeListener = function () { iface.resizeCallback(); };
window.addEventListener( 'resize', this.resizeListener );
lightboxHooks.callAll( 'imageLoaded', this );
};
LIP.load = function ( image ) {
var ele = image.getImageElement( function () {
image.globalMaxWidth = ele.width;
image.globalMaxHeight = ele.height;
iface.$image = $( ele );
iface.autoResizeImage();
window.addEventListener( 'resize', function () {
var result = lightboxHooks.callAll( 'imageResize', iface );
if ( result !== false ) {
iface.autoResizeImage();
}
} );
lightboxHooks.callAll( 'imageLoaded', iface );
iface.loadCallback( image, ele );
} ),
iface = this;

View file

@ -26,4 +26,28 @@
// UI areas not attached to the document anymore.
checkIfUIAreasAttachedToDocument(0);
} );
QUnit.asyncTest( 'Check we are saving the resize listener', 2, function ( assert ) {
var img = new window.LightboxImage('http://en.wikipedia.org/w/skins/vector/images/search-ltr.png'),
lightbox = new window.LightboxInterface.BaseClass();
// resizeListener not saved yet
assert.strictEqual( this.resizeListener, undefined, 'Listener is not saved yet' );
// Save original loadCallback
lightbox.originalLoadCallback = lightbox.loadCallback;
// Mock loadCallback
lightbox.loadCallback = function ( image, ele ) {
// Call original loadCallback
this.originalLoadCallback( image, ele );
// resizeListener should have been saved
assert.notStrictEqual( this.resizeListener, undefined, 'Saved listener !' );
QUnit.start();
};
lightbox.load(img);
} );
}( mediaWiki, jQuery ) );