' )
.addClass( 'mw-mmv-download-attribution-how-header' )
.text( mw.message( 'multimediaviewer-download-attribution-cta-header' ).text() );
this.$attributionHow = $( '
' )
.addClass( 'mw-mmv-download-attribution-how' )
.append(
this.$attributionHowHeader,
this.attributionInput.$element,
this.$attributionCopy,
attributionSwitch.$element,
$( '
' )
.addClass( 'mw-mmv-download-attribution-close-button' )
.click( function ( e ) {
dl.$container.trigger( 'mmv-download-cta-close' );
dl.$attributionSection.addClass( 'mw-mmv-download-attribution-collapsed' );
e.stopPropagation();
} )
.text( ' ' )
)
.appendTo( this.$attributionSection );
};
/**
* Selects the specified attribution type.
*
* @param {string} [name='plain'] The attribution type to use ('plain' or 'html')
*/
DP.selectAttribution = function ( name ) {
this.currentAttrView = name;
if ( this.currentAttrView === 'html' ) {
this.attributionInput.setValue( this.htmlCredit );
} else {
this.attributionInput.setValue( this.textCredit );
}
};
/**
* Registers listeners.
*/
DP.attach = function () {
var download = this;
// Register handlers for switching between file sizes
this.downloadSizeMenu.getMenu().on( 'choose', function ( item ) {
download.handleSizeSwitch( item );
} );
this.$selectionArrow.on( 'click', function () {
download.downloadSizeMenu.getMenu().toggle();
} );
this.attributionInput.$element.find( 'input' )
.on( 'focus', this.selectAllOnEvent )
.on( 'mousedown click', this.onlyFocus );
};
/**
* Clears listeners.
*/
DP.unattach = function () {
mw.mmv.ui.Element.prototype.unattach.call( this );
this.downloadSizeMenu.getMenu().off( 'choose' );
this.$selectionArrow.off( 'click' );
this.attributionInput.$element.find( 'input' )
.off( 'focus mousedown click' );
};
/**
* Handles size menu change events.
*
* @param {OO.ui.MenuOptionWidget} item
*/
DP.handleSizeSwitch = function ( item ) {
var download = this,
value = item.getData();
if ( value.name === 'original' && this.image !== null ) {
this.setDownloadUrl( this.image.url );
this.setButtonText( value.name, this.getExtensionFromUrl( this.image.url ),
value.width, value.height );
} else {
// Disable download while we get the image
this.$downloadButton.addClass( 'disabledLink' );
// Set a temporary message. It will be updated once we have the file type.
this.setButtonText( value.name, this.imageExtension, value.width, value.height );
this.utils.getThumbnailUrlPromise( value.width ).done( function ( thumbnail ) {
download.setDownloadUrl( thumbnail.url );
download.setButtonText( value.name, download.getExtensionFromUrl( thumbnail.url ),
value.width, value.height );
} );
}
};
/**
* Sets the URL on the download button.
*
* @param {string} url
*/
DP.setDownloadUrl = function ( url ) {
this.$downloadButton.attr( 'href', url + '?download' );
this.$previewLink.attr( 'href', url );
// Re-enable download
this.$downloadButton.removeClass( 'disabledLink' );
};
/**
* Sets the text of the download button.
*
* @param {string} sizeClass A size class such as 'small'
* @param {string} extension file extension
* @param {number} width
* @param {number} height
*/
DP.setButtonText = function ( sizeClass, extension, width, height ) {
var sizeClasMessage, sizeMessage, dimensionMessage;
sizeClasMessage = mw.message( 'multimediaviewer-download-' + sizeClass + '-button-name' ).text();
dimensionMessage = mw.message( 'multimediaviewer-embed-dimensions', width, height ).text();
sizeMessage = mw.message( 'multimediaviewer-embed-dimensions-with-file-format',
dimensionMessage, extension ).text();
// Update button label and size strings to reflect new selected size
this.$downloadButton.html(
'' + sizeClasMessage + '' +
'' + sizeMessage + ''
);
};
/**
* Sets the text in the attribution input element.
*
* @param {mw.mmv.model.EmbedFileInfo} embed
*/
DP.setAttributionText = function ( embed ) {
this.htmlCredit = this.formatter.getCreditHtml( embed );
this.textCredit = this.formatter.getCreditText( embed );
this.selectAttribution( this.currentAttrView );
};
/**
* Chops off the extension part of an URL.
*
* @param {string} url URL
* @return {string} Extension
*/
DP.getExtensionFromUrl = function ( url ) {
var urlParts = url.split( '.' );
return urlParts[ urlParts.length - 1 ];
};
/**
* Sets the data on the element.
*
* @param {mw.mmv.model.Image} image
* @param {mw.mmv.model.Repo} repo
*/
DP.set = function ( image, repo ) {
var attributionCtaMessage,
license = image && image.license,
sizeOptions = this.downloadSizeMenu.getMenu().getItems(),
sizes = this.utils.getPossibleImageSizesForHtml( image.width, image.height );
this.image = image;
this.utils.updateMenuOptions( sizes, sizeOptions );
this.downloadSizeMenu.$element.addClass( 'active' );
// Note: This extension will not be the real one for file types other than: png/gif/jpg/jpeg
this.imageExtension = image.title.getExtension().toLowerCase();
// Reset size menu to default item and update download button label now that we have the info
this.downloadSizeMenu.getMenu().chooseItem( this.defaultItem );
if ( image && repo ) {
this.setAttributionText( new mw.mmv.model.EmbedFileInfo( image, repo ) );
}
attributionCtaMessage = ( license && license.needsAttribution() ) ?
'multimediaviewer-download-attribution-cta-header' :
'multimediaviewer-download-optional-attribution-cta-header';
this.$attributionCtaHeader.text( mw.message( attributionCtaMessage ).text() );
this.$attributionHowHeader.text( mw.message( attributionCtaMessage ).text() );
};
/**
* @inheritdoc
*/
DP.empty = function () {
this.downloadSizeMenu.getMenu().toggle( false );
this.downloadSizeMenu.$element.removeClass( 'active' );
this.$downloadButton.attr( 'href', '' );
this.$previewLink.attr( 'href', '' );
this.imageExtension = undefined;
this.image = null;
};
mw.mmv.ui.download.Pane = Pane;
}( mediaWiki, jQuery, OO ) );