| Index: branches/js2-work/phase3/js/mwEmbed/modules/UploadWizard/mw.UploadWizard.js |
| — | — | @@ -1,7 +1,8 @@ |
| 2 | 2 | mw.addMessages( { |
| 3 | 3 | "mwe-upwiz-tab-file": "1. Upload your files", |
| 4 | | - "mwe-upwiz-tab-details": "2. Add licenses and descriptions", |
| 5 | | - "mwe-upwiz-tab-thanks": "3. Use your files", |
| | 4 | + "mwe-upwiz-tab-deeds": "2. Add licenses", |
| | 5 | + "mwe-upwiz-tab-details": "3. Add descriptions", |
| | 6 | + "mwe-upwiz-tab-thanks": "4. Use your files", |
| 6 | 7 | "mwe-upwiz-intro": "Welcome to Wikimedia Commons, a repository of images, sounds, and movies that anyone can freely download and use. Add to humanity's knowledge by uploading files that could be used for an educational purpose.", |
| 7 | 8 | |
| 8 | 9 | "mwe-upwiz-add-file-n": "Add another file", |
| — | — | @@ -17,7 +18,8 @@ |
| 18 | 19 | "mwe-upwiz-upload-count": "$1 of $2 files uploaded", |
| 19 | 20 | "mwe-upwiz-progressbar-uploading": "uploading", |
| 20 | 21 | "mwe-upwiz-remaining": "$1 remaining", |
| 21 | | - "mwe-upwiz-intro-details": "Thank you! Now we need some basic information about the files you just uploaded.", |
| | 22 | + "mwe-upwiz-deeds-intro": "Thank you! Now we need to set a license for these files, so everyone can legally view or modify them. First, we'll have to know where you got them.", |
| | 23 | + "mwe-upwiz-details-intro": "Now we need some basic information about the files.", |
| 22 | 24 | "mwe-upwiz-source-ownwork": "This file is my own work.", |
| 23 | 25 | "mwe-upwiz-source-ownwork-plural": "These files are my own work.", |
| 24 | 26 | "mwe-upwiz-source-ownwork-assert": "I, $1, the copyright holder of this work, hereby grant anyone the right to use this work for any purpose, as long as they credit me and share derivative work under the same terms.", |
| — | — | @@ -421,6 +423,7 @@ |
| 422 | 424 | if ( result.upload && result.upload.imageinfo && result.upload.imageinfo.descriptionurl ) { |
| 423 | 425 | // success |
| 424 | 426 | _this.extractUploadInfo( result ); |
| | 427 | + _this.deedPreview.setup(); |
| 425 | 428 | _this.details.populate(); |
| 426 | 429 | |
| 427 | 430 | } else if ( result.upload && result.upload.sessionkey ) { |
| — | — | @@ -557,7 +560,48 @@ |
| 558 | 561 | } |
| 559 | 562 | } ); |
| 560 | 563 | |
| | 564 | + }, |
| | 565 | + |
| | 566 | + |
| | 567 | + /** |
| | 568 | + * look up thumbnail info and set it in HTML, with loading spinner |
| | 569 | + * it might be interesting to make this more of a publish/subscribe thing, since we have to do this 3x |
| | 570 | + * the callbacks may pile up, getting unnecessary info |
| | 571 | + * |
| | 572 | + * @param selector |
| | 573 | + * @param width |
| | 574 | + */ |
| | 575 | + setThumbnail: function( selector, width, imgClass ) { |
| | 576 | + var _this = this; |
| | 577 | + if ( typeof width === 'undefined' || width === null || width <= 0 ) { |
| | 578 | + width = mw.getConfig( 'thumbnailWidth' ); |
| | 579 | + } |
| | 580 | + width = parseInt( width, 10 ); |
| | 581 | + |
| | 582 | + if ( typeof imgClass === 'undefined' || imgClass === null ) { |
| | 583 | + imgClass = 'mwe-upwiz-thumbnail'; |
| | 584 | + } |
| | 585 | + |
| | 586 | + var callback = function( thumbnail ) { |
| | 587 | + // side effect: will replace thumbnail's loadingSpinner |
| | 588 | + $j( selector ).html( |
| | 589 | + $j('<a/>') |
| | 590 | + .attr( { 'href': _this.imageinfo.descriptionurl, |
| | 591 | + 'target' : '_new' } ) |
| | 592 | + .append( |
| | 593 | + $j( '<img/>' ) |
| | 594 | + .addClass( imgClass ) |
| | 595 | + .attr( 'width', thumbnail.width ) |
| | 596 | + .attr( 'height', thumbnail.height ) |
| | 597 | + .attr( 'src', thumbnail.url ) ) ); |
| | 598 | + }; |
| | 599 | + |
| | 600 | + $j( selector ).loadingSpinner(); |
| | 601 | + _this.getThumbnail( width, callback ); |
| 561 | 602 | } |
| | 603 | + |
| | 604 | + |
| | 605 | + |
| 562 | 606 | }; |
| 563 | 607 | |
| 564 | 608 | /** |
| — | — | @@ -1307,7 +1351,7 @@ |
| 1308 | 1352 | populate: function() { |
| 1309 | 1353 | var _this = this; |
| 1310 | 1354 | mw.log( "populating details from upload" ); |
| 1311 | | - _this.setThumbnail( mw.getConfig( 'thumbnailWidth' ) ); |
| | 1355 | + _this.upload.setThumbnail( _this.thumbnailDiv ); |
| 1312 | 1356 | _this.prefillDate(); |
| 1313 | 1357 | _this.prefillSource(); |
| 1314 | 1358 | _this.prefillAuthor(); |
| — | — | @@ -1317,33 +1361,6 @@ |
| 1318 | 1362 | }, |
| 1319 | 1363 | |
| 1320 | 1364 | /** |
| 1321 | | - * look up thumbnail info and set it on the form, with loading spinner |
| 1322 | | - * |
| 1323 | | - * @param width |
| 1324 | | - */ |
| 1325 | | - setThumbnail: function( width ) { |
| 1326 | | - var _this = this; |
| 1327 | | - |
| 1328 | | - var callback = function( thumbnail ) { |
| 1329 | | - // side effect: will replace thumbnail's loadingSpinner |
| 1330 | | - _this.thumbnailDiv.html( |
| 1331 | | - $j('<a/>') |
| 1332 | | - .attr( { 'href': _this.upload.imageinfo.descriptionurl, |
| 1333 | | - 'target' : '_new' } ) |
| 1334 | | - .append( |
| 1335 | | - $j( '<img/>' ) |
| 1336 | | - .addClass( "mwe-upwiz-thumbnail" ) |
| 1337 | | - .attr( 'width', thumbnail.width ) |
| 1338 | | - .attr( 'height', thumbnail.height ) |
| 1339 | | - .attr( 'src', thumbnail.url ) ) ); |
| 1340 | | - }; |
| 1341 | | - |
| 1342 | | - _this.thumbnailDiv.loadingSpinner(); |
| 1343 | | - _this.upload.getThumbnail( width, callback ); |
| 1344 | | - |
| 1345 | | - }, |
| 1346 | | - |
| 1347 | | - /** |
| 1348 | 1365 | * Check if we got an EXIF date back; otherwise use today's date; and enter it into the details |
| 1349 | 1366 | * XXX We ought to be using date + time here... |
| 1350 | 1367 | * EXIF examples tend to be in ISO 8601, but the separators are sometimes things like colons, and they have lots of trailing info |
| — | — | @@ -1764,7 +1781,7 @@ |
| 1765 | 1782 | mw.UploadWizard.prototype = { |
| 1766 | 1783 | maxUploads: 10, // XXX get this from config |
| 1767 | 1784 | maxSimultaneousUploads: 2, // XXX get this from config |
| 1768 | | - tabNames: [ 'file', 'details', 'thanks' ], |
| | 1785 | + tabNames: [ 'file', 'deeds', 'details', 'thanks' ], |
| 1769 | 1786 | currentTabName: undefined, |
| 1770 | 1787 | |
| 1771 | 1788 | /* |
| — | — | @@ -1811,6 +1828,7 @@ |
| 1812 | 1829 | '<div id="mwe-upwiz-tabs">' |
| 1813 | 1830 | + '<ul>' |
| 1814 | 1831 | + '<li id="mwe-upwiz-tab-file"><span class="mwe-arrow-text">' + gM('mwe-upwiz-tab-file') + '<span class="mwe-arrow"/></span></span></li>' |
| | 1832 | + + '<li id="mwe-upwiz-tab-deeds"><span class="mwe-arrow-text">' + gM('mwe-upwiz-tab-deeds') + '<span class="mwe-arrow"/></span></span></li>' |
| 1815 | 1833 | + '<li id="mwe-upwiz-tab-details"><span class="mwe-arrow-text">' + gM('mwe-upwiz-tab-details') + '<span class="mwe-arrow"/></span></span></li>' |
| 1816 | 1834 | + '<li id="mwe-upwiz-tab-thanks"><span class="mwe-arrow-text">' + gM('mwe-upwiz-tab-thanks') + '<span class="mwe-arrow"/></span></span></li>' |
| 1817 | 1835 | + '</ul>' |
| — | — | @@ -1836,12 +1854,16 @@ |
| 1837 | 1855 | + '</div>' |
| 1838 | 1856 | + '<div style="clear: left;"></div>' |
| 1839 | 1857 | + '</div>' |
| | 1858 | + + '<div class="mwe-upwiz-tabdiv" id="mwe-upwiz-tabdiv-deeds">' |
| | 1859 | + + '<div id="mwe-upwiz-deeds-intro"></div>' |
| | 1860 | + + '<div id="mwe-upwiz-deeds-thumbnails"></div>' |
| | 1861 | + + '<div id="mwe-upwiz-deeds"></div>' |
| | 1862 | + + '</div>' |
| 1840 | 1863 | + '<div class="mwe-upwiz-tabdiv" id="mwe-upwiz-tabdiv-details">' |
| 1841 | 1864 | + '<div id="mwe-upwiz-macro">' |
| 1842 | 1865 | + '<div id="mwe-upwiz-macro-progress" class="ui-helper-clearfix"></div>' |
| 1843 | 1866 | + '<div id="mwe-upwiz-macro-choice">' |
| 1844 | | - + '<div>' + gM( 'mwe-upwiz-intro-details' ) + '</div>' |
| 1845 | | - + '<div id="mwe-upwiz-macro-deeds"></div>' |
| | 1867 | + + '<div>' + gM( 'mwe-upwiz-details-intro' ) + '</div>' |
| 1846 | 1868 | + '</div>' |
| 1847 | 1869 | + '<div id="mwe-upwiz-macro-files"></div>' |
| 1848 | 1870 | + '<div class="mwe-upwiz-macro-edit-submit"></div>' // button added below |
| — | — | @@ -1855,8 +1877,21 @@ |
| 1856 | 1878 | + '<div class="mwe-upwiz-clearing"></div>'; |
| 1857 | 1879 | |
| 1858 | 1880 | // within FILE tab div |
| 1859 | | - $j('#mwe-upwiz-upload-ctrl').click( function() { _this.startUploads(); } ); |
| | 1881 | + $j('#mwe-upwiz-upload-ctrl').click( function() { |
| | 1882 | + _this.removeEmptyUploads(); |
| | 1883 | + |
| | 1884 | + // we set up deed chooser here, because it's only now that we know how many uploads there are |
| | 1885 | + // possibly it should have some kind of morphing interface for singular/plural, but this doesn't |
| | 1886 | + // seem too bad for now. |
| | 1887 | + _this.deedChooser = new mw.UploadWizardDeedChooser( '#mwe-upwiz-deeds', ( _this.uploads.length > 1 ) ); |
| 1860 | 1888 | |
| | 1889 | + _this.startUploads(); |
| | 1890 | + } ); |
| | 1891 | + |
| | 1892 | + // deeds div |
| | 1893 | + $j( '#mwe-upwiz-deeds-intro' ).html( gM( 'mwe-upwiz-deeds-intro' ) ); |
| | 1894 | + |
| | 1895 | + |
| 1861 | 1896 | // DETAILS div |
| 1862 | 1897 | $j( '.mwe-upwiz-deed-form' ).maskSafeHide(); |
| 1863 | 1898 | |
| — | — | @@ -1876,13 +1911,12 @@ |
| 1877 | 1912 | } ) ); |
| 1878 | 1913 | } ); |
| 1879 | 1914 | |
| 1880 | | - _this.deedChooser = new mw.UploadWizardDeedChooser( '#mwe-upwiz-macro-deeds', true ); |
| 1881 | 1915 | |
| 1882 | 1916 | // add one to start |
| 1883 | 1917 | var upload = _this.newUpload( '#mwe-upwiz-add-file' ); |
| 1884 | 1918 | |
| 1885 | 1919 | // "select" the first tab - highlight, make it visible, hide all others |
| 1886 | | - _this.moveToTab('file', function() { |
| | 1920 | + _this.moveToTab( 'file', function() { |
| 1887 | 1921 | // XXX moving the file input doesn't seem to work at this point |
| 1888 | 1922 | // we are catching up to the application of CSS or something |
| 1889 | 1923 | // XXX using a timeout is lame, are there other options? |
| — | — | @@ -1925,7 +1959,7 @@ |
| 1926 | 1960 | } else { |
| 1927 | 1961 | // it's neither the formerly active nor the newly active one, so don't show it |
| 1928 | 1962 | // we don't use hide() because we want to manipulate elements within future tabs, and calculate their dimensions. |
| 1929 | | - tabDiv.maskSafeHide(); |
| | 1963 | + // tabDiv.maskSafeHide(); |
| 1930 | 1964 | } |
| 1931 | 1965 | } ); |
| 1932 | 1966 | |
| — | — | @@ -1974,24 +2008,12 @@ |
| 1975 | 2009 | // XXX check if it has a file? |
| 1976 | 2010 | _this.uploads.push( upload ); |
| 1977 | 2011 | _this.updateFileCounts(); |
| 1978 | | - // maybe it would be better to defer details to later? |
| | 2012 | + |
| | 2013 | + upload.deedPreview = new mw.UploadWizardDeedPreview( upload ); |
| | 2014 | + upload.deedChooser = _this.deedChooser; |
| | 2015 | + |
| | 2016 | + // set up details |
| 1979 | 2017 | upload.details = new mw.UploadWizardDetails( upload, $j( '#mwe-upwiz-macro-files' )); |
| 1980 | | - |
| 1981 | | - // by default, new uploads use the wizard's deed selector. |
| 1982 | | - upload.deedChooser = _this.deedChooser; |
| 1983 | | - $j( _this.deedChooser ).bind( 'chooseNullDeed', function(e) { |
| 1984 | | - mw.log("upload received chooseNullDeed"); |
| 1985 | | - upload.details.div.mask(); |
| 1986 | | - e.stopPropagation(); |
| 1987 | | - } ); |
| 1988 | | - $j( _this.deedChooser ).bind( 'chooseDeed', function(e) { |
| 1989 | | - mw.log("upload received choose"); |
| 1990 | | - upload.details.div.unmask(); |
| 1991 | | - e.stopPropagation(); |
| 1992 | | - } ); |
| 1993 | | - |
| 1994 | | - |
| 1995 | | - upload.details.div.mask(); |
| 1996 | 2018 | }, |
| 1997 | 2019 | |
| 1998 | 2020 | |
| — | — | @@ -2108,7 +2130,6 @@ |
| 2109 | 2131 | */ |
| 2110 | 2132 | startUploads: function() { |
| 2111 | 2133 | var _this = this; |
| 2112 | | - _this.removeEmptyUploads(); |
| 2113 | 2134 | // remove the upload button, and the add file button |
| 2114 | 2135 | $j( '#mwe-upwiz-upload-ctrl' ).hide(); |
| 2115 | 2136 | $j( '#mwe-upwiz-add-file' ).hide(); |
| — | — | @@ -2132,14 +2153,15 @@ |
| 2133 | 2154 | }, |
| 2134 | 2155 | function() { |
| 2135 | 2156 | $j.each( _this.uploads, function(i, upload) { |
| 2136 | | - upload.state = 'details'; |
| | 2157 | + upload.state = 'deeds'; |
| 2137 | 2158 | } ); |
| 2138 | | - _this.moveToTab( 'details' ); |
| | 2159 | + _this.moveToTab( 'deeds' ); |
| 2139 | 2160 | } |
| 2140 | 2161 | ); |
| 2141 | 2162 | }, |
| 2142 | 2163 | |
| 2143 | 2164 | |
| | 2165 | + |
| 2144 | 2166 | /** |
| 2145 | 2167 | * Occurs whenever we need to update the interface based on how many files there are |
| 2146 | 2168 | * Thhere is an uncounted upload, waiting to be used, which has a fileInput which covers the |
| — | — | @@ -2226,28 +2248,11 @@ |
| 2227 | 2249 | |
| 2228 | 2250 | $j.each( _this.uploads, function(i, upload) { |
| 2229 | 2251 | var thanksDiv = $j( '<div class="mwe-upwiz-thanks ui-helper-clearfix" />' ); |
| | 2252 | + |
| 2230 | 2253 | var thumbnailDiv = $j( '<div></div>' ).addClass( 'mwe-upwiz-thumbnail' ); |
| 2231 | 2254 | thanksDiv.append( thumbnailDiv ); |
| | 2255 | + upload.setThumbnail( thumbnailDiv ); |
| 2232 | 2256 | |
| 2233 | | - /* XXX this is copied code, evil */ |
| 2234 | | - var callback = function( thumbnail ) { |
| 2235 | | - // side effect: will replace thumbnail's loadingSpinner |
| 2236 | | - thumbnailDiv.html( |
| 2237 | | - $j('<a>') |
| 2238 | | - .attr( { 'href': upload.imageinfo.descriptionurl, |
| 2239 | | - 'target': '_new' } ) |
| 2240 | | - .append( |
| 2241 | | - $j( '<img/>' ) |
| 2242 | | - .addClass( "mwe-upwiz-thumbnail" ) |
| 2243 | | - .attr( 'width', thumbnail.width ) |
| 2244 | | - .attr( 'height', thumbnail.height ) |
| 2245 | | - .attr( 'src', thumbnail.url ) ) ); |
| 2246 | | - }; |
| 2247 | | - |
| 2248 | | - thumbnailDiv.loadingSpinner(); |
| 2249 | | - upload.getThumbnail( width, callback ); |
| 2250 | | - /* end evil copied code */ |
| 2251 | | - |
| 2252 | 2257 | var thumbTitle = upload.title.replace(/^File/, 'Image'); // XXX is this really necessary? |
| 2253 | 2258 | var thumbWikiText = "[[" + thumbTitle + "|thumb]]"; |
| 2254 | 2259 | |
| — | — | @@ -2300,6 +2305,21 @@ |
| 2301 | 2306 | } |
| 2302 | 2307 | }; |
| 2303 | 2308 | |
| | 2309 | + |
| | 2310 | +mw.UploadWizardDeedPreview = function(upload) { |
| | 2311 | + this.upload = upload; |
| | 2312 | +}; |
| | 2313 | + |
| | 2314 | +mw.UploadWizardDeedPreview.prototype = { |
| | 2315 | + setup: function() { |
| | 2316 | + var _this = this; |
| | 2317 | + // add a preview on the deeds page |
| | 2318 | + var thumbnailDiv = $j( '<div></div>' ).addClass( 'mwe-upwiz-thumbnail' ); |
| | 2319 | + $j( '#mwe-upwiz-deeds-thumbnails' ).append( thumbnailDiv ); |
| | 2320 | + _this.upload.setThumbnail( thumbnailDiv, mw.getConfig( 'smallThumbnailWidth' ), 'mwe-upwiz-smallthumbnail' ); |
| | 2321 | + } |
| | 2322 | +}; |
| | 2323 | + |
| 2304 | 2324 | mw.UploadWizardNullDeed = $j.extend( new mw.UploadWizardDeed(), { |
| 2305 | 2325 | isReady: function() { |
| 2306 | 2326 | return false; |
| Index: branches/js2-work/phase3/js/mwEmbed/modules/UploadWizard/css/uploadWizard.css |
| — | — | @@ -268,6 +268,16 @@ |
| 269 | 269 | margin-right: 12px; |
| 270 | 270 | } |
| 271 | 271 | |
| | 272 | +#mwe-upwiz-deeds-thumbnails { |
| | 273 | + text-align: center; |
| | 274 | + vertical-align: middle; |
| | 275 | +} |
| | 276 | + |
| | 277 | +.mwe-upwiz-smallthumbnail { |
| | 278 | + width: 60px; /* XXX should be same as configured small thumbnail width in uploadWizard.js */ |
| | 279 | + margin: 6px; |
| | 280 | +} |
| | 281 | + |
| 272 | 282 | .mwe-upwiz-data { |
| 273 | 283 | float: left; |
| 274 | 284 | } |
| Index: branches/js2-work/phase3/js/specialUploadWizardPage.js |
| — | — | @@ -14,6 +14,7 @@ |
| 15 | 15 | mw.setConfig( 'fileExtensions', wgFileExtensions ); |
| 16 | 16 | mw.setConfig( 'token', wgEditToken ); |
| 17 | 17 | mw.setConfig( 'thumbnailWidth', 120 ); |
| | 18 | + mw.setConfig( 'smallThumbnailWidth', 60 ); |
| 18 | 19 | |
| 19 | 20 | // not for use with all wikis. |
| 20 | 21 | // The ISO 639 code for the language tagalog is "tl". |