| Index: trunk/extensions/UploadWizard/resources/uploadWizard.css |
| — | — | @@ -14,8 +14,8 @@ |
| 15 | 15 | |
| 16 | 16 | #upload-wizard { |
| 17 | 17 | margin-top: 18px; |
| 18 | | - min-width: 32em; |
| 19 | | - max-width: 64em; |
| | 18 | + min-width: 750px; /* width of tutorial.png plus padding */ |
| | 19 | + max-width: 900px; /* wild guess */ |
| 20 | 20 | } |
| 21 | 21 | |
| 22 | 22 | /* |
| Index: trunk/extensions/UploadWizard/resources/mw.UploadWizard.js |
| — | — | @@ -433,44 +433,20 @@ |
| 434 | 434 | * even to pass events like hover |
| 435 | 435 | * @param selector jquery-compatible selector, for a single element |
| 436 | 436 | */ |
| 437 | | - moveFileInputToCover: function( selector, offset ) { |
| 438 | | - |
| 439 | | - //mw.log( "moving to cover " + selector ); |
| 440 | | - var _this = this; |
| | 437 | + moveFileInputToCover: function( selector ) { |
| 441 | 438 | var $covered = $j( selector ); |
| 442 | 439 | |
| 443 | | - var topOffset, rightOffset, bottomOffset, leftOffset; |
| 444 | | - topOffset = rightOffset = bottomOffset = leftOffset = 0; |
| 445 | | - if (typeof offset != 'undefined' ) { |
| 446 | | - topOffset = offset[0]; |
| 447 | | - rightOffset = offset[1]; |
| 448 | | - bottomOffset = offset[2]; |
| 449 | | - leftOffset = offset[3]; |
| 450 | | - } |
| 451 | | - var widthOffset = rightOffset - leftOffset; |
| 452 | | - var heightOffset = bottomOffset - topOffset; |
| 453 | | - //mw.log( "position: " ); |
| 454 | | - //mw.log( $covered.position() ); |
| 455 | | - var position = $covered.position(); |
| 456 | | - _this.fileCtrlContainer |
| | 440 | + this.fileCtrlContainer |
| 457 | 441 | .css( $covered.position() ) |
| 458 | 442 | .width( $covered.outerWidth() ) |
| 459 | 443 | .height( $covered.outerHeight() ); |
| 460 | | - /* |
| 461 | | - { |
| 462 | | - 'top': (position['top'] + topOffset).toString() + 'px', |
| 463 | | - 'left': (position['left'] + leftOffset).toString() + 'px' |
| 464 | | - } ) |
| 465 | | - .width( ($covered.outerWidth() + widthOffset).toString() + 'px' ) |
| 466 | | - .height( ($covered.outerHeight() + heightOffset).toString() + 'px' ); |
| 467 | | - */ |
| 468 | | - |
| | 444 | + |
| 469 | 445 | // shift the file input over with negative margins, |
| 470 | 446 | // internal to the overflow-containing div, so the div shows all button |
| 471 | 447 | // and none of the textfield-like input |
| 472 | | - $j( _this.fileInputCtrl ).css( { |
| 473 | | - 'margin-left': '-' + ~~( $j( _this.fileInputCtrl).width() - $covered.outerWidth() - 10 ) + 'px', |
| 474 | | - 'margin-top' : '-' + ~~( $j( _this.fileInputCtrl).height() - $covered.outerHeight() - 10 ) + 'px' |
| | 448 | + $j( this.fileInputCtrl ).css( { |
| | 449 | + 'margin-left': '-' + ~~( $j( this.fileInputCtrl ).width() - $covered.outerWidth() - 10 ) + 'px', |
| | 450 | + 'margin-top' : '-' + ~~( $j( this.fileInputCtrl ).height() - $covered.outerHeight() - 10 ) + 'px' |
| 475 | 451 | } ); |
| 476 | 452 | |
| 477 | 453 | |
| — | — | @@ -1450,7 +1426,7 @@ |
| 1451 | 1427 | |
| 1452 | 1428 | |
| 1453 | 1429 | mw.UploadWizard.prototype = { |
| 1454 | | - stepNames: [ 'file', 'deeds', 'details', 'thanks' ], |
| | 1430 | + stepNames: [ 'tutorial', 'file', 'deeds', 'details', 'thanks' ], |
| 1455 | 1431 | currentStepName: undefined, |
| 1456 | 1432 | |
| 1457 | 1433 | /* |
| — | — | @@ -1501,9 +1477,11 @@ |
| 1502 | 1478 | createInterface: function( selector ) { |
| 1503 | 1479 | var _this = this; |
| 1504 | 1480 | var div = $j( selector ).get(0); |
| | 1481 | + |
| 1505 | 1482 | div.innerHTML = |
| 1506 | 1483 | // the arrow steps |
| 1507 | 1484 | '<ul id="mwe-upwiz-steps">' |
| | 1485 | + + '<li id="mwe-upwiz-step-tutorial"><div>' + gM('mwe-upwiz-step-tutorial') + '</div></li>' |
| 1508 | 1486 | + '<li id="mwe-upwiz-step-file"><div>' + gM('mwe-upwiz-step-file') + '</div></li>' |
| 1509 | 1487 | + '<li id="mwe-upwiz-step-deeds"><div>' + gM('mwe-upwiz-step-deeds') + '</div></li>' |
| 1510 | 1488 | + '<li id="mwe-upwiz-step-details"><div>' + gM('mwe-upwiz-step-details') + '</div></li>' |
| — | — | @@ -1513,6 +1491,14 @@ |
| 1514 | 1492 | // the individual steps, all at once |
| 1515 | 1493 | + '<div id="mwe-upwiz-content">' |
| 1516 | 1494 | |
| | 1495 | + + '<div class="mwe-upwiz-stepdiv" id="mwe-upwiz-stepdiv-tutorial">' |
| | 1496 | + + '<div id="mwe-upwiz-tutorial">' // this is hardcoded badness |
| | 1497 | + + '</div>' |
| | 1498 | + + '<div class="mwe-upwiz-buttons">' |
| | 1499 | + + '<button class="mwe-upwiz-button-next" />' |
| | 1500 | + + '</div>' |
| | 1501 | + + '</div>' |
| | 1502 | + |
| 1517 | 1503 | + '<div class="mwe-upwiz-stepdiv ui-helper-clearfix" id="mwe-upwiz-stepdiv-file">' |
| 1518 | 1504 | + '<div id="mwe-upwiz-intro">' + gM('mwe-upwiz-intro') + '</div>' |
| 1519 | 1505 | + '<div id="mwe-upwiz-files">' |
| — | — | @@ -1563,6 +1549,7 @@ |
| 1564 | 1550 | |
| 1565 | 1551 | + '<div class="mwe-upwiz-clearing"></div>'; |
| 1566 | 1552 | |
| | 1553 | + this.setTutorialImage( $j( '#mwe-upwiz-tutorial' ) ); |
| 1567 | 1554 | $j( '#mwe-upwiz-steps' ) |
| 1568 | 1555 | .addClass( 'ui-helper-clearfix ui-state-default ui-widget ui-helper-reset ui-helper-clearfix' ) |
| 1569 | 1556 | .arrowSteps(); |
| — | — | @@ -1575,14 +1562,27 @@ |
| 1576 | 1563 | .append( gM( 'mwe-upwiz-upload-another' ) ) |
| 1577 | 1564 | .click( function() { _this.reset(); } ); |
| 1578 | 1565 | |
| | 1566 | + // handler for next button |
| | 1567 | + $j( '#mwe-upwiz-stepdiv-tutorial .mwe-upwiz-button-next') |
| | 1568 | + .append( gM( 'mwe-upwiz-next' ) ) |
| | 1569 | + .click( function() { |
| | 1570 | + _this.moveToStep( 'file', function() { |
| | 1571 | + // we explicitly move the file input at this point |
| | 1572 | + // because it was probably jumping around due to other "steps" on this page during file construction. |
| | 1573 | + // XXX using a timeout is lame, are there other options? |
| | 1574 | + // XXX Trevor suggests that using addClass() may queue stuff unnecessarily; use 'concrete' HTML |
| | 1575 | + setTimeout( function() { |
| | 1576 | + upload.ui.moveFileInputToCover( '#mwe-upwiz-add-file' ); |
| | 1577 | + }, 300 ); |
| | 1578 | + } ); |
| | 1579 | + } ); |
| 1579 | 1580 | |
| 1580 | | - |
| 1581 | | - // handler for next button |
| 1582 | 1581 | $j( '#mwe-upwiz-stepdiv-file .mwe-upwiz-button-next') |
| 1583 | 1582 | .append( gM( 'mwe-upwiz-next-file' ) ) |
| 1584 | 1583 | .click( function() { |
| 1585 | 1584 | // check if there is an upload at all |
| 1586 | 1585 | if ( _this.uploads.length === 0 ) { |
| | 1586 | + // XXX use standard error message |
| 1587 | 1587 | alert( gM( 'mwe-upwiz-file-need-file' ) ); |
| 1588 | 1588 | return; |
| 1589 | 1589 | } |
| — | — | @@ -1683,21 +1683,64 @@ |
| 1684 | 1684 | // WIZARD |
| 1685 | 1685 | |
| 1686 | 1686 | // add one upload field to start (this is the big one that asks you to upload something) |
| 1687 | | - var upload = _this.newUpload( '#mwe-upwiz-add-file' ); |
| | 1687 | + var upload = _this.newUpload(); |
| 1688 | 1688 | |
| 1689 | 1689 | // "select" the first step - highlight, make it visible, hide all others |
| 1690 | | - _this.moveToStep( 'file', function() { |
| 1691 | | - // XXX moving the file input doesn't seem to work at this point; we get its old position before |
| 1692 | | - // CSS is applied. Hence, using a timeout. |
| 1693 | | - // XXX using a timeout is lame, are there other options? |
| 1694 | | - // XXX Trevor suggests that using addClass() may queue stuff unnecessarily; use 'concrete' HTML |
| 1695 | | - setTimeout( function() { |
| 1696 | | - upload.ui.moveFileInputToCover( '#mwe-upwiz-add-file' ); |
| 1697 | | - }, 300 ); |
| 1698 | | - } ); |
| | 1690 | + _this.moveToStep( 'tutorial' ); |
| | 1691 | + |
| | 1692 | + }, |
| 1699 | 1693 | |
| | 1694 | + /** |
| | 1695 | + * Using the API, fetch the appropriate HTML for the licensing tutorial, and append it to $element |
| | 1696 | + * @param {jQuery} jQuery instance initialized with selector |
| | 1697 | + */ |
| | 1698 | + setTutorialImage: function( $el ) { |
| | 1699 | + var title = new mw.Title( 'WikimediaCommonsUploadTutorial-' + mw.UploadWizard.config.userLanguage + '.png', 'file' ); |
| | 1700 | + var params = { |
| | 1701 | + 'prop': 'imageinfo', |
| | 1702 | + 'titles': title.toString(), |
| | 1703 | + 'iiurlwidth': '722', // determined to be the correct size for the tutorial, such that body text is the similar in size to our normal HTML text |
| | 1704 | + 'iiprop': 'url|size' |
| | 1705 | + }; |
| | 1706 | + var tutorialError = function( code, result ) { |
| | 1707 | + $el.append( |
| | 1708 | + $j( '<p/>' ).append( gM( 'mwe-upwiz-tutorial-error' ) ), |
| | 1709 | + /* make it hidden or grey or small something... */ |
| | 1710 | + $j( '<p/>' ).append( gM( 'mwe-upwiz-api-error-code', code ) ) |
| | 1711 | + ); |
| | 1712 | + }; |
| | 1713 | + var tutorialOk = function( data ) { |
| | 1714 | + if ( !data || !data.query || !data.query.pages ) { |
| | 1715 | + return; |
| | 1716 | + } |
| | 1717 | + var thumbnail; |
| | 1718 | + $j.each( data.query.pages, function( id, page ) { |
| | 1719 | + if ( page.imageinfo && page.imageinfo.length ) { |
| | 1720 | + var imageinfo = page.imageinfo[0]; |
| | 1721 | + if ( imageinfo.thumburl && imageinfo.thumbwidth && imageinfo.thumbheight ) { |
| | 1722 | + thumbnail = page.imageinfo[0]; |
| | 1723 | + return false; |
| | 1724 | + } |
| | 1725 | + } |
| | 1726 | + } ); |
| | 1727 | + if ( ! mw.isDefined( thumbnail ) ) { |
| | 1728 | + tutorialError( data ); |
| | 1729 | + } else { |
| | 1730 | + $el.append( |
| | 1731 | + $j( '<img/>' ).attr( { |
| | 1732 | + 'src': thumbnail.thumburl, |
| | 1733 | + 'width': thumbnail.thumbwidth, |
| | 1734 | + 'height': thumbnail.thumbheight |
| | 1735 | + } ) |
| | 1736 | + ); |
| | 1737 | + } |
| | 1738 | + }; |
| | 1739 | + |
| | 1740 | + //var commonsApi = new mw.Api( { 'url': 'http://commons.wikimedia.org/w/api.php' } ); |
| | 1741 | + this.api.get( params, { ok: tutorialOk, err: tutorialError } ); |
| 1700 | 1742 | }, |
| 1701 | 1743 | |
| | 1744 | + |
| 1702 | 1745 | /** |
| 1703 | 1746 | * Advance one "step" in the wizard interface. |
| 1704 | 1747 | * It is assumed that the previous step to the current one was selected. |
| — | — | @@ -1708,6 +1751,10 @@ |
| 1709 | 1752 | */ |
| 1710 | 1753 | moveToStep: function( selectedStepName, callback ) { |
| 1711 | 1754 | var _this = this; |
| | 1755 | + |
| | 1756 | + // scroll to the top of the page (the current step might have been very long, vertically) |
| | 1757 | + $j( 'html, body' ).animate( { scrollTop: 0 }, 'slow' ); |
| | 1758 | + |
| 1712 | 1759 | $j.each( _this.stepNames, function(i, stepName) { |
| 1713 | 1760 | |
| 1714 | 1761 | // the step indicator |
| — | — | @@ -1716,12 +1763,12 @@ |
| 1717 | 1764 | // the step's contents |
| 1718 | 1765 | var stepDiv = $j( '#mwe-upwiz-stepdiv-' + stepName ); |
| 1719 | 1766 | |
| 1720 | | - if ( _this.currentStepName == stepName ) { |
| | 1767 | + if ( _this.currentStepName === stepName ) { |
| 1721 | 1768 | stepDiv.hide(); |
| 1722 | 1769 | // we hide the old stepDivs because we are afraid of some z-index elements that may interfere with later tabs |
| 1723 | 1770 | // this will break if we ever allow people to page back and forth. |
| 1724 | 1771 | } else { |
| 1725 | | - if ( selectedStepName == stepName ) { |
| | 1772 | + if ( selectedStepName === stepName ) { |
| 1726 | 1773 | stepDiv.maskSafeShow(); |
| 1727 | 1774 | } else { |
| 1728 | 1775 | stepDiv.maskSafeHide( 1000 ); |