' )
+ .addClass( 'mw-mlb-progress empty' )
+ .appendTo( this.$controlBar );
+
+ this.$percent = $( '
' )
+ .addClass( 'mw-mlb-progress-percent' )
+ .appendTo( this.$progress );
+ };
+
// *********************************
// ******** Setting methods ********
// *********************************
@@ -716,5 +733,19 @@
}
};
+ /**
+ * Handles the progress display when a percentage of progress is received
+ * @param {number} percent
+ */
+ MPP.percent = function ( percent ) {
+ if ( percent < 100 ) {
+ this.$percent.animate( { width : percent + '%' } );
+ this.$progress.removeClass( 'empty' );
+ } else {
+ this.$percent.css( { width : 0 } );
+ this.$progress.addClass( 'empty' );
+ }
+ };
+
mw.mmv.ui.MetadataPanel = MetadataPanel;
}( mediaWiki, jQuery, OO, moment ) );
diff --git a/tests/qunit/mmv/mmv.lightboxinterface.test.js b/tests/qunit/mmv/mmv.lightboxinterface.test.js
index b5c70f7a8..a71cd9e6e 100644
--- a/tests/qunit/mmv/mmv.lightboxinterface.test.js
+++ b/tests/qunit/mmv/mmv.lightboxinterface.test.js
@@ -62,9 +62,9 @@
lightbox.originalShowImage = lightbox.showImage;
// Mock showImage
- lightbox.showImage = function ( image, ele ) {
+ lightbox.showImage = function ( image, $ele ) {
// Call original showImage
- this.originalShowImage( image, ele );
+ this.originalShowImage( image, $ele );
// resizeListener should have been saved
assert.notStrictEqual( this.resizeListener, undefined, 'Saved listener !' );
@@ -316,7 +316,8 @@
keydown.which = 38; // Up arrow
$document.trigger( keydown );
- assert.strictEqual( Math.round( $.scrollTo().scrollTop() ), lightbox.panel.$imageMetadata.height() + 1,
+ assert.strictEqual( Math.round( $.scrollTo().scrollTop() ),
+ lightbox.panel.$imageMetadata.height() + 1,
'scrollTo scrollTop should be set to the metadata height + 1 after pressing up arrow' );
assert.ok( lightbox.panel.$dragIcon.hasClass( 'pointing-down' ),
'Chevron pointing down after pressing up arrow' );
@@ -333,7 +334,8 @@
lightbox.panel.$dragIcon.click();
- assert.strictEqual( Math.round( $.scrollTo().scrollTop() ), lightbox.panel.$imageMetadata.height() + 1,
+ assert.strictEqual( Math.round( $.scrollTo().scrollTop() ),
+ lightbox.panel.$imageMetadata.height() + 1,
'scrollTo scrollTop should be set to the metadata height + 1 after clicking the chevron once' );
assert.ok( lightbox.panel.$dragIcon.hasClass( 'pointing-down' ),
'Chevron pointing down after clicking the chevron once' );
@@ -385,4 +387,44 @@
mw.mmv.mediaViewer.lightbox = oldMWLightbox;
mw.mmv.mediaViewer.ui = oldMWUI;
} );
+
+ QUnit.test( 'Unblur', 3, function ( assert ) {
+ var lightbox = new mw.mmv.LightboxInterface( mw.mediaViewer ),
+ oldAnimate = $.fn.animate;
+
+ $.fn.animate = function ( target, options ) {
+ var self = this,
+ lastValue;
+
+ $.each( target, function ( key, value ) {
+ lastValue = self.key = value;
+ } );
+
+ if ( options ) {
+ if ( options.step ) {
+ options.step.call( this, lastValue );
+ }
+
+ if ( options.complete ) {
+ options.complete.call( this );
+ }
+ }
+ };
+
+ // Attach lightbox to testing fixture to avoid interference with other tests.
+ lightbox.attach( '#qunit-fixture' );
+ lightbox.$image = $( '![]()
' );
+
+ lightbox.unblur();
+
+ assert.ok( !lightbox.$image.css( '-webkit-filter' ) || !lightbox.$image.css( '-webkit-filter' ).length,
+ 'Image has no filter left' );
+ assert.strictEqual( parseInt( lightbox.$image.css( 'opacity' ), 10 ), 1,
+ 'Image is fully opaque' );
+ assert.ok( !lightbox.$image.hasClass( 'blurred' ), 'Image has no "blurred" class' );
+
+ lightbox.unattach();
+
+ $.fn.animate = oldAnimate;
+ } );
}( mediaWiki, jQuery ) );
diff --git a/tests/qunit/mmv/mmv.test.js b/tests/qunit/mmv/mmv.test.js
index 38235cee8..229640660 100644
--- a/tests/qunit/mmv/mmv.test.js
+++ b/tests/qunit/mmv/mmv.test.js
@@ -152,4 +152,228 @@
window.location.hash = '';
} );
+
+ QUnit.test( 'Progress', 1, function ( assert ) {
+ var imageDeferred = $.Deferred(),
+ viewer = new mw.mmv.MultimediaViewer(),
+ oldImageGet = mw.mmv.provider.Image.prototype.get,
+ oldImageInfoGet = mw.mmv.provider.ImageInfo.prototype.get,
+ oldThumbnailInfoGet = mw.mmv.provider.ThumbnailInfo.prototype.get;
+
+ viewer.thumbs = [];
+ viewer.displayPlaceholderThumbnail = $.noop;
+ viewer.setImage = $.noop;
+ viewer.scroll = $.noop;
+ viewer.preloadFullscreenThumbnail = $.noop;
+ viewer.fetchSizeIndependentLightboxInfo = function () { return $.Deferred().resolve(); };
+ viewer.lightbox = { iface : {
+ setupForLoad : $.noop,
+ showImage : $.noop,
+ getCurrentImageWidths : function () { return { real : 0 }; },
+ panel : { setImageInfo : $.noop,
+ percent : function ( percent ) {
+ assert.strictEqual( percent, 45,
+ 'Percentage correctly funneled to panel UI' );
+ } }
+ },
+ open : $.noop };
+
+ mw.mmv.provider.Image.prototype.get = function() { return imageDeferred.promise(); };
+ mw.mmv.provider.ImageInfo.prototype.get = function() { return $.Deferred().resolve(); };
+ mw.mmv.provider.ThumbnailInfo.prototype.get = function() { return $.Deferred().resolve( {} ); };
+
+ viewer.loadImage( { filePageTitle : new mw.Title( 'File:Stuff.jpg' ) }, new Image() );
+
+ imageDeferred.notify( 'response', 45 );
+ imageDeferred.resolve();
+
+ viewer.close();
+
+ mw.mmv.provider.Image.prototype.get = oldImageGet;
+ mw.mmv.provider.ImageInfo.prototype.get = oldImageInfoGet;
+ mw.mmv.provider.ThumbnailInfo.prototype.get = oldThumbnailInfoGet;
+ } );
+
+ QUnit.test( 'resetBlurredThumbnailStates', 4, function ( assert ) {
+ var viewer = new mw.mmv.MultimediaViewer();
+
+ assert.ok( !viewer.realThumbnailShown, 'Real thumbnail state is correct' );
+ assert.ok( !viewer.blurredThumbnailShown, 'Placeholder state is correct' );
+
+ viewer.realThumbnailShown = true;
+ viewer.blurredThumbnailShown = true;
+
+ viewer.resetBlurredThumbnailStates();
+
+ assert.ok( !viewer.realThumbnailShown, 'Real thumbnail state is correct' );
+ assert.ok( !viewer.blurredThumbnailShown, 'Placeholder state is correct' );
+ } );
+
+ QUnit.test( 'Placeholder first, then real thumbnail', 4, function ( assert ) {
+ var viewer = new mw.mmv.MultimediaViewer();
+
+ viewer.setImage = $.noop;
+ viewer.lightbox = { iface : {
+ showImage : $.noop
+ } };
+
+ viewer.displayPlaceholderThumbnail(
+ { width : 300 },
+ undefined,
+ $( '![]()
' ).width( 100 ),
+ { css : 300, real : 300 }
+ );
+
+ assert.ok( viewer.blurredThumbnailShown, 'Placeholder state is correct' );
+ assert.ok( !viewer.realThumbnailShown, 'Real thumbnail state is correct' );
+
+ viewer.displayRealThumbnail();
+
+ assert.ok( viewer.realThumbnailShown, 'Real thumbnail state is correct' );
+ assert.ok( viewer.blurredThumbnailShown, 'Placeholder state is correct' );
+ } );
+
+ QUnit.test( 'Real thumbnail first, then placeholder', 4, function ( assert ) {
+ var viewer = new mw.mmv.MultimediaViewer();
+
+ viewer.setImage = $.noop;
+ viewer.lightbox = { iface : {
+ showImage : $.noop
+ } };
+
+ viewer.displayRealThumbnail();
+
+ assert.ok( viewer.realThumbnailShown, 'Real thumbnail state is correct' );
+ assert.ok( !viewer.blurredThumbnailShown, 'Placeholder state is correct' );
+
+ viewer.displayPlaceholderThumbnail(
+ { width : 300 },
+ undefined,
+ $( '![]()
' ).width( 100 ),
+ { css : 300, real : 300 }
+ );
+
+ assert.ok( viewer.realThumbnailShown, 'Real thumbnail state is correct' );
+ assert.ok( !viewer.blurredThumbnailShown, 'Placeholder state is correct' );
+ } );
+
+ QUnit.test( 'displayRealThumbnail', 1, function ( assert ) {
+ var viewer = new mw.mmv.MultimediaViewer();
+
+ viewer.setImage = $.noop;
+ viewer.lightbox = { iface : {
+ unblur : function () { assert.ok( false, 'Image should not be unblurred yet' ); }
+ } };
+ viewer.blurredThumbnailShown = true;
+
+ // Should not result in an unblur (image cache from cache)
+ viewer.displayRealThumbnail( undefined, undefined, undefined, 5 );
+
+ viewer.lightbox.iface.unblur = function () {
+ assert.ok( true, 'Image needs to be unblurred' );
+ };
+
+ // Should result in an unblur (image didn't come from cache)
+ viewer.displayRealThumbnail( undefined, undefined, undefined, 1000 );
+ } );
+
+ QUnit.test( 'displayPlaceholderThumbnail: placeholder big enough that it doesn\'t need blurring, actual image bigger than the lightbox', 5, function ( assert ) {
+ var $image,
+ viewer = new mw.mmv.MultimediaViewer();
+
+ viewer.setImage = $.noop;
+ viewer.lightbox = { iface : {
+ showImage : function () { assert.ok ( true, 'Placeholder shown'); }
+ } };
+
+ $image = $( '![]()
' ).width( 200 ).height( 100 );
+
+ viewer.displayPlaceholderThumbnail(
+ { width : 1000, height : 500 },
+ undefined,
+ $image,
+ { css : 300, real : 300 }
+ );
+
+ assert.strictEqual( $image.width(), 300, 'Placeholder has the right width' );
+ assert.strictEqual( $image.height(), 150, 'Placeholder has the right height' );
+ assert.ok( !$image.hasClass( 'blurred' ), 'Placeholder is not blurred' );
+ assert.ok( !viewer.blurredThumbnailShown, 'Placeholder state is correct' );
+ } );
+
+ QUnit.test( 'displayPlaceholderThumbnail: big-enough placeholder that needs blurring, actual image bigger than the lightbox', 5, function ( assert ) {
+ var $image,
+ viewer = new mw.mmv.MultimediaViewer();
+
+ viewer.setImage = $.noop;
+ viewer.lightbox = { iface : {
+ showImage : function () { assert.ok ( true, 'Placeholder shown'); }
+ } };
+
+ $image = $( '![]()
' ).width( 100 ).height( 50 );
+
+ viewer.displayPlaceholderThumbnail(
+ { width : 1000, height : 500 },
+ undefined,
+ $image,
+ { css : 300, real : 300 }
+ );
+
+ assert.strictEqual( $image.width(), 300, 'Placeholder has the right width' );
+ assert.strictEqual( $image.height(), 150, 'Placeholder has the right height' );
+ assert.ok( $image.hasClass( 'blurred' ), 'Placeholder is blurred' );
+ assert.ok( viewer.blurredThumbnailShown, 'Placeholder state is correct' );
+ } );
+
+ QUnit.test( 'displayPlaceholderThumbnail: big-enough placeholder that needs blurring, actual image smaller than the lightbox', 5, function ( assert ) {
+ var $image,
+ viewer = new mw.mmv.MultimediaViewer(),
+ oldDevicePixelRatio = $.devicePixelRatio;
+
+ $.devicePixelRatio = function () { return 2; };
+
+ viewer.setImage = $.noop;
+ viewer.lightbox = { iface : {
+ showImage : function () { assert.ok ( true, 'Placeholder shown'); }
+ } };
+
+ $image = $( '![]()
' ).width( 100 ).height( 50 );
+
+ viewer.displayPlaceholderThumbnail(
+ { width : 1000, height : 500 },
+ undefined,
+ $image,
+ { css : 1200, real : 1200 }
+ );
+
+ assert.strictEqual( $image.width(), 1000, 'Placeholder has the right width' );
+ assert.strictEqual( $image.height(), 500, 'Placeholder has the right height' );
+ assert.ok( $image.hasClass( 'blurred' ), 'Placeholder is blurred' );
+ assert.ok( viewer.blurredThumbnailShown, 'Placeholder state is correct' );
+
+ $.devicePixelRatio = oldDevicePixelRatio;
+ } );
+
+ QUnit.test( 'displayPlaceholderThumbnail: placeholder too small to be displayed, actual image bigger than the lightbox', 4, function ( assert ) {
+ var $image,
+ viewer = new mw.mmv.MultimediaViewer();
+
+ viewer.lightbox = { iface : {
+ showImage : function () { assert.ok ( false, 'Placeholder shown when it should not'); }
+ } };
+
+ $image = $( '![]()
' ).width( 10 ).height( 5 );
+
+ viewer.displayPlaceholderThumbnail(
+ { width : 1000, height : 500 },
+ undefined,
+ $image,
+ { css : 300, real : 300 }
+ );
+
+ assert.strictEqual( $image.width(), 10, 'Placeholder has the right width' );
+ assert.strictEqual( $image.height(), 5, 'Placeholder has the right height' );
+ assert.ok( !$image.hasClass( 'blurred' ), 'Placeholder is not blurred' );
+ assert.ok( !viewer.blurredThumbnailShown, 'Placeholder state is correct' );
+ } );
}( mediaWiki, jQuery ) );
diff --git a/tests/qunit/mmv/provider/mmv.provider.Image.test.js b/tests/qunit/mmv/provider/mmv.provider.Image.test.js
index 3afed08b1..cd0359f65 100644
--- a/tests/qunit/mmv/provider/mmv.provider.Image.test.js
+++ b/tests/qunit/mmv/provider/mmv.provider.Image.test.js
@@ -24,7 +24,7 @@
assert.ok( imageProvider );
} );
- QUnit.test( 'Image load success test', 2, function ( assert ) {
+ QUnit.test( 'Image load success', 2, function ( assert ) {
var url = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0'
+ 'iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH'
+ '8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC',
@@ -42,7 +42,7 @@
} );
} );
- QUnit.test( 'Image caching test', 6, function ( assert ) {
+ QUnit.test( 'Image caching', 6, function ( assert ) {
var url = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0'
+ 'iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH'
+ '8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC',
@@ -75,10 +75,78 @@
assert.strictEqual( image.src, url2, 'image src is correct');
QUnit.start();
} );
-
} );
- QUnit.asyncTest( 'Image load fail test', 1, function ( assert ) {
+ QUnit.test( 'Image load XHR progress funneling', 7, function ( assert ) {
+ var i = 0,
+ imageProvider = new mw.mmv.provider.Image(),
+ oldPerformance = imageProvider.performance,
+ fakeURL = 'fakeURL',
+ response = 'response';
+
+ imageProvider.performance.delay = 0;
+ imageProvider.imagePreloadingSupported = function () { return true; };
+ imageProvider.rawGet = function () { return $.Deferred().resolve(); };
+
+ imageProvider.performance.newXHR = function () {
+ return { readyState: 4,
+ response: response,
+ send: function () {
+ var self = this;
+
+ // The timeout is necessary because without it notify() happens before
+ // the imageProvider has time to chain its progress() to the returned deferred
+ setTimeout( function () {
+ self.onprogress( { lengthComputable: true, loaded : 10, total : 20 } );
+ self.onreadystatechange();
+ } );
+ },
+
+ open: $.noop };
+ };
+
+ QUnit.stop();
+
+ imageProvider.performance.recordEntry = function ( type, total, url ) {
+ QUnit.start();
+
+ assert.strictEqual( type, 'image', 'Type matches' );
+ assert.strictEqual( url, fakeURL, 'URL matches' );
+
+ imageProvider.performance = oldPerformance;
+
+ return $.Deferred().resolve();
+ };
+
+ QUnit.stop();
+
+ imageProvider.get( fakeURL )
+ .fail( function () {
+ QUnit.start();
+
+ assert.ok( false, 'Image failed to (pretend to) load' );
+ } )
+ .then( function () {
+ QUnit.start();
+
+ assert.ok( true, 'Image was pretend-loaded' );
+ } )
+ .progress( function ( response, percent ) {
+ if ( i === 0 ) {
+ assert.strictEqual( percent, 50, 'Correctly propagated a 50% progress event' );
+ assert.strictEqual( response, response, 'Partial response propagated' );
+ } else if ( i === 1 ) {
+ assert.strictEqual( percent, 100, 'Correctly propagated a 100% progress event' );
+ assert.strictEqual( response, response, 'Partial response propagated' );
+ } else {
+ assert.ok( false, 'Only 2 progress events should propagate' );
+ }
+
+ i++;
+ } );
+ } );
+
+ QUnit.asyncTest( 'Image load fail', 1, function ( assert ) {
var imageProvider = new mw.mmv.provider.Image();
imageProvider.imagePreloadingSupported = function () { return false; };
@@ -90,7 +158,7 @@
} );
} );
- QUnit.test( 'Image load test with preloading supported', 1, function ( assert ) {
+ QUnit.test( 'Image load with preloading supported', 1, function ( assert ) {
var url = mw.config.get( 'wgScriptPath' ) + '/skins/vector/images/search-ltr.png',
imageProvider = new mw.mmv.provider.Image(),
endsWith = function ( a, b ) { return a.indexOf( b ) === a.length - b.length; };
@@ -112,7 +180,7 @@
} );
} );
- QUnit.test( 'Failed image load test with preloading supported', 1, function ( assert ) {
+ QUnit.test( 'Failed image load with preloading supported', 1, function ( assert ) {
var url = 'nosuchimage.png',
imageProvider = new mw.mmv.provider.Image();
diff --git a/tests/qunit/mmv/ui/mmv.ui.metadataPanel.test.js b/tests/qunit/mmv/ui/mmv.ui.metadataPanel.test.js
index 4f79a81f4..e8ae8d029 100644
--- a/tests/qunit/mmv/ui/mmv.ui.metadataPanel.test.js
+++ b/tests/qunit/mmv/ui/mmv.ui.metadataPanel.test.js
@@ -15,7 +15,8 @@
'$usernameLi',
'$locationLi',
'$repoLi',
- '$datetimeLi'
+ '$datetimeLi',
+ '$progress'
];
QUnit.module( 'mmv.ui.metadataPanel', QUnit.newMwEnvironment() );
@@ -193,4 +194,34 @@
assert.strictEqual( result, date1, 'Invalid date is correctly ignored' );
} );
+
+ QUnit.test( 'Progress bar', 8, function ( assert ) {
+ var $qf = $( '#qunit-fixture' ),
+ panel = new mw.mmv.ui.MetadataPanel( $qf, $( '
' ).appendTo( $qf ) ),
+ oldAnimate = $.fn.animate;
+
+ $.fn.animate = function ( target ) {
+ $( this ).css( target );
+ };
+
+ assert.ok( panel.$progress.hasClass( 'empty' ), 'Progress bar is hidden' );
+ assert.strictEqual( panel.$percent.width(), 0, 'Progress bar\'s indicator is at 0' );
+
+ panel.percent( 0 );
+
+ assert.ok( !panel.$progress.hasClass( 'empty' ), 'Progress bar is visible' );
+ assert.strictEqual( panel.$percent.width(), 0, 'Progress bar\'s indicator is at 0' );
+
+ panel.percent( 50 );
+
+ assert.ok( !panel.$progress.hasClass( 'empty' ), 'Progress bar is visible' );
+ assert.strictEqual( panel.$percent.width(), $qf.width() / 2, 'Progress bar\'s indicator is at half' );
+
+ panel.percent( 100 );
+
+ assert.ok( panel.$progress.hasClass( 'empty' ), 'Progress bar is hidden' );
+ assert.strictEqual( panel.$percent.width(), 0, 'Progress bar\'s indicator is at 0' );
+
+ $.fn.animate = oldAnimate;
+ } );
}( mediaWiki, jQuery ) );