' )
.addClass( 'mw-mmv-about-links' )
.append(
this.$mmvAboutLink,
separator,
this.$mmvDiscussLink,
separator,
this.$mmvHelpLink
)
.appendTo( this.$imageMetadata );
};
/**
* Initializes the progress display at the top of the panel.
*/
MPP.initializeProgress = function () {
this.$progress = $( '
' )
.addClass( 'mw-mmv-progress empty' )
.appendTo( this.$controlBar );
this.$percent = $( '
' )
.addClass( 'mw-mmv-progress-percent' )
.appendTo( this.$progress );
};
// *********************************
// ******** Setting methods ********
// *********************************
/**
* Sets the URL for the File: page of the image
* @param {string} url
*/
MPP.setFilePageLink = function ( url ) {
this.$repo.prop( 'href', url );
this.$license.prop( 'href', url );
};
/**
* Sets the display name of the repository
* @param {mw.mmv.model.Repo} repoInfo
*/
MPP.setRepoDisplay = function ( repoInfo ) {
var repositoryMessage,
displayName = repoInfo.displayName || mw.config.get( 'wgSiteName' ),
isCommons = repoInfo.isCommons();
repositoryMessage = repoInfo.isLocal ?
mw.message( 'multimediaviewer-repository-local' ).text() :
mw.message( 'multimediaviewer-repository', displayName ).text();
this.$repo.text( repositoryMessage );
this.$repoLi.css( 'background-image',
( repoInfo.favIcon && !isCommons ) ? 'url("' + repoInfo.favIcon + '")' : '' );
this.$repoLi.toggleClass( 'commons', isCommons );
this.$repoSubtitle.text(
isCommons ? mw.message( 'multimediaviewer-commons-subtitle' ).text() : '' );
this.$repoLi.removeClass( 'empty' );
};
/**
* Sets the link to the user page where possible
* @param {mw.mmv.model.Repo} repoData
* @param {string} username
* @param {string} gender
*/
MPP.setUserPageLink = function ( repoData, username, gender ) {
var userpage = 'User:' + username,
articlePath = repoData.getArticlePath(),
userlink = articlePath.replace( '$1', userpage );
this.$username
.text(
mw.message( 'multimediaviewer-userpage-link', username, gender ).text()
)
.prop( 'href', userlink );
this.$usernameLi.toggleClass( 'empty', !username );
};
/**
* Sets the file title in the panel
* @param {string} title
*/
MPP.setFileTitle = function ( title ) {
this.title.set( title );
};
/**
* Sets up the file reuse data in the DOM
* @param {mw.mmv.model.Image} image
* @param {mw.mmv.model.Repo} repo
* @param {string} caption
*/
MPP.setFileReuseData = function ( image, repo, caption ) {
this.fileReuse.set( image, repo, caption );
};
/**
* Sets the upload or creation date and time in the panel
* @param {string} date The formatted date to set.
* @param {boolean} created Whether this is the creation date
*/
MPP.setDateTime = function ( date, created ) {
this.$datetime.text(
mw.message(
'multimediaviewer-datetime-' + ( created ? 'created' : 'uploaded' ),
date
).text()
);
this.$datetimeLi.removeClass( 'empty' );
};
/**
* Bignasty function for setting source and author. Both #setAuthor and
* #setSource use this with some shortcuts.
* @param {string} source With unsafe HTML
* @param {string} author With unsafe HTML
*/
MPP.setCredit = function ( source, author ) {
this.source = source || null;
this.author = author || null;
if ( author && source ) {
this.creditField.set(
mw.message(
'multimediaviewer-credit',
this.author,
this.source
).plain()
);
} else if ( author ) {
this.creditField.set( this.author );
} else if ( source ) {
this.creditField.set( this.source );
}
};
/**
* Sets the source in the panel
* @param {string} source Warning - unsafe HTML sometimes goes here
*/
MPP.setSource = function ( source ) {
if ( source ) {
source = $( '' )
.addClass( 'mw-mmv-source' )
.append( $.parseHTML( source ) )
.get( 0 ).outerHTML;
}
this.setCredit( source, this.author );
};
/**
* Sets the author in the panel
* @param {string} author Warning - unsafe HTML sometimes goes here
*/
MPP.setAuthor = function ( author ) {
if ( author ) {
author = $( '' )
.addClass( 'mw-mmv-author' )
.append( $.parseHTML( author ) )
.get( 0 ).outerHTML;
}
this.setCredit( this.source, author );
};
/**
* Sets the license data in the DOM
* @param {string} license The license this file has.
*/
MPP.setLicenseData = function ( license ) {
this.$license.data( 'license', license );
};
/**
* Sets the license display in the panel
* @param {string} license The human-readable name of the license
* @param {boolean} isCc Whether this is a CC license
*/
MPP.setLicense = function ( license, isCc ) {
this.$license
.text( license )
.toggleClass( 'cc-license', isCc );
this.$license.removeClass( 'empty' );
};
/**
* Set an extra permission text which should be displayed.
* @param {string} permission
*/
MPP.setPermission = function ( permission ) {
this.$permissionLink.show();
this.permission.set( permission );
};
/**
* Sets location data in the interface.
* @param {mw.mmv.model.Image} imageData
*/
MPP.setLocationData = function ( imageData ) {
var latsec, latitude, latmsg, latdeg, latremain, latmin,
longsec, longitude, longmsg, longdeg, longremain, longmin,
language;
if ( !imageData.hasCoords() ) {
return;
}
latitude = imageData.latitude >= 0 ? imageData.latitude : imageData.latitude * -1;
latmsg = 'multimediaviewer-geoloc-' + ( imageData.latitude >= 0 ? 'north' : 'south' );
latdeg = Math.floor( latitude );
latremain = latitude - latdeg;
latmin = Math.floor( ( latremain ) * 60 );
longitude = imageData.longitude >= 0 ? imageData.longitude : imageData.longitude * -1;
longmsg = 'multimediaviewer-geoloc-' + ( imageData.longitude >= 0 ? 'east' : 'west' );
longdeg = Math.floor( longitude );
longremain = longitude - longdeg;
longmin = Math.floor( ( longremain ) * 60 );
longremain -= longmin / 60;
latremain -= latmin / 60;
latsec = Math.round( latremain * 100 * 60 * 60 ) / 100;
longsec = Math.round( longremain * 100 * 60 * 60 ) / 100;
this.$location.text(
mw.message( 'multimediaviewer-geolocation',
mw.message(
'multimediaviewer-geoloc-coords',
mw.message(
'multimediaviewer-geoloc-coord',
mw.language.convertNumber( latdeg ),
mw.language.convertNumber( latmin ),
mw.language.convertNumber( latsec ),
mw.message( latmsg ).text()
).text(),
mw.message(
'multimediaviewer-geoloc-coord',
mw.language.convertNumber( longdeg ),
mw.language.convertNumber( longmin ),
mw.language.convertNumber( longsec ),
mw.message( longmsg ).text()
).text()
).text()
).text()
);
$.each( mw.language.data, function( key, value ) {
value = 'go away jshint';
language = key;
return false;
} );
this.$location.prop( 'href', (
'//tools.wmflabs.org/geohack/geohack.php?pagename=' +
'File:' + imageData.title.getMain() +
'¶ms=' +
Math.abs( imageData.latitude ) + ( imageData.latitude >= 0 ? '_N_' : '_S_' ) +
Math.abs( imageData.longitude ) + ( imageData.longitude >= 0 ? '_E_' : '_W_' ) +
'&language=' + language
) );
this.$locationLi.removeClass( 'empty' );
};
/**
* Set all the image information in the panel
* @param {mw.mmv.LightboxImage} image
* @param {mw.mmv.model.Image} imageData
* @param {mw.mmv.model.Repo} repoData
* @param {mw.mmv.model.FileUsage} localUsage
* @param {mw.mmv.model.FileUsage} globalUsage
* @param {mw.mmv.model.User} user
*/
MPP.setImageInfo = function ( image, imageData, repoData, localUsage, globalUsage, user ) {
var msgname,
fileTitle = image.filePageTitle;
this.setFileTitle( fileTitle.getNameText() );
this.setRepoDisplay( repoData );
this.setFilePageLink( imageData.descriptionUrl );
if ( imageData.creationDateTime ) {
this.setDateTime( this.formatDate( imageData.creationDateTime ), true );
} else if ( imageData.uploadDateTime ) {
this.setDateTime( this.formatDate( imageData.uploadDateTime ) );
}
if ( imageData.source ) {
this.setSource( imageData.source );
}
if ( imageData.author ) {
this.setAuthor( imageData.author );
}
this.buttons.set( imageData, repoData );
this.description.set( imageData.description, image.caption );
this.categories.set( repoData.getArticlePath(), imageData.categories );
msgname = 'multimediaviewer-license-' + ( imageData.license && imageData.license.internalName || '' );
if ( !mw.messages.exists( msgname ) ) {
// Cannot display, fallback or fail
msgname = 'multimediaviewer-license-default';
} else {
// License found, store the license data
this.setLicenseData( mw.message( msgname ).text() );
}
if ( imageData.license ) {
this.setLicense( mw.message( msgname ).text(), imageData.isCcLicensed() );
}
if ( imageData.permission ) {
this.setPermission( imageData.permission );
}
this.fileUsage.set( localUsage, globalUsage );
this.setLocationData( imageData );
if ( user ) {
this.setUserPageLink( repoData, imageData.lastUploader, user.gender );
}
// File reuse steals a bunch of information from the DOM, so do it last
this.setFileReuseData( imageData, repoData, image.caption );
};
/**
* Show an error message, in case the data could not be loaded
* @param {string} error
*/
MPP.showError = function ( error ) {
this.$title.addClass( 'error' )
.text( mw.message( 'multimediaviewer-metadata-error', error ).text() );
};
/**
* Transforms a date string into localized, human-readable format.
* Unrecognized strings are returned unchanged.
* @param {string} dateString
* @return {string}
*/
MPP.formatDate = function ( dateString ) {
var date = moment( dateString );
if ( !date.isValid() ) {
return dateString;
}
return date.format( 'LL' );
};
/**
* Animates the metadata area when the viewer is first opened.
*/
MPP.animateMetadataOnce = function () {
if ( !this.hasAnimatedMetadata ) {
this.hasAnimatedMetadata = true;
this.$container.addClass( 'invite' );
} else {
this.$container.addClass( 'invited' );
}
};
// ********************************
// ******** Action methods ********
// ********************************
/**
* Toggles the metadata div being totally visible.
*/
MPP.toggle = function ( forceDirection ) {
var scrollTopWhenOpen = this.$container.outerHeight() - this.$controlBar.outerHeight(),
scrollTopTarget = $.scrollTo().scrollTop() > 0 ? 0 : scrollTopWhenOpen;
if ( forceDirection ) {
scrollTopTarget = forceDirection === 'down' ? 0 : scrollTopWhenOpen;
}
$.scrollTo( scrollTopTarget, 400 );
};
/**
* Handles keydown events for this element.
*/
MPP.keydown = function ( e ) {
switch ( e.which ) {
case 40:
// Down arrow
this.toggle( 'down' );
e.preventDefault();
break;
case 38:
// Up arrow
this.toggle( 'up' );
e.preventDefault();
break;
}
};
/**
* Makes sure that the given element (which must be a descendant of the metadata panel) is
* in view. If it isn't, scrolls the panel smoothly to reveal it.
* @param {HTMLElement|jQuery|string} target
* @param {number} [duration] animation length
* @param {Object} [settings] see jQuery.scrollTo
*/
MPP.scrollIntoView = function( target, duration, settings ) {
var $target = $( target ),
targetHeight = $target.height(),
targetTop = $target.offset().top,
targetBottom = targetTop + targetHeight,
viewportHeight = $(window).height(),
viewportTop = $.scrollTo().scrollTop(),
viewportBottom = viewportTop + viewportHeight;
// we omit here a bunch of cases which are logically possible but unlikely given the size
// of the panel, and only care about the one which will actually happen
if ( targetHeight <= viewportHeight ) { // target fits into screen
if (targetBottom > viewportBottom ) {
$.scrollTo( viewportTop + ( targetBottom - viewportBottom ), duration, settings );
}
}
};
/**
* Handles the progress display when a percentage of progress is received
* @param {number} percent
*/
MPP.percent = function ( percent ) {
var panel = this;
if ( percent === 0 ) {
// When a 0% update comes in, we jump without animation to 0 and we hide the bar
this.$progress.addClass( 'empty' );
this.$percent.stop().css( { width : 0 } );
} else if ( percent === 100 ) {
// When a 100% update comes in, we make sure that the bar is visible, we animate
// fast to 100 and we hide the bar when the animation is done
this.$progress.removeClass( 'empty' );
this.$percent.stop().animate( { width : percent + '%' }, 50, 'swing',
function () {
// Reset the position for good measure
panel.$percent.stop().css( { width : 0 } );
panel.$progress.addClass( 'empty' );
} );
} else {
// When any other % update comes in, we make sure the bar is visible
// and we animate to the right position
this.$progress.removeClass( 'empty' );
this.$percent.stop().animate( { width : percent + '%' } );
}
};
/**
* Receives the window's scroll events and flips the chevron if necessary.
*/
MPP.scroll = function () {
var scrolled = !!$.scrollTo().scrollTop();
this.$dragIcon.toggleClass( 'pointing-down', scrolled );
if (
!this.savedHasOpenedMetadata &&
scrolled &&
window.localStorage !== undefined
) {
localStorage.setItem( 'mmv.hasOpenedMetadata', true );
this.savedHasOpenedMetadata = true;
}
};
mw.mmv.ui.MetadataPanel = MetadataPanel;
}( mediaWiki, jQuery, OO, moment ) );