2013-10-15 12:18:11 +00:00
|
|
|
/*!
|
|
|
|
* VisualEditor ContentEditable MWImageNode class.
|
|
|
|
*
|
2018-01-03 00:54:47 +00:00
|
|
|
* @copyright 2011-2018 VisualEditor Team and others; see AUTHORS.txt
|
2013-10-15 12:18:11 +00:00
|
|
|
* @license The MIT License (MIT); see LICENSE.txt
|
|
|
|
*/
|
|
|
|
|
|
|
|
/**
|
|
|
|
* ContentEditable MediaWiki image node.
|
|
|
|
*
|
|
|
|
* @class
|
|
|
|
* @abstract
|
|
|
|
* @extends ve.ce.GeneratedContentNode
|
|
|
|
* @mixins ve.ce.FocusableNode
|
|
|
|
* @mixins ve.ce.MWResizableNode
|
|
|
|
*
|
|
|
|
* @constructor
|
2016-11-06 15:08:23 +00:00
|
|
|
* @param {jQuery} $focusable Focusable part of the node
|
|
|
|
* @param {jQuery} $image Image part of the node
|
2013-10-15 12:18:11 +00:00
|
|
|
* @param {Object} [config] Configuration options
|
|
|
|
*/
|
2016-11-06 15:08:23 +00:00
|
|
|
ve.ce.MWImageNode = function VeCeMWImageNode( $focusable, $image, config ) {
|
2014-01-26 20:09:40 +00:00
|
|
|
config = ve.extendObject( {
|
2014-08-22 20:50:48 +00:00
|
|
|
enforceMax: false,
|
2017-09-25 16:01:16 +00:00
|
|
|
minDimensions: { width: 1, height: 1 },
|
2017-09-28 16:36:37 +00:00
|
|
|
$bounding: this.$element
|
2014-01-26 20:09:40 +00:00
|
|
|
}, config );
|
|
|
|
|
2015-02-01 21:07:48 +00:00
|
|
|
// Properties
|
2013-10-15 12:18:11 +00:00
|
|
|
this.$image = $image;
|
2015-12-09 16:47:13 +00:00
|
|
|
// Parent constructor triggers render so this must precede it
|
2015-02-01 21:07:48 +00:00
|
|
|
this.renderedDimensions = null;
|
|
|
|
|
|
|
|
// Parent constructor
|
|
|
|
ve.ce.GeneratedContentNode.call( this );
|
2013-10-15 12:18:11 +00:00
|
|
|
|
|
|
|
// Mixin constructors
|
2016-11-06 15:08:23 +00:00
|
|
|
ve.ce.FocusableNode.call( this, $focusable, config );
|
|
|
|
if ( this.$image.length ) {
|
|
|
|
ve.ce.MWResizableNode.call( this, this.$image, config );
|
|
|
|
}
|
2014-01-26 20:09:40 +00:00
|
|
|
|
|
|
|
// Events
|
2014-08-22 20:50:48 +00:00
|
|
|
this.model.connect( this, { attributeChange: 'onAttributeChange' } );
|
2013-10-15 12:18:11 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
/* Inheritance */
|
|
|
|
|
2013-10-11 21:44:09 +00:00
|
|
|
OO.inheritClass( ve.ce.MWImageNode, ve.ce.GeneratedContentNode );
|
2013-10-15 12:18:11 +00:00
|
|
|
|
2013-10-11 21:44:09 +00:00
|
|
|
OO.mixinClass( ve.ce.MWImageNode, ve.ce.FocusableNode );
|
2014-04-10 00:26:48 +00:00
|
|
|
|
2017-04-13 10:32:30 +00:00
|
|
|
// Need to mixin base class as well (T92540)
|
2013-10-11 21:44:09 +00:00
|
|
|
OO.mixinClass( ve.ce.MWImageNode, ve.ce.ResizableNode );
|
2014-04-10 00:26:48 +00:00
|
|
|
|
2013-10-11 21:44:09 +00:00
|
|
|
OO.mixinClass( ve.ce.MWImageNode, ve.ce.MWResizableNode );
|
2014-04-10 00:26:48 +00:00
|
|
|
|
2013-12-20 23:25:24 +00:00
|
|
|
/* Static Properties */
|
|
|
|
|
2014-06-19 15:44:05 +00:00
|
|
|
ve.ce.MWImageNode.static.primaryCommandName = 'media';
|
2013-10-15 12:18:11 +00:00
|
|
|
|
2014-06-10 01:18:23 +00:00
|
|
|
/* Static Methods */
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @inheritdoc ve.ce.Node
|
|
|
|
*/
|
|
|
|
ve.ce.MWImageNode.static.getDescription = function ( model ) {
|
|
|
|
var title = new mw.Title( model.getFilename() );
|
2014-07-02 19:20:45 +00:00
|
|
|
return title.getMainText();
|
2014-06-10 01:18:23 +00:00
|
|
|
};
|
|
|
|
|
2013-10-15 12:18:11 +00:00
|
|
|
/* Methods */
|
|
|
|
|
2014-04-10 00:26:48 +00:00
|
|
|
/**
|
|
|
|
* Update the rendering of the 'align', src', 'width' and 'height' attributes
|
|
|
|
* when they change in the model.
|
|
|
|
*
|
|
|
|
* @method
|
|
|
|
* @param {string} key Attribute key
|
|
|
|
* @param {string} from Old value
|
|
|
|
* @param {string} to New value
|
|
|
|
*/
|
2016-11-06 00:47:40 +00:00
|
|
|
ve.ce.MWImageNode.prototype.onAttributeChange = function () {
|
|
|
|
this.update();
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @inheritdoc ve.ce.GeneratedContentNode
|
|
|
|
*/
|
|
|
|
ve.ce.MWImageNode.prototype.onGeneratedContentNodeUpdate = function () {
|
|
|
|
// Do nothing to avoid re-rendering every time the caption is changed.
|
|
|
|
// Call update inside onAttributeChange instead.
|
|
|
|
};
|
2014-04-10 00:26:48 +00:00
|
|
|
|
2016-10-28 19:02:36 +00:00
|
|
|
/**
|
|
|
|
* @inheritdoc ve.ce.GeneratedContentNode
|
|
|
|
*/
|
2013-10-15 12:18:11 +00:00
|
|
|
ve.ce.MWImageNode.prototype.generateContents = function () {
|
2015-02-01 21:07:48 +00:00
|
|
|
var xhr,
|
|
|
|
width = this.getModel().getAttribute( 'width' ),
|
|
|
|
height = this.getModel().getAttribute( 'height' ),
|
|
|
|
deferred = $.Deferred();
|
|
|
|
|
|
|
|
// If the current rendering is larger don't fetch a new image, just let the browser resize
|
|
|
|
if ( this.renderedDimensions && this.renderedDimensions.width > width ) {
|
|
|
|
return deferred.reject().promise();
|
|
|
|
}
|
2013-10-17 11:13:40 +00:00
|
|
|
|
2015-01-24 00:22:17 +00:00
|
|
|
xhr = new mw.Api().get( {
|
2014-08-22 20:50:48 +00:00
|
|
|
action: 'query',
|
|
|
|
prop: 'imageinfo',
|
|
|
|
iiprop: 'url',
|
2015-02-01 21:07:48 +00:00
|
|
|
iiurlwidth: width,
|
|
|
|
iiurlheight: height,
|
2014-08-22 20:50:48 +00:00
|
|
|
titles: this.getModel().getFilename()
|
2013-10-17 11:39:27 +00:00
|
|
|
} )
|
2014-07-08 22:33:32 +00:00
|
|
|
.done( this.onParseSuccess.bind( this, deferred ) )
|
|
|
|
.fail( this.onParseError.bind( this, deferred ) );
|
2013-10-15 12:18:11 +00:00
|
|
|
|
2013-10-17 11:39:27 +00:00
|
|
|
return deferred.promise( { abort: xhr.abort } );
|
2013-10-15 12:18:11 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Handle a successful response from the parser for the image src.
|
|
|
|
*
|
|
|
|
* @param {jQuery.Deferred} deferred The Deferred object created by generateContents
|
|
|
|
* @param {Object} response Response data
|
|
|
|
*/
|
|
|
|
ve.ce.MWImageNode.prototype.onParseSuccess = function ( deferred, response ) {
|
|
|
|
var id, src, pages = ve.getProp( response, 'query', 'pages' );
|
|
|
|
for ( id in pages ) {
|
2015-08-19 17:33:02 +00:00
|
|
|
if ( pages[ id ].imageinfo ) {
|
|
|
|
src = pages[ id ].imageinfo[ 0 ].thumburl;
|
2013-10-15 12:18:11 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
if ( src ) {
|
|
|
|
deferred.resolve( src );
|
2013-10-17 11:13:40 +00:00
|
|
|
} else {
|
|
|
|
deferred.reject();
|
2013-10-15 12:18:11 +00:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2016-10-28 19:02:36 +00:00
|
|
|
/**
|
|
|
|
* @inheritdoc ve.ce.GeneratedContentNode
|
|
|
|
*/
|
2014-07-10 21:47:48 +00:00
|
|
|
ve.ce.MWImageNode.prototype.render = function ( generatedContents ) {
|
|
|
|
this.$image.attr( 'src', generatedContents );
|
2015-12-09 16:47:13 +00:00
|
|
|
// As we only re-render when the image is larger than last rendered size
|
2015-02-01 21:07:48 +00:00
|
|
|
// this will always be the largest ever rendering
|
|
|
|
this.renderedDimensions = ve.copy( this.model.getScalable().getCurrentDimensions() );
|
2013-10-15 12:18:11 +00:00
|
|
|
if ( this.live ) {
|
|
|
|
this.afterRender();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Handle an unsuccessful response from the parser for the image src.
|
|
|
|
*
|
|
|
|
* @param {jQuery.Deferred} deferred The promise object created by generateContents
|
|
|
|
* @param {Object} response Response data
|
|
|
|
*/
|
|
|
|
ve.ce.MWImageNode.prototype.onParseError = function ( deferred ) {
|
|
|
|
deferred.reject();
|
|
|
|
};
|