Skip to content

Commit

Permalink
magento#4: Basic component implementation
Browse files Browse the repository at this point in the history
  • Loading branch information
Stanislav Idolov committed Jun 6, 2019
1 parent 636fe8c commit 50b399d
Show file tree
Hide file tree
Showing 11 changed files with 273 additions and 39 deletions.
34 changes: 34 additions & 0 deletions AdobeStockAsset/Model/Asset.php
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,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\AdobeStockImageApi\Api\Data\AssetExtensionInterface $extensionAttributes
* @return $this
Expand Down
4 changes: 3 additions & 1 deletion AdobeStockAsset/Model/Client.php
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,9 @@ public function search(SearchRequestInterface $request) : Result
/** @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;
}

Expand Down
22 changes: 22 additions & 0 deletions AdobeStockAssetApi/Api/Data/AssetInterface.php
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,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.
*
Expand Down
4 changes: 3 additions & 1 deletion AdobeStockImage/etc/adobe_stock_requests.xml
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
7 changes: 3 additions & 4 deletions AdobeStockImageAdminUi/Model/Listing/DataProvider.php
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,9 @@ class DataProvider extends \Magento\Framework\View\Element\UiComponent\DataProvi
private $searchResultFactory;

/**
* DataProvider constructor.
* @param $name
* @param $primaryFieldName
* @param $requestFieldName
* @param string $name
* @param string $primaryFieldName
* @param string $requestFieldName
* @param ReportingInterface $reporting
* @param SearchCriteriaBuilder $searchCriteriaBuilder
* @param RequestInterface $request
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,11 +39,16 @@
<paging name="listing_paging"/>
</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>
<filter>text</filter>
<label translate="true">Image</label>
<bodyTmpl>Magento_AdobeStockImageAdminUi/grid/cells/image</bodyTmpl>
</settings>
</column>
</columns>
Expand Down
30 changes: 19 additions & 11 deletions AdobeStockImageAdminUi/view/adminhtml/web/css/source/_module.less
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
}
}
}
}
163 changes: 163 additions & 0 deletions AdobeStockImageAdminUi/view/adminhtml/web/js/components/masonry.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
/**
* 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: [],

containerId: '',

minRatio: null,
containerWidth: window.innerWidth,

/**
* Type: Number
* Description: Size in pixels of the gap between images in the grid.
*/
imageMargin: 20,

containerStyles: {},
},

initObservable: function () {
this._super()
.observe([
'rows',
'images',
'containerStyles'
]);

return this;
},

/**
* @param rows
* @return {exports}
*/
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;
},

prepareImages: function (rows) {
this.images(rows.map( (asset) => {
return {
src: asset.url,
ratio: (asset.width / asset.height).toFixed(2),
id: asset.id
};
}));
},

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);
}
}
});
},

setContainerHeight: function() {
var styles = this.containerStyles();

styles['height'] = this.totalHeight + 'px';
this.containerStyles(styles);
},

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;
},

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)'));
},

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;
}
}
});
});

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,7 @@
* See COPYING.txt for license details.
*/
-->
<div class="adobe-stock-image-grid" data-role="grid-wrapper">
<div class="adobe-stock-image-column">
<div repeat="foreach: rows, item: '$row'">
<div outerfasteach="data: getVisible(), as: '$col'"
css="getFieldClass($row())" click="getFieldHandler($row())" template="getBody()"/>
</div>
<div ifnot="hasData()">
<td attr="colspan: countVisible()" translate="'We couldn\'t find any records.'"/>
</div>
</div>
</div>

<!-- ko foreach: elems() -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
15 changes: 15 additions & 0 deletions AdobeStockImageAdminUi/view/adminhtml/web/template/masonry.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<div data-role="grid-wrapper" ko-style="containerStyles" attr="'data-id': containerId">
<div class="masonry-image-column">
<!-- ko foreach: { data: images, as: 'row' } -->
<div class="masonry-image-block" ko-style="row.styles" attr="'data-id': row.id">
<img attr="src: row.src">
</div>
<!-- /ko -->
</div>
</div>

0 comments on commit 50b399d

Please sign in to comment.