mediawiki.page.gallery: "packed"-style fixes for new media DOM and vi…

…deo/audio Bug: T304344 Change-Id: Ic27e204f5a1d7aecd50977ec4968dde593fa0b02
wikimedia · Apr 14, 2022 · 18cf637 · 18cf637
1 parent 2582db5
commit 18cf637
Showing 1 changed file with 16 additions and 12 deletions.
diff --git a/resources/src/mediawiki.page.gallery.js b/resources/src/mediawiki.page.gallery.js
@@ -26,7 +26,7 @@
 			$gallery = $( this );
 
 		$gallery.children( 'li.gallerybox' ).each( function () {
-			var $img, imgWidth, imgHeight, outerWidth, captionWidth,
+			var $imageDiv, $img, imgWidth, imgHeight, outerWidth, captionWidth,
 				// Math.floor, to be paranoid if things are off by 0.00000000001
 				top = Math.floor( $( this ).position().top ),
 				$this = $( this );
@@ -36,7 +36,8 @@
 				lastTop = top;
 			}
 
-			$img = $this.find( 'div.thumb img' );
+			$imageDiv = $this.find( 'div.thumb' ).first();
+			$img = $imageDiv.find( 'img, video' ).first();
 			if ( $img.length && $img[ 0 ].height ) {
 				imgHeight = $img[ 0 ].height;
 				imgWidth = $img[ 0 ].width;
@@ -45,17 +46,18 @@
 				// Note that if we do have a real image, using this method will generally
 				// give the same answer, but can be different in the case of a very
 				// narrow image where extra padding is added.
-				imgHeight = $this.children().children( 'div' ).first().height();
-				imgWidth = $this.children().children( 'div' ).first().width();
+				imgHeight = $imageDiv.height();
+				imgWidth = $imageDiv.width();
 			}
 
 			// Hack to make an edge case work ok
-			if ( imgHeight < 30 ) {
+			// (This happens for very small images, and for audio files)
+			if ( imgHeight < 40 ) {
 				// Don't try and resize this item.
 				imgHeight = 0;
 			}
 
-			captionWidth = $this.children().children( 'div.gallerytextwrapper' ).width();
+			captionWidth = $this.find( 'div.gallerytextwrapper' ).width();
 			outerWidth = $this.outerWidth();
 			rows[ rows.length - 1 ].push( {
 				$elm: $this,
@@ -168,9 +170,10 @@
 					newWidth = preferredHeight * curRow[ j ].aspect;
 					padding = curRow[ j ].width - curRow[ j ].imgWidth;
 					$outerDiv = curRow[ j ].$elm;
-					$innerDiv = $outerDiv.children( 'div' ).first();
-					$imageDiv = $innerDiv.children( 'div.thumb' );
-					$imageElm = $imageDiv.find( 'img' ).first();
+					// This wrapper is only present if ParserEnableLegacyMediaDOM is true
+					$innerDiv = $outerDiv.children( 'div:not( [class] )' ).first();
+					$imageDiv = $outerDiv.find( 'div.thumb' ).first();
+					$imageElm = $imageDiv.find( 'img, video' ).first();
 					$caption = $outerDiv.find( 'div.gallerytextwrapper' );
 
 					// Since we are going to re-adjust the height, the vertical
@@ -222,8 +225,9 @@
 				imgHeight = $( this ).data( 'imgHeight' ),
 				width = $( this ).data( 'width' ),
 				captionWidth = $( this ).data( 'captionWidth' ),
-				$innerDiv = $( this ).children( 'div' ).first(),
-				$imageDiv = $innerDiv.children( 'div.thumb' ),
+				// This wrapper is only present if ParserEnableLegacyMediaDOM is true
+				$innerDiv = $( this ).children( 'div:not( [class] )' ).first(),
+				$imageDiv = $( this ).find( 'div.thumb' ).first(),
 				$imageElm, imageElm;
 
 			// Restore original sizes so we can arrange the elements as on freshly loaded page
@@ -232,7 +236,7 @@
 			$imageDiv.width( imgWidth );
 			$( this ).find( 'div.gallerytextwrapper' ).width( captionWidth );
 
-			$imageElm = $( this ).find( 'img' ).first();
+			$imageElm = $imageDiv.find( 'img, video' ).first();
 			if ( $imageElm[ 0 ] ) {
 				imageElm = $imageElm[ 0 ];
 				imageElm.width = imgWidth;