Introduce image listing UI component

AdobeStockAsset/Model/Asset.php

@@ -71,6 +71,40 @@ public function getExtensionAttributes()
         return $this->_getExtensionAttributes();
     }
 
+    /**
+     * @param int $value
+     * @return Asset|AssetInterface
+     */
+    public function setHeight(int $value)
+    {
+        return $this->setData('height', $value);
+    }
+
+    /**
+     * @return int
+     */
+    public function getHeight() : int
+    {
+        return $this->_get('height');
+    }
+
+    /**
+     * @param int $value
+     * @return Asset|AssetInterface
+     */
+    public function setWidth(int $value)
+    {
+        return $this->setData('width', $value);
+    }
+
+    /**
+     * @return int
+     */
+    public function getWidth() : int
+    {
+        return $this->_get('width');
+    }
+
     /**
      * @param \Magento\AdobeStockAssetApi\Api\Data\AssetExtensionInterface $extensionAttributes
      * @return $this

AdobeStockAsset/Model/Client.php

@@ -64,7 +64,7 @@ public function search(SearchRequestInterface $request) : SearchResultInterface
     {
         $searchParams = new SearchParameters();
         $searchParams->setLimit($request->getSize());
-        $searchParams->setOffset($request->getOffset() * $request->getSize());
+        $searchParams->setOffset($request->getOffset());
         $this->setUpFilters($request->getFilters(), $searchParams);
 
         $resultsColumns = Constants::getResultColumns();
@@ -86,7 +86,9 @@ public function search(SearchRequestInterface $request) : SearchResultInterface
             /** @var AssetInterface $asset */
             $asset = $this->assetFactory->create();
             $asset->setId($file->id);
-            $asset->setUrl($file->thumbnail_220_url);
+            $asset->setUrl($file->thumbnail_500_url);
+            $asset->setHeight($file->height);
+            $asset->setWidth($file->width);
             $items[] = $asset;
         }
 

AdobeStockAssetApi/Api/Data/AssetInterface.php

@@ -85,6 +85,28 @@ public function getUrl();
      */
     public function setUrl($value);
 
+    /**
+     * @param int $value
+     * @return $this
+     */
+    public function setHeight(int $value);
+
+    /**
+     * @return int
+     */
+    public function getHeight() : int;
+
+    /**
+     * @param int $value
+     * @return $this
+     */
+    public function setWidth(int $value);
+
+    /**
+     * @return int
+     */
+    public function getWidth() : int;
+
     /**
      * Retrieve existing extension attributes object or create a new one.
      *

AdobeStockImage/Model/GetImageList.php

@@ -67,7 +67,7 @@ public function execute(SearchCriteriaInterface $searchCriteria): SearchResultsI
     {
         $this->requestBuilder->setName('adobe_stock_image_search');
         $this->requestBuilder->setSize($searchCriteria->getPageSize());
-        $this->requestBuilder->setOffset($searchCriteria->getCurrentPage());
+        $this->requestBuilder->setOffset(($searchCriteria->getCurrentPage() - 1) * $searchCriteria->getPageSize());
         $this->requestBuilder->setLocale($this->localeResolver->getLocale());
         $this->applyFilters($searchCriteria);
 

AdobeStockImage/etc/adobe_stock_requests.xml

@@ -21,7 +21,9 @@
             <column name="nb_results" field="NB_RESULTS"/>
             <column name="id" field="ID"/>
             <column name="COMP_URL" field="COMP_URL"/>
-            <column name="THUMBNAIL_220_URL" field="THUMBNAIL_220_URL"/>
+            <column name="THUMBNAIL_500_URL" field="THUMBNAIL_500_URL"/>
+            <column name="WIDTH" field="WIDTH"/>
+            <column name="HEIGHT" field="HEIGHT"/>
         </resultColumns>
         <from>0</from>
         <size>32</size>

AdobeStockImageAdminUi/view/adminhtml/ui_component/adobe_stock_images_listing.xml

@@ -56,10 +56,15 @@
         </filters>
     </listingToolbar>
     <columns name="adobe_stock_images_columns" template="Magento_AdobeStockImageAdminUi/grid/listing">
-        <column name="url" class="Magento\AdobeStockImageAdminUi\Ui\Component\Listing\Columns\Image" component="Magento_Ui/js/grid/columns/thumbnail">
+        <column name="url" class="Magento\AdobeStockImageAdminUi\Ui\Component\Listing\Columns\Image" component="Magento_AdobeStockImageAdminUi/js/components/masonry">
+            <argument name="data" xsi:type="array">
+                <item name="config" xsi:type="array">
+                    <item name="provider" xsi:type="string">adobe_stock_images_listing.adobe_stock_images_listing_data_source</item>
+                    <item name="containerId" xsi:type="string">adobe-stock-images-masonry-grid</item>
+                </item>
+            </argument>
             <settings>
                 <label translate="true">Image</label>
-                <bodyTmpl>Magento_AdobeStockImageAdminUi/grid/cells/image</bodyTmpl>
             </settings>
         </column>
     </columns>

AdobeStockImageAdminUi/view/adminhtml/web/css/source/_module.less

@@ -4,15 +4,23 @@
 //  */
 
 & when (@media-common = true) {
-  .adobe-stock-image-column > div {
-    display: inline-block;
-
-    .adobe-stock-image-cell {
-      margin: 10px;
-
-      img {
-        max-height: 200px;
-      }
+    .masonry-image-column {
+        position: relative;
+        margin: 20px 0 20px 0;
+    }
+    .masonry-image-block {
+        background-color: #D5D5D5;
+        overflow: hidden;
+        left: 0;
+        position: absolute;
+        top: 0;
+        margin: 0;
+    }
+    .masonry-image-block img {
+        left: 0;
+        position: absolute;
+        top: 0;
+        height: 100%;
+        width: 100%;
     }
-  }
-}
+}

AdobeStockImageAdminUi/view/adminhtml/web/js/components/masonry.js

@@ -0,0 +1,214 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+define([
+    'uiElement',
+    'jquery'
+], function (Element, $) {
+    'use strict';
+
+    return Element.extend({
+        defaults: {
+            template: 'Magento_AdobeStockImageAdminUi/masonry',
+            imports: {
+              rows: '${ $.provider }:data.items'
+            },
+            listens: {
+                'rows': 'initComponent'
+            },
+
+            /**
+             * Images array
+             * @param array
+             */
+            images: [],
+
+            /**
+             * Images container id
+             * @param string
+             */
+            containerId: null,
+
+            /**
+             * Minimum aspect ratio for each image
+             * @param int
+             */
+            minRatio: null,
+
+            /**
+             * Container width
+             * @param int
+             */
+            containerWidth: window.innerWidth,
+
+            /**
+             * Margin between images
+             * @param int
+             */
+            imageMargin: 20,
+
+            /**
+             * Container styles
+             * @param {Object}
+             */
+            containerStyles: {},
+        },
+
+        /**
+         * Init observable variables
+         * @return {Object}
+         */
+        initObservable: function () {
+            this._super()
+                .observe([
+                    'rows',
+                    'images',
+                    'containerStyles'
+                ]);
+
+            return this;
+        },
+
+        /**
+         * Init component handler
+         * @param rows
+         * @return {Object}
+         */
+        initComponent: function (rows) {
+            if (!rows.length) {
+                return;
+            }
+
+            this.imageMargin = parseInt(this.imageMargin);
+            this.container = $('[data-id="' + this.containerId + '"]')[0];
+
+            this.prepareImages(rows);
+            this.setLayoutStyles();
+            this.setContainerHeight();
+            this.setEventListener();
+            return this;
+        },
+
+        /**
+         * Prepare and assign images to observable var
+         * @param rows
+         */
+        prepareImages: function (rows) {
+            this.images(rows.map( (asset) => {
+                return {
+                    src: asset.url,
+                    ratio: (asset.width / asset.height).toFixed(2),
+                    id: asset.id
+                };
+            }));
+        },
+
+        /**
+         * Set event listener to track resize event
+         */
+        setEventListener: function () {
+            var running = false,
+                handler = function() {
+                    this.containerWidth = window.innerWidth;
+                    this.setLayoutStyles();
+                    this.setContainerHeight();
+                }.bind(this);
+
+            window.addEventListener('resize', function () {
+                if (!running) {
+                    running = true;
+                    if (window.requestAnimationFrame) {
+                        window.requestAnimationFrame(function () {
+                            handler();
+                            running = false;
+                        });
+                    } else {
+                        setTimeout(function () {
+                            handler();
+                            running = false;
+                        }, 66);
+                    }
+                }
+            });
+        },
+
+        /**
+         * Set optimal container height
+         */
+        setContainerHeight: function() {
+            var styles = this.containerStyles();
+
+            styles['height'] = this.totalHeight + 'px';
+            this.containerStyles(styles);
+        },
+
+        /**
+         * Set layout styles inside the container
+         */
+        setLayoutStyles: function() {
+            var containerWidth = parseInt(this.container.clientWidth),
+                row = [],
+                translateX = 0,
+                translateY = 0,
+                ratio = 0,
+                imageWidth = 0,
+                rowHeight = 0;
+
+            this.setMinRatio();
+
+            this.images().forEach(function(image, index) {
+                ratio += parseFloat(image.ratio);
+                row.push(image);
+
+                if (ratio >= this.minRatio || index + 1 === this.images().length) {
+                    ratio = Math.max(ratio, this.minRatio);
+                    rowHeight = (containerWidth - this.imageMargin * (row.length - 1)) / ratio;
+
+                    row.forEach(function(img) {
+                        imageWidth = rowHeight * img.ratio;
+                        this.setImageStyles(img.id, imageWidth, rowHeight, translateX, translateY);
+                        translateX += imageWidth + this.imageMargin;
+                    }.bind(this));
+
+                    row = [];
+                    ratio = 0;
+                    translateY += parseInt(rowHeight) + this.imageMargin;
+                    translateX = 0;
+                }
+            }.bind(this));
+            this.totalHeight = translateY - this.imageMargin;
+        },
+
+        /**
+         * Set styles for every image in layout
+         *
+         * @param {Number} imageId
+         * @param {Number} imageWidth
+         * @param {Number} rowHeight
+         * @param {Number} translateX
+         * @param {Number} translateY
+         */
+        setImageStyles: function (imageId, imageWidth, rowHeight, translateX, translateY) {
+            $('[data-id="' + imageId + '"]')
+                .css('width', parseInt(imageWidth) + 'px')
+                .css('height', parseInt(rowHeight) + 'px')
+                .css('transform', ('translate3d(' + translateX + 'px,' + translateY + 'px, 0)'));
+        },
+
+        /**
+         * Set min ratio for images in layout
+         */
+        setMinRatio: function() {
+            if (this.containerWidth <= 640) {
+                this.minRatio = 2;
+            } else if (this.containerWidth <= 1280) {
+                this.minRatio = 4;
+            } else if (this.containerWidth <= 1920) {
+                this.minRatio = 5;
+            } else {
+                this.minRatio = 6;
+            }
+        }
+    });
+});