Skip to content

Commit c4fc5b3

Browse files
committed
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 gitblit-org#1241. [1] https://clipboardjs.com
1 parent c84179a commit c4fc5b3

File tree

4 files changed

+35
-25
lines changed

4 files changed

+35
-25
lines changed

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

+9-2
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,14 @@
6161
<wicket:fragment wicket:id="ownersFragment">
6262

6363
</wicket:fragment>
64-
65-
</wicket:extend>
64+
65+
<!-- load clipboard library to copy repository URL -->
66+
<script type="text/javascript" src="clipboard/clipboard.min.js"></script>
67+
<!-- instantiate clipboard -->
68+
<script>
69+
var clipboard = new ClipboardJS('.ctcbtn');
70+
</script>
71+
72+
</wicket:extend>
6673
</body>
6774
</html>

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

+2-10
Original file line numberDiff line numberDiff line change
@@ -85,17 +85,9 @@
8585
</span>
8686
</wicket:fragment>
8787

88-
<!-- flash-based button-press copy & paste -->
88+
<!-- JavaScript automatic copy to clipboard -->
8989
<wicket:fragment wicket:id="clippyPanel">
90-
<object wicket:message="title:gb.copyToClipboard" style="vertical-align:middle;"
91-
wicket:id="clippy"
92-
width="14"
93-
height="14"
94-
bgcolor="#ffffff"
95-
quality="high"
96-
wmode="transparent"
97-
scale="noscale"
98-
allowScriptAccess="sameDomain"></object>
90+
<img class="ctcbtn" data-clipboard-action="copy" wicket:id="copyIcon" wicket:message="title:gb.copyToClipboard" />
9991
</wicket:fragment>
10092

10193
<wicket:fragment wicket:id="workingCopyFragment">

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

+17-13
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525

2626
import org.apache.wicket.Component;
2727
import org.apache.wicket.RequestCycle;
28+
import org.apache.wicket.behavior.SimpleAttributeModifier;
2829
import org.apache.wicket.markup.html.basic.Label;
2930
import org.apache.wicket.markup.html.image.ContextImage;
3031
import org.apache.wicket.markup.html.panel.Fragment;
@@ -140,8 +141,7 @@ public void populateItem(final Item<RepositoryUrl> item) {
140141
RepositoryUrl repoUrl = item.getModelObject();
141142
// repository url
142143
Fragment fragment = new Fragment("repoUrl", "actionFragment", this);
143-
Component content = new Label("content", repoUrl.url).setRenderBodyOnly(true);
144-
WicketUtils.setCssClass(content, "commandMenuItem");
144+
Component content = new Label("content", repoUrl.url).setOutputMarkupId(true);
145145
fragment.add(content);
146146
item.add(fragment);
147147

@@ -150,7 +150,7 @@ public void populateItem(final Item<RepositoryUrl> item) {
150150
String tooltip = getProtocolPermissionDescription(repository, repoUrl);
151151
WicketUtils.setHtmlTooltip(permissionLabel, tooltip);
152152
fragment.add(permissionLabel);
153-
fragment.add(createCopyFragment(repoUrl.url));
153+
fragment.add(createCopyFragment(repoUrl.url, content.getMarkupId()));
154154
}
155155
};
156156

@@ -199,13 +199,15 @@ public void populateItem(final Item<RepositoryUrl> item) {
199199
}
200200
}
201201

202-
urlPanel.add(new Label("primaryUrl", primaryUrl.url).setRenderBodyOnly(true));
202+
Label primaryUrlLabel = new Label("primaryUrl", primaryUrl.url);
203+
primaryUrlLabel.setOutputMarkupId(true);
204+
urlPanel.add(primaryUrlLabel);
203205

204206
Label permissionLabel = new Label("primaryUrlPermission", primaryUrl.hasPermission() ? primaryUrl.permission.toString() : externalPermission);
205207
String tooltip = getProtocolPermissionDescription(repository, primaryUrl);
206208
WicketUtils.setHtmlTooltip(permissionLabel, tooltip);
207209
urlPanel.add(permissionLabel);
208-
urlPanel.add(createCopyFragment(primaryUrl.url));
210+
urlPanel.add(createCopyFragment(primaryUrl.url, primaryUrlLabel.getMarkupId()));
209211

210212
return urlPanel;
211213
}
@@ -317,12 +319,13 @@ public void populateItem(final Item<RepositoryUrl> repoLinkItem) {
317319
// command-line
318320
String command = substitute(clientApp.command, repoUrl.url, baseURL, user.username, repository.name);
319321
Label content = new Label("content", command);
322+
content.setOutputMarkupId(true);
320323
WicketUtils.setCssClass(content, "commandMenuItem");
321324
fragment.add(content);
322325
repoLinkItem.add(fragment);
323326

324327
// copy function for command
325-
fragment.add(createCopyFragment(command));
328+
fragment.add(createCopyFragment(command, content.getMarkupId()));
326329
}
327330
}};
328331
appMenu.add(actionItems);
@@ -346,16 +349,17 @@ protected Label createPermissionBadge(String wicketId, RepositoryUrl repoUrl) {
346349
return permissionLabel;
347350
}
348351

349-
protected Fragment createCopyFragment(String text) {
352+
protected Fragment createCopyFragment(String text, String target) {
350353
if (app().settings().getBoolean(Keys.web.allowFlashCopyToClipboard, true)) {
351-
// clippy: flash-based copy & paste
354+
// javascript: browser JS API based copy to clipboard
352355
Fragment copyFragment = new Fragment("copyFunction", "clippyPanel", this);
353-
String baseUrl = WicketUtils.getGitblitURL(getRequest());
354-
ShockWaveComponent clippy = new ShockWaveComponent("clippy", baseUrl + "/clippy.swf");
355-
clippy.setValue("flashVars", "text=" + StringUtils.encodeURL(text));
356-
copyFragment.add(clippy);
356+
ContextImage img = WicketUtils.newImage("copyIcon", "clippy.png");
357+
// Add the ID of the target element that holds the text to copy to clipboard
358+
img.add(new SimpleAttributeModifier("data-clipboard-target", "#"+target));
359+
copyFragment.add(img);
357360
return copyFragment;
358-
} else {
361+
}
362+
else {
359363
// javascript: manual copy & paste with modal browser prompt dialog
360364
Fragment copyFragment = new Fragment("copyFunction", "jsPanel", this);
361365
ContextImage img = WicketUtils.newImage("copyIcon", "clippy.png");

src/main/resources/clipboard/clipboard.min.js

+7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)