Merge "Simplify conversion of images"

modules/ve-mw/ce/nodes/ve.ce.MWInlineImageNode.js

@@ -25,7 +25,7 @@ ve.ce.MWInlineImageNode = function VeCeMWInlineImageNode( model, config ) {
 			.text( model.getFilename() );
 		$image = $( [] );
 	} else {
-		if ( model.getAttribute( 'isLinked' ) ) {
+		if ( model.getAttribute( 'href' ) ) {
 			this.$element = $( '<a>' ).addClass( 'image' );
 			$image = $( '<img>' ).appendTo( this.$element );
 		} else {

modules/ve-mw/dm/models/ve.dm.MWImageModel.js

@@ -572,11 +572,6 @@ ve.dm.MWImageModel.prototype.getUpdatedAttributes = function () {
 	attrs.href = this.getImageHref();
 	attrs.resource = this.getImageResourceName();
 
-	// If converting from block to inline, set isLinked=true to avoid |link=
-	if ( origAttrs.isLinked === undefined && this.getImageNodeType() === 'mwInlineImage' ) {
-		attrs.isLinked = true;
-	}
-
 	return attrs;
 };
 

modules/ve-mw/dm/nodes/ve.dm.MWBlockImageNode.js

@@ -68,26 +68,17 @@ ve.dm.MWBlockImageNode.static.classAttributes = {
 ve.dm.MWBlockImageNode.static.toDataElement = function ( domElements, converter ) {
 	var dataElement, newDimensions, attributes,
 		figure, imgWrapper, img, caption,
-		classAttr, typeofAttrs, errorIndex, width, height, altText, types;
+		classAttr, typeofAttrs, errorIndex, width, height, types;
-
-	// Workaround for jQuery's .children() being expensive due to
-	// https://github.com/jquery/sizzle/issues/311
-	function findChildren( parent, nodeNames ) {
-		return Array.prototype.filter.call( parent.childNodes, function ( element ) {
-			return nodeNames.indexOf( element.nodeName.toLowerCase() ) !== -1;
-		} );
-	}
 
 	figure = domElements[ 0 ];
-	imgWrapper = findChildren( figure, [ 'a', 'span' ] )[ 0 ] || null;
+	imgWrapper = figure.children[ 0 ]; // <a> or <span>
-	img = imgWrapper && findChildren( imgWrapper, [ 'img', 'video' ] )[ 0 ] || null;
+	img = imgWrapper.children[ 0 ]; // <img> or <video>
-	caption = findChildren( figure, [ 'figcaption' ] )[ 0 ] || null;
+	caption = figure.children[ 1 ]; // <figcaption> or undefined
 	classAttr = figure.getAttribute( 'class' );
 	typeofAttrs = figure.getAttribute( 'typeof' ).split( ' ' );
 	errorIndex = typeofAttrs.indexOf( 'mw:Error' );
-	width = img && img.getAttribute( 'width' );
+	width = img.getAttribute( 'width' );
-	height = img && img.getAttribute( 'height' );
+	height = img.getAttribute( 'height' );
-	altText = img && img.getAttribute( 'alt' );
 
 	if ( errorIndex !== -1 ) {
 		typeofAttrs.splice( errorIndex, 1 );
@@ -98,25 +89,19 @@ ve.dm.MWBlockImageNode.static.toDataElement = function ( domElements, converter
 	attributes = {
 		mediaClass: types.mediaClass,
 		type: types.frameType,
-		href: ( imgWrapper && imgWrapper.getAttribute( 'href' ) ) || '',
+		src: img.getAttribute( 'src' ) || img.getAttribute( 'poster' ),
-		src: ( img && ( img.getAttribute( 'src' ) || img.getAttribute( 'poster' ) ) ) || '',
+		href: imgWrapper.getAttribute( 'href' ),
-		resource: img && img.getAttribute( 'resource' )
+		resource: img.getAttribute( 'resource' ),
+		width: width !== null && width !== '' ? +width : null,
+		height: height !== null && height !== '' ? +height : null,
+		alt: img.getAttribute( 'alt' ),
+		isError: errorIndex !== -1
 	};
 
-	if ( altText !== null ) {
-		attributes.alt = altText;
-	}
-	if ( errorIndex !== -1 ) {
-		attributes.isError = true;
-	}
-
 	this.setClassAttributes( attributes, classAttr );
 
 	attributes.align = attributes.align || 'default';
 
-	attributes.width = width !== null && width !== '' ? Number( width ) : null;
-	attributes.height = height !== null && height !== '' ? Number( height ) : null;
-
 	// Default-size
 	if ( attributes.defaultSize ) {
 		// Force wiki-default size for thumb and frameless
@@ -166,7 +151,7 @@ ve.dm.MWBlockImageNode.static.toDomElements = function ( data, doc, converter )
 		dataElement = data[ 0 ],
 		mediaClass = dataElement.attributes.mediaClass,
 		figure = doc.createElement( 'figure' ),
-		imgWrapper = doc.createElement( dataElement.attributes.href !== '' ? 'a' : 'span' ),
+		imgWrapper = doc.createElement( dataElement.attributes.href ? 'a' : 'span' ),
 		img = doc.createElement( mediaClass === 'Image' ? 'img' : 'video' ),
 		wrapper = doc.createElement( 'div' ),
 		classAttr = this.getClassAttrFromAttributes( dataElement.attributes ),
@@ -179,7 +164,7 @@ ve.dm.MWBlockImageNode.static.toDomElements = function ( data, doc, converter )
 		figure.className = classAttr;
 	}
 
-	if ( dataElement.attributes.href !== '' ) {
+	if ( dataElement.attributes.href ) {
 		imgWrapper.setAttribute( 'href', dataElement.attributes.href );
 	}
 
@@ -200,7 +185,7 @@ ve.dm.MWBlockImageNode.static.toDomElements = function ( data, doc, converter )
 	img.setAttribute( 'width', width );
 	img.setAttribute( 'height', height );
 	img.setAttribute( 'resource', dataElement.attributes.resource );
-	if ( dataElement.attributes.alt !== undefined ) {
+	if ( typeof dataElement.attributes.alt === 'string' ) {
 		img.setAttribute( 'alt', dataElement.attributes.alt );
 	}
 	figure.appendChild( imgWrapper );

modules/ve-mw/dm/nodes/ve.dm.MWInlineImageNode.js

@@ -52,15 +52,15 @@ ve.dm.MWInlineImageNode.static.blacklistedAnnotationTypes = [ 'link' ];
 
 ve.dm.MWInlineImageNode.static.toDataElement = function ( domElements, converter ) {
 	var dataElement, attributes, types,
-		$figureInline = $( domElements[ 0 ] ),
+		figureInline = domElements[ 0 ],
-		$firstChild = $figureInline.children().first(), // could be <span> or <a>
+		imgWrapper = figureInline.children[ 0 ], // could be <span> or <a>
-		$img = $firstChild.children().first(),
+		img = imgWrapper.children[ 0 ],
-		typeofAttrs = $figureInline.attr( 'typeof' ).split( ' ' ),
+		typeofAttrs = ( figureInline.getAttribute( 'typeof' ) || '' ).split( ' ' ),
-		classes = $figureInline.attr( 'class' ),
+		classes = figureInline.getAttribute( 'class' ),
 		recognizedClasses = [],
 		errorIndex = typeofAttrs.indexOf( 'mw:Error' ),
-		width = $img.attr( 'width' ),
+		width = img.getAttribute( 'width' ),
-		height = $img.attr( 'height' );
+		height = img.getAttribute( 'height' );
 
 	if ( errorIndex !== -1 ) {
 		typeofAttrs.splice( errorIndex, 1 );
@@ -71,23 +71,16 @@ ve.dm.MWInlineImageNode.static.toDataElement = function ( domElements, converter
 	attributes = {
 		mediaClass: types.mediaClass,
 		type: types.frameType,
-		src: $img.attr( 'src' ),
+		src: img.getAttribute( 'src' ),
-		resource: $img.attr( 'resource' ),
+		href: imgWrapper.getAttribute( 'href' ),
-		originalClasses: classes
+		resource: img.getAttribute( 'resource' ),
+		originalClasses: classes,
+		width: width !== null && width !== '' ? +width : null,
+		height: height !== null && height !== '' ? +height : null,
+		alt: img.getAttribute( 'alt' ),
+		isError: errorIndex !== -1
 	};
 
-	if ( errorIndex !== -1 ) {
-		attributes.isError = true;
-	}
-
-	attributes.width = width !== undefined && width !== '' ? Number( width ) : null;
-	attributes.height = height !== undefined && height !== '' ? Number( height ) : null;
-
-	attributes.isLinked = $firstChild.is( 'a' );
-	if ( attributes.isLinked ) {
-		attributes.href = $firstChild.attr( 'href' );
-	}
-
 	// Extract individual classes
 	classes = typeof classes === 'string' ? classes.trim().split( /\s+/ ) : [];
 
@@ -169,7 +162,7 @@ ve.dm.MWInlineImageNode.static.toDomElements = function ( data, doc ) {
 		figureInline.className = classes.join( ' ' );
 	}
 
-	if ( data.attributes.isLinked ) {
+	if ( data.attributes.href ) {
 		firstChild = doc.createElement( 'a' );
 		firstChild.setAttribute( 'href', data.attributes.href );
 	} else {

modules/ve-mw/tests/dm/ve.dm.mwExample.js

@@ -267,6 +267,8 @@ ve.dm.mwExample.MWBlockImage = {
 				src: ve.ce.minImgDataUri,
 				width: 1,
 				height: 2,
+				alt: null,
+				isError: false,
 				resource: 'FooBar',
 				originalClasses: 'mw-halign-right foobar',
 				unrecognizedClasses: [ 'foobar' ]
@@ -299,7 +301,8 @@ ve.dm.mwExample.MWInlineImage = {
 			mediaClass: 'Image',
 			width: 135,
 			height: 155,
-			isLinked: true,
+			alt: null,
+			isError: false,
 			valign: 'text-top',
 			resource: './File:Wiki.png',
 			type: 'none',
@@ -1506,6 +1509,8 @@ ve.dm.mwExample.domToDataCases = {
 					src: ve.ce.minImgDataUri,
 					width: 1,
 					height: 2,
+					alt: null,
+					isError: false,
 					resource: 'FooBar'
 				}
 			},