diff --git a/js/tooltip.css b/js/clipboard.css similarity index 94% rename from js/tooltip.css rename to js/clipboard.css index dfd09771..e31718ce 100644 --- a/js/tooltip.css +++ b/js/clipboard.css @@ -2,7 +2,7 @@ display: none !important; } -.tooltip-container { +.clipboard-container { overflow: visible; /* Needed for the arrow to show up */ width: max-content; position: absolute; diff --git a/js/tooltip.js b/js/clipboard.js similarity index 76% rename from js/tooltip.js rename to js/clipboard.js index 20f89de1..6a5f6659 100644 --- a/js/tooltip.js +++ b/js/clipboard.js @@ -4,17 +4,17 @@ * Mostly follows https://floating-ui.com/docs/tutorial */ import { computePosition, flip, shift, offset, arrow } from "@floating-ui/dom"; -import "./tooltip.css"; +import "./clipboard.css"; /** - * Setup trigger element to toggle showing / hiding tooltip element + * Setup trigger element to toggle showing / hiding clipboard element * @param {Element} trigger - * @param {Element} tooltip + * @param {Element} clipboard */ -export function setupTooltip(trigger, tooltip) { - const arrowElement = tooltip.querySelector(".arrow"); +export function setupClipboard(trigger, clipboard) { + const arrowElement = clipboard.querySelector(".arrow"); function updatePosition() { - computePosition(trigger, tooltip, { + computePosition(trigger, clipboard, { placement: "bottom", middleware: [ offset(6), @@ -23,7 +23,7 @@ export function setupTooltip(trigger, tooltip) { arrow({ element: arrowElement }), ], }).then(({ x, y, placement, middlewareData }) => { - Object.assign(tooltip.style, { + Object.assign(clipboard.style, { left: `${x}px`, top: `${y}px`, }); @@ -49,7 +49,7 @@ export function setupTooltip(trigger, tooltip) { } trigger.addEventListener("click", (e) => { - tooltip.classList.toggle("hidden"); + clipboard.classList.toggle("hidden"); trigger.classList.toggle("active"); updatePosition(); e.preventDefault(); diff --git a/js/index.js b/js/index.js index d48f914e..863f1112 100644 --- a/js/index.js +++ b/js/index.js @@ -9,7 +9,7 @@ import "./index.css"; // RFB holds the API to connect and communicate with a VNC server import RFB from "@novnc/novnc/core/rfb"; -import { setupTooltip } from "./tooltip.js"; +import { setupClipboard } from "./clipboard.js"; const maxRetryCount = 5; const retryInterval = 3; // seconds @@ -82,7 +82,7 @@ function connect() { .getElementById("clipboard-text") .addEventListener("change", clipboardSend); - setupTooltip( + setupClipboard( document.getElementById("clipboard-button"), document.getElementById("clipboard-container"), ); diff --git a/jupyter_remote_desktop_proxy/templates/index.html b/jupyter_remote_desktop_proxy/templates/index.html index 827d925a..38b88c09 100644 --- a/jupyter_remote_desktop_proxy/templates/index.html +++ b/jupyter_remote_desktop_proxy/templates/index.html @@ -41,7 +41,7 @@ -