|
4 | 4 | */
|
5 | 5 | define([
|
6 | 6 | 'jquery',
|
7 |
| - 'Magento_Ui/js/grid/columns/column' |
8 |
| -], function ($, Column) { |
| 7 | + 'Magento_Ui/js/grid/columns/column', |
| 8 | + 'Magento_Ui/js/lib/key-codes' |
| 9 | +], function ($, Column, keyCodes) { |
9 | 10 | 'use strict';
|
10 | 11 |
|
11 | 12 | return Column.extend({
|
@@ -38,6 +39,18 @@ define([
|
38 | 39 | }
|
39 | 40 | },
|
40 | 41 |
|
| 42 | + /** |
| 43 | + * Initialize image preview component |
| 44 | + * |
| 45 | + * @returns {Object} |
| 46 | + */ |
| 47 | + initialize: function () { |
| 48 | + this._super(); |
| 49 | + this.setNavigationListener(); |
| 50 | + |
| 51 | + return this; |
| 52 | + }, |
| 53 | + |
41 | 54 | /**
|
42 | 55 | * Init observable variables
|
43 | 56 | * @return {Object}
|
@@ -206,6 +219,36 @@ define([
|
206 | 219 | block: 'center',
|
207 | 220 | inline: 'nearest'
|
208 | 221 | });
|
209 |
| - } |
| 222 | + }, |
| 223 | + |
| 224 | + /** |
| 225 | + * Set image preview keyboard navigation listener |
| 226 | + */ |
| 227 | + setNavigationListener: function () { |
| 228 | + var imageIndex, endIndex, key, |
| 229 | + startIndex = 0, |
| 230 | + imageColumnSelector = '.masonry-image-column', |
| 231 | + adobeModalSelector = '.adobe-stock-modal', |
| 232 | + imageGridSelector = '.masonry-image-grid'; |
| 233 | + |
| 234 | + $(document).on('keydown', function(e) { |
| 235 | + key = keyCodes[e.keyCode]; |
| 236 | + endIndex = $(imageGridSelector)[0].children.length - 1; |
| 237 | + |
| 238 | + if($(this.previewImageSelector).length > 0) { |
| 239 | + imageIndex = $(this.previewImageSelector) |
| 240 | + .parents(imageColumnSelector) |
| 241 | + .data('repeatIndex'); |
| 242 | + } |
| 243 | + |
| 244 | + if($(adobeModalSelector).hasClass('_show')) { |
| 245 | + if(key === 'pageLeftKey' && imageIndex !== startIndex) { |
| 246 | + $(this.previewImageSelector + ' .action-previous').click(); |
| 247 | + } else if (key === 'pageRightKey' && imageIndex !== endIndex) { |
| 248 | + $(this.previewImageSelector + ' .action-next').click(); |
| 249 | + } |
| 250 | + } |
| 251 | + }); |
| 252 | + }, |
210 | 253 | });
|
211 | 254 | });
|
0 commit comments