Skip to content

Commit

Permalink
Rename tooltip to clipboard
Browse files Browse the repository at this point in the history
The original JavaScript is based on a tooltip example
https://github.com/jupyterhub/jupyter-remote-desktop-proxy/blob/d702e1a68f1ffee0fab57dbbefb1c11b36c48776/js/tooltip.js#L4

but it's been modified so the naming is misleading.
  • Loading branch information
manics committed Jul 12, 2024
1 parent d702e1a commit 53c67fe
Show file tree
Hide file tree
Showing 4 changed files with 12 additions and 12 deletions.
2 changes: 1 addition & 1 deletion js/tooltip.css → js/clipboard.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
16 changes: 8 additions & 8 deletions js/tooltip.js → js/clipboard.js
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand All @@ -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`,
});
Expand All @@ -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();
Expand Down
4 changes: 2 additions & 2 deletions js/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -82,7 +82,7 @@ function connect() {
.getElementById("clipboard-text")
.addEventListener("change", clipboardSend);

setupTooltip(
setupClipboard(
document.getElementById("clipboard-button"),
document.getElementById("clipboard-container"),
);
Expand Down
2 changes: 1 addition & 1 deletion jupyter_remote_desktop_proxy/templates/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
</div>

<!-- Clipboard -->
<div id="clipboard-container" class="tooltip-container hidden">
<div id="clipboard-container" class="clipboard-container hidden">
<div class="arrow"></div>
<div id="clipboard-content">
<p>
Expand Down

0 comments on commit 53c67fe

Please sign in to comment.