mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-11-18 11:46:01 +00:00
9119e57a2e
ve.dm.MWImageNode: * Define sensible scalable properties for audio files. They are now scalable to any width but have a fixed height. (Ideally they would have no concept of height, but that would require many more changes.) This prevents them from resetting to 0x0 when resized. ve.ce.MWBlockImageNode: * Remove override for #isResizable, audio files can be resized now. * Move #updateMediaType to MWImageNode mixin so it applies to MWInlineImageNode as well. ve.ce.MWImageNode: * Add #updateMediaType from MWBlockImageNode. * Hide the real image 'src' using CSS rather than changing the attribute. It seems the previous solution depended on the order in which methods are called, because it stopped working when I moved the code here. (This depends on VE/VE change If5b1b5b5d.) audioPlayer.svg: * Make the file nicely resizeable. The dimensions of the "play" icon and time are fixed, the bar adjusts to the width of the container. Bug: T206022 Change-Id: Ia0f38ca11e0d55a5b725fd9aeb6c79ec1345376d
125 lines
3.1 KiB
JavaScript
125 lines
3.1 KiB
JavaScript
/*!
|
|
* VisualEditor ContentEditable MWInlineImageNode class.
|
|
*
|
|
* @copyright 2011-2020 VisualEditor Team and others; see AUTHORS.txt
|
|
* @license The MIT License (MIT); see LICENSE.txt
|
|
*/
|
|
|
|
/**
|
|
* ContentEditable MediaWiki image node.
|
|
*
|
|
* @class
|
|
* @extends ve.ce.LeafNode
|
|
* @mixins ve.ce.MWImageNode
|
|
*
|
|
* @constructor
|
|
* @param {ve.dm.MWInlineImageNode} model Model to observe
|
|
* @param {Object} [config] Configuration options
|
|
*/
|
|
ve.ce.MWInlineImageNode = function VeCeMWInlineImageNode( model, config ) {
|
|
var $image;
|
|
|
|
if ( model.getAttribute( 'isError' ) ) {
|
|
this.$element = $( '<a>' )
|
|
.addClass( 'new' )
|
|
.text( model.getFilename() );
|
|
$image = $( [] );
|
|
} else {
|
|
if ( model.getAttribute( 'href' ) ) {
|
|
this.$element = $( '<a>' ).addClass( 'image' );
|
|
$image = $( '<img>' ).appendTo( this.$element );
|
|
} else {
|
|
this.$element = $image = $( '<img>' );
|
|
}
|
|
}
|
|
|
|
// Parent constructor
|
|
// this.$element has already been created and styled, so pass through as config.$element
|
|
// The constructor will add more classes to this.$element, such as ve-ce-leafNode
|
|
ve.ce.MWInlineImageNode.super.call( this, model, ve.extendObject( {}, config, { $element: this.$element } ) );
|
|
|
|
// Mixin constructors
|
|
ve.ce.MWImageNode.call( this, this.$element, $image );
|
|
|
|
$image
|
|
.attr( 'src', this.getResolvedAttribute( 'src' ) )
|
|
.attr( 'width', this.model.getAttribute( 'width' ) )
|
|
.attr( 'height', this.model.getAttribute( 'height' ) );
|
|
|
|
if ( this.$element.css( 'direction' ) === 'rtl' ) {
|
|
this.showHandles( [ 'sw' ] );
|
|
} else {
|
|
this.showHandles( [ 'se' ] );
|
|
}
|
|
|
|
this.updateClasses();
|
|
|
|
// DOM changes
|
|
this.$element.addClass( 've-ce-mwInlineImageNode' );
|
|
};
|
|
|
|
/* Inheritance */
|
|
|
|
OO.inheritClass( ve.ce.MWInlineImageNode, ve.ce.LeafNode );
|
|
|
|
// Need to mixin base class as well (T92540)
|
|
OO.mixinClass( ve.ce.MWInlineImageNode, ve.ce.GeneratedContentNode );
|
|
|
|
OO.mixinClass( ve.ce.MWInlineImageNode, ve.ce.MWImageNode );
|
|
|
|
/* Static Properties */
|
|
|
|
ve.ce.MWInlineImageNode.static.name = 'mwInlineImage';
|
|
|
|
/* Methods */
|
|
|
|
/**
|
|
* Update CSS classes based on current attributes
|
|
*/
|
|
ve.ce.MWInlineImageNode.prototype.updateClasses = function () {
|
|
var valign = this.model.getAttribute( 'valign' );
|
|
|
|
// Border
|
|
this.$element.toggleClass( 'mw-image-border', !!this.model.getAttribute( 'borderImage' ) );
|
|
|
|
// default size
|
|
this.$element.toggleClass( 'mw-default-size', !!this.model.getAttribute( 'defaultSize' ) );
|
|
|
|
// valign
|
|
if ( valign !== 'default' ) {
|
|
this.$image.css( 'vertical-align', valign );
|
|
}
|
|
};
|
|
|
|
/**
|
|
* @inheritdoc
|
|
*/
|
|
ve.ce.MWInlineImageNode.prototype.onAttributeChange = function ( key, from, to ) {
|
|
// Mixin method
|
|
ve.ce.MWImageNode.prototype.onAttributeChange.apply( this, arguments );
|
|
|
|
if ( key === 'height' || key === 'width' ) {
|
|
to = parseInt( to, 10 );
|
|
}
|
|
|
|
if ( from !== to ) {
|
|
switch ( key ) {
|
|
// TODO: 'align', 'src', 'valign', 'border'
|
|
case 'width':
|
|
this.$image.css( 'width', to );
|
|
break;
|
|
case 'height':
|
|
this.$image.css( 'height', to );
|
|
break;
|
|
case 'mediaType':
|
|
this.updateMediaType();
|
|
break;
|
|
}
|
|
this.updateClasses();
|
|
}
|
|
};
|
|
|
|
/* Registration */
|
|
|
|
ve.ce.nodeFactory.register( ve.ce.MWInlineImageNode );
|