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 95370432f..f451c0670 100644 --- a/resources/mmv/mmv.lightboxinterface.js +++ b/resources/mmv/mmv.lightboxinterface.js @@ -156,12 +156,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 ); } ); }; /** @@ -299,13 +302,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} @@ -318,6 +318,7 @@ }; /** + * @method * Gets the widths for the current lightbox image. * @returns {mw.mmv.model.ThumbnailWidth} */ @@ -325,5 +326,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 9689bf404..4b12a30e8 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 8917c6fe2..ade6ea4b6 100644 --- a/resources/mmv/ui/mmv.ui.buttons.less +++ b/resources/mmv/ui/mmv.ui.buttons.less @@ -21,6 +21,19 @@ .unselectable; } +.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; @@ -85,4 +98,4 @@ &:hover { margin-left: -4px; } -} \ No newline at end of file +}