Merge "ve.ce.MWGalleryNode: Fix how 'mode', 'class', 'style' changes are applied"

This commit is contained in:
jenkins-bot 2020-02-04 20:03:29 +00:00 committed by Gerrit Code Review
commit 0896917030

View file

@ -33,8 +33,10 @@ ve.ce.MWGalleryNode = function VeCeMWGalleryNode() {
// Events
this.model.connect( this, { update: 'updateInvisibleIcon' } );
this.model.connect( this, { update: 'onUpdate' } );
this.model.connect( this, { attributeChange: 'onAttributeChange' } );
// Initialization
this.$element.addClass( 'gallery' );
this.onUpdate();
};
@ -66,10 +68,9 @@ ve.ce.MWGalleryNode.prototype.onUpdate = function () {
defaults = mw.config.get( 'wgVisualEditorConfig' ).galleryOptions;
mode = mwAttrs.mode || defaults.mode;
this.$element
.attr( 'class', mwAttrs.class )
.attr( 'style', mwAttrs.style )
.addClass( 'gallery mw-gallery-' + mode );
// `.attr( …, undefined )` does nothing - it's required to use `null` to remove an attribute.
// (This also clears the 'max-width', set below, if it's not needed.)
this.$element.attr( 'style', mwAttrs.style || null );
if ( mwAttrs.perrow && ( mode === 'traditional' || mode === 'nolines' ) ) {
// Magic 30 and 8 matches the code in ve.ce.MWGalleryImageNode
@ -79,6 +80,35 @@ ve.ce.MWGalleryNode.prototype.onUpdate = function () {
}
};
/**
* Handle attribute changes to keep the live HTML element updated.
*
* @param {string} key Attribute name
* @param {Mixed} from Old value
* @param {Mixed} to New value
*/
ve.ce.MWGalleryNode.prototype.onAttributeChange = function ( key, from, to ) {
var defaults = mw.config.get( 'wgVisualEditorConfig' ).galleryOptions;
if ( key !== 'mw' ) {
return;
}
if ( from.attrs.class !== to.attrs.class ) {
// We can't overwrite the whole 'class' HTML attribute, because it also contains a class
// generated from the 'mode' MW attribute, and VE internal classes like 've-ce-focusableNode'
this.$element
.removeClass( from.attrs.class )
.addClass( to.attrs.class );
}
if ( from.attrs.mode !== to.attrs.mode ) {
this.$element
.removeClass( 'mw-gallery-' + ( from.attrs.mode || defaults.mode ) )
.addClass( 'mw-gallery-' + ( to.attrs.mode || defaults.mode ) );
}
};
/* Registration */
ve.ce.nodeFactory.register( ve.ce.MWGalleryNode );