55 lines
1.5 KiB
JavaScript
55 lines
1.5 KiB
JavaScript
"use strict";
|
|
|
|
const display_id_length = 7;
|
|
|
|
function handle_toggle_id(event) {
|
|
event.target.closest(`.peer-name`)
|
|
.querySelector(`.peer-name-id`)
|
|
.classList.toggle(`invisible-gone`);
|
|
}
|
|
|
|
async function handle_copy_id(event) {
|
|
let peer_id = event.target
|
|
.closest(`.peer-name`)
|
|
.dataset.peer_id;
|
|
await navigator.clipboard.writeText(peer_id);
|
|
|
|
event.target.replaceChildren(document.createTextNode(`Copied!`));
|
|
|
|
setTimeout(() => {
|
|
event.target.replaceChildren(document.createTextNode(
|
|
peer_id.substring(0, display_id_length)
|
|
));
|
|
}, 1250);
|
|
|
|
// TODO: Show a fancy notification here?
|
|
}
|
|
|
|
export default function peer_name(peer) {
|
|
const result = document.createElement("span");
|
|
result.classList.add(`peer-name`);
|
|
result.dataset.peer_id = peer.id;
|
|
result.dataset.peer_name = peer.name;
|
|
|
|
const peer_name = document.createElement("span");
|
|
peer_name.classList.add(`peer-name-name`);
|
|
peer_name.appendChild(document.createTextNode(peer.name));
|
|
|
|
const peer_id = document.createElement("span");
|
|
peer_id.classList.add(`peer-name-id`, `invisible-gone`);
|
|
peer_id.appendChild(document.createTextNode(
|
|
peer.id.substring(0, display_id_length)
|
|
));
|
|
|
|
peer_name.addEventListener("click", handle_toggle_id);
|
|
peer_id.addEventListener("click", handle_copy_id);
|
|
// TODO: When the id is clicked, copy it to the clipboard - we may need a fancy tooltip library for this
|
|
|
|
// text-overflow: ellipsis; may be useful here
|
|
|
|
result.replaceChildren(peer_name, peer_id);
|
|
|
|
|
|
return result;
|
|
}
|