mediawiki-extensions-Visual.../modules/ve/ce/nodes/ve.ce.MWBlockImageNode.js
Trevor Parscal 5aac2f756c Block Image Resizing
Allow block images to be resized by mixing in ResizableNode.

Made transitioning optional, and disabled it for block image nodes.

Change-Id: If89948d285ffb5efb104c44cbc9553a3d56f52e7
2013-06-07 10:52:04 -07:00

155 lines
4 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;
// 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 );
if ( this.model.getAttribute( 'align' ) === 'center' ) {
this.$.addClass( 'center' );
this.$thumb = this.$$( '<div>' ).appendTo( this.$ );
} else {
this.$thumb = this.$;
}
this.$thumb
.addClass( 'thumb' )
.addClass(
ve.ce.MWBlockImageNode.static.alignToCssClass[ this.model.getAttribute( 'align' ) ]
);
this.$thumbInner = this.$$( '<div>' )
.addClass( 'thumbinner' )
.css( 'width', parseInt( this.model.getAttribute( 'width' ), 10 ) + 2 )
.appendTo( this.$thumb );
this.$a = this.$$( '<a>' )
.addClass( 'image' )
.attr( 'src', this.model.getAttribute( 'href' ) )
.appendTo( this.$thumbInner );
this.$image = this.$$( '<img>' )
.addClass( 'thumbimage' )
.attr( 'src', this.model.getAttribute( 'src' ) )
.attr( 'width', this.model.getAttribute( 'width' ) )
.attr( 'height', this.model.getAttribute( 'height' ) )
.appendTo( this.$a );
this.$resizable = this.$image;
// I smell a caption!
if ( 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 );
/* 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.alignToCssClass = {
'left': 'tleft',
'right': 'tright',
'center' : 'tnone',
'none' : 'tnone',
'default': 'tright'
};
/* Methods */
ve.ce.MWBlockImageNode.prototype.onAttributeChange = function ( key, from, to ) {
var $element;
if ( key === 'align' && from !== to ) {
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' );
}
this.$thumb.removeClass( ve.ce.MWBlockImageNode.static.alignToCssClass[ from ] );
this.$thumb.addClass( ve.ce.MWBlockImageNode.static.alignToCssClass[ to ] );
}
};
ve.ce.MWBlockImageNode.prototype.onAttributeChange = function ( key, from, to ) {
if ( from !== to ) {
if ( key === 'src' ) {
this.$image.attr( 'src', to );
}
if ( key === 'width' || key === 'height' ) {
this.$image.css( key, to );
}
if ( key === 'width' ) {
this.$thumbInner.css( 'width', to + 2 );
}
}
};
ve.ce.MWBlockImageNode.prototype.setupSlugs = function () {
// Intentionally empty
};
ve.ce.MWBlockImageNode.prototype.onSplice = function () {
// Intentionally empty
};
/* Registration */
ve.ce.nodeFactory.register( ve.ce.MWBlockImageNode );