Index: trunk/extensions/UploadWizard/resources/combined.js |
— | — | @@ -8383,7 +8383,7 @@ |
8384 | 8384 | mw.GroupProgressBar.prototype = { |
8385 | 8385 | |
8386 | 8386 | /** |
8387 | | - * Show the progress bar with a slideout motion |
| 8387 | + * Show the progress bar |
8388 | 8388 | */ |
8389 | 8389 | showBar: function() { |
8390 | 8390 | this.$selector.find( '.mwe-upwiz-progress-bar-etr' ).fadeIn( 200 ); |
— | — | @@ -9221,18 +9221,15 @@ |
9222 | 9222 | _this.transportProgress = 1; |
9223 | 9223 | _this.ui.setStatus( 'mwe-upwiz-getting-metadata' ); |
9224 | 9224 | _this.extractUploadInfo( result ); |
9225 | | - var setupDeedsAndShowComplete = function() { |
9226 | | - _this.ui.setPreview( $img ); |
9227 | | - _this.deedPreview.setup(); |
9228 | | - _this.details.populate(); |
9229 | | - _this.state = 'stashed'; |
9230 | | - _this.ui.showStashed(); |
9231 | | - }; |
9232 | | - var $img = $j( '<img/>' ).load( setupDeedsAndShowComplete ); |
9233 | | - // blocking preload for thumbnail |
| 9225 | + |
| 9226 | + // use blocking preload for thumbnail, no loading spinner. |
9234 | 9227 | _this.getThumbnail( |
9235 | | - function( thumbnailAttrs ) { |
9236 | | - $img.attr( thumbnailAttrs ); |
| 9228 | + function( image ) { |
| 9229 | + _this.ui.setPreview( image ); |
| 9230 | + _this.deedPreview.setup(); |
| 9231 | + _this.details.populate(); |
| 9232 | + _this.state = 'stashed'; |
| 9233 | + _this.ui.showStashed(); |
9237 | 9234 | }, |
9238 | 9235 | mw.UploadWizard.config[ 'iconThumbnailWidth' ], |
9239 | 9236 | mw.UploadWizard.config[ 'iconThumbnailMaxHeight' ] |
— | — | @@ -9353,12 +9350,15 @@ |
9354 | 9351 | } |
9355 | 9352 | var thumbnails = data.query.stashimageinfo; |
9356 | 9353 | for ( var i = 0; i < thumbnails.length; i++ ) { |
9357 | | - _this.thumbnails[key] = { |
9358 | | - src: thumbnails[i].thumburl, |
9359 | | - width: thumbnails[i].thumbwidth, |
9360 | | - height: thumbnails[i].thumbheight |
9361 | | - }; |
9362 | | - callback( _this.thumbnails[key] ); |
| 9354 | + var thumb = thumbnails[i]; |
| 9355 | + var image = document.createElement( 'img' ); |
| 9356 | + $j( image ).load( function() { |
| 9357 | + callback( image ); |
| 9358 | + } ); |
| 9359 | + image.width = thumb.thumbwidth; |
| 9360 | + image.height = thumb.thumbheight; |
| 9361 | + image.src = thumb.thumburl; |
| 9362 | + _this.thumbnails[key] = image; |
9363 | 9363 | } |
9364 | 9364 | } ); |
9365 | 9365 | } |
— | — | @@ -9366,14 +9366,15 @@ |
9367 | 9367 | |
9368 | 9368 | /** |
9369 | 9369 | * Look up thumbnail info and set it in HTML, with loading spinner |
9370 | | - * it might be interesting to make this more of a publish/subscribe thing, since we have to do this 3x |
9371 | | - * the callbacks may pile up, getting unnecessary info |
9372 | 9370 | * |
9373 | 9371 | * @param selector |
9374 | 9372 | * @param width |
9375 | 9373 | * @param height (optional) |
9376 | 9374 | */ |
9377 | 9375 | setThumbnail: function( selector, width, height ) { |
| 9376 | + // set the thumbnail on the page to have a loading spinner |
| 9377 | + $j( selector ).loadingSpinner(); |
| 9378 | + |
9378 | 9379 | var _this = this; |
9379 | 9380 | if ( typeof width === 'undefined' || width === null || width <= 0 ) { |
9380 | 9381 | width = mw.UploadWizard.config[ 'thumbnailWidth' ]; |
— | — | @@ -9383,18 +9384,20 @@ |
9384 | 9385 | if ( !mw.isEmpty( height ) ) { |
9385 | 9386 | height = parseInt( height, 10 ); |
9386 | 9387 | } |
9387 | | - |
9388 | | - var callback = function( thumbnail ) { |
| 9388 | + |
| 9389 | + var callback = function( image ) { |
9389 | 9390 | // side effect: will replace thumbnail's loadingSpinner |
9390 | 9391 | $j( selector ).html( |
9391 | | - $j('<a/>') |
| 9392 | + $j( '<a/>' ) |
9392 | 9393 | .attr( { 'href': _this.imageinfo.url, |
9393 | 9394 | 'target' : '_new' } ) |
9394 | 9395 | .append( |
9395 | 9396 | $j( '<img/>' ) |
9396 | | - .attr( 'width', thumbnail.width ) |
9397 | | - .attr( 'height', thumbnail.height ) |
9398 | | - .attr( 'src', thumbnail.src ) ) ); |
| 9397 | + .attr( { 'width': image.width, |
| 9398 | + 'height': image.height, |
| 9399 | + 'src': image.src } ) |
| 9400 | + ) |
| 9401 | + ); |
9399 | 9402 | }; |
9400 | 9403 | |
9401 | 9404 | $j( selector ).loadingSpinner(); |
— | — | @@ -9507,29 +9510,36 @@ |
9508 | 9511 | }, |
9509 | 9512 | |
9510 | 9513 | /** |
9511 | | - * change the indicator at the far right |
| 9514 | + * change the graphic indicator at the far end of the row for this file |
| 9515 | + * @param String statusClass: corresponds to a class mwe-upwiz-status which changes style of indicator. |
9512 | 9516 | */ |
9513 | 9517 | showIndicator: function( statusClass ) { |
9514 | | - var _this = this; |
9515 | | - var $indicator = $j( _this.div ).find( '.mwe-upwiz-file-indicator' ); |
| 9518 | + var $indicator = $j( this.div ).find( '.mwe-upwiz-file-indicator' ); |
| 9519 | + // remove any other such classes |
9516 | 9520 | $j.each( $indicator.attr( 'class' ).split( /\s+/ ), function( i, className ) { |
9517 | 9521 | if ( className.match( /^mwe-upwiz-status/ ) ) { |
9518 | 9522 | $indicator.removeClass( className ); |
9519 | 9523 | } |
9520 | 9524 | } ); |
9521 | | - $indicator.addClass( 'mwe-upwiz-status-' + statusClass ); |
9522 | | - // is this causing dancing when we switch from spinner to checkmark? |
9523 | | - $j( _this.div ).find( '.mwe-upwiz-visible-file-filename' ) |
9524 | | - .css( 'margin-right', ( $indicator.outerWidth() + 24 ).toString() + 'px' ); |
9525 | | - $indicator.css( 'visibility', 'visible' ); |
| 9525 | + // add the desired class and make it visible, if it wasn't already. |
| 9526 | + $indicator.addClass( 'mwe-upwiz-status-' + statusClass ) |
| 9527 | + .css( 'visibility', 'visible' ); |
9526 | 9528 | }, |
9527 | 9529 | |
9528 | | - setPreview: function( $img ) { |
| 9530 | + /** |
| 9531 | + * Set the preview image on the file page for this upload. |
| 9532 | + * @param HTMLImageElement |
| 9533 | + */ |
| 9534 | + setPreview: function( image ) { |
9529 | 9535 | // encoding for url here? |
9530 | | - $j( this.div ).find( '.mwe-upwiz-file-preview' ).css( 'background-image', 'url(' + $img.attr( 'src' ) + ')' ); |
| 9536 | + $j( this.div ).find( '.mwe-upwiz-file-preview' ).css( 'background-image', 'url(' + image.src + ')' ); |
9531 | 9537 | }, |
9532 | 9538 | |
9533 | | - // too abstract? |
| 9539 | + /** |
| 9540 | + * Set the status line for this upload with an internationalized message string. |
| 9541 | + * @param String msgKey: key for the message |
| 9542 | + * @param Array args: array of values, in case any need to be fed to the image. |
| 9543 | + */ |
9534 | 9544 | setStatus: function( msgKey, args ) { |
9535 | 9545 | if ( !mw.isDefined( args ) ) { |
9536 | 9546 | args = []; |
— | — | @@ -9537,10 +9547,17 @@ |
9538 | 9548 | this.setStatusStr( gM( msgKey, args ) ); |
9539 | 9549 | }, |
9540 | 9550 | |
| 9551 | + /** |
| 9552 | + * Set the status line for this upload |
| 9553 | + * @param String str: the string to use |
| 9554 | + */ |
9541 | 9555 | setStatusStr: function( str ) { |
9542 | 9556 | $j( this.div ).find( '.mwe-upwiz-file-status' ).html( str ).show(); |
9543 | 9557 | }, |
9544 | 9558 | |
| 9559 | + /** |
| 9560 | + * Clear the status line for this upload (hide it, in case there are paddings and such which offset other things.) |
| 9561 | + */ |
9545 | 9562 | clearStatus: function() { |
9546 | 9563 | $j( this.div ).find( '.mwe-upwiz-file-status' ).hide(); |
9547 | 9564 | }, |
Index: trunk/extensions/UploadWizard/resources/mw.UploadWizard.js |
— | — | @@ -101,18 +101,15 @@ |
102 | 102 | _this.transportProgress = 1; |
103 | 103 | _this.ui.setStatus( 'mwe-upwiz-getting-metadata' ); |
104 | 104 | _this.extractUploadInfo( result ); |
105 | | - var setupDeedsAndShowComplete = function() { |
106 | | - _this.ui.setPreview( $img ); |
107 | | - _this.deedPreview.setup(); |
108 | | - _this.details.populate(); |
109 | | - _this.state = 'stashed'; |
110 | | - _this.ui.showStashed(); |
111 | | - }; |
112 | | - var $img = $j( '<img/>' ).load( setupDeedsAndShowComplete ); |
113 | | - // blocking preload for thumbnail |
| 105 | + |
| 106 | + // use blocking preload for thumbnail, no loading spinner. |
114 | 107 | _this.getThumbnail( |
115 | | - function( thumbnailAttrs ) { |
116 | | - $img.attr( thumbnailAttrs ); |
| 108 | + function( image ) { |
| 109 | + _this.ui.setPreview( image ); |
| 110 | + _this.deedPreview.setup(); |
| 111 | + _this.details.populate(); |
| 112 | + _this.state = 'stashed'; |
| 113 | + _this.ui.showStashed(); |
117 | 114 | }, |
118 | 115 | mw.UploadWizard.config[ 'iconThumbnailWidth' ], |
119 | 116 | mw.UploadWizard.config[ 'iconThumbnailMaxHeight' ] |
— | — | @@ -233,12 +230,15 @@ |
234 | 231 | } |
235 | 232 | var thumbnails = data.query.stashimageinfo; |
236 | 233 | for ( var i = 0; i < thumbnails.length; i++ ) { |
237 | | - _this.thumbnails[key] = { |
238 | | - src: thumbnails[i].thumburl, |
239 | | - width: thumbnails[i].thumbwidth, |
240 | | - height: thumbnails[i].thumbheight |
241 | | - }; |
242 | | - callback( _this.thumbnails[key] ); |
| 234 | + var thumb = thumbnails[i]; |
| 235 | + var image = document.createElement( 'img' ); |
| 236 | + $j( image ).load( function() { |
| 237 | + callback( image ); |
| 238 | + } ); |
| 239 | + image.width = thumb.thumbwidth; |
| 240 | + image.height = thumb.thumbheight; |
| 241 | + image.src = thumb.thumburl; |
| 242 | + _this.thumbnails[key] = image; |
243 | 243 | } |
244 | 244 | } ); |
245 | 245 | } |
— | — | @@ -246,14 +246,15 @@ |
247 | 247 | |
248 | 248 | /** |
249 | 249 | * Look up thumbnail info and set it in HTML, with loading spinner |
250 | | - * it might be interesting to make this more of a publish/subscribe thing, since we have to do this 3x |
251 | | - * the callbacks may pile up, getting unnecessary info |
252 | 250 | * |
253 | 251 | * @param selector |
254 | 252 | * @param width |
255 | 253 | * @param height (optional) |
256 | 254 | */ |
257 | 255 | setThumbnail: function( selector, width, height ) { |
| 256 | + // set the thumbnail on the page to have a loading spinner |
| 257 | + $j( selector ).loadingSpinner(); |
| 258 | + |
258 | 259 | var _this = this; |
259 | 260 | if ( typeof width === 'undefined' || width === null || width <= 0 ) { |
260 | 261 | width = mw.UploadWizard.config[ 'thumbnailWidth' ]; |
— | — | @@ -263,18 +264,20 @@ |
264 | 265 | if ( !mw.isEmpty( height ) ) { |
265 | 266 | height = parseInt( height, 10 ); |
266 | 267 | } |
267 | | - |
268 | | - var callback = function( thumbnail ) { |
| 268 | + |
| 269 | + var callback = function( image ) { |
269 | 270 | // side effect: will replace thumbnail's loadingSpinner |
270 | 271 | $j( selector ).html( |
271 | | - $j('<a/>') |
| 272 | + $j( '<a/>' ) |
272 | 273 | .attr( { 'href': _this.imageinfo.url, |
273 | 274 | 'target' : '_new' } ) |
274 | 275 | .append( |
275 | 276 | $j( '<img/>' ) |
276 | | - .attr( 'width', thumbnail.width ) |
277 | | - .attr( 'height', thumbnail.height ) |
278 | | - .attr( 'src', thumbnail.src ) ) ); |
| 277 | + .attr( { 'width': image.width, |
| 278 | + 'height': image.height, |
| 279 | + 'src': image.src } ) |
| 280 | + ) |
| 281 | + ); |
279 | 282 | }; |
280 | 283 | |
281 | 284 | $j( selector ).loadingSpinner(); |
— | — | @@ -387,29 +390,36 @@ |
388 | 391 | }, |
389 | 392 | |
390 | 393 | /** |
391 | | - * change the indicator at the far right |
| 394 | + * change the graphic indicator at the far end of the row for this file |
| 395 | + * @param String statusClass: corresponds to a class mwe-upwiz-status which changes style of indicator. |
392 | 396 | */ |
393 | 397 | showIndicator: function( statusClass ) { |
394 | | - var _this = this; |
395 | | - var $indicator = $j( _this.div ).find( '.mwe-upwiz-file-indicator' ); |
| 398 | + var $indicator = $j( this.div ).find( '.mwe-upwiz-file-indicator' ); |
| 399 | + // remove any other such classes |
396 | 400 | $j.each( $indicator.attr( 'class' ).split( /\s+/ ), function( i, className ) { |
397 | 401 | if ( className.match( /^mwe-upwiz-status/ ) ) { |
398 | 402 | $indicator.removeClass( className ); |
399 | 403 | } |
400 | 404 | } ); |
401 | | - $indicator.addClass( 'mwe-upwiz-status-' + statusClass ); |
402 | | - // is this causing dancing when we switch from spinner to checkmark? |
403 | | - $j( _this.div ).find( '.mwe-upwiz-visible-file-filename' ) |
404 | | - .css( 'margin-right', ( $indicator.outerWidth() + 24 ).toString() + 'px' ); |
405 | | - $indicator.css( 'visibility', 'visible' ); |
| 405 | + // add the desired class and make it visible, if it wasn't already. |
| 406 | + $indicator.addClass( 'mwe-upwiz-status-' + statusClass ) |
| 407 | + .css( 'visibility', 'visible' ); |
406 | 408 | }, |
407 | 409 | |
408 | | - setPreview: function( $img ) { |
| 410 | + /** |
| 411 | + * Set the preview image on the file page for this upload. |
| 412 | + * @param HTMLImageElement |
| 413 | + */ |
| 414 | + setPreview: function( image ) { |
409 | 415 | // encoding for url here? |
410 | | - $j( this.div ).find( '.mwe-upwiz-file-preview' ).css( 'background-image', 'url(' + $img.attr( 'src' ) + ')' ); |
| 416 | + $j( this.div ).find( '.mwe-upwiz-file-preview' ).css( 'background-image', 'url(' + image.src + ')' ); |
411 | 417 | }, |
412 | 418 | |
413 | | - // too abstract? |
| 419 | + /** |
| 420 | + * Set the status line for this upload with an internationalized message string. |
| 421 | + * @param String msgKey: key for the message |
| 422 | + * @param Array args: array of values, in case any need to be fed to the image. |
| 423 | + */ |
414 | 424 | setStatus: function( msgKey, args ) { |
415 | 425 | if ( !mw.isDefined( args ) ) { |
416 | 426 | args = []; |
— | — | @@ -417,10 +427,17 @@ |
418 | 428 | this.setStatusStr( gM( msgKey, args ) ); |
419 | 429 | }, |
420 | 430 | |
| 431 | + /** |
| 432 | + * Set the status line for this upload |
| 433 | + * @param String str: the string to use |
| 434 | + */ |
421 | 435 | setStatusStr: function( str ) { |
422 | 436 | $j( this.div ).find( '.mwe-upwiz-file-status' ).html( str ).show(); |
423 | 437 | }, |
424 | 438 | |
| 439 | + /** |
| 440 | + * Clear the status line for this upload (hide it, in case there are paddings and such which offset other things.) |
| 441 | + */ |
425 | 442 | clearStatus: function() { |
426 | 443 | $j( this.div ).find( '.mwe-upwiz-file-status' ).hide(); |
427 | 444 | }, |
Index: trunk/extensions/UploadWizard/resources/combined.min.js |
— | — | @@ -9221,18 +9221,15 @@ |
9222 | 9222 | _this.transportProgress=1; |
9223 | 9223 | _this.ui.setStatus('mwe-upwiz-getting-metadata'); |
9224 | 9224 | _this.extractUploadInfo(result); |
9225 | | -var setupDeedsAndShowComplete=function(){ |
9226 | | -_this.ui.setPreview($img); |
| 9225 | + |
| 9226 | + |
| 9227 | +_this.getThumbnail( |
| 9228 | +function(image){ |
| 9229 | +_this.ui.setPreview(image); |
9227 | 9230 | _this.deedPreview.setup(); |
9228 | 9231 | _this.details.populate(); |
9229 | 9232 | _this.state='stashed'; |
9230 | 9233 | _this.ui.showStashed(); |
9231 | | -}; |
9232 | | -var $img=$j('<img/>').load(setupDeedsAndShowComplete); |
9233 | | - |
9234 | | -_this.getThumbnail( |
9235 | | -function(thumbnailAttrs){ |
9236 | | -$img.attr(thumbnailAttrs); |
9237 | 9234 | }, |
9238 | 9235 | mw.UploadWizard.config['iconThumbnailWidth'], |
9239 | 9236 | mw.UploadWizard.config['iconThumbnailMaxHeight'] |
— | — | @@ -9353,12 +9350,15 @@ |
9354 | 9351 | } |
9355 | 9352 | var thumbnails=data.query.stashimageinfo; |
9356 | 9353 | for(var i=0;i<thumbnails.length;i++){ |
9357 | | -_this.thumbnails[key]={ |
9358 | | -src:thumbnails[i].thumburl, |
9359 | | -width:thumbnails[i].thumbwidth, |
9360 | | -height:thumbnails[i].thumbheight |
9361 | | -}; |
9362 | | -callback(_this.thumbnails[key]); |
| 9354 | +var thumb=thumbnails[i]; |
| 9355 | +var image=document.createElement('img'); |
| 9356 | +$j(image).load(function(){ |
| 9357 | +callback(image); |
| 9358 | +}); |
| 9359 | +image.width=thumb.thumbwidth; |
| 9360 | +image.height=thumb.thumbheight; |
| 9361 | +image.src=thumb.thumburl; |
| 9362 | +_this.thumbnails[key]=image; |
9363 | 9363 | } |
9364 | 9364 | }); |
9365 | 9365 | } |
— | — | @@ -9371,9 +9371,10 @@ |
9372 | 9372 | |
9373 | 9373 | |
9374 | 9374 | |
| 9375 | +setThumbnail:function(selector,width,height){ |
9375 | 9376 | |
| 9377 | +$j(selector).loadingSpinner(); |
9376 | 9378 | |
9377 | | -setThumbnail:function(selector,width,height){ |
9378 | 9379 | var _this=this; |
9379 | 9380 | if(typeof width==='undefined'||width===null||width<=0){ |
9380 | 9381 | width=mw.UploadWizard.config['thumbnailWidth']; |
— | — | @@ -9384,7 +9385,7 @@ |
9385 | 9386 | height=parseInt(height,10); |
9386 | 9387 | } |
9387 | 9388 | |
9388 | | -var callback=function(thumbnail){ |
| 9389 | +var callback=function(image){ |
9389 | 9390 | |
9390 | 9391 | $j(selector).html( |
9391 | 9392 | $j('<a/>') |
— | — | @@ -9392,9 +9393,11 @@ |
9393 | 9394 | 'target':'_new'}) |
9394 | 9395 | .append( |
9395 | 9396 | $j('<img/>') |
9396 | | -.attr('width',thumbnail.width) |
9397 | | -.attr('height',thumbnail.height) |
9398 | | -.attr('src',thumbnail.src))); |
| 9397 | +.attr({'width':image.width, |
| 9398 | +'height':image.height, |
| 9399 | +'src':image.src}) |
| 9400 | +) |
| 9401 | +); |
9399 | 9402 | }; |
9400 | 9403 | |
9401 | 9404 | $j(selector).loadingSpinner(); |
— | — | @@ -9509,27 +9512,34 @@ |
9510 | 9513 | |
9511 | 9514 | |
9512 | 9515 | |
| 9516 | + |
9513 | 9517 | showIndicator:function(statusClass){ |
9514 | | -var _this=this; |
9515 | | -var $indicator=$j(_this.div).find('.mwe-upwiz-file-indicator'); |
| 9518 | +var $indicator=$j(this.div).find('.mwe-upwiz-file-indicator'); |
| 9519 | + |
9516 | 9520 | $j.each($indicator.attr('class').split(/\s+/),function(i,className){ |
9517 | 9521 | if(className.match(/^mwe-upwiz-status/)){ |
9518 | 9522 | $indicator.removeClass(className); |
9519 | 9523 | } |
9520 | 9524 | }); |
9521 | | -$indicator.addClass('mwe-upwiz-status-'+statusClass); |
9522 | 9525 | |
9523 | | -$j(_this.div).find('.mwe-upwiz-visible-file-filename') |
9524 | | -.css('margin-right',($indicator.outerWidth()+24).toString()+'px'); |
9525 | | -$indicator.css('visibility','visible'); |
| 9526 | +$indicator.addClass('mwe-upwiz-status-'+statusClass) |
| 9527 | +.css('visibility','visible'); |
9526 | 9528 | }, |
9527 | 9529 | |
9528 | | -setPreview:function($img){ |
9529 | 9530 | |
9530 | | -$j(this.div).find('.mwe-upwiz-file-preview').css('background-image','url('+$img.attr('src')+')'); |
| 9531 | + |
| 9532 | + |
| 9533 | + |
| 9534 | +setPreview:function(image){ |
| 9535 | + |
| 9536 | +$j(this.div).find('.mwe-upwiz-file-preview').css('background-image','url('+image.src+')'); |
9531 | 9537 | }, |
9532 | 9538 | |
9533 | 9539 | |
| 9540 | + |
| 9541 | + |
| 9542 | + |
| 9543 | + |
9534 | 9544 | setStatus:function(msgKey,args){ |
9535 | 9545 | if(!mw.isDefined(args)){ |
9536 | 9546 | args=[]; |
— | — | @@ -9537,10 +9547,17 @@ |
9538 | 9548 | this.setStatusStr(gM(msgKey,args)); |
9539 | 9549 | }, |
9540 | 9550 | |
| 9551 | + |
| 9552 | + |
| 9553 | + |
| 9554 | + |
9541 | 9555 | setStatusStr:function(str){ |
9542 | 9556 | $j(this.div).find('.mwe-upwiz-file-status').html(str).show(); |
9543 | 9557 | }, |
9544 | 9558 | |
| 9559 | + |
| 9560 | + |
| 9561 | + |
9545 | 9562 | clearStatus:function(){ |
9546 | 9563 | $j(this.div).find('.mwe-upwiz-file-status').hide(); |
9547 | 9564 | }, |