Hide mouse cursor when buttons are faded out in fullscreen

Change-Id: Ie7bec07a9c79cb5ffde586ccd3cfdd3eac519047
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/210
This commit is contained in:
Gilles Dubuc 2014-02-18 09:25:48 +01:00
parent 8da610aa95
commit 9a0a601278
4 changed files with 47 additions and 6 deletions

View file

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

View file

@ -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 ) );

View file

@ -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 );
};

View file

@ -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;