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

index.html: Tooltips for tailsccale login & copy w/ right-click.

Browse Source 
IP is now selectable, no longer draggable. Button still draggable.
Right clicking the IP/icon will copy the IP to the clipboard and print a
tooltip underneath the cursor "Copied to clipboard".
This commit is contained in:
zinobias 2023-05-26 16:47:53 +02:00 committed by Alessandro Pignotti
parent e834e5e316
commit 5add2e167d
2 changed files with 38 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@ -76,12 +76,12 @@ __ __ _ __ ____ __
<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="text-decoration: none; height: 100%; cursor:not-allowed;"> <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 id="networkStatus">Connect via Tailscale </span> <span style="cursor: pointer" id="networkStatus">Connect via Tailscale </span>
<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>
<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>

33
network.js
View File

@ -32,9 +32,40 @@ function setupNetworkInterface()
}; };
const netmapUpdateCb = (map) => { const netmapUpdateCb = (map) => {
const ip = map.self.addresses[0]; const ip = map.self.addresses[0];
statusElem.innerHTML = "IP: "+ip; 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.style.cursor = "pointer"; loginElem.style.cursor = "pointer";
loginElem.title = "Connect to Tailscale";
statusElem.style.color = "white"; statusElem.style.color = "white";
return { return {
loginUrlCb, loginUrlCb,