Separate ZeroClipboard button as the helper.

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

@@ -0,0 +1,36 @@
+@(id: String, value: String)(html: Html)
+<div class="input-append">
+  @html
+  <span id="@id" class="add-on btn" data-clipboard-text="@value" data-placement="bottom" title="copy to clipboard"><i class="icon-check"></i></span>
+</div>
+<script>
+// copy to clipboard
+(function() {
+  // Find ZeroClipboard.swf file URI from ZeroClipboard JavaScript file path.
+  // NOTE(tanacasino) I think this way is wrong... but i don't know correct way.
+  var moviePath = (function() {
+    var zclipjs = "ZeroClipboard.min.js";
+    var scripts = document.getElementsByTagName("script");
+    var i = scripts.length;
+    while(i--) {
+      var match = scripts[i].src.match(zclipjs + "$");
+      if(match) {
+        return match.input.substr(0, match.input.length - 6) + 'swf';
+      }
+    }
+  })();
+  var clip = new ZeroClipboard($("#@id"), {
+    moviePath: moviePath
+  });
+  var title = $('#@id').attr('title');
+  $('#@id').removeAttr('title')
+  clip.on('complete', function(client, args) {
+    $(clip.htmlBridge).attr('title', 'copied!').tooltip('fixTitle').tooltip('show');
+    $(clip.htmlBridge).attr('title', title).tooltip('fixTitle');
+  });
+  $(clip.htmlBridge).tooltip({
+    title: title,
+    placement: $('#@id').attr('data-placement')
+  });
+})();
+</script>

src/main/twirl/pulls/discussion.scala.html

@@ -49,24 +49,39 @@
                   you can perform a manual merge on the command line.
                 </p>
               }
-              <div class="input-prepend">
-                <span class="add-on">HTTP</span>
+              @helper.html.copy("repository-url-copy", requestRepositoryUrl){
                 <input type="text" value="@requestRepositoryUrl" id="repository-url" readonly>
-              </div>
+              }
+              <div>
                 <p>
                   <strong>Step 1:</strong> Check out a new branch to test the changes — run this from your project directory
                 </p>
-              <pre>git checkout -b @{pullreq.requestUserName}-@{pullreq.requestBranch} @{pullreq.requestBranch}</pre>
+                @defining(s"git checkout -b ${pullreq.requestUserName}-${pullreq.requestBranch} ${pullreq.requestBranch}"){ command =>
+                  @helper.html.copy("merge-command-copy-1", command){
+                    <pre style="width: 500px; float: left;">@command</pre>
+                  }
+                }
+              </div>
+              <div>
                 <p>
                   <strong>Step 2:</strong> Bring in @{pullreq.requestUserName}'s changes and test
                 </p>
-              <pre>git pull @{requestRepositoryUrl} @{pullreq.requestBranch}</pre>
+                @defining(s"git pull ${requestRepositoryUrl} ${pullreq.requestBranch}"){ command =>
+                  @helper.html.copy("merge-command-copy-2", command){
+                    <pre style="width: 500px; float: left;">@command</pre>
+                  }
+                }
+              </div>
+              <div>
                 <p>
                   <strong>Step 3:</strong> Merge the changes and update the server
                 </p>
-              <pre>git checkout master
-git merge @{pullreq.requestUserName}-@{pullreq.branch}
-git push origin @{pullreq.branch}</pre>
+                @defining(s"git checkout master\ngit merge ${pullreq.requestUserName}-${pullreq.branch}\ngit push origin ${pullreq.branch}"){ command =>
+                  @helper.html.copy("merge-command-copy-3", command){
+                    <pre style="width: 500px; float: left;">@command</pre>
+                  }
+                }
+              </div>
             </div>
           </div>
           <div id="confirm-merge-form" style="display: none;">

src/main/twirl/repo/tab.scala.html

@@ -31,9 +31,8 @@
   <li@if(active=="branches"){ class="active"}><a href="@url(repository)/branches">Branches@if(repository.branchList.length > 0){ <span class="badge">@repository.branchList.length</span>}</a></li>
   <li@if(active=="tags"    ){ class="active"}><a href="@url(repository)/tags">Tags@if(repository.tags.length > 0){ <span class="badge">@repository.tags.length</span>}</a></li>
   <li class="pull-right">
-    <div class="input-append">
+    @helper.html.copy("repository-url-copy", repository.url){
       <input type="text" value="@repository.url" id="repository-url" readonly>
-      <span id="repository-url-copy" class="add-on btn" data-clipboard-text="@repository.url" data-placement="bottom" title="copy to clipboard"><i class="icon-check"></i></span>
-    </div>
+    }
   </li>
 </ul>

src/main/twirl/wiki/tab.scala.html

@@ -6,9 +6,10 @@
   <li@if(active == "pages"){ class="active"}><a href="@url(repository)/wiki/_pages">Pages</a></li>
   <li@if(active == "history"){ class="active"}><a href="@url(repository)/wiki/_history">Wiki History</a></li>
   <li class="pull-right">
-    <div class="input-append">
-      <input type="text" value="@repository.url.replaceFirst("\\.git$", ".wiki.git")" readonly id="repository-url">
-      <span id="repository-url-copy" class="add-on btn" data-clipboard-text="@repository.url.replaceFirst("\\.git$", ".wiki.git")" data-placement="bottom" title="copy to clipboard"><i class="icon-check"></i></span>
-    </div>
+    @defining(repository.url.replaceFirst("\\.git$", ".wiki.git")){ repositoryUrl =>
+      @helper.html.copy("repository-url-copy", repositoryUrl){
+        <input type="text" value="@repositoryUrl" readonly id="repository-url">
+      }
+    }
   </li>
 </ul>

src/main/webapp/assets/common/js/gitbucket.js

@@ -2,43 +2,15 @@ $(function(){
   // disable Ajax cache
   $.ajaxSetup({ cache: false });
 
+  // repository url text field
   $('#repository-url').click(function(){
     this.select(0, this.value.length); 
   });
 
+  // activate tooltip
   $('img[data-toggle=tooltip]').tooltip();
   $('a[data-toggle=tooltip]').tooltip();
 
-  // copy to clipboard
-  (function() {
-    // Find ZeroClipboard.swf file URI from ZeroClipboard JavaScript file path.
-    // NOTE(tanacasino) I think this way is wrong... but i don't know correct way.
-    var moviePath = (function() {
-      var zclipjs = "ZeroClipboard.min.js";
-      var scripts = document.getElementsByTagName("script");
-      var i = scripts.length;
-      while(i--) {
-        var match = scripts[i].src.match(zclipjs + "$");
-        if(match) {
-          return match.input.substr(0, match.input.length - 6) + 'swf';
-        }
-      }
-    })();
-    var clip = new ZeroClipboard($("#repository-url-copy"), {
-      moviePath: moviePath
-    });
-    var title = $('#repository-url-copy').attr('title');
-    $('#repository-url-copy').removeAttr('title')
-    clip.on('complete', function(client, args) {
-      $(clip.htmlBridge).attr('title', 'copied!').tooltip('fixTitle').tooltip('show');
-      $(clip.htmlBridge).attr('title', title).tooltip('fixTitle');
-    });
-    $(clip.htmlBridge).tooltip({
-      title: title,
-      placement: $('#repository-url-copy').attr('data-placement')
-    });
-  })();
-
   // syntax highlighting by google-code-prettify
   prettyPrint();
 });