mediawiki-extensions-Visual.../modules/ve-mw/ui/widgets/ve.ui.MWMediaResultWidget.js
James D. Forrester a8b4fc4966 Update VE core submodule to master (c8201dd)
New changes:
ff237d4 Fix z-indexes in core
e88d43e Localisation updates from https://translatewiki.net.
cf61803 Consistently use ve.ui.WindowManager everywhere
f9dfdb8 Update OOjs UI to v0.1.0-pre (23565e7519)
f79f7e3 Update OOjs UI to v0.1.0-pre (8f8896196f)
c8201dd Update OOjs UI to v0.1.0-pre (9ed4cf2557)

Local changes for the breaking change to OptionWidget and sub-classes.

Change-Id: Ife6abd312d4dc97be67cb84eea4cb9c6a0a31b1d
2014-11-21 17:41:04 -08:00

103 lines
2.6 KiB
JavaScript

/*!
* VisualEditor UserInterface MWMediaResultWidget class.
*
* @copyright 2011-2014 VisualEditor Team and others; see AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
/**
* Creates an ve.ui.MWMediaResultWidget object.
*
* @class
* @extends OO.ui.OptionWidget
*
* @constructor
* @param {Object} [config] Configuration options
* @cfg {number} [size] Media thumbnail size
*/
ve.ui.MWMediaResultWidget = function VeUiMWMediaResultWidget( config ) {
// Configuration initialization
config = config || {};
// Parent constructor
OO.ui.OptionWidget.call( this, config );
// Properties
this.size = config.size || 150;
this.$thumb = this.buildThumbnail();
this.$overlay = this.$( '<div>' );
// Initialization
this.setLabel( new mw.Title( this.data.title ).getNameText() );
this.$overlay.addClass( 've-ui-mwMediaResultWidget-overlay' );
this.$element
.addClass( 've-ui-mwMediaResultWidget ve-ui-texture-pending' )
.css( { width: this.size, height: this.size } )
.prepend( this.$thumb, this.$overlay );
};
/* Inheritance */
OO.inheritClass( ve.ui.MWMediaResultWidget, OO.ui.OptionWidget );
/* Methods */
/** */
ve.ui.MWMediaResultWidget.prototype.onThumbnailLoad = function () {
this.$thumb.first().addClass( 've-ui-texture-transparency' );
this.$element
.addClass( 've-ui-mwMediaResultWidget-done' )
.removeClass( 've-ui-texture-pending' );
};
/** */
ve.ui.MWMediaResultWidget.prototype.onThumbnailError = function () {
this.$thumb.last()
.css( 'background-image', '' )
.addClass( 've-ui-texture-alert' );
this.$element
.addClass( 've-ui-mwMediaResultWidget-error' )
.removeClass( 've-ui-texture-pending' );
};
/**
* Build a thumbnail.
*
* @method
* @returns {jQuery} Thumbnail element
*/
ve.ui.MWMediaResultWidget.prototype.buildThumbnail = function () {
var info = this.data.imageinfo[0],
image = new Image(),
$image = this.$( image ),
$back = this.$( '<div>' ),
$front = this.$( '<div>' ),
$thumb = $back.add( $front );
// Preload image
$image.on( {
load: this.onThumbnailLoad.bind( this ),
error: this.onThumbnailError.bind( this )
} );
image.src = info.thumburl;
$thumb.addClass( 've-ui-mwMediaResultWidget-thumbnail' );
$thumb.last().css( 'background-image', 'url(' + info.thumburl + ')' );
if ( info.width >= this.size && info.height >= this.size ) {
$front.addClass( 've-ui-mwMediaResultWidget-crop' );
$thumb.css( { width: '100%', height: '100%' } );
} else {
$thumb.css( {
width: info.thumbwidth,
height: info.thumbheight,
left: '50%',
top: '50%',
'margin-left': Math.round( -info.thumbwidth / 2 ),
'margin-top': Math.round( -info.thumbheight / 2 )
} );
}
return $thumb;
};