' + quotaMessage + '
', - actions: { - confirm: function () { - if (canPurchase) { - licenseAndSave(record); - } else { - window.open(config.buyCreditsUrl); - } - } - }, - buttons: [{ - text: $.mage.__('Cancel'), - class: 'action-secondary action-dismiss', - click: function () { - this.closeModal(); - } - }, { - text: canPurchase ? $.mage.__('OK') : $.mage.__('Buy Credits'), - class: 'action-primary action-accept', - click: function () { - this.closeModal(); - this.options.actions.confirm(); - } - }] - }) - }, - - error: function (response) { - messages.add('error', response.responseJSON.message); - messages.scheduleCleanup(3); - } - } - ); - }, - - /** - * Process of license - * - * @param {Object} record - */ - licenseProcess: function () { - this.login().login() - .then(function () { - this.showLicenseConfirmation(this.displayedRecord()); - }.bind(this)) - .catch(function (error) { - messages.add('error', error.message); - }) - .finally((function () { - messages.scheduleCleanup(this.messageDelay); - }).bind(this)); - }, - - /** - * Show related image data in the preview section - * - * @param {Object} record - */ - showRelated: function (record) { - this.hideAllKeywords(); - this.displayedRecord(record); - this._updateHeight(); - }, - - /** - * Next related image preview - * - * @param {Object} record - */ - nextRelated: function (record) { - var relatedList = this.selectedRelatedType() === 'series' ? record.series() : record.model(), - nextRelatedIndex = _.findLastIndex(relatedList, {id: this.displayedRecord().id}) + 1, - nextRelated = relatedList[nextRelatedIndex]; - - if (typeof nextRelated === 'undefined') { - return; - } - - this.switchImagePreviewToRelatedImage(nextRelated, record); - }, - - /** - * Previous related preview - * - * @param {Object} record - */ - prevRelated: function (record) { - var relatedList = this.selectedRelatedType() === 'series' ? record.series() : record.model(), - prevRelatedIndex = _.findLastIndex(relatedList, {id: this.displayedRecord().id}) - 1, - prevRelated = relatedList[prevRelatedIndex]; - - if (typeof prevRelated === 'undefined') { - return; - } - - this.switchImagePreviewToRelatedImage(prevRelated, record); - }, - - /** - * Get previous button disabled - * - * @param {Object} record - * - * @return {Boolean} - */ - getPreviousButtonDisabled: function (record) { - if (!this.selectedRelatedType()) { - return false; - } - var relatedList = this.selectedRelatedType() === 'series' ? record.series() : record.model(), - prevRelatedIndex, - prevRelated; - - prevRelatedIndex = _.findLastIndex(relatedList, {id: this.displayedRecord().id}) - 1; - prevRelated = relatedList[prevRelatedIndex]; - - if (typeof prevRelated === 'undefined') { - return true; - } - - return false; - }, - - /** - * Get next button disabled - * - * @param {Object} record - * - * @return {Boolean} - */ - getNextButtonDisabled: function (record) { - if (!this.selectedRelatedType()) { - return false; - } - var relatedList = this.selectedRelatedType() === 'series' ? record.series() : record.model(), - nextRelatedIndex, - nextRelated; - - nextRelatedIndex = _.findLastIndex(relatedList, {id: this.displayedRecord().id}) + 1; - nextRelated = relatedList[nextRelatedIndex]; - - if (typeof nextRelated === 'undefined') { - return true; - } - - return false; - }, - - /** - * Switch image preview to related image - * - * @param {Object|null} relatedImage - * @param {Object} record - */ - switchImagePreviewToRelatedImage: function (relatedImage, record) { - if (!relatedImage) { - this.selectedRelatedType(null); - - return; - } - - if (this.displayedRecord().id === relatedImage.id) { - return; - } - - this.showRelated(relatedImage); - }, - - /** - * Switch image preview to series image - * - * @param {Object} series - * @param {Object} record - */ - switchImagePreviewToSeriesImage: function (series, record) { - this.selectedRelatedType('series'); - this.switchImagePreviewToRelatedImage(series, record); - }, - - /** - * Switch image preview to model image - * - * @param {Object} model - * @param {Object} record - */ - switchImagePreviewToModelImage: function (model, record) { - this.selectedRelatedType('model'); - this.switchImagePreviewToRelatedImage(model, record); - }, + } }); }); diff --git a/AdobeStockImageAdminUi/view/adminhtml/web/js/components/grid/column/preview/actions.js b/AdobeStockImageAdminUi/view/adminhtml/web/js/components/grid/column/preview/actions.js new file mode 100644 index 000000000000..494019f2060f --- /dev/null +++ b/AdobeStockImageAdminUi/view/adminhtml/web/js/components/grid/column/preview/actions.js @@ -0,0 +1,242 @@ +/** + * Copyright © Magento, Inc. All rights reserved. + * See COPYING.txt for license details. + */ +define([ + 'uiComponent', + 'jquery', + 'Magento_AdobeStockImageAdminUi/js/model/messages', + 'Magento_AdobeStockImageAdminUi/js/media-gallery', + 'Magento_Ui/js/modal/confirm', + 'Magento_Ui/js/modal/prompt', + 'text!Magento_AdobeStockImageAdminUi/template/modal/adobe-modal-prompt-content.html' +], function (Component, $, messages, mediaGallery, confirmation, prompt, adobePromptContentTmpl) { + 'use strict'; + + return Component.extend({ + defaults: { + template: 'Magento_AdobeStockImageAdminUi/grid/column/preview/actions', + loginProvider: 'name = adobe-login, ns = adobe-login', + previewProvider: 'name = adobe_stock_images_listing.adobe_stock_images_listing.adobe_stock_images_columns.preview, ns = ${ $.ns }', + mediaGallerySelector: '.media-gallery-modal:has(#search_adobe_stock)', + adobeStockModalSelector: '#adobe-stock-images-search-modal', + downloadImagePreviewUrl: 'adobe_stock/preview/download', + licenseAndDownloadUrl: 'adobe_stock/license/license', + confirmationUrl: 'adobe_stock/license/confirmation', + buyCreditsUrl: 'https://stock.adobe.com/', + messageDelay: 5, + modules: { + login: '${ $.loginProvider }', + preview: '${ $.previewProvider }' + } + }, + + /** + * Returns is_downloaded flag as observable for given record + * + * @returns {observable} + */ + isDownloaded: function () { + return this.preview().displayedRecord().is_downloaded; + }, + + /** + * Locate downloaded image in media browser + */ + locate: function () { + $(this.preview().adobeStockModalSelector).trigger('closeModal'); + mediaGallery.locate(this.preview().displayedRecord().path); + }, + + /** + * Save preview + */ + savePreview: function () { + prompt({ + title: 'Save Preview', + content: 'File Name', + value: this.generateImageName(this.preview().displayedRecord()), + imageExtension: this.getImageExtension(this.preview().displayedRecord()), + promptContentTmpl: adobePromptContentTmpl, + modalClass: 'adobe-stock-save-preview-prompt', + validation: true, + promptField: '[data-role="promptField"]', + validationRules: ['required-entry'], + attributesForm: { + novalidate: 'novalidate', + action: '', + onkeydown: 'return event.key != \'Enter\';' + }, + attributesField: { + name: 'name', + 'data-validate': '{required:true}', + maxlength: '128' + }, + context: this, + actions: { + confirm: function (fileName) { + this.save(this.preview().displayedRecord(), fileName, this.preview().downloadImagePreviewUrl); + }.bind(this) + }, + buttons: [{ + text: $.mage.__('Cancel'), + class: 'action-secondary action-dismiss' + }, { + text: $.mage.__('Confirm'), + class: 'action-primary action-accept' + }] + }); + }, + + /** + * Save record as image + * + * @param {Object} record + * @param {String} fileName + * @param {String} actionURI + */ + save: function (record, fileName, actionURI) { + var mediaBrowser = $(this.preview().mediaGallerySelector).data('mageMediabrowser'), + destinationPath = (mediaBrowser.activeNode.path || '') + '/' + fileName + '.' + this.getImageExtension(record); + + $.ajax({ + type: 'POST', + url: actionURI, + dataType: 'json', + showLoader: true, + data: { + 'media_id': record.id, + 'destination_path': destinationPath + }, + context: this, + success: function () { + var displayedRecord = this.preview().displayedRecord(); + displayedRecord.is_downloaded = 1; + displayedRecord.path = destinationPath; + this.preview().displayedRecord(displayedRecord); + $(this.preview().adobeStockModalSelector).trigger('closeModal'); + mediaBrowser.reload(true); + }, + error: function (response) { + messages.add('error', response.message); + messages.scheduleCleanup(3); + } + }); + }, + + /** + * Generate meaningful name image file + * + * @param {Object} record + * @return string + */ + generateImageName: function (record) { + var imageName = record.title.substring(0, 32).replace(/\s+/g, '-').toLowerCase(); + return imageName; + }, + + /** + * Get image file extension + * + * @param {Object} record + * @return string + */ + getImageExtension: function (record) { + var imageType = record.content_type.match(/[^/]{1,4}$/); + return imageType; + }, + + /** + * Get messages + * + * @return {Array} + */ + getMessages: function () { + return messages.get(); + }, + + /** + * License and save image + * + * @param {Object} record + */ + licenseAndSave: function (record) { + this.save(record, this.generateImageName(record), this.preview().licenseAndDownloadUrl); + }, + + /** + * Shows license confirmation popup with information about current license quota + * + * @param {Object} record + */ + showLicenseConfirmation: function (record) { + var licenseAndSave = this.licenseAndSave.bind(this); + $.ajax( + { + type: 'POST', + url: this.preview().confirmationUrl, + dataType: 'json', + data: { + 'media_id': record.id + }, + context: this, + showLoader: true, + + success: function (response) { + var confirmationContent = $.mage.__('License "' + record.title + '"'), + quotaMessage = response.result.message, + canPurchase = response.result.canLicense; + confirmation({ + title: $.mage.__('License Adobe Stock Image?'), + content: confirmationContent + '' + quotaMessage + '
', + actions: { + confirm: function () { + if (canPurchase) { + licenseAndSave(record); + } else { + window.open(this.preview().buyCreditsUrl); + } + } + }, + buttons: [{ + text: $.mage.__('Cancel'), + class: 'action-secondary action-dismiss', + click: function () { + this.closeModal(); + } + }, { + text: canPurchase ? $.mage.__('OK') : $.mage.__('Buy Credits'), + class: 'action-primary action-accept', + click: function () { + this.closeModal(); + this.options.actions.confirm(); + } + }] + }) + }, + + error: function (response) { + messages.add('error', response.responseJSON.message); + messages.scheduleCleanup(3); + } + } + ); + }, + + /** + * Process of license + */ + licenseProcess: function () { + this.login().login() + .then(function () { + this.showLicenseConfirmation(this.preview().displayedRecord()); + }.bind(this)) + .catch(function (error) { + messages.add('error', error.message); + }) + .finally((function () { + messages.scheduleCleanup(this.messageDelay); + }).bind(this)); + } + }); +}); diff --git a/AdobeStockImageAdminUi/view/adminhtml/web/js/components/grid/column/preview/keywords.js b/AdobeStockImageAdminUi/view/adminhtml/web/js/components/grid/column/preview/keywords.js new file mode 100644 index 000000000000..8f89f9dc002d --- /dev/null +++ b/AdobeStockImageAdminUi/view/adminhtml/web/js/components/grid/column/preview/keywords.js @@ -0,0 +1,94 @@ +/** + * Copyright © Magento, Inc. All rights reserved. + * See COPYING.txt for license details. + */ +define([ + 'uiComponent', + 'underscore' +], function (Component, _) { + 'use strict'; + + return Component.extend({ + defaults: { + template: 'Magento_AdobeStockImageAdminUi/grid/column/preview/keywords', + chipsProvider: 'componentType = filtersChips, ns = ${ $.ns }', + searchChipsProvider: 'componentType = keyword_search, ns = ${ $.ns }', + defaultKeywordsLimit: 5, + keywordsLimit: 5, + canViewMoreKeywords: true, + modules: { + searchChips: '${ $.searchChipsProvider }', + chips: '${ $.chipsProvider }' + }, + exports: { + inputValue: '${ $.provider }:params.search', + chipInputValue: '${ $.searchChipsProvider }:value' + } + }, + + /** + * Init observable variables + * @return {Object} + */ + initObservable: function () { + this._super() + .observe([ + 'keywordsLimit', + 'canViewMoreKeywords' + ]); + + return this; + }, + + /** + * Returns keywords to display under the attributes image + * + * @returns {*[]} + */ + getKeywords: function (record) { + return record.keywords; + }, + + /** + * Returns keywords limit to show no of keywords + */ + getKeywordsLimit: function () { + return this.keywordsLimit(); + }, + + /** + * Show all the related keywords + */ + viewAllKeywords: function (record) { + this.keywordsLimit(record.keywords.length); + this.canViewMoreKeywords(false); + this._updateHeight(); + }, + + /** + * Hide all the related keywords + */ + hideAllKeywords: function () { + this.keywordsLimit(this.defaultKeywordsLimit); + this.canViewMoreKeywords(true); + }, + + /** + * Check if view all button is visible or not + * + * @returns {boolean} + */ + canViewMoreKeywords: function () { + return this.canViewMoreKeywords(); + }, + + /** + * Drop all filters and initiate search on keyword click event + */ + searchByKeyWord: function (keyword) { + _.invoke(this.chips().elems(), 'clear'); + this.inputValue(keyword); + this.chipInputValue(keyword); + } + }); +}); diff --git a/AdobeStockImageAdminUi/view/adminhtml/web/js/components/grid/column/preview/related.js b/AdobeStockImageAdminUi/view/adminhtml/web/js/components/grid/column/preview/related.js new file mode 100644 index 000000000000..f4aeae2c2a8e --- /dev/null +++ b/AdobeStockImageAdminUi/view/adminhtml/web/js/components/grid/column/preview/related.js @@ -0,0 +1,228 @@ +/** + * Copyright © Magento, Inc. All rights reserved. + * See COPYING.txt for license details. + */ +define([ + 'uiComponent', + 'underscore', + 'jquery', + 'ko', + 'mage/backend/tabs' +], function (Component, _, $, ko) { + 'use strict'; + + return Component.extend({ + defaults: { + template: 'Magento_AdobeStockImageAdminUi/grid/column/preview/related', + filterChipsProvider: 'componentType = filters, ns = ${ $.ns }', + previewProvider: 'name = adobe_stock_images_listing.adobe_stock_images_listing.adobe_stock_images_columns.preview, ns = ${ $.ns }', + serieFilterValue: '', + modelFilterValue: '', + selectedRelatedType: null, + statefull: { + serieFilterValue: true, + modelFilterValue: true + }, + modules: { + chips: '${ $.chipsProvider }', + filterChips: '${ $.filterChipsProvider }', + preview: '${ $.previewProvider }' + }, + exports: { + serieFilterValue: '${ $.provider }:params.filters.serie_id', + modelFilterValue: '${ $.provider }:params.filters.model_id' + } + }, + + /** + * @param {Object} record + */ + initRecord: function (record) { + if (!record.model || !record.series) { + record.series = ko.observable([]); + record.model = ko.observable([]); + } + }, + + /** + * Init observable variables + * @return {Object} + */ + initObservable: function () { + this._super() + .observe([ + 'serieFilterValue', + 'modelFilterValue', + 'selectedRelatedType' + ]); + + return this; + }, + + /** + * Returns series to display under the image + * + * @param {Object} record + * @returns {*[]} + */ + getSeries: function (record) { + return record.series; + }, + + /** + * Returns model to display under the image + * + * @param {Object} record + * @returns {*[]} + */ + getModel: function (record) { + return record.model; + }, + + /** + * Filter images from serie_id + * + * @param {Object} record + */ + seeMoreFromSeries: function(record) { + this.serieFilterValue(record.id); + this.filterChips().set('applied', {'serie_id' : record.id.toString()}) + }, + + /** + * Filter images from serie_id + * + * @param {Object} record + */ + seeMoreFromModel: function(record) { + this.modelFilterValue(record.id); + this.filterChips().set('applied', {'model_id' : record.id.toString()}) + }, + + /** + * Next related image preview + * + * @param {Object} record + */ + nextRelated: function (record) { + var relatedList = this.selectedRelatedType() === 'series' ? record.series() : record.model(), + nextRelatedIndex = _.findLastIndex(relatedList, {id: this.preview().displayedRecord().id}) + 1, + nextRelated = relatedList[nextRelatedIndex]; + + if (typeof nextRelated === 'undefined') { + return; + } + + this.switchImagePreviewToRelatedImage(nextRelated, record); + }, + + /** + * Previous related preview + * + * @param {Object} record + */ + prevRelated: function (record) { + var relatedList = this.selectedRelatedType() === 'series' ? record.series() : record.model(), + prevRelatedIndex = _.findLastIndex(relatedList, {id: this.preview().displayedRecord().id}) - 1, + prevRelated = relatedList[prevRelatedIndex]; + + if (typeof prevRelated === 'undefined') { + return; + } + + this.switchImagePreviewToRelatedImage(prevRelated, record); + }, + + /** + * Get previous button disabled + * + * @param {Object} record + * + * @return {Boolean} + */ + getPreviousButtonDisabled: function (record) { + if (!this.selectedRelatedType()) { + return false; + } + var relatedList = this.selectedRelatedType() === 'series' ? record.series() : record.model(), + prevRelatedIndex, + prevRelated; + + prevRelatedIndex = _.findLastIndex(relatedList, {id: this.preview().displayedRecord().id}) - 1; + prevRelated = relatedList[prevRelatedIndex]; + + if (typeof prevRelated === 'undefined') { + return true; + } + + return false; + }, + + /** + * Get next button disabled + * + * @param {Object} record + * + * @return {Boolean} + */ + getNextButtonDisabled: function (record) { + if (!this.selectedRelatedType()) { + return false; + } + var relatedList = this.selectedRelatedType() === 'series' ? record.series() : record.model(), + nextRelatedIndex, + nextRelated; + + nextRelatedIndex = _.findLastIndex(relatedList, {id: this.preview().displayedRecord().id}) + 1; + nextRelated = relatedList[nextRelatedIndex]; + + if (typeof nextRelated === 'undefined') { + return true; + } + + return false; + }, + + /** + * Switch image preview to related image + * + * @param {Object|null} relatedImage + * @param {Object} record + */ + switchImagePreviewToRelatedImage: function (relatedImage, record) { + if (!relatedImage) { + this.selectedRelatedType(null); + + return; + } + + if (this.preview().displayedRecord().id === relatedImage.id) { + return; + } + + this.preview().showRelated(relatedImage); + }, + + /** + * Switch image preview to series image + * + * @param {Object} series + * @param {Object} record + */ + switchImagePreviewToSeriesImage: function (series, record) { + this.selectedRelatedType('series'); + this.switchImagePreviewToRelatedImage(series, record); + }, + + /** + * Switch image preview to model image + * + * @param {Object} model + * @param {Object} record + */ + switchImagePreviewToModelImage: function (model, record) { + this.selectedRelatedType('model'); + this.switchImagePreviewToRelatedImage(model, record); + } + }); +}); diff --git a/AdobeStockImageAdminUi/view/adminhtml/web/js/config.js b/AdobeStockImageAdminUi/view/adminhtml/web/js/config.js deleted file mode 100644 index 26b38682a163..000000000000 --- a/AdobeStockImageAdminUi/view/adminhtml/web/js/config.js +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Copyright © Magento, Inc. All rights reserved. - * See COPYING.txt for license details. - */ -define([], function () { - 'use strict'; - - return { - mediaGallerySelector: '.media-gallery-modal:has(#search_adobe_stock)', - adobeStockModalSelector: '#adobe-stock-images-search-modal', - downloadPreviewUrl: 'adobe_stock/preview/download', - licenseAndDownloadUrl: 'adobe_stock/license/license', - confirmationUrl: 'adobe_stock/license/confirmation', - relatedImagesUrl: 'adobe_stock/preview/relatedimages' - }; -}); diff --git a/AdobeStockImageAdminUi/view/adminhtml/web/panel.js b/AdobeStockImageAdminUi/view/adminhtml/web/panel.js index 418f569ffeed..45fb2385a630 100644 --- a/AdobeStockImageAdminUi/view/adminhtml/web/panel.js +++ b/AdobeStockImageAdminUi/view/adminhtml/web/panel.js @@ -6,9 +6,8 @@ define([ 'uiElement', 'jquery', - 'mage/translate', - 'Magento_AdobeStockImageAdminUi/js/config' -], function (Element, $, $t, config) { + 'mage/translate' +], function (Element, $, $t) { 'use strict'; return Element.extend({ @@ -28,12 +27,6 @@ define([ initialize: function () { this._super(); - config.downloadPreviewUrl = this.downloadPreviewUrl; - config.licenseAndDownloadUrl = this.licenseAndDownloadUrl; - config.buyCreditsUrl = this.buyCreditsUrl; - config.confirmationUrl = this.confirmationUrl; - config.relatedImagesUrl = this.relatedImagesUrl; - $(this.containerId).modal({ type: 'slide', buttons: [], diff --git a/AdobeStockImageAdminUi/view/adminhtml/web/template/grid/column/image-preview.html b/AdobeStockImageAdminUi/view/adminhtml/web/template/grid/column/image-preview.html index 4b0895a4b8da..132604bd49d9 100644 --- a/AdobeStockImageAdminUi/view/adminhtml/web/template/grid/column/image-preview.html +++ b/AdobeStockImageAdminUi/view/adminhtml/web/template/grid/column/image-preview.html @@ -1,4 +1,3 @@ - - - - - - - + + + + + - -
-
-
-
+
+
+
+
+
+
+
diff --git a/AdobeStockImageAdminUi/view/adminhtml/web/template/grid/column/preview/actions.html b/AdobeStockImageAdminUi/view/adminhtml/web/template/grid/column/preview/actions.html
new file mode 100644
index 000000000000..0ec1d49af894
--- /dev/null
+++ b/AdobeStockImageAdminUi/view/adminhtml/web/template/grid/column/preview/actions.html
@@ -0,0 +1,29 @@
+
+
+
+
+
diff --git a/AdobeStockImageAdminUi/view/adminhtml/web/template/grid/column/preview/keywords.html b/AdobeStockImageAdminUi/view/adminhtml/web/template/grid/column/preview/keywords.html
new file mode 100644
index 000000000000..fd2a4b4e55d8
--- /dev/null
+++ b/AdobeStockImageAdminUi/view/adminhtml/web/template/grid/column/preview/keywords.html
@@ -0,0 +1,19 @@
+
+
-
-
-
-
-
-
-
+
+
+
diff --git a/AdobeStockImageAdminUi/view/adminhtml/web/template/grid/column/preview/related.html b/AdobeStockImageAdminUi/view/adminhtml/web/template/grid/column/preview/related.html
new file mode 100644
index 000000000000..091e3b464b11
--- /dev/null
+++ b/AdobeStockImageAdminUi/view/adminhtml/web/template/grid/column/preview/related.html
@@ -0,0 +1,64 @@
+
+
+
\ No newline at end of file
diff --git a/AdobeUi/view/adminhtml/web/js/components/grid/column/image-preview.js b/AdobeUi/view/adminhtml/web/js/components/grid/column/image-preview.js
index acd9a5c51afa..5938851bfab6 100644
--- a/AdobeUi/view/adminhtml/web/js/components/grid/column/image-preview.js
+++ b/AdobeUi/view/adminhtml/web/js/components/grid/column/image-preview.js
@@ -5,7 +5,7 @@
define([
'underscore',
'jquery',
- 'Magento_Ui/js/grid/columns/column',
+ 'Magento_Ui/js/grid/columns/column'
], function (_, $, Column) {
'use strict';
@@ -14,16 +14,48 @@ define([
previewImageSelector: '[data-image-preview]',
visibility: [],
height: 0,
+ previewStyles: {},
+ displayedRecord: {},
lastOpenedImage: null,
modules: {
- masonry: '${ $.parentName }'
+ masonry: '${ $.parentName }',
+ thumbnailComponent: '${ $.parentName }.thumbnail_url',
+ },
+ statefull: {
+ visible: true,
+ sorting: true,
+ lastOpenedImage: true
+ },
+ listens: {
+ '${ $.provider }:params.filters': 'hide',
+ '${ $.provider }:params.search': 'hide'
}
},
+ /**
+ * Init observable variables
+ * @return {Object}
+ */
+ initObservable: function () {
+ this._super()
+ .observe([
+ 'visibility',
+ 'height',
+ 'previewStyles',
+ 'displayedRecord',
+ 'lastOpenedImage'
+ ]);
+ this.height.subscribe(function () {
+ this.thumbnailComponent().previewHeight(this.height());
+ }, this);
+
+ return this;
+ },
+
/**
* Next image preview
*
- * @param record
+ * @param {Object} record
*/
next: function (record) {
var recordToShow = this.getRecord(record._rowIndex + 1);
@@ -34,7 +66,7 @@ define([
/**
* Previous image preview
*
- * @param record
+ * @param {Object} record
*/
prev: function (record) {
var recordToShow = this.getRecord(record._rowIndex - 1);
@@ -73,6 +105,7 @@ define([
img;
this.hide();
+ this.displayedRecord(record);
if (record.rowNumber) {
this._selectRow(record.rowNumber);
@@ -88,7 +121,7 @@ define([
} else {
img.load(this._updateHeight.bind(this));
}
- this.lastOpenedImage = record;
+ this.lastOpenedImage(record._rowIndex);
},
/**
@@ -106,7 +139,7 @@ define([
hide: function () {
var visibility = this.visibility();
- this.lastOpenedImage = null;
+ this.lastOpenedImage(null);
visibility.fill(false);
this.visibility(visibility);
this.height(0);
@@ -120,8 +153,7 @@ define([
* @return {*|boolean}
*/
isVisible: function (record) {
- if (this.lastOpenedImage
- && this.lastOpenedImage._rowIndex === record._rowIndex
+ if (this.lastOpenedImage() === record._rowIndex
&& (
this.visibility()[record._rowIndex] === undefined
|| this.visibility()[record._rowIndex] === false
@@ -130,6 +162,30 @@ define([
this.show(record);
}
return this.visibility()[record._rowIndex] || false;
+ },
+
+ /**
+ * Get styles for preview
+ *
+ * @returns {Object}
+ */
+ getStyles: function () {
+ this.previewStyles({
+ 'margin-top': '-' + this.height()
+ });
+
+ return this.previewStyles();
+ },
+
+ /**
+ * Scroll to preview window
+ */
+ scrollToPreview: function () {
+ $(this.previewImageSelector).get(0).scrollIntoView({
+ behavior: 'smooth',
+ block: 'center',
+ inline: 'nearest'
+ });
}
});
});
diff --git a/AdobeUi/view/adminhtml/web/js/components/grid/column/image.js b/AdobeUi/view/adminhtml/web/js/components/grid/column/image.js
index 8469de69265b..b6858cf669c7 100644
--- a/AdobeUi/view/adminhtml/web/js/components/grid/column/image.js
+++ b/AdobeUi/view/adminhtml/web/js/components/grid/column/image.js
@@ -65,6 +65,7 @@ define([
styles['margin-bottom'] = this.previewRowId() === record.rowNumber ? this.previewHeight : 0;
record.styles(styles);
+
return record.styles;
},
diff --git a/AdobeUi/view/adminhtml/web/js/components/grid/column/overlay.js b/AdobeUi/view/adminhtml/web/js/components/grid/column/overlay.js
index d14e4c83f975..2beeed6968f0 100644
--- a/AdobeUi/view/adminhtml/web/js/components/grid/column/overlay.js
+++ b/AdobeUi/view/adminhtml/web/js/components/grid/column/overlay.js
@@ -23,6 +23,7 @@ define([
return styles;
}
+
return {};
}
});
diff --git a/AdobeUi/view/adminhtml/web/js/components/grid/masonry.js b/AdobeUi/view/adminhtml/web/js/components/grid/masonry.js
index f0cfa4d6570c..4ed80cf963f2 100644
--- a/AdobeUi/view/adminhtml/web/js/components/grid/masonry.js
+++ b/AdobeUi/view/adminhtml/web/js/components/grid/masonry.js
@@ -6,10 +6,10 @@ define([
'Magento_Ui/js/grid/listing',
'jquery',
'ko'
-], function (Element, $, ko) {
+], function (Listing, $, ko) {
'use strict';
- return Element.extend({
+ return Listing.extend({
defaults: {
template: 'Magento_AdobeUi/grid/masonry',
imports: {
@@ -156,7 +156,7 @@ define([
* Wait for container to initialize
*/
waitForContainer: function (callback) {
- if (typeof this.container === "undefined") {
+ if (typeof this.container === 'undefined') {
setTimeout(function () {
this.waitForContainer(callback);
}.bind(this), 500);
@@ -225,6 +225,6 @@ define([
*/
hasData: function () {
return !!this.rows() && !!this.rows().length;
- },
+ }
});
});
+
+
+
+
+
+
+