wikimedia/mediawiki-extensions-VisualEditor
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor synced 2024-11-15 10:35:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Match MediaWiki's rendering of non-thumb/-frame block images

Browse source 
Change-Id: I43ad72ef2d6b650692e1a0fd4460e4dec70fde7f
This commit is contained in:
Inez Korczyński 2013-06-19 15:58:13 -07:00 committed by Timo Tijhof
parent 38d6c6ba73
commit bed2c1d00d
1 changed files with 42 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
modules/ve/ce/nodes/ve.ce.MWBlockImageNode.js
View file

@ -17,7 +17,7 @@
* @param {Object} [config] Config options
*/
ve.ce.MWBlockImageNode = function VeCeMWBlockImageNode( model, config ) {
var captionModel, captionView;
var captionModel, captionView, type;
// Parent constructor
ve.ce.BranchNode.call( this, model, config );
@ -27,6 +27,8 @@ ve.ce.MWBlockImageNode = function VeCeMWBlockImageNode( model, config ) {
ve.ce.FocusableNode.call( this );
ve.ce.ResizableNode.call( this );
type = this.model.getAttribute( 'type' );
if ( this.model.getAttribute( 'align' ) === 'center' ) {
this.$.addClass( 'center' );
this.$thumb = this.$$( '<div>' ).appendTo( this.$ );
@ -34,29 +36,36 @@ ve.ce.MWBlockImageNode = function VeCeMWBlockImageNode( model, config ) {
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 );
.css( 'width', parseInt( this.model.getAttribute( 'width' ), 10 ) + 2 );
this.$a = this.$$( '<a>' )
.addClass( 'image' )
.attr( 'src', this.model.getAttribute( 'href' ) )
.appendTo( this.$thumbInner );
.attr( 'src', this.model.getAttribute( 'href' ) );
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 );
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.$resizable = this.$image;
// I smell a caption!
@ -93,12 +102,20 @@ 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'
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 */
@ -122,8 +139,13 @@ ve.ce.MWBlockImageNode.prototype.onAttributeChange = function ( key, from, to )
}
this.emit( 'setup' );
}
this.$thumb.removeClass( ve.ce.MWBlockImageNode.static.alignToCssClass[ from ] );
this.$thumb.addClass( ve.ce.MWBlockImageNode.static.alignToCssClass[ to ] );
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 );