Trigger styles update on last loaded image event

magento · May 27, 2020 · a63e681 · a63e681
1 parent a0ed711
commit a63e681
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 7 deletions.
diff --git a/app/code/Magento/Ui/view/base/web/js/grid/columns/image.js b/app/code/Magento/Ui/view/base/web/js/grid/columns/image.js
@@ -11,6 +11,7 @@ define([
         defaults: {
             bodyTmpl: 'ui/grid/columns/image',
             modules: {
+                masonry: '${ $.parentName }',
                 previewComponent: '${ $.parentName }.preview'
             },
             previewRowId: null,
@@ -35,6 +36,15 @@ define([
             return this;
         },
 
+        /**
+         * Updates styles when image loaded.
+         *
+         * @param {Object} record
+         */
+        updateStyles: function (record) {
+            !record.lastInRow || this.masonry().updateStyles();
+        },
+
         /**
          * Returns url to given record.
          *

diff --git a/app/code/Magento/Ui/view/base/web/js/grid/masonry.js b/app/code/Magento/Ui/view/base/web/js/grid/masonry.js
@@ -101,8 +101,8 @@ define([
             this.imageMargin = parseInt(this.imageMargin, 10);
             this.container = $('[data-id="' + this.containerId + '"]')[0];
 
-            this.setLayoutStyles();
             this.setEventListener();
+            this.setLayoutStyles();
 
             return this;
         },
@@ -112,18 +112,25 @@ define([
          */
         setEventListener: function () {
             window.addEventListener('resize', function () {
-                raf(function () {
-                    this.containerWidth = window.innerWidth;
-                    this.setLayoutStyles();
-                }.bind(this), this.refreshFPS);
+                this.updateStyles();
             }.bind(this));
         },
 
+        /**
+         * Updates styles for component.
+         */
+        updateStyles: function () {
+            raf(function () {
+                this.containerWidth = window.innerWidth;
+                this.setLayoutStyles();
+            }.bind(this), this.refreshFPS);
+        },
+
         /**
          * Set layout styles inside the container
          */
         setLayoutStyles: function () {
-            var containerWidth = parseInt(this.container.clientWidth, 10) - 15,
+            var containerWidth = parseInt(this.container.clientWidth, 10),
                 rowImages = [],
                 ratio = 0,
                 rowHeight = 0,

diff --git a/app/code/Magento/Ui/view/base/web/templates/grid/columns/image.html b/app/code/Magento/Ui/view/base/web/templates/grid/columns/image.html
@@ -5,5 +5,5 @@
  */
 -->
 <div class="masonry-image-block" ko-style="$col.getStyles($row())" css="{'active': $col.getIsActive($row())}" attr="'data-id': $col.getId($row())">
-    <img attr="src: $col.getUrl($row())" css="$col.getClasses($row())" click="function(){ expandPreview($row()) }" data-role="thumbnail"/>
+    <img data-bind="event: { load: updateStyles($row()) }" attr="src: $col.getUrl($row())" css="$col.getClasses($row())" click="function(){ expandPreview($row()) }" data-role="thumbnail"/>
 </div>