wikimedia/mediawiki-extensions-VisualEditor
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor synced 2024-09-23 18:28:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rearrange images when the media search window resizes

Browse source 
This is a quickfix to make the masonry fit recalculate itself after
the window is resized. It is most significant for orientation changes
in mobile devices, as those lead to a resizing of the window and a
complete reorganization of the masonry fit rows.

Bug: T95017
Change-Id: Ibf3c74ea21d42f4a159d0b855be5672c8455639f
This commit is contained in:
Moriel Schottlender 2015-04-16 12:14:27 -07:00
parent ad702c298e
commit 1d1079e7fc
2 changed files with 55 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
modules/ve-mw/ui/dialogs/ve.ui.MWMediaDialog.js
View file

@ -970,6 +970,8 @@ ve.ui.MWMediaDialog.prototype.getSetupProcess = function ( data ) {
this.isInsertion = true;
}
this.search.setup();
this.resetCaption();
this.actions.setAbilities( { insert: false, apply: false } );
@ -1210,6 +1212,7 @@ ve.ui.MWMediaDialog.prototype.getTeardownProcess = function ( data ) {
.first( function () {
// Cleanup
this.search.getQuery().setValue( '' );
this.search.teardown();
if ( this.imageModel ) {
this.imageModel.disconnect( this );
this.sizeWidget.disconnect( this );

52
modules/ve-mw/ui/widgets/ve.ui.MWMediaSearchWidget.js
View file

@ -44,6 +44,9 @@ ve.ui.MWMediaSearchWidget = function VeUiMWMediaSearchWidget( config ) {
this.queryMediaQueueCallback = this.queryMediaQueue.bind( this );
this.layoutQueue = [];
this.numItems = 0;
this.currentItemCache = [];
this.resultsSize = {};
this.selected = null;
@ -61,6 +64,8 @@ ve.ui.MWMediaSearchWidget = function VeUiMWMediaSearchWidget( config ) {
remove: 'onResultsRemove'
} );
this.resizeHandler = ve.debounce( this.afterResultsResize.bind( this ), 500 );
// Initialization
this.$element.addClass( 've-ui-mwMediaSearchWidget' );
};
@ -71,6 +76,49 @@ OO.inheritClass( ve.ui.MWMediaSearchWidget, OO.ui.SearchWidget );
/* Methods */
/**
* Respond to window resize and check if the result display should
* be updated.
*/
ve.ui.MWMediaSearchWidget.prototype.afterResultsResize = function () {
var items = this.currentItemCache,
value = this.query.getValue();
if (
items.length > 0 &&
(
this.resultsSize.width !== this.$results.width() ||
this.resultsSize.height !== this.$results.height()
)
) {
this.resetRows();
this.itemCache = {};
this.processQueueResults( items, value );
if ( this.results.getItems().length > 0 ) {
this.lazyLoadResults();
}
// Cache the size
this.resultsSize = {
width: this.$results.width(),
height: this.$results.height()
};
}
};
/**
* Teardown the widget; disconnect the window resize event.
*/
ve.ui.MWMediaSearchWidget.prototype.teardown = function () {
$( window ).off( 'resize', this.resizeHandler );
};
/**
* Setup the widget; activate the resize event.
*/
ve.ui.MWMediaSearchWidget.prototype.setup = function () {
$( window ).on( 'resize', this.resizeHandler );
};
/**
* Query all sources for media.
*
@ -92,6 +140,7 @@ ve.ui.MWMediaSearchWidget.prototype.queryMediaQueue = function () {
.then( function ( items ) {
if ( items.length > 0 ) {
search.processQueueResults( items, value );
search.currentItemCache = search.currentItemCache.concat( items );
}
search.query.popPending();
@ -157,6 +206,7 @@ ve.ui.MWMediaSearchWidget.prototype.onQueryChange = function ( value ) {
// Reset
this.itemCache = {};
this.currentItemCache = [];
this.resetRows();
// Empty the results queue
@ -218,6 +268,7 @@ ve.ui.MWMediaSearchWidget.prototype.resetRows = function () {
}
this.rows = [];
this.itemCache = {};
};
/**
@ -359,6 +410,7 @@ ve.ui.MWMediaSearchWidget.prototype.onResultsRemove = function ( items ) {
// In the case of the media search widget, if any items are removed
// all are removed (new search)
this.resetRows();
this.currentItemCache = [];
}
};