r77029 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:r77028‎ | r77029 | r77030 >
Date:20:13, 19 November 2010
Author:neilk
Status:deferred
Tags:
Comment:
multiple progress and end states, clean up file controls after completion
Modified paths:
  • /trunk/extensions/UploadWizard/resources/mw.ApiUploadHandler.js (modified) (history)
  • /trunk/extensions/UploadWizard/resources/mw.GroupProgressBar.js (modified) (history)
  • /trunk/extensions/UploadWizard/resources/mw.IframeTransport.js (modified) (history)
  • /trunk/extensions/UploadWizard/resources/mw.UploadWizard.js (modified) (history)
  • /trunk/extensions/UploadWizard/resources/uploadWizard.css (modified) (history)

Diff [purge]

Index: trunk/extensions/UploadWizard/resources/mw.GroupProgressBar.js
@@ -1,7 +1,7 @@
22 /**
33 * this is a progress bar for monitoring multiple objects, giving summary view
44 */
5 -mw.GroupProgressBar = function( selector, text, uploads, endState, progressProperty, weightProperty ) {
 5+mw.GroupProgressBar = function( selector, text, uploads, endStates, progressProperty, weightProperty ) {
66 var _this = this;
77
88 // XXX need to figure out a way to put text inside bar
@@ -21,7 +21,7 @@
2222 _this.$selector.find( '.mwe-upwiz-progress-bar' ).progressbar( { value : 0 } );
2323
2424 _this.uploads = uploads;
25 - _this.endState = endState;
 25+ _this.endStates = endStates;
2626 _this.progressProperty = progressProperty;
2727 _this.weightProperty = weightProperty;
2828 _this.beginTime = undefined;
@@ -56,7 +56,7 @@
5757 var endStateCount = 0;
5858 var hasData = false;
5959 $j.each( _this.uploads, function( i, upload ) {
60 - if ( upload.state == _this.endState ) {
 60+ if ( $j.inArray( upload.state, _this.endStates ) !== -1 ) {
6161 endStateCount++;
6262 }
6363 if (upload[_this.progressProperty] !== undefined) {
Index: trunk/extensions/UploadWizard/resources/uploadWizard.css
@@ -222,13 +222,13 @@
223223 }
224224
225225 .mwe-upwiz-status-completed {
226 - background: url(checkmark.gif) no-repeat left center;
 226+ background: url(32px-Dialog-apply.svg.png) no-repeat left center;
227227 font-weight: bold;
228228 color: #009900;
229229 }
230230
231 -.mwe-upwiz-status-failed {
232 - background: url(16px-Gnome-process-stop.svg.png) no-repeat left center;
 231+.mwe-upwiz-status-error {
 232+ background: url(32px-Nuvola_apps_important_orange.svg.png) no-repeat left center;
233233 font-weight: bold;
234234 color: #CC0000;
235235 }
Index: trunk/extensions/UploadWizard/resources/mw.UploadWizard.js
@@ -2,7 +2,7 @@
33 * Represents the upload -- in its local and remote state. (Possibly those could be separate objects too...)
44 * This is our 'model' object if we are thinking MVC. Needs to be better factored, lots of feature envy with the UploadWizard
55 * states:
6 - * 'new' 'transporting' 'transported' 'details' 'submitting-details' 'complete' 'failed'
 6+ * 'new' 'transporting' 'transported' 'metadata' 'thumbnailed' 'details' 'submitting-details' 'complete' 'error'
77 * should fork this into two -- local and remote, e.g. filename
88 */
99 ( function( $j ) {
@@ -81,11 +81,11 @@
8282 /**
8383 * Stop the upload -- we have failed for some reason
8484 */
85 - setFailed: function( code ) {
 85+ setError: function( code, info ) {
8686 /* stop the upload progress */
87 - this.state = 'failed';
 87+ this.state = 'error';
8888 this.transportProgress = 0;
89 - this.ui.showFailed( code );
 89+ this.ui.showError( code, info );
9090 },
9191
9292 /**
@@ -113,14 +113,14 @@
114114
115115 // and other errors that result in a stash
116116 } else {
117 - // XXX handle errors better
118 - _this.state = 'error';
119 - _this.ui.showFailed();
 117+ // XXX handle errors better -- get code and pass to showError
 118+ var code = 'unknown';
 119+ var info = 'unknown';
120120 if ( result.error ) {
121 - alert( "error : " + result.error.code + " : " + result.error.info );
 121+ code = result.error.code;
 122+ info = result.error.info;
122123 }
123 - // TODO now we should tag the upload as failed
124 - // if can recover, should maybe allow re-uploading.
 124+ _this.setError( code, info );
125125 }
126126
127127 },
@@ -275,9 +275,8 @@
276276 _this.div = $j('<div class="mwe-upwiz-file"></div>').get(0);
277277 _this.isFilled = false;
278278
279 - _this.fileInputCtrl = $j('<input size="1" class="mwe-upwiz-file-input" name="file" type="file"/>')
280 - .change( function() { _this.fileChanged(); } )
281 - .get(0);
 279+ _this.$fileInputCtrl = $j('<input size="1" class="mwe-upwiz-file-input" name="file" type="file"/>')
 280+ .change( function() { _this.fileChanged(); } );
282281
283282
284283 visibleFilenameDiv = $j('<div class="mwe-upwiz-visible-file"></div>')
@@ -292,13 +291,14 @@
293292 + '</div>'
294293 + '</div>'
295294 );
296 - visibleFilenameDiv.find( '.mwe-upwiz-file-status-line' ).append(
297 - $j.fn.removeCtrl(
298 - 'mwe-upwiz-remove',
299 - 'mwe-upwiz-remove-upload',
300 - function() { _this.upload.remove(); }
301 - ).addClass( "mwe-upwiz-file-status-line-item" )
 295+ _this.$removeCtrl = $j.fn.removeCtrl(
 296+ 'mwe-upwiz-remove',
 297+ 'mwe-upwiz-remove-upload',
 298+ function() { _this.upload.remove(); }
302299 );
 300+ visibleFilenameDiv.find( '.mwe-upwiz-file-status-line' )
 301+ .append( _this.$removeCtrl )
 302+ .addClass( "mwe-upwiz-file-status-line-item" );
303303
304304
305305 //_this.errorDiv = $j('<div class="mwe-upwiz-upload-error mwe-upwiz-file-indicator" style="display: none;"></div>').get(0);
@@ -324,7 +324,7 @@
325325 _this.form = $j('<form class="mwe-upwiz-form"></form>')
326326 .append( visibleFilenameDiv )
327327 .append( _this.fileCtrlContainer
328 - .append( _this.fileInputCtrl )
 328+ .append( _this.$fileInputCtrl )
329329 )
330330 .append( _this.filenameCtrl )
331331 .append( _this.thumbnailParam )
@@ -362,17 +362,11 @@
363363 .remove();
364364 },
365365
366 - busy: function() {
367 - var _this = this;
368 - // for now we implement this as looking like "100% progress"
369 - // e.g. an animated bar that takes up all the space
370 - // _this.showTransportProgress();
371 - },
372 -
373366 /**
374367 * change the indicator at the far right
375368 */
376369 showIndicatorMessage: function( statusClass, msgKey ) {
 370+ debugger;
377371 var _this = this;
378372 var $indicator = $j( _this.div ).find( '.mwe-upwiz-file-indicator' );
379373 $j.each( $indicator.attr( 'class' ).split( /\s+/ ), function( i, className ) {
@@ -410,22 +404,26 @@
411405 * @param fraction The fraction of progress. Float between 0 and 1
412406 */
413407 showTransportProgress: function( fraction ) {
414 - this.showIndicatorMessage( 'progress', 'mwe-upwiz-uploading' );
415 - // update individual progress bar with fraction?
 408+ // if fraction available, update individual progress bar / estimates, etc.
 409+ this.showIndicatorMessage( 'progress' );
 410+ this.setStatus( 'mwe-upwiz-uploading' );
416411 },
417412
418413 /**
419414 * Show that upload is transported
420415 */
421416 showTransported: function() {
 417+ this.$removeCtrl.detach();
 418+ this.$fileInputCtrl.detach();
422419 this.showIndicatorMessage( 'completed', 'mwe-upwiz-transported' );
423420 },
424421
425422 /**
426423 * Show that transport has failed
427424 */
428 - showFailed: function( code ) {
429 - this.showIndicatorMessage( 'failed', 'mwe-upwiz-failed' );
 425+ showError: function( code, info ) {
 426+ // XXX TODO use code
 427+ this.showIndicatorMessage( 'error', 'mwe-upwiz-error' );
430428 //add a "retry" button, too?
431429 },
432430
@@ -436,7 +434,7 @@
437435 fileChanged: function() {
438436 var _this = this;
439437 _this.clearErrors();
440 - _this.upload.extractLocalFileInfo( $j( _this.fileInputCtrl ).val() );
 438+ _this.upload.extractLocalFileInfo( _this.$fileInputCtrl.val() );
441439 if ( _this.isGoodExtension( _this.upload.title.getExtension() ) ) {
442440 _this.updateFilename();
443441 } else {
@@ -465,9 +463,9 @@
466464 // shift the file input over with negative margins,
467465 // internal to the overflow-containing div, so the div shows all button
468466 // and none of the textfield-like input
469 - $j( this.fileInputCtrl ).css( {
470 - 'margin-left': '-' + ~~( $j( this.fileInputCtrl ).width() - $covered.outerWidth() - 10 ) + 'px',
471 - 'margin-top' : '-' + ~~( $j( this.fileInputCtrl ).height() - $covered.outerHeight() - 10 ) + 'px'
 467+ this.$fileInputCtrl.css( {
 468+ 'margin-left': '-' + ~~( this.$fileInputCtrl.width() - $covered.outerWidth() - 10 ) + 'px',
 469+ 'margin-top' : '-' + ~~( this.$fileInputCtrl.height() - $covered.outerHeight() - 10 ) + 'px'
472470 } );
473471
474472
@@ -484,7 +482,7 @@
485483 updateFilename: function() {
486484 var _this = this;
487485 // TODO get basename of file; Chrome does this C:\fakepath\something which is highly irritating
488 - var path = _this.fileInputCtrl.value;
 486+ var path = _this.$fileInputCtrl.val();
489487
490488 // visible filenam.
491489 $j( _this.form ).find( '.mwe-upwiz-visible-file-filename-text' ).html( path );
@@ -1529,56 +1527,21 @@
15301528 $j( '#mwe-upwiz-stepdiv-file .mwe-upwiz-button-next')
15311529 .append( gM( 'mwe-upwiz-next-file' ) )
15321530 .click( function() {
1533 - // check if there is an upload at all
1534 - if ( _this.uploads.length === 0 ) {
1535 - // XXX use standard error message
1536 - alert( gM( 'mwe-upwiz-file-need-file' ) );
1537 - return;
1538 - }
1539 -
1540 - _this.removeEmptyUploads();
1541 - _this.startUploads( function() {
1542 -
1543 - // okay all uploads are done, we're ready to go to the next step
1544 -
1545 - // do some last minute prep before advancing to the DEEDS page
1546 -
1547 - // these deeds are standard
1548 - var deeds = [
1549 - new mw.UploadWizardDeedOwnWork( _this.uploads.length ),
1550 - new mw.UploadWizardDeedThirdParty( _this.uploads.length )
1551 - ];
1552 -
1553 - // if we have multiple uploads, also give them the option to set
1554 - // licenses individually
1555 - if ( _this.uploads.length > 1 ) {
1556 - var customDeed = $j.extend( new mw.UploadWizardDeed(), {
1557 - valid: function() { return true; },
1558 - name: 'custom'
1559 - } );
1560 - deeds.push( customDeed );
 1531+ // check if there is an upload at all (should never happen)
 1532+ if ( _this.uploads.length === 0 ) {
 1533+ // XXX use standard error message
 1534+ alert( gM( 'mwe-upwiz-file-need-file' ) );
 1535+ return;
15611536 }
15621537
1563 - _this.deedChooser = new mw.UploadWizardDeedChooser(
1564 - '#mwe-upwiz-deeds',
1565 - deeds,
1566 - _this.uploads.length );
1567 -
1568 - $j( '<div>' ).html( gM( 'mwe-upwiz-deeds-macro-prompt', _this.uploads.length ) )
1569 - .insertBefore ( _this.deedChooser.$selector.find( '.mwe-upwiz-deed-ownwork' ) );
 1538+ _this.removeEmptyUploads();
 1539+ _this.startUploads( function() {
 1540+ // okay all uploads are done, we may be ready to go to the next step
 1541+ alert( "hey, uploads are done");
15701542
1571 - if ( _this.uploads.length > 1 ) {
1572 - $j( '<div style="margin-top: 1em">' ).html( gM( 'mwe-upwiz-deeds-custom-prompt' ) )
1573 - .insertBefore( _this.deedChooser.$selector.find( '.mwe-upwiz-deed-custom' ) );
1574 - }
 1543+ } );
 1544+ } );
15751545
1576 -
1577 - _this.moveToStep( 'deeds' );
1578 -
1579 - } );
1580 - } );
1581 -
1582 -
15831546 // DEEDS div
15841547
15851548 $j( '#mwe-upwiz-deeds-intro' ).html( gM( 'mwe-upwiz-deeds-intro' ) );
@@ -1639,6 +1602,43 @@
16401603
16411604 },
16421605
 1606+
 1607+ // do some last minute prep before advancing to the DEEDS page
 1608+ prepareAndMoveToDeeds: function() {
 1609+
 1610+ // these deeds are standard
 1611+ var deeds = [
 1612+ new mw.UploadWizardDeedOwnWork( _this.uploads.length ),
 1613+ new mw.UploadWizardDeedThirdParty( _this.uploads.length )
 1614+ ];
 1615+
 1616+ // if we have multiple uploads, also give them the option to set
 1617+ // licenses individually
 1618+ if ( _this.uploads.length > 1 ) {
 1619+ var customDeed = $j.extend( new mw.UploadWizardDeed(), {
 1620+ valid: function() { return true; },
 1621+ name: 'custom'
 1622+ } );
 1623+ deeds.push( customDeed );
 1624+ }
 1625+
 1626+ _this.deedChooser = new mw.UploadWizardDeedChooser(
 1627+ '#mwe-upwiz-deeds',
 1628+ deeds,
 1629+ _this.uploads.length );
 1630+
 1631+ $j( '<div>' ).html( gM( 'mwe-upwiz-deeds-macro-prompt', _this.uploads.length ) )
 1632+ .insertBefore ( _this.deedChooser.$selector.find( '.mwe-upwiz-deed-ownwork' ) );
 1633+
 1634+ if ( _this.uploads.length > 1 ) {
 1635+ $j( '<div style="margin-top: 1em">' ).html( gM( 'mwe-upwiz-deeds-custom-prompt' ) )
 1636+ .insertBefore( _this.deedChooser.$selector.find( '.mwe-upwiz-deed-custom' ) );
 1637+ }
 1638+
 1639+ _this.moveToStep( 'deeds' );
 1640+
 1641+ },
 1642+
16431643 /**
16441644 * Advance one "step" in the wizard interface.
16451645 * It is assumed that the previous step to the current one was selected.
@@ -1783,7 +1783,7 @@
17841784 var toRemove = [];
17851785
17861786 for ( var i = 0; i < _this.uploads.length; i++ ) {
1787 - if ( mw.isEmpty( _this.uploads[i].ui.fileInputCtrl.value ) ) {
 1787+ if ( mw.isEmpty( _this.uploads[i].ui.$fileInputCtrl.val() ) ) {
17881788 toRemove.push( _this.uploads[i] );
17891789 }
17901790 }
@@ -1798,11 +1798,11 @@
17991799 *
18001800 * @param beginState what state the upload should be in before starting.
18011801 * @param progressState the state to set the upload to while it's doing whatever
1802 - * @param endState the state to set the upload to after it's done whatever
 1802+ * @param endState the state (or array of states) that signify we're done with this process
18031803 * @param starter function, taking single argument (upload) which starts the process we're interested in
18041804 * @param endCallback function to call when all uploads are in the end state.
18051805 */
1806 - makeTransitioner: function( beginState, progressState, endState, starter, endCallback ) {
 1806+ makeTransitioner: function( beginState, progressStates, endStates, starter, endCallback ) {
18071807
18081808 var _this = this;
18091809
@@ -1810,9 +1810,9 @@
18111811 var uploadsToStart = _this.maxSimultaneousConnections;
18121812 var endStateCount = 0;
18131813 $j.each( _this.uploads, function(i, upload) {
1814 - if ( upload.state == endState ) {
 1814+ if ( $j.inArray( upload.state, endStates ) !== -1 ) {
18151815 endStateCount++;
1816 - } else if ( upload.state == progressState ) {
 1816+ } else if ( $j.inArray( upload.state, progressStates ) !== -1 ) {
18171817 uploadsToStart--;
18181818 } else if ( ( upload.state == beginState ) && ( uploadsToStart > 0 ) ) {
18191819 starter( upload );
@@ -1852,7 +1852,7 @@
18531853 var progressBar = new mw.GroupProgressBar( '#mwe-upwiz-progress',
18541854 gM( 'mwe-upwiz-uploading' ),
18551855 _this.uploads,
1856 - 'transported',
 1856+ [ 'error', 'thumbnailed' ],
18571857 'transportProgress',
18581858 'transportWeight' );
18591859 progressBar.start();
@@ -1866,8 +1866,8 @@
18671867 // the progress bar and elapsed time
18681868 _this.makeTransitioner(
18691869 'new',
1870 - 'transporting',
1871 - 'transported',
 1870+ [ 'transporting', 'transported', 'metadata' ],
 1871+ [ 'error', 'thumbnailed' ],
18721872 function( upload ) {
18731873 upload.start();
18741874 },
@@ -1975,8 +1975,8 @@
19761976 // add in the upload count
19771977 _this.makeTransitioner(
19781978 'details',
1979 - 'submitting-details',
1980 - 'complete',
 1979+ [ 'submitting-details' ],
 1980+ [ 'complete' ],
19811981 function( upload ) {
19821982 upload.details.submit( function() {
19831983 upload.details.div.data( 'mask' ).html();
Index: trunk/extensions/UploadWizard/resources/mw.ApiUploadHandler.js
@@ -21,8 +21,12 @@
2222 var _this = this;
2323 this.transport = new mw.IframeTransport(
2424 this.$form,
25 - function( fraction ){ _this.upload.setTransportProgress( fraction ); },
 25+ function( fraction ) {
 26+ debugger;
 27+ _this.upload.setTransportProgress( fraction );
 28+ },
2629 function( result ) {
 30+ debugger;
2731 _this.upload.setTransported( result );
2832 }
2933 );
@@ -107,7 +111,8 @@
108112 var ok = function() {
109113 mw.log( "api: upload start!" );
110114 _this.beginTime = ( new Date() ).getTime();
111 - _this.upload.ui.busy();
 115+ _this.upload.ui.setStatus( 'mwe-upwiz-transport-started' );
 116+ _this.upload.ui.showTransportProgress();
112117 _this.$form.submit();
113118 };
114119 var err = function( code, info ) {
Index: trunk/extensions/UploadWizard/resources/mw.IframeTransport.js
@@ -56,6 +56,7 @@
5757 // Set up the completion callback
5858 var _this = this;
5959 $j( '#' + this.iframeId ).load( function() {
 60+ debugger;
6061 mw.log( "received result in iframe" );
6162 _this.progressCb( 1.0 );
6263 _this.processIframeResult( $j( this ).get( 0 ) );

Status & tagging log