New utility function for copying text to the clipboard (#6103)

* New utility function for copying text to the clipboard. The new utility is already implemented for related links and the permalink for the metadata record.

* Display only the copy button when the link is also shown

web-ui/src/main/resources/catalog/components/metadataactions/partials/related.html

@@ -23,7 +23,7 @@ <h2>{{::title}}</h2>
                   'label-success': icon === 'fa-globe'}">{{badge}}</span>
         </strong>
       </div>
-      <div data-ng-class="mainType === 'MDFCATS' ? 'col-xs-11' : 'col-xs-7 col-sm-7'">
+      <div data-ng-class="mainType === 'MDFCATS' ? 'col-xs-11' : 'col-xs-10 col-sm-7'">
         <!-- Always display title if available -->
         <h3 data-ng-if="::(r.title | gnLocalized: lang).length">{{::(r.title | gnLocalized: lang)}}</h3>
         <!-- Display description if available -->
@@ -173,7 +173,10 @@ <h3 data-ng-if="::(r.title | gnLocalized: lang).length">{{::(r.title | gnLocaliz
               <span class="gn-related-description" data-ng-if="r.description">
                 {{ (r.description | gnLocalized: lang | striptags)}}</a>
               </span>
-              <span ng-bind-html="r.url | gnLocalized: lang | linky:'_blank'"></span>
+              <span class="col-md-10 col-sm-9 col-xs-9 gn-nopadding-left gn-nopadding-right" ng-bind-html="r.url | gnLocalized: lang | linky:'_blank'"></span>
+              <span class="col-md-2 col-sm-3 col-xs-3 gn-nopadding-right">
+                <span class="pull-right" gn-copy-to-clipboard="{{r.url | gnLocalized: lang}}" gn-copy-button-only="true"></span>
+              </span>
             </p>
           </div>
         </div>

web-ui/src/main/resources/catalog/components/utility/UtilityDirective.js

@@ -560,6 +560,80 @@
     }
   ]);
 
+  /**
+   * @ngdoc directive
+   * @name gn_utility.directive:gnCopyToClipboard
+   * @function
+   *
+   * @description
+   * Put a string in a input field with copy to clipboard functions attached to it.
+   *
+   * The code to be used in a HTML page:
+   * 
+   * <span gn-copy-to-clipboard="{{r.url | gnLocalized: lang}}"></span>
+   *
+   * or
+   *
+   * <span gn-copy-to-clipboard="{{r.url | gnLocalized: lang}}" gn-copy-button-only="true"></span>
+   *
+   * The first option displays an input and copy button. Copying the text to the clipboard is triggered by
+   * clicking on the button or in the input.
+   *
+   * The second option only displays the copy button (in case the input is not needed). The input is
+   * moved out of sight, because for copying you need an input (or textarea)
+   */
+  module.directive('gnCopyToClipboard', ['gnAlertService','$translate',
+    function (gnAlertService,$translate) {
+      return {
+        restrict: 'A',
+        scope: {
+          copytext: '@gnCopyToClipboard',
+          buttononly: '@gnCopyButtonOnly'
+        },
+        templateUrl: '../../catalog/components/utility/' +
+          'partials/copytoclipboard.html',
+        link: function(scope, element, attr) {
+
+          var target = element.find('input:first');
+          scope.moveinput = (scope.buttononly === 'true');
+
+          scope.copyToClipboard = function() {
+            // select the current focus
+            var currentFocus = document.activeElement;
+
+            // set focus on the text input
+            target.focus();
+            target[0].setSelectionRange(0, target.val().length);
+
+            // copy the selection
+            var succeed;
+
+            try {
+              succeed = document.execCommand("copy");
+            } catch (e) {
+              console.warn(e);
+              succeed = false;
+            }
+
+            // Restore original focus
+            if (currentFocus && typeof currentFocus.focus === "function") {
+              currentFocus.focus();
+            }
+
+            if (succeed) {
+              gnAlertService.addAlert({
+                msg: $translate.instant('textCopied'),
+                delay: 5000,
+                type: 'success'});
+            }
+
+            return succeed;
+          };
+        }
+      };
+    }
+  ]);
+
   /**
    * @ngdoc directive
    * @name gn_utility.directive:gnMetadataPicker

web-ui/src/main/resources/catalog/components/utility/UtilityService.js

@@ -322,7 +322,7 @@
         function getPermalink(title, url) {
           gnPopup.createModal({
             title: $translate.instant('permalinkTo', {title: title}),
-            content: '<div gn-permalink-input="' + url + '"></div>'
+            content: '<span gn-copy-to-clipboard="' + url + '"></span>'
           });
         };
 

web-ui/src/main/resources/catalog/components/utility/partials/copytoclipboard.html

@@ -0,0 +1,13 @@
+<div class="input-group gn-copy-clipboard"
+     data-ng-class="moveinput ? 'gn-hide-input' : 'gn-show-input'">
+  <input type="text"
+         data-ng-click="copyToClipboard()"
+         class="form-control"
+         value="{{copytext}}">
+  <span class="input-group-addon btn"
+        data-ng-click="copyToClipboard()"
+        title="{{'copyToClipboard' | translate}}">
+    <i class="fa fa-clipboard" aria-hidden="true"></i>
+  </span>
+</div>
+

web-ui/src/main/resources/catalog/locales/en-core.json

@@ -559,5 +559,7 @@
     "unselectChoiceNotAllowedTitle": "Unselect choices",
     "unselectChoiceNotAllowed": "Some choices can't be removed: {{notAllowedChoices}}",
     "searchOptions": "Search options",
-    "options": "Options"
+    "options": "Options",
+    "copyToClipboard": "Copy the text to the clipboard",
+    "textCopied": "Text has been copied to the clipboard."
 }

web-ui/src/main/resources/catalog/style/gn.less

@@ -925,6 +925,21 @@ input.ng-invalid {
   }
 }
 
+.gn-copy-clipboard {
+  &.gn-hide-input {
+    display: inline-block;
+    // old trick to not hide the input but position it out of sight
+    input[type=text] {
+      position: absolute;
+      top: -9999px;
+    }
+    .btn {
+      border-radius: @border-radius-base !important;
+      border: 1px solid @btn-default-border;
+    }
+  }
+}
+
 /* Highlight updated checkboxes in sharing form */
 .gn-sharing-batch {
   // remove