mediawiki-extensions-Visual.../modules/ve-mw/ce/nodes/ve.ce.MWInlineImageNode.js
Roan Kattouw 1d7d19ff33 Remove ve.ce.Node.prototype.onAttributeChange
There was code in there once, but it's now empty. Removed it in favor
of adding explicit listeners in the handful of subclasses that
override it.

Change-Id: I160e55ad3c7d85c9f830a4bd7d42ec5dc18ad04f
2013-10-11 15:02:19 +00:00

116 lines
3.1 KiB
JavaScript

/*!
* VisualEditor ContentEditable MWInlineImageNode 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.LeafNode
* @mixins ve.ce.ProtectedNode
* @mixins ve.ce.FocusableNode
* @mixins ve.ce.RelocatableNode
* @mixins ve.ce.MWResizableNode
*
* @constructor
* @param {ve.dm.MWInlineImageNode} model Model to observe
* @param {Object} [config] Configuration options
*/
ve.ce.MWInlineImageNode = function VeCeMWInlineImageNode( model, config ) {
var valign;
// Parent constructor
ve.ce.LeafNode.call( this, model, config );
if ( this.model.getAttribute( 'isLinked' ) ) {
this.$ = this.$$( '<a>' ).addClass( 'image' );
this.$image = this.$$( '<img>' ).appendTo( this.$ );
} else {
// For inline images that are not linked (empty linkto=) we intentionally don't match output
// of MW Parser, instead we wrap those images in span so selection and hover (based on
// shields) can work well. It might change in the future when we improve our selection.
this.$ = this.$$( '<span>' );
this.$image = this.$$( '<img>' ).appendTo( this.$ );
}
// Mixin constructors
ve.ce.ProtectedNode.call( this );
ve.ce.FocusableNode.call( this );
ve.ce.RelocatableNode.call( this );
ve.ce.MWResizableNode.call( this );
this.$image
.attr( 'src', this.model.getAttribute( 'src' ) )
.attr( 'width', this.model.getAttribute( 'width' ) )
.attr( 'height', this.model.getAttribute( 'height' ) );
if ( this.model.getAttribute( 'border' ) ) {
this.$image.addClass( 'thumbborder' );
}
valign = this.model.getAttribute( 'valign' );
if ( valign !== 'default' ) {
this.$image.css( 'vertical-align', valign );
}
// DOM changes
this.$.addClass( 've-ce-mwInlineImageNode' );
// Events
this.model.connect( this, { 'attributeChange': 'onAttributeChange' } );
};
/* Inheritance */
ve.inheritClass( ve.ce.MWInlineImageNode, ve.ce.LeafNode );
ve.mixinClass( ve.ce.MWInlineImageNode, ve.ce.ProtectedNode );
ve.mixinClass( ve.ce.MWInlineImageNode, ve.ce.FocusableNode );
ve.mixinClass( ve.ce.MWInlineImageNode, ve.ce.RelocatableNode );
// Need to mixin base class as well
ve.mixinClass( ve.ce.MWInlineImageNode, ve.ce.ResizableNode );
ve.mixinClass( ve.ce.MWInlineImageNode, ve.ce.MWResizableNode );
/* Static Properties */
ve.ce.MWInlineImageNode.static.name = 'mwInlineImage';
/* Methods */
/**
* Update the rendering of the '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
*/
ve.ce.MWInlineImageNode.prototype.onAttributeChange = function ( key, from, to ) {
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;
}
}
};
/* Registration */
ve.ce.nodeFactory.register( ve.ce.MWInlineImageNode );