Fixes click behaviour for the cogwheel when holding down the Cmd/Ctrl…

… key or the middle mouse button to open field settings in a new browser tab
mmikkel · May 17, 2021 · 5cc71de · 5cc71de
1 parent 9664867
commit 5cc71de
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 31 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## Unreleased  
+### Fixed  
+- Fixes click behaviour for the cogwheel when holding down the Cmd/Ctrl key or the middle mouse button to open field settings in a new browser tab. Resolves #17  
+
 ## 1.2.4 - 2021-01-27
 
 ### Fixed  

diff --git a/src/resources/cpfieldinspect.js b/src/resources/cpfieldinspect.js
@@ -67,12 +67,8 @@
             Garnish.$doc
                 .on('click', '[data-cpfieldlinks-sourcebtn]', $.proxy(this.onSourceEditBtnClick, this))
                 .on('click', '.matrix .btn.add, .matrix .btn[data-type]', $.proxy(this.onMatrixBlockAddButtonClick, this))
-                .on('keydown', $.proxy(this.onKeyDown, this))
-                .on('keyup', $.proxy(this.onKeyUp, this))
                 .ajaxComplete($.proxy(this.onAjaxComplete, this));
 
-            window.onblur = this.onWindowBlur;
-
             Garnish.requestAnimationFrame($.proxy(this.addFieldLinks, this));
         },
 
@@ -183,12 +179,25 @@
                         return;
                     }
 
+                    var url = Craft.CpFieldInspectPlugin.data.baseEditFieldUrl + '/' + fieldId;
                     $btn
                         .append('<span data-icon="settings" title="' + (_this.data.editFieldBtnLabel || 'Edit field settings') + '" />')
+                        .on('mouseup', '[data-icon="settings"]', function (e) {
+                            if (e.which === Garnish.PRIMARY_CLICK || e.which === Garnish.SECONDARY_CLICK) {
+                                return;
+                            }
+                            e.preventDefault();
+                            e.stopPropagation();
+                            window.open(url);
+                        })
                         .on('click', '[data-icon="settings"]', function (e) {
                             e.preventDefault();
                             e.stopPropagation();
-                            _this.redirectToFieldSettings(fieldId);
+                            if (Garnish.isCtrlKeyPressed(e)) {
+                                window.open(url);
+                                return;
+                            }
+                            _this.doRedirect(url);
                         });
 
                 }).on('mouseleave', function () {
@@ -199,17 +208,8 @@
         },
 
         doRedirect: function (href) {
-            if (this.ctrlKeyDown) {
-                window.open(href);
-            } else {
-                Craft.setLocalStorage(this.settings.redirectKey, this.data.redirectUrl || null);
-                window.location.href = href;
-            }
-        },
-
-        redirectToFieldSettings: function (fieldId) {
-            var href = Craft.CpFieldInspectPlugin.data.baseEditFieldUrl + '/' + fieldId;
-            this.doRedirect(href);
+            Craft.setLocalStorage(this.settings.redirectKey, this.data.redirectUrl || null);
+            window.location.href = href;
         },
 
         getFieldId: function (field) {
@@ -251,21 +251,6 @@
             Garnish.requestAnimationFrame($.proxy(this.addFieldLinks, this));
         },
 
-        onKeyDown: function(e) {
-            this.ctrlKeyDown = Garnish.isCtrlKeyPressed(e);
-            setTimeout(function () {
-                this.ctrlKeyDown = false;
-            }, 1000);
-        },
-
-        onKeyUp: function () {
-            this.ctrlKeyDown = false;
-        },
-
-        onWindowBlur: function () {
-            this.ctrlKeyDown = false;
-        },
-
         onAjaxComplete: function(e, status, requestData) {
             if (requestData.url.indexOf('switch-entry-type') === -1) {
                 return;