mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/MultimediaViewer
synced 2024-09-29 13:17:35 +00:00
fec24e02f7
This tries to fix a number of related issues: * the blurred thumbnail was visible for a split-second sometimes when switching back to an already-loaded image. (Presumably when JS was sluggish enough to take more than 10 ms to execute.) We now check whether the promise is pending before showing a placeholder. (More generally, a lot of unnecessary logic was executed when paging through already loaded images, like displaying the placeholder, so this might make the UI a bit more responsive.) * the blur could get stuck sometimes - I have seen this a few times, but have never been able to reproduce it, so I'm only guessing, but maybe the timing was really unfortunate, and we switched back less than 10 ms before loading finished. We now remove the blur on every branch, just to be sure. * adding a progress handler to a promise might not have any immediate effect, so when switching to an image which was loading, the progress bar reacted too late. We now store the progress state per thumbnail so it is always available immediately. * the progress would animate from 0 to its actual state whenever we navigated to the image. The change on paging is now instant; the progress bar only animates when we are looking at it. * switching quickly back and forthe between a loaded and a loading image resulted in the loading image becoming unblurred. This seems fixed now, I'm not sure why. Maybe the "skip on non-pending promise" logic affects it somehow. Also removes some unused things / renames some things which were confusing, and makes an unrelated fix in the image provider, which kept amassing fail handlers. Change-Id: I580becff246f197ec1bc65e82acd422620e35578 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/489
75 lines
3 KiB
JavaScript
75 lines
3 KiB
JavaScript
/*
|
|
* This file is part of the MediaWiki extension MediaViewer.
|
|
*
|
|
* MediaViewer is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU General Public License as published by
|
|
* the Free Software Foundation, either version 2 of the License, or
|
|
* (at your option) any later version.
|
|
*
|
|
* MediaViewer is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU General Public License
|
|
* along with MediaViewer. If not, see <http://www.gnu.org/licenses/>.
|
|
*/
|
|
|
|
( function( mw, $ ) {
|
|
QUnit.module( 'mmv.ui.ProgressBar', QUnit.newMwEnvironment() );
|
|
|
|
QUnit.test( 'Constructor sanity check', 2, function( assert ) {
|
|
var progressBar = new mw.mmv.ui.ProgressBar( $( '<div>' ) );
|
|
assert.ok( progressBar, 'ProgressBar created sccessfully' );
|
|
assert.ok( progressBar.$progress.hasClass( 'empty' ), 'ProgressBar starts empty' );
|
|
} );
|
|
|
|
QUnit.test( 'animateTo()', 8, function ( assert ) {
|
|
var $qf = $( '#qunit-fixture' ),
|
|
progress = new mw.mmv.ui.ProgressBar( $qf );
|
|
|
|
assert.ok( progress.$progress.hasClass( 'empty' ), 'Progress bar is hidden' );
|
|
assert.strictEqual( progress.$percent.width(), 0, 'Progress bar\'s indicator is at 0' );
|
|
|
|
this.sandbox.stub( $.fn, 'animate', function ( target ) {
|
|
$( this ).css( target );
|
|
assert.strictEqual( target.width, '50%', 'Animation should go to 50%' );
|
|
} );
|
|
progress.animateTo( 50 );
|
|
assert.ok( !progress.$progress.hasClass( 'empty' ), 'Progress bar is visible' );
|
|
assert.strictEqual( progress.$percent.width(), $qf.width() / 2, 'Progress bar\'s indicator is at half' );
|
|
|
|
$.fn.animate.restore();
|
|
this.sandbox.stub( $.fn, 'animate', function ( target, duration, transition, callback ) {
|
|
$( this ).css( target );
|
|
|
|
assert.strictEqual( target.width, '100%', 'Animation should go to 100%' );
|
|
|
|
if ( callback !== undefined ) {
|
|
callback();
|
|
}
|
|
} );
|
|
progress.animateTo( 100 );
|
|
assert.ok( progress.$progress.hasClass( 'empty' ), 'Progress bar is hidden' );
|
|
assert.strictEqual( progress.$percent.width(), 0, 'Progress bar\'s indicator is at 0' );
|
|
} );
|
|
|
|
QUnit.test( 'jumpTo()/hide()', 6, function ( assert ) {
|
|
var $qf = $( '#qunit-fixture' ),
|
|
progress = new mw.mmv.ui.ProgressBar( $qf );
|
|
|
|
assert.ok( progress.$progress.hasClass( 'empty' ), 'Progress bar is hidden' );
|
|
assert.strictEqual( progress.$percent.width(), 0, 'Progress bar\'s indicator is at 0' );
|
|
|
|
progress.jumpTo( 50 );
|
|
|
|
assert.ok( !progress.$progress.hasClass( 'empty' ), 'Progress bar is visible' );
|
|
assert.strictEqual( progress.$percent.width(), $qf.width() / 2, 'Progress bar\'s indicator is at half' );
|
|
|
|
progress.hide();
|
|
|
|
assert.ok( progress.$progress.hasClass( 'empty' ), 'Progress bar is hidden' );
|
|
assert.strictEqual( progress.$percent.width(), 0, 'Progress bar\'s indicator is at 0' );
|
|
} );
|
|
}( mediaWiki, jQuery ) );
|