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

15
index.html
View File

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

46
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,36 +34,21 @@ 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";
ipCopiedElem.style.visibility = "unset";
// We add the tooltip to the DOM and create the div element. setTimeout(() => {
const tooltip = document.createElement("div"); statusElem.style.visibility = "unset";
statusElem.classList.add("clicked"); ipCopiedElem.style.visibility = "hidden";
tooltip.classList.add("tooltip"); }, 2000);
};
// Show tooltip underneath mouse when copied to clipboard. loginElem.addEventListener("contextmenu", rmb_to_copy);
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.style.cursor = "pointer"; loginElem.style.cursor = "pointer";
loginElem.title = "Connect to Tailscale"; loginElem.title = "Connect to Tailscale";