From 0e303660dbe08418c6653059dca7fa85cdf8f770 Mon Sep 17 00:00:00 2001 From: Adarsh Manickam Date: Fri, 15 Nov 2019 00:10:37 +0530 Subject: [PATCH 1/3] Resolved Adobe issue 691 --- .../base/web/js/grid/columns/image-preview.js | 49 +++++++++++++++++-- 1 file changed, 46 insertions(+), 3 deletions(-) diff --git a/app/code/Magento/Ui/view/base/web/js/grid/columns/image-preview.js b/app/code/Magento/Ui/view/base/web/js/grid/columns/image-preview.js index 1ef2ebf6594fa..7cbbfdab28ba1 100644 --- a/app/code/Magento/Ui/view/base/web/js/grid/columns/image-preview.js +++ b/app/code/Magento/Ui/view/base/web/js/grid/columns/image-preview.js @@ -4,8 +4,9 @@ */ define([ 'jquery', - 'Magento_Ui/js/grid/columns/column' -], function ($, Column) { + 'Magento_Ui/js/grid/columns/column', + 'Magento_Ui/js/lib/key-codes' +], function ($, Column, keyCodes) { 'use strict'; return Column.extend({ @@ -32,6 +33,18 @@ define([ } }, + /** + * Initialize image preview component + * + * @returns {Object} + */ + initialize: function () { + this._super(); + this.setNavigationListener(); + + return this; + }, + /** * Init observable variables * @return {Object} @@ -174,6 +187,36 @@ define([ block: 'center', inline: 'nearest' }); - } + }, + + /** + * Set image preview keyboard navigation listener + */ + setNavigationListener: function () { + var imageIndex, endIndex, key, + startIndex = 0, + imageColumnSelector = '.masonry-image-column', + adobeModalSelector = '.adobe-stock-modal', + imageGridSelector = '.masonry-image-grid'; + + $(document).on('keydown', function(e) { + key = keyCodes[e.keyCode]; + endIndex = $(imageGridSelector)[0].children.length - 1; + + if($(this.previewImageSelector).length > 0) { + imageIndex = $(this.previewImageSelector) + .parents(imageColumnSelector) + .data('repeatIndex'); + } + + if($(adobeModalSelector).hasClass('_show')) { + if(key === 'pageLeftKey' && imageIndex !== startIndex) { + $(this.previewImageSelector + ' .action-previous').click(); + } else if (key === 'pageRightKey' && imageIndex !== endIndex) { + $(this.previewImageSelector + ' .action-next').click(); + } + } + }); + }, }); }); From 1298766deffe2c992b3f29aeb85454cc7bc6e44c Mon Sep 17 00:00:00 2001 From: Adarsh Manickam Date: Tue, 19 Nov 2019 20:01:53 +0530 Subject: [PATCH 2/3] Refactored action click --- .../base/web/js/grid/columns/image-preview.js | 51 +++++++++---------- 1 file changed, 23 insertions(+), 28 deletions(-) diff --git a/app/code/Magento/Ui/view/base/web/js/grid/columns/image-preview.js b/app/code/Magento/Ui/view/base/web/js/grid/columns/image-preview.js index 7cbbfdab28ba1..98bb5770dca5d 100644 --- a/app/code/Magento/Ui/view/base/web/js/grid/columns/image-preview.js +++ b/app/code/Magento/Ui/view/base/web/js/grid/columns/image-preview.js @@ -40,7 +40,7 @@ define([ */ initialize: function () { this._super(); - this.setNavigationListener(); + $(document).on('keydown', this.handleKeyDown.bind(this)); return this; }, @@ -67,8 +67,13 @@ define([ * @param {Object} record */ next: function (record) { - var recordToShow = this.getRecord(record._rowIndex + 1); + var recordToShow; + if (record._rowIndex + 1 === this.masonry().rows().length) { + return; + } + + recordToShow = this.getRecord(record._rowIndex + 1); recordToShow.rowNumber = record.lastInRow ? record.rowNumber + 1 : record.rowNumber; this.show(recordToShow); }, @@ -79,6 +84,9 @@ define([ * @param {Object} record */ prev: function (record) { + if (record._rowIndex === 0) { + return; + } var recordToShow = this.getRecord(record._rowIndex - 1); recordToShow.rowNumber = record.firstInRow ? record.rowNumber - 1 : record.rowNumber; @@ -190,33 +198,20 @@ define([ }, /** - * Set image preview keyboard navigation listener + * Handle keyboard navigation for image preview + * + * @param {Object} e */ - setNavigationListener: function () { - var imageIndex, endIndex, key, - startIndex = 0, - imageColumnSelector = '.masonry-image-column', - adobeModalSelector = '.adobe-stock-modal', - imageGridSelector = '.masonry-image-grid'; - - $(document).on('keydown', function(e) { - key = keyCodes[e.keyCode]; - endIndex = $(imageGridSelector)[0].children.length - 1; - - if($(this.previewImageSelector).length > 0) { - imageIndex = $(this.previewImageSelector) - .parents(imageColumnSelector) - .data('repeatIndex'); + handleKeyDown: function (e) { + var key = keyCodes[e.keyCode]; + + if (this.visibleRecord() !== null) { + if (key === 'pageLeftKey') { + this.prev(this.displayedRecord()); + } else if (key === 'pageRightKey') { + this.next(this.displayedRecord()); } - - if($(adobeModalSelector).hasClass('_show')) { - if(key === 'pageLeftKey' && imageIndex !== startIndex) { - $(this.previewImageSelector + ' .action-previous').click(); - } else if (key === 'pageRightKey' && imageIndex !== endIndex) { - $(this.previewImageSelector + ' .action-next').click(); - } - } - }); - }, + } + } }); }); From 41c95a21ff19503b3870748f0c5a8bbb5b6d3bdb Mon Sep 17 00:00:00 2001 From: Pavel Bystritsky <51681487+engcom-Foxtrot@users.noreply.github.com> Date: Tue, 26 Nov 2019 11:34:50 +0200 Subject: [PATCH 3/3] magento/magento2#25611: Static test fix. --- .../Magento/Ui/view/base/web/js/grid/columns/image-preview.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/code/Magento/Ui/view/base/web/js/grid/columns/image-preview.js b/app/code/Magento/Ui/view/base/web/js/grid/columns/image-preview.js index 98bb5770dca5d..fec9fd969d61e 100644 --- a/app/code/Magento/Ui/view/base/web/js/grid/columns/image-preview.js +++ b/app/code/Magento/Ui/view/base/web/js/grid/columns/image-preview.js @@ -84,10 +84,12 @@ define([ * @param {Object} record */ prev: function (record) { + var recordToShow; + if (record._rowIndex === 0) { return; } - var recordToShow = this.getRecord(record._rowIndex - 1); + recordToShow = this.getRecord(record._rowIndex - 1); recordToShow.rowNumber = record.firstInRow ? record.rowNumber - 1 : record.rowNumber; this.show(recordToShow);