jenkins-bot has submitted this change and it was merged.
Change subject: Rearrange images when the media search window resizes
......................................................................
Rearrange images when the media search window resizes
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
---
M modules/ve-mw/ui/dialogs/ve.ui.MWMediaDialog.js
M modules/ve-mw/ui/widgets/ve.ui.MWMediaSearchWidget.js
2 files changed, 55 insertions(+), 0 deletions(-)
Approvals:
Jforrester: Looks good to me, approved
jenkins-bot: Verified
diff --git a/modules/ve-mw/ui/dialogs/ve.ui.MWMediaDialog.js
b/modules/ve-mw/ui/dialogs/ve.ui.MWMediaDialog.js
index 534e8c4..ebd03dc 100644
--- a/modules/ve-mw/ui/dialogs/ve.ui.MWMediaDialog.js
+++ b/modules/ve-mw/ui/dialogs/ve.ui.MWMediaDialog.js
@@ -970,6 +970,8 @@
this.isInsertion = true;
}
+ this.search.setup();
+
this.resetCaption();
this.actions.setAbilities( { insert: false, apply:
false } );
@@ -1210,6 +1212,7 @@
.first( function () {
// Cleanup
this.search.getQuery().setValue( '' );
+ this.search.teardown();
if ( this.imageModel ) {
this.imageModel.disconnect( this );
this.sizeWidget.disconnect( this );
diff --git a/modules/ve-mw/ui/widgets/ve.ui.MWMediaSearchWidget.js
b/modules/ve-mw/ui/widgets/ve.ui.MWMediaSearchWidget.js
index 3102ba5..d497a7c 100644
--- a/modules/ve-mw/ui/widgets/ve.ui.MWMediaSearchWidget.js
+++ b/modules/ve-mw/ui/widgets/ve.ui.MWMediaSearchWidget.js
@@ -44,6 +44,9 @@
this.queryMediaQueueCallback = this.queryMediaQueue.bind( this );
this.layoutQueue = [];
this.numItems = 0;
+ this.currentItemCache = [];
+
+ this.resultsSize = {};
this.selected = null;
@@ -61,6 +64,8 @@
remove: 'onResultsRemove'
} );
+ this.resizeHandler = ve.debounce( this.afterResultsResize.bind( this ),
500 );
+
// Initialization
this.$element.addClass( 've-ui-mwMediaSearchWidget' );
};
@@ -71,6 +76,49 @@
/* 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 @@
.then( function ( items ) {
if ( items.length > 0 ) {
search.processQueueResults( items, value );
+ search.currentItemCache =
search.currentItemCache.concat( items );
}
search.query.popPending();
@@ -157,6 +206,7 @@
// Reset
this.itemCache = {};
+ this.currentItemCache = [];
this.resetRows();
// Empty the results queue
@@ -218,6 +268,7 @@
}
this.rows = [];
+ this.itemCache = {};
};
/**
@@ -359,6 +410,7 @@
// In the case of the media search widget, if any items are
removed
// all are removed (new search)
this.resetRows();
+ this.currentItemCache = [];
}
};
--
To view, visit https://gerrit.wikimedia.org/r/204568
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ibf3c74ea21d42f4a159d0b855be5672c8455639f
Gerrit-PatchSet: 4
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Mooeypoo <mor...@gmail.com>
Gerrit-Reviewer: Catrope <roan.katt...@gmail.com>
Gerrit-Reviewer: Jforrester <jforres...@wikimedia.org>
Gerrit-Reviewer: Trevor Parscal <tpars...@wikimedia.org>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
