diff --git a/resources/mmv/mmv.less b/resources/mmv/mmv.less index d2e098e95..7695c7424 100644 --- a/resources/mmv/mmv.less +++ b/resources/mmv/mmv.less @@ -67,6 +67,10 @@ } } +.cursor-hidden { + cursor: none; +} + .mlb-image-wrapper { position: fixed; } diff --git a/resources/mmv/mmv.lightboxinterface.js b/resources/mmv/mmv.lightboxinterface.js index ba69a5fa6..98f382810 100644 --- a/resources/mmv/mmv.lightboxinterface.js +++ b/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 ) ); diff --git a/resources/mmv/ui/mmv.ui.buttons.js b/resources/mmv/ui/mmv.ui.buttons.js index a0347db48..c0e364a6d 100644 --- a/resources/mmv/ui/mmv.ui.buttons.js +++ b/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 ); }; diff --git a/resources/mmv/ui/mmv.ui.buttons.less b/resources/mmv/ui/mmv.ui.buttons.less index 92a8d6b7e..1c4fde236 100644 --- a/resources/mmv/ui/mmv.ui.buttons.less +++ b/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;