Merge "Move clearInterface things to mw.LightboxInterface"

resources/ext.multimediaViewer/ext.multimediaViewer.js

@@ -178,32 +178,6 @@
 				this.$imageMetadata.show();
 			}
 		} );
-
-		lightboxHooks.register( 'clearInterface', function () {
-			this.$license.empty().addClass( 'empty' );
-
-			this.$imageDesc.empty();
-			this.$imageDescDiv.addClass( 'empty' );
-			this.$title.empty();
-			this.$credit.empty().addClass( 'empty' );
-
-			this.$username.empty();
-			this.$usernameLi.addClass( 'empty' );
-
-			this.$repo.empty();
-			this.$repoLi.addClass( 'empty' );
-
-			this.$datetime.empty();
-			this.$datetimeLi.addClass( 'empty' );
-
-			this.$useFile.data( 'title', null );
-			this.$useFile.data( 'link', null );
-			this.$useFile.data( 'src', null );
-			this.$useFile.data( 'isLocal', null );
-			this.$useFileLi.addClass( 'empty' );
-
-			this.$imageDiv.addClass( 'empty' );
-		} );
 	}
 
 	MMVP = MultimediaViewer.prototype;

resources/ext.multimediaViewer/ext.multimediaViewer.lightboxinterface.js

@@ -34,6 +34,40 @@
 
 	LIP = LightboxInterface.prototype;
 
+	LIP.empty = function () {
+		if ( this.handleKeyDown ) {
+			// Clear events on document
+			$( document ).off( 'keydown', this.handleKeyDown );
+			this.handleKeyDown = undefined;
+		}
+
+		this.$license.empty().addClass( 'empty' );
+
+		this.$imageDesc.empty();
+		this.$imageDescDiv.addClass( 'empty' );
+		this.$title.empty();
+		this.$credit.empty().addClass( 'empty' );
+
+		this.$username.empty();
+		this.$usernameLi.addClass( 'empty' );
+
+		this.$repo.empty();
+		this.$repoLi.addClass( 'empty' );
+
+		this.$datetime.empty();
+		this.$datetimeLi.addClass( 'empty' );
+
+		this.$useFile.data( 'title', null );
+		this.$useFile.data( 'link', null );
+		this.$useFile.data( 'src', null );
+		this.$useFile.data( 'isLocal', null );
+		this.$useFileLi.addClass( 'empty' );
+
+		this.$imageDiv.addClass( 'empty' );
+
+		MLBInterface.prototype.empty.call( this );
+	};
+
 	LIP.load = function ( image ) {
 		var hashFragment = '#mediaviewer/' + mw.mediaViewer.currentImageFilename + '/' + mw.mediaViewer.lightbox.currentIndex;
 
@@ -354,7 +388,7 @@
 	};
 
 	LIP.initializeNavigation = function () {
-		function handleKeyDown( e ) {
+		this.handleKeyDown = this.handleKeyDown || function ( e ) {
 			var isRtl = $( document.body ).hasClass( 'rtl' );
 
 			switch ( e.keyCode ) {
@@ -375,7 +409,7 @@
 					}
 					break;
 			}
-		}
+		};
 
 		this.$nextButton = $( '<div>' )
 			.addClass( 'mw-mlb-next-image disabled' )
@@ -393,7 +427,7 @@
 			} )
 			.appendTo( this.$main );
 
-		$( document ).off( 'keydown', handleKeyDown ).on( 'keydown', handleKeyDown );
+		$( document ).off( 'keydown', this.handleKeyDown ).on( 'keydown', this.handleKeyDown );
 	};
 
 	// We are overwriting what is already set in window.LightboxInterface, shouldn't it be 'mw.LightboxInterface' ???

tests/qunit/lightboxinterface.test.js

@@ -1,4 +1,25 @@
 ( function ( mw, $ ) {
+	var thingsShouldBeEmptied = [
+			'$license',
+			'$imageDesc',
+			'$title',
+			'$credit',
+			'$username',
+			'$repo',
+			'$datetime'
+		],
+
+		thingsShouldHaveEmptyClass = [
+			'$license',
+			'$imageDescDiv',
+			'$credit',
+			'$usernameLi',
+			'$repoLi',
+			'$datetimeLi',
+			'$useFileLi',
+			'$imageDiv'
+		];
+
 	QUnit.module( 'ext.multimediaViewer.lightboxInterface', QUnit.newMwEnvironment() );
 
 	QUnit.test( 'Sanity test, object creation and ui construction', 9, function ( assert ) {
@@ -50,4 +71,22 @@
 		lightbox.load(img);
 	} );
 
+	QUnit.test( 'The interface is emptied properly when necessary', thingsShouldBeEmptied.length + thingsShouldHaveEmptyClass.length + 2, function ( assert ) {
+		var i,
+			lightbox = new window.LightboxInterface();
+
+		assert.notStrictEqual( lightbox.handleKeyDown, undefined, 'The keydown handler is present before empty() gets called' );
+
+		lightbox.empty();
+
+		for ( i = 0; i < thingsShouldBeEmptied.length; i++ ) {
+			assert.strictEqual( lightbox[thingsShouldBeEmptied[i]].text(), '', 'We successfully emptied the ' + thingsShouldBeEmptied[i] + ' element' );
+		}
+
+		for ( i = 0; i < thingsShouldHaveEmptyClass.length; i++ ) {
+			assert.strictEqual( lightbox[thingsShouldHaveEmptyClass[i]].hasClass( 'empty' ), true, 'We successfully applied the empty class to the ' + thingsShouldHaveEmptyClass[i] + ' element' );
+		}
+
+		assert.strictEqual( lightbox.handleKeyDown, undefined, 'The keydown handler got removed' );
+	} );
 }( mediaWiki, jQuery ) );