Replace SWF clippy with clipboardjs on repository page

Shockwave Flash is dead. But Gitblit still uses it to copy the repository
URLs to the clip board. Which doesn't work anymore since no browser uses
Flash anymore, so this has degraded disgracefully.

Instead, we can use JavaScript to copy directly to the clipboard, now
that there are APIs for it. So replace the use of clippy.swf on the
repository page with clipboard.js[1]. This right now only has the
functionality to copy to clipboard but now visual feedback, yet.

This addresses GH issue #1241.

[1] https://clipboardjs.com

src/main/java/com/gitblit/wicket/pages/SummaryPage.html

@@ -61,7 +61,14 @@
 	<wicket:fragment wicket:id="ownersFragment">
 		
 	</wicket:fragment>
-	
-</wicket:extend>	
+
+	<!-- load clipboard library to copy repository URL -->
+	<script type="text/javascript" src="clipboard/clipboard.min.js"></script>
+	<!-- instantiate clipboard -->
+	<script>
+        var clipboard = new ClipboardJS('.ctcbtn');
+    </script>
+
+</wicket:extend>
 </body>
 </html>

src/main/java/com/gitblit/wicket/panels/RepositoryUrlPanel.html

@@ -85,17 +85,9 @@
     	</span>
     </wicket:fragment>
     
-    <!-- flash-based button-press copy & paste -->
+    <!-- JavaScript automatic copy to clipboard -->
     <wicket:fragment wicket:id="clippyPanel">
-   		<object wicket:message="title:gb.copyToClipboard" style="vertical-align:middle;"
-   			wicket:id="clippy"
-   			width="14" 
-   			height="14"
-   			bgcolor="#ffffff" 
-       		quality="high"
-       		wmode="transparent"
-       		scale="noscale"
-       		allowScriptAccess="sameDomain"></object>
+		<img class="ctcbtn" data-clipboard-action="copy" wicket:id="copyIcon" wicket:message="title:gb.copyToClipboard" />
 	</wicket:fragment>
 
 	<wicket:fragment wicket:id="workingCopyFragment">

src/main/java/com/gitblit/wicket/panels/RepositoryUrlPanel.java

@@ -25,6 +25,7 @@ import javax.servlet.http.HttpServletRequest;
 
 import org.apache.wicket.Component;
 import org.apache.wicket.RequestCycle;
+import org.apache.wicket.behavior.SimpleAttributeModifier;
 import org.apache.wicket.markup.html.basic.Label;
 import org.apache.wicket.markup.html.image.ContextImage;
 import org.apache.wicket.markup.html.panel.Fragment;
@@ -140,8 +141,7 @@ public class RepositoryUrlPanel extends BasePanel {
 					RepositoryUrl repoUrl = item.getModelObject();
 					// repository url
 					Fragment fragment = new Fragment("repoUrl", "actionFragment", this);
-					Component content = new Label("content", repoUrl.url).setRenderBodyOnly(true);
-					WicketUtils.setCssClass(content, "commandMenuItem");
+					Component content = new Label("content", repoUrl.url).setOutputMarkupId(true);
 					fragment.add(content);
 					item.add(fragment);
 
@@ -150,7 +150,7 @@ public class RepositoryUrlPanel extends BasePanel {
 					String tooltip = getProtocolPermissionDescription(repository, repoUrl);
 					WicketUtils.setHtmlTooltip(permissionLabel, tooltip);
 					fragment.add(permissionLabel);
-					fragment.add(createCopyFragment(repoUrl.url));
+					fragment.add(createCopyFragment(repoUrl.url, content.getMarkupId()));
 				}
 			};
 
@@ -199,13 +199,15 @@ public class RepositoryUrlPanel extends BasePanel {
 			}
 		}
 
-		urlPanel.add(new Label("primaryUrl", primaryUrl.url).setRenderBodyOnly(true));
+		Label primaryUrlLabel = new Label("primaryUrl", primaryUrl.url);
+		primaryUrlLabel.setOutputMarkupId(true);
+		urlPanel.add(primaryUrlLabel);
 
 		Label permissionLabel = new Label("primaryUrlPermission", primaryUrl.hasPermission() ? primaryUrl.permission.toString() : externalPermission);
 		String tooltip = getProtocolPermissionDescription(repository, primaryUrl);
 		WicketUtils.setHtmlTooltip(permissionLabel, tooltip);
 		urlPanel.add(permissionLabel);
-		urlPanel.add(createCopyFragment(primaryUrl.url));
+		urlPanel.add(createCopyFragment(primaryUrl.url, primaryUrlLabel.getMarkupId()));
 
 		return urlPanel;
 	}
@@ -317,12 +319,13 @@ public class RepositoryUrlPanel extends BasePanel {
 							// command-line
 							String command = substitute(clientApp.command, repoUrl.url, baseURL, user.username, repository.name);
 							Label content = new Label("content", command);
+							content.setOutputMarkupId(true);
 							WicketUtils.setCssClass(content, "commandMenuItem");
 							fragment.add(content);
 							repoLinkItem.add(fragment);
 
 							// copy function for command
-							fragment.add(createCopyFragment(command));
+							fragment.add(createCopyFragment(command, content.getMarkupId()));
 						}
 					}};
 					appMenu.add(actionItems);
@@ -346,16 +349,17 @@ public class RepositoryUrlPanel extends BasePanel {
 		return permissionLabel;
 	}
 
-	protected Fragment createCopyFragment(String text) {
+	protected Fragment createCopyFragment(String text, String target) {
 		if (app().settings().getBoolean(Keys.web.allowFlashCopyToClipboard, true)) {
-			// clippy: flash-based copy & paste
+			// javascript: browser JS API based copy to clipboard
 			Fragment copyFragment = new Fragment("copyFunction", "clippyPanel", this);
-			String baseUrl = WicketUtils.getGitblitURL(getRequest());
-			ShockWaveComponent clippy = new ShockWaveComponent("clippy", baseUrl + "/clippy.swf");
-			clippy.setValue("flashVars", "text=" + StringUtils.encodeURL(text));
-			copyFragment.add(clippy);
+			ContextImage img = WicketUtils.newImage("copyIcon", "clippy.png");
+			// Add the ID of the target element that holds the text to copy to clipboard
+			img.add(new SimpleAttributeModifier("data-clipboard-target", "#"+target));
+			copyFragment.add(img);
 			return copyFragment;
-		} else {
+		}
+		else {
 			// javascript: manual copy & paste with modal browser prompt dialog
 			Fragment copyFragment = new Fragment("copyFunction", "jsPanel", this);
 			ContextImage img = WicketUtils.newImage("copyIcon", "clippy.png");