wikimedia/mediawiki-skins-MinervaNeue
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue synced 2024-11-28 16:10:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Avoid abrupt and jarring white flash in media viewer

Browse source 
Previously, the image overlay would always be loaded asynchronously.
Given clicking left/right opens a new mediaviewer this left a jarring
white flash. By loading the image overlay synchronously after the first
has been loaded, we avoid this flash.

Note, the task does propose preloading and animating the images
but this is a much bigger change and deemed out of scope for this
particular task.

Additional change:
* Use a shared mw.Api instance for ImageOverlay and PageGateway

Bug: T197110
Change-Id: I28d06b34cdea4fedcd7fb754572191e904ecc81a
This commit is contained in:
jdlrobson 2018-07-26 18:47:05 +08:00 committed by Nicholas Ray
parent 3e4b8e8d21
commit ba064c2013
1 changed files with 35 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
resources/skins.minerva.scripts/init.js
View file

@ -11,6 +11,7 @@
OverlayManager = M.require( 'mobile.startup/OverlayManager' ), OverlayManager = M.require( 'mobile.startup/OverlayManager' ),
overlayManager = new OverlayManager( require( 'mediawiki.router' ) ), overlayManager = new OverlayManager( require( 'mediawiki.router' ) ),
page = M.getCurrentPage(), page = M.getCurrentPage(),
api = new mw.Api(),
thumbs = page.getThumbnails(); thumbs = page.getThumbnails();
/** /**
@ -92,37 +93,53 @@
} }
} }
/**
* Make an instance of an ImageOverlay. This function assumes that the module
* providing the ImageOverlay has been asynchronously loaded.
* @method
* @ignore
* @param {string} title Url of image
* @return {ImageOverlay}
*/
function makeImageOverlay( title ) {
var ImageOverlay = M.require( 'mobile.mediaViewer/ImageOverlay' ),
imageOverlay = new ImageOverlay( {
api: api,
thumbnails: thumbs,
title: decodeURIComponent( title )
} );
imageOverlay.on( ImageOverlay.EVENT_EXIT, function () {
// Actually dismiss the overlay whenever the cross is closed.
window.location.hash = '';
// Clear the hash.
router.navigate( '' );
} );
imageOverlay.on( ImageOverlay.EVENT_SLIDE, function ( nextThumbnail ) {
routeThumbnail( nextThumbnail );
} );
return imageOverlay;
}
/** /**
* Load image overlay * Load image overlay
* @method * @method
* @ignore * @ignore
* @uses ImageOverlay * @uses ImageOverlay
* @param {string} title Url of image * @param {string} title Url of image
* @return {JQuery.Deferred} * @return {JQuery.Deferred|ImageOverlay}
*/ */
function loadImageOverlay( title ) { function loadImageOverlay( title ) {
if ( mw.loader.getState( 'mmv.bootstrap' ) === 'ready' ) { if ( mw.loader.getState( 'mmv.bootstrap' ) === 'ready' ) {
// This means MultimediaViewer has been installed and is loaded. // This means MultimediaViewer has been installed and is loaded.
// Avoid loading it (T169622) // Avoid loading it (T169622)
return $.Deferred().reject(); return $.Deferred().reject();
} else if ( mw.loader.getState( 'mobile.mediaViewer' ) === 'ready' ) {
// If module already loaded, do this synchronously to avoid the event loop causing
// a visible flash (see T197110)
return makeImageOverlay( title );
} else { } else {
return loader.loadModule( 'mobile.mediaViewer' ).then( function () { return loader.loadModule( 'mobile.mediaViewer' ).then( function () {
var ImageOverlay = M.require( 'mobile.mediaViewer/ImageOverlay' ), return makeImageOverlay( title );
imageOverlay = new ImageOverlay( {
api: new mw.Api(),
thumbnails: thumbs,
title: decodeURIComponent( title )
} );
imageOverlay.on( ImageOverlay.EVENT_EXIT, function () {
// Actually dismiss the overlay whenever the cross is closed.
window.location.hash = '';
// Clear the hash.
router.navigate( '' );
} );
imageOverlay.on( ImageOverlay.EVENT_SLIDE, function ( nextThumbnail ) {
routeThumbnail( nextThumbnail );
} );
return imageOverlay;
} ); } );
} }
} }
@ -134,7 +151,7 @@
return loader.loadModule( 'mobile.languages.structured', true ).then( function ( loadingOverlay ) { return loader.loadModule( 'mobile.languages.structured', true ).then( function ( loadingOverlay ) {
var PageGateway = M.require( 'mobile.startup/PageGateway' ), var PageGateway = M.require( 'mobile.startup/PageGateway' ),
gateway = new PageGateway( new mw.Api() ), gateway = new PageGateway( api ),
LanguageOverlay = M.require( 'mobile.languages.structured/LanguageOverlay' ); LanguageOverlay = M.require( 'mobile.languages.structured/LanguageOverlay' );
return gateway.getPageLanguages( mw.config.get( 'wgPageName' ), lang ).then( function ( data ) { return gateway.getPageLanguages( mw.config.get( 'wgPageName' ), lang ).then( function ( data ) {