2013-11-27 21:57:45 +00:00
( function ( mw , $ ) {
2014-01-23 21:44:26 +00:00
QUnit . module ( 'mmv' , QUnit . newMwEnvironment ( ) ) ;
2013-11-27 21:57:45 +00:00
2014-02-13 09:52:40 +00:00
QUnit . test ( 'eachPrealoadableLightboxIndex()' , 11 , function ( assert ) {
2014-11-20 23:39:29 +00:00
var viewer = new mw . mmv . MultimediaViewer ( { get : $ . noop } ) ,
2014-02-13 09:52:40 +00:00
expectedIndices ,
i ;
viewer . preloadDistance = 3 ;
2014-02-17 15:09:23 +00:00
viewer . thumbs = [ ] ;
// 0..10
for ( i = 0 ; i < 11 ; i ++ ) {
viewer . thumbs . push ( { image : false } ) ;
}
2014-02-13 09:52:40 +00:00
2014-03-05 02:24:18 +00:00
viewer . currentIndex = 2 ;
2014-02-13 09:52:40 +00:00
i = 0 ;
expectedIndices = [ 2 , 3 , 1 , 4 , 0 , 5 ] ;
viewer . eachPrealoadableLightboxIndex ( function ( index ) {
assert . strictEqual ( index , expectedIndices [ i ++ ] , 'preload on left edge' ) ;
} ) ;
2014-03-05 02:24:18 +00:00
viewer . currentIndex = 9 ;
2014-02-13 09:52:40 +00:00
i = 0 ;
expectedIndices = [ 9 , 10 , 8 , 7 , 6 ] ;
viewer . eachPrealoadableLightboxIndex ( function ( index ) {
assert . strictEqual ( index , expectedIndices [ i ++ ] , 'preload on right edge' ) ;
} ) ;
} ) ;
2014-02-21 11:16:30 +00:00
QUnit . test ( 'Hash handling' , 7 , function ( assert ) {
var oldUnattach ,
2014-11-20 23:39:29 +00:00
viewer = new mw . mmv . MultimediaViewer ( { get : $ . noop } ) ,
2014-03-05 02:24:18 +00:00
ui = new mw . mmv . LightboxInterface ( ) ,
2014-02-21 11:16:30 +00:00
imageSrc = 'Foo bar.jpg' ,
image = { filePageTitle : new mw . Title ( 'File:' + imageSrc ) } ;
2014-02-24 09:29:14 +00:00
window . location . hash = '' ;
2014-02-21 11:16:30 +00:00
2014-03-04 11:53:53 +00:00
viewer . setupEventHandlers ( ) ;
2014-03-05 02:24:18 +00:00
oldUnattach = ui . unattach ;
2014-02-21 11:16:30 +00:00
2014-03-05 02:24:18 +00:00
ui . unattach = function ( ) {
2014-02-21 11:16:30 +00:00
assert . ok ( true , 'Lightbox was unattached' ) ;
oldUnattach . call ( this ) ;
} ;
2014-03-05 02:24:18 +00:00
viewer . ui = ui ;
2014-02-25 02:28:49 +00:00
viewer . close ( ) ;
2014-02-21 11:16:30 +00:00
2014-02-25 02:28:49 +00:00
assert . ok ( ! viewer . isOpen , 'Viewer is closed' ) ;
2014-02-21 11:16:30 +00:00
2014-02-25 02:28:49 +00:00
viewer . isOpen = true ;
2014-02-21 11:16:30 +00:00
// Verify that passing an invalid mmv hash when the mmv is open triggers unattach()
2014-02-24 09:29:14 +00:00
window . location . hash = 'Foo' ;
2014-02-25 02:28:49 +00:00
viewer . hash ( ) ;
2014-02-21 11:16:30 +00:00
// Verify that mmv doesn't reset a foreign hash
2014-02-24 09:29:14 +00:00
assert . strictEqual ( window . location . hash , '#Foo' , 'Foreign hash remains intact' ) ;
2014-02-25 02:28:49 +00:00
assert . ok ( ! viewer . isOpen , 'Viewer is closed' ) ;
2014-02-21 11:16:30 +00:00
2014-03-05 02:24:18 +00:00
ui . unattach = function ( ) {
2014-02-21 11:16:30 +00:00
assert . ok ( false , 'Lightbox was not unattached' ) ;
oldUnattach . call ( this ) ;
} ;
// Verify that passing an invalid mmv hash when the mmv is closed doesn't trigger unattach()
2014-02-24 09:29:14 +00:00
window . location . hash = 'Bar' ;
2014-02-25 02:28:49 +00:00
viewer . hash ( ) ;
2014-02-21 11:16:30 +00:00
// Verify that mmv doesn't reset a foreign hash
2014-02-24 09:29:14 +00:00
assert . strictEqual ( window . location . hash , '#Bar' , 'Foreign hash remains intact' ) ;
2014-02-21 11:16:30 +00:00
2014-03-05 02:24:18 +00:00
viewer . ui = { images : [ image ] } ;
2014-02-21 11:16:30 +00:00
$ ( '#qunit-fixture' ) . append ( '<a class="image"><img src="' + imageSrc + '"></a>' ) ;
2014-02-25 02:28:49 +00:00
viewer . loadImageByTitle = function ( title ) {
2014-04-14 23:22:28 +00:00
assert . strictEqual ( title . getPrefixedText ( ) , 'File:' + imageSrc , 'The title matches' ) ;
2014-02-21 11:16:30 +00:00
} ;
// Open a valid mmv hash link and check that the right image is requested.
// imageSrc contains a space without any encoding on purpose
2014-02-24 09:29:14 +00:00
window . location . hash = 'mediaviewer/File:' + imageSrc ;
2014-02-25 02:28:49 +00:00
viewer . hash ( ) ;
2014-02-21 11:16:30 +00:00
// Reset the hash, because for some browsers switching from the non-URI-encoded to
// the non-URI-encoded version of the same text with a space will not trigger a hash change
2014-02-24 09:29:14 +00:00
window . location . hash = '' ;
2014-02-25 02:28:49 +00:00
viewer . hash ( ) ;
2014-02-21 11:16:30 +00:00
// Try again with an URI-encoded imageSrc containing a space
2014-02-24 09:29:14 +00:00
window . location . hash = 'mediaviewer/File:' + encodeURIComponent ( imageSrc ) ;
2014-02-25 02:28:49 +00:00
viewer . hash ( ) ;
2014-02-21 11:16:30 +00:00
2014-03-04 11:53:53 +00:00
viewer . cleanupEventHandlers ( ) ;
2014-02-21 11:16:30 +00:00
2014-02-24 09:29:14 +00:00
window . location . hash = '' ;
2014-02-21 11:16:30 +00:00
} ) ;
2014-02-25 13:43:22 +00:00
2014-04-01 07:56:18 +00:00
QUnit . test ( 'Progress' , 4 , function ( assert ) {
2014-02-25 13:43:22 +00:00
var imageDeferred = $ . Deferred ( ) ,
2014-12-02 10:05:12 +00:00
viewer = new mw . mmv . MultimediaViewer ( { get : $ . noop } ) ,
fakeImage = {
filePageTitle : new mw . Title ( 'File:Stuff.jpg' ) ,
extraStatsDeferred : $ . Deferred ( ) . reject ( )
} ;
2014-02-25 13:43:22 +00:00
viewer . thumbs = [ ] ;
viewer . displayPlaceholderThumbnail = $ . noop ;
viewer . setImage = $ . noop ;
viewer . scroll = $ . noop ;
viewer . preloadFullscreenThumbnail = $ . noop ;
2014-12-02 10:05:12 +00:00
viewer . fetchSizeIndependentLightboxInfo = function ( ) { return $ . Deferred ( ) . resolve ( { } ) ; } ;
2014-03-05 02:24:18 +00:00
viewer . ui = {
2014-09-12 18:05:13 +00:00
setFileReuseData : $ . noop ,
setupForLoad : $ . noop ,
2014-12-02 10:05:12 +00:00
canvas : { set : $ . noop ,
Refactor progressbar & blur handling
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
2014-04-25 22:26:34 +00:00
unblurWithAnimation : $ . noop ,
unblur : $ . noop ,
2014-12-02 10:05:12 +00:00
getCurrentImageWidths : function ( ) { return { real : 0 } ; } ,
2014-09-26 18:37:53 +00:00
getDimensions : function ( ) { return { } ; }
} ,
2014-09-12 18:05:13 +00:00
panel : {
setImageInfo : $ . noop ,
2014-05-05 21:44:27 +00:00
scroller : {
2014-09-12 18:05:13 +00:00
animateMetadataOnce : $ . noop
2014-05-05 21:44:27 +00:00
} ,
2014-04-21 21:48:40 +00:00
progressBar : {
Refactor progressbar & blur handling
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
2014-04-25 22:26:34 +00:00
animateTo : this . sandbox . stub ( ) ,
jumpTo : this . sandbox . stub ( )
2014-03-05 02:24:18 +00:00
}
} ,
2014-09-12 18:05:13 +00:00
open : $ . noop } ;
2014-02-25 13:43:22 +00:00
2014-03-04 11:53:53 +00:00
viewer . imageProvider . get = function ( ) { return imageDeferred . promise ( ) ; } ;
2014-12-02 10:05:12 +00:00
viewer . imageInfoProvider . get = function ( ) { return $ . Deferred ( ) . resolve ( { } ) ; } ;
2014-03-04 11:53:53 +00:00
viewer . thumbnailInfoProvider . get = function ( ) { return $ . Deferred ( ) . resolve ( { } ) ; } ;
2014-02-25 13:43:22 +00:00
2014-12-02 10:05:12 +00:00
viewer . loadImage ( fakeImage , new Image ( ) ) ;
Refactor progressbar & blur handling
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
2014-04-25 22:26:34 +00:00
assert . ok ( viewer . ui . panel . progressBar . jumpTo . lastCall . calledWith ( 0 ) ,
'Percentage correctly reset by loadImage' ) ;
assert . ok ( viewer . ui . panel . progressBar . animateTo . lastCall . calledWith ( 5 ) ,
'Percentage correctly animated to 5 by loadImage' ) ;
2014-02-25 13:43:22 +00:00
imageDeferred . notify ( 'response' , 45 ) ;
Refactor progressbar & blur handling
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
2014-04-25 22:26:34 +00:00
assert . ok ( viewer . ui . panel . progressBar . animateTo . lastCall . calledWith ( 45 ) ,
'Percentage correctly funneled to panel UI' ) ;
2014-02-25 13:43:22 +00:00
imageDeferred . resolve ( ) ;
Refactor progressbar & blur handling
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
2014-04-25 22:26:34 +00:00
assert . ok ( viewer . ui . panel . progressBar . animateTo . lastCall . calledWith ( 100 ) ,
'Percentage correctly funneled to panel UI' ) ;
viewer . close ( ) ;
} ) ;
QUnit . test ( 'Progress when switching images' , 11 , function ( assert ) {
var firstImageDeferred = $ . Deferred ( ) ,
secondImageDeferred = $ . Deferred ( ) ,
2014-12-02 10:05:12 +00:00
firstImage = {
index : 1 ,
filePageTitle : new mw . Title ( 'File:First.jpg' ) ,
extraStatsDeferred : $ . Deferred ( ) . reject ( )
} ,
secondImage = {
index : 2 ,
filePageTitle : new mw . Title ( 'File:Second.jpg' ) ,
extraStatsDeferred : $ . Deferred ( ) . reject ( )
} ,
2014-11-20 23:39:29 +00:00
viewer = new mw . mmv . MultimediaViewer ( { get : $ . noop } ) ;
Refactor progressbar & blur handling
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
2014-04-25 22:26:34 +00:00
viewer . thumbs = [ ] ;
viewer . displayPlaceholderThumbnail = $ . noop ;
viewer . setImage = $ . noop ;
viewer . scroll = $ . noop ;
viewer . preloadFullscreenThumbnail = $ . noop ;
viewer . preloadImagesMetadata = $ . noop ;
viewer . preloadThumbnails = $ . noop ;
2014-12-02 10:05:12 +00:00
viewer . fetchSizeIndependentLightboxInfo = function ( ) { return $ . Deferred ( ) . resolve ( { } ) ; } ;
Refactor progressbar & blur handling
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
2014-04-25 22:26:34 +00:00
viewer . ui = {
2014-09-12 18:05:13 +00:00
setFileReuseData : $ . noop ,
Refactor progressbar & blur handling
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
2014-04-25 22:26:34 +00:00
setupForLoad : $ . noop ,
canvas : { set : $ . noop ,
unblurWithAnimation : $ . noop ,
unblur : $ . noop ,
2014-09-26 18:37:53 +00:00
getCurrentImageWidths : function ( ) { return { real : 0 } ; } ,
getDimensions : function ( ) { return { } ; }
} ,
Refactor progressbar & blur handling
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
2014-04-25 22:26:34 +00:00
panel : {
setImageInfo : $ . noop ,
2014-05-05 21:44:27 +00:00
scroller : {
animateMetadataOnce : $ . noop
} ,
Refactor progressbar & blur handling
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
2014-04-25 22:26:34 +00:00
progressBar : {
hide : this . sandbox . stub ( ) ,
animateTo : this . sandbox . stub ( ) ,
jumpTo : this . sandbox . stub ( )
}
} ,
open : $ . noop ,
empty : $ . noop } ;
2014-12-02 10:05:12 +00:00
viewer . imageInfoProvider . get = function ( ) { return $ . Deferred ( ) . resolve ( { } ) ; } ;
Refactor progressbar & blur handling
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
2014-04-25 22:26:34 +00:00
viewer . thumbnailInfoProvider . get = function ( ) { return $ . Deferred ( ) . resolve ( { } ) ; } ;
// load some image
viewer . imageProvider . get = this . sandbox . stub ( ) . returns ( firstImageDeferred ) ;
viewer . loadImage ( firstImage , new Image ( ) ) ;
assert . ok ( viewer . ui . panel . progressBar . jumpTo . lastCall . calledWith ( 0 ) ,
'Percentage correctly reset for new first image' ) ;
assert . ok ( viewer . ui . panel . progressBar . animateTo . lastCall . calledWith ( 5 ) ,
'Percentage correctly animated to 5 for first new image' ) ;
firstImageDeferred . notify ( 'response' , 20 ) ;
assert . ok ( viewer . ui . panel . progressBar . animateTo . lastCall . calledWith ( 20 ) ,
'Percentage correctly animated when active image is loading' ) ;
// change to another image
viewer . imageProvider . get = this . sandbox . stub ( ) . returns ( secondImageDeferred ) ;
viewer . loadImage ( secondImage , new Image ( ) ) ;
assert . ok ( viewer . ui . panel . progressBar . jumpTo . lastCall . calledWith ( 0 ) ,
'Percentage correctly reset for second new image' ) ;
assert . ok ( viewer . ui . panel . progressBar . animateTo . lastCall . calledWith ( 5 ) ,
'Percentage correctly animated to 5 for second new image' ) ;
secondImageDeferred . notify ( 'response' , 30 ) ;
assert . ok ( viewer . ui . panel . progressBar . animateTo . lastCall . calledWith ( 30 ) ,
'Percentage correctly animated when active image is loading' ) ;
// this is the most convenient way of checking for new calls - just reset() and check called
viewer . ui . panel . progressBar . animateTo . reset ( ) ;
viewer . ui . panel . progressBar . jumpTo . reset ( ) ;
firstImageDeferred . notify ( 'response' , 40 ) ;
assert . ok ( ! viewer . ui . panel . progressBar . animateTo . called ,
'Percentage not animated when inactive image is loading' ) ;
assert . ok ( ! viewer . ui . panel . progressBar . jumpTo . called ,
'Percentage not changed when inactive image is loading' ) ;
secondImageDeferred . notify ( 'response' , 50 ) ;
// change back to first image
viewer . loadImage ( firstImage , new Image ( ) ) ;
assert . ok ( viewer . ui . panel . progressBar . jumpTo . lastCall . calledWith ( 40 ) ,
'Percentage jumps to right value when changing images' ) ;
secondImageDeferred . resolve ( ) ;
assert . ok ( ! viewer . ui . panel . progressBar . hide . called ,
'Progress bar not hidden when something finishes in the background' ) ;
// change to second image which has finished loading
viewer . imageProvider . get = this . sandbox . stub ( ) . returns ( secondImageDeferred ) ;
viewer . loadImage ( secondImage , new Image ( ) ) ;
assert . ok ( viewer . ui . panel . progressBar . hide . called ,
'Progress bar not hidden when switching to finished image' ) ;
2014-02-25 13:43:22 +00:00
viewer . close ( ) ;
} ) ;
QUnit . test ( 'resetBlurredThumbnailStates' , 4 , function ( assert ) {
2014-11-20 23:39:29 +00:00
var viewer = new mw . mmv . MultimediaViewer ( { get : $ . noop } ) ;
2014-02-25 13:43:22 +00:00
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 ) {
2014-11-20 23:39:29 +00:00
var viewer = new mw . mmv . MultimediaViewer ( { get : $ . noop } ) ;
2014-02-25 13:43:22 +00:00
viewer . setImage = $ . noop ;
2014-03-05 02:24:18 +00:00
viewer . ui = { canvas : {
Refactor progressbar & blur handling
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
2014-04-25 22:26:34 +00:00
unblurWithAnimation : $ . noop ,
unblur : $ . noop ,
2014-03-04 01:58:27 +00:00
maybeDisplayPlaceholder : function ( ) { return true ; }
2014-03-05 02:24:18 +00:00
} } ;
2014-04-24 01:03:24 +00:00
viewer . imageInfoProvider . get = this . sandbox . stub ( ) ;
2014-02-25 13:43:22 +00:00
2014-04-24 01:03:24 +00:00
viewer . displayPlaceholderThumbnail ( { originalWidth : 100 , originalHeight : 100 } , undefined , undefined ) ;
assert . ok ( viewer . blurredThumbnailShown , 'Placeholder state is correct' ) ;
assert . ok ( ! viewer . realThumbnailShown , 'Real thumbnail state is correct' ) ;
2014-11-20 23:39:29 +00:00
viewer . displayRealThumbnail ( { url : undefined } ) ;
2014-04-24 01:03:24 +00:00
assert . ok ( viewer . realThumbnailShown , 'Real thumbnail state is correct' ) ;
assert . ok ( viewer . blurredThumbnailShown , 'Placeholder state is correct' ) ;
} ) ;
QUnit . test ( 'Placeholder first, then real thumbnail - missing size' , 4 , function ( assert ) {
2014-11-20 23:39:29 +00:00
var viewer = new mw . mmv . MultimediaViewer ( { get : $ . noop } ) ;
2014-04-24 01:03:24 +00:00
viewer . currentIndex = 1 ;
viewer . setImage = $ . noop ;
viewer . ui = { canvas : {
Refactor progressbar & blur handling
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
2014-04-25 22:26:34 +00:00
unblurWithAnimation : $ . noop ,
unblur : $ . noop ,
2014-04-24 01:03:24 +00:00
maybeDisplayPlaceholder : function ( ) { return true ; }
} } ;
viewer . imageInfoProvider . get = this . sandbox . stub ( ) . returns ( $ . Deferred ( ) . resolve ( { width : 100 , height : 100 } ) ) ;
viewer . displayPlaceholderThumbnail ( { index : 1 } , undefined , undefined ) ;
2014-02-25 13:43:22 +00:00
assert . ok ( viewer . blurredThumbnailShown , 'Placeholder state is correct' ) ;
assert . ok ( ! viewer . realThumbnailShown , 'Real thumbnail state is correct' ) ;
2014-11-20 23:39:29 +00:00
viewer . displayRealThumbnail ( { url : undefined } ) ;
2014-02-25 13:43:22 +00:00
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 ) {
2014-11-20 23:39:29 +00:00
var viewer = new mw . mmv . MultimediaViewer ( { get : $ . noop } ) ;
2014-02-25 13:43:22 +00:00
viewer . setImage = $ . noop ;
2014-03-05 02:24:18 +00:00
viewer . ui = {
Refactor progressbar & blur handling
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
2014-04-25 22:26:34 +00:00
showImage : $ . noop ,
canvas : {
unblurWithAnimation : $ . noop ,
unblur : $ . noop
} } ;
2014-02-25 13:43:22 +00:00
2014-11-20 23:39:29 +00:00
viewer . displayRealThumbnail ( { url : undefined } ) ;
2014-02-25 13:43:22 +00:00
assert . ok ( viewer . realThumbnailShown , 'Real thumbnail state is correct' ) ;
assert . ok ( ! viewer . blurredThumbnailShown , 'Placeholder state is correct' ) ;
2014-04-24 01:03:24 +00:00
viewer . displayPlaceholderThumbnail ( { } , undefined , undefined ) ;
2014-02-25 13:43:22 +00:00
assert . ok ( viewer . realThumbnailShown , 'Real thumbnail state is correct' ) ;
assert . ok ( ! viewer . blurredThumbnailShown , 'Placeholder state is correct' ) ;
} ) ;
Refactor progressbar & blur handling
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
2014-04-25 22:26:34 +00:00
QUnit . test ( 'displayRealThumbnail' , 2 , function ( assert ) {
2014-11-20 23:39:29 +00:00
var viewer = new mw . mmv . MultimediaViewer ( { get : $ . noop } ) ;
2014-02-25 13:43:22 +00:00
viewer . setImage = $ . noop ;
2014-03-05 02:24:18 +00:00
viewer . ui = { canvas : {
Refactor progressbar & blur handling
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
2014-04-25 22:26:34 +00:00
unblurWithAnimation : this . sandbox . stub ( ) ,
unblur : $ . noop
2014-03-05 02:24:18 +00:00
} } ;
2014-02-25 13:43:22 +00:00
viewer . blurredThumbnailShown = true ;
Refactor progressbar & blur handling
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
2014-04-25 22:26:34 +00:00
// Should not result in an unblurWithAnimation animation (image cache from cache)
2014-11-20 23:39:29 +00:00
viewer . displayRealThumbnail ( { url : undefined } , undefined , undefined , 5 ) ;
Refactor progressbar & blur handling
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
2014-04-25 22:26:34 +00:00
assert . ok ( ! viewer . ui . canvas . unblurWithAnimation . called , 'There should not be an unblurWithAnimation animation' ) ;
2014-02-25 13:43:22 +00:00
Refactor progressbar & blur handling
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
2014-04-25 22:26:34 +00:00
// Should result in an unblurWithAnimation (image didn't come from cache)
2014-11-20 23:39:29 +00:00
viewer . displayRealThumbnail ( { url : undefined } , undefined , undefined , 1000 ) ;
Refactor progressbar & blur handling
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
2014-04-25 22:26:34 +00:00
assert . ok ( viewer . ui . canvas . unblurWithAnimation . called , 'There should be an unblurWithAnimation animation' ) ;
2014-02-25 13:43:22 +00:00
} ) ;
Refactor progressbar & blur handling
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
2014-04-25 22:26:34 +00:00
QUnit . test ( 'New image loaded while another one is loading' , 5 , function ( assert ) {
2014-11-20 23:39:29 +00:00
var viewer = new mw . mmv . MultimediaViewer ( { get : $ . noop } ) ,
2014-02-27 00:40:39 +00:00
firstImageDeferred = $ . Deferred ( ) ,
secondImageDeferred = $ . Deferred ( ) ,
firstLigthboxInfoDeferred = $ . Deferred ( ) ,
2014-12-02 10:05:12 +00:00
secondLigthboxInfoDeferred = $ . Deferred ( ) ,
firstImage = {
filePageTitle : new mw . Title ( 'File:Foo.jpg' ) ,
index : 0 ,
extraStatsDeferred : $ . Deferred ( ) . reject ( )
} ,
secondImage = {
filePageTitle : new mw . Title ( 'File:Bar.jpg' ) ,
index : 1 ,
extraStatsDeferred : $ . Deferred ( ) . reject ( )
} ;
2014-02-27 00:40:39 +00:00
viewer . preloadFullscreenThumbnail = $ . noop ;
Refactor progressbar & blur handling
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
2014-04-25 22:26:34 +00:00
viewer . fetchSizeIndependentLightboxInfo = this . sandbox . stub ( ) ;
2014-03-05 02:24:18 +00:00
viewer . ui = {
2014-09-12 18:05:13 +00:00
setFileReuseData : $ . noop ,
2014-02-27 00:40:39 +00:00
setupForLoad : $ . noop ,
2014-09-26 18:37:53 +00:00
canvas : {
set : $ . noop ,
getCurrentImageWidths : function ( ) { return { real : 0 } ; } ,
getDimensions : function ( ) { return { } ; }
} ,
Refactor progressbar & blur handling
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
2014-04-25 22:26:34 +00:00
panel : {
setImageInfo : this . sandbox . stub ( ) ,
2014-05-05 21:44:27 +00:00
scroller : {
animateMetadataOnce : $ . noop
} ,
2014-04-21 21:48:40 +00:00
progressBar : {
Refactor progressbar & blur handling
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
2014-04-25 22:26:34 +00:00
animateTo : this . sandbox . stub ( ) ,
jumpTo : this . sandbox . stub ( )
2014-03-05 02:24:18 +00:00
} ,
2014-05-28 22:43:35 +00:00
empty : $ . noop
2014-03-05 02:24:18 +00:00
} ,
open : $ . noop ,
empty : $ . noop } ;
Refactor progressbar & blur handling
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
2014-04-25 22:26:34 +00:00
viewer . displayRealThumbnail = this . sandbox . stub ( ) ;
2014-02-27 00:40:39 +00:00
viewer . eachPrealoadableLightboxIndex = $ . noop ;
Refactor progressbar & blur handling
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
2014-04-25 22:26:34 +00:00
viewer . animateMetadataDivOnce = this . sandbox . stub ( ) . returns ( $ . Deferred ( ) . reject ( ) ) ;
viewer . imageProvider . get = this . sandbox . stub ( ) ;
2014-03-04 11:53:53 +00:00
viewer . imageInfoProvider . get = function ( ) { return $ . Deferred ( ) . reject ( ) ; } ;
viewer . thumbnailInfoProvider . get = function ( ) { return $ . Deferred ( ) . resolve ( { } ) ; } ;
2014-02-27 00:40:39 +00:00
Refactor progressbar & blur handling
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
2014-04-25 22:26:34 +00:00
viewer . imageProvider . get . returns ( firstImageDeferred . promise ( ) ) ;
viewer . fetchSizeIndependentLightboxInfo . returns ( firstLigthboxInfoDeferred . promise ( ) ) ;
2014-12-02 10:05:12 +00:00
viewer . loadImage ( firstImage , new Image ( ) ) ;
Refactor progressbar & blur handling
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
2014-04-25 22:26:34 +00:00
assert . ok ( ! viewer . animateMetadataDivOnce . called , 'Metadata of the first image should not be animated' ) ;
assert . ok ( ! viewer . ui . panel . setImageInfo . called , 'Metadata of the first image should not be shown' ) ;
2014-02-27 00:40:39 +00:00
Refactor progressbar & blur handling
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
2014-04-25 22:26:34 +00:00
viewer . imageProvider . get . returns ( secondImageDeferred . promise ( ) ) ;
viewer . fetchSizeIndependentLightboxInfo . returns ( secondLigthboxInfoDeferred . promise ( ) ) ;
2014-12-02 10:05:12 +00:00
viewer . loadImage ( secondImage , new Image ( ) ) ;
2014-02-27 00:40:39 +00:00
Refactor progressbar & blur handling
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
2014-04-25 22:26:34 +00:00
viewer . ui . panel . progressBar . animateTo . reset ( ) ;
2014-02-27 00:40:39 +00:00
firstImageDeferred . notify ( undefined , 45 ) ;
Refactor progressbar & blur handling
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
2014-04-25 22:26:34 +00:00
assert . ok ( ! viewer . ui . panel . progressBar . animateTo . reset . called , 'Progress of the first image should not be shown' ) ;
2014-02-27 00:40:39 +00:00
firstImageDeferred . resolve ( ) ;
2014-12-02 10:05:12 +00:00
firstLigthboxInfoDeferred . resolve ( { } ) ;
Refactor progressbar & blur handling
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
2014-04-25 22:26:34 +00:00
assert . ok ( ! viewer . displayRealThumbnail . called , 'The first image being done loading should have no effect' ) ;
2014-02-27 00:40:39 +00:00
Refactor progressbar & blur handling
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
2014-04-25 22:26:34 +00:00
viewer . displayRealThumbnail = this . sandbox . spy ( function ( ) { viewer . close ( ) ; } ) ;
2014-02-27 00:40:39 +00:00
secondImageDeferred . resolve ( ) ;
2014-12-02 10:05:12 +00:00
secondLigthboxInfoDeferred . resolve ( { } ) ;
Refactor progressbar & blur handling
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
2014-04-25 22:26:34 +00:00
assert . ok ( viewer . displayRealThumbnail . called , 'The second image being done loading should result in the image being shown' ) ;
2014-02-27 00:40:39 +00:00
} ) ;
2014-03-03 11:20:52 +00:00
QUnit . test ( 'Events are not trapped after the viewer is closed' , 0 , function ( assert ) {
var i , j , k , eventParameters ,
2014-11-20 23:39:29 +00:00
viewer = new mw . mmv . MultimediaViewer ( { get : $ . noop } ) ,
2014-03-03 11:20:52 +00:00
$document = $ ( document ) ,
$qf = $ ( '#qunit-fixture' ) ,
eventTypes = [ 'keydown' , 'keyup' , 'keypress' , 'click' , 'mousedown' , 'mouseup' ] ,
2014-03-29 01:38:22 +00:00
modifiers = [ undefined , 'altKey' , 'ctrlKey' , 'shiftKey' , 'metaKey' ] ,
oldScrollTo = $ . scrollTo ;
$ . scrollTo = function ( ) { return { scrollTop : $ . noop , on : $ . noop , off : $ . noop } ; } ;
2014-03-03 11:20:52 +00:00
2014-03-04 11:53:53 +00:00
viewer . setupEventHandlers ( ) ;
2014-03-03 11:20:52 +00:00
viewer . imageProvider . get = function ( ) { return $ . Deferred ( ) . reject ( ) ; } ;
viewer . imageInfoProvider . get = function ( ) { return $ . Deferred ( ) . reject ( ) ; } ;
viewer . thumbnailInfoProvider . get = function ( ) { return $ . Deferred ( ) . reject ( ) ; } ;
viewer . fileRepoInfoProvider . get = function ( ) { return $ . Deferred ( ) . reject ( ) ; } ;
viewer . preloadFullscreenThumbnail = $ . noop ;
viewer . initWithThumbs ( [ ] ) ;
2014-12-02 10:05:12 +00:00
viewer . loadImage ( { filePageTitle : new mw . Title ( 'File:Stuff.jpg' ) ,
thumbnail : new mw . mmv . model . Thumbnail ( 'foo' , 10 , 10 ) ,
extraStatsDeferred : $ . Deferred ( ) . reject ( ) } ,
2014-03-03 11:20:52 +00:00
new Image ( ) ) ;
2014-03-05 02:24:18 +00:00
viewer . ui . $closeButton . click ( ) ;
2014-03-03 11:20:52 +00:00
function eventHandler ( e ) {
if ( e . isDefaultPrevented ( ) ) {
assert . ok ( false , 'Event was incorrectly trapped : ' + e . which ) ;
}
e . preventDefault ( ) ;
// Wait for the last event
if ( e . which === 32 && e . type === 'mouseup' ) {
QUnit . start ( ) ;
2014-03-04 11:53:53 +00:00
$document . off ( '.mmvtest' ) ;
viewer . cleanupEventHandlers ( ) ;
2014-03-29 01:38:22 +00:00
$ . scrollTo = oldScrollTo ;
2014-03-03 11:20:52 +00:00
}
}
// Events are async, we need to wait for the last event to be caught before ending the test
QUnit . stop ( ) ;
for ( j = 0 ; j < eventTypes . length ; j ++ ) {
$document . on ( eventTypes [ j ] + '.mmvtest' , eventHandler ) ;
eventloop :
for ( i = 0 ; i < 256 ; i ++ ) {
// Save some time by not testing unlikely values for mouse events
if ( i > 32 ) {
switch ( eventTypes [ j ] ) {
case 'click' :
case 'mousedown' :
case 'mouseup' :
break eventloop ;
}
}
for ( k = 0 ; k < modifiers . length ; k ++ ) {
eventParameters = { which : i } ;
if ( modifiers [ k ] !== undefined ) {
eventParameters [ modifiers [ k ] ] = true ;
}
$qf . trigger ( $ . Event ( eventTypes [ j ] , eventParameters ) ) ;
}
}
}
} ) ;
2014-04-15 00:01:03 +00:00
QUnit . test ( 'Refuse to load too-big thumbnails' , 1 , function ( assert ) {
2014-11-20 23:39:29 +00:00
var viewer = new mw . mmv . MultimediaViewer ( { get : $ . noop } ) ,
2014-04-15 00:01:03 +00:00
intendedWidth = 50 ,
title = mw . Title . newFromText ( 'File:Foobar.svg' ) ;
viewer . thumbnailInfoProvider . get = function ( fileTitle , width ) {
assert . strictEqual ( width , intendedWidth ) ;
return $ . Deferred ( ) . reject ( ) ;
} ;
2014-04-10 01:08:36 +00:00
viewer . fetchThumbnail ( title , 1000 , null , intendedWidth , 60 ) ;
} ) ;
2014-04-17 03:00:42 +00:00
QUnit . test ( 'fetchThumbnail()' , 32 , function ( assert ) {
var guessedThumbnailInfoStub ,
thumbnailInfoStub ,
imageStub ,
promise ,
2014-11-20 23:39:29 +00:00
viewer = new mw . mmv . MultimediaViewer ( { get : $ . noop } ) ,
2014-04-17 03:00:42 +00:00
sandbox = this . sandbox ,
2014-04-10 01:08:36 +00:00
oldUseThumbnailGuessing = mw . config . get ( 'wgMultimediaViewer' ) . useThumbnailGuessing ,
file = new mw . Title ( 'File:Copyleft.svg' ) ,
sampleURL = 'http://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Copyleft.svg/300px-Copyleft.svg.png' ,
width = 100 ,
originalWidth = 1000 ,
originalHeight = 1000 ,
2014-04-17 03:00:42 +00:00
image = { } ;
2014-04-10 01:08:36 +00:00
2014-04-17 03:00:42 +00:00
function setupStubs ( ) {
guessedThumbnailInfoStub = viewer . guessedThumbnailInfoProvider . get = sandbox . stub ( ) ;
thumbnailInfoStub = viewer . thumbnailInfoProvider . get = sandbox . stub ( ) ;
imageStub = viewer . imageProvider . get = sandbox . stub ( ) ;
}
2014-04-10 01:08:36 +00:00
2014-04-17 03:00:42 +00:00
mw . config . get ( 'wgMultimediaViewer' ) . useThumbnailGuessing = true ;
2014-04-10 01:08:36 +00:00
2014-04-17 03:00:42 +00:00
// When we lack sample URL and original dimensions, the classic provider should be used
setupStubs ( ) ;
guessedThumbnailInfoStub . returns ( $ . Deferred ( ) . resolve ( { url : 'guessedURL' } ) ) ;
thumbnailInfoStub . returns ( $ . Deferred ( ) . resolve ( { url : 'apiURL' } ) ) ;
imageStub . returns ( $ . Deferred ( ) . resolve ( image ) ) ;
promise = viewer . fetchThumbnail ( file , width ) ;
assert . ok ( ! guessedThumbnailInfoStub . called , 'When we lack sample URL and original dimensions, GuessedThumbnailInfoProvider is not called' ) ;
assert . ok ( thumbnailInfoStub . calledOnce , 'When we lack sample URL and original dimensions, ThumbnailInfoProvider is called once' ) ;
assert . ok ( imageStub . calledOnce , 'When we lack sample URL and original dimensions, ImageProvider is called once' ) ;
2014-12-02 10:05:12 +00:00
assert . ok ( imageStub . calledWithExactly ( 'apiURL' , undefined ) , 'When we lack sample URL and original dimensions, ImageProvider is called with the API url' ) ;
2014-04-17 03:00:42 +00:00
assert . strictEqual ( promise . state ( ) , 'resolved' , 'When we lack sample URL and original dimensions, fetchThumbnail resolves' ) ;
// When the guesser bails out, the classic provider should be used
setupStubs ( ) ;
guessedThumbnailInfoStub . returns ( $ . Deferred ( ) . reject ( ) ) ;
thumbnailInfoStub . returns ( $ . Deferred ( ) . resolve ( { url : 'apiURL' } ) ) ;
imageStub . returns ( $ . Deferred ( ) . resolve ( image ) ) ;
promise = viewer . fetchThumbnail ( file , width , sampleURL , originalWidth , originalHeight ) ;
assert . ok ( guessedThumbnailInfoStub . calledOnce , 'When the guesser bails out, GuessedThumbnailInfoProvider is called once' ) ;
assert . ok ( thumbnailInfoStub . calledOnce , 'When the guesser bails out, ThumbnailInfoProvider is called once' ) ;
assert . ok ( imageStub . calledOnce , 'When the guesser bails out, ImageProvider is called once' ) ;
2014-12-02 10:05:12 +00:00
assert . ok ( imageStub . calledWithExactly ( 'apiURL' , undefined ) , 'When the guesser bails out, ImageProvider is called with the API url' ) ;
2014-04-17 03:00:42 +00:00
assert . strictEqual ( promise . state ( ) , 'resolved' , 'When the guesser bails out, fetchThumbnail resolves' ) ;
// When the guesser returns an URL, that should be used
setupStubs ( ) ;
guessedThumbnailInfoStub . returns ( $ . Deferred ( ) . resolve ( { url : 'guessedURL' } ) ) ;
thumbnailInfoStub . returns ( $ . Deferred ( ) . resolve ( { url : 'apiURL' } ) ) ;
imageStub . returns ( $ . Deferred ( ) . resolve ( image ) ) ;
promise = viewer . fetchThumbnail ( file , width , sampleURL , originalWidth , originalHeight ) ;
assert . ok ( guessedThumbnailInfoStub . calledOnce , 'When the guesser returns an URL, GuessedThumbnailInfoProvider is called once' ) ;
assert . ok ( ! thumbnailInfoStub . called , 'When the guesser returns an URL, ThumbnailInfoProvider is not called' ) ;
assert . ok ( imageStub . calledOnce , 'When the guesser returns an URL, ImageProvider is called once' ) ;
2014-12-02 10:05:12 +00:00
assert . ok ( imageStub . calledWithExactly ( 'guessedURL' , undefined ) , 'When the guesser returns an URL, ImageProvider is called with the guessed url' ) ;
2014-04-17 03:00:42 +00:00
assert . strictEqual ( promise . state ( ) , 'resolved' , 'When the guesser returns an URL, fetchThumbnail resolves' ) ;
// When the guesser returns an URL, but that returns 404, image loading should be retried with the classic provider
setupStubs ( ) ;
guessedThumbnailInfoStub . returns ( $ . Deferred ( ) . resolve ( { url : 'guessedURL' } ) ) ;
thumbnailInfoStub . returns ( $ . Deferred ( ) . resolve ( { url : 'apiURL' } ) ) ;
imageStub . withArgs ( 'guessedURL' ) . returns ( $ . Deferred ( ) . reject ( ) ) ;
imageStub . withArgs ( 'apiURL' ) . returns ( $ . Deferred ( ) . resolve ( image ) ) ;
promise = viewer . fetchThumbnail ( file , width , sampleURL , originalWidth , originalHeight ) ;
assert . ok ( guessedThumbnailInfoStub . calledOnce , 'When the guesser returns an URL, but that returns 404, GuessedThumbnailInfoProvider is called once' ) ;
assert . ok ( thumbnailInfoStub . calledOnce , 'When the guesser returns an URL, but that returns 404, ThumbnailInfoProvider is called once' ) ;
assert . ok ( imageStub . calledTwice , 'When the guesser returns an URL, but that returns 404, ImageProvider is called twice' ) ;
2014-12-02 10:05:12 +00:00
assert . ok ( imageStub . getCall ( 0 ) . calledWithExactly ( 'guessedURL' , undefined ) , 'When the guesser returns an URL, but that returns 404, ImageProvider is called first with the guessed url' ) ;
assert . ok ( imageStub . getCall ( 1 ) . calledWithExactly ( 'apiURL' , undefined ) , 'When the guesser returns an URL, but that returns 404, ImageProvider is called second with the guessed url' ) ;
2014-04-17 03:00:42 +00:00
assert . strictEqual ( promise . state ( ) , 'resolved' , 'When the guesser returns an URL, but that returns 404, fetchThumbnail resolves' ) ;
// When even the retry fails, fetchThumbnail() should reject
setupStubs ( ) ;
guessedThumbnailInfoStub . returns ( $ . Deferred ( ) . resolve ( { url : 'guessedURL' } ) ) ;
thumbnailInfoStub . returns ( $ . Deferred ( ) . resolve ( { url : 'apiURL' } ) ) ;
imageStub . withArgs ( 'guessedURL' ) . returns ( $ . Deferred ( ) . reject ( ) ) ;
imageStub . withArgs ( 'apiURL' ) . returns ( $ . Deferred ( ) . reject ( ) ) ;
promise = viewer . fetchThumbnail ( file , width , sampleURL , originalWidth , originalHeight ) ;
assert . ok ( guessedThumbnailInfoStub . calledOnce , 'When even the retry fails, GuessedThumbnailInfoProvider is called once' ) ;
assert . ok ( thumbnailInfoStub . calledOnce , 'When even the retry fails, ThumbnailInfoProvider is called once' ) ;
assert . ok ( imageStub . calledTwice , 'When even the retry fails, ImageProvider is called twice' ) ;
2014-12-02 10:05:12 +00:00
assert . ok ( imageStub . getCall ( 0 ) . calledWithExactly ( 'guessedURL' , undefined ) , 'When even the retry fails, ImageProvider is called first with the guessed url' ) ;
assert . ok ( imageStub . getCall ( 1 ) . calledWithExactly ( 'apiURL' , undefined ) , 'When even the retry fails, ImageProvider is called second with the guessed url' ) ;
2014-04-17 03:00:42 +00:00
assert . strictEqual ( promise . state ( ) , 'rejected' , 'When even the retry fails, fetchThumbnail rejects' ) ;
2014-04-10 01:08:36 +00:00
mw . config . get ( 'wgMultimediaViewer' ) . useThumbnailGuessing = false ;
2014-04-17 03:00:42 +00:00
// When guessing is disabled, the classic provider is used
setupStubs ( ) ;
guessedThumbnailInfoStub . returns ( $ . Deferred ( ) . resolve ( { url : 'guessedURL' } ) ) ;
thumbnailInfoStub . returns ( $ . Deferred ( ) . resolve ( { url : 'apiURL' } ) ) ;
imageStub . returns ( $ . Deferred ( ) . resolve ( image ) ) ;
promise = viewer . fetchThumbnail ( file , width ) ;
assert . ok ( ! guessedThumbnailInfoStub . called , 'When guessing is disabled, GuessedThumbnailInfoProvider is not called' ) ;
assert . ok ( thumbnailInfoStub . calledOnce , 'When guessing is disabled, ThumbnailInfoProvider is called once' ) ;
assert . ok ( imageStub . calledOnce , 'When guessing is disabled, ImageProvider is called once' ) ;
2014-12-02 10:05:12 +00:00
assert . ok ( imageStub . calledWithExactly ( 'apiURL' , undefined ) , 'When guessing is disabled, ImageProvider is called with the API url' ) ;
2014-04-17 03:00:42 +00:00
assert . strictEqual ( promise . state ( ) , 'resolved' , 'When guessing is disabled, fetchThumbnail resolves' ) ;
2014-04-10 01:08:36 +00:00
mw . config . get ( 'wgMultimediaViewer' ) . useThumbnailGuessing = oldUseThumbnailGuessing ;
2014-04-15 00:01:03 +00:00
} ) ;
2014-07-01 22:22:06 +00:00
QUnit . test ( 'document.title' , 2 , function ( assert ) {
2014-11-20 23:39:29 +00:00
var viewer = new mw . mmv . MultimediaViewer ( { get : $ . noop } ) ,
2014-07-01 22:22:06 +00:00
bootstrap = new mw . mmv . MultimediaViewerBootstrap ( ) ,
title = new mw . Title ( 'File:This_should_show_up_in_document_title.png' ) ,
oldDocumentTitle = document . title ;
viewer . currentImageFileTitle = title ;
bootstrap . setupEventHandlers ( ) ;
viewer . setHash ( ) ;
assert . ok ( document . title . match ( title . getNameText ( ) ) , 'File name is visible in title' ) ;
viewer . close ( ) ;
bootstrap . cleanupEventHandlers ( ) ;
assert . strictEqual ( document . title , oldDocumentTitle , 'Original title restored after viewer is closed' ) ;
} ) ;
2013-11-27 21:57:45 +00:00
} ( mediaWiki , jQuery ) ) ;
