mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-11-25 14:56:20 +00:00
e3308b0bd9
Adding @noflip to align-left and align-right in the <figure> css styling rules and removing the need to resize the Branch Node div element on center. Change-Id: Iec6e589ba9ecdf32c1a0934b9eb05ee3fd42af66
362 lines
9.5 KiB
JavaScript
362 lines
9.5 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.MWImageNode
|
|
*
|
|
* @constructor
|
|
* @param {ve.dm.MWBlockImageNode} model Model to observe
|
|
* @param {Object} [config] Configuration options
|
|
*/
|
|
ve.ce.MWBlockImageNode = function VeCeMWBlockImageNode( model, config ) {
|
|
|
|
// Parent constructor
|
|
ve.ce.BranchNode.call( this, model, config );
|
|
|
|
this.$element.addClass( 've-ce-mwBlockImageNode ' );
|
|
|
|
// Properties
|
|
this.type = this.model.getAttribute( 'type' );
|
|
this.alignment = this.model.getAttribute( 'align' );
|
|
this.size = {
|
|
'width': this.model.getAttribute( 'width' ),
|
|
'height': this.model.getAttribute( 'height' )
|
|
};
|
|
|
|
this.typeToRdfa = this.getTypeToRdfa();
|
|
|
|
// DOM Hierarchy for BlockImageNode:
|
|
// <div> this.$element
|
|
// - <figure> this.$figure ( ve-ce-mwBlockImageNode-type (thumb) (tright/tleft/etc) )
|
|
// - <a> this.$a
|
|
// - <img> this.$image (thumbimage)
|
|
// - <figcaption> this.$figcaption ( thumbcaption )
|
|
|
|
// Build DOM:
|
|
this.$a = this.$( '<a>' )
|
|
.addClass( 'image' )
|
|
.attr( 'href', this.getResolvedAttribute( 'href' ) );
|
|
|
|
this.$image = this.$( '<img>' )
|
|
.attr( 'src', this.getResolvedAttribute( 'src' ) )
|
|
.attr( 'width', this.size.width )
|
|
.attr( 'height', this.size.height )
|
|
.appendTo( this.$a );
|
|
|
|
this.$figure = this.$( '<figure>' )
|
|
.appendTo( this.$element )
|
|
.append( this.$a )
|
|
.addClass( 've-ce-mwBlockImageNode-type-' + this.type )
|
|
// 'typeof' should appear with the proper Parsoid-generated
|
|
// type. The model deals with converting it
|
|
.attr( 'typeof', this.typeToRdfa[ this.type ] );
|
|
|
|
this.$element
|
|
.addClass( 've-ce-mwBlockImageNode-align-' + this.alignment );
|
|
|
|
// Update size:
|
|
this.updateSize( this.size.height, this.size.width );
|
|
|
|
// Mixin constructors
|
|
ve.ce.MWImageNode.call( this, this.$figure, this.$image );
|
|
|
|
// I smell a caption!
|
|
this.$figcaption = this.$( '<figcaption> ');
|
|
|
|
// attach the figcaption always (to prepare for option of adding one):
|
|
this.$figcaption.appendTo( this.$figure );
|
|
|
|
this.caption = {};
|
|
if ( this.type !== 'none' && this.type !== 'frameless' && this.model.children.length === 1 ) {
|
|
this.setCaptionVisible( true );
|
|
} else {
|
|
this.setCaptionVisible( false );
|
|
}
|
|
|
|
// Events
|
|
this.model.connect( this, { 'attributeChange': 'onAttributeChange' } );
|
|
|
|
};
|
|
|
|
|
|
/* Inheritance */
|
|
|
|
OO.inheritClass( ve.ce.MWBlockImageNode, ve.ce.BranchNode );
|
|
|
|
// Need to mixin base class as well
|
|
OO.mixinClass( ve.ce.MWBlockImageNode, ve.ce.GeneratedContentNode );
|
|
|
|
OO.mixinClass( ve.ce.MWBlockImageNode, ve.ce.MWImageNode );
|
|
|
|
/* 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': 'mw-halign-left',
|
|
'right': 'mw-halign-right',
|
|
'center': 'mw-halign-center',
|
|
'none': 'mw-halign-none'
|
|
},
|
|
'none': {
|
|
'left': 'mw-halign-left',
|
|
'right': 'mw-halign-right',
|
|
'center': 'mw-halign-center',
|
|
'none': 'mw-halign-none'
|
|
}
|
|
};
|
|
|
|
/* Methods */
|
|
|
|
/**
|
|
* Set up an object that converts from the type to rdfa, based
|
|
* on the rdfaToType object in the model.
|
|
* @returns {Object.<string,string>} A type to Rdfa conversion object
|
|
*/
|
|
ve.ce.MWBlockImageNode.prototype.getTypeToRdfa = function() {
|
|
var rdfa, obj = {};
|
|
|
|
for ( rdfa in this.model.constructor.static.rdfaToType ) {
|
|
obj[ this.model.constructor.static.rdfaToType[rdfa] ] = rdfa;
|
|
}
|
|
return obj;
|
|
};
|
|
|
|
/**
|
|
* Setup a caption node according to the model
|
|
*/
|
|
ve.ce.MWBlockImageNode.prototype.setupCaption = function () {
|
|
// only create a new caption if we need it:
|
|
if ( !this.caption.view ) {
|
|
this.caption.model = this.model.children[0];
|
|
this.caption.view = ve.ce.nodeFactory.create( this.caption.model.getType(), this.caption.model );
|
|
this.caption.model.connect( this, { 'update': 'onModelUpdate' } );
|
|
this.children.push( this.caption.view );
|
|
this.caption.view.attach( this );
|
|
if ( this.live !== this.caption.view.isLive() ) {
|
|
this.caption.view.setLive( this.live );
|
|
}
|
|
// Make it a 'figcaption'
|
|
this.caption.view.$element.appendTo( this.$figcaption );
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Set caption either visible or invisible
|
|
*
|
|
* @param {boolean} isVisible declares whether caption will be visible
|
|
*/
|
|
ve.ce.MWBlockImageNode.prototype.setCaptionVisible = function ( isVisible ) {
|
|
if ( isVisible ) {
|
|
// update the caption:
|
|
this.setupCaption();
|
|
this.$figcaption.show();
|
|
} else {
|
|
// hide the caption:
|
|
this.$figcaption.hide();
|
|
}
|
|
// update caption visibility state:
|
|
this.caption.visible = isVisible;
|
|
};
|
|
|
|
/**
|
|
* Update image alignment, including any style changes that occur
|
|
*
|
|
* @param {string} from The old alignment
|
|
* @param {string} to The new alignment
|
|
* @param {string} type The type of the image to which to align
|
|
*/
|
|
ve.ce.MWBlockImageNode.prototype.updateAlignment = function( from, to, type ) {
|
|
if ( from !== to ) {
|
|
// remove previous alignment:
|
|
this.$figure
|
|
.removeClass(
|
|
this.getCssClass( 'none', from )
|
|
)
|
|
.removeClass(
|
|
this.getCssClass( 'default', from )
|
|
)
|
|
.removeClass( 've-ce-mwBlockImageNode-align-' + from )
|
|
// add new alignment:
|
|
.addClass( 've-ce-mwBlockImageNode-align-' + to );
|
|
}
|
|
|
|
if ( type !== 'none' && type !== 'frameless' ) {
|
|
this.$image
|
|
.addClass( 've-ce-mwBlockImageNode-thumbimage' );
|
|
|
|
this.$figure
|
|
.addClass(
|
|
this.getCssClass( 'default', to )
|
|
)
|
|
.addClass( 've-ce-mwBlockImageNode-borderwrap' );
|
|
} else {
|
|
this.$image
|
|
.removeClass( 've-ce-mwBlockImageNode-thumbimage' );
|
|
this.$figure
|
|
.addClass(
|
|
this.getCssClass( 'none', to )
|
|
)
|
|
.removeClass( 've-ce-mwBlockImageNode-borderwrap' );
|
|
}
|
|
this.alignment = to;
|
|
// update dimensions if alignment involved 'center'
|
|
if ( to === 'center' || from === 'center' ) {
|
|
this.updateSize( this.size.height, this.size.width );
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Resize the image and its wrappers
|
|
*
|
|
* @param {Number} height Height of the image
|
|
* @param {Number} width Width of the image
|
|
*/
|
|
ve.ce.MWBlockImageNode.prototype.updateSize = function ( height, width ) {
|
|
this.$image
|
|
.attr( 'height', height )
|
|
.attr( 'width', width );
|
|
|
|
this.$figure
|
|
.css( {
|
|
'width': width + 5
|
|
} );
|
|
|
|
// update:
|
|
this.size = {
|
|
height: height,
|
|
width: width
|
|
};
|
|
};
|
|
/**
|
|
* Get the right CSS class to use for alignment
|
|
*
|
|
* @param {string} type 'none' or 'default'
|
|
* @param {string} alignment 'left', 'right', 'center', 'none' or 'default'
|
|
*/
|
|
ve.ce.MWBlockImageNode.prototype.getCssClass = function ( type, alignment ) {
|
|
// TODO use this.model.getAttribute( 'type' ) etc., see bug 52065
|
|
// Default is different between RTL and LTR wikis:
|
|
if ( type === 'default' && alignment === 'default' ) {
|
|
if ( this.$element.css( 'direction' ) === 'rtl' ) {
|
|
return 'mw-halign-left';
|
|
} else {
|
|
return 'mw-halign-right';
|
|
}
|
|
} else {
|
|
return this.constructor.static.cssClasses[type][alignment];
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Override the default onSetup to add direction-dependent
|
|
* classes to the image thumbnail.
|
|
*
|
|
* @method
|
|
*/
|
|
ve.ce.MWBlockImageNode.prototype.onSetup = function () {
|
|
var type = this.model.getAttribute( 'type' );
|
|
|
|
ve.ce.BranchNode.prototype.onSetup.call( this );
|
|
|
|
this.updateAlignment( this.alignment, this.alignment, type );
|
|
if ( type !== 'none' && type !=='frameless' ) {
|
|
this.$element.addClass( this.getCssClass( 'default', this.model.getAttribute( 'align' ) ) );
|
|
}
|
|
|
|
};
|
|
|
|
/**
|
|
* 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
|
|
* @fires setup
|
|
*/
|
|
ve.ce.MWBlockImageNode.prototype.onAttributeChange = function ( key, from, to ) {
|
|
if ( key === 'height' || key === 'width' ) {
|
|
to = parseInt( to, 10 );
|
|
}
|
|
|
|
if ( from !== to ) {
|
|
switch ( key ) {
|
|
case 'align':
|
|
this.updateAlignment( from, to, this.type );
|
|
break;
|
|
case 'src':
|
|
this.$image.attr( 'src', this.getResolvedAttribute( 'src' ) );
|
|
break;
|
|
case 'width':
|
|
this.size.width = to;
|
|
this.updateSize( this.size.height, this.size.width );
|
|
break;
|
|
case 'height':
|
|
this.size.height = to;
|
|
this.updateSize( this.size.height, this.size.width );
|
|
break;
|
|
case 'type':
|
|
this.$element.removeClass( 've-ce-mwBlockImageNode-type-' + from );
|
|
this.$element.addClass( 've-ce-mwBlockImageNode-type-' + to );
|
|
|
|
// Update 'typeof' property
|
|
this.$figure.attr( 'typeof', this.typeToRdfa[ this.type ] );
|
|
|
|
// marking update with same 'to/from' alignment will only update
|
|
// the alignment based on the new type
|
|
this.updateAlignment( this.align, this.align, to );
|
|
// hide/show caption:
|
|
if ( to !== 'none' && to !== 'frameless' && this.model.children.length === 1 ) {
|
|
this.setCaptionVisible( true );
|
|
} else {
|
|
this.setCaptionVisible( false );
|
|
}
|
|
break;
|
|
// Other image attributes if they exist:
|
|
case 'alt':
|
|
this.$image.attr( key, to );
|
|
break;
|
|
}
|
|
}
|
|
};
|
|
|
|
/** */
|
|
ve.ce.MWBlockImageNode.prototype.onResizableResizing = function ( dimensions ) {
|
|
if ( !this.outline ) {
|
|
ve.ce.ResizableNode.prototype.onResizableResizing.call( this, dimensions );
|
|
|
|
this.updateSize( dimensions.height, dimensions.width );
|
|
}
|
|
};
|
|
|
|
/** */
|
|
ve.ce.MWBlockImageNode.prototype.setupSlugs = function () {
|
|
// Intentionally empty
|
|
};
|
|
|
|
/** */
|
|
ve.ce.MWBlockImageNode.prototype.onSplice = function () {
|
|
// Intentionally empty
|
|
};
|
|
|
|
/* Registration */
|
|
|
|
ve.ce.nodeFactory.register( ve.ce.MWBlockImageNode );
|