Merge pull request #5061 from magento-engcom/adobe-stock-integration-fix-3

[Magento Community Engineering] Adobe Stock Integration Bug Fixes

Author: sivaschenko

app/code/Magento/Tinymce3/view/base/web/tinymce3Adapter.js

@@ -78,6 +78,8 @@ define([
             }
 
             tinyMCE3.init(this.getSettings(mode));
+            varienGlobalEvents.clearEventHandlers('open_browser_callback');
+            varienGlobalEvents.attachEventHandler('open_browser_callback', tinyMceEditors.get(this.id).openFileBrowser);
         },
 
         /**

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({
@@ -30,13 +31,26 @@ define([
             },
             listens: {
                 '${ $.provider }:params.filters': 'hide',
-                '${ $.provider }:params.search': 'hide'
+                '${ $.provider }:params.search': 'hide',
+                '${ $.provider }:params.paging': 'hide'
             },
             exports: {
                 height: '${ $.parentName }.thumbnail_url:previewHeight'
             }
         },
 
+        /**
+         * Initialize image preview component
+         *
+         * @returns {Object}
+         */
+        initialize: function () {
+            this._super();
+            $(document).on('keydown', this.handleKeyDown.bind(this));
+
+            return this;
+        },
+
         /**
          * Init observable variables
          * @return {Object}
@@ -59,8 +73,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);
         },
@@ -71,7 +90,12 @@ define([
          * @param {Object} record
          */
         prev: function (record) {
-            var recordToShow = this.getRecord(record._rowIndex - 1);
+            var recordToShow;
+
+            if (record._rowIndex === 0) {
+                return;
+            }
+            recordToShow = this.getRecord(record._rowIndex - 1);
 
             recordToShow.rowNumber = record.firstInRow ? record.rowNumber - 1 : record.rowNumber;
             this.show(recordToShow);
@@ -205,6 +229,23 @@ define([
                 block: 'center',
                 inline: 'nearest'
             });
+        },
+
+        /**
+         * Handle keyboard navigation for image preview
+         *
+         * @param {Object} e
+         */
+        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());
+                }
+            }
         }
     });
 });

dev/tests/js/jasmine/tests/lib/mage/tinymce4Adapter.test.js

@@ -0,0 +1,41 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+define([
+    'wysiwygAdapter',
+    'underscore'
+], function (wysiwygAdapter, _) {
+    'use strict';
+
+    var obj;
+
+    beforeEach(function () {
+
+        /**
+         * Dummy constructor to use for instantiation
+         * @constructor
+         */
+        var Constr = function () {};
+
+        Constr.prototype = wysiwygAdapter;
+
+        obj = new Constr();
+        obj.eventBus = new window.varienEvents();
+        obj.initialize(1, {
+            'store_id': 0,
+            'tinymce4': {
+                'content_css': ''
+            },
+            'files_browser_window_url': 'url'
+        });
+        obj.setup();
+    });
+
+    describe('"openFileBrowser" method', function () {
+        it('Opens file browser to given instance', function () {
+            expect(_.size(obj.eventBus.arrEvents['open_browser_callback'])).toBe(1);
+        });
+    });
+});

lib/internal/Magento/Framework/Data/Form/Element/Editor.php

@@ -310,7 +310,7 @@ protected function _getPluginButtonsHtml($visible = true)
                         if (isset($buttonOptions['style'])) {
                             $configStyle = $buttonOptions['style'];
                         }
-                        $buttonOptions = array_merge($buttonOptions, ['style' => 'display:none;' . $configStyle]);
+                        $buttonOptions['style'] = 'display:none; ' . $configStyle;
                     }
                     $buttonsHtml .= $this->_getButtonHtml($buttonOptions);
                 }
@@ -409,7 +409,7 @@ protected function _getButtonHtml($data)
     protected function _wrapIntoContainer($html)
     {
         if (!$this->getConfig('use_container')) {
-            return '<div class="admin__control-wysiwig">' .$html . '</div>';
+            return '<div class="admin__control-wysiwig">' . $html . '</div>';
         }
 
         $html = '<div id="editor' . $this->getHtmlId() . '"'
@@ -533,10 +533,6 @@ protected function getInlineJs($jsSetupObject, $forceLoad)
             $jsSetupObject .
             '));
                     varienGlobalEvents.attachEventHandler("formSubmit", editorFormValidationHandler);
-                    varienGlobalEvents.clearEventHandlers("open_browser_callback");
-                    varienGlobalEvents.attachEventHandler("open_browser_callback", ' .
-            $jsSetupObject .
-            '.openFileBrowser);
                 //]]>
                 });
                 </script>';

lib/web/mage/adminhtml/wysiwyg/tiny_mce/tinymce4Adapter.js

@@ -118,6 +118,7 @@ define([
                 tinyMCE4.init(settings);
                 this.getPluginButtons().hide();
                 varienGlobalEvents.clearEventHandlers('open_browser_callback');
+                this.eventBus.clearEventHandlers('open_browser_callback');
                 this.eventBus.attachEventHandler('open_browser_callback', tinyMceEditors.get(self.id).openFileBrowser);
             }.bind(this));
         },