diff --git a/resources/mmv/mmv.bootstrap.js b/resources/mmv/mmv.bootstrap.js index 43678545f..9b9898f4b 100644 --- a/resources/mmv/mmv.bootstrap.js +++ b/resources/mmv/mmv.bootstrap.js @@ -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 diff --git a/tests/qunit/mmv/mmv.bootstrap.test.js b/tests/qunit/mmv/mmv.bootstrap.test.js index 438d2cb6f..4725a8e98 100644 --- a/tests/qunit/mmv/mmv.bootstrap.test.js +++ b/tests/qunit/mmv/mmv.bootstrap.test.js @@ -8,11 +8,14 @@ } } ) ); - function createGallery( imageSrc ) { + function createGallery( imageSrc, caption ) { var div = $( '
' ).addClass( 'gallery' ).appendTo( '#qunit-fixture' ), - link = $( '' ).addClass( 'image' ).appendTo( div ); + galleryBox = $( '
' ).addClass( 'gallerybox' ).appendTo( div ), + thumbwrap = $( '
' ).addClass( 'thumb' ).appendTo( galleryBox ), + link = $( '' ).addClass( 'image' ).appendTo( thumbwrap ); $( '' ).attr( 'src', ( imageSrc || 'thumb.jpg' ) ).appendTo( link ); + $( '
' ).addClass( 'gallerytext' ).text( caption || 'Foobar' ).appendTo( galleryBox ); return div; } @@ -27,6 +30,12 @@ return div; } + function createNormal( imageSrc, caption ) { + var link = $( '' ).prop( 'title', caption ).addClass( 'image' ).appendTo( '#qunit-fixture' ); + $( '' ).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 ) );