Skip to content

Commit 7d3938b

Browse files
magento-engcom-teammagento-engcom-team
committed
ENGCOM-6244: Added masonry grid and columns components #25464
- Merge Pull Request #25464 from sivaschenko/magento2:masonry-overlay - Merged commits: 1. 81d2758 2. c0119d9 3. c657fb2 4. 5aebbc0 5. 02dfa0d 6. f7784b5 7. c3f8623 8. 0e5eaaf 9. 4787165
2 parents d585442 + 4787165 commit 7d3938b

File tree

8 files changed

+642
-0
lines changed

8 files changed

+642
-0
lines changed

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

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
/**
2+
* Copyright © Magento, Inc. All rights reserved.
3+
* See COPYING.txt for license details.
4+
*/
5+
define([
6+
'jquery',
7+
'Magento_Ui/js/grid/columns/column'
8+
], function ($, Column) {
9+
'use strict';
10+
11+
return Column.extend({
12+
defaults: {
13+
previewImageSelector: '[data-image-preview]',
14+
visibleRecord: null,
15+
height: 0,
16+
displayedRecord: {},
17+
lastOpenedImage: null,
18+
modules: {
19+
masonry: '${ $.parentName }',
20+
thumbnailComponent: '${ $.parentName }.thumbnail_url'
21+
},
22+
statefull: {
23+
sorting: true,
24+
lastOpenedImage: true
25+
},
26+
listens: {
27+
'${ $.provider }:params.filters': 'hide',
28+
'${ $.provider }:params.search': 'hide'
29+
},
30+
exports: {
31+
height: '${ $.parentName }.thumbnail_url:previewHeight'
32+
}
33+
},
34+
35+
/**
36+
* Init observable variables
37+
* @return {Object}
38+
*/
39+
initObservable: function () {
40+
this._super()
41+
.observe([
42+
'visibleRecord',
43+
'height',
44+
'displayedRecord',
45+
'lastOpenedImage'
46+
]);
47+
48+
return this;
49+
},
50+
51+
/**
52+
* Next image preview
53+
*
54+
* @param {Object} record
55+
*/
56+
next: function (record) {
57+
var recordToShow = this.getRecord(record._rowIndex + 1);
58+
59+
recordToShow.rowNumber = record.lastInRow ? record.rowNumber + 1 : record.rowNumber;
60+
this.show(recordToShow);
61+
},
62+
63+
/**
64+
* Previous image preview
65+
*
66+
* @param {Object} record
67+
*/
68+
prev: function (record) {
69+
var recordToShow = this.getRecord(record._rowIndex - 1);
70+
71+
recordToShow.rowNumber = record.firstInRow ? record.rowNumber - 1 : record.rowNumber;
72+
this.show(recordToShow);
73+
},
74+
75+
/**
76+
* Get record
77+
*
78+
* @param {Integer} recordIndex
79+
*
80+
* @return {Object}
81+
*/
82+
getRecord: function (recordIndex) {
83+
return this.masonry().rows()[recordIndex];
84+
},
85+
86+
/**
87+
* Set selected row id
88+
*
89+
* @param {Number} rowId
90+
* @private
91+
*/
92+
_selectRow: function (rowId) {
93+
this.thumbnailComponent().previewRowId(rowId);
94+
},
95+
96+
/**
97+
* Show image preview
98+
*
99+
* @param {Object} record
100+
*/
101+
show: function (record) {
102+
var img;
103+
104+
this.hide();
105+
this.displayedRecord(record);
106+
this._selectRow(record.rowNumber || null);
107+
this.visibleRecord(record._rowIndex);
108+
109+
img = $(this.previewImageSelector + ' img');
110+
111+
if (img.get(0).complete) {
112+
this.updateHeight();
113+
this.scrollToPreview();
114+
} else {
115+
img.load(function () {
116+
this.updateHeight();
117+
this.scrollToPreview();
118+
}.bind(this));
119+
}
120+
121+
this.lastOpenedImage(record._rowIndex);
122+
},
123+
124+
/**
125+
* Update image preview section height
126+
*/
127+
updateHeight: function () {
128+
this.height($(this.previewImageSelector).height() + 'px');
129+
},
130+
131+
/**
132+
* Close image preview
133+
*/
134+
hide: function () {
135+
this.lastOpenedImage(null);
136+
this.visibleRecord(null);
137+
this.height(0);
138+
this._selectRow(null);
139+
},
140+
141+
/**
142+
* Returns visibility for given record.
143+
*
144+
* @param {Object} record
145+
* @return {*|bool}
146+
*/
147+
isVisible: function (record) {
148+
if (this.lastOpenedImage() === record._rowIndex &&
149+
this.visibleRecord() === null
150+
) {
151+
this.show(record);
152+
}
153+
154+
return this.visibleRecord() === record._rowIndex || false;
155+
},
156+
157+
/**
158+
* Get styles for preview
159+
*
160+
* @returns {Object}
161+
*/
162+
getStyles: function () {
163+
return {
164+
'margin-top': '-' + this.height()
165+
};
166+
},
167+
168+
/**
169+
* Scroll to preview window
170+
*/
171+
scrollToPreview: function () {
172+
$(this.previewImageSelector).get(0).scrollIntoView({
173+
behavior: 'smooth',
174+
block: 'center',
175+
inline: 'nearest'
176+
});
177+
}
178+
});
179+
});

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

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
/**
2+
* Copyright © Magento, Inc. All rights reserved.
3+
* See COPYING.txt for license details.
4+
*/
5+
define([
6+
'Magento_Ui/js/grid/columns/column'
7+
], function (Column) {
8+
'use strict';
9+
10+
return Column.extend({
11+
defaults: {
12+
modules: {
13+
previewComponent: '${ $.parentName }.preview'
14+
},
15+
previewRowId: null,
16+
previewHeight: 0,
17+
fields: {
18+
id: 'id',
19+
url: 'url'
20+
}
21+
},
22+
23+
/**
24+
* Init observable variables
25+
* @return {Object}
26+
*/
27+
initObservable: function () {
28+
this._super()
29+
.observe([
30+
'previewRowId',
31+
'previewHeight'
32+
]);
33+
34+
return this;
35+
},
36+
37+
/**
38+
* Returns url to given record.
39+
*
40+
* @param {Object} record - Data to be preprocessed.
41+
* @returns {String}
42+
*/
43+
getUrl: function (record) {
44+
return record[this.fields.url];
45+
},
46+
47+
/**
48+
* Returns id to given record.
49+
*
50+
* @param {Object} record - Data to be preprocessed.
51+
* @returns {Number}
52+
*/
53+
getId: function (record) {
54+
return record[this.fields.id];
55+
},
56+
57+
/**
58+
* Returns container styles to given record.
59+
*
60+
* @param {Object} record - Data to be preprocessed.
61+
* @returns {Object}
62+
*/
63+
getStyles: function (record) {
64+
var styles = record.styles();
65+
66+
styles['margin-bottom'] = this.previewRowId() === record.rowNumber ? this.previewHeight : 0;
67+
record.styles(styles);
68+
69+
return record.styles;
70+
},
71+
72+
/**
73+
* Returns class list to given record.
74+
*
75+
* @param {Object} record - Data to be preprocessed.
76+
* @returns {Object}
77+
*/
78+
getClasses: function (record) {
79+
return record.css || {};
80+
},
81+
82+
/**
83+
* Expand image preview
84+
*/
85+
expandPreview: function (record) {
86+
this.previewComponent().show(record);
87+
}
88+
});
89+
});

‎app/code/Magento/Ui/view/base/web/js/grid/columns/overlay.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/**
2+
* Copyright © Magento, Inc. All rights reserved.
3+
* See COPYING.txt for license details.
4+
*/
5+
define([
6+
'Magento_Ui/js/grid/columns/column'
7+
], function (Column) {
8+
'use strict';
9+
10+
return Column.extend({
11+
/**
12+
* If overlay should be visible
13+
*
14+
* @param {Object} row
15+
* @returns {Boolean}
16+
*/
17+
isVisible: function (row) {
18+
return !!row[this.index];
19+
},
20+
21+
/**
22+
* Get overlay label
23+
*
24+
* @param {Object} row
25+
* @returns {String}
26+
*/
27+
getLabel: function (row) {
28+
return row[this.index];
29+
}
30+
});
31+
});

0 commit comments

Comments
 (0)