mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-11-15 10:35:48 +00:00
94c4d619a7
The need for something like this was anticipated in I2bf43c7e83283f43e047229eb53c244918fcbb0c. As of version 2.5.0 of Parsoid's output, if alternate text is missing for an image but a caption is present and image isn't displaying the caption (ie. it isn't a thumb or frame), then the text content of the caption will be set as the alt attribute. Parsoid will then drop the alt attribute when serializing if it matches the caption text, since it's unnecessary. However, if the caption is modified and the alt text isn't, the alt will be serialized. This is likely to be unexpected to editor. They may have missed that the both the caption and alt are populated in VE and only edited one place. Since all of the above is happening only for images where the caption isn't visible, it doesn't appear to be a much used feature since, at least for inline images, the experience of caption editing was already less than optimal. However, because of a quirk in how galleries are rendered in Parsoid, this affects gallery caption editing, which is visible and presumably used more often. See T268250 for a discussion on an improved gallery structure. But for now, gallery images are effectively inline and set the alternate text, thus subject to the above. Here we add a checkbox so that the default is to ignore the alt if it's the same as the caption. And only make use of it if it differed originally or was explicitly unchecked to modify. Bug: T311677 Change-Id: Idf297d8a98995971c5835b0cea56c3317a3626e2
134 lines
3.4 KiB
JavaScript
134 lines
3.4 KiB
JavaScript
/*!
|
|
* VisualEditor user interface MWGalleryItemWidget class.
|
|
*
|
|
* @copyright 2011-2020 VisualEditor Team and others; see AUTHORS.txt
|
|
* @license The MIT License (MIT); see LICENSE.txt
|
|
*/
|
|
|
|
/**
|
|
* Draggable item widget for the MWGalleryGroupWidget
|
|
*
|
|
* @class
|
|
* @extends OO.ui.Widget
|
|
* @mixins OO.ui.mixin.DraggableElement
|
|
*
|
|
* @constructor
|
|
* @param {Object} imageInfo Image information object
|
|
* @param {Object} [config] Configuration options
|
|
* @cfg {boolean} [isMobile=false]
|
|
* @cfg {boolean} [draggable=true]
|
|
*/
|
|
ve.ui.MWGalleryItemWidget = function VeUiMWGalleryItemWidget( imageInfo, config ) {
|
|
this.resource = imageInfo.resource;
|
|
this.altText = imageInfo.altText || '';
|
|
this.altTextSame = imageInfo.altTextSame;
|
|
// Keep the original value which may be null
|
|
this.originalAltText = imageInfo.altText;
|
|
this.src = imageInfo.src;
|
|
this.height = imageInfo.height;
|
|
this.width = imageInfo.width;
|
|
this.thumbUrl = imageInfo.thumbUrl;
|
|
this.captionDocument = imageInfo.captionDocument;
|
|
this.highlighted = false;
|
|
this.tagName = imageInfo.tagName;
|
|
this.isError = imageInfo.isError;
|
|
|
|
// Configuration initialization
|
|
config = config || {};
|
|
|
|
// Parent constructor
|
|
ve.ui.MWGalleryItemWidget.super.call( this, config );
|
|
|
|
this.$element
|
|
.addClass( 've-ui-mwGalleryDialog-image-container' ) // TODO: put in new CSS file?
|
|
.addClass( config.isMobile ?
|
|
've-ui-mwGalleryDialog-image-container-mobile' :
|
|
've-ui-mwGalleryDialog-image-container-desktop'
|
|
)
|
|
.css( 'background-image', 'url(' + this.thumbUrl + ')' );
|
|
|
|
// Mixin constructors
|
|
OO.ui.mixin.DraggableElement.call( this, ve.extendObject( { $handle: this.$element }, config ) );
|
|
OO.ui.mixin.TabIndexedElement.call( this, config );
|
|
|
|
this.$element.on( {
|
|
click: this.onItemClick.bind( this ),
|
|
keypress: this.onItemKeyPress.bind( this )
|
|
} );
|
|
};
|
|
|
|
/* Inheritance */
|
|
|
|
OO.inheritClass( ve.ui.MWGalleryItemWidget, OO.ui.Widget );
|
|
|
|
OO.mixinClass( ve.ui.MWGalleryItemWidget, OO.ui.mixin.DraggableElement );
|
|
OO.mixinClass( ve.ui.MWGalleryItemWidget, OO.ui.mixin.TabIndexedElement );
|
|
|
|
/* Events */
|
|
|
|
/**
|
|
* @event edit
|
|
*/
|
|
|
|
/* Methods */
|
|
|
|
/**
|
|
* Handle clicking on an item
|
|
*
|
|
* @fires edit
|
|
*/
|
|
ve.ui.MWGalleryItemWidget.prototype.onItemClick = function () {
|
|
this.emit( 'edit', this );
|
|
};
|
|
|
|
/**
|
|
* Handle key press events
|
|
*
|
|
* @param {jQuery.Event} e Key press event
|
|
* @return {boolean}
|
|
* @fires edit
|
|
*/
|
|
ve.ui.MWGalleryItemWidget.prototype.onItemKeyPress = function ( e ) {
|
|
if ( e.which === OO.ui.Keys.ENTER ) {
|
|
this.emit( 'edit', this );
|
|
return false;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Set the captionDocument property
|
|
*
|
|
* @param {ve.dm.Document} captionDocument The caption document
|
|
*/
|
|
ve.ui.MWGalleryItemWidget.prototype.setCaptionDocument = function ( captionDocument ) {
|
|
this.captionDocument = captionDocument;
|
|
};
|
|
|
|
/**
|
|
* Set the altText property
|
|
*
|
|
* @param {string} altText The altText
|
|
*/
|
|
ve.ui.MWGalleryItemWidget.prototype.setAltText = function ( altText ) {
|
|
this.altText = altText;
|
|
};
|
|
|
|
/**
|
|
* Set the altTextSame property
|
|
*
|
|
* @param {boolean} same
|
|
*/
|
|
ve.ui.MWGalleryItemWidget.prototype.setAltTextSame = function ( same ) {
|
|
this.altTextSame = same;
|
|
};
|
|
|
|
/**
|
|
* Toggle highlighted class
|
|
*
|
|
* @param {boolean} highlighted The item is highlighted
|
|
*/
|
|
ve.ui.MWGalleryItemWidget.prototype.toggleHighlighted = function ( highlighted ) {
|
|
highlighted = highlighted !== undefined ? highlighted : !this.highlighted;
|
|
this.$element.toggleClass( 've-ui-mwGalleryDialog-image-container-highlighted', !!highlighted );
|
|
};
|