r99913 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r99912‎ | r99913 | r99914 >
Date:20:56, 15 October 2011
Author:brion
Status:ok (Comments)
Tags:
Comment:
Followup r79867: re-animate the spinner during Special:Upload's thumbnail init (was lost by drawing the spinner to a canvas).

Switched from an <img> on the pre-canvas code to mw-small-spinner class so the CSS can worry about the path. :)
Modified paths:
  • /trunk/phase3/resources/mediawiki.special/mediawiki.special.upload.js (modified) (history)

Diff [purge]

Index: trunk/phase3/resources/mediawiki.special/mediawiki.special.upload.js
——@@ -46,20 +46,15 @@
4747 var previewSize = 180,
4848 thumb = $( '<div id="mw-upload-thumbnail" class="thumb tright">' +
4949 '<div class="thumbinner">' +
50 - '<canvas width="' + previewSize + '" height="' + previewSize + '" ></canvas>' +
 50+ '<div class="mw-small-spinner" style="width: 180px; height: 180px"></div>' +
5151 '<div class="thumbcaption"><div class="filename"></div><div class="fileinfo"></div></div>' +
5252 '</div>' +
5353 '</div>' );
5454 thumb.find( '.filename' ).text( file.name ).end()
5555 .find( '.fileinfo' ).text( prettySize( file.size ) ).end();
5656
57 - var ctx = thumb.find( 'canvas' )[0].getContext( '2d' ),
58 - spinner = new Image();
59 - spinner.onload = function() {
60 - ctx.drawImage( spinner, (previewSize - spinner.width) / 2,
61 - (previewSize - spinner.height) / 2 );
62 - };
63 - spinner.src = mw.config.get( 'wgScriptPath' ) + '/skins/common/images/spinner.gif';
 57+ var $canvas = $('<canvas width="' + previewSize + '" height="' + previewSize + '" ></canvas>'),
 58+ ctx = $canvas[0].getContext( '2d' );
6459 $( '#mw-htmlform-source' ).parent().prepend( thumb );
6560
6661 var meta;
——@@ -131,6 +126,7 @@
132127 ctx.clearRect( 0, 0, 180, 180 );
133128 ctx.rotate( rotation / 180 * Math.PI );
134129 ctx.drawImage( img, x, y, width, height );
 130+ thumb.find('.mw-small-spinner').replaceWith($canvas);
135131
136132 // Image size
137133 var info = mw.msg( 'widthheight', logicalWidth, logicalHeight ) +

Past revisions this follows-up on

RevisionCommit summaryAuthorDate
r79867Follow-up r79845: Add rotation support to the upload preview using the <canva...btongminh16:24, 8 January 2011

Comments

#Comment by Hashar (talk | contribs)   10:46, 12 December 2011

You are hardcoding height/width to 180px : div class="mw-small-spinner" style="width: 180px; height: 180px

mw-small-spinner points to skins/common/images/spinner.gif image which has 20x20 pixels. Will probably looks ugly.

#Comment by Brion VIBBER (talk | contribs)   15:48, 12 December 2011

It looks fine -- the spinner itself is centered: 

 background-image: url(images/spinner.gif);
 background-position: center center;
 background-repeat: no-repeat;
)

Status & tagging log