Merge pull request #22896 from colemanw/api4ExplorerCopy

APIv4 Explorer - Add "copy" button to quicly copy code to clipboard
civicrm · Mar 6, 2022 · 549c624 · 549c624
2 parents f534a70 + d0f217d
commit 549c624
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/ang/api4Explorer/Explorer.html b/ang/api4Explorer/Explorer.html
@@ -224,8 +224,14 @@ <h4 ng-bind-html="helpContent.description"></h4>
           </p>
         </div>
         <div ng-repeat="style in code[selectedTab.code]">
+          <button class="btn btn-xs btn-default pull-right" ng-click="$ctrl.copyCode('api4-code-' + selectedTab.code + '-' + style.name)">
+            <i class="crm-i fa-clipboard"></i>
+            {{:: ts('Copy') }}
+          </button>
           <label>{{:: style.label }}</label>
-          <div><pre class="prettyprint" ng-bind-html="style.code"></pre></div>
+          <div>
+            <pre class="prettyprint" id="api4-code-{{ selectedTab.code + '-' + style.name }}" ng-bind-html="style.code"></pre>
+          </div>
         </div>
       </div>
     </div>
@@ -261,7 +267,15 @@ <h4 ng-bind-html="helpContent.description"></h4>
       </div>
       <div class="panel-body">
         <div ng-show="selectedTab.result === 'result'">
-          <pre class="prettyprint" ng-repeat="code in result" ng-bind-html="code"></pre>
+          <div ng-repeat="code in result">
+            <div class="clearfix">
+              <button ng-if="$index" class="btn btn-xs btn-default pull-right" ng-click="$ctrl.copyCode('api4-result-' + $index)">
+                <i class="crm-i fa-clipboard"></i>
+                {{:: ts('Copy') }}
+              </button>
+            </div>
+            <pre class="prettyprint" id="api4-result-{{ $index }}" ng-bind-html="code"></pre>
+          </div>
         </div>
         <div ng-if="::perm.accessDebugOutput" ng-show="selectedTab.result === 'debug'">
           <pre ng-if="debug" class="prettyprint" ng-bind-html="debug"></pre>

diff --git a/ang/api4Explorer/Explorer.js b/ang/api4Explorer/Explorer.js
@@ -116,6 +116,16 @@
       default: 'json'
     });
 
+    // Copy text to the clipboard
+    this.copyCode = function(domId) {
+      var node = document.getElementById(domId);
+      var range = document.createRange();
+      range.selectNode(node);
+      window.getSelection().removeAllRanges();
+      window.getSelection().addRange(range);
+      document.execCommand('copy');
+    };
+
     function ucfirst(str) {
       return str[0].toUpperCase() + str.slice(1);
     }
@@ -976,7 +986,7 @@
           break;
 
         case 'php':
-          $scope.result.push(prettyPrintOne((_.isArray(response.values) ? '(' + response.values.length + ') ' : '') + _.escape(phpFormat(response.values, 2, 2)), 'php', 1));
+          $scope.result.push(prettyPrintOne('return ' + _.escape(phpFormat(response.values, 2, 2)) + ';', 'php', 1));
           break;
       }
     };