mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-09-27 12:16:51 +00:00
4ddf123b7c
There is still a problem that those images would get inspector for opening media edit dialog displayed, and that dialog let's edit caption, which does not make sense in this case, however that should be a separated bug. Change-Id: I24491979bc7a27d2380924e48cb677b01e9f8f9b
175 lines
4.7 KiB
JavaScript
175 lines
4.7 KiB
JavaScript
/*!
|
|
* VisualEditor ContentEditable MWBlockImageNode class.
|
|
*
|
|
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
|
|
* @license The MIT License (MIT); see LICENSE.txt
|
|
*/
|
|
|
|
/**
|
|
* ContentEditable MediaWiki image node.
|
|
*
|
|
* @class
|
|
* @extends ve.ce.BranchNode
|
|
* @mixins ve.ce.ProtectedNode
|
|
*
|
|
* @constructor
|
|
* @param {ve.dm.MWBlockImageNode} model Model to observe
|
|
* @param {Object} [config] Config options
|
|
*/
|
|
ve.ce.MWBlockImageNode = function VeCeMWBlockImageNode( model, config ) {
|
|
var captionModel, captionView, type;
|
|
|
|
// Parent constructor
|
|
ve.ce.BranchNode.call( this, model, config );
|
|
|
|
// Mixin constructors
|
|
ve.ce.ProtectedNode.call( this );
|
|
ve.ce.FocusableNode.call( this );
|
|
ve.ce.ResizableNode.call( this );
|
|
ve.ce.RelocatableNode.call( this );
|
|
|
|
type = this.model.getAttribute( 'type' );
|
|
|
|
if ( this.model.getAttribute( 'align' ) === 'center' ) {
|
|
this.$.addClass( 'center' );
|
|
this.$thumb = this.$$( '<div>' ).appendTo( this.$ );
|
|
} else {
|
|
this.$thumb = this.$;
|
|
}
|
|
|
|
this.$thumbInner = this.$$( '<div>' )
|
|
.addClass( 'thumbinner' )
|
|
.css( 'width', parseInt( this.model.getAttribute( 'width' ), 10 ) + 2 );
|
|
|
|
this.$a = this.$$( '<a>' )
|
|
.addClass( 'image' )
|
|
.attr( 'src', this.model.getAttribute( 'href' ) );
|
|
|
|
this.$image = this.$$( '<img>' )
|
|
.attr( 'src', this.model.getAttribute( 'src' ) )
|
|
.attr( 'width', this.model.getAttribute( 'width' ) )
|
|
.attr( 'height', this.model.getAttribute( 'height' ) )
|
|
.appendTo( this.$a );
|
|
|
|
if ( type === 'none' ) {
|
|
this.$thumb.addClass(
|
|
ve.ce.MWBlockImageNode.static.cssClasses.none[ this.model.getAttribute( 'align' ) ]
|
|
);
|
|
this.$a.appendTo( this.$thumb );
|
|
} else {
|
|
// Type "frame", "thumb" and the default
|
|
this.$image.addClass( 'thumbimage' );
|
|
this.$thumb
|
|
.addClass(
|
|
ve.ce.MWBlockImageNode.static.cssClasses[ 'default' ][ this.model.getAttribute( 'align' ) ]
|
|
)
|
|
.addClass( 'thumb' );
|
|
this.$a.appendTo( this.$thumbInner );
|
|
this.$thumbInner.appendTo( this.$thumb );
|
|
}
|
|
|
|
this.$resizable = this.$image;
|
|
|
|
// I smell a caption!
|
|
if ( type !== 'none' && this.model.children.length === 1 ) {
|
|
captionModel = this.model.children[0];
|
|
captionView = ve.ce.nodeFactory.create( captionModel.getType(), captionModel );
|
|
captionModel.connect( this, { 'update': 'onModelUpdate' } );
|
|
this.children.push( captionView );
|
|
captionView.attach( this );
|
|
captionView.$.appendTo( this.$thumbInner );
|
|
if ( this.live !== captionView.isLive() ) {
|
|
captionView.setLive( this.live );
|
|
}
|
|
}
|
|
};
|
|
|
|
/* Inheritance */
|
|
|
|
ve.inheritClass( ve.ce.MWBlockImageNode, ve.ce.BranchNode );
|
|
|
|
ve.mixinClass( ve.ce.MWBlockImageNode, ve.ce.ProtectedNode );
|
|
|
|
ve.mixinClass( ve.ce.MWBlockImageNode, ve.ce.FocusableNode );
|
|
|
|
ve.mixinClass( ve.ce.MWBlockImageNode, ve.ce.ResizableNode );
|
|
|
|
ve.mixinClass( ve.ce.MWBlockImageNode, ve.ce.RelocatableNode );
|
|
|
|
/* Static Properties */
|
|
|
|
ve.ce.MWBlockImageNode.static.name = 'mwBlockImage';
|
|
|
|
ve.ce.MWBlockImageNode.static.tagName = 'div';
|
|
|
|
ve.ce.MWBlockImageNode.static.renderHtmlAttributes = false;
|
|
|
|
ve.ce.MWBlockImageNode.static.transition = false;
|
|
|
|
ve.ce.MWBlockImageNode.static.cssClasses = {
|
|
'default': {
|
|
'left': 'tleft',
|
|
'right': 'tright',
|
|
'center' : 'tnone',
|
|
'none' : 'tnone',
|
|
'default': 'tright'
|
|
},
|
|
'none': {
|
|
'left': 'floatleft',
|
|
'right': 'floatright',
|
|
'center' : 'floatnone',
|
|
'none' : 'floatnone'
|
|
}
|
|
};
|
|
|
|
/* Methods */
|
|
|
|
ve.ce.MWBlockImageNode.prototype.onAttributeChange = function ( key, from, to ) {
|
|
var $element;
|
|
if ( from !== to ) {
|
|
switch ( key ) {
|
|
case 'align':
|
|
if ( to === 'center' || from === 'center' ) {
|
|
this.emit( 'teardown' );
|
|
if ( to === 'center' ) {
|
|
$element = this.$$( '<div>' ).addClass( 'center' );
|
|
this.$thumb = this.$;
|
|
this.$.replaceWith( $element );
|
|
this.$ = $element;
|
|
this.$.append( this.$thumb );
|
|
} else {
|
|
this.$.replaceWith( this.$thumb );
|
|
this.$ = this.$thumb;
|
|
}
|
|
this.emit( 'setup' );
|
|
}
|
|
if ( this.model.getAttribute( 'type' ) === 'none' ) {
|
|
this.$thumb.removeClass( ve.ce.MWBlockImageNode.static.cssClasses.none[ from ] );
|
|
this.$thumb.addClass( ve.ce.MWBlockImageNode.static.cssClasses.none[ to ] );
|
|
} else {
|
|
this.$thumb.removeClass( ve.ce.MWBlockImageNode.static.cssClasses[ 'default' ][ from ] );
|
|
this.$thumb.addClass( ve.ce.MWBlockImageNode.static.cssClasses[ 'default' ][ to ] );
|
|
}
|
|
break;
|
|
case 'src':
|
|
this.$image.attr( 'src', to );
|
|
break;
|
|
case 'width':
|
|
this.$thumbInner.css( 'width', to + 2 );
|
|
break;
|
|
}
|
|
}
|
|
};
|
|
|
|
ve.ce.MWBlockImageNode.prototype.setupSlugs = function () {
|
|
// Intentionally empty
|
|
};
|
|
|
|
ve.ce.MWBlockImageNode.prototype.onSplice = function () {
|
|
// Intentionally empty
|
|
};
|
|
|
|
/* Registration */
|
|
|
|
ve.ce.nodeFactory.register( ve.ce.MWBlockImageNode );
|