Merge "Add a layout queue to media result widget"

modules/ve-mw/ui/dialogs/ve.ui.MWMediaDialog.js

@@ -1073,6 +1073,7 @@ ve.ui.MWMediaDialog.prototype.switchPanels = function ( panel, stopSearchRequery
 			this.setSize( 'large' );
 			// Set the edit panel
 			this.panels.setItem( this.bookletLayout );
+
 			// Focus the general settings page
 			this.bookletLayout.setPage( 'general' );
 			// Hide/show buttons
@@ -1081,10 +1082,6 @@ ve.ui.MWMediaDialog.prototype.switchPanels = function ( panel, stopSearchRequery
 			this.$content.removeClass( 'oo-ui-dialog-content-footless' );
 			// Focus the caption surface
 			this.captionSurface.focus();
-			// Hide/show the panels
-			this.bookletLayout.$element.show();
-			this.mediaSearchPanel.$element.hide();
-			this.mediaImageInfoPanel.$element.hide();
 			break;
 		case 'search':
 			this.setSize( 'larger' );
@@ -1124,10 +1121,8 @@ ve.ui.MWMediaDialog.prototype.switchPanels = function ( panel, stopSearchRequery
 			// HACK: OO.ui.Dialog needs an API for this
 			this.$content.toggleClass( 'oo-ui-dialog-content-footless', !this.imageModel );
 
-			// Hide/show the panels
+			// Layout pending items
-			this.bookletLayout.$element.hide();
+			this.search.runLayoutQueue();
-			this.mediaSearchPanel.$element.show();
-			this.mediaImageInfoPanel.$element.hide();
 			break;
 		default:
 		case 'imageInfo':
@@ -1135,9 +1130,7 @@ ve.ui.MWMediaDialog.prototype.switchPanels = function ( panel, stopSearchRequery
 			// Hide/show buttons
 			this.actions.setMode( 'info' );
 			// Hide/show the panels
-			this.mediaImageInfoPanel.$element.show();
+			this.panels.setItem( this.mediaImageInfoPanel );
-			this.bookletLayout.$element.hide();
-			this.mediaSearchPanel.$element.hide();
 			break;
 	}
 };

modules/ve-mw/ui/styles/dialogs/ve.ui.MWMediaDialog.css

@@ -11,6 +11,10 @@
 	padding-right: 2em;
 }
 
+.ve-ui-mwMediaDialog-panel-settings {
+	display: none;
+}
+
 .ve-ui-mwMediaDialog-panel-imageinfo-thumb {
 	text-align: center;
 }

modules/ve-mw/ui/widgets/ve.ui.MWMediaSearchWidget.js

@@ -32,6 +32,7 @@ ve.ui.MWMediaSearchWidget = function VeUiMWMediaSearchWidget( config ) {
 	this.titles = {};
 	this.queryMediaSourcesCallback = this.queryMediaSources.bind( this );
 	this.promises = [];
+	this.layoutQueue = [];
 	this.numItems = 0;
 	this.lang = config.lang || 'en';
 
@@ -246,9 +247,10 @@ ve.ui.MWMediaSearchWidget.prototype.resetPromises = function () {
 	}
 
 	this.rowIndex = 0;
-
 	// Empty the promise array
 	this.promises = [];
+	// Empty the results queue
+	this.layoutQueue = [];
 };
 
 /**
@@ -329,41 +331,61 @@ ve.ui.MWMediaSearchWidget.prototype.getAvailableRow = function () {
  * @param {ve.ui.MWMediaResultWidget[]} items An array of item elements
  */
 ve.ui.MWMediaSearchWidget.prototype.onResultsAdd = function ( items ) {
+	var search = this;
+
+	// Add method to a queue; this queue will only run when the widget
+	// is visible
+	this.layoutQueue.push( function () {
 		var i, j, ilen, jlen, itemWidth, row, effectiveWidth, resizeFactor,
-		maxLineWidth = this.results.$element.innerWidth() - 10;
+			maxLineWidth = search.results.$element.innerWidth() - 10;
 
 		// Go over the added items
-	row = this.getAvailableRow();
+		row = search.getAvailableRow();
 		for ( i = 0, ilen = items.length; i < ilen; i++ ) {
 			// TODO: Figure out a better way to calculate the margins
 			// between images (for now, hard-coded as 6)
 			itemWidth = items[i].$element.outerWidth() + 6;
 			// Add items to row until it is full
-		if ( this.rows[row].width + itemWidth >= maxLineWidth ) {
+			if ( search.rows[row].width + itemWidth >= maxLineWidth ) {
 				// Mark this row as full
-			this.rows[row].isFull = true;
+				search.rows[row].isFull = true;
-			this.rows[row].$element.attr( 'data-full', true );
+				search.rows[row].$element.attr( 'data-full', true );
 				// Resize all images in the row to fit the width
-			effectiveWidth = this.rows[row].width;
+				effectiveWidth = search.rows[row].width;
 				resizeFactor = maxLineWidth / effectiveWidth;
-			for ( j = 0, jlen = this.rows[row].items.length; j < jlen; j++ ) {
+				for ( j = 0, jlen = search.rows[row].items.length; j < jlen; j++ ) {
-				this.rows[row].items[j].resizeThumb( resizeFactor );
+					search.rows[row].items[j].resizeThumb( resizeFactor );
 				}
 				// find another row
-			row = this.getAvailableRow();
+				row = search.getAvailableRow();
 			}
 			// Append to row
-		this.rows[row].width += itemWidth;
+			search.rows[row].width += itemWidth;
 			// Store reference to the item
-		this.rows[row].items.push( items[i] );
+			search.rows[row].items.push( items[i] );
 			items[i].setRow( row );
 			// Append the item
-		this.rows[row].$element.append( items[i].$element );
+			search.rows[row].$element.append( items[i].$element );
 		}
 
 		// If we have less than 4 rows, call for more images
-	if ( this.rows.length < 4 ) {
+		if ( search.rows.length < 4 ) {
-		this.queryMediaSources();
+			search.queryMediaSources();
+		}
+	} );
+	this.runLayoutQueue();
+};
+
+/**
+ * Run layout methods from the queue only if the element is visible.
+ */
+ve.ui.MWMediaSearchWidget.prototype.runLayoutQueue = function () {
+	var i, len;
+
+	if ( this.$element.is( ':visible' ) ) {
+		for ( i = 0, len = this.layoutQueue.length; i < len; i++ ) {
+			this.layoutQueue.pop()();
+		}
 	}
 };