beenull/webvm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UI: Simplified approach to IP copying support

Browse source
This commit is contained in:
Alessandro Pignotti 2023-05-30 12:35:59 +02:00
parent 5add2e167d
commit fc3861b4f0
2 changed files with 25 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
index.html
View file

@ -76,12 +76,15 @@ __ __ _ __ ____ __
<span>HDD </span>
<span id="hddactivity" style="margin-left: 7px;">&#x1F7E2;</span>
</div>
<a id="loginLink" style="user-select: text ;text-decoration: none; height: 100%;">
<div style="color: white; font-family: montserrat; font-weight: 400; font-size: large; height: 100%; display: flex; align-items: center;">
<span style="cursor: pointer" id="networkStatus">Connect via Tailscale </span>
<img src="assets/tailscale.svg" height="35px" style="margin-left: 7px;">
</div>
</a>
<a id="loginLink" style="user-select: text ;text-decoration: none; height: 100%;">
<div style="color: white; font-family: montserrat; font-weight: 400; font-size: large; height: 100%; display: flex; align-items: center;">
<div style="position: relative;">
<span style="cursor: pointer" id="networkStatus">Connect via Tailscale </span>
<span style="cursor: pointer; position: absolute; right: 0px; visibility: hidden;" id="ipCopied">Copied! </span>
</div>
<img src="assets/tailscale.svg" height="35px" style="margin-left: 7px;">
</div>
</a>
<a href="https://discord.gg/yTNZgySKGa" style="text-decoration: none; height: 100%;" target="_blank">
<div style="color: white; font-family: montserrat; font-weight: 400; font-size: large; height: 100%; display: flex; align-items: center;">
<span>Join Discord </span>

46
network.js
View file

@ -12,6 +12,7 @@ function setupNetworkInterface()
});
const loginElem = document.getElementById("loginLink");
const statusElem = document.getElementById("networkStatus");
const ipCopiedElem = document.getElementById("ipCopied");
const loginUrlCb = (url) => {
loginElem.href = url;
loginElem.target = "_blank";
@ -33,36 +34,21 @@ function setupNetworkInterface()
const netmapUpdateCb = (map) => {
const ip = map.self.addresses[0];
statusElem.innerText = "IP: "+ip;
loginElem.title = "Right click to copy the IP"
loginElem.draggable = false;
const rmb_to_copy = (event) => {
// To prevent the default contexmenu from showing up when right-clicking..
event.preventDefault();
// Copy the IP to the clipboard.
window.navigator.clipboard.writeText(ip)
.catch((msg) => { console.log("network.js: Copy ip to clipboard: Error: " + msg) });
// We add the tooltip to the DOM and create the div element.
const tooltip = document.createElement("div");
statusElem.classList.add("clicked");
tooltip.classList.add("tooltip");
// Show tooltip underneath mouse when copied to clipboard.
tooltip.style.fontSize = "13px"
tooltip.style.position = "absolute"
tooltip.style.left = `${event.clientX}px`
tooltip.style.top = `${event.clientY}px`
tooltip.style.fontWeight = "bold"
tooltip.innerText = "Copied to clipboard";
statusElem.appendChild(tooltip);
// To remove the tooltip again after some time passes.
setTimeout(() => {
tooltip.remove();
statusElem.classList.remove("clicked");
}, 1500);
};
loginElem.addEventListener("contextmenu", rmb_to_copy);
loginElem.title = "Right click to copy"
const rmb_to_copy = (event) => {
// To prevent the default contexmenu from showing up when right-clicking..
event.preventDefault();
// Copy the IP to the clipboard.
window.navigator.clipboard.writeText(ip)
.catch((msg) => { console.log("network.js: Copy ip to clipboard: Error: " + msg) });
statusElem.style.visibility = "hidden";
ipCopiedElem.style.visibility = "unset";
setTimeout(() => {
statusElem.style.visibility = "unset";
ipCopiedElem.style.visibility = "hidden";
}, 2000);
};
loginElem.addEventListener("contextmenu", rmb_to_copy);
};
loginElem.style.cursor = "pointer";
loginElem.title = "Connect to Tailscale";