Merge pull request #1358 from tksugimoto/enable-copy-button-without-flash

Enable copy button without flash if JavaScript copy command is enable

src/main/twirl/gitbucket/core/account/application.scala.html

@@ -19,8 +19,8 @@
           </div>
           <a href="@context.path/@account.userName/_personalToken/delete/@token.accessTokenId" class="btn btn-sm btn-danger pull-right">Delete</a>
           <div style="width: 50%;">
-            @gitbucket.core.helper.html.copy("generated-token-copy", tokenString){
-              <input type="text" value="@tokenString" class="form-control input-sm" readonly>
+            @gitbucket.core.helper.html.copy("generated-token-copy", tokenString, targetTextId = "generated-token"){
+              <input type="text" value="@tokenString" class="form-control input-sm" id="generated-token" readonly>
             }
           </div>
           <hr style="margin-top: 10px;">

src/main/twirl/gitbucket/core/helper/copy.scala.html

@@ -1,4 +1,4 @@
-@(id: String, value: String, style: String = "")(html: Html = Html(""))
+@(id: String, value: String, style: String = "", targetTextId: String = "")(html: Html = Html(""))
 @if(html.body.nonEmpty){
   <div class="input-group" style="margin-bottom: 0px;">
     @html
@@ -14,6 +14,36 @@
 <script>
 // copy to clipboard
 (function() {
+  @if(targetTextId.nonEmpty){
+  // if document.execCommand('copy') is available, use it for copy.
+  if (document.queryCommandSupported('copy')) {
+    var title = $('#@id').attr('title');
+    $('#@id').tooltip({
+      @* if default container is used then 2 lines tooltip text is displayd because tooptip width is narrow. *@
+      container: 'body'
+    });
+    $('#@id').on('click', function() {
+      var target = document.getElementById('@targetTextId');
+      if (!target) { @* target's id is incorrect. Fix argument's value *@
+        $('#@id').attr('title', 'failed to copy').tooltip('fixTitle').tooltip('show');
+        return;
+      }
+      if (typeof target.select === 'function') {
+        target.select();
+      } else {
+        var range = document.createRange();
+        range.selectNodeContents(target);
+        var selection = window.getSelection();
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+      document.execCommand('copy');
+      $('#@id').attr('title', 'copied!').tooltip('fixTitle').tooltip('show');
+      $('#@id').attr('title', title).tooltip('fixTitle');
+    });
+    return
+  }
+  }
   // Check flash availablibity
   var flashAvailable = false;
   try {

src/main/twirl/gitbucket/core/pulls/mergeguide.scala.html

@@ -99,7 +99,7 @@
                 you can perform a manual merge on the command line.
               </p>
             }
-            @gitbucket.core.helper.html.copy("repository-url-copy", forkedRepository.httpUrl){
+            @gitbucket.core.helper.html.copy("repository-url-copy", forkedRepository.httpUrl, targetTextId = "repository-url"){
               <div class="input-group-btn" data-toggle="buttons">
                 <label class="btn btn-sm btn-default active" id="repository-url-http"><input type="radio" checked>HTTP</label>
                 @if(context.settings.ssh && context.loginAccount.isDefined){
@@ -114,7 +114,7 @@
               </p>
               @defining(s"git checkout -b ${pullreq.requestUserName}-${pullreq.requestBranch} ${pullreq.branch}\n" +
                         s"git pull ${forkedRepository.httpUrl} ${pullreq.requestBranch}"){ command =>
-                @gitbucket.core.helper.html.copy("merge-command-copy-1", command, "position: absolute; right: 31px;")()
+                @gitbucket.core.helper.html.copy("merge-command-copy-1", command, "position: absolute; right: 31px;", "merge-command")()
                 <pre style="font-size: 12px; border-radius: 3px;" id="merge-command">@Html(command)</pre>
               }
             </div>
@@ -124,8 +124,8 @@
               </p>
               @defining(s"git checkout ${pullreq.branch}\ngit merge --no-ff ${pullreq.requestUserName}-${pullreq.requestBranch}\n" +
                         s"git push origin ${pullreq.branch}"){ command =>
-                @gitbucket.core.helper.html.copy("merge-command-copy-2", command, "position: absolute; right: 31px;")()
-                <pre style="font-size: 12px; border-radius: 3px;">@command</pre>
+                @gitbucket.core.helper.html.copy("merge-command-copy-2", command, "position: absolute; right: 31px;", "merge-command-2")()
+                <pre style="font-size: 12px; border-radius: 3px;" id="merge-command-2">@command</pre>
               }
             </div>
           </div>
@@ -196,4 +196,4 @@ $(function(){
     });
   }
 });
-</script>
+</script>

src/main/twirl/gitbucket/core/repo/files.scala.html

@@ -39,7 +39,7 @@
         </div>
         <div class="pull-right pc">
           <div style="width: 240px; margin-right: 5px; margin-left: 5px;">
-            @gitbucket.core.helper.html.copy("repository-url-copy", repository.httpUrl){
+            @gitbucket.core.helper.html.copy("repository-url-copy", repository.httpUrl, targetTextId = "repository-url"){
               @if(repository.sshUrl.isDefined){
                 <div class="btn-group input-group-btn">
                   <button type="button" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

src/main/twirl/gitbucket/core/wiki/page.scala.html

@@ -64,7 +64,7 @@
       <div>
         <strong>Clone this wiki locally</strong>
       </div>
-      @gitbucket.core.helper.html.copy("repository-url-copy", WikiService.wikiHttpUrl(repository)){
+      @gitbucket.core.helper.html.copy("repository-url-copy", WikiService.wikiHttpUrl(repository), targetTextId = "repository-url"){
         <input type="text" value="@WikiService.wikiHttpUrl(repository)" id="repository-url" class="form-control input-sm" readonly>
       }
       @if(WikiService.wikiSshUrl(repository).isDefined) {