Merge "Fix class attribute preservation for images"

This commit is contained in:
jenkins-bot 2013-06-28 00:43:50 +00:00 committed by Gerrit Code Review
commit 22db613b34
3 changed files with 66 additions and 17 deletions

View file

@ -50,6 +50,7 @@ ve.dm.MWBlockImageNode.static.toDataElement = function ( domElements, converter
$caption = $figure.children( 'figcaption' ).eq( 0 ),
typeofAttr = $figure.attr( 'typeof' ),
classes = $figure.attr( 'class' ),
recognizedClasses = [],
attributes = {
href: $a.attr( 'href' ),
src: $img.attr( 'src' ),
@ -60,8 +61,7 @@ ve.dm.MWBlockImageNode.static.toDataElement = function ( domElements, converter
};
// Extract individual classes
classes = typeof classes === 'string' ?
classes.replace( /\s{2,}/g, ' ' ).split( ' ' ) : [];
classes = typeof classes === 'string' ? classes.trim().split( /\s+/ ) : [];
// Type
switch ( typeofAttr ) {
@ -82,12 +82,16 @@ ve.dm.MWBlockImageNode.static.toDataElement = function ( domElements, converter
// Horizontal alignment
if ( classes.indexOf( 'mw-halign-left' ) !== -1 ) {
attributes.align = 'left';
recognizedClasses.push( 'mw-halign-left' );
} else if ( classes.indexOf( 'mw-halign-right' ) !== -1 ) {
attributes.align = 'right';
recognizedClasses.push( 'mw-halign-right' );
} else if ( classes.indexOf( 'mw-halign-center' ) !== -1 ) {
attributes.align = 'center';
recognizedClasses.push( 'mw-halign-center' );
} else if ( classes.indexOf( 'mw-halign-none' ) !== -1 ) {
attributes.align = 'none';
recognizedClasses.push( 'mw-halign-none' );
} else {
attributes.align = 'default';
}
@ -95,8 +99,12 @@ ve.dm.MWBlockImageNode.static.toDataElement = function ( domElements, converter
// Default-size
if ( classes.indexOf( 'mw-default-size' ) !== -1 ) {
attributes.defaultSize = true;
recognizedClasses.push( 'mw-default-size' );
}
// Store unrecognized classes so we can restore them on the way out
attributes.unrecognizedClasses = ve.simpleArrayDifference( classes, recognizedClasses );
if ( $caption.length === 0 ) {
return [
{ 'type': 'mwBlockImage', 'attributes': attributes },
@ -161,7 +169,14 @@ ve.dm.MWBlockImageNode.static.toDomElements = function ( data, doc, converter )
break;
}
if ( originalClasses && ve.compare( originalClasses.split( ' ' ).sort(), classes.sort() ) ) {
if ( dataElement.attributes.unrecognizedClasses ) {
classes = ve.simpleArrayUnion( classes, dataElement.attributes.unrecognizedClasses );
}
if (
originalClasses &&
ve.compare( originalClasses.trim().split( /\s+/ ).sort(), classes.sort() )
) {
figure.className = originalClasses;
} else if ( classes.length > 0 ) {
figure.className = classes.join( ' ' );

View file

@ -45,9 +45,11 @@ ve.dm.MWInlineImageNode.static.toDataElement = function ( domElements ) {
$img = $firstChild.children().first(),
typeofAttr = $span.attr( 'typeof' ),
classes = $span.attr( 'class' ),
recognizedClasses = [],
attributes = {
src: $img.attr( 'src' ),
resource: $img.attr( 'resource' )
resource: $img.attr( 'resource' ),
originalClasses: classes
},
width = $img.attr( 'width' ),
height = $img.attr( 'height' );
@ -61,8 +63,7 @@ ve.dm.MWInlineImageNode.static.toDataElement = function ( domElements ) {
}
// Extract individual classes
classes = typeof classes === 'string' ?
classes.replace( /\s{2,}/g, ' ' ).split( ' ' ) : [];
classes = typeof classes === 'string' ? classes.trim().split( /\s+/ ) : [];
// Type
switch ( typeofAttr ) {
@ -77,20 +78,28 @@ ve.dm.MWInlineImageNode.static.toDataElement = function ( domElements ) {
// Vertical alignment
if ( classes.indexOf( 'mw-valign-middle' ) !== -1 ) {
attributes.valign = 'middle';
recognizedClasses.push( 'mw-valign-middle' );
} else if ( classes.indexOf( 'mw-valign-baseline' ) !== -1 ) {
attributes.valign = 'baseline';
recognizedClasses.push( 'mw-valign-baseline' );
} else if ( classes.indexOf( 'mw-valign-sub' ) !== -1 ) {
attributes.valign = 'sub';
recognizedClasses.push( 'mw-valign-sub' );
} else if ( classes.indexOf( 'mw-valign-super' ) !== -1 ) {
attributes.valign = 'super';
recognizedClasses.push( 'mw-valign-super' );
} else if ( classes.indexOf( 'mw-valign-top' ) !== -1 ) {
attributes.valign = 'top';
recognizedClasses.push( 'mw-valign-top' );
} else if ( classes.indexOf( 'mw-valign-text-top' ) !== -1 ) {
attributes.valign = 'text-top';
recognizedClasses.push( 'mw-valign-text-top' );
} else if ( classes.indexOf( 'mw-valign-bottom' ) !== -1 ) {
attributes.valign = 'bottom';
recognizedClasses.push( 'mw-valign-bottom' );
} else if ( classes.indexOf( 'mw-valign-text-bottom' ) !== -1 ) {
attributes.valign = 'text-bottom';
recognizedClasses.push( 'mw-valign-text-bottom' );
} else {
attributes.valign = 'default';
}
@ -98,19 +107,27 @@ ve.dm.MWInlineImageNode.static.toDataElement = function ( domElements ) {
// Border
if ( classes.indexOf( 'mw-image-border' ) !== -1 ) {
attributes.border = true;
recognizedClasses.push( 'mw-image-border' );
}
// Default-size
if ( classes.indexOf( 'mw-default-size' ) !== -1 ) {
attributes.defaultSize = true;
recognizedClasses.push( 'mw-default-size' );
}
// Store unrecognized classes so we can restore them on the way out
attributes.unrecognizedClasses = ve.simpleArrayDifference( classes, recognizedClasses );
return { 'type': 'mwInlineImage', 'attributes': attributes };
};
ve.dm.MWInlineImageNode.static.toDomElements = function ( data, doc ) {
var span = doc.createElement( 'span' ),
var firstChild,
span = doc.createElement( 'span' ),
img = doc.createElement( 'img' ),
firstChild;
classes = [],
originalClasses = data.attributes.originalClasses;
ve.setDomAttributes( img, data.attributes, [ 'src', 'width', 'height', 'resource' ] );
@ -124,15 +141,28 @@ ve.dm.MWInlineImageNode.static.toDomElements = function ( data, doc ) {
}
if ( data.attributes.defaultSize ) {
span.className += ' mw-default-size';
classes.push( 'mw-default-size' );
}
if ( data.attributes.border ) {
span.className += ' mw-image-border';
classes.push( 'mw-image-border' );
}
if ( data.attributes.valign && data.attributes.valign !== 'default' ) {
span.className += ' mw-image-' + data.attributes.valign;
classes.push( 'mw-valign-' + data.attributes.valign );
}
if ( data.attributes.unrecognizedClasses ) {
classes = ve.simpleArrayUnion( classes, data.attributes.unrecognizedClasses );
}
if (
originalClasses &&
ve.compare( originalClasses.trim().split( /\s+/ ).sort(), classes.sort() )
) {
span.className = originalClasses;
} else if ( classes.length > 0 ) {
span.className = classes.join( ' ' );
}
if ( data.attributes.isLinked ) {

View file

@ -12,7 +12,7 @@
*/
ve.dm.mwExample = {};
ve.dm.mwExample.MWInlineImageHtml = '<span typeof="mw:Image" data-parsoid="{&quot;tsr&quot;:[0,24],&quot;optList&quot;:[{&quot;ck&quot;:&quot;width&quot;,&quot;ak&quot;:&quot;500px&quot;}],&quot;cacheKey&quot;:&quot;[[Image:Wiki.png|500px]]&quot;,&quot;img&quot;:{&quot;h&quot;:155,&quot;w&quot;:135,&quot;wdset&quot;:true},&quot;dsr&quot;:[0,24,null,null]}"><a href="./File:Wiki.png" data-parsoid="{&quot;a&quot;:{&quot;href&quot;:&quot;./File:Wiki.png&quot;}}"><img resource="./File:Wiki.png" src="http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png" height="155" width="135" data-parsoid="{&quot;a&quot;:{&quot;resource&quot;:&quot;./File:Wiki.png&quot;,&quot;width&quot;:&quot;135&quot;},&quot;sa&quot;:{&quot;resource&quot;:&quot;Image:Wiki.png&quot;,&quot;width&quot;:&quot;500&quot;}}"></a></span>';
ve.dm.mwExample.MWInlineImageHtml = '<span typeof="mw:Image" class="foo mw-valign-text-top" data-parsoid="{&quot;tsr&quot;:[0,24],&quot;optList&quot;:[{&quot;ck&quot;:&quot;width&quot;,&quot;ak&quot;:&quot;500px&quot;}],&quot;cacheKey&quot;:&quot;[[Image:Wiki.png|500px]]&quot;,&quot;img&quot;:{&quot;h&quot;:155,&quot;w&quot;:135,&quot;wdset&quot;:true},&quot;dsr&quot;:[0,24,null,null]}"><a href="./File:Wiki.png" data-parsoid="{&quot;a&quot;:{&quot;href&quot;:&quot;./File:Wiki.png&quot;}}"><img resource="./File:Wiki.png" src="http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png" height="155" width="135" data-parsoid="{&quot;a&quot;:{&quot;resource&quot;:&quot;./File:Wiki.png&quot;,&quot;width&quot;:&quot;135&quot;},&quot;sa&quot;:{&quot;resource&quot;:&quot;Image:Wiki.png&quot;,&quot;width&quot;:&quot;500&quot;}}"></a></span>';
ve.dm.mwExample.MWTransclusion = {
'blockSpan': '<span about="#mwt1" typeof="mw:Transclusion" data-mw="{&quot;target&quot;:{&quot;wt&quot;:&quot;Test&quot;},&quot;params&quot;:{&quot;1&quot;:{&quot;wt&quot;:&quot;Hello, world!&quot;}},&quot;id&quot;:&quot;mwt1&quot;}" data-parsoid="{&quot;tsr&quot;:[18,40],&quot;src&quot;:&quot;{{Test|Hello, world!}}&quot;,&quot;dsr&quot;:[18,40,null,null]}"></span>',
'blockSpanModified': '<span about="#mwt1" typeof="mw:Transclusion" data-mw="{&quot;id&quot;:&quot;mwt1&quot;,&quot;target&quot;:{&quot;wt&quot;:&quot;Test&quot;},&quot;params&quot;:{&quot;1&quot;:{&quot;wt&quot;:&quot;Hello, globe!&quot;}}}" data-parsoid="{&quot;tsr&quot;:[18,40],&quot;src&quot;:&quot;{{Test|Hello, world!}}&quot;,&quot;dsr&quot;:[18,40,null,null]}"></span>',
@ -131,9 +131,11 @@ ve.dm.mwExample.domToDataCases = {
'width': 135,
'height': 155,
'isLinked': true,
'valign': 'default',
'valign': 'text-top',
'resource': './File:Wiki.png',
'type': 'inline'
'type': 'inline',
'originalClasses': 'foo mw-valign-text-top',
'unrecognizedClasses': ['foo']
},
'htmlAttributes': [
{
@ -946,7 +948,7 @@ ve.dm.mwExample.domToDataCases = {
]
},
'thumb image': {
'html': '<body><figure typeof="mw:Image/Thumb" class="mw-halign-right"><a href="Foo"><img src="Bar" width="1" height="2" resource="FooBar"></a><figcaption>abc</figcaption></figure></body>',
'html': '<body><figure typeof="mw:Image/Thumb" class="mw-halign-right foobar"><a href="Foo"><img src="Bar" width="1" height="2" resource="FooBar"></a><figcaption>abc</figcaption></figure></body>',
'data': [
{
'type': 'mwBlockImage',
@ -958,7 +960,8 @@ ve.dm.mwExample.domToDataCases = {
'width': '1',
'height': '2',
'resource': 'FooBar',
'originalClasses': 'mw-halign-right'
'originalClasses': 'mw-halign-right foobar',
'unrecognizedClasses': ['foobar']
}
},
{ 'type': 'mwImageCaption' },
@ -984,7 +987,8 @@ ve.dm.mwExample.domToDataCases = {
'width': '1',
'height': '2',
'resource': 'FooBar',
'originalClasses': undefined
'originalClasses': undefined,
'unrecognizedClasses': []
},
'htmlAttributes': [ {
'values': { 'data-parsoid': '{}' },