mediawiki-extensions-VisualEditor/modules/ve-mw/dm/nodes/ve.dm.MWGalleryImageNode.js

/*!
 * VisualEditor DataModel MWGalleryImageNode class.
 *
 * @copyright See AUTHORS.txt
 * @license The MIT License (MIT); see LICENSE.txt
 */

/**
 * DataModel MediaWiki gallery image node.
 *
 * @class
 * @extends ve.dm.BranchNode
 *
 * @constructor
 * @param {Object} [element] Reference to element in linear model
 * @param {ve.dm.Node[]} [children]
 */
ve.dm.MWGalleryImageNode = function VeDmMWGalleryImageNode() {
	// Parent constructor
	ve.dm.MWGalleryImageNode.super.apply( this, arguments );
};

/* Inheritance */

OO.inheritClass( ve.dm.MWGalleryImageNode, ve.dm.BranchNode );

/* Static members */

ve.dm.MWGalleryImageNode.static.name = 'mwGalleryImage';

ve.dm.MWGalleryImageNode.static.matchTagNames = [ 'li' ];

ve.dm.MWGalleryImageNode.static.childNodeTypes = [ 'mwGalleryImageCaption' ];

ve.dm.MWGalleryImageNode.static.matchFunction = function ( element ) {
	const parentTypeof = ( element.parentNode && element.parentNode.getAttribute( 'typeof' ) ) || '';
	return element.getAttribute( 'class' ) === 'gallerybox' &&
		parentTypeof.trim().split( /\s+/ ).indexOf( 'mw:Extension/gallery' ) !== -1;
};

ve.dm.MWGalleryImageNode.static.parentNodeTypes = [ 'mwGallery' ];

ve.dm.MWGalleryImageNode.static.preserveHtmlAttributes = function ( attribute ) {
	const attributes = [ 'typeof', 'class', 'src', 'resource', 'width', 'height', 'href', 'rel', 'alt', 'data-mw' ];
	return attributes.indexOf( attribute ) === -1;
};
// By handling our own children we ensure that original DOM attributes
// are deep copied back by the converter (in renderHtmlAttributeList)
ve.dm.MWGalleryImageNode.static.handlesOwnChildren = true;

// This should be kept in sync with Parsoid's WTUtils::textContentFromCaption
// which drops <ref>s and metadata tags
ve.dm.MWGalleryImageNode.static.textContentFromCaption = function textContentFromCaption( node ) {
	const metaDataTags = [ 'base', 'link', 'meta', 'noscript', 'script', 'style', 'template', 'title' ];
	let content = '';
	let c = node.firstChild;
	while ( c ) {
		if ( c.nodeName === '#text' ) {
			content += c.nodeValue;
		} else if (
			c instanceof HTMLElement &&
			( metaDataTags.indexOf( c.nodeName.toLowerCase() ) === -1 ) &&
			!/\bmw:Extension\/ref\b/.test( c.getAttribute( 'typeOf' ) )
		) {
			content += textContentFromCaption( c );
		}
		c = c.nextSibling;
	}
	return content;
};

ve.dm.MWGalleryImageNode.static.toDataElement = function ( domElements, converter ) {
	// TODO: Improve handling of missing files. See 'isError' in MWBlockImageNode#toDataElement
	const li = domElements[ 0 ];
	const img = li.querySelector( '.mw-file-element' );
	const imgWrapper = img.parentNode;
	const container = imgWrapper.parentNode;

	// Get caption (may be missing for mode="packed-hover" galleries)
	let captionNode = li.querySelector( '.gallerytext' );
	if ( captionNode ) {
		captionNode = captionNode.cloneNode( true );
		// If showFilename is 'yes', the filename is also inside the caption, so throw this out
		const filename = captionNode.querySelector( '.galleryfilename' );
		if ( filename ) {
			filename.remove();
		}
	}

	// For video thumbnails, the `alt` attribute is only in the data-mw of the container (see: T348703)
	const mwDataJSON = container.getAttribute( 'data-mw' );
	const mwData = mwDataJSON ? JSON.parse( mwDataJSON ) : {};
	const mwAttribs = mwData.attribs || [];
	let containerAlt;
	for ( let i = mwAttribs.length - 1; i >= 0; i-- ) {
		if ( mwAttribs[ i ][ 0 ] === 'alt' && mwAttribs[ i ][ 1 ].txt ) {
			containerAlt = mwAttribs[ i ][ 1 ].txt;
			break;
		}
	}

	const altPresent = img.hasAttribute( 'alt' ) || containerAlt !== undefined;
	let altText = null;
	if ( altPresent ) {
		altText = img.hasAttribute( 'alt' ) ? img.getAttribute( 'alt' ) : containerAlt;
	}

	const altFromCaption = captionNode ?
		ve.dm.MWGalleryImageNode.static.textContentFromCaption( captionNode ).trim() : '';
	const altTextSame = altPresent && altFromCaption &&
		( altText.trim() === altFromCaption );

	let caption;
	if ( captionNode ) {
		caption = converter.getDataFromDomClean( captionNode, { type: 'mwGalleryImageCaption' } );
	} else {
		caption = [
			{ type: 'mwGalleryImageCaption' },
			{ type: 'paragraph', internal: { generated: 'wrapper' } },
			{ type: '/paragraph' },
			{ type: '/mwGalleryImageCaption' }
		];
	}

	const typeofAttrs = container.getAttribute( 'typeof' ).trim().split( /\s+/ );
	const errorIndex = typeofAttrs.indexOf( 'mw:Error' );
	const isError = errorIndex !== -1;
	const errorText = isError ? img.textContent : null;
	const width = img.getAttribute( isError ? 'data-width' : 'width' );
	const height = img.getAttribute( isError ? 'data-height' : 'height' );

	if ( isError ) {
		typeofAttrs.splice( errorIndex, 1 );
	}

	const types = ve.dm.MWImageNode.static.rdfaToTypes[ typeofAttrs[ 0 ] ];

	let href = imgWrapper.getAttribute( 'href' );
	if ( href ) {
		// Convert absolute URLs to relative if the href refers to a page on this wiki.
		// Otherwise Parsoid generates |link= options for copy-pasted images (T193253).
		const targetData = mw.libs.ve.getTargetDataFromHref( href, converter.getTargetHtmlDocument() );
		if ( targetData.isInternal ) {
			href = mw.libs.ve.encodeParsoidResourceName( targetData.title );
		}
	}

	const dataElement = {
		type: this.name,
		attributes: {
			mediaClass: types.mediaClass,
			mediaTag: img.nodeName.toLowerCase(),
			resource: img.getAttribute( 'resource' ),
			altText: altText,
			altTextSame: altTextSame,
			href: href,
			// 'src' for images, 'poster' for video/audio
			src: img.getAttribute( 'src' ) || img.getAttribute( 'poster' ),
			width: width !== null && width !== '' ? +width : null,
			height: height !== null && height !== '' ? +height : null,
			isError: isError,
			errorText: errorText,
			mw: mwData,
			imageClassAttr: img.getAttribute( 'class' ),
			imgWrapperClassAttr: imgWrapper.getAttribute( 'class' )
		}
	};

	return [ dataElement ]
		.concat( caption )
		.concat( { type: '/' + this.name } );
};

ve.dm.MWGalleryImageNode.static.toDomElements = function ( data, doc, converter ) {
	// ImageNode:
	//   <li> li (gallerybox)
	//     <div> thumbDiv
	//       <span> container
	//         <a> a
	//           <img> img (or span if error)
	const model = data[ 0 ],
		attributes = model.attributes,
		li = doc.createElement( 'li' ),
		thumbDiv = doc.createElement( 'div' ),
		container = doc.createElement( 'span' ),
		imgWrapper = doc.createElement( attributes.href ? 'a' : 'span' ),
		img = doc.createElement( attributes.isError ? 'span' : attributes.mediaTag ),
		alt = attributes.altText,
		mwData = ve.copy( attributes.mw ) || {};

	li.classList.add( 'gallerybox' );
	thumbDiv.classList.add( 'thumb' );
	container.setAttribute( 'typeof', ve.dm.MWImageNode.static.getRdfa(
		attributes.mediaClass, 'none', attributes.isError
	) );

	if ( attributes.href ) {
		imgWrapper.setAttribute( 'href', attributes.href );
	}

	if ( attributes.imageClassAttr ) {
		// eslint-disable-next-line mediawiki/class-doc
		img.className = attributes.imageClassAttr;
	}

	if ( attributes.imgWrapperClassAttr ) {
		// eslint-disable-next-line mediawiki/class-doc
		imgWrapper.className = attributes.imgWrapperClassAttr;
	}

	img.setAttribute( 'resource', attributes.resource );
	if ( attributes.isError ) {
		const filename = mw.libs.ve.normalizeParsoidResourceName( attributes.resource || '' );
		img.appendChild( doc.createTextNode( attributes.errorText ? attributes.errorText : filename ) );
	} else {
		const srcAttr = ve.dm.MWImageNode.static.tagsToSrcAttrs[ img.nodeName.toLowerCase() ];
		img.setAttribute( srcAttr, attributes.src );
	}
	img.setAttribute( attributes.isError ? 'data-width' : 'width', attributes.width );
	img.setAttribute( attributes.isError ? 'data-height' : 'height', attributes.height );

	imgWrapper.appendChild( img );
	container.appendChild( imgWrapper );
	thumbDiv.appendChild( container );
	li.appendChild( thumbDiv );

	const captionData = data.slice( 1, -1 );
	const captionWrapper = doc.createElement( 'div' );
	converter.getDomSubtreeFromData( captionData, captionWrapper );
	while ( captionWrapper.firstChild ) {
		li.appendChild( captionWrapper.firstChild );
	}
	const captionText = ve.dm.MWGalleryImageNode.static.textContentFromCaption( li ).trim();

	if ( img.nodeName.toLowerCase() === 'img' ) {
		if ( attributes.altTextSame && captionText ) {
			img.setAttribute( 'alt', captionText );
		} else if ( typeof alt === 'string' ) {
			img.setAttribute( 'alt', alt );
		}
	} else {
		let mwAttribs = mwData.attribs || [];
		mwAttribs = mwAttribs.filter(
			( attr ) => attr[ 0 ] !== 'alt'
		);
		// Parsoid only sets an alt in the data-mw.attribs if it's explicit
		// in the source
		if ( !attributes.altTextSame && typeof alt === 'string' ) {
			mwAttribs.push( [ 'alt', { txt: alt } ] );
		}
		if ( mwData.attribs || mwAttribs.length ) {
			mwData.attribs = mwAttribs;
		}
	}

	if ( !ve.isEmptyObject( mwData ) ) {
		container.setAttribute( 'data-mw', JSON.stringify( mwData ) );
	}

	return [ li ];
};

ve.dm.MWGalleryImageNode.static.describeChange = function ( key ) {
	if ( key === 'altText' ) {
		// Parent method
		return ve.dm.MWGalleryImageNode.super.static.describeChange.apply( this, arguments );
	}
	// All other attributes are computed, or result in nodes being incomparable (`resource`)
	return null;
};

ve.dm.MWGalleryImageNode.static.isDiffComparable = function ( element, other ) {
	// Images with different src's shouldn't be diffed
	return element.type === other.type && element.attributes.resource === other.attributes.resource;
};

/* Methods */

/**
 * Get the image's caption node.
 *
 * @return {ve.dm.MWImageCaptionNode|null} Caption node, if present
 */
ve.dm.MWGalleryImageNode.prototype.getCaptionNode = function () {
	return this.children.length > 0 ? this.children[ 0 ] : null;
};

/* Registration */

ve.dm.modelRegistry.register( ve.dm.MWGalleryImageNode );