mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-11-16 02:51:50 +00:00
1d7cf569e6
* VisualEditor.hooks.php ** export URL to magnify clip as a configuration variable so thumbnail image can render correctly * ve.ce.Surface.css ** add CSS styling to make image captions look the same way in edit mode as they look in the view mode * ve.ce.ParagraphNode.js ** add CSS class ve-ce-generated-wrapper if it is a generated wrapper * ve.ce.MWImageCaptionNode.js ** make image caption rendering match the view mode Change-Id: I0cd1b25e8f8355e0500aabc90e7c4cdf591545f3
124 lines
3.7 KiB
JavaScript
124 lines
3.7 KiB
JavaScript
/*!
|
|
* VisualEditor DataModel MWBlockImageNode class.
|
|
*
|
|
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
|
|
* @license The MIT License (MIT); see LICENSE.txt
|
|
*/
|
|
|
|
/**
|
|
* DataModel MediaWiki image node.
|
|
*
|
|
* @class
|
|
* @extends ve.dm.BranchNode
|
|
* @constructor
|
|
* @param {number} [length] Length of content data in document
|
|
* @param {Object} [element] Reference to element in linear model
|
|
*/
|
|
ve.dm.MWBlockImageNode = function VeDmMWBlockImageNode( length, element ) {
|
|
ve.dm.BranchNode.call( this, 0, element );
|
|
};
|
|
|
|
/* Inheritance */
|
|
|
|
ve.inheritClass( ve.dm.MWBlockImageNode, ve.dm.BranchNode );
|
|
|
|
/* Static Properties */
|
|
|
|
ve.dm.MWBlockImageNode.static.name = 'MWblockimage';
|
|
|
|
ve.dm.MWBlockImageNode.static.storeHtmlAttributes = [ 'data-parsoid' ];
|
|
|
|
ve.dm.MWBlockImageNode.static.handlesOwnChildren = true;
|
|
|
|
ve.dm.MWBlockImageNode.static.childNodeTypes = [ 'MWimagecaption' ];
|
|
|
|
// Match typeof="mw:Image/Thumb" and typeof="mw:Image/Frame"
|
|
ve.dm.MWBlockImageNode.static.matchRdfaTypes = [ /mw:Image\/(Thumb|Frame)/ ];
|
|
|
|
ve.dm.MWBlockImageNode.static.toDataElement = function ( domElements, converter ) {
|
|
var $figure = $( domElements[0] ),
|
|
$a = $figure.children( 'a' ).eq( 0 ),
|
|
$img = $a.children( 'img' ).eq( 0 ),
|
|
$caption = $figure.children( 'figcaption' ).eq( 0 ),
|
|
typeofAttr = $figure.attr( 'typeof' ),
|
|
classes = $figure.attr( 'class' ),
|
|
attributes = {
|
|
href: $a.attr( 'href' ),
|
|
src: $img.attr( 'src' ),
|
|
width: $img.attr( 'width' ),
|
|
height: $img.attr( 'height' ),
|
|
resource: $img.attr( 'resource' )
|
|
};
|
|
|
|
// Extract individual classes
|
|
classes = typeof classes === 'string' ?
|
|
classes.replace( /\s{2,}/g, ' ' ).split( ' ' ) : [];
|
|
|
|
// Type
|
|
switch ( typeofAttr ) {
|
|
case 'mw:Image/Thumb':
|
|
attributes.type = 'thumb';
|
|
break;
|
|
case 'mw:Image/Frame':
|
|
attributes.type = 'frame';
|
|
break;
|
|
}
|
|
|
|
// Horizontal alignment
|
|
if ( classes.indexOf( 'mw-halign-left' ) !== -1 ) {
|
|
attributes.align = 'left';
|
|
} else if ( classes.indexOf( 'mw-halign-right' ) !== -1 ) {
|
|
attributes.align = 'right';
|
|
} else if ( classes.indexOf( 'mw-halign-center' ) !== -1 ) {
|
|
attributes.align = 'center';
|
|
} else if ( classes.indexOf( 'mw-halign-none' ) !== -1 ) {
|
|
attributes.align = 'none';
|
|
} else {
|
|
attributes.align = 'right';
|
|
}
|
|
|
|
// Default-size
|
|
if ( $figure.hasClass( 'mw-default-size' ) ) {
|
|
attributes.defaultSize = true;
|
|
}
|
|
|
|
if ( $caption.length === 0 ) {
|
|
return [
|
|
{ 'type': 'MWblockimage', 'attributes': attributes },
|
|
{ 'type': 'MWimagecaption' },
|
|
{ 'type': '/MWimagecaption' },
|
|
{ 'type': '/MWblockimage' }
|
|
];
|
|
} else {
|
|
return [ { 'type': 'MWblockimage', 'attributes': attributes } ].
|
|
concat( converter.getDataFromDomRecursionClean( $caption[0], { 'type': 'MWimagecaption' } ) ).
|
|
concat( [ { 'type': '/MWblockimage' } ] );
|
|
}
|
|
};
|
|
|
|
ve.dm.MWBlockImageNode.static.toDomElements = function ( data, doc, converter ) {
|
|
var dataElement = data[0],
|
|
figure = doc.createElement( 'figure' ),
|
|
a = doc.createElement( 'a' ),
|
|
img = doc.createElement( 'img' ),
|
|
wrapper = doc.createElement( 'div' );
|
|
figure.setAttribute( 'typeof', 'mw:Image/Thumb' );
|
|
a.setAttribute( 'rel', 'mw:thumb' );
|
|
a.setAttribute( 'href', dataElement.attributes.href );
|
|
img.setAttribute( 'src', dataElement.attributes.src );
|
|
img.setAttribute( 'width', dataElement.attributes.width );
|
|
img.setAttribute( 'height', dataElement.attributes.height );
|
|
img.setAttribute( 'resource', dataElement.attributes.resource );
|
|
figure.appendChild( a );
|
|
a.appendChild( img );
|
|
|
|
converter.getDomSubtreeFromData( converter.getStore(), data.slice( 1, -1 ), wrapper );
|
|
while ( wrapper.firstChild ) {
|
|
figure.appendChild( wrapper.firstChild );
|
|
}
|
|
return [ figure ];
|
|
};
|
|
|
|
/* Registration */
|
|
|
|
ve.dm.modelRegistry.register( ve.dm.MWBlockImageNode ); |