mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-09-25 11:16:51 +00:00
Merge "Add a layout queue to media result widget"
This commit is contained in:
commit
4443349a11
|
@ -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
|
||||
this.bookletLayout.$element.hide();
|
||||
this.mediaSearchPanel.$element.show();
|
||||
this.mediaImageInfoPanel.$element.hide();
|
||||
// Layout pending items
|
||||
this.search.runLayoutQueue();
|
||||
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.bookletLayout.$element.hide();
|
||||
this.mediaSearchPanel.$element.hide();
|
||||
this.panels.setItem( this.mediaImageInfoPanel );
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
|
|
@ -11,6 +11,10 @@
|
|||
padding-right: 2em;
|
||||
}
|
||||
|
||||
.ve-ui-mwMediaDialog-panel-settings {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ve-ui-mwMediaDialog-panel-imageinfo-thumb {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
this.rows[row].$element.attr( 'data-full', true );
|
||||
search.rows[row].isFull = 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++ ) {
|
||||
this.rows[row].items[j].resizeThumb( resizeFactor );
|
||||
for ( j = 0, jlen = search.rows[row].items.length; j < jlen; j++ ) {
|
||||
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 ) {
|
||||
this.queryMediaSources();
|
||||
if ( search.rows.length < 4 ) {
|
||||
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()();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in a new issue