wikimedia/mediawiki-extensions-VisualEditor
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor synced 2024-11-27 15:50:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge "GalleryImageNode: Handle broken images"

Browse source
This commit is contained in:
jenkins-bot 2022-05-24 01:40:01 +00:00 committed by Gerrit Code Review
parent 767d1e403b 5d060c34cc
commit 7276bf57cf
5 changed files with 88 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
modules/ve-mw/dm/nodes/ve.dm.MWBlockImageNode.js
View file

@ -225,7 +225,7 @@ ve.dm.MWBlockImageNode.static.toDomElements = function ( data, doc, converter )
img.setAttribute( attributes.isError ? 'data-width' : 'width', width );
}
if ( height !== null ) {
img.setAttribute( attributes.isError ? 'data-width' : 'height', height );
img.setAttribute( attributes.isError ? 'data-height' : 'height', height );
}
img.setAttribute( 'resource', attributes.resource );

35
modules/ve-mw/dm/nodes/ve.dm.MWGalleryImageNode.js
View file

@ -69,8 +69,11 @@ ve.dm.MWGalleryImageNode.static.toDataElement = function ( domElements, converte
];
}
var width = img.getAttribute( 'width' );
var height = img.getAttribute( 'height' );
var typeofAttrs = figureInline.getAttribute( 'typeof' ).trim().split( /\s+/ );
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' );
var dataElement = {
type: this.name,
@ -81,7 +84,8 @@ ve.dm.MWGalleryImageNode.static.toDataElement = function ( domElements, converte
src: img.getAttribute( 'src' ) || img.getAttribute( 'poster' ),
width: width !== null && width !== '' ? +width : null,
height: height !== null && height !== '' ? +height : null,
tagName: figureInline.nodeName.toLowerCase()
tagName: figureInline.nodeName.toLowerCase(),
isError: isError
}
};
@ -96,14 +100,15 @@ ve.dm.MWGalleryImageNode.static.toDomElements = function ( data, doc ) {
// <div> thumbDiv
// <span> innerDiv
// <a> a
// <img> img
// <img> img (or span if error)
var model = data,
attributes = model.attributes,
li = doc.createElement( 'li' ),
thumbDiv = doc.createElement( 'div' ),
innerDiv = doc.createElement( model.attributes.tagName || 'span' ),
innerDiv = doc.createElement( attributes.tagName || 'span' ),
a = doc.createElement( 'a' ),
img = doc.createElement( 'img' ),
alt = model.attributes.altText;
img = doc.createElement( attributes.isError ? 'span' : 'img' ),
alt = attributes.altText;
li.classList.add( 'gallerybox' );
thumbDiv.classList.add( 'thumb' );
@ -114,12 +119,18 @@ ve.dm.MWGalleryImageNode.static.toDomElements = function ( data, doc ) {
// making the whole gallery subtree edited, preventing selser. When fixing,
// preserving the imgWrapperClassAttr, as in the MW*ImageNodes, will also be
// necessary.
// a.setAttribute( 'href', model.attributes.src );
// a.setAttribute( 'href', attributes.src );
img.setAttribute( 'resource', model.attributes.resource );
img.setAttribute( 'src', model.attributes.src );
img.setAttribute( 'width', model.attributes.width );
img.setAttribute( 'height', model.attributes.height );
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 {
img.setAttribute( 'src', attributes.src );
}
img.setAttribute( attributes.isError ? 'data-width' : 'width', attributes.width );
img.setAttribute( attributes.isError ? 'data-height' : 'height', attributes.height );
if ( typeof alt === 'string' ) {
img.setAttribute( 'alt', alt );
}

62
modules/ve-mw/tests/dm/ve.dm.mwExample.js
View file

@ -883,7 +883,8 @@ ve.dm.mwExample.domToDataCases = {
height: 120,
resource: './Foo',
src: ve.ce.minImgDataUri,
tagName: 'span'
tagName: 'span',
isError: false
}
},
{ type: 'mwGalleryImageCaption' },
@ -903,6 +904,53 @@ ve.dm.mwExample.domToDataCases = {
normalizedBody: '<ul class="gallery mw-gallery-packed-hover" typeof="mw:Extension/gallery" data-mw=\'{"attrs":{"mode":"packed-hover"},"body":{"extsrc":""},"name":"gallery"}\'><li class="gallerybox" style="width: 122px;"><div class="thumb"><span typeof="mw:Image"><a><img resource="./Foo" src="' + ve.ce.minImgDataUri + '" height="120" width="120"/></a></span></div><div class="gallerytext"></div></li></ul>',
fromDataBody: '<ul typeof="mw:Extension/gallery" data-mw=\'{"attrs":{"mode":"packed-hover"},"body":{"extsrc":""},"name":"gallery"}\'><li class="gallerybox"><div class="thumb"><span typeof="mw:Image"><a><img resource="./Foo" src="' + ve.ce.minImgDataUri + '" height="120" width="120"/></a></span></div><div class="gallerytext"></div></li></ul>'
},
'mwGalleryImage (broken image)': {
body: '<ul class="gallery mw-gallery-packed-hover" typeof="mw:Extension/gallery" data-mw=\'{"attrs":{"mode":"packed-hover"},"body":{"extsrc":""},"name":"gallery"}\'><li class="gallerybox" style="width: 122px;"><div class="thumb" style="width: 120px;"><span typeof="mw:Error mw:Image" data-mw=\'{"errors":[{"key":"apierror-filedoesnotexist","message":"This image does not exist."}]}\'><a href="./Foo"><span class="mw-broken-media" resource="./Foo" data-height="120" data-width="120">File:Foo</span></a></span></div></li></ul>',
data: [
{
type: 'mwGallery',
attributes: {
mw: {
attrs: {
mode: 'packed-hover'
},
body: {
extsrc: ''
},
name: 'gallery'
},
originalMw: '{"attrs":{"mode":"packed-hover"},"body":{"extsrc":""},"name":"gallery"}'
}
},
{
type: 'mwGalleryImage',
attributes: {
altText: null,
width: 120,
height: 120,
resource: './Foo',
src: null,
tagName: 'span',
isError: true
}
},
{ type: 'mwGalleryImageCaption' },
{
type: 'paragraph',
internal: {
generated: 'wrapper'
}
},
{ type: '/paragraph' },
{ type: '/mwGalleryImageCaption' },
{ type: '/mwGalleryImage' },
{ type: '/mwGallery' },
{ type: 'internalList' },
{ type: '/internalList' }
],
normalizedBody: '<ul class="gallery mw-gallery-packed-hover" typeof="mw:Extension/gallery" data-mw=\'{"attrs":{"mode":"packed-hover"},"body":{"extsrc":""},"name":"gallery"}\'><li class="gallerybox" style="width: 122px;"><div class="thumb"><span typeof="mw:Image"><a><span class="mw-broken-media" resource="./Foo" data-height="120" data-width="120">Foo</span></a></span></div><div class="gallerytext"></div></li></ul>',
fromDataBody: '<ul typeof="mw:Extension/gallery" data-mw=\'{"attrs":{"mode":"packed-hover"},"body":{"extsrc":""},"name":"gallery"}\'><li class="gallerybox"><div class="thumb"><span typeof="mw:Image"><a><span class="mw-broken-media" resource="./Foo" data-height="120" data-width="120">Foo</span></a></span></div><div class="gallerytext"></div></li></ul>'
},
'mwGalleryImage (empty caption in DOM)': {
body: '<ul class="gallery mw-gallery-packed" typeof="mw:Extension/gallery" data-mw=\'{"attrs":{"mode":"packed"},"body":{"extsrc":""},"name":"gallery"}\'><li class="gallerybox" style="width: 122px;"><div class="thumb" style="width: 120px;"><span typeof="mw:Image"><a href="./Foo"><img resource="./Foo" src="' + ve.ce.minImgDataUri + '" height="120" width="120"/></a></span></div><div class="gallerytext"></div></li></ul>',
data: [
@ -929,7 +977,8 @@ ve.dm.mwExample.domToDataCases = {
height: 120,
resource: './Foo',
src: ve.ce.minImgDataUri,
tagName: 'span'
tagName: 'span',
isError: false
}
},
{ type: 'mwGalleryImageCaption' },
@ -975,7 +1024,8 @@ ve.dm.mwExample.domToDataCases = {
height: 120,
resource: './Foo',
src: ve.ce.minImgDataUri,
tagName: 'span'
tagName: 'span',
isError: false
}
},
{ type: 'mwGalleryImageCaption' },
@ -1021,7 +1071,8 @@ ve.dm.mwExample.domToDataCases = {
height: 120,
resource: './Foo',
src: ve.ce.minImgDataUri,
tagName: 'span'
tagName: 'span',
isError: false
}
},
{ type: '/mwGalleryImage' },
@ -1056,7 +1107,8 @@ ve.dm.mwExample.domToDataCases = {
height: 120,
resource: './Foo',
src: ve.ce.minImgDataUri,
tagName: 'span'
tagName: 'span',
isError: false
}
},
{ type: 'mwGalleryImageCaption' },

9
modules/ve-mw/ui/dialogs/ve.ui.MWGalleryDialog.js
View file

@ -424,7 +424,8 @@ ve.ui.MWGalleryDialog.prototype.getSetupProcess = function ( data ) {
height: image.getAttribute( 'height' ),
width: image.getAttribute( 'width' ),
captionDocument: this.createCaptionDocument( imageCaptionNode ),
tagName: image.getAttribute( 'tagName' )
tagName: image.getAttribute( 'tagName' ),
isError: image.getAttribute( 'isError' )
} );
}
@ -664,7 +665,8 @@ ve.ui.MWGalleryDialog.prototype.onRequestImagesSuccess = function ( response ) {
height: thumbUrls[ title ].height,
width: thumbUrls[ title ].width,
thumbUrl: thumbUrls[ title ].thumbUrl,
captionDocument: this.createCaptionDocument( null )
captionDocument: this.createCaptionDocument( null ),
isError: false
}, config ) );
delete this.selectedFilenames[ title ];
}
@ -992,7 +994,8 @@ ve.ui.MWGalleryDialog.prototype.insertOrUpdateNode = function () {
src: galleryItem.src,
height: size.height,
width: size.width,
tagName: galleryItem.tagName
tagName: galleryItem.tagName,
isError: galleryItem.isError
};
return [

1
modules/ve-mw/ui/widgets/ve.ui.MWGalleryItemWidget.js
View file

@ -30,6 +30,7 @@ ve.ui.MWGalleryItemWidget = function VeUiMWGalleryItemWidget( imageInfo, config
this.captionDocument = imageInfo.captionDocument;
this.highlighted = false;
this.tagName = imageInfo.tagName;
this.isError = imageInfo.isError;
// Configuration initialization
config = config || {};