| Index: trunk/extensions/UploadWizard/styles/uploadWizard.css |
| — | — | @@ -137,6 +137,10 @@ |
| 138 | 138 | text-align: center; |
| 139 | 139 | } |
| 140 | 140 | |
| | 141 | +.mwe-upwiz-count { |
| | 142 | + height: 60px; |
| | 143 | +} |
| | 144 | + |
| 141 | 145 | .mwe-upwiz-add-files-n { |
| 142 | 146 | float: left; |
| 143 | 147 | margin-top: 5px; |
| — | — | @@ -496,3 +500,7 @@ |
| 497 | 501 | text-align: right; /* works for now, only one 'next' button */ |
| 498 | 502 | } |
| 499 | 503 | |
| | 504 | +a.mwe-upwiz-tooltip-link { |
| | 505 | + cursor: pointer; |
| | 506 | + color: red; |
| | 507 | +} |
| Index: trunk/extensions/UploadWizard/js/mw.UploadWizard.js |
| — | — | @@ -139,42 +139,53 @@ |
| 140 | 140 | |
| 141 | 141 | }; |
| 142 | 142 | |
| | 143 | + |
| 143 | 144 | mw.ProgressBar = function( selector, text ) { |
| 144 | 145 | var _this = this; |
| 145 | 146 | // XXX need to figure out a way to put text inside bar |
| 146 | 147 | |
| 147 | | - _this.progressBarDiv = $j('<div></div>') |
| 148 | | - .addClass("mwe-upwiz-progress-bar") |
| 149 | | - .progressbar( { value: 0 } ); |
| | 148 | + _this.$selector = $j( selector ); |
| | 149 | + _this.$selector.html( |
| | 150 | + '<div class="mwe-upwiz-progress">' |
| | 151 | + + '<div class="mwe-upwiz-progress-bar-etr" style="display: none">' |
| | 152 | + + '<div class="mwe-upwiz-progress-bar"></div>' |
| | 153 | + + '<div class="mwe-upwiz-etr"></div>' |
| | 154 | + + '</div>' |
| | 155 | + + '<div class="mwe-upwiz-count"></div>' |
| | 156 | + + '</div>' |
| | 157 | + ); |
| 150 | 158 | |
| 151 | | - _this.timeRemainingDiv = $j('<div></div>').addClass("mwe-upwiz-etr"); |
| 152 | | - |
| 153 | | - _this.countDiv = $j('<div></div>').addClass("mwe-upwiz-count"); |
| 154 | | - |
| | 159 | + _this.$selector.find( '.mwe-upwiz-progress-bar' ).progressbar( { value : 0 } ); |
| | 160 | + |
| 155 | 161 | _this.beginTime = undefined; |
| 156 | | - |
| 157 | | - $j( selector ).html( |
| 158 | | - $j('<div />').addClass( 'mwe-upwiz-progress' ) |
| 159 | | - .append( $j( '<div></div>' ) |
| 160 | | - .addClass( 'mwe-upwiz-progress-bar-etr' ) |
| 161 | | - .append( _this.progressBarDiv ) |
| 162 | | - .append( _this.timeRemainingDiv ) ) |
| 163 | | - .append( $j( _this.countDiv ) ) |
| 164 | | - ); |
| 165 | 162 | |
| 166 | 163 | }; |
| 167 | 164 | |
| 168 | 165 | mw.ProgressBar.prototype = { |
| 169 | 166 | |
| 170 | 167 | /** |
| | 168 | + * Show the progress bar with a slideout motion |
| | 169 | + */ |
| | 170 | + showBar: function() { |
| | 171 | + this.$selector.find( '.mwe-upwiz-progress-bar-etr' ).slideDown( 500 ); |
| | 172 | + }, |
| | 173 | + |
| | 174 | + |
| | 175 | + /** |
| | 176 | + * Hide the progress bar with a slideup motion |
| | 177 | + */ |
| | 178 | + hideBar: function() { |
| | 179 | + this.$selector.find( '.mwe-upwiz-progress-bar-etr' ).slideUp( 500 ); |
| | 180 | + }, |
| | 181 | + |
| | 182 | + /** |
| 171 | 183 | * sets the beginning time (useful for figuring out estimated time remaining) |
| 172 | 184 | * if time parameter omitted, will set beginning time to now |
| 173 | 185 | * |
| 174 | 186 | * @param time optional; the time this bar is presumed to have started (epoch milliseconds) |
| 175 | 187 | */ |
| 176 | 188 | setBeginTime: function( time ) { |
| 177 | | - var _this = this; |
| 178 | | - _this.beginTime = time ? time : ( new Date() ).getTime(); |
| | 189 | + this.beginTime = time ? time : ( new Date() ).getTime(); |
| 179 | 190 | }, |
| 180 | 191 | |
| 181 | 192 | /** |
| — | — | @@ -182,8 +193,7 @@ |
| 183 | 194 | * @param total an integer, for display e.g. uploaded 1 of 5, this is the 5 |
| 184 | 195 | */ |
| 185 | 196 | setTotal: function(total) { |
| 186 | | - var _this = this; |
| 187 | | - _this.total = total; |
| | 197 | + this.total = total; |
| 188 | 198 | }, |
| 189 | 199 | |
| 190 | 200 | /** |
| — | — | @@ -196,7 +206,7 @@ |
| 197 | 207 | showProgress: function( fraction ) { |
| 198 | 208 | var _this = this; |
| 199 | 209 | |
| 200 | | - _this.progressBarDiv.progressbar( 'value', parseInt( fraction * 100, 10 ) ); |
| | 210 | + _this.$selector.find( '.mwe-upwiz-progress-bar' ).progressbar( 'value', parseInt( fraction * 100, 10 ) ); |
| 201 | 211 | |
| 202 | 212 | var remainingTime; |
| 203 | 213 | if (_this.beginTime === null) { |
| — | — | @@ -206,8 +216,9 @@ |
| 207 | 217 | } |
| 208 | 218 | |
| 209 | 219 | if ( remainingTime !== null ) { |
| 210 | | - _this.timeRemainingDiv |
| 211 | | - .html( gM( 'mwe-upwiz-remaining', mw.seconds2npt(parseInt(remainingTime / 1000), 10) ) ); |
| | 220 | + _this.$selector |
| | 221 | + .find( '.mwe-upwiz-etr' ) |
| | 222 | + .html( gM( 'mwe-upwiz-remaining', mw.seconds2npt( parseInt( remainingTime / 1000 ), 10 ) ) ); |
| 212 | 223 | } |
| 213 | 224 | }, |
| 214 | 225 | |
| — | — | @@ -236,7 +247,9 @@ |
| 237 | 248 | */ |
| 238 | 249 | showCount: function( count ) { |
| 239 | 250 | var _this = this; |
| 240 | | - _this.countDiv.html( gM( 'mwe-upwiz-upload-count', [ count, _this.total ] ) ); |
| | 251 | + _this.$selector |
| | 252 | + .find( '.mwe-upwiz-count' ) |
| | 253 | + .html( gM( 'mwe-upwiz-upload-count', [ count, _this.total ] ) ); |
| 241 | 254 | } |
| 242 | 255 | |
| 243 | 256 | |
| — | — | @@ -2216,8 +2229,14 @@ |
| 2217 | 2230 | var totalCount = wizard.uploads.length; |
| 2218 | 2231 | |
| 2219 | 2232 | var progressBar = new mw.ProgressBar( progressBarSelector, progressBarText ); |
| | 2233 | + progressBar.showBar(); |
| 2220 | 2234 | progressBar.setTotal( totalCount ); |
| 2221 | 2235 | |
| | 2236 | + var end = function() { |
| | 2237 | + progressBar.hideBar(); |
| | 2238 | + endCallback(); |
| | 2239 | + }; |
| | 2240 | + |
| 2222 | 2241 | transitioner = function() { |
| 2223 | 2242 | var fraction = 0.0; |
| 2224 | 2243 | var uploadsToStart = wizard.maxSimultaneousUploads; |
| — | — | @@ -2240,8 +2259,9 @@ |
| 2241 | 2260 | progressBar.showProgress( fraction ); |
| 2242 | 2261 | progressBar.showCount( endStateCount ); |
| 2243 | 2262 | |
| 2244 | | - // build in a little delay even for the end state, so user can see progress bar in a complete state. |
| 2245 | | - var nextAction = (endStateCount == totalCount) ? endCallback : transitioner; |
| | 2263 | + // build in a little delay even for the end state, so user can see progress bar in a complete state. |
| | 2264 | + var nextAction = (endStateCount == totalCount) ? end : transitioner; |
| | 2265 | + |
| 2246 | 2266 | setTimeout( nextAction, wizard.transitionerDelay ); |
| 2247 | 2267 | }; |
| 2248 | 2268 | |