Skip to content

Add copy-to-clipboard element for upload/download lists. #1099

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ArneBab wants to merge 1 commit into
base: next
Choose a base branch
from
Open

Add copy-to-clipboard element for upload/download lists. #1099

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion src/freenet/clients/http/QueueToadlet.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1979,7 +1979,11 @@ private HTMLNode createSizeCell(long dataSize, boolean confirmed, boolean advanc
private HTMLNode createKeyCell(FreenetURI uri, boolean addSlash) {
HTMLNode keyCell = new HTMLNode("td", "class", "request-key");
if (uri != null) {
keyCell.addChild("span", "class", "key_is").addChild("a", "href", '/' + uri.toString() + (addSlash ? "/" : ""), uri.toShortString() + (addSlash ? "/" : ""));
keyCell.addChild("span", "class", "key_is")
.addChild("a",
new String[]{"class", "data-key", "href"},
new String[]{"finished_key_link", uri.toString(), '/' + uri.toString() + (addSlash ? "/" : "")},
uri.toShortString() + (addSlash ? "/" : ""));
} else {
keyCell.addChild("span", "class", "key_unknown", l10n("unknown"));
}
Expand Down Expand Up @@ -2115,6 +2119,9 @@ private HTMLNode createRequestTable(PageMaker pageMaker, ToadletContext ctx, Lis

HTMLNode formDiv = new HTMLNode("div", "class", "request-table-form");
HTMLNode form = ctx.addFormChild(formDiv, path(), "request-table-form-"+id+(advancedModeEnabled?"-advanced":"-simple"));
if (core.getNode().isFProxyJavascriptEnabled()) {
form.addChild("script", new String[] {"type", "src"}, new String[] {"text/javascript", "/static/js/clipboard.js"});
}
Comment on lines +2122 to +2124
Copy link
Contributor

@bertm bertm Aug 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Loading it here causes the script to be included more than once when there are multiple tables on the page (like when there are both completed and running downloads), rendering duplicate buttons for each key.

(if we cannot prevent the script from loading twice for some reason, the script should guard for this condition)


createRequestTableButtons(form, pageMaker, ctx, mimeType, hasFriends, advancedModeEnabled, priorityClasses, true, queueType);

Expand Down
6 changes: 6 additions & 0 deletions src/freenet/clients/http/staticfiles/color.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -431,3 +431,9 @@ div#statusbar div.separator {
}



.copy-to-clipboard-element:active {
color: red;
font-weight: bold;
}

19 changes: 19 additions & 0 deletions src/freenet/clients/http/staticfiles/js/clipboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
function addCopyKeyFieldToFinishedTransfers() {
if (navigator && navigator.clipboard) {
Copy link
Contributor

@bertm bertm Aug 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Window navigator property has been supported by browsers for over 10 years (including IE6 and the initial releases of Chrome, Firefox, and Edge).

There really is no need to check for that property to exist 😃

var matching = document.getElementsByClassName("finished_key_link");
Copy link
Contributor

@bertm bertm Aug 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we make this copy-to-clipboard functionality agnostic of the context in which it is used?

One could search for class="copy-to-clipboard" and use data-copy-text="{link or whatever text to copy}" and data-copy-title="{tooltip from i18n}".

for (var matchingElement of matching) {
var key = matchingElement.dataset.key;
if (key) {
var toClipboard = document.createElement("span");
toClipboard.textContent = " ⎘";
Comment on lines +8 to +9
Copy link
Contributor

@bertm bertm Aug 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Best to not use whitespace characters for positioning. A better approach would be to set a margin-inline-start in CSS. While styling, also consider user-select: none to prevent the text from being selected and cursor: pointer to indicate that this is an action.

Copy link
Contributor

@bertm bertm Aug 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As for the character (⎘), this is not something that I would immediately recognize.

The emoji glyph for clipboard (📋) might be more visually recognizable (depending on OS support). What's your take?

Copy link
Contributor Author

@ArneBab ArneBab Aug 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The character ⎘ is the only one that’s universally supported. I don’t actually see 📋 on my system (copied it as empty block).

Copy link
Contributor

@bertm bertm Sep 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mmh. In that case we might be better off rendering an SVG, as the character may be too font-dependent.

That could be something like this (quick sketch based on distant memories of similar functionality):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="height: 1em; width: 1em; margin-inline-start: .5ex; vertical-align: middle;">
  <path stroke="currentColor" stroke-width="2" d="M 2 16 v -12 a 2 2 0 0 1 2 -2 h 12 M 9 7 h 10 a 2 2 0 0 1 2 2 v 10 a 2 2 0 0 1 -2 2 h -10 a 2 2 0 0 1 -2 -2 v -10 a 2 2 0 0 1 2 -2" fill="none"></path>
</svg>
afbeelding

toClipboard.classList.add("copy-to-clipboard-element");
toClipboard.setAttribute("title", "Copy to Clipboard");
toClipboard.onclick=() => navigator.clipboard.writeText(key);
matchingElement.parentElement.appendChild(toClipboard);
Copy link
Contributor

@bertm bertm Aug 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This could directly use after() on matchingElement instead of traversing to the parent element.

}
}
}
}
document.addEventListener("DOMContentLoaded", addCopyKeyFieldToFinishedTransfers);
// @license-end
6 changes: 6 additions & 0 deletions src/freenet/clients/http/staticfiles/themes/boxed/color.css
View file
Open in desktop
Copy link
Contributor

@bertm bertm Aug 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this duplication necessary? If all is well .. all themes include src/freenet/clients/http/staticfiles/color.css anyways.

Copy link
Contributor Author

@ArneBab ArneBab Aug 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some themes don’t include color.css, because that actually causes latency of displaying toadlets to increase (despite being a local service, our static file serving is pretty slow).

Original file line number Diff line number Diff line change
Expand Up @@ -260,3 +260,9 @@ div#statusbar div.separator {
background-color: black;
}


.copy-to-clipboard-element:active {
color: red;
font-weight: bold;
}

6 changes: 6 additions & 0 deletions src/freenet/clients/http/staticfiles/themes/clean/color.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,3 +59,9 @@
/*
* Statusbar
*/

.copy-to-clipboard-element:active {
color: red;
font-weight: bold;
}

6 changes: 6 additions & 0 deletions src/freenet/clients/http/staticfiles/themes/grayandblue/color.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -289,3 +289,9 @@ tr.priority6, td.priority6 {
background-color: transparent !important;
}


.copy-to-clipboard-element:active {
color: red;
font-weight: bold;
}

6 changes: 6 additions & 0 deletions src/freenet/clients/http/staticfiles/themes/sky/color.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,3 +229,9 @@ table.queue span.progress_fraction_finalized {
#statusbar div.separator {
background-color: #d0d0f0;
}

.copy-to-clipboard-element:active {
color: red;
font-weight: bold;
}

6 changes: 6 additions & 0 deletions src/freenet/clients/http/staticfiles/themes/winterfacey/theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1482,6 +1482,12 @@ body[id*="Sone"] {
}


.copy-to-clipboard-element:active {
color: red;
font-weight: bold;
}



/** Media query **/
@media (max-width: 1500px) {
Expand Down