2016-11-19 23:11:06 +00:00
|
|
|
/*!
|
|
|
|
* VisualEditor DataModel MWGalleryImageNode class.
|
|
|
|
*
|
|
|
|
* @copyright 2016 VisualEditor Team and others; 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' ];
|
|
|
|
|
2018-04-03 18:33:00 +00:00
|
|
|
ve.dm.MWGalleryImageNode.static.childNodeTypes = [ 'mwGalleryImageCaption' ];
|
|
|
|
|
2016-11-19 23:11:06 +00:00
|
|
|
ve.dm.MWGalleryImageNode.static.matchFunction = function ( element ) {
|
|
|
|
var parentTypeof = ( element.parentNode && element.parentNode.getAttribute( 'typeof' ) ) || '';
|
|
|
|
return element.getAttribute( 'class' ) === 'gallerybox' &&
|
2018-10-02 20:48:25 +00:00
|
|
|
parentTypeof.trim().split( /\s+/ ).indexOf( 'mw:Extension/gallery' ) !== -1;
|
2016-11-19 23:11:06 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
ve.dm.MWGalleryImageNode.static.parentNodeTypes = [ 'mwGallery' ];
|
|
|
|
|
|
|
|
ve.dm.MWGalleryImageNode.static.toDataElement = function ( domElements, converter ) {
|
|
|
|
// TODO: Improve handling of missing files. See 'isError' in MWBlockImageNode#toDataElement
|
2021-10-13 12:57:45 +00:00
|
|
|
var li = domElements[ 0 ];
|
|
|
|
var img = li.querySelector( 'img,audio,video,span[resource]' );
|
2022-05-31 18:35:52 +00:00
|
|
|
var container = img.parentNode.parentNode;
|
2016-11-19 23:11:06 +00:00
|
|
|
|
|
|
|
// Get caption (may be missing for mode="packed-hover" galleries)
|
2021-10-13 12:57:45 +00:00
|
|
|
var captionNode = li.querySelector( '.gallerytext' );
|
2018-08-01 02:35:49 +00:00
|
|
|
if ( captionNode ) {
|
|
|
|
captionNode = captionNode.cloneNode( true );
|
2016-11-19 23:11:06 +00:00
|
|
|
// If showFilename is 'yes', the filename is also inside the caption, so throw this out
|
2021-10-13 12:57:45 +00:00
|
|
|
var filename = captionNode.querySelector( '.galleryfilename' );
|
2016-11-19 23:11:06 +00:00
|
|
|
if ( filename ) {
|
|
|
|
filename.remove();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-10-13 12:57:45 +00:00
|
|
|
var caption;
|
2018-08-01 02:35:49 +00:00
|
|
|
if ( captionNode ) {
|
|
|
|
caption = converter.getDataFromDomClean( captionNode, { type: 'mwGalleryImageCaption' } );
|
2016-11-19 23:11:06 +00:00
|
|
|
} else {
|
2018-08-01 02:35:49 +00:00
|
|
|
caption = [
|
|
|
|
{ type: 'mwGalleryImageCaption' },
|
|
|
|
{ type: 'paragraph', internal: { generated: 'wrapper' } },
|
|
|
|
{ type: '/paragraph' },
|
|
|
|
{ type: '/mwGalleryImageCaption' }
|
|
|
|
];
|
2016-11-19 23:11:06 +00:00
|
|
|
}
|
|
|
|
|
2022-05-31 18:35:52 +00:00
|
|
|
var typeofAttrs = container.getAttribute( 'typeof' ).trim().split( /\s+/ );
|
2022-05-23 14:18:20 +00:00
|
|
|
var errorIndex = typeofAttrs.indexOf( 'mw:Error' );
|
|
|
|
var isError = errorIndex !== -1;
|
|
|
|
var width = img.getAttribute( isError ? 'data-width' : 'width' );
|
|
|
|
var height = img.getAttribute( isError ? 'data-height' : 'height' );
|
2022-05-21 12:59:31 +00:00
|
|
|
|
2022-05-30 23:17:46 +00:00
|
|
|
if ( isError ) {
|
|
|
|
typeofAttrs.splice( errorIndex, 1 );
|
|
|
|
}
|
|
|
|
|
|
|
|
var types = ve.dm.MWImageNode.static.rdfaToTypes[ typeofAttrs[ 0 ] ];
|
|
|
|
|
2021-10-13 12:57:45 +00:00
|
|
|
var dataElement = {
|
2016-11-19 23:11:06 +00:00
|
|
|
type: this.name,
|
|
|
|
attributes: {
|
2022-05-30 23:17:46 +00:00
|
|
|
mediaClass: types.mediaClass,
|
|
|
|
mediaTag: img.nodeName.toLowerCase(),
|
Parse relative hrefs on image nodes like on regular links (try 2)
Previous, reverted attempt: da9b6fffbdba9007cfe893b1eafd1ccb42dbb537.
This attempt also includes 6037fefbe044fbf61e7734923f3b625f10e910a1,
and fixes minor conflicts with other changes.
* In normal images, parse relative 'href' attributes instead of
expanding them to absolute. This resolves Parsoid generating
|link= options for copy-pasted images (T193253).
Keep them in the underscore-form to avoid causing dirty diffs like
T237040 again. Unlike in the previous attempt, we don't need to be
super-careful about the 'resource' attribute, thanks to the Parsoid
changes in T108504.
* In gallery images stuff, prefix the 'resource' attribute with './',
same as normal images do. This causes no functional changes, but it
makes updating tests easier, and the consistency is probably good.
* Update test examples to also prefix 'resource' and relative 'href'
attributes with './', like the real Parsoid does.
Bug: T193253
Change-Id: I91131728a87c9406bf069d46d3c94c9a8905a003
2019-09-10 18:57:05 +00:00
|
|
|
resource: './' + mw.libs.ve.normalizeParsoidResourceName( img.getAttribute( 'resource' ) ),
|
2016-11-19 23:11:06 +00:00
|
|
|
altText: img.getAttribute( 'alt' ),
|
2018-04-05 21:14:16 +00:00
|
|
|
// 'src' for images, 'poster' for video/audio
|
|
|
|
src: img.getAttribute( 'src' ) || img.getAttribute( 'poster' ),
|
2022-05-21 12:59:31 +00:00
|
|
|
width: width !== null && width !== '' ? +width : null,
|
|
|
|
height: height !== null && height !== '' ? +height : null,
|
2022-05-23 14:18:20 +00:00
|
|
|
isError: isError
|
2016-11-19 23:11:06 +00:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
return [ dataElement ]
|
|
|
|
.concat( caption )
|
|
|
|
.concat( { type: '/' + this.name } );
|
|
|
|
};
|
|
|
|
|
|
|
|
ve.dm.MWGalleryImageNode.static.toDomElements = function ( data, doc ) {
|
|
|
|
// ImageNode:
|
2019-12-31 00:17:40 +00:00
|
|
|
// <li> li (gallerybox)
|
2018-11-21 12:33:32 +00:00
|
|
|
// <div> thumbDiv
|
2022-05-31 18:35:52 +00:00
|
|
|
// <span> container
|
2018-11-21 12:33:32 +00:00
|
|
|
// <a> a
|
2022-05-23 14:18:20 +00:00
|
|
|
// <img> img (or span if error)
|
2016-11-19 23:11:06 +00:00
|
|
|
var model = data,
|
2022-05-23 14:18:20 +00:00
|
|
|
attributes = model.attributes,
|
2016-11-19 23:11:06 +00:00
|
|
|
li = doc.createElement( 'li' ),
|
|
|
|
thumbDiv = doc.createElement( 'div' ),
|
2022-05-31 18:35:52 +00:00
|
|
|
container = doc.createElement( 'span' ),
|
2016-11-19 23:11:06 +00:00
|
|
|
a = doc.createElement( 'a' ),
|
2022-05-30 23:17:46 +00:00
|
|
|
img = doc.createElement( attributes.isError ? 'span' : ( attributes.mediaTag || 'img' ) ),
|
2022-05-23 14:18:20 +00:00
|
|
|
alt = attributes.altText;
|
2016-11-19 23:11:06 +00:00
|
|
|
|
2022-05-30 23:17:46 +00:00
|
|
|
// FIXME: attributes.mediaTag and attributes.mediaClass aren't set after edit
|
|
|
|
|
2016-11-19 23:11:06 +00:00
|
|
|
li.classList.add( 'gallerybox' );
|
|
|
|
thumbDiv.classList.add( 'thumb' );
|
2022-05-30 23:17:46 +00:00
|
|
|
container.setAttribute( 'typeof', ve.dm.MWImageNode.static.getRdfa(
|
|
|
|
( attributes.mediaClass || 'File' ), 'none', attributes.isError
|
|
|
|
) );
|
2016-11-19 23:11:06 +00:00
|
|
|
|
|
|
|
// TODO: Support editing the link
|
2022-03-09 19:33:42 +00:00
|
|
|
// FIXME: Dropping the href causes Parsoid to mark the node as wrapper modified,
|
|
|
|
// making the whole gallery subtree edited, preventing selser. When fixing,
|
|
|
|
// preserving the imgWrapperClassAttr, as in the MW*ImageNodes, will also be
|
|
|
|
// necessary.
|
2022-05-23 14:18:20 +00:00
|
|
|
// a.setAttribute( 'href', attributes.src );
|
2016-11-19 23:11:06 +00:00
|
|
|
|
2022-05-23 14:18:20 +00:00
|
|
|
img.setAttribute( 'resource', attributes.resource );
|
|
|
|
if ( attributes.isError ) {
|
|
|
|
img.classList.add( 'mw-broken-media' );
|
|
|
|
var filename = mw.libs.ve.normalizeParsoidResourceName( attributes.resource || '' );
|
|
|
|
img.appendChild( doc.createTextNode( filename ) );
|
|
|
|
} else {
|
2022-05-30 23:17:46 +00:00
|
|
|
var srcAttr = ve.dm.MWImageNode.static.tagsToSrcAttrs[ img.nodeName.toLowerCase() ];
|
|
|
|
img.setAttribute( srcAttr, attributes.src );
|
2022-05-23 14:18:20 +00:00
|
|
|
}
|
|
|
|
img.setAttribute( attributes.isError ? 'data-width' : 'width', attributes.width );
|
|
|
|
img.setAttribute( attributes.isError ? 'data-height' : 'height', attributes.height );
|
2022-05-19 13:57:41 +00:00
|
|
|
if ( typeof alt === 'string' ) {
|
2016-11-19 23:11:06 +00:00
|
|
|
img.setAttribute( 'alt', alt );
|
|
|
|
}
|
|
|
|
|
|
|
|
a.appendChild( img );
|
2022-05-31 18:35:52 +00:00
|
|
|
container.appendChild( a );
|
|
|
|
thumbDiv.appendChild( container );
|
2019-12-31 00:17:40 +00:00
|
|
|
li.appendChild( thumbDiv );
|
2016-11-19 23:11:06 +00:00
|
|
|
|
|
|
|
return [ li ];
|
|
|
|
};
|
|
|
|
|
2018-04-04 16:28:26 +00:00
|
|
|
ve.dm.MWGalleryImageNode.static.describeChange = function ( key ) {
|
2022-07-01 12:14:49 +00:00
|
|
|
if ( key === 'resource' || key === 'altText' ) {
|
|
|
|
// Parent method
|
|
|
|
return ve.dm.MWGalleryImageNode.super.static.describeChange.apply( this, arguments );
|
2018-04-04 16:28:26 +00:00
|
|
|
}
|
2022-07-01 12:14:49 +00:00
|
|
|
// All other attributes are computed
|
|
|
|
return null;
|
2018-04-04 16:28:26 +00:00
|
|
|
};
|
|
|
|
|
2022-05-19 00:28:10 +00:00
|
|
|
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;
|
|
|
|
};
|
|
|
|
|
2016-11-19 23:11:06 +00:00
|
|
|
/* 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 );
|