Add alt attribute to core image nodes

Also update and refactor tests.

Change-Id: I96d08faed42118b713af8011c5d6befb760e65c9
This commit is contained in:
Ed Sanders 2013-09-07 03:11:07 -07:00
parent 2454a16ef5
commit dd73b873a8
4 changed files with 31 additions and 49 deletions

View file

@ -37,6 +37,7 @@ ve.ce.ImageNode = function VeCeImageNode( model, config ) {
// Initialization
this.$image
.addClass( 've-ce-imageNode' )
.attr( 'alt', this.model.getAttribute( 'alt' ) )
.attr( 'src', this.model.getAttribute( 'src' ) )
.css( {
'width': this.model.getAttribute( 'width' ),

View file

@ -33,6 +33,7 @@ ve.dm.ImageNode.static.matchTagNames = [ 'img' ];
ve.dm.ImageNode.static.toDataElement = function ( domElements ) {
var $node = $( domElements[0] ),
alt = $node.attr( 'alt' ),
width = $node.attr( 'width' ),
height = $node.attr( 'height' );
@ -40,6 +41,7 @@ ve.dm.ImageNode.static.toDataElement = function ( domElements ) {
'type': 'image',
'attributes': {
'src': $node.attr( 'src' ),
'alt': alt !== undefined ? alt : null,
'width': width !== undefined && width !== '' ? Number( width ) : null,
'height': height !== undefined && height !== '' ? Number( height ) : null
}
@ -48,7 +50,7 @@ ve.dm.ImageNode.static.toDataElement = function ( domElements ) {
ve.dm.ImageNode.static.toDomElements = function ( dataElement, doc ) {
var domElement = doc.createElement( 'img' );
ve.setDomAttributes( domElement, dataElement.attributes, [ 'src', 'width', 'height' ] );
ve.setDomAttributes( domElement, dataElement.attributes, [ 'alt', 'src', 'width', 'height' ] );
return [ domElement ];
};

View file

@ -386,15 +386,7 @@ QUnit.test( 'newFromRemoval', function ( assert ) {
'type': 'replace',
'remove': [
'h',
{
'type': 'image',
'attributes': {
'src': ve.dm.example.imgSrc,
'width': null,
'height': null
},
'htmlAttributes': [ { 'values': { 'src': ve.dm.example.imgSrc } } ]
},
ve.dm.example.image.data,
{ 'type': '/image' },
'i'
],

View file

@ -165,6 +165,25 @@ ve.dm.example.testDir = window.VE_TESTDIR || '.';
ve.dm.example.imgSrc = ve.dm.example.testDir + '/example.png';
ve.dm.example.image = {
html: '<img src="' + ve.dm.example.imgSrc + '" alt="Example" width="100" height="50">',
data: {
'type': 'image',
'attributes' : {
'src': ve.dm.example.imgSrc,
'alt': 'Example',
'width': 100,
'height': 50
},
'htmlAttributes': [ { 'values': {
'src': ve.dm.example.imgSrc,
'alt': 'Example',
'width': '100',
'height': '50'
} } ]
}
};
/**
* Serialized HTML.
*
@ -195,7 +214,7 @@ ve.dm.example.html =
'</td>' +
'</tr>' +
'</table>' +
'<pre>h<img src="' + ve.dm.example.imgSrc + '">i</pre>'+
'<pre>h' + ve.dm.example.image.html + 'i</pre>'+
'<dl>' +
'<dt>' +
'<p>j</p>' +
@ -305,15 +324,7 @@ ve.dm.example.data = [
// 38 - Plain "h"
'h',
// 39 - Beginning of inline image
{
'type': 'image',
'attributes': {
'src': ve.dm.example.imgSrc,
'width': null,
'height': null
},
'htmlAttributes': [ { 'values': { 'src': ve.dm.example.imgSrc } } ]
},
ve.dm.example.image.data,
// 40 - End of inline image
{ 'type': '/image' },
// 41 - Plain "i"
@ -650,15 +661,7 @@ ve.dm.example.complexTable = [
ve.dm.example.inlineAtEdges = [
{ 'type': 'paragraph' },
{
'type': 'image',
'attributes': {
'src': ve.dm.example.imgSrc,
'width': null,
'height': null
},
'htmlAttributes': [ { 'values': { 'src': ve.dm.example.imgSrc } } ]
},
ve.dm.example.image.data,
{ 'type': '/image' },
'F',
'o',
@ -933,18 +936,10 @@ ve.dm.example.domToDataCases = {
'normalizedHtml': '<body><p>foo</p><p>bar</p><h2>baz</h2><pre> \tquux</pre></body>'
},
'image': {
'html': '<body><img src="' + ve.dm.example.imgSrc + '"></body>',
'html': '<body>' + ve.dm.example.image.html + '</body>',
'data': [
{ 'type': 'paragraph', 'internal': { 'generated': 'wrapper' } },
{
'type': 'image',
'attributes' : {
'width': null,
'height': null,
'src': ve.dm.example.imgSrc
},
'htmlAttributes': [ { 'values': { 'src': ve.dm.example.imgSrc } } ]
},
ve.dm.example.image.data,
{ 'type' : '/image' },
{ 'type': '/paragraph' },
{ 'type': 'internalList' },
@ -1160,18 +1155,10 @@ ve.dm.example.domToDataCases = {
]
},
'wrapping of bare content starting with inline node': {
'html': '<body><img src="' + ve.dm.example.imgSrc + '">12</body>',
'html': '<body>' + ve.dm.example.image.html + '12</body>',
'data': [
{ 'type': 'paragraph', 'internal': { 'generated': 'wrapper' } },
{
'type': 'image',
'attributes': {
'src': ve.dm.example.imgSrc,
'width': null,
'height': null
},
'htmlAttributes': [ { 'values': { 'src': ve.dm.example.imgSrc } } ]
},
ve.dm.example.image.data,
{ 'type': '/image' },
'1',
'2',