Sunny-Moom/webvm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

3
index.html
View File

@ -78,7 +78,10 @@ __ __ _ __ ____ __
</div> </div>
<a id="loginLink" style="user-select: text ;text-decoration: none; height: 100%;"> <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="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" 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;"> <img src="assets/tailscale.svg" height="35px" style="margin-left: 7px;">
</div> </div>
</a> </a>

28
network.js
View File

@ -12,6 +12,7 @@ function setupNetworkInterface()
}); });
const loginElem = document.getElementById("loginLink"); const loginElem = document.getElementById("loginLink");
const statusElem = document.getElementById("networkStatus"); const statusElem = document.getElementById("networkStatus");
const ipCopiedElem = document.getElementById("ipCopied");
const loginUrlCb = (url) => { const loginUrlCb = (url) => {
loginElem.href = url; loginElem.href = url;
loginElem.target = "_blank"; loginElem.target = "_blank";
@ -33,34 +34,19 @@ function setupNetworkInterface()
const netmapUpdateCb = (map) => { const netmapUpdateCb = (map) => {
const ip = map.self.addresses[0]; const ip = map.self.addresses[0];
statusElem.innerText = "IP: "+ip; statusElem.innerText = "IP: "+ip;
loginElem.title = "Right click to copy the IP" loginElem.title = "Right click to copy"
loginElem.draggable = false;
const rmb_to_copy = (event) => { const rmb_to_copy = (event) => {
// To prevent the default contexmenu from showing up when right-clicking.. // To prevent the default contexmenu from showing up when right-clicking..
event.preventDefault(); event.preventDefault();
// Copy the IP to the clipboard. // Copy the IP to the clipboard.
window.navigator.clipboard.writeText(ip) window.navigator.clipboard.writeText(ip)
.catch((msg) => { console.log("network.js: Copy ip to clipboard: Error: " + msg) }); .catch((msg) => { console.log("network.js: Copy ip to clipboard: Error: " + msg) });
statusElem.style.visibility = "hidden";
// We add the tooltip to the DOM and create the div element. ipCopiedElem.style.visibility = "unset";
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(() => { setTimeout(() => {
tooltip.remove(); statusElem.style.visibility = "unset";
statusElem.classList.remove("clicked"); ipCopiedElem.style.visibility = "hidden";
}, 1500); }, 2000);
}; };
loginElem.addEventListener("contextmenu", rmb_to_copy); loginElem.addEventListener("contextmenu", rmb_to_copy);
}; };