r65887 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r65886‎ | r65887 | r65888 >
Date:22:33, 3 May 2010
Author:neilk
Status:deferred
Tags:
Comment:
four-step upload, new wizard next buttons, first page working
Modified paths:
  • /branches/js2-work/phase3/js/mwEmbed/modules/UploadWizard/css/uploadWizard.css (modified) (history)
  • /branches/js2-work/phase3/js/mwEmbed/modules/UploadWizard/loader.js (modified) (history)
  • /branches/js2-work/phase3/js/mwEmbed/modules/UploadWizard/mw.UploadWizard.js (modified) (history)

Diff [purge]

Index: branches/js2-work/phase3/js/mwEmbed/modules/UploadWizard/loader.js
——@@ -53,7 +53,9 @@
5454 '$j.ui.datepicker',
5555 '$j.effects.core',
5656 '$j.effects.slide',
 57+ '$j.effects.pulsate',
5758 '$j.fn.autocomplete',
 59+ '$j.fn.jWizard',
5860 'mw.style.autocomplete'
5961 ],
6062 [
Index: branches/js2-work/phase3/js/mwEmbed/modules/UploadWizard/mw.UploadWizard.js
——@@ -1,8 +1,8 @@
22 mw.addMessages( {
3 - "mwe-upwiz-tab-file": "1. Upload 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",
 3+ "mwe-upwiz-step-file": "1. Upload your files",
 4+ "mwe-upwiz-step-deeds": "2. Add licenses",
 5+ "mwe-upwiz-step-details": "3. Add descriptions",
 6+ "mwe-upwiz-step-thanks": "4. Use your files",
77 "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.",
88
99 "mwe-upwiz-add-file-n": "Add another file",
——@@ -78,7 +78,15 @@
7979 "mwe-upwiz-overwrite" : "Replace the file",
8080
8181 "mwe-copyright-macro": "As above",
82 - "mwe-copyright-custom": "Custom"
 82+ "mwe-copyright-custom": "Custom",
 83+
 84+ "mwe-upwiz-next": "Next",
 85+ "mwe-upwiz-home": "Wikimedia Commons",
 86+ "mwe-upwiz-upload-another": "Upload more files",
 87+
 88+ "mwe-prevent-close": "Your files are still uploading. Are you sure you want to navigate away from this page?",
 89+
 90+ "mwe-upwiz-files-complete": "Your files finished uploading!"
8391 } );
8492
8593
——@@ -1781,8 +1789,8 @@
17821790 mw.UploadWizard.prototype = {
17831791 maxUploads: 10, // XXX get this from config
17841792 maxSimultaneousUploads: 2, // XXX get this from config
1785 - tabNames: [ 'file', 'deeds', 'details', 'thanks' ],
1786 - currentTabName: undefined,
 1793+ stepNames: [ 'file', 'deeds', 'details', 'thanks' ],
 1794+ currentStepName: undefined,
17871795
17881796 /*
17891797 // list possible upload handlers in order of preference
——@@ -1825,19 +1833,18 @@
18261834 var div = $j( selector ).get(0);
18271835 div.innerHTML =
18281836
1829 - '<div id="mwe-upwiz-tabs">'
1830 - + '<ul>'
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>'
1833 - + '<li id="mwe-upwiz-tab-details"><span class="mwe-arrow-text">' + gM('mwe-upwiz-tab-details') + '<span class="mwe-arrow"/></span></span></li>'
1834 - + '<li id="mwe-upwiz-tab-thanks"><span class="mwe-arrow-text">' + gM('mwe-upwiz-tab-thanks') + '<span class="mwe-arrow"/></span></span></li>'
1835 - + '</ul>'
 1837+ '<div id="mwe-upwiz-steparrows" class="ui-helper-clearfix">'
 1838+ + '<ul>'
 1839+ + '<li id="mwe-upwiz-step-file"><span class="mwe-arrow-text">' + gM('mwe-upwiz-step-file') + '<span class="mwe-arrow"/></span></span></li>'
 1840+ + '<li id="mwe-upwiz-step-deeds"><span class="mwe-arrow-text">' + gM('mwe-upwiz-step-deeds') + '<span class="mwe-arrow"/></span></span></li>'
 1841+ + '<li id="mwe-upwiz-step-details"><span class="mwe-arrow-text">' + gM('mwe-upwiz-step-details') + '<span class="mwe-arrow"/></span></span></li>'
 1842+ + '<li id="mwe-upwiz-step-thanks"><span class="mwe-arrow-text">' + gM('mwe-upwiz-step-thanks') + '<span class="mwe-arrow"/></span></span></li>'
 1843+ + '</ul>'
18361844 + '</div>'
1837 - + '<div class="mwe-upwiz-clearing"></div>'
18381845
 1846+ + '<div id="mwe-upwiz-content">'
18391847
1840 - + '<div id="mwe-upwiz-content">'
1841 - + '<div class="mwe-upwiz-tabdiv" id="mwe-upwiz-tabdiv-file">'
 1848+ + '<div class="mwe-upwiz-stepdiv ui-helper-clearfix" id="mwe-upwiz-stepdiv-file">'
18421849 + '<div id="mwe-upwiz-intro">' + gM('mwe-upwiz-intro') + '</div>'
18431850 + '<div id="mwe-upwiz-files">'
18441851 + '<div class="shim" style="height: 120px"></div>'
——@@ -1849,77 +1856,94 @@
18501857 + '<button id="mwe-upwiz-upload-ctrl" disabled="disabled">' + gM("mwe-upwiz-upload") + '</button>'
18511858 + '</div>'
18521859 + '</div>'
1853 - + '<div id="mwe-upwiz-progress"></div>'
1854 - + '<div class="clearShim"></div>'
1855 - + '</div>'
1856 - + '<div style="clear: left;"></div>'
 1860+ + '<div id="mwe-upwiz-progress" class="ui-helper-clearfix"></div>'
 1861+ + '</div>'
 1862+ + '<div class="mwe-upwiz-buttons"/>'
 1863+ + '<button class="mwe-upwiz-button-next" disabled="true" />'
 1864+ + '</div>'
18571865 + '</div>'
1858 - + '<div class="mwe-upwiz-tabdiv" id="mwe-upwiz-tabdiv-deeds">'
 1866+
 1867+ + '<div class="mwe-upwiz-stepdiv" id="mwe-upwiz-stepdiv-deeds">'
18591868 + '<div id="mwe-upwiz-deeds-intro"></div>'
18601869 + '<div id="mwe-upwiz-deeds-thumbnails"></div>'
18611870 + '<div id="mwe-upwiz-deeds"></div>'
 1871+ + '<div class="mwe-upwiz-buttons"/>'
 1872+ + '<button class="mwe-upwiz-button-next" disabled="true" />'
 1873+ + '</div>'
18621874 + '</div>'
1863 - + '<div class="mwe-upwiz-tabdiv" id="mwe-upwiz-tabdiv-details">'
 1875+
 1876+ + '<div class="mwe-upwiz-stepdiv" id="mwe-upwiz-stepdiv-details">'
18641877 + '<div id="mwe-upwiz-macro">'
18651878 + '<div id="mwe-upwiz-macro-progress" class="ui-helper-clearfix"></div>'
18661879 + '<div id="mwe-upwiz-macro-choice">'
18671880 + '<div>' + gM( 'mwe-upwiz-details-intro' ) + '</div>'
18681881 + '</div>'
18691882 + '<div id="mwe-upwiz-macro-files"></div>'
1870 - + '<div class="mwe-upwiz-macro-edit-submit"></div>' // button added below
18711883 + '</div>'
 1884+ + '<div class="mwe-upwiz-buttons"/>'
 1885+ + '<button class="mwe-upwiz-button-next" disabled="true" />'
 1886+ + '</div>'
18721887 + '</div>'
1873 - + '<div class="mwe-upwiz-tabdiv" id="mwe-upwiz-tabdiv-thanks">'
 1888+
 1889+ + '<div class="mwe-upwiz-stepdiv" id="mwe-upwiz-stepdiv-thanks">'
18741890 + '<div id="mwe-upwiz-thanks"></div>'
 1891+ + '<div class="mwe-upwiz-buttons"/>'
 1892+ + '<button class="mwe-upwiz-button-begin" />'
 1893+ + '<br/><button class="mwe-upwiz-button-home" />'
 1894+ + '</div>'
18751895 + '</div>'
 1896+
18761897 + '</div>'
18771898
18781899 + '<div class="mwe-upwiz-clearing"></div>';
 1900+
18791901
1880 - // within FILE tab div
 1902+ $j( '.mwe-upwiz-button-home' ).append( gM( 'mwe-upwiz-home' ) );
 1903+ $j( '.mwe-upwiz-button-begin' ).append( gM( 'mwe-upwiz-upload-another' ) );
 1904+
 1905+ $j( '.mwe-upwiz-button-next' )
 1906+ .append( gM( 'mwe-upwiz-next' ) )
 1907+
 1908+ // within FILE step div
18811909 $j('#mwe-upwiz-upload-ctrl').click( function() {
18821910 _this.removeEmptyUploads();
18831911
18841912 // 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
 1913+ // possibly it could have some kind of morphing interface for singular/plural, but this doesn't
18861914 // seem too bad for now.
18871915 _this.deedChooser = new mw.UploadWizardDeedChooser( '#mwe-upwiz-deeds', ( _this.uploads.length > 1 ) );
18881916
18891917 _this.startUploads();
18901918 } );
18911919
1892 - // deeds div
 1920+ $j( '#mwe-upwiz-stepdiv-file .mwe-upwiz-button-next').click( function() {
 1921+ _this.moveToStep( 'deeds' );
 1922+ } );
 1923+
 1924+ // DEEDS div
18931925 $j( '#mwe-upwiz-deeds-intro' ).html( gM( 'mwe-upwiz-deeds-intro' ) );
18941926
 1927+ $j( '#mwe-upwiz-stepdiv-deeds .mwe-upwiz-button-next').click( function() {
 1928+ _this.moveToStep('details');
 1929+ } );
18951930
18961931 // DETAILS div
1897 - $j( '.mwe-upwiz-deed-form' ).maskSafeHide();
1898 -
1899 -
1900 - // buttons to submit all details and go on to the thanks page, at the top and bottom of the page.
1901 - $j( '.mwe-upwiz-macro-edit-submit' ).each( function() {
1902 - $j( this ).append( $j( '<input />' )
1903 - .addClass( 'mwe-upwiz-details-submit' )
1904 - .attr( { type: 'submit', value: gM( 'mwe-upwiz-macro-edit' ) } )
1905 - .click( function() {
1906 - // move to the top of the page to see the progress bar
1907 - $j( 'html' ).scrollTop( 0 );
1908 - _this.detailsSubmit( function() {
1909 - _this.prefillThanksPage();
1910 - _this.moveToTab('thanks');
1911 - } );
1912 - } ) );
 1932+ $j( '#mwe-upwiz-stepdiv-details' ).click( function() {
 1933+ _this.detailsSubmit( function() {
 1934+ _this.prefillThanksPage();
 1935+ _this.moveToStep('thanks');
 1936+ } );
19131937 } );
1914 -
19151938
19161939 // add one to start
19171940 var upload = _this.newUpload( '#mwe-upwiz-add-file' );
19181941
1919 - // "select" the first tab - highlight, make it visible, hide all others
1920 - _this.moveToTab( 'file', function() {
1921 - // XXX moving the file input doesn't seem to work at this point
1922 - // we are catching up to the application of CSS or something
 1942+ // "select" the first step - highlight, make it visible, hide all others
 1943+ _this.moveToStep( 'file', function() {
 1944+ // XXX moving the file input doesn't seem to work at this point; we get its old position before
 1945+ // CSS is applied. Hence, using a timeout.
19231946 // XXX using a timeout is lame, are there other options?
 1947+ // XXX Trevor suggests that using addClass() may queue stuff unnecessarily; use 'concrete' HTML
19241948 setTimeout( function() {
19251949 upload.ui.moveFileInputToCover( '#mwe-upwiz-add-file' );
19261950 }, 300 );
——@@ -1929,43 +1953,46 @@
19301954
19311955 /**
19321956 * Advance one "step" in the wizard interface.
1933 - * It is assumed that the previous tab to the current one was selected.
 1957+ * It is assumed that the previous step to the current one was selected.
19341958 * We do not hide the tabs because this messes up certain calculations we'd like to make about dimensions, while elements are not
19351959 * on screen. So instead we make the tabs zero height and, in CSS, they are already overflow hidden
1936 - * @param selectedTabName
 1960+ * @param selectedStepName
19371961 * @param callback to do after layout is ready?
19381962 */
1939 - moveToTab: function( selectedTabName, callback ) {
 1963+ moveToStep: function( selectedStepName, callback ) {
19401964 var _this = this;
1941 - $j.each( _this.tabNames, function(i, tabName) {
 1965+ $j.each( _this.stepNames, function(i, stepName) {
19421966
1943 - // the tab indicator
1944 - var tab = $j( '#mwe-upwiz-tab-' + tabName );
 1967+ // the step indicator
 1968+ var step = $j( '#mwe-upwiz-step-' + stepName );
19451969
1946 - // the tab's contents
1947 - var tabDiv = $j( '#mwe-upwiz-tabdiv-' + tabName );
 1970+ // the step's contents
 1971+ var stepDiv = $j( '#mwe-upwiz-stepdiv-' + stepName );
19481972
1949 - if ( _this.currentTabName == tabName ) {
1950 - // we hide the old tabDivs because we are afraid of some z-index elements that may interfere with later tabs
 1973+ if ( _this.currentStepName == stepName ) {
 1974+ // we hide the old stepDivs because we are afraid of some z-index elements that may interfere with later tabs
19511975 // this will break if we ever allow people to page back and forth.
1952 - tab.hide( 1000 );
1953 - tabDiv.hide();
1954 - } else if ( selectedTabName == tabName ) {
1955 - tabDiv.maskSafeShow();
1956 - tab.addClass( 'mwe-upwiz-tab-highlight' );
1957 - if ( callback ) {
1958 - callback();
1959 - }
 1976+ step.hide( 1000 );
 1977+ stepDiv.hide();
 1978+ } else if ( selectedStepName == stepName ) {
 1979+ stepDiv.maskSafeShow();
 1980+ step.addClass( 'mwe-upwiz-step-highlight' );
19601981 } else {
19611982 // it's neither the formerly active nor the newly active one, so don't show it
19621983 // we don't use hide() because we want to manipulate elements within future tabs, and calculate their dimensions.
1963 - // tabDiv.maskSafeHide();
 1984+ // stepDiv.maskSafeHide();
19641985 }
19651986 } );
19661987
1967 - _this.currentTabName = selectedTabName;
 1988+ _this.currentStepName = selectedStepName;
19681989
1969 - // XXX possibly select appropriate form field to begin work
 1990+ $j.each( _this.uploads, function(i, upload) {
 1991+ upload.state = selectedStepName;
 1992+ } );
 1993+
 1994+ if ( callback ) {
 1995+ callback();
 1996+ }
19701997 },
19711998
19721999 /**
——@@ -2128,12 +2155,17 @@
21292156 * Does some precalculations, changes the interface to be less mutable, moves the uploads to a queue,
21302157 * and kicks off a thread which will take from the queue.
21312158 */
2132 - startUploads: function() {
 2159+ startUploads: function( finishedCallback ) {
21332160 var _this = this;
21342161 // remove the upload button, and the add file button
21352162 $j( '#mwe-upwiz-upload-ctrl' ).hide();
21362163 $j( '#mwe-upwiz-add-file' ).hide();
2137 -
 2164+
 2165+ var allowCloseWindow = $j().preventCloseWindow( {
 2166+ message: gM( 'mwe-prevent-close')
 2167+ } );
 2168+
 2169+
21382170 // remove ability to change files
21392171 // ideally also hide the "button"... but then we require styleable file input CSS trickery
21402172 // although, we COULD do this just for files already in progress...
——@@ -2152,10 +2184,9 @@
21532185 upload.start();
21542186 },
21552187 function() {
2156 - $j.each( _this.uploads, function(i, upload) {
2157 - upload.state = 'deeds';
2158 - } );
2159 - _this.moveToTab( 'deeds' );
 2188+ allowCloseWindow();
 2189+ $j().notify( gM( 'mwe-upwiz-files-complete' ) );
 2190+ $j( '#mwe-upwiz-stepdiv-file' ).enableNextButton();
21602191 }
21612192 );
21622193 },
——@@ -2863,6 +2894,7 @@
28642895 * Safe hide and show
28652896 * Rather than use display: none, this collapses the divs to zero height
28662897 * This is good because then the elements in the divs still have layout and we can do things like mask and unmask (above)
 2898+ * XXX may be obsolete as we are not really doing this any more
28672899 */
28682900
28692901 jQuery.fn.maskSafeHide = function( options ) {
——@@ -2874,3 +2906,52 @@
28752907 jQuery.fn.maskSafeShow = function( options ) {
28762908 return this.css( { 'height' : 'auto', 'overflow' : 'visible' } );
28772909 };
 2910+
 2911+
 2912+( function( $j ) {
 2913+
 2914+ /**
 2915+ * Prevent the closing of a window with a confirm message (the onbeforeunload event seems to
 2916+ * work in most browsers
 2917+ * e.g.
 2918+ * var allowCloseWindow = jQuery().preventCloseWindow( { message: "Don't go away!" } );
 2919+ * // ... do stuff that can't be interrupted ...
 2920+ * allowCloseWindow();
 2921+ *
 2922+ * @param options object which should have a message string, already internationalized
 2923+ * @return closure execute this when you want to allow the user to close the window
 2924+ */
 2925+ $j.fn.preventCloseWindow = function( options ) {
 2926+ if ( typeof options === 'undefined' ) {
 2927+ options = {};
 2928+ }
 2929+
 2930+ if ( typeof options.message === 'undefined' ) {
 2931+ options.message = 'Are you sure you want to close this window?';
 2932+ }
 2933+
 2934+ $j( window ).unload( function() {
 2935+ return options.message;
 2936+ } );
 2937+
 2938+ return function() {
 2939+ $j( window ).removeAttr( 'unload' );
 2940+ };
 2941+
 2942+ };
 2943+
 2944+
 2945+ $j.fn.notify = function ( message ) {
 2946+ // could do something here with Chrome's in-browser growl-like notifications.
 2947+ // play a sound?
 2948+ alert( message );
 2949+ };
 2950+
 2951+ $j.fn.enableNextButton = function() {
 2952+ this.find( '.mwe-upwiz-button-next' )
 2953+ .removeAttr( 'disabled' )
 2954+ .effect( 'pulsate', { times: 3 }, 1000 );
 2955+ };
 2956+
 2957+
 2958+} )( jQuery );
Index: branches/js2-work/phase3/js/mwEmbed/modules/UploadWizard/css/uploadWizard.css
——@@ -15,7 +15,7 @@
1616 }
1717 */
1818
19 -#mwe-upwiz-tabs {
 19+#mwe-upwiz-steparrows {
2020 }
2121
2222 #mwe-upwiz-content {
——@@ -26,7 +26,7 @@
2727 width: 100%;
2828 }
2929
30 -#mwe-upwiz-tabs ul {
 30+#mwe-upwiz-steparrows ul {
3131 list-style-type: none;
3232 list-style-image: none;
3333 padding: 0px;
——@@ -34,19 +34,19 @@
3535 position: relative;
3636 }
3737
38 -#mwe-upwiz-tabs ul li {
 38+#mwe-upwiz-steparrows ul li {
3939 color: #999999;
4040 float: left;
4141 padding: 0px;
4242 margin: 0px;
4343 }
4444
45 -#mwe-upwiz-tabs ul li span {
 45+#mwe-upwiz-steparrows ul li span {
4646 padding-top: 2px;
4747 padding-bottom: 4px;
4848 }
4949
50 -#mwe-upwiz-tabs ul li span.mwe-arrow-text {
 50+#mwe-upwiz-steparrows ul li span.mwe-arrow-text {
5151 border-color: #e0e0e0;
5252 border-style: solid;
5353 border-width: 1px 0px 1px 0px;
——@@ -55,7 +55,7 @@
5656 z-index: 1;
5757 }
5858
59 -#mwe-upwiz-tabs ul li span.mwe-arrow {
 59+#mwe-upwiz-steparrows ul li span.mwe-arrow {
6060 position: relative;
6161 left: 21px;
6262 padding-right: 12px;
——@@ -63,15 +63,15 @@
6464 background: url('../images/grey-angle.gif') no-repeat right center;
6565 }
6666
67 -#mwe-upwiz-tabs ul li.mwe-upwiz-tab-highlight span.mwe-arrow {
 67+#mwe-upwiz-steparrows ul li.mwe-upwiz-step-highlight span.mwe-arrow {
6868 background: url('../images/black-angle.gif') no-repeat right center;
6969 }
7070
71 -#mwe-upwiz-tabs ul li.mwe-upwiz-tab-highlight span.mwe-arrow-text {
 71+#mwe-upwiz-steparrows ul li.mwe-upwiz-step-highlight span.mwe-arrow-text {
7272 border-color: #000000;
7373 }
7474
75 -#mwe-upwiz-tabs ul li.mwe-upwiz-tab-highlight span.mwe-arrow-text {
 75+#mwe-upwiz-steparrows ul li.mwe-upwiz-step-highlight span.mwe-arrow-text {
7676 padding-left: 12px;
7777 font-weight: bold;
7878 color: black;
——@@ -288,12 +288,12 @@
289289 background: yellow;
290290 }
291291
292 -.mwe-upwiz-tabdiv {
 292+.mwe-upwiz-stepdiv {
293293 height: 0px;
294294 overflow: hidden;
295295 }
296296
297 -#mwe-upwiz-tabdiv-file {
 297+#mwe-upwiz-stepdiv-file {
298298 width: 550px;
299299 }
300300
——@@ -485,3 +485,10 @@
486486 margin-top: 5px;
487487 }
488488
 489+.mwe-upwiz-buttons {
 490+ margin-top: 10px;
 491+ padding-top: 10px;
 492+ border-top: 1px solid #e0e0e0;
 493+ text-align: right; /* works for now, only one 'next' button */
 494+}
 495+

Status & tagging log