[MediaWiki-commits] [Gerrit] Rearrange images when the media search window resizes - change (mediawiki...VisualEditor)

[Mooeypoo (Code Review)]

Mooeypoo has uploaded a new change for review.

  https://gerrit.wikimedia.org/r/204568

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/widgets/ve.ui.MWMediaSearchWidget.js
1 file changed, 36 insertions(+), 0 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/VisualEditor 
refs/changes/68/204568/1

diff --git a/modules/ve-mw/ui/widgets/ve.ui.MWMediaSearchWidget.js 
b/modules/ve-mw/ui/widgets/ve.ui.MWMediaSearchWidget.js
index 3102ba5..92e3b93 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,9 @@
                remove: 'onResultsRemove'
        } );
 
+       this.resizeHandler = ve.debounce( this.onResultsResize.bind( this ), 
500 );
+       $( window ).resize( this.resizeHandler );
+
        // Initialization
        this.$element.addClass( 've-ui-mwMediaSearchWidget' );
 };
@@ -70,6 +76,32 @@
 OO.inheritClass( ve.ui.MWMediaSearchWidget, OO.ui.SearchWidget );
 
 /* Methods */
+
+ve.ui.MWMediaSearchWidget.prototype.onResultsResize = 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()
+               };
+       }
+};
 
 /**
  * Query all sources for media.
@@ -92,6 +124,7 @@
                .then( function ( items ) {
                        if ( items.length > 0 ) {
                                search.processQueueResults( items, value );
+                               search.currentItemCache = 
search.currentItemCache.concat( items );
                        }
 
                        search.query.popPending();
@@ -157,6 +190,7 @@
 
        // Reset
        this.itemCache = {};
+       this.currentItemCache = [];
        this.resetRows();
 
        // Empty the results queue
@@ -218,6 +252,7 @@
        }
 
        this.rows = [];
+       this.itemCache = {};
 };
 
 /**
@@ -359,6 +394,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: newchange
Gerrit-Change-Id: Ibf3c74ea21d42f4a159d0b855be5672c8455639f
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Mooeypoo <mor...@gmail.com>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits