Avii/Radicale
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

UI: Add copy to clipboard button to URL displays

Browse Source
This commit is contained in:
Max Berger
2026-03-29 23:46:30 +02:00
parent 045ab573db
commit afbce5ac87
6 changed files with 133 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
radicale/web/internal_data/js/scenes/CollectionsScene.js
View File

@@ -168,6 +168,7 @@ export class CollectionsScene {
/** @type {HTMLElement} */ let edit_btn = get_element(node, "[data-name=edit]");
/** @type {HTMLElement} */ let share_btn = get_element(node, "[data-name=share]");
/** @type {HTMLAnchorElement} */ let download_btn = /** @type {HTMLAnchorElement} */ (get_element(node, "[data-name=download]"));
/** @type {HTMLButtonElement} */ let copy_btn = /** @type {HTMLButtonElement} */ (get_element(node, "[data-name=copy-url]"));
if (collection.color) {
color_form.style.background = collection.color;
}
@@ -226,7 +227,7 @@ export class CollectionsScene {
contentcount_form.textContent = contentcount_form_txt;
}
let href = collection.href;
new UrlTextHandler(url_form).setHref(href);
new UrlTextHandler(url_form, copy_btn).setHref(href);
download_btn.href = href;
download_btn.onclick = (event) => {
event.preventDefault();

3
radicale/web/internal_data/js/scenes/IncomingSharingScene.js
View File

@@ -119,8 +119,9 @@ export class IncomingSharingScene {
let permissions_td = /** @type {HTMLElement} */ (get_element(node, "[data-name=permissions]"));
let enabled_cb = /** @type {HTMLInputElement} */ (get_element(node, "[data-name=enabled]"));
let shown_cb = /** @type {HTMLInputElement} */ (get_element(node, "[data-name=shown]"));
let copy_btn = /** @type {HTMLButtonElement} */ (get_element(node, "[data-name=copy-url]"));
new UrlTextHandler(pathortoken).setHref(share.PathOrToken);
new UrlTextHandler(pathortoken, copy_btn).setHref(share.PathOrToken);
owner_td.textContent = share.Owner;
displayPermissionsOrConversion(share.Conversion, share.Permissions, permissions_td);

3
radicale/web/internal_data/js/scenes/ShareCollectionScene.js
View File

@@ -181,8 +181,9 @@ function add_share_row_node(user, password, collection, share, template, delete_
node.classList.remove("hidden");
/** @type {HTMLInputElement} */ let pathortoken_form = /** @type {HTMLInputElement} */ (get_element(node, "[data-name=pathortoken]"));
/** @type {HTMLButtonElement} */ let copy_btn = /** @type {HTMLButtonElement} */ (get_element(node, "[data-name=copy-url]"));
if (pathortoken_form) {
new UrlTextHandler(pathortoken_form).setHref(pathortoken);
new UrlTextHandler(pathortoken_form, copy_btn).setHref(pathortoken);
}
let permissions = (share["Permissions"] || "").toLowerCase();

39
radicale/web/internal_data/js/utils/url_text.js
View File

@@ -1,8 +1,5 @@
/**
* This file is part of Radicale Server - Calendar Server
* Copyright © 2017-2024 Unrud <unrud@outlook.com>
* Copyright © 2023-2024 Matthew Hana <matthew.hana@gmail.com>
* Copyright © 2024-2025 Peter Bieringer <pb@bieringer.de>
* Copyright © 2026-2026 Max Berger <max@berger.name>
*
* This program is free software: you can redistribute it and/or modify
@@ -19,6 +16,9 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
/**
* Utilities for resource URL boxes
*/
import { SERVER } from "../constants.js";
/**
@@ -27,12 +27,39 @@ import { SERVER } from "../constants.js";
export class UrlTextHandler {
/**
* @param {HTMLInputElement} element The input element to handle.
* @param {HTMLButtonElement} copyButton The button element for copying.
*/
constructor(element) {
constructor(element, copyButton) {
this._element = element;
this._copyButton = copyButton;
this._element.addEventListener("focusin", () => {
this._element.setSelectionRange(0, 99999);
});
if (this._copyButton) {
this._copyButton.onclick = () => this._oncopy();
}
}
/**
* Copy the current value of the input to the clipboard.
*/
_oncopy() {
if (!this._element.value) return;
navigator.clipboard.writeText(this._element.value).then(() => {
if (this._copyButton) {
this._copyButton.classList.add("copied");
this._copyButton.title = "Copied!";
setTimeout(() => {
this._copyButton.classList.remove("copied");
this._copyButton.title = "copy";
}, 1500);
}
}).catch(err => {
console.error("Could not copy text: ", err);
});
}
/**
@@ -50,9 +77,7 @@ export class UrlTextHandler {
this._element.value = href;
}
// Scroll the input all the way to the right so that the end of
// the URL (the most important part) is visible.
// Use a timeout to ensure that the layout has been calculated.
// Needs timeout to work correctly.
setTimeout(() => {
this._element.scrollLeft = this._element.scrollWidth;
}, 0);