wikimedia/mediawiki-extensions-MultimediaViewer
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/MultimediaViewer synced 2024-09-29 13:17:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use link title as fallback for caption

Browse source 
This works because the title doesn't exist if there's no caption and we
won't get to this logic branch if the thumbnail is an explicit |thumb|
with a caption already.

Refactored caption-fetching a bit.

Change-Id: If84c890e7b71880db640a0993f8e3d6cd59951b8
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/513
This commit is contained in:
Mark Holmquist 2014-04-25 16:16:48 -07:00 committed by Gergő Tisza
parent ebf2836401
commit 35b6f70ef2
2 changed files with 52 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
resources/mmv/mmv.bootstrap.js
View file

@ -178,9 +178,7 @@
* @param {Object} thumb
*/
MMVB.processThumb = function ( thumb ) {
var $thumbCaption,
caption,
bs = this,
var bs = this,
alwaysOpen = false,
$thumb = $( thumb ),
$link = $thumb.closest( 'a.image' ),
@ -198,20 +196,6 @@
}
if ( $thumbContain.length !== 0 && $thumbContain.is( '.thumb' ) ) {
$thumbCaption = $thumbContain.find( '.thumbcaption' ).clone();
$thumbCaption.find( '.magnify' ).remove();
if ( !$thumbCaption.length ) { // gallery, maybe
$thumbCaption = $thumbContain
.closest( '.gallerybox' )
.not( function () {
// do not treat categories as galleries - the autogenerated caption they have is not helpful
return $thumbContain.closest( '#mw-category-media' ).length;
} )
.find( '.gallerytext' )
.clone();
}
caption = this.htmlUtils.htmlToTextWithLinks( $thumbCaption.html() || '' );
// If this is a thumb, we preload JS/CSS when the mouse cursor hovers the thumb container (thumb image + caption + border)
$thumbContain.mouseenter( function() {
// There is no point preloading if clicking the thumb won't open Media Viewer
@ -253,13 +237,41 @@
$thumb : $thumb,
title : title,
link : link,
caption : caption } );
caption : this.findCaption( $thumbContain, $link ) } );
$link.add( $enlarge ).click( function ( e ) {
return bs.click( this, e, title, alwaysOpen );
} );
};
/**
* Finds the caption for an image.
* @param {jQuery} $thumbContain The container for the thumbnail.
* @param {jQuery} $link The link that encompasses the thumbnail.
* @returns {string|undefined} Unsafe HTML may be present - caution
*/
MMVB.findCaption = function ( $thumbContain, $link ) {
var $thumbCaption;
if ( $thumbContain.length !== 0 && $thumbContain.is( '.thumb' ) ) {
$thumbCaption = $thumbContain.find( '.thumbcaption' ).clone();
$thumbCaption.find( '.magnify' ).remove();
if ( !$thumbCaption.length ) { // gallery, maybe
$thumbCaption = $thumbContain
.closest( '.gallerybox' )
.not( function () {
// do not treat categories as galleries - the autogenerated caption they have is not helpful
return $thumbContain.closest( '#mw-category-media' ).length;
} )
.find( '.gallerytext' )
.clone();
}
return this.htmlUtils.htmlToTextWithLinks( $thumbCaption.html() || '' );
} else if ( $link.prop( 'title' ) ) {
return $link.prop( 'title' );
}
};
/**
* Handles a click event on a link
* @param {HTMLElement} element Clicked element

24
tests/qunit/mmv/mmv.bootstrap.test.js
View file

@ -8,11 +8,14 @@
}
} ) );
function createGallery( imageSrc ) {
function createGallery( imageSrc, caption ) {
var div = $( '<div>' ).addClass( 'gallery' ).appendTo( '#qunit-fixture' ),
link = $( '<a>' ).addClass( 'image' ).appendTo( div );
galleryBox = $( '<div>' ).addClass( 'gallerybox' ).appendTo( div ),
thumbwrap = $( '<div>' ).addClass( 'thumb' ).appendTo( galleryBox ),
link = $( '<a>' ).addClass( 'image' ).appendTo( thumbwrap );
$( '<img>' ).attr( 'src', ( imageSrc || 'thumb.jpg' ) ).appendTo( link );
$( '<div>' ).addClass( 'gallerytext' ).text( caption || 'Foobar' ).appendTo( galleryBox );
return div;
}
@ -27,6 +30,12 @@
return div;
}
function createNormal( imageSrc, caption ) {
var link = $( '<a>' ).prop( 'title', caption ).addClass( 'image' ).appendTo( '#qunit-fixture' );
$( '<img>' ).prop( 'src', ( imageSrc || 'thumb.jpg' ) ).appendTo( link );
return link;
}
function createBootstrap( viewer ) {
var bootstrap = new mw.mmv.MultimediaViewerBootstrap();
bootstrap.getViewer = function() { return viewer ? viewer : { initWithThumbs : $.noop }; };
@ -431,4 +440,15 @@
$thumb.addClass( 'noviewer' );
assert.strictEqual( bootstrap.isAllowedThumb( $thumb ), false, 'Image with a noviewer class is disallowed.' );
} );
QUnit.test( 'findCaption', 3, function ( assert ) {
var gallery = createGallery( 'foo.jpg', 'Baz' ),
thumb = createThumb( 'foo.jpg', 'Quuuuux' ),
link = createNormal( 'foo.jpg', 'Foobar' ),
bootstrap = createBootstrap();
assert.strictEqual( bootstrap.findCaption( gallery.find( '.thumb' ), gallery.find( 'a.image' ) ), 'Baz', 'A gallery caption is found.' );
assert.strictEqual( bootstrap.findCaption( thumb, thumb.find( 'a.image' ) ), 'Quuuuux', 'A thumbnail caption is found.' );
assert.strictEqual( bootstrap.findCaption( $(), link ), 'Foobar', 'The caption is found even if the image is not a thumbnail.' );
} );
}( mediaWiki, jQuery ) );