Display black overlay while the viewer JS is loading

I went for this option because it was the fastest to implement.
I think we should wait until we make the change to core to expose
image dimensions before we consider switching to another strategy.

Change-Id: I61c9342a2d6d6fc24a24e0988b3cf7f9a06859a2
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/248
This commit is contained in:
Gilles Dubuc 2014-03-28 09:06:53 +01:00
parent 497b3a5694
commit 685f42f05f
9 changed files with 99 additions and 43 deletions

View file

@ -616,6 +616,10 @@ call_user_func( function() {
'mmv.bootstrap.js',
),
'styles' => array(
'mmv.bootstrap.less',
),
'dependencies' => array(
'jquery.hashchange',
'mediawiki.Title',

View file

@ -61,11 +61,14 @@
return deferred.reject();
}
bs.setupOverlay();
mw.loader.using( 'mmv', function() {
bs.isCSSReady( deferred );
}, function ( error ) {
mw.log( error.message );
deferred.reject( error.message );
bs.cleanupOverlay();
} );
return deferred.done( function ( viewer ) {
@ -257,6 +260,8 @@
$( document ).on( 'mmv.hash', function ( e ) {
self.internalHashChange( e );
} ).on( 'mmv.close', function () {
self.cleanupOverlay();
} );
};
@ -268,5 +273,27 @@
$( document ).off( 'mmv.hash' );
};
/**
* Sets up the overlay while the viewer loads
*/
MMVB.setupOverlay = function () {
this.$overlay = $( '<div>' )
.addClass( 'mlb-overlay' );
$( document.body ).addClass( 'mw-mlb-lightbox-open' )
.append( this.$overlay );
};
/**
* Cleans up the overlay
*/
MMVB.cleanupOverlay = function () {
$( document.body ).removeClass( 'mw-mlb-lightbox-open' );
if ( this.$overlay ) {
this.$overlay.remove();
}
};
mw.mmv.MultimediaViewerBootstrap = MultimediaViewerBootstrap;
}( mediaWiki, jQuery ) );

View file

@ -0,0 +1,27 @@
.mlb-overlay {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 1000;
background-color: rgb(0,0,0);
}
body.mw-mlb-lightbox-open {
overflow-y: auto;
}
body.mw-mlb-lightbox-open #mw-page-base,
body.mw-mlb-lightbox-open #mw-head-base,
body.mw-mlb-lightbox-open #mw-navigation,
body.mw-mlb-lightbox-open #mw-footer,
body.mw-mlb-lightbox-open #content {
/** Stop the article from scrolling in the background */
display: none;
}
body.mw-mlb-lightbox-open > :not(.mlb-overlay, .mlb-wrapper) {
/** Stop the article from scrolling in the background */
display: none;
}

View file

@ -225,8 +225,6 @@
this.preloadThumbnails();
this.preloadFullscreenThumbnail( image );
$( document.body ).addClass( 'mw-mlb-lightbox-open' );
imageWidths = this.ui.canvas.getCurrentImageWidths();
this.resetBlurredThumbnailStates();
@ -583,7 +581,8 @@
* Handles close event coming from the lightbox
*/
MMVP.close = function () {
$( document.body ).removeClass( 'mw-mlb-lightbox-open' );
$( document ).trigger( $.Event( 'mmv.close' ) );
if ( comingFromHashChange === false ) {
$( document ).trigger( $.Event( 'mmv.hash', { hash : '#' } ) );
} else {

View file

@ -184,10 +184,6 @@ body.mobile .mw-mlb-controls,
right: 0px;
}
.mlb-overlay {
background-color: rgb(0,0,0);
}
.mw-mlb-title-contain {
position: relative;
}
@ -354,19 +350,6 @@ body.mobile .mw-mlb-controls,
width: 50%;
}
body.mw-mlb-lightbox-open {
overflow-y: auto;
}
body.mw-mlb-lightbox-open #mw-page-base,
body.mw-mlb-lightbox-open #mw-head-base,
body.mw-mlb-lightbox-open #mw-navigation,
body.mw-mlb-lightbox-open #mw-footer,
body.mw-mlb-lightbox-open #content {
/** Stop the article from scrolling in the background */
display: none;
}
.mw-mlb-drag-affordance {
width: 100%;
height: @drag-height;

View file

@ -55,9 +55,6 @@
// SVG filter, needed to achieve blur in Firefox
this.$filter = $( '<svg><filter id="gaussian-blur"><fegaussianblur stdDeviation="3"></filter></svg>' );
this.$overlay = $( '<div>' )
.addClass( 'mlb-overlay' );
this.$wrapper = $( '<div>' )
.addClass( 'mlb-wrapper' );
@ -176,8 +173,7 @@
$parent
.append(
this.$wrapper,
this.$overlay
this.$wrapper
);
this.currentlyAttached = true;
@ -204,7 +200,6 @@
.off( 'jq-fullscreen-change.lip' );
this.$wrapper.detach();
this.$overlay.detach();
this.currentlyAttached = false;

View file

@ -1,15 +1,5 @@
@import "ui/mmv.mixins";
.mlb-overlay {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 1000;
background-color: rgba(0,0,0,0.9);
}
.mlb-wrapper {
position: fixed;
top: 0px;

View file

@ -27,7 +27,7 @@
return bootstrap;
}
QUnit.test( 'Promise does not hang on ResourceLoader errors', 1, function ( assert ) {
QUnit.test( 'Promise does not hang on ResourceLoader errors', 3, function ( assert ) {
var oldUsing = mw.loader.using,
bootstrap,
errorMessage = 'loading failed';
@ -40,6 +40,14 @@
bootstrap = createBootstrap();
bootstrap.setupOverlay = function () {
assert.ok( true, 'Overlay was set up' );
};
bootstrap.cleanupOverlay = function () {
assert.ok( true, 'Overlay was cleaned up' );
};
QUnit.stop();
bootstrap.loadViewer().fail( function ( message ) {
@ -49,7 +57,7 @@
} );
} );
QUnit.test( 'Check viewer invoked when clicking on legit image links', 2, function ( assert ) {
QUnit.test( 'Check viewer invoked when clicking on legit image links', 4, function ( assert ) {
// TODO: Is <div class="gallery"><span class="image"><img/></span></div> valid ???
var div, link, link2, link3, bootstrap,
viewer = { initWithThumbs : $.noop };
@ -69,6 +77,10 @@
// Create a new bootstrap object to trigger the DOM scan, etc.
bootstrap = createBootstrap( viewer );
bootstrap.setupOverlay = function () {
assert.ok( true, 'Overlay was set up' );
};
viewer.loadImageByTitle = function() {
assert.ok( true, 'Image loaded' );
};
@ -79,6 +91,10 @@
// Click on legit link
link2.trigger( { type : 'click', which : 1 } );
bootstrap.setupOverlay = function () {
assert.ok( false, 'Overlay was not set up' );
};
viewer.loadImageByTitle = function() {
assert.ok( false, 'Image should not be loaded' );
};
@ -106,7 +122,7 @@
link.trigger( { type : 'click', which : 1 } );
} );
QUnit.test( 'Accept only left clicks without modifier keys, skip the rest', 1, function ( assert ) {
QUnit.test( 'Accept only left clicks without modifier keys, skip the rest', 2, function ( assert ) {
var $div, $link, bootstrap,
viewer = { initWithThumbs : $.noop };
@ -118,6 +134,10 @@
$link = $div.find( 'a.image' );
bootstrap.setupOverlay = function () {
assert.ok( true, 'Overlay was set up' );
};
viewer.loadImageByTitle = function() {
assert.ok( true, 'Image loaded' );
};
@ -125,6 +145,10 @@
// Handle valid left click, it should try to load the image
$link.trigger( { type : 'click', which : 1 } );
bootstrap.setupOverlay = function () {
assert.ok( false, 'Overlay was not set up' );
};
viewer.loadImageByTitle = function() {
assert.ok( false, 'Image should not be loaded' );
};
@ -136,7 +160,7 @@
$link.trigger( { type : 'click', which : 2 } );
} );
QUnit.test( 'Ensure that the correct title is loaded when clicking', 1, function ( assert ) {
QUnit.test( 'Ensure that the correct title is loaded when clicking', 2, function ( assert ) {
var bootstrap,
viewer = { initWithThumbs : $.noop },
$div = createGallery( 'foo.jpg' ),
@ -149,10 +173,14 @@
// Create a new bootstrap object to trigger the DOM scan, etc.
bootstrap = createBootstrap( viewer );
bootstrap.setupOverlay = function () {
assert.ok( true, 'Overlay was set up' );
};
$link.trigger( { type : 'click', which : 1 } );
} );
QUnit.test( 'Validate new LightboxImage object has sane constructor parameters', 6, function ( assert ) {
QUnit.test( 'Validate new LightboxImage object has sane constructor parameters', 7, function ( assert ) {
var bootstrap,
$div,
$link,
@ -178,6 +206,10 @@
// Create a new bootstrap object to trigger the DOM scan, etc.
bootstrap = createBootstrap( viewer );
bootstrap.setupOverlay = function () {
assert.ok( true, 'Overlay was set up' );
};
$link.trigger( { type : 'click', which : 1 } );
} );

View file

@ -12,7 +12,7 @@
QUnit.module( 'mmv.lightboxInterface', QUnit.newMwEnvironment() );
QUnit.test( 'Sanity test, object creation and ui construction', 23, function ( assert ) {
QUnit.test( 'Sanity test, object creation and ui construction', 20, function ( assert ) {
var lightbox = new mw.mmv.LightboxInterface();
stubScrollTo();
@ -21,7 +21,6 @@
var msg = inDocument === 1 ? ' ' : ' not ';
assert.strictEqual( $( '.mlb-wrapper' ).length, inDocument, 'Wrapper area' + msg + 'attached.' );
assert.strictEqual( $( '.mlb-main' ).length, inDocument, 'Main area' + msg + 'attached.' );
assert.strictEqual( $( '.mlb-overlay' ).length, inDocument, 'Overlay area' + msg + 'attached.' );
assert.strictEqual( $( '.mw-mlb-title' ).length, inDocument, 'Title area' + msg + 'attached.' );
assert.strictEqual( $( '.mw-mlb-author' ).length, inDocument, 'Author area' + msg + 'attached.' );
assert.strictEqual( $( '.mw-mlb-image-desc' ).length, inDocument, 'Description area' + msg + 'attached.' );