From 35b6f70ef2cf9893cc1f834fbd78aee739fdb229 Mon Sep 17 00:00:00 2001
From: Mark Holmquist <mtraceur@member.fsf.org>
Date: Fri, 25 Apr 2014 16:16:48 -0700
Subject: [PATCH] Use link title as fallback for caption

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
---
 resources/mmv/mmv.bootstrap.js        | 48 +++++++++++++++++----------
 tests/qunit/mmv/mmv.bootstrap.test.js | 24 ++++++++++++--
 2 files changed, 52 insertions(+), 20 deletions(-)

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 = $( '<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 ) );