// Now on to justification.
// We may still get ragged edges if someone resizes their window. Could bind to
// that event, otoh do we really want to constantly be resizing galleries?
- $( galleries ).each( function() {
+ $( galleries ).each( function () {
var lastTop,
$img,
imgWidth,
rows = [],
$gallery = $( this );
- $gallery.children( 'li' ).each( function() {
+ $gallery.children( 'li' ).each( function () {
// Math.floor to be paranoid if things are off by 0.00000000001
- var top = Math.floor( $(this ).position().top ),
+ var top = Math.floor( $( this ).position().top ),
$this = $( this );
if ( top !== lastTop ) {
captionWidth: $this.children().children( 'div.gallerytextwrapper' ).width(),
height: imgHeight
};
- });
+ } );
- (function () {
+ ( function () {
var maxWidth,
combinedAspect,
combinedPadding,
$caption,
hookInfo,
i,
- j;
+ j,
+ avgZoom,
+ totalZoom = 0;
for ( i = 0; i < rows.length; i++ ) {
maxWidth = $gallery.width();
// code, would prevent accidentally expanding to
// be 10 billion pixels wide.
mw.log( 'mw.page.gallery: Cannot fit row, aspect is ' + preferredHeight/curRowHeight );
- preferredHeight = 1.5 * curRowHeight;
+ if ( i === rows.length - 1 ) {
+ // If its the last row, and we can't fit it,
+ // don't make the entire row huge.
+ avgZoom = ( totalZoom / ( rows.length - 1 ) ) * curRowHeight;
+ if ( isFinite( avgZoom ) && avgZoom >= 1 && avgZoom <= 1.5 ) {
+ preferredHeight = avgZoom;
+ } else {
+ // Probably a single row gallery
+ preferredHeight = curRowHeight;
+ }
+ } else {
+ preferredHeight = 1.5 * curRowHeight;
+ }
}
if ( !isFinite( preferredHeight ) ) {
// This *definitely* should not happen.
// Skip this row.
continue;
}
+
+ if ( preferredHeight / curRowHeight > 1 ) {
+ totalZoom += preferredHeight / curRowHeight;
+ } else {
+ // If we shrink, still consider that a zoom of 1
+ totalZoom += 1;
+ }
+
for ( j = 0; j < curRow.length; j++ ) {
newWidth = preferredHeight * curRow[j].aspect;
padding = curRow[j].width - curRow[j].imgWidth;
$outerDiv.width( newWidth + padding );
$innerDiv.width( newWidth + padding );
$imageDiv.width( newWidth );
- $caption.width( curRow[j].captionWidth + (newWidth - curRow[j].imgWidth ) );
+ $caption.width( curRow[j].captionWidth + ( newWidth - curRow[j].imgWidth ) );
}
hookInfo = {
$innerDiv: $innerDiv,
$imageDiv: $imageDiv,
$outerDiv: $outerDiv,
- resolved: false /* Did the hook take action */
+ // Whether the hook took action
+ resolved: false
};
- // Allow other media handlers to hook in.
- // If your hook resizes an image, it is expected it will
- // set resolved to true. Additionally you should load
- // your module in position top to ensure it is registered
- // before this runs (FIXME: there must be a better way?)
- // See TimedMediaHandler for an example.
+
+ /**
+ * Gallery resize.
+ *
+ * If your handler resizes an image, it should also set the resolved
+ * property to true. Additionally, because this module only exposes this
+ * logic temporarily, you should load your module in position top to
+ * ensure it is registered before this runs (FIXME: Don't use mw.hook)
+ *
+ * See TimedMediaHandler for an example.
+ *
+ * @event mediawiki_page_gallery_resize
+ * @member mw.hook
+ * @param {Object} hookInfo
+ */
mw.hook( 'mediawiki.page.gallery.resize' ).fire( hookInfo );
if ( !hookInfo.resolved ) {