#25464: Applied code review suggestions

Author: sivaschenko

app/code/Magento/Ui/view/base/web/js/grid/columns/image-preview.js

@@ -3,16 +3,15 @@
  * See COPYING.txt for license details.
  */
 define([
-    'underscore',
     'jquery',
     'Magento_Ui/js/grid/columns/column'
-], function (_, $, Column) {
+], function ($, Column) {
     'use strict';
 
     return Column.extend({
         defaults: {
             previewImageSelector: '[data-image-preview]',
-            visibile: null,
+            visibleRecord: null,
             height: 0,
             displayedRecord: {},
             lastOpenedImage: null,
@@ -21,7 +20,7 @@ define([
                 thumbnailComponent: '${ $.parentName }.thumbnail_url'
             },
             statefull: {
-                visible: true,
+                visibleRecord: true,
                 sorting: true,
                 lastOpenedImage: true
             },
@@ -41,7 +40,7 @@ define([
         initObservable: function () {
             this._super()
                 .observe([
-                    'visibile',
+                    'visibleRecord',
                     'height',
                     'displayedRecord',
                     'lastOpenedImage'
@@ -106,7 +105,7 @@ define([
             this.hide();
             this.displayedRecord(record);
             this._selectRow(record.rowNumber || null);
-            this.visibile(record._rowIndex);
+            this.visibleRecord(record._rowIndex);
 
             img = $(this.previewImageSelector + ' img');
 
@@ -135,7 +134,7 @@ define([
          */
         hide: function () {
             this.lastOpenedImage(null);
-            this.visibile(null);
+            this.visibleRecord(null);
             this.height(0);
             this._selectRow(null);
         },
@@ -148,12 +147,12 @@ define([
          */
         isVisible: function (record) {
             if (this.lastOpenedImage() === record._rowIndex &&
-                this.visibile() === null
+                this.visibleRecord() === null
             ) {
                 this.show(record);
             }
 
-            return this.visibile() === record._rowIndex || false;
+            return this.visibleRecord() === record._rowIndex || false;
         },
 
         /**

app/code/Magento/Ui/view/base/web/js/grid/masonry.js

@@ -5,8 +5,9 @@
 define([
     'Magento_Ui/js/grid/listing',
     'jquery',
-    'ko'
-], function (Listing, $, ko) {
+    'ko',
+    'underscore'
+], function (Listing, $, ko, _) {
     'use strict';
 
     return Listing.extend({
@@ -88,7 +89,7 @@ define([
          * @return {Object}
          */
         initComponent: function (rows) {
-            if (!rows || !rows.length) {
+            if (!rows.length) {
                 return;
             }
             this.imageMargin = parseInt(this.imageMargin, 10);
@@ -199,7 +200,7 @@ define([
                     this.waitForContainer(callback);
                 }.bind(this), 500);
             } else {
-                callback();
+                setTimeout(callback, 0);
             }
         },
 
@@ -246,15 +247,20 @@ define([
          * Set min ratio for images in layout
          */
         setMinRatio: function () {
-            var minRatio = null;
-
-            for (var width in this.containerWidthToMinRatio) {
-                if (this.containerWidthToMinRatio.hasOwnProperty(width) &&
-                    this.containerWidth <= width
-                ) {
-                    minRatio = this.containerWidthToMinRatio[width]
-                }
-            }
+            var minRatio = _.find(
+                this.containerWidthToMinRatio,
+                /**
+                 * Find the minimal ratio for container width in the matrix
+                 *
+                 * @param {Number} ratio
+                 * @param {Number} width
+                 * @returns {Boolean}
+                 */
+                function (ratio, width) {
+                    return this.containerWidth <= width;
+                },
+                this
+            );
 
             this.minRatio = minRatio ? minRatio : this.defaultMinRatio;
         },

app/code/Magento/Ui/view/base/web/templates/grid/columns/image-preview.html

@@ -7,13 +7,13 @@
 <div class="masonry-image-preview" if="$col.isVisible($row())" data-image-preview ko-style="$col.getStyles($row())">
     <div class="container">
         <div class="action-buttons">
-            <button class="action-previous" type="button" click="function () { $col.prev($row()); }">
+            <button class="action-previous" type="button" click="$col.prev.bind($col, $row())">
                 <span translate="'Previous'"/>
             </button>
-            <button class="action-next" type="button" click="function () { $col.next($row()); }">
+            <button class="action-next" type="button" click="$col.next.bind($col, $row())">
                 <span translate="'Next'"/>
             </button>
-            <button class="action-close" type="button" click="function () { $col.hide(); }">
+            <button class="action-close" type="button" click="$col.hide.bind($col)">
                 <span translate="'Close'"/>
             </button>
         </div>