Hide mouse cursor when buttons are faded out in fullscreen

Change-Id: Ie7bec07a9c79cb5ffde586ccd3cfdd3eac519047
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/210

resources/mmv/mmv.less

@@ -67,6 +67,10 @@
 	}
 }
 
+.cursor-hidden {
+	cursor: none;
+}
+
 .mlb-image-wrapper {
 	position: fixed;
 }

resources/mmv/mmv.lightboxinterface.js

@@ -143,12 +143,15 @@
 			history.pushState( {}, '', hashFragment );
 		}
 
-		this.handleEvent( 'keydown', function( e ) { ui.keydown( e ); } );
+		this.handleEvent( 'keydown', function ( e ) { ui.keydown( e ); } );
 
 		// mousemove generates a ton of events, which is why we throttle it
 		this.handleEvent( 'mousemove.lip', $.throttle( 250, function( e ) {
 			ui.mousemove( e );
 		} ) );
+
+		this.handleEvent( 'mmv-faded-out', function ( e ) { ui.fadedOut( e ); } );
+		this.handleEvent( 'mmv-fade-stopped', function ( e ) { ui.fadeStopped( e ); } );
 	};
 
 	LIP.load = function ( image ) {
@@ -268,13 +271,10 @@
 
 		this.buttons.setOffset( prevNextTop );
 		this.buttons.toggle( showPrevButton, showNextButton );
-
-		if ( this.isFullscreen ) {
-			this.buttons.revealAndFade( this.mousePosition );
-		}
 	};
 
 	/**
+	 * @method
 	 * Gets the widths for a given lightbox image.
 	 * @param {mlb.LightboxImage} image
 	 * @returns {mw.mmv.model.ThumbnailWidth}
@@ -287,6 +287,7 @@
 	};
 
 	/**
+	 * @method
 	 * Gets the widths for the current lightbox image.
 	 * @returns {mw.mmv.model.ThumbnailWidth}
 	 */
@@ -294,5 +295,21 @@
 		return this.getLightboxImageWidths( this.currentImage );
 	};
 
+	/**
+	 * @method
+	 * Called when the buttons have completely faded out and disappeared
+	 */
+	LIP.fadedOut = function () {
+		this.$main.addClass( 'cursor-hidden' );
+	};
+
+	/**
+	 * @method
+	 * Called when the buttons have stopped fading and are back into view
+	 */
+	LIP.fadeStopped = function () {
+		this.$main.removeClass( 'cursor-hidden' );
+	};
+
 	mw.LightboxInterface = LightboxInterface;
 }( mediaWiki, jQuery, OO, window.LightboxInterface ) );

resources/mmv/ui/mmv.ui.buttons.js

@@ -95,7 +95,10 @@
 	Buttons.prototype.stopFade = function () {
 		this.$buttons
 			.stop( true )
+			.removeClass( 'hidden' )
 			.css( 'opacity', '' );
+
+		this.$container.trigger( $.Event( 'mmv-fade-stopped' ) );
 	};
 
 	/**
@@ -116,7 +119,11 @@
 
 		// We don't use animation chaining because delay() can't be stop()ed
 		this.buttonsFadeTimeout = setTimeout( function() {
-			buttons.$buttons.not( '.disabled' ).animate( { opacity: 0 }, 1000 );
+			buttons.$buttons.not( '.disabled' ).animate( { opacity: 0 }, 1000, 'swing',
+				function () {
+					buttons.$buttons.addClass( 'hidden' );
+					buttons.$container.trigger( $.Event( 'mmv-faded-out' ) );
+				} );
 		}, 1500 );
 	};
 

resources/mmv/ui/mmv.ui.buttons.less

@@ -17,6 +17,19 @@
 	}
 }
 
+.mlb-close.hidden,
+.mlb-fullscreen.hidden,
+.mw-mlb-next-image.hidden,
+.mw-mlb-prev-image.hidden {
+	display: none;
+}
+
+.cursor-hidden {
+	.mlb-close, .mlb-fullscreen, .mw-mlb-next-image, .mw-mlb-prev-image {
+		cursor: none;
+	}
+}
+
 .mlb-close,
 .mlb-fullscreen {
 	right: @buttons-offset;