mediawiki.special.upload: Use jquery.spinner properly, instead of only its CSS classes

Change-Id: I9dae724f4d8c1998ace84d1bcb753313d7581046

diff --git a/resources/src/mediawiki.special/mediawiki.special.upload.js b/resources/src/mediawiki.special/mediawiki.special.upload.js
index 7dd0369..8f72d63 100644 (file)
--- a/resources/src/mediawiki.special/mediawiki.special.upload.js
+++ b/resources/src/mediawiki.special/mediawiki.special.upload.js
@@ -291,12 +291,16 @@
                                ctx,
                                meta,
                                previewSize = 180,
+                               $spinner = $.createSpinner( { size: 'small', type: 'block' } )
+                                       .css( { width: previewSize, height: previewSize } ),
                                thumb = mw.template.get( 'mediawiki.special.upload', 'thumbnail.html' ).render();
 
-                       thumb.find( '.filename' ).text( file.name ).end()
-                               .find( '.fileinfo' ).text( prettySize( file.size ) ).end();
+                       thumb
+                               .find( '.filename' ).text( file.name ).end()
+                               .find( '.fileinfo' ).text( prettySize( file.size ) ).end()
+                               .find( '.thumbinner' ).prepend( $spinner ).end();
 
-                       $canvas = $( '<canvas width="' + previewSize + '" height="' + previewSize + '" ></canvas>' );
+                       $canvas = $( '<canvas>' ).attr( { width: previewSize, height: previewSize } );
                        ctx = $canvas[0].getContext( '2d' );
                        $( '#mw-htmlform-source' ).parent().prepend( thumb );
 
@@ -369,7 +373,7 @@
                                        ctx.clearRect( 0, 0, 180, 180 );
                                        ctx.rotate( rotation / 180 * Math.PI );
                                        ctx.drawImage( img, x, y, width, height );
-                                       thumb.find( '.mw-spinner-small' ).replaceWith( $canvas );
+                                       $spinner.replaceWith( $canvas );
 
                                        // Image size
                                        info = mw.msg( 'widthheight', logicalWidth, logicalHeight ) +

diff --git a/resources/src/mediawiki.special/templates/thumbnail.html b/resources/src/mediawiki.special/templates/thumbnail.html
index 305f20c..bf0e701 100644 (file)
--- a/resources/src/mediawiki.special/templates/thumbnail.html
+++ b/resources/src/mediawiki.special/templates/thumbnail.html
@@ -1,7 +1,5 @@
 <div id="mw-upload-thumbnail" class="thumb tright">
        <div class="thumbinner">
-               <!-- Note: Change showPreview() in mediawiki.special.upload.js if mw-spinner-small classname changes -->
-               <div class="mw-spinner mw-spinner-small" style="width: 180px; height: 180px"></div>
                <div class="thumbcaption">
                        <div class="filename"></div>
                        <div class="fileinfo"></div>