Merge pull request #1264 from gurucomkz/gridfield-open-new-tab

ENH Open GridField rows in a new tab with Shift/Ctrl/Meta key

client/src/legacy/GridField.js

@@ -120,8 +120,16 @@ $.entwine('ss', function($) {
         }
       }, ajaxOpts));
     },
-    showDetailView: function(url) {
-      window.location.href = url;
+    showDetailView: function(url, event) {
+      this.openUrl(event, url, () => window.location.href = url);
+    },
+    openUrl: function(event, url, openInSameTabCallback) {
+      if (event && (event.metaKey || event.ctrlKey || event.shiftKey)) {
+        const newtab = window.open(url, '_blank');
+        newtab.focus();
+      } else {
+        openInSameTabCallback();
+      }
     },
     getItems: function() {
       return this.find('.ss-gridfield-item');
@@ -200,10 +208,10 @@ $.entwine('ss', function($) {
      * This will first retrieve state of the gridfield which is generated by PHP and sent to the
      * browser as HTML via PJAX and stored in the data-schema attribute on all of the '3 dots'
      * elements on each gridfield row
-     * 
+     *
      * It will then update the browser location with the new state of the gridfield using
      * window.ss.router
-     * 
+     *
      * This allows users to bookmark different views in the CMS
      */
     keepStateInHistory: function() {
@@ -223,7 +231,7 @@ $.entwine('ss', function($) {
     /**
      * Builds a url query string from the existing query string in window.location
      * and overrides it with the params from the query string in the pjaxUrl param
-     * 
+     *
      * For any query string params that relate to the gridState of the gridFieldName, only
      * take these from the pjaxUrl param
      *
@@ -345,20 +353,20 @@ $.entwine('ss', function($) {
 
 
   $('.grid-field .ss-gridfield-item').entwine({
-    onclick: function (e) {
-      if (e.target.classList.contains('action-menu__toggle')) {
-        this._super(e);
+    onclick: function (event) {
+      if (event.target.classList.contains('action-menu__toggle')) {
+        this._super(event);
         return false;
       }
 
-      if($(e.target).closest('.action').length) {
-        this._super(e);
+      if($(event.target).closest('.action').length) {
+        this._super(event);
         return false;
       }
 
       var formLink = this.find('.edit-link, .view-link');
       if(formLink.length) {
-        this.getGridField().showDetailView(formLink.prop('href'));
+        this.getGridField().showDetailView(formLink.prop('href'), event);
       }
     },
     onmouseover: function() {
@@ -619,16 +627,17 @@ $.entwine('ss', function($) {
    * interpreted natively by the browser, like file download triggers.
    */
   $('.grid-field .action.no-ajax, .grid-field .no-ajax .action:button').entwine({
-    onclick: function(e){
-      window.location.href = this.actionurl();
-      e.preventDefault();
+    onclick: function(event) {
+      const url = this.actionurl();
+      this.getGridField().openUrl(event, url, () => window.location.href = url);
+      event.preventDefault();
       return false;
     }
   });
 
   $('.grid-field .action-detail').entwine({
-    onclick: function() {
-      this.getGridField().showDetailView($(this).prop('href'));
+    onclick: function(event) {
+      this.getGridField().showDetailView($(this).prop('href'), event);
       return false;
     }
   });

client/src/legacy/LeftAndMain.js

@@ -1261,8 +1261,8 @@ $.entwine('ss', function($) {
    * attribute to the grid field.
    */
   $('.cms .grid-field:not([cms-loading-ignore-url-params])').entwine({
-    showDetailView: function(url) {
-      $('.cms-container').loadPanel(url);
+    showDetailView: function(url, event) {
+      this.openUrl(event, url, () => $('.cms-container').loadPanel(url));
     }
   });