Sn1per has uploaded a new change for review.
https://gerrit.wikimedia.org/r/182145
Change subject: Show alt-text in export dialog and for lightbox image
......................................................................
Show alt-text in export dialog and for lightbox image
Pass alt parameter from mmv.bootstrap.js to mmv.js and
set it as a parameter on the displayed lightbox image.
Include the alt text in the embed text.
Bug: T66519
Bug: T75923
Change-Id: I29503eb582ac2bc8cf89f737a3bcb787b660d918
---
M resources/mmv/mmv.EmbedFileFormatter.js
M resources/mmv/mmv.bootstrap.js
M resources/mmv/mmv.js
M resources/mmv/mmv.lightboximage.js
M resources/mmv/mmv.lightboxinterface.js
M resources/mmv/model/mmv.model.EmbedFileInfo.js
M resources/mmv/ui/mmv.ui.reuse.dialog.js
M resources/mmv/ui/mmv.ui.reuse.embed.js
M tests/qunit/mmv/mmv.bootstrap.test.js
M tests/qunit/mmv/model/mmv.model.EmbedFileInfo.test.js
10 files changed, 54 insertions(+), 29 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MultimediaViewer
refs/changes/45/182145/1
diff --git a/resources/mmv/mmv.EmbedFileFormatter.js
b/resources/mmv/mmv.EmbedFileFormatter.js
index 849efdd..e76214f 100644
--- a/resources/mmv/mmv.EmbedFileFormatter.js
+++ b/resources/mmv/mmv.EmbedFileFormatter.js
@@ -52,16 +52,18 @@
* @param {mw.Title} title
* @param {number} [width]
* @param {string} [caption]
+ * @param {string} [alt]
* @return {string}
*/
- EFFP.getThumbnailWikitext = function ( title, width, caption ) {
+ EFFP.getThumbnailWikitext = function ( title, width, caption, alt ) {
var widthSection, captionSection;
widthSection = width ? '|' + width + 'px' : '';
captionSection = caption ? '|' + caption : '';
+ altSection = alt ? '|alt=' + alt : '';
- return '[[File:' + title.getMainText() + widthSection +
'|thumb' + captionSection + ']]';
+ return '[[File:' + title.getMainText() + widthSection +
'|thumb' + captionSection + altSection + ']]';
};
/**
@@ -71,7 +73,7 @@
* @return {string}
*/
EFFP.getThumbnailWikitextFromEmbedFileInfo = function ( info, width ) {
- return this.getThumbnailWikitext( info.imageInfo.title, width,
this.getCaption( info ) );
+ return this.getThumbnailWikitext( info.imageInfo.title, width,
this.getCaption( info ), info.alt );
};
/**
@@ -221,7 +223,7 @@
.append(
$( '<img>' )
.attr( 'src', imgUrl )
- .attr( 'alt',
info.imageInfo.title.getMainText() )
+ .attr( 'alt', info.alt
? info.alt : info.imageInfo.title.getMainText() )
.attr( 'height', height
)
.attr( 'width', width )
),
diff --git a/resources/mmv/mmv.bootstrap.js b/resources/mmv/mmv.bootstrap.js
index 4efd48d..9963b66 100644
--- a/resources/mmv/mmv.bootstrap.js
+++ b/resources/mmv/mmv.bootstrap.js
@@ -184,7 +184,8 @@
$thumbContain = $link.closest( '.thumb' ),
$enlarge = $thumbContain.find( '.magnify a' ),
title = mw.Title.newFromImg( $thumb ),
- link = $link.prop( 'href' );
+ link = $link.prop( 'href' )
+ alt = $thumb.attr( 'alt' );
if ( !bs.validExtensions[ title.getExtension().toLowerCase() ]
) {
return;
@@ -223,6 +224,7 @@
$thumb : $thumb,
title : title,
link : link,
+ alt : alt,
caption : this.findCaption( $thumbContain, $link ) } );
$link.add( $enlarge ).click( function ( e ) {
diff --git a/resources/mmv/mmv.js b/resources/mmv/mmv.js
index 00ed4af..cc3e449 100644
--- a/resources/mmv/mmv.js
+++ b/resources/mmv/mmv.js
@@ -155,7 +155,8 @@
thumb.title,
i,
thumb.thumb,
- thumb.caption
+ thumb.caption,
+ thumb.alt
);
thumb.extraStatsDeferred = $.Deferred();
@@ -171,10 +172,11 @@
* @param {number} index Which number file this is
* @param {HTMLImageElement} thumb The thumbnail that represents this
image on the page
* @param {string} [caption] The caption, if any.
+ * @param {string} [alt] The alt text of the image
* @returns {mw.mmv.LightboxImage}
*/
- MMVP.createNewImage = function ( fileLink, filePageLink, fileTitle,
index, thumb, caption ) {
- var thisImage = new mw.mmv.LightboxImage( fileLink,
filePageLink, fileTitle, index, thumb, caption ),
+ MMVP.createNewImage = function ( fileLink, filePageLink, fileTitle,
index, thumb, caption, alt ) {
+ var thisImage = new mw.mmv.LightboxImage( fileLink,
filePageLink, fileTitle, index, thumb, caption, alt ),
$thumb = $( thumb );
thisImage.filePageLink = filePageLink;
@@ -314,6 +316,10 @@
} );
} );
}
+
+ if ( imageElement ) {
+ imageElement.attr( 'alt', image.alt );
+ }
viewer.displayRealThumbnail( thumbnail, imageElement,
imageWidths, $.now() - start );
} ).fail( function ( error ) {
viewer.ui.canvas.showError( error );
@@ -333,7 +339,7 @@
viewer.ui.panel.setImageInfo( image, imageInfo,
repoInfo, userInfo );
// File reuse steals a bunch of information from the
DOM, so do it last
- viewer.ui.setFileReuseData( imageInfo, repoInfo,
image.caption );
+ viewer.ui.setFileReuseData( imageInfo, repoInfo,
image.caption, image.alt );
} ).fail( function ( error ) {
extraStatsDeferred.reject();
diff --git a/resources/mmv/mmv.lightboximage.js
b/resources/mmv/mmv.lightboximage.js
index ddb1418..778679e 100644
--- a/resources/mmv/mmv.lightboximage.js
+++ b/resources/mmv/mmv.lightboximage.js
@@ -28,7 +28,7 @@
* @param {HTMLImageElement} thumb The thumbnail that represents this
image on the page
* @param {string} [caption] The caption, if any.
*/
- function LightboxImage( fileLink, filePageLink, fileTitle, index,
thumb, caption ) {
+ function LightboxImage( fileLink, filePageLink, fileTitle, index,
thumb, caption, alt ) {
/** @property {string} Link to the file - generally a thumb URL
*/
this.src = fileLink;
@@ -47,6 +47,9 @@
/** @property {string} caption The caption of the image, if any
*/
this.caption = caption;
+ /** @property {string} alt The alt text of the image */
+ this.alt = alt;
+
/** @property {number|undefined} originalWidth Width of the
full-sized file (read from HTML data attribute, might be missing) */
this.originalWidth = undefined;
diff --git a/resources/mmv/mmv.lightboxinterface.js
b/resources/mmv/mmv.lightboxinterface.js
index 0adc144..f7a0642 100644
--- a/resources/mmv/mmv.lightboxinterface.js
+++ b/resources/mmv/mmv.lightboxinterface.js
@@ -110,9 +110,10 @@
* @param {mw.mmv.model.Image} image
* @param {mw.mmv.model.Repo} repo
* @param {string} caption
+ * @param {string} alt
*/
- LIP.setFileReuseData = function ( image, repo, caption ) {
- this.fileReuse.set( image, repo, caption );
+ LIP.setFileReuseData = function ( image, repo, caption, alt ) {
+ this.fileReuse.set( image, repo, caption, alt );
this.downloadDialog.set( image, repo );
};
diff --git a/resources/mmv/model/mmv.model.EmbedFileInfo.js
b/resources/mmv/model/mmv.model.EmbedFileInfo.js
index ef6afbb..ad07189 100644
--- a/resources/mmv/model/mmv.model.EmbedFileInfo.js
+++ b/resources/mmv/model/mmv.model.EmbedFileInfo.js
@@ -23,11 +23,13 @@
* @param {mw.mmv.model.Image} imageInfo
* @param {mw.mmv.model.Repo} repoInfo
* @param {string} [caption]
+ * @param {string} [alt]
*/
function EmbedFileInfo(
imageInfo,
repoInfo,
- caption
+ caption,
+ alt
) {
if ( !imageInfo || !repoInfo ) {
throw 'imageInfo and repoInfo are required and must
have a value';
@@ -41,6 +43,9 @@
/** @property {Object} [caption] Image caption, if any */
this.caption = caption;
+
+ /** @property {string} [alt] Alt text for image */
+ this.alt = alt;
}
mw.mmv.model.EmbedFileInfo = EmbedFileInfo;
diff --git a/resources/mmv/ui/mmv.ui.reuse.dialog.js
b/resources/mmv/ui/mmv.ui.reuse.dialog.js
index a257693..4c684fb 100644
--- a/resources/mmv/ui/mmv.ui.reuse.dialog.js
+++ b/resources/mmv/ui/mmv.ui.reuse.dialog.js
@@ -195,15 +195,16 @@
* @param {mw.mmv.model.Image} image
* @param {mw.mmv.model.Repo} repo
* @param {string} caption
+ * @param {string} alt
*/
- DP.set = function ( image, repo, caption ) {
+ DP.set = function ( image, repo, caption, alt ) {
if ( this.tabs !== null ) {
this.tabs.share.set( image );
- this.tabs.embed.set( image, repo, caption );
+ this.tabs.embed.set( image, repo, caption, alt );
} else {
this.tabsSetValues = {
share : [ image ],
- embed : [ image, repo, caption ]
+ embed : [ image, repo, caption, alt ]
};
}
};
diff --git a/resources/mmv/ui/mmv.ui.reuse.embed.js
b/resources/mmv/ui/mmv.ui.reuse.embed.js
index 75bddc8..5679142 100644
--- a/resources/mmv/ui/mmv.ui.reuse.embed.js
+++ b/resources/mmv/ui/mmv.ui.reuse.embed.js
@@ -357,8 +357,9 @@
* @param {mw.mmv.model.Thumbnail} thumbnail (can be just an empty
object)
* @param {number} width New width to set
* @param {number} height New height to set
+ * @param {string} alt Alt text to set
*/
- EP.updateEmbedHtml = function ( thumbnail, width, height ) {
+ EP.updateEmbedHtml = function ( thumbnail, width, height, alt ) {
var src;
if ( !this.embedFileInfo ) {
@@ -382,7 +383,7 @@
* Assumes that the set method has already been called.
* @param {number} width
*/
- EP.updateEmbedWikitext = function ( width ) {
+ EP.updateEmbedWikitext = function ( width, alt ) {
if ( !this.embedFileInfo ) {
return;
}
@@ -424,8 +425,9 @@
* @param {mw.mmv.model.Image} image
* @param {mw.mmv.model.Repo} repo
* @param {string} caption
+ * @param {string} alt
*/
- EP.set = function ( image, repo, caption ) {
+ EP.set = function ( image, repo, caption, alt ) {
var embed = this,
htmlSizeSwitch = this.embedSizeSwitchHtml.getMenu(),
htmlSizeOptions = htmlSizeSwitch.getItems(),
@@ -433,7 +435,7 @@
wikitextSizeOptions = wikitextSizeSwitch.getItems(),
sizes = this.getSizeOptions( image.width, image.height
);
- this.embedFileInfo = new mw.mmv.model.EmbedFileInfo( image,
repo, caption );
+ this.embedFileInfo = new mw.mmv.model.EmbedFileInfo( image,
repo, caption, alt );
this.utils.updateMenuOptions( sizes.html, htmlSizeOptions );
this.utils.updateMenuOptions( sizes.wikitext,
wikitextSizeOptions );
@@ -444,7 +446,7 @@
this.utils.getThumbnailUrlPromise(
this.LARGE_IMAGE_WIDTH_THRESHOLD )
.done( function ( thumbnail ) {
- embed.updateEmbedHtml( thumbnail );
+ embed.updateEmbedHtml( thumbnail, alt );
embed.select();
} );
};
diff --git a/tests/qunit/mmv/mmv.bootstrap.test.js
b/tests/qunit/mmv/mmv.bootstrap.test.js
index 2be14f9..f573b77 100644
--- a/tests/qunit/mmv/mmv.bootstrap.test.js
+++ b/tests/qunit/mmv/mmv.bootstrap.test.js
@@ -20,12 +20,12 @@
return div;
}
- function createThumb( imageSrc, caption ) {
+ function createThumb( imageSrc, caption, alt ) {
var div = $( '<div>' ).addClass( 'thumb' ).appendTo(
'#qunit-fixture' ),
link = $( '<a>' ).addClass( 'image' ).appendTo( div );
$( '<div>' ).addClass( 'thumbcaption' ).appendTo( div ).text(
caption );
- $( '<img>' ).attr( 'src', ( imageSrc || 'thumb.jpg' )
).appendTo( link );
+ $( '<img>' ).attr( 'src', ( imageSrc || 'thumb.jpg' ) ).attr(
'alt', alt ).appendTo( link );
return div;
}
@@ -271,7 +271,7 @@
$link.trigger( { type : 'click', which : 1 } );
} );
- QUnit.test( 'Validate new LightboxImage object has sane constructor
parameters', 7, function ( assert ) {
+ QUnit.test( 'Validate new LightboxImage object has sane constructor
parameters', 8, function ( assert ) {
var bootstrap,
$div,
$link,
@@ -280,18 +280,19 @@
imgSrc = '/' + fname + '.jpg/300px-' + fname + '.jpg',
imgRegex = new RegExp( imgSrc + '$' );
- $div = createThumb( imgSrc, 'Blah blah' );
+ $div = createThumb( imgSrc, 'Blah blah', 'meow');
$link = $div.find( 'a.image' );
viewer.loadImage = $.noop;
- viewer.createNewImage = function ( fileLink, filePageLink,
fileTitle, index, thumb, caption ) {
+ viewer.createNewImage = function ( fileLink, filePageLink,
fileTitle, index, thumb, caption, alt ) {
assert.ok( fileLink.match( imgRegex ), 'Thumbnail URL
used in creating new image object' );
assert.strictEqual( filePageLink, '', 'File page link
is sane when creating new image object' );
assert.strictEqual( fileTitle.title, fname, 'Filename
is correct when passed into new image constructor' );
assert.strictEqual( index, 0, 'The only image we
created in the gallery is set at index 0 in the images array' );
- assert.strictEqual( thumb.outerHTML, '<img src="' +
imgSrc + '">', 'The image element passed in is the thumbnail we want.' );
+ assert.strictEqual( thumb.outerHTML, '<img src="' +
imgSrc + '" alt="meow">', 'The image element passed in is the thumbnail we
want.' );
assert.strictEqual( caption, 'Blah blah', 'The caption
passed in is correct' );
+ assert.strictEqual( alt, 'meow', 'The alt text passed
in is correct' );
};
// Create a new bootstrap object to trigger the DOM scan, etc.
diff --git a/tests/qunit/mmv/model/mmv.model.EmbedFileInfo.test.js
b/tests/qunit/mmv/model/mmv.model.EmbedFileInfo.test.js
index 7fa5bfd..bcf160c 100644
--- a/tests/qunit/mmv/model/mmv.model.EmbedFileInfo.test.js
+++ b/tests/qunit/mmv/model/mmv.model.EmbedFileInfo.test.js
@@ -18,15 +18,17 @@
( function( mw ) {
QUnit.module( 'mmv.model.EmbedFileInfo', QUnit.newMwEnvironment() );
- QUnit.test( 'EmbedFileInfo constructor sanity check', 4, function (
assert ) {
+ QUnit.test( 'EmbedFileInfo constructor sanity check', 5, function (
assert ) {
var imageInfo = {},
repoInfo = {},
caption = 'Foo',
- embedFileInfo = new mw.mmv.model.EmbedFileInfo(
imageInfo, repoInfo, caption );
+ alt = 'Bar',
+ embedFileInfo = new mw.mmv.model.EmbedFileInfo(
imageInfo, repoInfo, caption, alt );
assert.strictEqual( embedFileInfo.imageInfo, imageInfo,
'ImageInfo is set correctly' );
assert.strictEqual( embedFileInfo.repoInfo, repoInfo,
'ImageInfo is set correctly' );
assert.strictEqual( embedFileInfo.caption, caption, 'Caption is
set correctly' );
+ assert.strictEqual( embedFileInfo.alt, alt, 'Alt text is set
correctly' );
try {
embedFileInfo = new mw.mmv.model.EmbedFileInfo( {} );
--
To view, visit https://gerrit.wikimedia.org/r/182145
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I29503eb582ac2bc8cf89f737a3bcb787b660d918
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MultimediaViewer
Gerrit-Branch: master
Gerrit-Owner: Sn1per <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
