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' );
|
this.setSize( 'large' );
|
||||||
// Set the edit panel
|
// Set the edit panel
|
||||||
this.panels.setItem( this.bookletLayout );
|
this.panels.setItem( this.bookletLayout );
|
||||||
|
|
||||||
// Focus the general settings page
|
// Focus the general settings page
|
||||||
this.bookletLayout.setPage( 'general' );
|
this.bookletLayout.setPage( 'general' );
|
||||||
// Hide/show buttons
|
// Hide/show buttons
|
||||||
|
@ -1081,10 +1082,6 @@ ve.ui.MWMediaDialog.prototype.switchPanels = function ( panel, stopSearchRequery
|
||||||
this.$content.removeClass( 'oo-ui-dialog-content-footless' );
|
this.$content.removeClass( 'oo-ui-dialog-content-footless' );
|
||||||
// Focus the caption surface
|
// Focus the caption surface
|
||||||
this.captionSurface.focus();
|
this.captionSurface.focus();
|
||||||
// Hide/show the panels
|
|
||||||
this.bookletLayout.$element.show();
|
|
||||||
this.mediaSearchPanel.$element.hide();
|
|
||||||
this.mediaImageInfoPanel.$element.hide();
|
|
||||||
break;
|
break;
|
||||||
case 'search':
|
case 'search':
|
||||||
this.setSize( 'larger' );
|
this.setSize( 'larger' );
|
||||||
|
@ -1124,10 +1121,8 @@ ve.ui.MWMediaDialog.prototype.switchPanels = function ( panel, stopSearchRequery
|
||||||
// HACK: OO.ui.Dialog needs an API for this
|
// HACK: OO.ui.Dialog needs an API for this
|
||||||
this.$content.toggleClass( 'oo-ui-dialog-content-footless', !this.imageModel );
|
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;
|
break;
|
||||||
default:
|
default:
|
||||||
case 'imageInfo':
|
case 'imageInfo':
|
||||||
|
@ -1135,9 +1130,7 @@ ve.ui.MWMediaDialog.prototype.switchPanels = function ( panel, stopSearchRequery
|
||||||
// Hide/show buttons
|
// Hide/show buttons
|
||||||
this.actions.setMode( 'info' );
|
this.actions.setMode( 'info' );
|
||||||
// Hide/show the panels
|
// Hide/show the panels
|
||||||
this.mediaImageInfoPanel.$element.show();
|
this.panels.setItem( this.mediaImageInfoPanel );
|
||||||
this.bookletLayout.$element.hide();
|
|
||||||
this.mediaSearchPanel.$element.hide();
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -11,6 +11,10 @@
|
||||||
padding-right: 2em;
|
padding-right: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ve-ui-mwMediaDialog-panel-settings {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.ve-ui-mwMediaDialog-panel-imageinfo-thumb {
|
.ve-ui-mwMediaDialog-panel-imageinfo-thumb {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
|
@ -32,6 +32,7 @@ ve.ui.MWMediaSearchWidget = function VeUiMWMediaSearchWidget( config ) {
|
||||||
this.titles = {};
|
this.titles = {};
|
||||||
this.queryMediaSourcesCallback = this.queryMediaSources.bind( this );
|
this.queryMediaSourcesCallback = this.queryMediaSources.bind( this );
|
||||||
this.promises = [];
|
this.promises = [];
|
||||||
|
this.layoutQueue = [];
|
||||||
this.numItems = 0;
|
this.numItems = 0;
|
||||||
this.lang = config.lang || 'en';
|
this.lang = config.lang || 'en';
|
||||||
|
|
||||||
|
@ -246,9 +247,10 @@ ve.ui.MWMediaSearchWidget.prototype.resetPromises = function () {
|
||||||
}
|
}
|
||||||
|
|
||||||
this.rowIndex = 0;
|
this.rowIndex = 0;
|
||||||
|
|
||||||
// Empty the promise array
|
// Empty the promise array
|
||||||
this.promises = [];
|
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
|
* @param {ve.ui.MWMediaResultWidget[]} items An array of item elements
|
||||||
*/
|
*/
|
||||||
ve.ui.MWMediaSearchWidget.prototype.onResultsAdd = function ( items ) {
|
ve.ui.MWMediaSearchWidget.prototype.onResultsAdd = function ( items ) {
|
||||||
var i, j, ilen, jlen, itemWidth, row, effectiveWidth, resizeFactor,
|
var search = this;
|
||||||
maxLineWidth = this.results.$element.innerWidth() - 10;
|
|
||||||
|
|
||||||
// Go over the added items
|
// Add method to a queue; this queue will only run when the widget
|
||||||
row = this.getAvailableRow();
|
// is visible
|
||||||
for ( i = 0, ilen = items.length; i < ilen; i++ ) {
|
this.layoutQueue.push( function () {
|
||||||
// TODO: Figure out a better way to calculate the margins
|
var i, j, ilen, jlen, itemWidth, row, effectiveWidth, resizeFactor,
|
||||||
// between images (for now, hard-coded as 6)
|
maxLineWidth = search.results.$element.innerWidth() - 10;
|
||||||
itemWidth = items[i].$element.outerWidth() + 6;
|
|
||||||
// Add items to row until it is full
|
// Go over the added items
|
||||||
if ( this.rows[row].width + itemWidth >= maxLineWidth ) {
|
row = search.getAvailableRow();
|
||||||
// Mark this row as full
|
for ( i = 0, ilen = items.length; i < ilen; i++ ) {
|
||||||
this.rows[row].isFull = true;
|
// TODO: Figure out a better way to calculate the margins
|
||||||
this.rows[row].$element.attr( 'data-full', true );
|
// between images (for now, hard-coded as 6)
|
||||||
// Resize all images in the row to fit the width
|
itemWidth = items[i].$element.outerWidth() + 6;
|
||||||
effectiveWidth = this.rows[row].width;
|
// Add items to row until it is full
|
||||||
resizeFactor = maxLineWidth / effectiveWidth;
|
if ( search.rows[row].width + itemWidth >= maxLineWidth ) {
|
||||||
for ( j = 0, jlen = this.rows[row].items.length; j < jlen; j++ ) {
|
// Mark this row as full
|
||||||
this.rows[row].items[j].resizeThumb( resizeFactor );
|
search.rows[row].isFull = true;
|
||||||
|
search.rows[row].$element.attr( 'data-full', true );
|
||||||
|
// Resize all images in the row to fit the width
|
||||||
|
effectiveWidth = search.rows[row].width;
|
||||||
|
resizeFactor = maxLineWidth / effectiveWidth;
|
||||||
|
for ( j = 0, jlen = search.rows[row].items.length; j < jlen; j++ ) {
|
||||||
|
search.rows[row].items[j].resizeThumb( resizeFactor );
|
||||||
|
}
|
||||||
|
// find another row
|
||||||
|
row = search.getAvailableRow();
|
||||||
}
|
}
|
||||||
// find another row
|
// Append to row
|
||||||
row = this.getAvailableRow();
|
search.rows[row].width += itemWidth;
|
||||||
|
// Store reference to the item
|
||||||
|
search.rows[row].items.push( items[i] );
|
||||||
|
items[i].setRow( row );
|
||||||
|
// Append the item
|
||||||
|
search.rows[row].$element.append( items[i].$element );
|
||||||
}
|
}
|
||||||
// Append to row
|
|
||||||
this.rows[row].width += itemWidth;
|
|
||||||
// Store reference to the item
|
|
||||||
this.rows[row].items.push( items[i] );
|
|
||||||
items[i].setRow( row );
|
|
||||||
// Append the item
|
|
||||||
this.rows[row].$element.append( items[i].$element );
|
|
||||||
}
|
|
||||||
|
|
||||||
// If we have less than 4 rows, call for more images
|
// 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()();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue