mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/MultimediaViewer
synced 2024-11-24 00:03:56 +00:00
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:
parent
497b3a5694
commit
685f42f05f
|
@ -616,6 +616,10 @@ call_user_func( function() {
|
|||
'mmv.bootstrap.js',
|
||||
),
|
||||
|
||||
'styles' => array(
|
||||
'mmv.bootstrap.less',
|
||||
),
|
||||
|
||||
'dependencies' => array(
|
||||
'jquery.hashchange',
|
||||
'mediawiki.Title',
|
||||
|
|
|
@ -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 ) );
|
||||
|
|
27
resources/mmv/mmv.bootstrap.less
Normal file
27
resources/mmv/mmv.bootstrap.less
Normal 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;
|
||||
}
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 } );
|
||||
} );
|
||||
|
||||
|
|
|
@ -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.' );
|
||||
|
|
Loading…
Reference in a new issue