mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-09-25 03:08:42 +00:00
Merge "Change gallery structure to match Parsoid"
This commit is contained in:
jenkins-bot
Gerrit Code Review
commit
582b99781c
|
|
@ -18,7 +18,7 @@
|
|||
ve.ce.MWGalleryImageNode = function VeCeMWGalleryImageNode( model ) {
|
||||
var attributes, galleryMwAttrs, mode, imagePadding,
|
||||
outerDivWidth, imageHeight, innerDivHeight, innerDivMargin, innerDivWidth,
|
||||
$outerDiv, $thumbDiv, $innerDiv, $a, $img,
|
||||
$thumbDiv, $innerDiv, $a, $img,
|
||||
defaults = mw.config.get( 'wgVisualEditorConfig' ).galleryOptions;
|
||||
|
||||
// Parent constructor
|
||||
|
|
@ -26,12 +26,11 @@ ve.ce.MWGalleryImageNode = function VeCeMWGalleryImageNode( model ) {
|
|||
|
||||
// DOM hierarchy for MWGalleryImageNode:
|
||||
// <li> this.$element (gallerybox)
|
||||
// <div> outerDiv
|
||||
// <div> thumbDiv
|
||||
// <div> innerDiv
|
||||
// <a> a
|
||||
// <img> img
|
||||
// <a> filenameA (galleryfilename)
|
||||
// <div> thumbDiv
|
||||
// <figure-inline> innerDiv
|
||||
// <a> a
|
||||
// <img> img
|
||||
// <a> filenameA (galleryfilename)
|
||||
// <figcaption> ve.ce.MWGalleryImageCaptionNode
|
||||
|
||||
attributes = model.getAttributes();
|
||||
|
|
@ -64,13 +63,11 @@ ve.ce.MWGalleryImageNode = function VeCeMWGalleryImageNode( model ) {
|
|||
this.$element
|
||||
.addClass( 'gallerybox' )
|
||||
.css( 'width', outerDivWidth + 'px' );
|
||||
$outerDiv = $( '<div>' )
|
||||
.css( 'width', outerDivWidth + 'px' );
|
||||
$thumbDiv = $( '<div>' )
|
||||
.addClass( 'thumb' )
|
||||
.css( 'width', innerDivWidth + 'px' )
|
||||
.css( 'height', innerDivHeight + 'px' );
|
||||
$innerDiv = $( '<div>' )
|
||||
$innerDiv = $( '<figure-inline>' )
|
||||
.css( 'margin', innerDivMargin );
|
||||
$a = $( '<a>' )
|
||||
.addClass( 'image' );
|
||||
|
|
@ -86,16 +83,14 @@ ve.ce.MWGalleryImageNode = function VeCeMWGalleryImageNode( model ) {
|
|||
.toggleClass( 'oo-ui-element-hidden', galleryMwAttrs.showfilename !== 'yes' );
|
||||
|
||||
this.$element.prepend(
|
||||
$outerDiv.append(
|
||||
$thumbDiv.append(
|
||||
$innerDiv.append(
|
||||
$a.append(
|
||||
$img
|
||||
)
|
||||
$thumbDiv.append(
|
||||
$innerDiv.append(
|
||||
$a.append(
|
||||
$img
|
||||
)
|
||||
),
|
||||
this.$filenameA
|
||||
)
|
||||
)
|
||||
),
|
||||
this.$filenameA
|
||||
);
|
||||
|
||||
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 () {
|
||||
// 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,
|
||||
// which is always inserted at the end.
|
||||
var domNode = this.$element.last()[ 0 ];
|
||||
|
|
|
|||
|
|
@ -88,23 +88,22 @@ ve.dm.MWGalleryImageNode.static.toDataElement = function ( domElements, converte
|
|||
|
||||
ve.dm.MWGalleryImageNode.static.toDomElements = function ( data, doc ) {
|
||||
// ImageNode:
|
||||
// <li> li (gallerybox)
|
||||
// <div> outerDiv
|
||||
// <li> li (gallerybox)
|
||||
// <div> thumbDiv
|
||||
// <div> innerDiv
|
||||
// <figure-inline> innerDiv
|
||||
// <a> a
|
||||
// <img> img
|
||||
var model = data,
|
||||
li = doc.createElement( 'li' ),
|
||||
outerDiv = doc.createElement( 'div' ),
|
||||
thumbDiv = doc.createElement( 'div' ),
|
||||
innerDiv = doc.createElement( 'div' ),
|
||||
innerDiv = doc.createElement( 'figure-inline' ),
|
||||
a = doc.createElement( 'a' ),
|
||||
img = doc.createElement( 'img' ),
|
||||
alt = model.attributes.altText;
|
||||
|
||||
li.classList.add( 'gallerybox' );
|
||||
thumbDiv.classList.add( 'thumb' );
|
||||
innerDiv.setAttribute( 'typeof', 'mw:Image' );
|
||||
|
||||
// TODO: Support editing the link
|
||||
// a.setAttribute( 'href', model.attributes.src );
|
||||
|
|
@ -118,8 +117,7 @@ ve.dm.MWGalleryImageNode.static.toDomElements = function ( data, doc ) {
|
|||
a.appendChild( img );
|
||||
innerDiv.appendChild( a );
|
||||
thumbDiv.appendChild( innerDiv );
|
||||
outerDiv.appendChild( thumbDiv );
|
||||
li.appendChild( outerDiv );
|
||||
li.appendChild( thumbDiv );
|
||||
|
||||
return [ li ];
|
||||
};
|
||||
|
|
|
|||
|
|
@ -844,8 +844,8 @@ ve.dm.mwExample.domToDataCases = {
|
|||
{ 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>',
|
||||
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>'
|
||||
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 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)': {
|
||||
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' }
|
||||
],
|
||||
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>',
|
||||
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>'
|
||||
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 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)': {
|
||||
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' }
|
||||
],
|
||||
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>',
|
||||
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>'
|
||||
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 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)': {
|
||||
data: [
|
||||
|
|
@ -970,7 +970,7 @@ ve.dm.mwExample.domToDataCases = {
|
|||
{ 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)': {
|
||||
data: [
|
||||
|
|
@ -1006,7 +1006,7 @@ ve.dm.mwExample.domToDataCases = {
|
|||
{ 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)': {
|
||||
body: '<figure typeof="mw:Image/Thumb"><a href="Foo"><img resource="Foo" src="' + ve.ce.minImgDataUri + '" height="300" width="300"/></a></figure>',
|
||||
|
|
|
|||
Loading…
Reference in a new issue