wikimedia/mediawiki-extensions-VisualEditor
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor synced 2024-09-25 03:08:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge "Change gallery structure to match Parsoid"

Browse source
This commit is contained in:
jenkins-bot 2020-02-05 00:52:51 +00:00 committed by Gerrit Code Review
parent 0896917030 353549003a
commit 582b99781c
3 changed files with 28 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -18,7 +18,7 @@
ve.ce.MWGalleryImageNode = function VeCeMWGalleryImageNode( model ) { ve.ce.MWGalleryImageNode = function VeCeMWGalleryImageNode( model ) {
var attributes, galleryMwAttrs, mode, imagePadding, var attributes, galleryMwAttrs, mode, imagePadding,
outerDivWidth, imageHeight, innerDivHeight, innerDivMargin, innerDivWidth, outerDivWidth, imageHeight, innerDivHeight, innerDivMargin, innerDivWidth,
$outerDiv, $thumbDiv, $innerDiv, $a, $img, $thumbDiv, $innerDiv, $a, $img,
defaults = mw.config.get( 'wgVisualEditorConfig' ).galleryOptions; defaults = mw.config.get( 'wgVisualEditorConfig' ).galleryOptions;
// Parent constructor // Parent constructor
@ -26,12 +26,11 @@ ve.ce.MWGalleryImageNode = function VeCeMWGalleryImageNode( model ) {
// DOM hierarchy for MWGalleryImageNode: // DOM hierarchy for MWGalleryImageNode:
// <li> this.$element (gallerybox) // <li> this.$element (gallerybox)
// <div> outerDiv // <div> thumbDiv
// <div> thumbDiv // <figure-inline> innerDiv
// <div> innerDiv // <a> a
// <a> a // <img> img
// <img> img // <a> filenameA (galleryfilename)
// <a> filenameA (galleryfilename)
// <figcaption> ve.ce.MWGalleryImageCaptionNode // <figcaption> ve.ce.MWGalleryImageCaptionNode
attributes = model.getAttributes(); attributes = model.getAttributes();
@ -64,13 +63,11 @@ ve.ce.MWGalleryImageNode = function VeCeMWGalleryImageNode( model ) {
this.$element this.$element
.addClass( 'gallerybox' ) .addClass( 'gallerybox' )
.css( 'width', outerDivWidth + 'px' ); .css( 'width', outerDivWidth + 'px' );
$outerDiv = $( '<div>' )
.css( 'width', outerDivWidth + 'px' );
$thumbDiv = $( '<div>' ) $thumbDiv = $( '<div>' )
.addClass( 'thumb' ) .addClass( 'thumb' )
.css( 'width', innerDivWidth + 'px' ) .css( 'width', innerDivWidth + 'px' )
.css( 'height', innerDivHeight + 'px' ); .css( 'height', innerDivHeight + 'px' );
$innerDiv = $( '<div>' ) $innerDiv = $( '<figure-inline>' )
.css( 'margin', innerDivMargin ); .css( 'margin', innerDivMargin );
$a = $( '<a>' ) $a = $( '<a>' )
.addClass( 'image' ); .addClass( 'image' );
@ -86,16 +83,14 @@ ve.ce.MWGalleryImageNode = function VeCeMWGalleryImageNode( model ) {
.toggleClass( 'oo-ui-element-hidden', galleryMwAttrs.showfilename !== 'yes' ); .toggleClass( 'oo-ui-element-hidden', galleryMwAttrs.showfilename !== 'yes' );
this.$element.prepend( this.$element.prepend(
$outerDiv.append( $thumbDiv.append(
$thumbDiv.append( $innerDiv.append(
$innerDiv.append( $a.append(
$a.append( $img
$img
)
) )
), )
this.$filenameA ),
) this.$filenameA
); );
this.model.parent.connect( this, { attributeChange: 'onGalleryAttributeChange' } ); this.model.parent.connect( this, { attributeChange: 'onGalleryAttributeChange' } );
@ -123,7 +118,7 @@ ve.ce.MWGalleryImageNode.prototype.onGalleryAttributeChange = function ( key, fr
ve.ce.MWGalleryImageNode.prototype.getDomPosition = function () { ve.ce.MWGalleryImageNode.prototype.getDomPosition = function () {
// We need to override this because this.$element can have children other than renderings of child // We need to override this because this.$element can have children other than renderings of child
// CE nodes (specifically, the image, this.$outerDiv), which throws the calculations out of whack. // CE nodes (specifically, the image, this.$thumbDiv), which throws the calculations out of whack.
// Luckily, MWGalleryImageNode is very simple and can contain at most one other node: its caption, // Luckily, MWGalleryImageNode is very simple and can contain at most one other node: its caption,
// which is always inserted at the end. // which is always inserted at the end.
var domNode = this.$element.last()[ 0 ]; var domNode = this.$element.last()[ 0 ];

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

@ -88,23 +88,22 @@ ve.dm.MWGalleryImageNode.static.toDataElement = function ( domElements, converte
ve.dm.MWGalleryImageNode.static.toDomElements = function ( data, doc ) { ve.dm.MWGalleryImageNode.static.toDomElements = function ( data, doc ) {
// ImageNode: // ImageNode:
// <li> li (gallerybox) // <li> li (gallerybox)
// <div> outerDiv
// <div> thumbDiv // <div> thumbDiv
// <div> innerDiv // <figure-inline> innerDiv
// <a> a // <a> a
// <img> img // <img> img
var model = data, var model = data,
li = doc.createElement( 'li' ), li = doc.createElement( 'li' ),
outerDiv = doc.createElement( 'div' ),
thumbDiv = doc.createElement( 'div' ), thumbDiv = doc.createElement( 'div' ),
innerDiv = doc.createElement( 'div' ), innerDiv = doc.createElement( 'figure-inline' ),
a = doc.createElement( 'a' ), a = doc.createElement( 'a' ),
img = doc.createElement( 'img' ), img = doc.createElement( 'img' ),
alt = model.attributes.altText; alt = model.attributes.altText;
li.classList.add( 'gallerybox' ); li.classList.add( 'gallerybox' );
thumbDiv.classList.add( 'thumb' ); thumbDiv.classList.add( 'thumb' );
innerDiv.setAttribute( 'typeof', 'mw:Image' );
// TODO: Support editing the link // TODO: Support editing the link
// a.setAttribute( 'href', model.attributes.src ); // a.setAttribute( 'href', model.attributes.src );
@ -118,8 +117,7 @@ ve.dm.MWGalleryImageNode.static.toDomElements = function ( data, doc ) {
a.appendChild( img ); a.appendChild( img );
innerDiv.appendChild( a ); innerDiv.appendChild( a );
thumbDiv.appendChild( innerDiv ); thumbDiv.appendChild( innerDiv );
outerDiv.appendChild( thumbDiv ); li.appendChild( thumbDiv );
li.appendChild( outerDiv );
return [ li ]; return [ li ];
}; };

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

@ -844,8 +844,8 @@ ve.dm.mwExample.domToDataCases = {
{ type: 'internalList' }, { type: 'internalList' },
{ type: '/internalList' } { type: '/internalList' }
], ],
normalizedBody: '<ul class="gallery" typeof="mw:Extension/gallery" data-mw=\'{"attrs":{"mode":"packed-hover"},"body":{"extsrc":""},"name":"gallery"}\'><li class="gallerybox" style="width: 122px;"><div><div class="thumb"><div><a><img resource="Foo" src="' + ve.ce.minImgDataUri + '"/></a></div></div></div><div class="gallerytext"></div></li></ul>', normalizedBody: '<ul class="gallery" typeof="mw:Extension/gallery" data-mw=\'{"attrs":{"mode":"packed-hover"},"body":{"extsrc":""},"name":"gallery"}\'><li class="gallerybox" style="width: 122px;"><div class="thumb"><figure-inline typeof="mw:Image"><a><img resource="Foo" src="' + ve.ce.minImgDataUri + '"/></a></div></div><div class="gallerytext"></div></li></ul>',
fromDataBody: '<ul class="gallery" typeof="mw:Extension/gallery" data-mw=\'{"attrs":{"mode":"packed-hover"},"body":{"extsrc":""},"name":"gallery"}\'><li class="gallerybox"><div><div class="thumb"><div><a><img resource="Foo" src="' + ve.ce.minImgDataUri + '"/></a></div></div></div><div class="gallerytext"></div></li></ul>' fromDataBody: '<ul class="gallery" typeof="mw:Extension/gallery" data-mw=\'{"attrs":{"mode":"packed-hover"},"body":{"extsrc":""},"name":"gallery"}\'><li class="gallerybox"><div class="thumb"><figure-inline typeof="mw:Image"><a><img resource="Foo" src="' + ve.ce.minImgDataUri + '"/></a></div></div><div class="gallerytext"></div></li></ul>'
}, },
'mwGalleryImage (empty caption in DOM)': { '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;"><figure-inline typeof="mw:Image"><a href="Foo"><img resource="Foo" src="' + ve.ce.minImgDataUri + '" height="120" width="120"/></a></figure-inline></div><div class="gallerytext"></div></li></ul>', 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;"><figure-inline typeof="mw:Image"><a href="Foo"><img resource="Foo" src="' + ve.ce.minImgDataUri + '" height="120" width="120"/></a></figure-inline></div><div class="gallerytext"></div></li></ul>',
@ -889,8 +889,8 @@ ve.dm.mwExample.domToDataCases = {
{ type: 'internalList' }, { type: 'internalList' },
{ type: '/internalList' } { type: '/internalList' }
], ],
normalizedBody: '<ul class="gallery" typeof="mw:Extension/gallery" data-mw=\'{"attrs":{"mode":"packed"},"body":{"extsrc":""},"name":"gallery"}\'><li class="gallerybox" style="width: 122px;"><div><div class="thumb"><div><a><img resource="Foo" src="' + ve.ce.minImgDataUri + '"/></a></div></div></div><div class="gallerytext"></div></li></ul>', normalizedBody: '<ul class="gallery" typeof="mw:Extension/gallery" data-mw=\'{"attrs":{"mode":"packed"},"body":{"extsrc":""},"name":"gallery"}\'><li class="gallerybox" style="width: 122px;"><div class="thumb"><figure-inline typeof="mw:Image"><a><img resource="Foo" src="' + ve.ce.minImgDataUri + '"/></a></div></div><div class="gallerytext"></div></li></ul>',
fromDataBody: '<ul class="gallery" typeof="mw:Extension/gallery" data-mw=\'{"attrs":{"mode":"packed"},"body":{"extsrc":""},"name":"gallery"}\'><li class="gallerybox"><div><div class="thumb"><div><a><img resource="Foo" src="' + ve.ce.minImgDataUri + '"/></a></div></div></div><div class="gallerytext"></div></li></ul>' fromDataBody: '<ul class="gallery" typeof="mw:Extension/gallery" data-mw=\'{"attrs":{"mode":"packed"},"body":{"extsrc":""},"name":"gallery"}\'><li class="gallerybox"><div class="thumb"><figure-inline typeof="mw:Image"><a><img resource="Foo" src="' + ve.ce.minImgDataUri + '"/></a></div></div><div class="gallerytext"></div></li></ul>'
}, },
'mwGalleryImage (caption with content in DOM)': { 'mwGalleryImage (caption with content 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;"><figure-inline typeof="mw:Image"><a href="Foo"><img resource="Foo" src="' + ve.ce.minImgDataUri + '" height="120" width="120"/></a></figure-inline></div><div class="gallerytext">Caption</div></li></ul>', 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;"><figure-inline typeof="mw:Image"><a href="Foo"><img resource="Foo" src="' + ve.ce.minImgDataUri + '" height="120" width="120"/></a></figure-inline></div><div class="gallerytext">Caption</div></li></ul>',
@ -935,8 +935,8 @@ ve.dm.mwExample.domToDataCases = {
{ type: 'internalList' }, { type: 'internalList' },
{ type: '/internalList' } { type: '/internalList' }
], ],
normalizedBody: '<ul class="gallery" typeof="mw:Extension/gallery" data-mw=\'{"attrs":{"mode":"packed"},"body":{"extsrc":""},"name":"gallery"}\'><li class="gallerybox" style="width: 122px;"><div><div class="thumb"><div><a><img resource="Foo" src="' + ve.ce.minImgDataUri + '"/></a></div></div></div><div class="gallerytext">Caption</div></li></ul>', normalizedBody: '<ul class="gallery" typeof="mw:Extension/gallery" data-mw=\'{"attrs":{"mode":"packed"},"body":{"extsrc":""},"name":"gallery"}\'><li class="gallerybox" style="width: 122px;"><div class="thumb"><figure-inline typeof="mw:Image"><a><img resource="Foo" src="' + ve.ce.minImgDataUri + '"/></a></div></div><div class="gallerytext">Caption</div></li></ul>',
fromDataBody: '<ul class="gallery" typeof="mw:Extension/gallery" data-mw=\'{"attrs":{"mode":"packed"},"body":{"extsrc":""},"name":"gallery"}\'><li class="gallerybox"><div><div class="thumb"><div><a><img resource="Foo" src="' + ve.ce.minImgDataUri + '"/></a></div></div></div><div class="gallerytext">Caption</div></li></ul>' fromDataBody: '<ul class="gallery" typeof="mw:Extension/gallery" data-mw=\'{"attrs":{"mode":"packed"},"body":{"extsrc":""},"name":"gallery"}\'><li class="gallerybox"><div class="thumb"><figure-inline typeof="mw:Image"><a><img resource="Foo" src="' + ve.ce.minImgDataUri + '"/></a></div></div><div class="gallerytext">Caption</div></li></ul>'
}, },
'mwGalleryImage (no caption in model)': { 'mwGalleryImage (no caption in model)': {
data: [ data: [
@ -970,7 +970,7 @@ ve.dm.mwExample.domToDataCases = {
{ type: 'internalList' }, { type: 'internalList' },
{ type: '/internalList' } { type: '/internalList' }
], ],
fromDataBody: '<ul class="gallery" typeof="mw:Extension/gallery" data-mw=\'{"attrs":{"mode":"packed"},"body":{"extsrc":""},"name":"gallery"}\'><li class="gallerybox"><div><div class="thumb"><div><a><img resource="Foo" src="' + ve.ce.minImgDataUri + '"/></a></div></div></div></li></ul>' fromDataBody: '<ul class="gallery" typeof="mw:Extension/gallery" data-mw=\'{"attrs":{"mode":"packed"},"body":{"extsrc":""},"name":"gallery"}\'><li class="gallerybox"><div class="thumb"><figure-inline typeof="mw:Image"><a><img resource="Foo" src="' + ve.ce.minImgDataUri + '"/></a></div></div></li></ul>'
}, },
'mwGalleryImage (empty caption in model)': { 'mwGalleryImage (empty caption in model)': {
data: [ data: [
@ -1006,7 +1006,7 @@ ve.dm.mwExample.domToDataCases = {
{ type: 'internalList' }, { type: 'internalList' },
{ type: '/internalList' } { type: '/internalList' }
], ],
fromDataBody: '<ul class="gallery" typeof="mw:Extension/gallery" data-mw=\'{"attrs":{"mode":"packed"},"body":{"extsrc":""},"name":"gallery"}\'><li class="gallerybox"><div><div class="thumb"><div><a><img resource="Foo" src="' + ve.ce.minImgDataUri + '"/></a></div></div></div><div class="gallerytext"></div></li></ul>' fromDataBody: '<ul class="gallery" typeof="mw:Extension/gallery" data-mw=\'{"attrs":{"mode":"packed"},"body":{"extsrc":""},"name":"gallery"}\'><li class="gallerybox"><div class="thumb"><figure-inline typeof="mw:Image"><a><img resource="Foo" src="' + ve.ce.minImgDataUri + '"/></a></div></div><div class="gallerytext"></div></li></ul>'
}, },
'mwBlockImage (no caption in DOM)': { 'mwBlockImage (no caption in DOM)': {
body: '<figure typeof="mw:Image/Thumb"><a href="Foo"><img resource="Foo" src="' + ve.ce.minImgDataUri + '" height="300" width="300"/></a></figure>', body: '<figure typeof="mw:Image/Thumb"><a href="Foo"><img resource="Foo" src="' + ve.ce.minImgDataUri + '" height="300" width="300"/></a></figure>',