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 ( {
@@ -32,6 +33,18 @@ define([
32
33
}
33
34
} ,
34
35
36
+ /**
37
+ * Initialize image preview component
38
+ *
39
+ * @returns {Object }
40
+ */
41
+ initialize : function ( ) {
42
+ this . _super ( ) ;
43
+ this . setNavigationListener ( ) ;
44
+
45
+ return this ;
46
+ } ,
47
+
35
48
/**
36
49
* Init observable variables
37
50
* @return {Object }
@@ -174,6 +187,36 @@ define([
174
187
block : 'center' ,
175
188
inline : 'nearest'
176
189
} ) ;
177
- }
190
+ } ,
191
+
192
+ /**
193
+ * Set image preview keyboard navigation listener
194
+ */
195
+ setNavigationListener : function ( ) {
196
+ var imageIndex , endIndex , key ,
197
+ startIndex = 0 ,
198
+ imageColumnSelector = '.masonry-image-column' ,
199
+ adobeModalSelector = '.adobe-stock-modal' ,
200
+ imageGridSelector = '.masonry-image-grid' ;
201
+
202
+ $ ( document ) . on ( 'keydown' , function ( e ) {
203
+ key = keyCodes [ e . keyCode ] ;
204
+ endIndex = $ ( imageGridSelector ) [ 0 ] . children . length - 1 ;
205
+
206
+ if ( $ ( this . previewImageSelector ) . length > 0 ) {
207
+ imageIndex = $ ( this . previewImageSelector )
208
+ . parents ( imageColumnSelector )
209
+ . data ( 'repeatIndex' ) ;
210
+ }
211
+
212
+ if ( $ ( adobeModalSelector ) . hasClass ( '_show' ) ) {
213
+ if ( key === 'pageLeftKey' && imageIndex !== startIndex ) {
214
+ $ ( this . previewImageSelector + ' .action-previous' ) . click ( ) ;
215
+ } else if ( key === 'pageRightKey' && imageIndex !== endIndex ) {
216
+ $ ( this . previewImageSelector + ' .action-next' ) . click ( ) ;
217
+ }
218
+ }
219
+ } ) ;
220
+ } ,
178
221
} ) ;
179
222
} ) ;
0 commit comments